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/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,21 +26,41 @@ 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) && (
+            {(
+                searchUiState === SEARCH_UI_STATE.QUERYING ||
+                searchUiState === SEARCH_UI_STATE.DONE
+            ) && (
                 <Text type={"secondary"}>
                     Search job
                     {" "}
                     {searchJobId}
                     {" "}
+                    {isPrestoGuided && <OpenQueryDrawerButton/>}
+                    {" "}
                     found
                     {" "}
                 </Text>
             )}
+            {(searchUiState === SEARCH_UI_STATE.FAILED) && (
+                <Text type={"secondary"}>
+                    Failure in search job
+                    {" "}
+                    {searchJobId}
+                    {" "}
+                    {isPrestoGuided && <OpenQueryDrawerButton/>}
+                    {" "}
+                </Text>
+            )}
             <Results/>
             <Text type={"secondary"}> results</Text>
+
+            {isPrestoGuided && <QueryDrawer/>}
         </div>
     );
 };

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);
     }, []);
 

components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx

@@ -8,15 +8,34 @@ import {PRESTO_SQL_INTERFACE} from "./typings";
  * Default values of the Presto search state.
  */
 const PRESTO_SEARCH_STATE_DEFAULT = Object.freeze({
+    cachedGuidedSearchQueryString: "",
+    errorMsg: null,
+    errorName: null,
     from: null,
     orderBy: "",
+    queryDrawerOpen: false,
     select: "*",
     sqlInterface: PRESTO_SQL_INTERFACE.FREEFORM,
     timestampKey: null,
     where: "",
 });
 
 interface PrestoSearchState {
+    /**
+     * Last submitted guided search query string.
+     */
+    cachedGuidedSearchQueryString: string;
+
+    /**
+     * Presto error message if query failed.
+     */
+    errorMsg: Nullable<string>;
+
+    /**
+     * Presto error name if query failed.
+     */
+    errorName: Nullable<string>;
+
     /**
      * FROM input.
      */
@@ -27,6 +46,11 @@ interface PrestoSearchState {
      */
     orderBy: string;
 
+    /**
+     * Whether the query preview drawer is open.
+     */
+    queryDrawerOpen: boolean;
+
     /**
      * SELECT input.
      */
@@ -48,8 +72,12 @@ interface PrestoSearchState {
     where: string;
 
     setSqlInterface: (iface: PRESTO_SQL_INTERFACE) => void;
+    updateCachedGuidedSearchQueryString: (query: string) => void;
+    updateErrorMsg: (msg: Nullable<string>) => void;
+    updateErrorName: (name: Nullable<string>) => void;
     updateFrom: (database: Nullable<string>) => void;
     updateOrderBy: (items: string) => void;
+    updateQueryDrawerOpen: (open: boolean) => void;
     updateSelect: (items: string) => void;
     updateTimestampKey: (key: Nullable<string>) => void;
     updateWhere: (expression: string) => void;
@@ -60,12 +88,24 @@ const usePrestoSearchState = create<PrestoSearchState>((set) => ({
     setSqlInterface: (iface) => {
         set({sqlInterface: iface});
     },
+    updateCachedGuidedSearchQueryString: (query) => {
+        set({cachedGuidedSearchQueryString: query});
+    },
+    updateErrorMsg: (msg) => {
+        set({errorMsg: msg});
+    },
+    updateErrorName: (name) => {
+        set({errorName: name});
+    },
     updateFrom: (database) => {
         set({from: database});
     },
     updateOrderBy: (items) => {
         set({orderBy: items});
     },
+    updateQueryDrawerOpen: (open) => {
+        set({queryDrawerOpen: open});
+    },
     updateSelect: (items) => {
         set({select: items});
     },