Fixed filter for status in task table (#7507)

* Fixed filter for Task view status

* Refactored code

* Fixed a bug for SQL filter by not converting input to lower case since the comparison is done through SQL

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, customTableFilter, makeTextFilter } from '../utils';
+import { booleanCustomTableFilter, countBy, makeTextFilter } from '../utils';
 
 import { ReactTableCustomPagination } from './react-table-custom-pagination';
 
@@ -38,7 +38,8 @@ class NoData extends React.Component {
 
 Object.assign(ReactTableDefaults, {
   defaultFilterMethod: (filter: Filter, row: any, column: any) => {
-    return customTableFilter(filter, row);
+    const id = filter.pivotId || filter.id;
+    return booleanCustomTableFilter(filter, row[id]);
   },
   LoadingComponent: Loader,
   loadingText: '',

web-console/src/console-application.tsx

@@ -127,7 +127,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
   }
 
   private goToSegments = (datasource: string, onlyUnavailable = false) => {
-    this.datasource = datasource;
+    this.datasource = `"${datasource}"`;
     this.onlyUnavailable = onlyUnavailable;
     window.location.hash = 'segments';
     this.resetInitialsDelay();

web-console/src/utils/general.tsx

@@ -66,30 +66,47 @@ 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) {
+// ----------------------------
+
+interface NeedleAndMode {
+  needle: string;
+  mode: 'exact' | 'prefix';
+}
+
+function getNeedleAndMode(input: string): NeedleAndMode {
+  if (input.startsWith(`"`) && input.endsWith(`"`)) {
+    return {
+      needle: input.slice(1, -1),
+      mode: 'exact'
+    };
+  }
+  return {
+    needle: input.startsWith(`"`) ? input.substring(1) : input,
+    mode: 'prefix'
+  };
+}
+
+export function booleanCustomTableFilter(filter: Filter, value: any): boolean {
+  if (value === 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}'`;
-    }
+  const haystack = String(value.toLowerCase());
+  const needleAndMode: NeedleAndMode = getNeedleAndMode(filter.value.toLowerCase());
+  const needle = needleAndMode.needle;
+  if (needleAndMode.mode === 'exact') {
+    return needle === haystack;
   }
-  if (filterValue.startsWith(`"`)) {
-    filterValue = filterValue.substring(1);
-  }
-  if (clientSideFilter) {
-    return targetValue.includes(filterValue);
-  } else {
-    return `${targetValue} LIKE '%${filterValue}%'`;
+  return haystack.startsWith(needle);
+}
+
+export function sqlQueryCustomTableFilter(filter: Filter): string {
+  const columnName = JSON.stringify(filter.id);
+  const needleAndMode: NeedleAndMode = getNeedleAndMode(filter.value);
+  const needle = needleAndMode.needle;
+  if (needleAndMode.mode === 'exact') {
+    return `${columnName} = '${needle.toUpperCase()}' OR ${columnName} = '${needle.toLowerCase()}'`;
   }
+  return `${columnName} LIKE '${needle.toUpperCase()}%' OR ${columnName} LIKE '${needle.toLowerCase()}%'`;
 }
 
 // ----------------------------

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

@@ -29,13 +29,15 @@ import { TableColumnSelection } from '../components/table-column-selection';
 import { ViewControlBar } from '../components/view-control-bar';
 import { AppToaster } from '../singletons/toaster';
 import {
-  addFilter, customTableFilter,
+  addFilter,
   formatBytes,
-  formatNumber, LocalStorageKeys,
-  makeBooleanFilter,
+  formatNumber,
+  LocalStorageKeys, makeBooleanFilter,
   parseList,
   queryDruidSql,
-  QueryManager, TableColumnSelectionHandler
+  QueryManager,
+  sqlQueryCustomTableFilter,
+  TableColumnSelectionHandler
 } from '../utils';
 
 import './segments-view.scss';
@@ -123,7 +125,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 customTableFilter(f);
+        return sqlQueryCustomTableFilter(f);
       }
     }).filter(Boolean);
 

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

@@ -31,6 +31,7 @@ import { SpecDialog } from '../dialogs/spec-dialog';
 import { AppToaster } from '../singletons/toaster';
 import {
   addFilter,
+  booleanCustomTableFilter,
   countBy,
   formatDuration,
   getDruidErrorMessage, LocalStorageKeys,
@@ -525,6 +526,9 @@ ORDER BY "rank" DESC, "created_time" DESC`);
               const statusRanking: any = this.statusRanking;
               return statusRanking[d1.status] - statusRanking[d2.status] || d1.created_time.localeCompare(d2.created_time);
             },
+            filterMethod: (filter: Filter, row: any) => {
+              return booleanCustomTableFilter(filter, row.status.status);
+            },
             show: taskTableColumnSelectionHandler.showColumn('Status')
           },
           {