Smart search

client/IndexPage.tsx

@@ -25,6 +25,7 @@ interface Props {
     isAnyFilterSelected: boolean;
     currentEvent: MonitorEvent | null;
     lookups: Lookups;
+    smartSearchOptions: string[];
     columnsSelection: ColumnsSelection;
 }
 
@@ -34,6 +35,7 @@ const IndexPage: FC<Props> = ({
     setFilters,
     currentEvent,
     lookups,
+    smartSearchOptions,
     filters,
     isAnyFilterSelected,
     columnsSelection,
@@ -48,6 +50,7 @@ const IndexPage: FC<Props> = ({
     );
     const toolbarContextProps: IToolbarContextProps = {
         lookups,
+        smartSearchOptions,
         filters,
         showResetFilters: isAnyFilterSelected,
         columnsSelection,
@@ -76,6 +79,7 @@ export default connect(
         filters            : sliceSelectors.filters.getFilters(state),
         isAnyFilterSelected: sliceSelectors.filters.isAnyFilterSelected(state),
         lookups            : sliceSelectors.updates.getLookups(state),
+        smartSearchOptions : sliceSelectors.updates.getSmartSearchOptions(state),
         columnsSelection   : sliceSelectors.columns.getColumnsSelection(state),
     }),
     (dispatch) =>

components/Toolbar.tsx

@@ -2,7 +2,7 @@ import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
 import BlockIcon from '@material-ui/icons/Block';
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo } from 'react';
 import { Lookups } from '../redux/ducks/updates';
 import { emptyObject } from '../utils/emptyObject';
 import { Filters, initialFilters } from '../utils/Filters';
@@ -11,20 +11,28 @@ import { LookupFilterField } from './filter-controls/LookupFilterField';
 import { TextFilterField } from './filter-controls/TextFilterField';
 import { IToolbarContextProps } from './toolbar/ToolbarContext';
 
-const createFieldUpdater = (
-    fieldName: keyof Filters,
-    value: IToolbarContextProps['filters'],
-    onChange: IToolbarContextProps['onChangeFilters']
-) => (fieldValue: string | number | undefined) => {
-    if (fieldValue === '') {
-        fieldValue = undefined;
-    }
-    onChange?.({ ...value, [fieldName]: fieldValue });
-};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import AutocompleteInput from 'react-autocomplete-input';
+import 'react-autocomplete-input/dist/bundle.css';
+
+const createFieldUpdater =
+    (
+        fieldName: keyof Filters,
+        value: IToolbarContextProps['filters'],
+        onChange: IToolbarContextProps['onChangeFilters']
+    ) =>
+        (fieldValue: string | number | undefined) => {
+            if (fieldValue === '') {
+                fieldValue = undefined;
+            }
+            onChange?.({ ...value, [fieldName]: fieldValue });
+        };
 
 export const Toolbar: FC<IToolbarContextProps> = React.memo(
     ({
         lookups = emptyObject as Partial<Lookups>,
+        smartSearchOptions = [],
         filters: value = initialFilters,
         showResetFilters,
         columnsSelection = emptyObject,
@@ -51,6 +59,11 @@ export const Toolbar: FC<IToolbarContextProps> = React.memo(
         const handleReset = useCallback(() => {
             onResetFilters?.();
         }, [onResetFilters]);
+
+        useEffect(() => {
+            console.log('smartSearchOptions:', smartSearchOptions);
+        }, [smartSearchOptions]);
+
         return (
             <Grid container spacing={1}>
                 <Grid item>
@@ -84,6 +97,12 @@ export const Toolbar: FC<IToolbarContextProps> = React.memo(
                         value={value.search}
                     />
                 </Grid>
+                <Grid item>
+                    <AutocompleteInput
+                        trigger=""
+                        options={smartSearchOptions}
+                    />
+                </Grid>
                 <Grid item>
                     <ColumnsSelect
                         label="Columns"

components/toolbar/ToolbarContext.ts

@@ -6,6 +6,7 @@ import { emptyObject } from '../../utils/emptyObject';
 
 export interface IToolbarContextProps {
     lookups?: Partial<Lookups>;
+    smartSearchOptions?: string[];
     filters?: Filters;
     showResetFilters?: boolean;
     columnsSelection?: ColumnsSelection;

package.json

@@ -58,6 +58,7 @@
         "ip": "^1.1.5",
         "lodash": "^4.17.20",
         "opener": "^1.5.2",
+        "react-autocomplete-input": "^1.0.18",
         "regenerator-runtime": "^0.13.7",
         "wirebird-client": "^0.2.4",
         "ws": "^7.1.2",
@@ -104,9 +105,9 @@
         "parcel-bundler": "^1.12.4",
         "parcel-plugin-bundle-visualiser": "^1.2.0",
         "prettier": "^2.2.1",
-        "react": "^16.9.0",
+        "react": "*",
         "react-data-grid": "^7.0.0-canary.30",
-        "react-dom": "^16.9.0",
+        "react-dom": "*",
         "react-inspector": "^5.1.0",
         "react-redux": "^7.1.1",
         "react-splitter-layout": "^4.0.0",

redux/ducks/updates.ts

@@ -84,3 +84,19 @@ export const getLookups = createSelector(
         method: lookupManager.getLookups(lookups, 'method'),
     })
 );
+
+const recordToOptions = (
+    prefix: string,
+    rec: Record<string, unknown>
+): string[] => Object.keys(rec).map((key) => `${prefix}:${key}`);
+
+export const getSmartSearchOptions = createSelector(
+    getLookups,
+    (lookups: Lookups) => {
+        return [
+            ...recordToOptions('method', lookups.method),
+            ...recordToOptions('domain', lookups.domain),
+            ...recordToOptions('pid', lookups.pid),
+        ];
+    }
+);

redux/selectors.ts

@@ -6,6 +6,7 @@ import {
     getCurrentLoggerEvent,
     getLoggerEvents,
     getLookups,
+    getSmartSearchOptions,
 } from './ducks/updates';
 import { getFilteredLoggerEvents } from './selectors/getFilteredLoggerEvents';
 import { State } from './store';
@@ -15,6 +16,7 @@ const selectorsMap = {
         getLoggerEvents,
         getCurrentLoggerEvent,
         getLookups,
+        getSmartSearchOptions,
     },
     filters: {
         getFilters,

utils/__tests__/parseSearchString.spec.ts

@@ -0,0 +1,52 @@
+import { parseSearchString } from '../parseSearchString';
+
+parseSearchString;
+
+describe('parseSearchString', () => {
+    it('parses an advanced search string into an object', () => {
+        expect(parseSearchString('method:POST')).toEqual({
+            method: new Set(['POST']),
+            domain: new Set(),
+            text  : '',
+        });
+        expect(parseSearchString('method:POST method:GET')).toEqual({
+            method: new Set(['POST', 'GET']),
+            domain: new Set(),
+            text  : '',
+        });
+        expect(parseSearchString('method:POST method:GET method:PUT')).toEqual({
+            method: new Set(['POST', 'GET', 'PUT']),
+            domain: new Set(),
+            text  : '',
+        });
+        expect(parseSearchString('domain:example.com')).toEqual({
+            method: new Set(),
+            domain: new Set(['example.com']),
+            text  : '',
+        });
+        expect(
+            parseSearchString('domain:example.com domain:example.org')
+        ).toEqual({
+            method: new Set(),
+            domain: new Set(['example.com', 'example.org']),
+            text  : '',
+        });
+        expect(parseSearchString('method:POST domain:example.org')).toEqual({
+            method: new Set(['POST']),
+            domain: new Set(['example.org']),
+            text  : '',
+        });
+        expect(parseSearchString('hello method:POST world')).toEqual({
+            method: new Set(['POST']),
+            domain: new Set(),
+            text  : 'hello world',
+        });
+        expect(parseSearchString('hello method:POST method:GET world')).toEqual(
+            {
+                method: new Set(['POST', 'GET']),
+                domain: new Set(),
+                text  : 'hello world',
+            }
+        );
+    });
+});

utils/parseSearchString.ts

@@ -0,0 +1,62 @@
+//Parses an advanced search string into an object.
+//Full text search strings are interpreted as-is.
+//Tagged search entities, when recognized, are parsed into special search conditions.
+//Examples:
+//  "method:POST" => {method: ["POST"]}
+//  "method:POST method:GET" => {method: ["POST", "GET"]}
+//  "method:POST method:GET method:PUT" => {method: ["POST", "GET", "PUT"]}
+//  "domain:example.com" => {domain: ["example.com"]}
+//  "domain:example.com domain:example.org" => {domain: ["example.com", "example.org"]}
+//  "method:POST domain:example.org" => {method: ["POST"], domain: ["example.org"]}
+//  "hello method:POST world" => {text: "hello world", method: ["POST"]}
+//  "hello method:POST method:GET world" => {text: "hello world", method: ["POST", "GET"]}
+
+export interface SearchCondition {
+    method: Set<string>;
+    domain: Set<string>;
+    text: string;
+}
+
+export function parseSearchString(searchString: string): SearchCondition {
+    const conditions: SearchCondition = {
+        method: new Set(),
+        domain: new Set(),
+        text  : '',
+    };
+    const conditionStrings = searchString.split(' ');
+    for (const conditionString of conditionStrings) {
+        const condition = parseConditionString(conditionString);
+        if (condition.method) {
+            conditions.method.add(condition.method);
+        }
+        if (condition.domain) {
+            conditions.domain.add(condition.domain);
+        }
+        if (condition.text) {
+            conditions.text += ' ' + condition.text;
+        }
+
+        conditions.text = conditions.text.trim();
+    }
+    return conditions;
+}
+
+function parseConditionString(conditionString: string): {
+    method?: string;
+    domain?: string;
+    text?: string;
+} {
+    if (conditionString.startsWith('method:')) {
+        return {
+            method: conditionString.substring('method:'.length),
+        };
+    }
+    if (conditionString.startsWith('domain:')) {
+        return {
+            domain: conditionString.substring('domain:'.length),
+        };
+    }
+    return {
+        text: conditionString,
+    };
+}

yarn.lock

@@ -4979,6 +4979,11 @@ core-js-pure@^3.8.1, core-js-pure@^3.8.2:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.21.0.tgz#819adc8dfb808205ce25b51d50591becd615db7e"
   integrity sha512-VaJUunCZLnxuDbo1rNOzwbet9E1K9joiXS5+DQMPtgxd24wfsZbJZMMfQLGYMlCUvSxLfsRUUhoOR2x28mFfeg==
 
+core-js@3:
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
+  integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
+
 core-js@^2.4.0, core-js@^2.6.5:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
@@ -6938,6 +6943,11 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-input-selection@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/get-input-selection/-/get-input-selection-1.1.4.tgz#2c622bbd994f8d7f8d6bfb60d634cc73ee775a81"
+  integrity sha1-LGIrvZlPjX+Na/tg1jTMc+53WoE=
+
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
@@ -11339,6 +11349,16 @@ rc@^1.0.1, rc@^1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-autocomplete-input@^1.0.18:
+  version "1.0.18"
+  resolved "https://registry.yarnpkg.com/react-autocomplete-input/-/react-autocomplete-input-1.0.18.tgz#22c3005bb7632d270bc674015690d434dc17151f"
+  integrity sha512-xqGFOzLDDK+p9+HJrLzEeM3lEVm8969v+Zaa9hJIh0SXGUrzAHXfmd6krxD4r60zN6xdB4SP5Y0w813dW55hmQ==
+  dependencies:
+    core-js "3"
+    get-input-selection "^1.1.4"
+    prop-types "^15.7.2"
+    textarea-caret "^3.0.2"
+
 react-colorful@^5.1.2:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784"
@@ -11372,15 +11392,13 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^16.9.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@*:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
+  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.21.0"
 
 react-draggable@^4.4.3:
   version "4.4.4"
@@ -11528,14 +11546,12 @@ react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^16.9.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@*:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
+  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg-up@^7.0.1:
   version "7.0.1"
@@ -12084,13 +12100,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 [email protected]:
   version "2.7.0"
@@ -13074,6 +13089,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+textarea-caret@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/textarea-caret/-/textarea-caret-3.1.0.tgz#5d5a35bb035fd06b2ff0e25d5359e97f2655087f"
+  integrity sha512-cXAvzO9pP5CGa6NKx0WYHl+8CHKZs8byMkt3PCJBCmq2a34YA9pO1NrQET5pzeqnBjBdToF5No4rrmkDUgQC2Q==
+
 throat@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"