feat(webui): Add drawer to display guided query and errors.

components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/GuidedRunButton.tsx

@@ -38,6 +38,8 @@ const GuidedRunButton = () => {
     const select = usePrestoSearchState((state) => state.select);
     const from = usePrestoSearchState((state) => state.from);
     const timestampKey = usePrestoSearchState((state) => state.timestampKey);
+    const updateCachedGuidedSearchQueryString =
+        usePrestoSearchState((state) => state.updateCachedGuidedSearchQueryString);
 
     const [messageApi, contextHolder] = message.useMessage();
 
@@ -69,6 +71,7 @@ const GuidedRunButton = () => {
 
         const {searchQueryString, timelineQueryString} = buildPrestoGuidedQueries(newTimeRange);
         handlePrestoGuidedQuerySubmit(searchQueryString, timelineQueryString);
+        updateCachedGuidedSearchQueryString(searchQueryString);
         const newTimelineConfig = computeTimelineConfig(newTimeRange);
         updateTimelineConfig(newTimelineConfig);
     }, [
@@ -77,6 +80,7 @@ const GuidedRunButton = () => {
         timeRangeOption,
         updateTimeRange,
         updateTimelineConfig,
+        updateCachedGuidedSearchQueryString,
     ]);
 
     return (

components/webui/client/src/pages/SearchPage/SearchControls/Presto/presto-guided-search-requests.ts

@@ -119,6 +119,10 @@ const handlePrestoGuidedQuerySubmit = (searchQueryString: string, timelineQueryS
         searchUiState,
     } = useSearchStore.getState();
 
+    const {
+        updateErrorMsg, updateErrorName,
+    } = usePrestoSearchState.getState();
+
     // User should NOT be able to submit a new query while an existing query is in progress.
     if (
         searchUiState !== SEARCH_UI_STATE.DEFAULT &&
@@ -137,6 +141,9 @@ const handlePrestoGuidedQuerySubmit = (searchQueryString: string, timelineQueryS
     updateNumSearchResultsMetadata(SEARCH_STATE_DEFAULT.numSearchResultsMetadata);
     updateSearchUiState(SEARCH_UI_STATE.QUERY_ID_PENDING);
 
+    updateErrorMsg(null);
+    updateErrorName(null);
+
     submitQuery({queryString: searchQueryString})
         .then((result) => {
             const {searchJobId} = result.data;

components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/OpenQueryDrawerButton.tsx

@@ -0,0 +1,47 @@
+import {EyeOutlined} from "@ant-design/icons";
+import {
+    Button,
+    theme,
+    Tooltip,
+} from "antd";
+
+import useSearchStore from "../../SearchState";
+import usePrestoSearchState from "../../SearchState/Presto";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
+
+
+/**
+ * Renders a button that opens the query drawer.
+ *
+ * @return
+ */
+const OpenQueryDrawerButton = () => {
+    const {token} = theme.useToken();
+    const updateQueryDrawerOpen = usePrestoSearchState((s) => s.updateQueryDrawerOpen);
+    const searchUiState = useSearchStore((s) => s.searchUiState);
+
+    const tooltipText =
+        searchUiState === SEARCH_UI_STATE.FAILED ?
+            "See modified query and error" :
+            "See modified query";
+
+    return (
+        <Tooltip title={tooltipText}>
+            <Button
+                color={"default"}
+                size={"small"}
+                variant={"filled"}
+                icon={
+                    <EyeOutlined
+                        style={{
+                            color: token.colorTextSecondary,
+                        }}/>
+                }
+                onClick={() => {
+                    updateQueryDrawerOpen(true);
+                }}/>
+        </Tooltip>
+    );
+};
+
+export default OpenQueryDrawerButton;

components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/QueryDrawer.module.css

@@ -0,0 +1,5 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}

components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/QueryDrawer.tsx

@@ -0,0 +1,86 @@
+import {
+    Alert,
+    Drawer,
+    theme,
+    Typography,
+} from "antd";
+
+import SqlEditor from "../../../../components/SqlEditor";
+import useSearchStore from "../../SearchState";
+import usePrestoSearchState from "../../SearchState/Presto";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
+import styles from "./QueryDrawer.module.css";
+
+
+const {Text} = Typography;
+
+/**
+ * Renders the query details drawer, showing the modified SQL query and error (if any).
+ *
+ * @return
+ */
+const QueryDrawer = () => {
+    const {token} = theme.useToken();
+    const queryDrawerOpen = usePrestoSearchState((s) => s.queryDrawerOpen);
+    const errorName = usePrestoSearchState((s) => s.errorName);
+    const errorMsg = usePrestoSearchState((s) => s.errorMsg);
+    const cachedGuidedSearchQueryString =
+        usePrestoSearchState((s) => s.cachedGuidedSearchQueryString);
+    const updateQueryDrawerOpen = usePrestoSearchState((s) => s.updateQueryDrawerOpen);
+    const searchUiState = useSearchStore((s) => s.searchUiState);
+    const searchJobId = useSearchStore((s) => s.searchJobId);
+
+    return (
+        <Drawer
+            open={queryDrawerOpen}
+            placement={"right"}
+            title={`Query Details \n ${searchJobId ?? ""}`}
+            styles={{
+                body: {background: token.colorBgLayout},
+                header: {
+                    background: token.colorBgContainer,
+                },
+            }}
+            onClose={() => {
+                updateQueryDrawerOpen(false);
+            }}
+        >
+            <div className={styles["container"]}>
+                <Text strong={true}>
+                    {"Modified SQL Query: "}
+                </Text>
+                <div>
+                    <SqlEditor
+                        disabled={false}
+                        height={"120px"}
+                        value={cachedGuidedSearchQueryString}
+                        options={{
+                            automaticLayout: true,
+                            folding: false,
+                            lineNumbers: "on",
+                            lineNumbersMinChars: 2,
+                            minimap: {enabled: false},
+                            overviewRulerBorder: false,
+                            padding: {
+                                top: 8,
+                                bottom: 8,
+                            },
+                            readOnly: true,
+                            renderLineHighlight: "none",
+                            scrollBeyondLastLine: false,
+                            wordWrap: "on",
+                        }}/>
+                </div>
+                {searchUiState === SEARCH_UI_STATE.FAILED && (
+                    <Alert
+                        description={errorMsg}
+                        message={errorName}
+                        showIcon={true}
+                        type={"error"}/>
+                )}
+            </div>
+        </Drawer>
+    );
+};
+
+export default QueryDrawer;

components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/Results.tsx

@@ -1,16 +1,11 @@
 import {useMemo} from "react";
 
-import {
-    GetProps,
-    Typography,
-} from "antd";
+import {Typography} from "antd";
 
 import useSearchStore from "../../SearchState/index";
-import {SEARCH_UI_STATE} from "../../SearchState/typings";
 
 
 const {Text} = Typography;
-type TextTypes = GetProps<typeof Text>["type"];
 
 
 /**
@@ -22,7 +17,6 @@ const Results = () => {
     const numSearchResultsMetadata = useSearchStore((state) => state.numSearchResultsMetadata);
     const numSearchResultsTimeline = useSearchStore((state) => state.numSearchResultsTimeline);
     const numSearchResultsTable = useSearchStore((state) => state.numSearchResultsTable);
-    const searchUiState = useSearchStore((state) => state.searchUiState);
 
     // Number of results is the maximum from timeline, table, and server metadata sources.
     // Multiple sources provide more timely updates. Source behavior differs by query engine:
@@ -37,29 +31,10 @@ const Results = () => {
         ]
     );
 
-    let textType: TextTypes;
-    switch (searchUiState) {
-        case SEARCH_UI_STATE.QUERYING:
-            textType = "warning";
-            break;
-        case SEARCH_UI_STATE.DEFAULT:
-        case SEARCH_UI_STATE.QUERY_ID_PENDING:
-            textType = "secondary";
-            break;
-        case SEARCH_UI_STATE.DONE:
-            textType = "success";
-            break;
-        case SEARCH_UI_STATE.FAILED:
-            textType = "danger";
-            break;
-        default:
-            textType = "secondary";
-    }
-
     return (
         <Text
             strong={true}
-            type={textType}
+            type={"secondary"}
         >
             {numResults}
         </Text>

components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/index.tsx

@@ -1,7 +1,15 @@
 import {Typography} from "antd";
 
+import {
+    CLP_QUERY_ENGINES,
+    SETTINGS_QUERY_ENGINE,
+} from "../../../../config";
 import useSearchStore from "../../SearchState/index";
+import usePrestoSearchState from "../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../SearchState/Presto/typings";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
+import OpenQueryDrawerButton from "./OpenQueryDrawerButton";
+import QueryDrawer from "./QueryDrawer";
 import Results from "./Results";
 
 
@@ -18,22 +26,100 @@ const QueryStatus = () => {
         searchUiState,
     } = useSearchStore();
 
+    const sqlInterface = usePrestoSearchState((state) => state.sqlInterface);
+    const isPrestoGuided = SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO &&
+        sqlInterface === PRESTO_SQL_INTERFACE.GUIDED;
+
     return (
-        <div>
-            {(searchUiState === SEARCH_UI_STATE.QUERYING ||
-                searchUiState === SEARCH_UI_STATE.DONE) && (
-                <Text type={"secondary"}>
-                    Search job
+        <>
+            {searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING && (
+                <>
+                    {isPrestoGuided && (
+                        <>
+                            <OpenQueryDrawerButton/>
+                            {" "}
+                        </>
+                    )}
+                    <Text
+                        strong={true}
+                        type={"warning"}
+                    >
+                        Running
+                    </Text>
+                </>
+            )}
+            {searchUiState === SEARCH_UI_STATE.QUERYING && (
+                <>
+                    {isPrestoGuided && (
+                        <>
+                            <OpenQueryDrawerButton/>
+                            {" "}
+                        </>
+                    )}
+                    <Text
+                        strong={true}
+                        type={"warning"}
+                    >
+                        Running
+                    </Text>
+                    <Text type={"secondary"}>
+                        {` - search job ${searchJobId} found `}
+                    </Text>
+                    <Results/>
                     {" "}
-                    {searchJobId}
+                    <Text type={"secondary"}>results</Text>
+                </>
+            )}
+            {searchUiState === SEARCH_UI_STATE.DONE && (
+                <>
+                    {isPrestoGuided && (
+                        <>
+                            <OpenQueryDrawerButton/>
+                            {" "}
+                        </>
+                    )}
+                    <Text
+                        strong={true}
+                        type={"success"}
+                    >
+                        Success
+                    </Text>
+                    <Text type={"secondary"}>
+                        {` - search job ${searchJobId} found `}
+                    </Text>
+                    <Results/>
                     {" "}
-                    found
+                    <Text type={"secondary"}>results</Text>
+                </>
+            )}
+            {searchUiState === SEARCH_UI_STATE.FAILED && (
+                <>
+                    {isPrestoGuided && (
+                        <>
+                            <OpenQueryDrawerButton/>
+                            {" "}
+                        </>
+                    )}
+                    <Text
+                        strong={true}
+                        type={"danger"}
+                    >
+                        Failure
+                    </Text>
+                    <Text type={"secondary"}>
+                        {` - search job ${searchJobId}`}
+                    </Text>
+                </>
+            )}
+            {(searchUiState === SEARCH_UI_STATE.DEFAULT) && (
+                <>
+                    <Results/>
                     {" "}
-                </Text>
+                    <Text type={"secondary"}>results</Text>
+                </>
             )}
-            <Results/>
-            <Text type={"secondary"}> results</Text>
-        </div>
+            {isPrestoGuided && <QueryDrawer/>}
+        </>
     );
 };
 

components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/Presto/PrestoResultsTimeline.tsx

@@ -13,6 +13,7 @@ import {
 } from "../../../SearchControls/Presto/presto-guided-search-requests";
 import {TIME_RANGE_OPTION} from "../../../SearchControls/TimeRangeInput/utils";
 import useSearchStore from "../../../SearchState/index";
+import usePrestoSearchState from "../../../SearchState/Presto";
 import {SEARCH_UI_STATE} from "../../../SearchState/typings";
 import {computeTimelineConfig} from "../utils";
 import {usePrestoAggregationResults} from "./usePrestoAggregationResults";
@@ -37,12 +38,15 @@ const PrestoResultsTimeline = () => {
             updateTimelineConfig,
         } = useSearchStore.getState();
 
+        const {updateCachedGuidedSearchQueryString} = usePrestoSearchState.getState();
+
         // Update range picker selection to match zoomed range.
         updateTimeRange(newTimeRange);
         updateTimeRangeOption(TIME_RANGE_OPTION.CUSTOM);
         updateTimelineConfig(newTimelineConfig);
 
         const {searchQueryString, timelineQueryString} = buildPrestoGuidedQueries(newTimeRange);
+        updateCachedGuidedSearchQueryString(searchQueryString);
         handlePrestoGuidedQuerySubmit(searchQueryString, timelineQueryString);
     }, []);