Merge pull request #23593 from Ethnas/master

updated readme with info about trace visualizer

4 files changed, 36 insertions, 1 deletions

diff --git a/client/js/app/README.md b/client/js/app/README.md
index c3a9e2cac50..7e7aed1b2e1 100644
--- a/client/js/app/README.md
+++ b/client/js/app/README.md
@@ -2,7 +2,42 @@
 
 # Vespa client
 
-This app is work in progress
+This app is work in progress.
+
+This client currently contains the **Query Builder** and the **Trace Visualizer**.
+
+# Query Builder
+
+The Query Builder is a tool for creating Vespa queries to send to a local backend.  
+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.
+
+# Trace Visualizer
+
+The Trace Visualizer is a tool for converting and visualizing traces from Vespa in a flame graph.  
+To use the visualizer, a [Jaeger](https://www.jaegertracing.io/) instance must be run locally with Docker.
+
+    docker run -d --rm \
+    -p 16685:16685 \
+    -p 16686:16686 \
+    -p 16687:16687 \
+    -e SPAN_STORAGE_TYPE=memory \
+    jaegertracing/jaeger-query:latest
+
+To use the visualizer you paste the Vespa trace into the text box and press the button to convert the trace  
+to a format supported by Jaeger and download it.  
+Only Vespa traces using _trace.timestampa=true_ **and** _traceLevel_ between 3 and 5 (inclusive) will work correctly.
+
+![Trace Converter](/img/TraceConverter.png)
+
+When downloading the trace a new tab with Jeager will open up.  
+Press the _JSON File_ button as shown in the image, and drag and drop the trace you just downloaded.
+
+![Jager Image](/img/JaegerExample.png)
+
+You can then click on the newly added trace and see it displayed as a flame graph.
+
+![Example Image](/img/result.png)
 
 # Client install and start
 
diff --git a/client/js/app/img/JaegerExample.png b/client/js/app/img/JaegerExample.png
new file mode 100644
index 00000000000..646123962ad
--- /dev/null
+++ b/client/js/app/img/JaegerExample.png
diff --git a/client/js/app/img/TraceConverter.png b/client/js/app/img/TraceConverter.png
new file mode 100644
index 00000000000..9d7146556a1
--- /dev/null
+++ b/client/js/app/img/TraceConverter.png
diff --git a/client/js/app/img/result.png b/client/js/app/img/result.png
new file mode 100644
index 00000000000..6f17cc783bb
--- /dev/null
+++ b/client/js/app/img/result.png