feat(new-webui): Add a search bar to search view.

components/log-viewer-webui/client/package.json

@@ -22,7 +22,8 @@
     "axios": "^1.7.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^7.4.1"
+    "react-router": "^7.4.1",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/react": "^19.0.10",

components/log-viewer-webui/client/src/pages/SearchPage/SearchControls/SearchButton.tsx

@@ -0,0 +1,42 @@
+import {SearchOutlined} from "@ant-design/icons";
+import {
+    Button,
+    Tooltip,
+} from "antd";
+
+import useSearchStore, {SEARCH_STATE_DEFAULT} from "../SearchState";
+import styles from "./index.module.css";
+
+
+/**
+ * Renders a button to submit the search query.
+ *
+ * @return
+ */
+const SearchButton = () => {
+    const queryString = useSearchStore((state) => state.queryString);
+
+    const isQueryStringEmpty: boolean =
+        queryString === SEARCH_STATE_DEFAULT.queryString;
+
+    return (
+        <Tooltip
+            title={isQueryStringEmpty ?
+                "Enter query to search" :
+                ""}
+        >
+            <Button
+                className={styles["gradientButton"] || ""}
+                disabled={isQueryStringEmpty}
+                icon={<SearchOutlined/>}
+                size={"large"}
+                type={"primary"}
+            >
+                Search
+            </Button>
+        </Tooltip>
+    );
+};
+
+
+export default SearchButton;

components/log-viewer-webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css

@@ -0,0 +1,15 @@
+.timeRangeInputContainer {
+    display: inline-flex;
+}
+
+/* Makes border flush with range picker */
+.customSelected :global(.ant-select-selector) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.rangePicker {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    min-width: 200px;
+}

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

@@ -0,0 +1,78 @@
+import {useState} from "react";
+
+import {
+    DatePicker,
+    Select,
+} from "antd";
+import dayjs from "dayjs";
+
+import useSearchStore from "../../SearchState";
+import styles from "./index.module.css";
+import {
+    DEFAULT_TIME_RANGE,
+    isValidDateRange,
+    TIME_RANGE_OPTION,
+    TIME_RANGE_OPTION_DAYJS_MAP,
+    TIME_RANGE_OPTION_NAMES,
+} from "./utils";
+
+
+/**
+ * Renders controls for selecting a time range for queries. By default, the component is
+ * a select dropdown with a list of preset time ranges. If the user selects "Custom",
+ * a date range picker is also displayed.
+ *
+ * @return
+ */
+const TimeRangeInput = () => {
+    const updateTimeRange = useSearchStore((state) => state.updateTimeRange);
+    const [selectedOption, setSelectedOption] = useState<TIME_RANGE_OPTION>(DEFAULT_TIME_RANGE);
+
+    const handleSelectChange = (timeRangeOption: TIME_RANGE_OPTION) => {
+        setSelectedOption(timeRangeOption);
+        if (timeRangeOption !== TIME_RANGE_OPTION.CUSTOM) {
+            const dayJsRange = TIME_RANGE_OPTION_DAYJS_MAP[timeRangeOption];
+            updateTimeRange(dayJsRange);
+        }
+    };
+
+    const handleRangePickerChange = (
+        dates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null
+    ) => {
+        if (!isValidDateRange(dates)) {
+            return;
+        }
+        updateTimeRange(dates);
+    };
+
+    return (
+        <div
+            className={styles["timeRangeInputContainer"]}
+        >
+            <Select
+                defaultValue={DEFAULT_TIME_RANGE}
+                listHeight={300}
+                options={TIME_RANGE_OPTION_NAMES.map((option) => ({label: option, value: option}))}
+                popupMatchSelectWidth={false}
+                size={"large"}
+                variant={"filled"}
+                className={selectedOption === TIME_RANGE_OPTION.CUSTOM ?
+                    (styles["customSelected"] || "") :
+                    ""}
+                onChange={handleSelectChange}/>
+            {selectedOption === TIME_RANGE_OPTION.CUSTOM && (
+                <DatePicker.RangePicker
+                    className={styles["rangePicker"] || ""}
+                    showNow={true}
+                    showTime={true}
+                    size={"large"}
+                    onChange={(dates) => {
+                        handleRangePickerChange(dates);
+                    }}/>
+            )}
+        </div>
+    );
+};
+
+
+export default TimeRangeInput;

components/log-viewer-webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx

