Add controls to treat Admin Log Viewer filter as regex (or not) (#3369)

xh · May 18, 2023 · b88c9b9 · b88c9b9
1 parent 78fe99e
commit b88c9b9
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@
 
 ### 🎁 New Features
 
+* Added `regexOption` and `caseSensitive` props to the `LogDisplayModel`. (Case-sensitive search
+  requires `hoist-core >= v16.2.0`).
+
+### 🎁 New Features
+
 * Added new `GroupingChooserModel.commitOnChange` config - enable to update the observable grouping
   value as the user adjusts their choices within the control. Default behavior is unchanged,
   requiring user to dismiss the popover to commit the new value.

diff --git a/admin/tabs/server/logViewer/LogDisplay.ts b/admin/tabs/server/logViewer/LogDisplay.ts
@@ -6,14 +6,15 @@
  */
 import {clock} from '@xh/hoist/cmp/clock';
 import {grid} from '@xh/hoist/cmp/grid';
-import {hspacer, label} from '@xh/hoist/cmp/layout';
+import {fragment, hspacer, label} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses, XH} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {gridFindField} from '@xh/hoist/desktop/cmp/grid';
 import {numberInput, switchInput, textInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
+import {checkMinVersion} from '@xh/hoist/utils/js';
 import {fmtTimeZone} from '@xh/hoist/utils/impl';
 import {LogDisplayModel} from './LogDisplayModel';
 import './LogViewer.scss';
@@ -58,8 +59,26 @@ const tbar = hoistCmp.factory<LogDisplayModel>(({model}) => {
             bind: 'pattern',
             placeholder: 'Filter',
             leftIcon: Icon.filter(),
-            enableClear: true,
-            flex: 1
+            flex: 1,
+            rightElement: fragment(
+                button({
+                    text: 'Cc',
+                    onClick: () => (model.caseSensitive = !model.caseSensitive),
+                    className: model.caseSensitive
+                        ? 'xh-log-display__filter-button xh-log-display__filter-button--active'
+                        : 'xh-log-display__filter-button xh-log-display__filter-button--inactive',
+                    tooltip: 'Case-sensitive filter option',
+                    omit: !checkMinVersion(XH.getEnv('hoistCoreVersion'), '16.2.0')
+                }),
+                button({
+                    text: '.*',
+                    onClick: () => (model.regexOption = !model.regexOption),
+                    className: model.regexOption
+                        ? 'xh-log-display__filter-button xh-log-display__filter-button--active'
+                        : 'xh-log-display__filter-button xh-log-display__filter-button--inactive',
+                    tooltip: 'Regex filter option'
+                })
+            )
         }),
         gridFindField({flex: 1}),
         '-',

diff --git a/admin/tabs/server/logViewer/LogDisplayModel.ts b/admin/tabs/server/logViewer/LogDisplayModel.ts
@@ -11,7 +11,7 @@ import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
 import {olderThan, ONE_SECOND, SECONDS} from '@xh/hoist/utils/datetime';
 import {debounced, isDisplayed} from '@xh/hoist/utils/js';
-import {maxBy} from 'lodash';
+import {escapeRegExp, maxBy} from 'lodash';
 import {LogViewerModel} from './LogViewerModel';
 
 /**
@@ -37,6 +37,14 @@ export class LogDisplayModel extends HoistModel {
     @managed
     gridModel: GridModel;
 
+    @bindable
+    @persist
+    regexOption: boolean = false;
+
+    @bindable
+    @persist
+    caseSensitive: boolean = false;
+
     get tailActive(): boolean {
         return this.tail && !this.gridModel.hasSelection;
     }
@@ -85,7 +93,9 @@ export class LogDisplayModel extends HoistModel {
                     filename: parent.file,
                     startLine: this.startLine,
                     maxLines: this.maxLines,
-                    pattern: this.pattern
+                    pattern: this.regexOption ? this.pattern : escapeRegExp(this.pattern),
+                    regexOption: this.regexOption,
+                    caseSensitive: this.caseSensitive
                 },
                 loadSpec
             });

diff --git a/admin/tabs/server/logViewer/LogViewer.scss b/admin/tabs/server/logViewer/LogViewer.scss
@@ -20,4 +20,14 @@
       white-space: pre;
     }
   }
+
+  &__filter-button {
+    margin: 3px 0 !important;
+    &--active {
+      color: var(--xh-intent-primary) !important;
+    }
+    &--inactive {
+      color: var(--xh-text-color-muted) !important;
+    }
+  }
 }