feat(new-webui): Adds search job ID and number of search results to search page. (#962)

Author: davemarco

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

@@ -10,10 +10,10 @@ import SubmitButton from "./SubmitButton";
  * @return
  */
 const SearchButton = () => {
-    const store = useSearchStore();
+    const searchUiState = useSearchStore((state) => state.searchUiState);
 
     return (
-        (store.searchUiState === SEARCH_UI_STATE.QUERYING) ?
+        (searchUiState === SEARCH_UI_STATE.QUERYING) ?
             <CancelButton/> :
             <SubmitButton/>
     );

components/log-viewer-webui/client/src/pages/SearchPage/SearchControls/search-requests.ts

@@ -11,7 +11,7 @@ import {
     CLP_STORAGE_ENGINES,
     SETTINGS_STORAGE_ENGINE,
 } from "../../../config";
-import useSearchStore from "../SearchState/index";
+import useSearchStore, {SEARCH_STATE_DEFAULT} from "../SearchState/";
 import {SEARCH_UI_STATE} from "../SearchState/typings";
 import {unquoteString} from "./utils";
 
@@ -54,7 +54,7 @@ const handleClearResults = () => {
 const handleQuerySubmit = (payload: QueryJobCreationSchema) => {
     const store = useSearchStore.getState();
 
-    // Buttons to submit a query should be disabled while an existing query is in progress.
+    // User should NOT be able to submit a new query while an existing query is in progress.
     if (
         store.searchUiState !== SEARCH_UI_STATE.DEFAULT &&
         store.searchUiState !== SEARCH_UI_STATE.DONE
@@ -64,9 +64,6 @@ const handleQuerySubmit = (payload: QueryJobCreationSchema) => {
         return;
     }
 
-    handleClearResults();
-
-
     if (CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE) {
         try {
             payload.queryString = unquoteString(payload.queryString, '"', "\\");
@@ -84,6 +81,10 @@ const handleQuerySubmit = (payload: QueryJobCreationSchema) => {
         }
     }
 
+    handleClearResults();
+
+    store.updateNumSearchResultsTable(SEARCH_STATE_DEFAULT.numSearchResultsTable);
+    store.updateNumSearchResultsTimeline(SEARCH_STATE_DEFAULT.numSearchResultsTimeline);
     store.updateSearchUiState(SEARCH_UI_STATE.QUERY_ID_PENDING);
 
     submitQuery(payload)

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

@@ -0,0 +1,63 @@
+import {useMemo} from "react";
+
+import {
+    GetProps,
+    Typography,
+} from "antd";
+
+import useSearchStore from "../SearchState/index";
+import {SEARCH_UI_STATE} from "../SearchState/typings";
+
+
+const {Text} = Typography;
+type TextTypes = GetProps<typeof Text>["type"];
+
+
+/**
+ * Displays the number of search results.
+ *
+ * @return
+ */
+const Results = () => {
+    const numSearchResultsTimeline = useSearchStore((state) => state.numSearchResultsTimeline);
+    const numSearchResultsTable = useSearchStore((state) => state.numSearchResultsTable);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+
+    // Number of results is the maximum of the number of results in the timeline and table. The
+    // timeline may have more results since the table results are capped. Having two sources may
+    // provide more timely updates to the user.
+    const numResults = useMemo(
+        () => Math.max(numSearchResultsTimeline, numSearchResultsTable),
+        [
+            numSearchResultsTimeline,
+            numSearchResultsTable,
+        ]
+    );
+
+    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;
+        default:
+            textType = "secondary";
+    }
+
+    return (
+        <Text
+            strong={true}
+            type={textType}
+        >
+            {numResults}
+        </Text>
+    );
+};
+
+export default Results;

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

@@ -0,0 +1,8 @@
+.status {
+  margin-left: 2px;
+  margin-top: 4px;
+}
+
+.badge {
+    padding-bottom: 4px;
+}

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

@@ -0,0 +1,41 @@
+import {Typography} from "antd";
+
+import useSearchStore from "../SearchState/index";
+import {SEARCH_UI_STATE} from "../SearchState/typings";
+import styles from "./index.module.css";
+import Results from "./Results";
+
+
+const {Text} = Typography;
+
+/**
+ * Displays the search job ID and the number of results found.
+ *
+ * @return
+ */
+const SearchQueryStatus = () => {
+    const {
+        searchJobId,
+        searchUiState,
+    } = useSearchStore();
+
+    return (
+        <div className={styles["status"]}>
+            {(searchUiState === SEARCH_UI_STATE.QUERYING ||
+                searchUiState === SEARCH_UI_STATE.DONE) && (
+                <Text type={"secondary"}>
+                    Search job #
+                    {searchJobId}
+                    {" "}
+                    found
+                    {" "}
+                </Text>
+            )}
+            <Results/>
+            <Text type={"secondary"}> results</Text>
+        </div>
+    );
+};
+
+
+export default SearchQueryStatus;

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

@@ -6,6 +6,7 @@ import {
 
 import {Table} from "antd";
 
+import useSearchStore from "../../SearchState/index";
 import {
     SearchResult,
     searchResultsTableColumns,
@@ -20,10 +21,22 @@ import {useSearchResults} from "./useSearchResults";
  * @return
  */
 const SearchResultsTable = () => {
+    const {updateNumSearchResultsTable} = useSearchStore();
     const searchResults = useSearchResults();
     const [tableHeight, setTableHeight] = useState<number>(0);
     const containerRef = useRef<HTMLDivElement>(null);
 
+    useEffect(() => {
+        const num = searchResults ?
+            searchResults.length :
+            0;
+
+        updateNumSearchResultsTable(num);
+    }, [
+        searchResults,
+        updateNumSearchResultsTable,
+    ]);
+
     // Antd table requires a fixed height for virtual scrolling. The effect sets a fixed height
     // based on the window height, container top, and fixed padding.
     useEffect(() => {

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

@@ -1,3 +1,5 @@
+import {useEffect} from "react";
+
 import {Card} from "antd";
 import {Dayjs} from "dayjs";
 import {TimelineConfig} from "src/components/ResultsTimeline/typings";
@@ -24,10 +26,22 @@ const SearchResultsTimeline = () => {
         timelineConfig,
         searchUiState,
         updateTimelineConfig,
+        updateNumSearchResultsTimeline,
     } = useSearchStore();
 
     const aggregationResults = useAggregationResults();
 
+    useEffect(() => {
+        const numSearchResultsTimeline = aggregationResults?.reduce(
+            (acc, curr) => acc + curr.count,
+            0
+        ) ?? 0;
+
+        updateNumSearchResultsTimeline(numSearchResultsTimeline);
+    }, [
+        aggregationResults,
+        updateNumSearchResultsTimeline,
+    ]);
 
     const handleTimelineZoom = (newTimeRange: [Dayjs, Dayjs]) => {
         const newTimelineConfig: TimelineConfig = computeTimelineConfig(newTimeRange);

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

@@ -16,6 +16,8 @@ import {SEARCH_UI_STATE} from "./typings";
  */
 const SEARCH_STATE_DEFAULT = Object.freeze({
     aggregationJobId: null,
+    numSearchResultsTable: 0,
+    numSearchResultsTimeline: 0,
     queryIsCaseSensitive: false,
     queryString: "",
     searchJobId: null,
@@ -32,6 +34,16 @@ interface SearchState {
      */
     aggregationJobId: string | null;
 
+    /**
+     * The number of search table results.
+     */
+    numSearchResultsTable: number;
+
+    /**
+     * The number of timeline results.
+     */
+    numSearchResultsTimeline: number;
+
     /**
      * Whether the query is case sensitive.
      */
@@ -70,6 +82,8 @@ interface SearchState {
     timelineConfig: TimelineConfig;
 
     updateAggregationJobId: (id: string | null) => void;
+    updateNumSearchResultsTable: (num: number) => void;
+    updateNumSearchResultsTimeline: (num: number) => void;
     updateQueryIsCaseSensitive: (newValue: boolean) => void;
     updateQueryString: (query: string) => void;
     updateSearchJobId: (id: string | null) => void;
@@ -84,6 +98,12 @@ const useSearchStore = create<SearchState>((set) => ({
     updateAggregationJobId: (id) => {
         set({aggregationJobId: id});
     },
+    updateNumSearchResultsTable: (num) => {
+        set({numSearchResultsTable: num});
+    },
+    updateNumSearchResultsTimeline: (num) => {
+        set({numSearchResultsTimeline: num});
+    },
     updateQueryIsCaseSensitive: (newValue: boolean) => {
         set({queryIsCaseSensitive: newValue});
     },

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

@@ -48,4 +48,5 @@ const useResultsMetadata = () => {
     return resultsMetadata;
 };
 
+
 export {useResultsMetadata};

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

@@ -1,5 +1,6 @@
 import styles from "./index.module.css";
 import SearchControls from "./SearchControls";
+import SearchQueryStatus from "./SearchQueryStatus";
 import SearchResultsTable from "./SearchResults/SearchResultsTable";
 import SearchResultsTimeline from "./SearchResults/SearchResultsTimeline";
 import {useUiUpdateOnDoneSignal} from "./SearchState/useUpdateStateWithMetadata";
@@ -15,7 +16,10 @@ const SearchPage = () => {
 
     return (
         <div className={styles["searchPageContainer"]}>
-            <SearchControls/>
+            <div>
+                <SearchControls/>
+                <SearchQueryStatus/>
+            </div>
             <SearchResultsTimeline/>
             <SearchResultsTable/>
         </div>