feat: Add KQL query support for filtering structured IR log events (fixes #277).

package.json

@@ -32,7 +32,7 @@
     "@mui/icons-material": "^7.1.0",
     "@mui/joy": "^5.0.0-beta.52",
     "axios": "^1.11.0",
-    "clp-ffi-js": "^0.6.0",
+    "clp-ffi-js": "^0.6.1",
     "comlink": "^4.4.2",
     "dayjs": "^1.11.13",
     "js-beautify": "^1.15.4",

src/components/AppController.tsx

@@ -9,19 +9,9 @@ import useQueryStore from "../stores/queryStore";
 import useUiStore from "../stores/uiStore";
 import useViewStore from "../stores/viewStore";
 import {TAB_NAME} from "../typings/tab";
-import {
-    HASH_PARAM_NAMES,
-    UrlHashParams,
-} from "../typings/url";
-import {
-    CURSOR_CODE,
-    CursorType,
-} from "../typings/worker";
 import {
     getWindowUrlHashParams,
     getWindowUrlSearchParams,
-    updateWindowUrlHashParams,
-    URL_HASH_PARAMS_DEFAULT,
     URL_SEARCH_PARAMS_DEFAULT,
 } from "../utils/url";
 import {
@@ -43,32 +33,6 @@ const handleHashChange = () => {
     }
 };
 
-/**
- * Returns the initial load file cursor based on the URL hash parameters.
- *
- * @param hashParams
- * @return
- */
-const getInitialCursor = (hashParams: UrlHashParams) => {
-    let cursor: CursorType = {code: CURSOR_CODE.LAST_EVENT, args: null};
-
-    if (URL_HASH_PARAMS_DEFAULT.timestamp !== hashParams.timestamp) {
-        cursor = {
-            code: CURSOR_CODE.TIMESTAMP,
-            args: {timestamp: hashParams.timestamp},
-        };
-    } else if (URL_HASH_PARAMS_DEFAULT.logEventNum !== hashParams.logEventNum) {
-        const {setLogEventNum} = useViewStore.getState();
-        setLogEventNum(hashParams.logEventNum);
-        cursor = {
-            code: CURSOR_CODE.EVENT_NUM,
-            args: {eventNum: hashParams.logEventNum},
-        };
-    }
-
-    return cursor;
-};
-
 interface AppControllerProps {
     children: React.ReactNode;
 }
@@ -96,26 +60,19 @@ const AppController = ({children}: AppControllerProps) => {
 
         // Handle initial page load and maintain full URL state
         const hashParams = getWindowUrlHashParams();
-        updateWindowUrlHashParams({
-            isPrettified: hashParams[HASH_PARAM_NAMES.IS_PRETTIFIED],
-            timestamp: URL_HASH_PARAMS_DEFAULT.timestamp,
-        });
         const {setIsPrettified} = useViewStore.getState();
         setIsPrettified(hashParams.isPrettified);
 
         const searchParams = getWindowUrlSearchParams();
         if (URL_SEARCH_PARAMS_DEFAULT.filePath !== searchParams.filePath) {
-            const {loadFile} = useLogFileStore.getState();
             (async () => {
+                const {setLogEventNum} = useViewStore.getState();
+                setLogEventNum(hashParams.logEventNum);
+
+                const {loadFile} = useLogFileStore.getState();
                 await loadFile(searchParams.filePath);
-                const {loadPageByCursor} = useViewStore.getState();
-                await loadPageByCursor(getInitialCursor(hashParams));
-                if (updateQueryHashParams()) {
-                    const {setActiveTabName} = useUiStore.getState();
-                    setActiveTabName(TAB_NAME.SEARCH);
-                    const {startQuery} = useQueryStore.getState();
-                    startQuery();
-                }
+
+                handleHashChange();
             })().catch(handleErrorWithNotification);
         }
 

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/FilterInputBox.css

@@ -0,0 +1,8 @@
+.filter-input-box-textarea {
+    font-family: monospace !important;
+    word-break: break-all;
+}
+
+.filter-button {
+    width: 48px;
+}

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/FilterInputBox.tsx

@@ -0,0 +1,90 @@
+import React, {useCallback} from "react";
+
+import {
+    Button,
+    Textarea,
+} from "@mui/joy";
+
+import {handleErrorWithNotification} from "../../../../../stores/notificationStore";
+import useQueryStore from "../../../../../stores/queryStore";
+import useUiStore from "../../../../../stores/uiStore";
+import useViewStore from "../../../../../stores/viewStore";
+import {UI_ELEMENT} from "../../../../../typings/states";
+import {CURSOR_CODE} from "../../../../../typings/worker";
+import {isDisabled} from "../../../../../utils/states";
+
+import "./FilterInputBox.css";
+import "./InputBox.css";
+
+
+/**
+ * Provides a text input to apply a KQL filter.
+ *
+ * @return
+ */
+const FilterInputBox = () => {
+    const kqlFilterInput = useViewStore((state) => state.kqlFilterInput);
+    const kqlFilter = useViewStore((state) => state.kqlFilter);
+    const uiState = useUiStore((state) => state.uiState);
+
+    const handleFilterInputChange = useCallback((ev: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const newFilterString = ev.target.value;
+        const {setKqlFilterInput} = useViewStore.getState();
+        setKqlFilterInput(newFilterString);
+    }, []);
+
+    const handleFilterButtonClick = useCallback(() => {
+        const {setKqlFilter, filterLogs, loadPageByCursor, logEventNum} = useViewStore.getState();
+        setKqlFilter(kqlFilterInput);
+        filterLogs();
+
+        (async () => {
+            await loadPageByCursor({
+                code: CURSOR_CODE.EVENT_NUM,
+                args: {eventNum: logEventNum},
+            });
+
+            const {startQuery} = useQueryStore.getState();
+            startQuery();
+        })().catch(handleErrorWithNotification);
+    }, [kqlFilterInput]);
+
+    const handleTextareaKeyDown = useCallback((ev: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (ev.shiftKey && "Enter" === ev.key) {
+            ev.preventDefault();
+            handleFilterButtonClick();
+        }
+    }, [handleFilterButtonClick]);
+
+    const isFilterInputBoxDisabled = isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX);
+    const isKqlFilterModified = kqlFilter !== kqlFilterInput;
+
+    return (
+        <Textarea
+            className={"input-box-container input-box"}
+            maxRows={7}
+            placeholder={"KQL log filter"}
+            size={"sm"}
+            value={kqlFilterInput}
+            endDecorator={
+                <Button
+                    className={"filter-button"}
+                    disabled={isFilterInputBoxDisabled || !isKqlFilterModified}
+                    variant={"soft"}
+                    onClick={handleFilterButtonClick}
+                >
+                    Filter
+                </Button>
+            }
+            slotProps={{textarea: {
+                disabled: isFilterInputBoxDisabled,
+                className: "filter-input-box-textarea",
+            },
+            endDecorator: {className: "input-box-end-decorator"}}}
+            onChange={handleFilterInputChange}
+            onKeyDown={handleTextareaKeyDown}/>
+    );
+};
+
+
+export default FilterInputBox;

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/InputBox.css

@@ -0,0 +1,13 @@
+.input-box-container {
+    width: 100%;
+}
+
+.input-box {
+    flex-direction: row !important;
+    border-radius: 0 !important;
+}
+
+.input-box-end-decorator {
+    display: block !important;
+    margin-block-start: 0 !important;
+}

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/QueryInputBox.css

@@ -1,14 +1,3 @@
-.query-input-box-with-progress {
-    /* JoyUI has a rounding issue when calculating the Textarea width, causing it to overflow its
-      container. */
-    margin-right: 1px;
-}
-
-.query-input-box {
-    flex-direction: row !important;
-    border-radius: 0 !important;
-}
-
 .query-option-button {
     width: 1.5rem !important;
     min-width: 0 !important;
@@ -20,11 +9,7 @@
 
 .query-input-box-textarea {
     width: 0;
-}
-
-.query-input-box-end-decorator {
-    display: block !important;
-    margin-block-start: 0 !important;
+    font-family: monospace !important;
 }
 
 .query-input-box-linear-progress {

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/QueryInputBox.tsx

@@ -6,6 +6,7 @@ import {
     Textarea,
 } from "@mui/joy";
 
+import useLogFileStore from "../../../../../stores/logFileStore";
 import useQueryStore from "../../../../../stores/queryStore";
 import useUiStore from "../../../../../stores/uiStore";
 import {QUERY_PROGRESS_VALUE_MAX} from "../../../../../typings/query";
@@ -15,6 +16,7 @@ import {updateWindowUrlHashParams} from "../../../../../utils/url";
 import ToggleIconButton from "./ToggleIconButton";
 
 import "./QueryInputBox.css";
+import "./InputBox.css";
 
 
 /**
@@ -28,10 +30,11 @@ const QueryInputBox = () => {
     const querystring = useQueryStore((state) => state.queryString);
     const queryProgress = useQueryStore((state) => state.queryProgress);
     const uiState = useUiStore((state) => state.uiState);
+    const fileTypeInfo = useLogFileStore((state) => state.fileTypeInfo);
 
     const handleQueryInputChange = useCallback((ev: React.ChangeEvent<HTMLTextAreaElement>) => {
         const newQueryString = ev.target.value;
-        updateWindowUrlHashParams({queryString: newQueryString});
+        updateWindowUrlHashParams({subquery: newQueryString});
         const {setQueryString, startQuery} = useQueryStore.getState();
         setQueryString(newQueryString);
         startQuery();
@@ -55,12 +58,19 @@ const QueryInputBox = () => {
 
     const isQueryInputBoxDisabled = isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX);
 
+    const isKqlFilteringEnabled = null !== fileTypeInfo &&
+        "CLP IR" === fileTypeInfo.name &&
+        true === fileTypeInfo.isStructured;
+    const placeholder = isKqlFilteringEnabled ?
+        "Search (in filtered logs)" :
+        "Search";
+
     return (
-        <div className={"query-input-box-with-progress"}>
+        <div className={"input-box-container"}>
             <Textarea
-                className={"query-input-box"}
+                className={"input-box"}
                 maxRows={7}
-                placeholder={"Search"}
+                placeholder={placeholder}
                 size={"sm"}
                 value={querystring}
                 endDecorator={
@@ -98,7 +108,7 @@ const QueryInputBox = () => {
                         className: "query-input-box-textarea",
                         disabled: isQueryInputBoxDisabled,
                     },
-                    endDecorator: {className: "query-input-box-end-decorator"},
+                    endDecorator: {className: "input-box-end-decorator"},
                 }}
                 onChange={handleQueryInputChange}/>
             <LinearProgress

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css

@@ -1,5 +1,6 @@
 .search-tab-container {
-    overflow-y: hidden;
+    /* We apply overflow-x here because JoyUI has a rounding issue when calculating the Textarea width, causing it to overflow its container. */
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -9,3 +10,9 @@
     overflow-y: auto;
     flex-grow: 1;
 }
+
+.query-input-boxes-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}