1 files changed, 22 insertions, 2 deletions
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>
+  );
 }