aboutsummaryrefslogtreecommitdiffstats
path: root/client/js
diff options
context:
space:
mode:
authorKristian Aune <kraune@verizonmedia.com>2022-08-18 13:22:21 +0200
committerKristian Aune <kraune@verizonmedia.com>2022-08-18 13:22:21 +0200
commit08526e7f1e02c9f8d1063e6c64cdd662c091371e (patch)
treeb14836ed591ba682d21e6065bb80dac5f965905b /client/js
parent0a104de7eb755bd37a62dcef759fbdaad8215e37 (diff)
Add config steps to readme
Diffstat (limited to 'client/js')
-rw-r--r--client/js/app/README.md70
-rw-r--r--client/js/app/img/querybuilder.pngbin0 -> 95609 bytes
2 files changed, 57 insertions, 13 deletions
diff --git a/client/js/app/README.md b/client/js/app/README.md
index ae6a8d1cc25..9dbce216224 100644
--- a/client/js/app/README.md
+++ b/client/js/app/README.md
@@ -3,17 +3,71 @@
![Vespa logo](https://vespa.ai/assets/vespa-logo-color.png)
# Vespa client
+This app contains the **Query Builder** and the **Trace Visualizer**.
-This app is work in progress.
-It currently contains the **Query Builder** and the **Trace Visualizer**.
+Install and start:
+
+ $ nvm install --lts node # in case the installed node.js is too old
+ $ yarn install
+ $ yarn dev # then open link, like http://127.0.0.1:3000/
+
+Alternatively, use Docker to start it without installing node:
+
+ $ docker run -v `pwd`:/w -w /w --publish 3000:3000 node:16 sh -c 'yarn install && yarn dev --host'
+
+When started, open [http://127.0.0.1:3000/](http://127.0.0.1:3000/).
+
+*Troubleshooting:* Remove the generated `node_modules` directory and try again.
+This is also relevant when switching between running local and in the container.
## Query Builder
-The Query Builder is a tool for creating Vespa queries to send to a local backend.
+The Query Builder is a tool for creating Vespa queries to send to a local Vespa application.
The tool provides all of the options for query parameters from dropdowns.
The input fields provide hints to what is the expected type of value.
+![Query Builder](img/querybuilder.png)
+
+To access a Vespa endpoint from the Query Builder,
+deploy with [CORS filters](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
+To the query-serving container, add an `http` element in _services.xml_ like:
+```
+ <container id="default" version="1.0">
+
+ <http>
+ <filtering strict-mode="false">
+ <request-chain id="request-chain">
+ <filter id="com.yahoo.jdisc.http.filter.security.cors.CorsPreflightRequestFilter"
+ bundle="jdisc-security-filters">
+ <config name="jdisc.http.filter.security.cors.cors-filter">
+ <allowedUrls>
+ <item>*</item>
+ </allowedUrls>
+ </config>
+ </filter>
+ <binding>http://*/search/</binding>
+ </request-chain>
+
+ <response-chain id="response-chain">
+ <filter id="com.yahoo.jdisc.http.filter.security.cors.CorsResponseFilter"
+ bundle="jdisc-security-filters">
+ <config name="jdisc.http.filter.security.cors.cors-filter">
+ <allowedUrls>
+ <item>*</item>
+ </allowedUrls>
+ </config>
+ </filter>
+ <binding>http://*/search/</binding>
+ </response-chain>
+ </filtering>
+
+ <server port="8080" id="default"/>
+ </http>
+```
+
+Deploy again, and (possibly) restart Vespa (internal port changes can be triggered by this).
+
## Trace Visualizer
@@ -45,13 +99,3 @@ Press the _JSON File_ button as shown in the image, and drag and drop the trace
Then click on the newly added trace and see it displayed as a flame graph:
![Example Image](img/result.png)
-
-
-
-## Client install and start
-
- nvm install --lts node # in case your current node.js is too old
- yarn install
- yarn dev # then open link, like http://127.0.0.1:3000/
-
-<!-- ToDo: publish a Docker image with all the clients ... -->
diff --git a/client/js/app/img/querybuilder.png b/client/js/app/img/querybuilder.png
new file mode 100644
index 00000000000..fa68f5bb82f
--- /dev/null
+++ b/client/js/app/img/querybuilder.png
Binary files differ