init

getsentry · Jan 14, 2025 · aa98b7d · aa98b7d
1 parent fd64fa5
commit aa98b7d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/snuba/admin/static/clickhouse_queries/query_display.tsx b/snuba/admin/static/clickhouse_queries/query_display.tsx
@@ -4,7 +4,7 @@ import { Collapse } from "SnubaAdmin/collapse";
 import QueryEditor from "SnubaAdmin/query_editor";
 import ExecuteButton from "SnubaAdmin/utils/execute_button";
 
-import { SelectItem, Switch } from "@mantine/core";
+import { SelectItem, Switch, Alert } from "@mantine/core";
 import { Prism } from "@mantine/prism";
 import { RichTextEditor } from "@mantine/tiptap";
 import { useEditor } from "@tiptap/react";
@@ -37,6 +37,12 @@ function QueryDisplay(props: {
     getRecentHistory(HISTORY_KEY)
   );
 
+  type QueryError = {
+    title: string;
+    body: string;
+  }
+  const [queryError, setQueryError] = useState<QueryError | null>(null);
+
   useEffect(() => {
     props.api.getClickhouseNodes().then((res) => {
       setNodeData(res);
@@ -90,6 +96,7 @@ function QueryDisplay(props: {
     return props.api
       .executeSystemQuery(query as QueryRequest)
       .then((result) => {
+        setQueryError(null);  // clear any previous error
         result.input_query = `${query.sql} (${query.storage},${query.host}:${query.port})`;
         setRecentHistory(HISTORY_KEY, result);
         setQueryResultHistory((prevHistory) => [result, ...prevHistory]);
@@ -127,6 +134,30 @@ function QueryDisplay(props: {
     return [];
   }
 
+  function getErrorDomElement() {
+    if (queryError !== null) {
+      const bodyDOM = queryError.body.split("\n").map((line) => <React.Fragment>{line}< br /></React.Fragment>)
+      return <Alert title={queryError.title} color="red">{bodyDOM}</Alert>;
+    }
+    return "";
+  }
+
+  function handleQueryError(error: any) {
+    const lines = error.error.split("\n");
+    debugger;
+    if (lines.length > 1) {
+      setQueryError({
+        title: lines[0],
+        body: lines.slice(1).join("\n"),
+      })
+    } else {
+      setQueryError({
+        title: error,
+        body: ""
+      });
+    }
+  }
+
   return (
     <div>
       <form style={query.sudo ? sudoForm : standardForm}>
@@ -168,6 +199,7 @@ function QueryDisplay(props: {
           </div>
           <div>
             <ExecuteButton
+              onError={handleQueryError}
               onClick={executeQuery}
               disabled={
                 !query.storage || !query.host || !query.port || !query.sql
@@ -176,6 +208,9 @@ function QueryDisplay(props: {
           </div>
         </div>
       </form>
+      <div>
+        {getErrorDomElement()}
+      </div>
       <div>
         <h2>Query results</h2>
         {queryResultHistory.map((queryResult, idx) => {

diff --git a/snuba/admin/static/utils/execute_button.tsx b/snuba/admin/static/utils/execute_button.tsx
@@ -4,7 +4,7 @@ import { Button } from "@mantine/core";
 function ExecuteButton(props: {
   disabled: boolean;
   onClick: () => Promise<any>;
-  onError?: (error: any) => any;
+  onError?: (error: any) => any;  // TODO: we should make the type of error we return more specific
   label?: string;
 }) {
   const [isExecuting, setIsExecuting] = useState<boolean>(false);