From: Sarthak0702 <sarthak.0702@gmail.com>
Date: Tue, 1 Mar 2022 18:07:38 +0000 (+0530)
Subject: mgr/dashboard: highlight the search text in cluster logs
X-Git-Tag: v16.2.8~26^2~1
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=68878ef059675fc0c64fb8eb4575eed1fd7ef7b3;p=ceph.git

mgr/dashboard: highlight the search text in cluster logs

Fixes: https://tracker.ceph.com/issues/54445
Signed-off-by: Sarthak0702 <sarthak.0702@gmail.com>
(cherry picked from commit a878c7442059d11ac14edd226d71abbabda9a3c4)
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
index ec56d3f25dca..64175f1a4772 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
@@ -27,7 +27,8 @@
             <p *ngFor="let line of clog">
               <span class="timestamp">{{ line.stamp | cdDate }}</span>
               <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
-              <span class="message">{{ line.message }}</span>
+              <span class="message"
+                    [innerHTML]="line.message | searchHighlight: search"></span>
             </p>
 
             <ng-container *ngIf="clog.length != 0 else noEntriesTpl"></ng-container>
@@ -57,7 +58,8 @@
             <p *ngFor="let line of audit_log">
               <span class="timestamp">{{ line.stamp | cdDate }}</span>
               <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
-              <span class="message">{{ line.message }}</span>
+              <span class="message"
+                    [innerHTML]="line.message | searchHighlight: search"></span>
             </p>
 
             <ng-container *ngIf="audit_log.length != 0 else noEntriesTpl"></ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts
index 04375b1ef7c9..420da4958914 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts
@@ -70,8 +70,7 @@ export class LogsComponent implements OnInit, OnDestroy {
 
   abstractFilters(): any {
     const priority = this.priority;
-    const key = this.search.toLowerCase().replace(/,/g, '');
-
+    const key = this.search.toLowerCase();
     let yearMonthDay: string;
     if (this.selectedDate) {
       const m = this.selectedDate.month;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts
index 9ec4e0492df0..508a29e9801f 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts
@@ -27,6 +27,7 @@ import { RbdConfigurationSourcePipe } from './rbd-configuration-source.pipe';
 import { RelativeDatePipe } from './relative-date.pipe';
 import { RoundPipe } from './round.pipe';
 import { SanitizeHtmlPipe } from './sanitize-html.pipe';
+import { SearchHighlightPipe } from './search-highlight.pipe';
 import { TruncatePipe } from './truncate.pipe';
 import { UpperFirstPipe } from './upper-first.pipe';
 
@@ -60,7 +61,8 @@ import { UpperFirstPipe } from './upper-first.pipe';
     DurationPipe,
     MapPipe,
     TruncatePipe,
-    SanitizeHtmlPipe
+    SanitizeHtmlPipe,
+    SearchHighlightPipe
   ],
   exports: [
     ArrayPipe,
@@ -90,7 +92,8 @@ import { UpperFirstPipe } from './upper-first.pipe';
     DurationPipe,
     MapPipe,
     TruncatePipe,
-    SanitizeHtmlPipe
+    SanitizeHtmlPipe,
+    SearchHighlightPipe
   ],
   providers: [
     ArrayPipe,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/search-highlight.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/search-highlight.pipe.spec.ts
new file mode 100644
index 000000000000..73f8e55ede2b
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/search-highlight.pipe.spec.ts
@@ -0,0 +1,41 @@
+import { TestBed } from '@angular/core/testing';
+
+import { configureTestBed } from '~/testing/unit-test-helper';
+import { SearchHighlightPipe } from './search-highlight.pipe';
+
+describe('SearchHighlightPipe', () => {
+  let pipe: SearchHighlightPipe;
+
+  configureTestBed({
+    providers: [SearchHighlightPipe]
+  });
+
+  beforeEach(() => {
+    pipe = TestBed.inject(SearchHighlightPipe);
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('transforms with a matching keyword ', () => {
+    const value = 'overall HEALTH_WARN Dashboard debug mode is enabled';
+    const args = 'Dashboard';
+    const expected = 'overall HEALTH_WARN <mark>Dashboard</mark> debug mode is enabled';
+
+    expect(pipe.transform(value, args)).toEqual(expected);
+  });
+
+  it('transforms with a matching keyword having regex character', () => {
+    const value = 'loreum ipsum .? dolor sit amet';
+    const args = '.?';
+    const expected = 'loreum ipsum <mark>.?</mark> dolor sit amet';
+
+    expect(pipe.transform(value, args)).toEqual(expected);
+  });
+
+  it('transforms with empty search keyword', () => {
+    const value = 'overall HEALTH_WARN Dashboard debug mode is enabled';
+    expect(pipe.transform(value, '')).toBe(value);
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/search-highlight.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/search-highlight.pipe.ts
new file mode 100644
index 000000000000..c00cc46c6d9b
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/search-highlight.pipe.ts
@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'searchHighlight'
+})
+export class SearchHighlightPipe implements PipeTransform {
+  transform(value: string, args: string): string {
+    if (!args) {
+      return value;
+    }
+    args = this.escapeRegExp(args);
+    const regex = new RegExp(args, 'gi');
+    const match = value.match(regex);
+
+    if (!match) {
+      return value;
+    }
+
+    return value.replace(regex, '<mark>$&</mark>');
+  }
+
+  private escapeRegExp(str: string) {
+    // $& means the whole matched string
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+}