From efe9079f0a4163636fb41bfecd0200c4c12065f8 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 7 Jun 2024 08:39:51 -0700
Subject: [PATCH] Web console: fix pagination and filtering regression in
 supervisor view (#16571)

* fix pagination and filtering in supervisor view

* update snapshot
---
 .../supervisors-view.spec.tsx.snap            | 10 ++++----
 .../supervisors-view/supervisors-view.tsx     | 24 +++++++++++++------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap b/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap
index f43b9d3eb90c..b20802ca4b84 100644
--- a/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap
+++ b/web-console/src/views/supervisors-view/__snapshots__/supervisors-view.spec.tsx.snap
@@ -192,7 +192,7 @@ exports[`SupervisorsView matches snapshot 1`] = `
           "accessor": "detailed_state",
           "id": "detailed_state",
           "show": true,
-          "width": 130,
+          "width": 150,
         },
         {
           "Cell": [Function],
@@ -374,11 +374,12 @@ exports[`SupervisorsView matches snapshot 1`] = `
     indexKey="_index"
     loading={false}
     loadingText="Loading..."
+    manual={true}
     multiSort={true}
     nestingLevelKey="_nestingLevel"
     nextText="Next"
     noDataText=""
-    ofText="of"
+    ofText=""
     onFetchData={[Function]}
     onFilteredChange={[Function]}
     originalKey="_original"
@@ -391,6 +392,7 @@ exports[`SupervisorsView matches snapshot 1`] = `
       ]
     }
     pageText="Page"
+    pages={10000000}
     pivotDefaults={{}}
     pivotIDKey="_pivotID"
     pivotValKey="_pivotVal"
@@ -399,9 +401,9 @@ exports[`SupervisorsView matches snapshot 1`] = `
     resolveData={[Function]}
     rowsSelectorText="rows per page"
     rowsText="rows"
-    showPageJump={true}
+    showPageJump={false}
     showPageSizeOptions={true}
-    showPagination={false}
+    showPagination={true}
     showPaginationBottom={true}
     showPaginationTop={false}
     sortable={true}
diff --git a/web-console/src/views/supervisors-view/supervisors-view.tsx b/web-console/src/views/supervisors-view/supervisors-view.tsx
index f66044455876..68654cbce79d 100644
--- a/web-console/src/views/supervisors-view/supervisors-view.tsx
+++ b/web-console/src/views/supervisors-view/supervisors-view.tsx
@@ -19,6 +19,7 @@
 import { Icon, Intent, Menu, MenuItem, Position, Tag } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
+import { SqlExpression } from '@druid-toolkit/query';
 import * as JSONBig from 'json-bigint-native';
 import type { JSX } from 'react';
 import React from 'react';
@@ -65,6 +66,7 @@ import {
   assemble,
   checkedCircleIcon,
   deepGet,
+  filterMap,
   formatByteRate,
   formatBytes,
   formatInteger,
@@ -227,6 +229,12 @@ export class SupervisorsView extends React.PureComponent<
       ) => {
         let supervisors: SupervisorQueryResultRow[];
         if (capabilities.hasSql()) {
+          let filterClause = '';
+          const whereParts = filterMap(filtered, sqlQueryCustomTableFilter);
+          if (whereParts.length) {
+            filterClause = SqlExpression.and(...whereParts).toString();
+          }
+
           const sqlQuery = assemble(
             'WITH s AS (SELECT',
             '  "supervisor_id",',
@@ -238,9 +246,7 @@ export class SupervisorsView extends React.PureComponent<
             'FROM "sys"."supervisors")',
             'SELECT *',
             'FROM s',
-            filtered.length
-              ? `WHERE ${filtered.map(sqlQueryCustomTableFilter).join(' AND ')}`
-              : undefined,
+            filterClause ? `WHERE ${filterClause}` : undefined,
             sortedToOrderByClause(sorted),
             `LIMIT ${pageSize}`,
             page ? `OFFSET ${page * pageSize}` : undefined,
@@ -638,19 +644,23 @@ export class SupervisorsView extends React.PureComponent<
     return (
       <ReactTable
         data={supervisors}
+        pages={10000000} // Dummy, we are hiding the page selector
         loading={supervisorsState.loading}
         noDataText={
           supervisorsState.isEmpty() ? 'No supervisors' : supervisorsState.getErrorMessage() || ''
         }
+        manual
+        filterable
         filtered={filters}
         onFilteredChange={onFiltersChange}
-        filterable
         onFetchData={tableState => {
           this.fetchData(tableState);
         }}
+        showPageJump={false}
+        ofText=""
         defaultPageSize={SMALL_TABLE_PAGE_SIZE}
         pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
-        showPagination={supervisors.length > SMALL_TABLE_PAGE_SIZE}
+        showPagination
         columns={[
           {
             Header: twoLines('Supervisor ID', <i>(datasource)</i>),
@@ -684,11 +694,11 @@ export class SupervisorsView extends React.PureComponent<
           {
             Header: 'Status',
             id: 'detailed_state',
-            width: 130,
+            width: 150,
             accessor: 'detailed_state',
             Cell: ({ value }) => (
               <TableFilterableCell
-                field="status"
+                field="detailed_state"
                 value={value}
                 filters={filters}
                 onFiltersChange={onFiltersChange}