feat(webui): Move timestamp key selector in guided Presto UI into date picker. (#1631)

Author: davemarco

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/index.tsx

@@ -15,11 +15,6 @@
     display: flex;
 }
 
-.timestampKey {
-    width: 300px;
-    display: flex;
-}
-
 .where {
     grid-column: span 2;
     display: flex;

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css

@@ -1,3 +1,4 @@
+import useTimestampKeyInit from "../../../SearchState/Presto/useTimestampKeyInit";
 import searchStyles from "../../index.module.css";
 import QueryStatus from "../../QueryStatus";
 import TimeRangeInput from "../../TimeRangeInput";
@@ -7,7 +8,6 @@ import From from "./From";
 import guidedGrid from "./index.module.css";
 import OrderBy from "./OrderBy";
 import Select from "./Select";
-import TimestampKey from "./TimestampKey";
 import Where from "./Where";
 
 
@@ -16,28 +16,32 @@ import Where from "./Where";
  *
  * @return
  */
-const GuidedControls = () => (
-    <div className={searchStyles["searchControlsContainer"]}>
-        <div className={searchStyles["runRow"]}>
-            <div>
-                <SqlInterfaceButton/>
+const GuidedControls = () => {
+    const {contextHolder} = useTimestampKeyInit();
+
+    return (
+        <div className={searchStyles["searchControlsContainer"]}>
+            {contextHolder}
+            <div className={searchStyles["runRow"]}>
+                <div>
+                    <SqlInterfaceButton/>
+                </div>
+                <div className={searchStyles["buttons"]}>
+                    <TimeRangeInput/>
+                    <SqlSearchButton/>
+                </div>
             </div>
-            <div className={searchStyles["buttons"]}>
-                <TimestampKey/>
-                <TimeRangeInput/>
-                <SqlSearchButton/>
+            <div className={guidedGrid["gridContainer"]}>
+                <Select/>
+                <From/>
+                <Where/>
+                <OrderBy/>
+            </div>
+            <div className={searchStyles["status"]}>
+                <QueryStatus/>
             </div>
         </div>
-        <div className={guidedGrid["gridContainer"]}>
-            <Select/>
-            <From/>
-            <Where/>
-            <OrderBy/>
-        </div>
-        <div className={searchStyles["status"]}>
-            <QueryStatus/>
-        </div>
-    </div>
-);
+    );
+};
 
 export default GuidedControls;

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx

@@ -0,0 +1,55 @@
+import {useQuery} from "@tanstack/react-query";
+import {
+    Select,
+    SelectProps,
+} from "antd";
+
+import useSearchStore from "../../../../../SearchState";
+import usePrestoSearchState from "../../../../../SearchState/Presto";
+import {fetchTimestampColumns} from "../../../../../SearchState/Presto/useTimestampKeyInit/sql";
+import {SEARCH_UI_STATE} from "../../../../../SearchState/typings";
+
+
+/**
+ * Renders a timestamp key selector component.
+ *
+ * @param selectProps
+ * @return
+ */
+const TimestampKeySelect = (selectProps: SelectProps<string>) => {
+    const dataset = useSearchStore((state) => state.selectDataset);
+    const timestampKey = usePrestoSearchState((state) => state.timestampKey);
+    const updateTimestampKey = usePrestoSearchState((state) => state.updateTimestampKey);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+
+    // Access cached timestamp keys fetched by useTimestampKeyInit hook in GuidedControls.
+    const {data: timestampKeys} = useQuery({
+        queryKey: [
+            "timestampColumns",
+            dataset,
+        ],
+        queryFn: () => (dataset ?
+            fetchTimestampColumns(dataset) :
+            []),
+        enabled: null !== dataset,
+    });
+
+    const handleTimestampKeyChange = (value: string) => {
+        updateTimestampKey(value);
+    };
+
+    return (
+        <Select<string>
+            options={(timestampKeys || []).map((option) => ({label: option, value: option}))}
+            value={timestampKey}
+            disabled={
+                null === dataset ||
+                searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+                searchUiState === SEARCH_UI_STATE.QUERYING
+            }
+            onChange={handleTimestampKeyChange}
+            {...selectProps}/>
+    );
+};
+
+export default TimestampKeySelect;

components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx

@@ -0,0 +1,12 @@
+.footerContainer {
+    display: flex;
+    align-items: center;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    gap: 8px;
+}
+
+.footerSelect {
+    flex: 1;
+    min-width: 0;
+}

components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/index.module.css

@@ -0,0 +1,26 @@
+import {Typography} from "antd";
+
+import styles from "./index.module.css";
+import TimestampKeySelect from "./TimestampKeySelect";
+
+
+const {Text} = Typography;
+
+/**
+ * Renders the footer for the time range picker when in guided mode. Includes the timestamp key
+ * selector.
+ *
+ * @return
+ */
+const TimeRangeFooter = () => {
+    return (
+        <div className={styles["footerContainer"]}>
+            <Text>Timestamp key:</Text>
+            <TimestampKeySelect
+                className={styles["footerSelect"] || ""}
+                size={"small"}/>
+        </div>
+    );
+};
+
+export default TimeRangeFooter;

components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/index.tsx

@@ -1,12 +1,19 @@
+import {useCallback} from "react";
+
+import {CLP_QUERY_ENGINES} from "@webui/common/config";
 import {
     DatePicker,
     Select,
 } from "antd";
 import dayjs from "dayjs";
 
+import {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 styles from "./index.module.css";
+import TimeRangeFooter from "./Presto/TimeRangeFooter";
 import {
     isValidDateRange,
     TIME_RANGE_OPTION,
@@ -30,6 +37,10 @@ const TimeRangeInput = () => {
         searchUiState,
     } = useSearchStore();
 
+    const sqlInterface = usePrestoSearchState((state) => state.sqlInterface);
+    const isPrestoGuided = SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO &&
+                           sqlInterface === PRESTO_SQL_INTERFACE.GUIDED;
+
     const handleSelectChange = (newTimeRangeOption: TIME_RANGE_OPTION) => {
         updateTimeRangeOption(newTimeRangeOption);
     };
@@ -48,6 +59,14 @@ const TimeRangeInput = () => {
         ]);
     };
 
+    const renderFooter = useCallback(() => {
+        if (false === isPrestoGuided) {
+            return null;
+        }
+
+        return <TimeRangeFooter/>;
+    }, [isPrestoGuided]);
+
     return (
         <div
             className={styles["timeRangeInputContainer"]}
@@ -69,6 +88,7 @@ const TimeRangeInput = () => {
                 <DatePicker.RangePicker
                     allowClear={true}
                     className={styles["rangePicker"] || ""}
+                    renderExtraFooter={renderFooter}
                     showTime={true}
                     size={"middle"}
                     value={timeRange}

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

@@ -1,33 +1,27 @@
 import {useEffect} from "react";
 
 import {useQuery} from "@tanstack/react-query";
-import {
-    message,
-    Select,
-    SelectProps,
-} from "antd";
+import {message} from "antd";
 
-import useSearchStore from "../../../../SearchState";
-import usePrestoSearchState from "../../../../SearchState/Presto";
-import {SEARCH_UI_STATE} from "../../../../SearchState/typings";
+import useSearchStore from "../../";
+import usePrestoSearchState from "..";
 import {fetchTimestampColumns} from "./sql";
 
 
 /**
- * Renders a timestamp key selector component
+ * Hook to initialize timestamp key. Fetches timestamp columns and sets a default if none is
+ * selected. Shows messages for errors or warnings with data fetching.
  *
- * @param selectProps
  * @return
  */
-const TimestampKeySelect = (selectProps: SelectProps<string>) => {
+const useTimestampKeyInit = () => {
     const dataset = useSearchStore((state) => state.selectDataset);
     const timestampKey = usePrestoSearchState((state) => state.timestampKey);
     const updateTimestampKey = usePrestoSearchState((state) => state.updateTimestampKey);
-    const searchUiState = useSearchStore((state) => state.searchUiState);
 
     const [messageApi, contextHolder] = message.useMessage();
 
-    const {data: timestampKeys, isPending, isSuccess, isError} = useQuery({
+    const {data: timestampKeys, isSuccess, isError} = useQuery({
         queryKey: [
             "timestampColumns",
             dataset,
@@ -38,6 +32,14 @@ const TimestampKeySelect = (selectProps: SelectProps<string>) => {
         enabled: null !== dataset,
     });
 
+    // Reset timestamp key when dataset changes.
+    useEffect(() => {
+        updateTimestampKey(null);
+    }, [
+        dataset,
+        updateTimestampKey,
+    ]);
+
     useEffect(() => {
         if (isSuccess) {
             if ("undefined" !== typeof timestampKeys[0] && null === timestampKey) {
@@ -51,6 +53,7 @@ const TimestampKeySelect = (selectProps: SelectProps<string>) => {
         updateTimestampKey,
     ]);
 
+    // Show error message if fetch fails
     useEffect(() => {
         if (isError) {
             messageApi.error({
@@ -63,6 +66,7 @@ const TimestampKeySelect = (selectProps: SelectProps<string>) => {
         messageApi,
     ]);
 
+    // Show warning if no timestamp columns found
     useEffect(() => {
         if (isSuccess && 0 === timestampKeys.length) {
             messageApi.warning({
@@ -79,34 +83,7 @@ const TimestampKeySelect = (selectProps: SelectProps<string>) => {
         updateTimestampKey,
     ]);
 
-    // Reset timestamp key when dataset changes
-    useEffect(() => {
-        updateTimestampKey(null);
-    }, [
-        dataset,
-        updateTimestampKey,
-    ]);
-
-    const handleTimestampKeyChange = (value: string) => {
-        updateTimestampKey(value);
-    };
-
-    return (
-        <>
-            {contextHolder}
-            <Select<string>
-                loading={isPending}
-                options={(timestampKeys || []).map((option) => ({label: option, value: option}))}
-                value={timestampKey}
-                disabled={
-                    null === dataset ||
-                    searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
-                    searchUiState === SEARCH_UI_STATE.QUERYING
-                }
-                onChange={handleTimestampKeyChange}
-                {...selectProps}/>
-        </>
-    );
+    return {contextHolder};
 };
 
-export default TimestampKeySelect;
+export default useTimestampKeyInit;

components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/TimestampKeySelect.tsx renamed to components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx

@@ -1,6 +1,6 @@
-import {querySql} from "../../../../../../api/sql";
-import {SqlTableSuffix} from "../../../../../../config/sql-table-suffix";
-import {settings} from "../../../../../../settings";
+import {querySql} from "../../../../../api/sql";
+import {SqlTableSuffix} from "../../../../../config/sql-table-suffix";
+import {settings} from "../../../../../settings";
 
 
 /**