@@ -0,0 +1,70 @@
+import dayjs from "dayjs";
+
+
+/**
+ * Time range options.
+ */
+enum TIME_RANGE_OPTION {
+    LAST_15_MINUTES = "Last 15 Minutes",
+    LAST_HOUR = "Last Hour",
+    TODAY = "Today",
+    YESTERDAY = "Yesterday",
+    LAST_7_DAYS = "Last 7 Days",
+    LAST_30_DAYS = "Last 30 Days",
+    MONTH_TO_DATE = "Month to Date",
+    CUSTOM = "Custom",
+}
+
+const DEFAULT_TIME_RANGE = TIME_RANGE_OPTION.TODAY;
+
+/* eslint-disable no-magic-numbers */
+const TIME_RANGE_OPTION_DAYJS_MAP: Record<TIME_RANGE_OPTION, [dayjs.Dayjs, dayjs.Dayjs]> = {
+    [TIME_RANGE_OPTION.LAST_15_MINUTES]: [dayjs().subtract(15, "minute"),
+        dayjs()],
+    [TIME_RANGE_OPTION.LAST_HOUR]: [dayjs().subtract(1, "hour"),
+        dayjs()],
+    [TIME_RANGE_OPTION.TODAY]: [dayjs().startOf("day"),
+        dayjs().endOf("day")],
+    [TIME_RANGE_OPTION.YESTERDAY]: [dayjs().subtract(1, "d"),
+        dayjs().subtract(1, "d")],
+    [TIME_RANGE_OPTION.LAST_7_DAYS]: [dayjs().subtract(7, "d"),
+        dayjs()],
+    [TIME_RANGE_OPTION.LAST_30_DAYS]: [dayjs().subtract(30, "d"),
+        dayjs()],
+    [TIME_RANGE_OPTION.MONTH_TO_DATE]: [dayjs().startOf("month"),
+        dayjs()],
+
+    // Custom option is just a placeholder for typing purposes, its DayJs values should not
+    // be used.
+    [TIME_RANGE_OPTION.CUSTOM]: [dayjs(),
+        dayjs()],
+};
+
+
+/**
+ * Key names in enum `TIME_RANGE_OPTION`.
+ */
+const TIME_RANGE_OPTION_NAMES = Object.freeze(
+    Object.values(TIME_RANGE_OPTION).filter((value) => "string" === typeof value)
+);
+
+/**
+ * Validates dates provided by the range picker callback are non-null.
+ *
+ * @param dates
+ * @return
+ */
+const isValidDateRange = (
+    dates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null
+): dates is [dayjs.Dayjs, dayjs.Dayjs] => {
+    return null !== dates && null !== dates[0] && null !== dates[1];
+};
+
+
+export {
+    DEFAULT_TIME_RANGE,
+    isValidDateRange,
+    TIME_RANGE_OPTION,
+    TIME_RANGE_OPTION_DAYJS_MAP,
+    TIME_RANGE_OPTION_NAMES,
+};

components/log-viewer-webui/client/src/pages/SearchPage/SearchControls/index.module.css

@@ -0,0 +1,13 @@
+.searchControlsContainer {
+    margin-top: 20px;
+    padding: 0 20px;
+    display: flex;
+    gap: 10px;
+}
+
+.gradientButton {
+    background-image: linear-gradient(135deg, #6253e1, #04befe);
+    color: white;
+    transition: background 0.3s;
+    background-size: 200% auto;
+}

components/log-viewer-webui/client/src/pages/SearchPage/SearchControls/index.tsx

@@ -0,0 +1,34 @@
+import {Input} from "antd";
+
+import useSearchStore from "../SearchState";
+import styles from "./index.module.css";
+import SearchButton from "./SearchButton";
+import TimeRangeInput from "./TimeRangeInput";
+
+
+/**
+ * Renders controls for submitting queries.
+ *
+ * @return
+ */
+const SearchControls = () => {
+    const queryString = useSearchStore((state) => state.queryString);
+    const updateQueryString = useSearchStore((state) => state.updateQueryString);
+
+    return (
+        <div className={styles["searchControlsContainer"]}>
+            <Input
+                placeholder={"Enter your query"}
+                size={"large"}
+                value={queryString}
+                onChange={(e) => {
+                    updateQueryString(e.target.value);
+                }}/>
+            <TimeRangeInput/>
+            <SearchButton/>
+        </div>
+    );
+};
+
+
+export default SearchControls;

components/log-viewer-webui/client/src/pages/SearchPage/SearchState.tsx

@@ -0,0 +1,38 @@
+import dayjs from "dayjs";
+import {create} from "zustand";
+
+import {
+    DEFAULT_TIME_RANGE,
+    TIME_RANGE_OPTION_DAYJS_MAP,
+} from "./SearchControls/TimeRangeInput/utils";
+
+
+/**
+ * Default values of the search state.
+ */
+const SEARCH_STATE_DEFAULT = Object.freeze({
+    queryString: "",
+    timeRange: TIME_RANGE_OPTION_DAYJS_MAP[DEFAULT_TIME_RANGE],
+});
+
+interface SearchState {
+    queryString: string;
+    timeRange: [dayjs.Dayjs, dayjs.Dayjs];
+    updateQueryString: (query: string) => void;
+    updateTimeRange: (range: [dayjs.Dayjs, dayjs.Dayjs]) => void;
+}
+
+const useSearchStore = create<SearchState>((set) => ({
+    queryString: SEARCH_STATE_DEFAULT.queryString,
+    timeRange: SEARCH_STATE_DEFAULT.timeRange,
+    updateQueryString: (query) => {
+        set({queryString: query});
+    },
+    updateTimeRange: (range) => {
+        set({timeRange: range});
+    },
+}));
+
+
+export {SEARCH_STATE_DEFAULT};
+export default useSearchStore;

components/log-viewer-webui/client/src/pages/SearchPage.tsx → components/log-viewer-webui/client/src/pages/SearchPage/index.tsx

@@ -1,14 +1,14 @@
+import SearchControls from "./SearchControls";
+
+
 /**
  * Provides a search interface that allows users to query archives and visualize search results.
  *
  * @return
  */
 const SearchPage = () => {
     return (
-        <div>
-            <h1>Search Page</h1>
-            <p>This is the Search Page.</p>
-        </div>
+        <SearchControls/>
     );
 };