Added page for pasting Vespa trace, transforming and downloading trace

4 files changed, 29 insertions, 8 deletions

diff --git a/client/js/app/src/app/main.jsx b/client/js/app/src/app/main.jsx
index 96514d419e1..08f86115d40 100644
--- a/client/js/app/src/app/main.jsx
+++ b/client/js/app/src/app/main.jsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from 'app/app';
+import { ResponseProvider } from './pages/querybuilder/Components/Contexts/ResponseContext';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <ResponseProvider>
+      <App />
+    </ResponseProvider>
   </React.StrictMode>
 );
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/DownloadJSONButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/DownloadJSONButton.jsx
index ad6da79e709..7ec6683afa3 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/DownloadJSONButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/DownloadJSONButton.jsx
@@ -3,7 +3,7 @@ import { ResponseContext } from '../Contexts/ResponseContext';
 import transform from '../../TransformVespaTrace';
 import SimpleButton from './SimpleButton';
 
-export default function DownloadJSONButton() {
+export default function DownloadJSONButton({ children }) {
   const { response } = useContext(ResponseContext);
 
   const transformResponse = (response) => {
@@ -40,7 +40,5 @@ export default function DownloadJSONButton() {
     }
   };
 
-  return (
-    <SimpleButton onClick={handleClick}>Download response as JSON</SimpleButton>
-  );
+  return <SimpleButton onClick={handleClick}>{children}</SimpleButton>;
 }
diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
index 465720595f7..42a4ed829c3 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -42,7 +42,7 @@ export function QueryBuilder() {
             <TextBox className="response">Response</TextBox>
             <ResponseBox />
             <CopyResponseButton />
-            <DownloadJSONButton />
+            <DownloadJSONButton>Download response as JSON</DownloadJSONButton>
           </ResponseProvider>
           <br />
           <br />
diff --git a/client/js/app/src/app/pages/querytracer/query-tracer.jsx b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
index 94c293d37ed..c700b73ebba 100644
--- a/client/js/app/src/app/pages/querytracer/query-tracer.jsx
+++ b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
@@ -1,6 +1,26 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import DownloadJSONButton from '../querybuilder/Components/Buttons/DownloadJSONButton';
+import { ResponseContext } from '../querybuilder/Components/Contexts/ResponseContext';
 import { Container } from 'app/components';
 
 export function QueryTracer() {
-  return <Container>query tracer</Container>;
+  const { response, setResponse } = useContext(ResponseContext);
+
+  const updateResponse = (e) => {
+    setResponse(e.target.value);
+  };
+
+  return (
+    <Container>
+      <textarea
+        cols="70"
+        rows="25"
+        value={response}
+        onChange={updateResponse}
+      ></textarea>
+      <DownloadJSONButton>
+        Convert to Jeager format and download trace
+      </DownloadJSONButton>
+    </Container>
+  );
 }