Add exact match filtering to console table (#7448)

* Add exact filtering

* Bug fix

* Extract filter as a function

* change code position

web-console/src/bootstrap/react-table-defaults.tsx

@@ -20,7 +20,7 @@ import * as React from 'react';
 import { Filter, ReactTableDefaults } from 'react-table';
 
 import { Loader } from '../components/loader';
-import { countBy, makeTextFilter } from '../utils';
+import { countBy, customTableFilter, makeTextFilter } from '../utils';
 
 import { ReactTableCustomPagination } from './react-table-custom-pagination';
 
@@ -38,8 +38,7 @@ class NoData extends React.Component {
 
 Object.assign(ReactTableDefaults, {
   defaultFilterMethod: (filter: Filter, row: any, column: any) => {
-    const id = filter.pivotId || filter.id;
-    return row[id] !== undefined ? String(row[id]).includes(filter.value) : true;
+    return customTableFilter(filter, row);
   },
   LoadingComponent: Loader,
   loadingText: '',

web-console/src/utils/general.tsx

@@ -23,6 +23,7 @@ import * as React from 'react';
 import { Filter, FilterRender } from 'react-table';
 
 export function addFilter(filters: Filter[], id: string, value: string): Filter[] {
+  value = `"${value}"`;
   const currentFilter = filters.find(f => f.id === id);
   if (currentFilter) {
     filters = filters.filter(f => f.id !== id);
@@ -65,6 +66,32 @@ export function makeBooleanFilter(): FilterRender {
   };
 }
 
+export function customTableFilter(filter: Filter, row?: any): boolean | string {
+  const id = filter.pivotId || filter.id;
+  const clientSideFilter: boolean = row !== undefined;
+  if (clientSideFilter && row[id] === undefined) {
+    return true;
+  }
+  const targetValue = (clientSideFilter && String(row[id].toLowerCase())) || JSON.stringify(filter.id).toLowerCase();
+  let filterValue = filter.value.toLowerCase();
+  if (filterValue.startsWith(`"`) && filterValue.endsWith(`"`)) {
+    const exactString = filterValue.slice(1, -1);
+    if (clientSideFilter) {
+      return String(targetValue) === exactString;
+    } else {
+      return `${targetValue} = '${exactString}'`;
+    }
+  }
+  if (filterValue.startsWith(`"`)) {
+    filterValue = filterValue.substring(1);
+  }
+  if (clientSideFilter) {
+    return targetValue.includes(filterValue);
+  } else {
+    return `${targetValue} LIKE '%${filterValue}%'`;
+  }
+}
+
 // ----------------------------
 
 export function countBy<T>(array: T[], fn: (x: T, index: number) => string = String): Record<string, number> {

web-console/src/views/segments-view.tsx

@@ -29,7 +29,7 @@ import { TableColumnSelection } from '../components/table-column-selection';
 import { ViewControlBar } from '../components/view-control-bar';
 import { AppToaster } from '../singletons/toaster';
 import {
-  addFilter,
+  addFilter, customTableFilter,
   formatBytes,
   formatNumber, LocalStorageKeys,
   makeBooleanFilter,
@@ -123,7 +123,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
         if (f.value === 'all') return null;
         return `${JSON.stringify(f.id)} = ${f.value === 'true' ? 1 : 0}`;
       } else {
-        return `${JSON.stringify(f.id)} LIKE '%${f.value}%'`;
+        return customTableFilter(f);
       }
     }).filter(Boolean);
 
@@ -176,7 +176,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
           accessor: 'datasource',
           Cell: row => {
             const value = row.value;
-            return <a onClick={() => { this.setState({ segmentFilter: addFilter(segmentFilter, 'datasource', value) }); }}>{value}</a>;
+            return <a onClick={() => { this.setState({ segmentFilter: addFilter(segmentFilter, 'datasource', value)}); }}>{value}</a>;
           },
           show: tableColumnSelectionHandler.showColumn('Datasource')
         },