feat: add option to trace queries (#59)

Co-authored-by: broknloop <90255202+broknloop@users.noreply.github.com>
spotify · Dec 11, 2023 · ede224b · ede224b
1 parent 605976d
commit ede224b
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 34 deletions.
diff --git a/src/main/js/components/query-result/query-result.js b/src/main/js/components/query-result/query-result.js
@@ -4,8 +4,9 @@ import {androidstudio} from "react-syntax-highlighter/dist/cjs/styles/hljs";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import Loading from "../../routes/loading/loading";
 import VispanaError from "../../routes/error/vispana-error";
+import TabView from "../tabs/tab-view";
 
-function QueryResult({containerUrl, vispanaClient, query, showResults, schema, refreshQuery, defaultPageSize = 15}) {
+function QueryResult({containerUrl, vispanaClient, query, showResults, schema, refreshQuery, defaultPageSize = 15, useTabs = false}) {
     // customize theme
     createTheme('dark', {
         text: {
@@ -25,7 +26,7 @@ function QueryResult({containerUrl, vispanaClient, query, showResults, schema, r
     });
 
     // data state
-    const [data, setData] = useState({columns: [], content: []});
+    const [data, setData] = useState({columns: [], content: [], trace: []});
     const [loading, setLoading] = useState(true);
     const [totalRows, setTotalRows] = useState(0);
 
@@ -75,8 +76,8 @@ function QueryResult({containerUrl, vispanaClient, query, showResults, schema, r
                 const vespaState = response.success;
                 setTotalRows(vespaState.root.fields.totalCount);
 
-                const gridData = processResult(vespaState);
-                setData(gridData);
+                const resultData = processResult(vespaState);
+                setData(resultData);
 
                 setError({
                     hasError: false,
@@ -135,36 +136,67 @@ function QueryResult({containerUrl, vispanaClient, query, showResults, schema, r
         load();
     }, [refreshQuery]);
 
-    return (
-        <>
-            {!error.hasError && <DataTable
-                theme="dark"
-                customStyles={{
-                    head: {
-                        style: {
-                            color: '#facc15'
-                        }
-                    }
-                }}
-                columns={data.columns}
-                data={data.content}
-                fixedHeader
-                expandableRows
-                expandableRowsComponent={ExpandedComponent}
-                progressPending={loading}
-                progressComponent={<Loading centralize={false}/>}
-                pagination
-                paginationPerPage={defaultPageSize}
-                paginationServer
-                paginationTotalRows={totalRows}
-                onChangeRowsPerPage={handlePerRowsChange}
-                onChangePage={handlePageChange}
-            />}
-            {error.hasError && (<VispanaError showLogo={false} errorMessage={{
+    if (error.hasError) {
+        return (
+            <VispanaError showLogo={false} errorMessage={{
                 title: "Failed to execute the query",
                 description: error.error
-            }}/>)}
-        </>
+            }}/>
+        )
+    }
+
+    const results = (
+        <DataTable
+            theme="dark"
+            customStyles={{
+                head: {
+                    style: {
+                        color: '#facc15'
+                    }
+                }
+            }}
+            columns={data.columns}
+            data={data.content}
+            fixedHeader
+            expandableRows
+            expandableRowsComponent={ExpandedComponent}
+            progressPending={loading}
+            progressComponent={<Loading centralize={false}/>}
+            pagination
+            paginationPerPage={defaultPageSize}
+            paginationServer
+            paginationTotalRows={totalRows}
+            onChangeRowsPerPage={handlePerRowsChange}
+            onChangePage={handlePageChange}
+        />
+    )
+
+    if (!useTabs) {
+        return results
+    }
+
+    const tabs = [
+        {
+            "header": "Results",
+            "content": results
+        }
+    ]
+
+    if (data.trace.length > 0) {
+        tabs.push(
+            {
+                "header": "Trace",
+                "content": (
+                    <SyntaxHighlighter language="json" style={androidstudio}>
+                        {JSON.stringify(data.trace, null, 2)}
+                    </SyntaxHighlighter>
+                )
+            }
+        )
+    }
+
+    return (
+        <TabView tabs={tabs} />
     )
 }
 
@@ -211,9 +243,12 @@ function processResult(result) {
         return fields
     })
 
+    const trace = "trace" in result ? result.trace.children : []
+
     return {
         columns: columns,
-        content: data
+        content: data,
+        trace: trace
     }
 }
 

diff --git a/src/main/js/routes/schema/query.js b/src/main/js/routes/schema/query.js
@@ -23,6 +23,22 @@ function Query({containerUrl, schema}) {
         }
     }
 
+    function addTrace() {
+        try {
+            const parsed = JSON.parse(query)
+            if ("trace" in parsed) {
+                return // don't overwrite if it's already there
+            }
+            parsed["trace"] = {
+                "level": 5,
+                "explainLevel": 1,
+                "timestamps": true
+            }
+            setQuery(JSON.stringify(parsed, null, 2))
+        } catch (_) {
+        }
+    }
+
     const vispanaClient = new VispanaApiClient()
     const [query, setQuery] = useState(defaultQuery(schema))
     const [showResults, setShowResults] = useState(false)
@@ -56,6 +72,14 @@ function Query({containerUrl, schema}) {
                     onClick={prettifyJsonQuery}>
                 <i className="fas fa-code block"/>
             </button>
+            <button type="button"
+                    className="btn bg-standout-blue text-yellow-400 w-13 text-center border-none outline-none mr-1"
+                    data-tooltip-id="vispana-tooltip"
+                    data-tooltip-content="Add Trace"
+                    data-tooltip-place="top"
+                    onClick={addTrace}>
+                <i className="fas fa-search block"/>
+            </button>
             <button type="button"
                     className="btn bg-standout-blue text-yellow-400 w-32 btn-blue border-none outline-none"
                     data-tooltip-id="vispana-tooltip"
@@ -75,7 +99,8 @@ function Query({containerUrl, schema}) {
                          schema={schema}
                          render={showResults}
                          refreshQuery={refreshQuery}
-                         vispanaClient={vispanaClient}/>
+                         vispanaClient={vispanaClient}
+                         useTabs={true}/>
         </div>}
         <Tooltip id="vispana-tooltip" />
     </div>