Fix download button

4 files changed, 35 insertions, 45 deletions

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 88af68910a8..b89e3f14b3b 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
@@ -1,42 +1,30 @@
 import React from 'react';
-import transform from '../../TransformVespaTrace';
-import { useQueryBuilderContext } from 'app/pages/querybuilder/Components/Contexts/QueryBuilderProvider';
-
-export default function DownloadJSONButton({ children }) {
-  const response = useQueryBuilderContext((ctx) => ctx.http.response);
-
-  const transformResponse = (response) => {
-    return transform(response);
-  };
+import transform from 'app/pages/querybuilder/TransformVespaTrace';
 
+export default function DownloadJSONButton({ children, response }) {
   const handleClick = () => {
-    if (response != '') {
-      let transformedResponse = JSON.stringify(
-        transformResponse(JSON.parse(response), undefined, '\t')
-      );
-      // copied from safakeskin´s answer on SO, link: https://stackoverflow.com/questions/55613438/reactwrite-to-json-file-or-export-download-no-server
-      const fileName = 'vespa-response';
-      const blob = new Blob([transformedResponse], {
-        type: 'application/json',
-      });
-      const href = URL.createObjectURL(blob);
+    let content;
+    try {
+      content = JSON.stringify(transform(JSON.parse(response), null, 4));
+    } catch (error) {
+      alert(`Failed to transform response to Jaeger format: ${error}`); // TODO: Change to toast
+      return;
+    }
 
-      // create "a" HTLM element with href to file
-      const link = document.createElement('a');
-      link.href = href;
-      link.download = fileName + '.json';
-      document.body.appendChild(link);
-      link.click();
+    // copied from safakeskin´s answer on SO, link: https://stackoverflow.com/questions/55613438/reactwrite-to-json-file-or-export-download-no-server
+    const blob = new Blob([content], { type: 'application/json' });
+    const href = URL.createObjectURL(blob);
 
-      // clean up "a" element & remove ObjectURL
-      document.body.removeChild(link);
-      URL.revokeObjectURL(href);
+    // create "a" HTML element with href to file
+    const link = document.createElement('a');
+    link.href = href;
+    link.download = 'vespa-response.json';
+    document.body.appendChild(link);
+    link.click();
 
-      // open Jaeger in a new tab
-      window.open('http://localhost:16686/search', '__blank');
-    } else {
-      alert('Response was empty');
-    }
+    // clean up "a" element & remove ObjectURL
+    document.body.removeChild(link);
+    URL.revokeObjectURL(href);
   };
 
   return <button onClick={handleClick}>{children}</button>;
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryBuilderProvider.jsx b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryBuilderProvider.jsx
index 808dab3a8c8..2eebbb9b8b5 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryBuilderProvider.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryBuilderProvider.jsx
@@ -103,7 +103,7 @@ function preReducer(state, { action, data }) {
         const children = jsonToInputs(JSON.parse(data), root);
         return { ...state, query: { ...root, children } };
       } catch (error) {
-        // TODO: Display error somehow
+        alert(`Failed to parse query: ${error}`); // TODO: Change to toast
         return state;
       }
     }
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 c0da870823e..b101e8639fb 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -19,7 +19,15 @@ function QueryBox() {
 
 function ResponseBox() {
   const response = useQueryBuilderContext((ctx) => ctx.http.response);
-  return <textarea readOnly cols="70" rows="25" value={response} />;
+  return (
+    <>
+      <textarea readOnly cols="70" rows="25" value={response} />
+      <CopyResponseButton />
+      <DownloadJSONButton response={response}>
+        Download in Jeager format
+      </DownloadJSONButton>
+    </>
+  );
 }
 
 export function QueryBuilder() {
@@ -41,8 +49,6 @@ export function QueryBuilder() {
           <QueryBox />
           <p className="response">Response</p>
           <ResponseBox />
-          <CopyResponseButton />
-          <DownloadJSONButton>Download response as JSON</DownloadJSONButton>
         </QueryBuilderProvider>
         <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 7d9d32fe1b7..c3212c70c8a 100644
--- a/client/js/app/src/app/pages/querytracer/query-tracer.jsx
+++ b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
@@ -3,11 +3,7 @@ import DownloadJSONButton from '../querybuilder/Components/Buttons/DownloadJSONB
 import { Container } from 'app/components';
 
 export function QueryTracer() {
-  const { response, setResponse } = useState('');
-
-  const updateResponse = (e) => {
-    setResponse(e.target.value);
-  };
+  const [response, setResponse] = useState('');
 
   return (
     <Container>
@@ -15,10 +11,10 @@ export function QueryTracer() {
         cols="70"
         rows="25"
         value={response}
-        onChange={updateResponse}
+        onChange={({ target }) => setResponse(target.value)}
       ></textarea>
-      <DownloadJSONButton>
-        Convert to Jeager format and download trace
+      <DownloadJSONButton response={response}>
+        Download in Jeager format
       </DownloadJSONButton>
     </Container>
   );