Web console: refactor table filters, show inactive MSQ worker count (#18768)

* Make TableFilters class instead of using the interface from react-table

* Add refresh button to ShowJson and ShowJsonOrStages

* Show inactive workers

Author: vogievetsky

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

@@ -21,13 +21,9 @@ import type { Filter } from 'react-table';
 import { ReactTableDefaults } from 'react-table';
 
 import { Loader } from '../components';
-import {
-  booleanCustomTableFilter,
-  DEFAULT_TABLE_CLASS_NAME,
-  GenericFilterInput,
-  ReactTablePagination,
-} from '../react-table';
+import { DEFAULT_TABLE_CLASS_NAME, GenericFilterInput, ReactTablePagination } from '../react-table';
 import { countBy } from '../utils';
+import { TableFilter } from '../utils/table-filters';
 
 const NoData = React.memo(function NoData(props: { children?: React.ReactNode }) {
   const { children } = props;
@@ -41,10 +37,11 @@ export function bootstrapReactTable() {
     defaultFilterMethod: (filter: Filter, row: any) => {
       const id = filter.pivotId || filter.id;
       const subRows = row._subRows;
+      const tableFilter = TableFilter.fromFilter(filter);
       if (Array.isArray(subRows)) {
-        return subRows.some(r => booleanCustomTableFilter(filter, r[id]));
+        return subRows.some(r => tableFilter.matches(r[id]));
       } else {
-        return booleanCustomTableFilter(filter, row[id]);
+        return tableFilter.matches(row[id]);
       }
     },
     LoadingComponent: Loader,

web-console/src/components/show-json-or-stages/__snapshots__/show-json-or-stages.spec.tsx.snap

@@ -10,6 +10,18 @@ exports[`ShowJsonOrStages matches snapshot 1`] = `
     <div
       class="bp5-button-group right-buttons"
     >
+      <button
+        class="bp5-button bp5-disabled bp5-minimal"
+        disabled=""
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          class="bp5-button-text"
+        >
+          Refesh
+        </span>
+      </button>
       <button
         class="bp5-button bp5-disabled bp5-minimal"
         disabled=""

web-console/src/components/show-json-or-stages/show-json-or-stages.tsx

@@ -40,7 +40,7 @@ export interface ShowJsonOrStagesProps {
 export const ShowJsonOrStages = React.memo(function ShowJsonOrStages(props: ShowJsonOrStagesProps) {
   const { endpoint, transform, downloadFilename } = props;
 
-  const [jsonState] = useQueryManager<null, [string, Execution | undefined]>({
+  const [jsonState, queryManager] = useQueryManager<null, [string, Execution | undefined]>({
     processQuery: async (_, signal) => {
       const resp = await Api.instance.get(endpoint, { signal });
       let data = resp.data;
@@ -68,6 +68,12 @@ export const ShowJsonOrStages = React.memo(function ShowJsonOrStages(props: Show
     <div className="show-json-or-stages">
       <div className="top-actions">
         <ButtonGroup className="right-buttons">
+          <Button
+            disabled={jsonState.loading}
+            text="Refesh"
+            minimal
+            onClick={() => queryManager.rerunLastQuery()}
+          />
           {downloadFilename && (
             <Button
               disabled={jsonState.loading}

web-console/src/components/show-json/__snapshots__/show-json.spec.tsx.snap

@@ -10,6 +10,18 @@ exports[`ShowJson matches snapshot 1`] = `
     <div
       class="bp5-button-group right-buttons"
     >
+      <button
+        class="bp5-button bp5-disabled bp5-minimal"
+        disabled=""
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          class="bp5-button-text"
+        >
+          Refesh
+        </span>
+      </button>
       <button
         class="bp5-button bp5-disabled bp5-minimal"
         disabled=""

web-console/src/components/show-json/show-json.tsx

@@ -38,7 +38,7 @@ export interface ShowJsonProps {
 export const ShowJson = React.memo(function ShowJson(props: ShowJsonProps) {
   const { endpoint, transform, downloadFilename } = props;
 
-  const [jsonState] = useQueryManager<null, string>({
+  const [jsonState, queryManager] = useQueryManager<null, string>({
     processQuery: async (_, signal) => {
       const resp = await Api.instance.get(endpoint, { signal });
       let data = resp.data;
@@ -53,6 +53,12 @@ export const ShowJson = React.memo(function ShowJson(props: ShowJsonProps) {
     <div className="show-json">
       <div className="top-actions">
         <ButtonGroup className="right-buttons">
+          <Button
+            disabled={jsonState.loading}
+            text="Refesh"
+            minimal
+            onClick={() => queryManager.rerunLastQuery()}
+          />
           {downloadFilename && (
             <Button
               disabled={jsonState.loading}

web-console/src/components/table-filterable-cell/table-filterable-cell.tsx

@@ -19,10 +19,9 @@
 import { Menu, MenuDivider, MenuItem, Popover } from '@blueprintjs/core';
 import type { ReactNode } from 'react';
 import React from 'react';
-import type { Filter } from 'react-table';
 
-import type { FilterMode } from '../../react-table';
-import { addOrUpdateFilter, combineModeAndNeedle, filterModeToIcon } from '../../react-table';
+import type { FilterMode, TableFilters } from '../../utils/table-filters';
+import { TableFilter } from '../../utils/table-filters';
 import { Deferred } from '../deferred/deferred';
 
 import './table-filterable-cell.scss';
@@ -33,8 +32,8 @@ const FILTER_MODES_NO_COMPARISONS: FilterMode[] = ['=', '!='];
 export interface TableFilterableCellProps {
   field: string;
   value: string;
-  filters: Filter[];
-  onFiltersChange(filters: Filter[]): void;
+  filters: TableFilters;
+  onFiltersChange(filters: TableFilters): void;
   enableComparisons?: boolean;
   children?: ReactNode;
   displayValue?: string;
@@ -57,15 +56,10 @@ export const TableFilterableCell = React.memo(function TableFilterableCell(
               {(enableComparisons ? FILTER_MODES : FILTER_MODES_NO_COMPARISONS).map((mode, i) => (
                 <MenuItem
                   key={i}
-                  icon={filterModeToIcon(mode)}
+                  icon={TableFilter.modeToIcon(mode)}
                   text={displayValue ?? value}
                   onClick={() =>
-                    onFiltersChange(
-                      addOrUpdateFilter(filters, {
-                        id: field,
-                        value: combineModeAndNeedle(mode, value),
-                      }),
-                    )
+                    onFiltersChange(filters.addOrUpdate(new TableFilter(field, mode, value)))
                   }
                 />
               ))}