Web console: surface more info on the supervisor view

web-console/src/components/header-bar/header-bar.scss

@@ -89,4 +89,9 @@
       }
     }
   }
+
+  .#{$bp-ns}-navbar-group.#{$bp-ns}-align-right {
+    position: absolute;
+    right: 15px;
+  }
 }

web-console/src/components/table-column-selector/table-column-selector.spec.tsx

@@ -25,7 +25,7 @@ describe('TableColumnSelector', () => {
   it('matches snapshot', () => {
     const tableColumn = (
       <TableColumnSelector
-        columns={['a', 'b', 'c']}
+        columns={['a', 'b', { text: 'c', label: 'c-label' }]}
         onChange={() => {}}
         tableColumnsHidden={['b']}
       />

web-console/src/components/table-column-selector/table-column-selector.tsx

@@ -25,9 +25,15 @@ import { MenuCheckbox } from '../menu-checkbox/menu-checkbox';
 
 import './table-column-selector.scss';
 
+export type TableColumnSelectorColumn = string | { text: string; label: string };
+
+function getColumnName(c: TableColumnSelectorColumn) {
+  return typeof c === 'string' ? c : c.text;
+}
+
 interface TableColumnSelectorProps {
-  columns: string[];
-  onChange: (column: string) => void;
+  columns: TableColumnSelectorColumn[];
+  onChange: (columnName: string) => void;
   onClose?: (added: number) => void;
   tableColumnsHidden: string[];
 }
@@ -38,23 +44,28 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
   const { columns, onChange, onClose, tableColumnsHidden } = props;
   const [added, setAdded] = useState(0);
 
-  const isColumnShown = (column: string) => !tableColumnsHidden.includes(column);
+  const isColumnShown = (column: TableColumnSelectorColumn) =>
+    !tableColumnsHidden.includes(getColumnName(column));
 
   const checkboxes = (
     <Menu className="table-column-selector-menu">
-      {columns.map(column => (
-        <MenuCheckbox
-          text={column}
-          key={column}
-          checked={isColumnShown(column)}
-          onChange={() => {
-            if (!isColumnShown(column)) {
-              setAdded(added + 1);
-            }
-            onChange(column);
-          }}
-        />
-      ))}
+      {columns.map(column => {
+        const columnName = getColumnName(column);
+        return (
+          <MenuCheckbox
+            text={columnName}
+            label={typeof column === 'string' ? undefined : column.label}
+            key={columnName}
+            checked={isColumnShown(column)}
+            onChange={() => {
+              if (!isColumnShown(column)) {
+                setAdded(added + 1);
+              }
+              onChange(columnName);
+            }}
+          />
+        );
+      })}
     </Menu>
   );
 

web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap

@@ -18,7 +18,7 @@ exports[`TimedButton matches snapshot 1`] = `
         <Blueprint4.MenuItem
           active={false}
           disabled={false}
-          icon="selection"
+          icon="tick-circle"
           multiline={false}
           onClick={[Function]}
           popoverProps={{}}

web-console/src/components/timed-button/timed-button.tsx

@@ -25,7 +25,7 @@ import React, { useState } from 'react';
 
 import { useInterval } from '../../hooks';
 import type { LocalStorageKeys } from '../../utils';
-import { isInBackground, localStorageGet, localStorageSet } from '../../utils';
+import { checkedCircleIcon, isInBackground, localStorageGet, localStorageSet } from '../../utils';
 
 export interface DelayLabel {
   label: string;
@@ -84,7 +84,7 @@ export const TimedButton = React.memo(function TimedButton(props: TimedButtonPro
             {delays.map(({ label, delay }, i) => (
               <MenuItem
                 key={i}
-                icon={selectedDelay === delay ? IconNames.SELECTION : IconNames.CIRCLE}
+                icon={checkedCircleIcon(selectedDelay === delay)}
                 text={label}
                 onClick={() => handleSelection(delay)}
               />

web-console/src/dialogs/compaction-history-dialog/compaction-history-dialog.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, Callout, Classes, Code, Dialog, Tab, Tabs } from '@blueprintjs/core';
+import { Button, Callout, Classes, Dialog, Tab, Tabs, Tag } from '@blueprintjs/core';
 import * as JSONBig from 'json-bigint-native';
 import React, { useState } from 'react';
 
@@ -117,7 +117,7 @@ export const CompactionHistoryDialog = React.memo(function CompactionHistoryDial
             </Tabs>
           ) : (
             <div>
-              There is no compaction history for <Code>{datasource}</Code>.
+              There is no compaction history for <Tag minimal>{datasource}</Tag>.
             </div>
           )
         ) : historyState.loading ? (

web-console/src/dialogs/kill-datasource-dialog/kill-datasource-dialog.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Code, Intent } from '@blueprintjs/core';
+import { Intent, Tag } from '@blueprintjs/core';
 import React, { useState } from 'react';
 
 import { FormGroupWithInfo, PopoverText } from '../../components';
@@ -74,13 +74,14 @@ export const KillDatasourceDialog = function KillDatasourceDialog(
       warningChecks={[
         <>
           I understand that this operation will delete all metadata about the unused segments of{' '}
-          <Code>{datasource}</Code> and removes them from deep storage.
+          <Tag minimal>{datasource}</Tag> and removes them from deep storage.
         </>,
         'I understand that this operation cannot be undone.',
       ]}
     >
       <p>
-        Are you sure you want to permanently delete unused segments in <Code>{datasource}</Code>?
+        Are you sure you want to permanently delete unused segments in{' '}
+        <Tag minimal>{datasource}</Tag>?
       </p>
       <p>This action is not reversible and the data deleted will be lost.</p>
       <FormGroupWithInfo

web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap

@@ -116,7 +116,7 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
               <span
                 class="bp4-button-text"
               >
-                Statistics
+                Task stats
               </span>
             </button>
             <button
@@ -144,7 +144,7 @@ exports[`SupervisorTableActionDialog matches snapshot 1`] = `
               <span
                 class="bp4-button-text"
               >
-                Payload
+                Spec
               </span>
             </button>
             <button

web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/__snapshots__/supervisor-statistics-table.spec.tsx.snap

@@ -78,17 +78,22 @@ exports[`SupervisorStatisticsTable matches snapshot on error 1`] = `
       }
       columns={
         [
+          {
+            "Header": "Group ID",
+            "accessor": "groupId",
+            "className": "padded",
+            "width": 100,
+          },
           {
             "Header": "Task ID",
-            "accessor": [Function],
+            "accessor": "taskId",
             "className": "padded",
-            "id": "task_id",
             "width": 400,
           },
           {
             "Cell": [Function],
             "Header": "Totals",
-            "accessor": [Function],
+            "accessor": "rowStats.totals.buildSegments",
             "className": "padded",
             "id": "total",
             "width": 200,
@@ -256,17 +261,22 @@ exports[`SupervisorStatisticsTable matches snapshot on init 1`] = `
       }
       columns={
         [
+          {
+            "Header": "Group ID",
+            "accessor": "groupId",
+            "className": "padded",
+            "width": 100,
+          },
           {
             "Header": "Task ID",
-            "accessor": [Function],
+            "accessor": "taskId",
             "className": "padded",
-            "id": "task_id",
             "width": 400,
           },
           {
             "Cell": [Function],
             "Header": "Totals",
-            "accessor": [Function],
+            "accessor": "rowStats.totals.buildSegments",
             "className": "padded",
             "id": "total",
             "width": 200,
@@ -460,17 +470,22 @@ exports[`SupervisorStatisticsTable matches snapshot on no data 1`] = `
       }
       columns={
         [
+          {
+            "Header": "Group ID",
+            "accessor": "groupId",
+            "className": "padded",
+            "width": 100,
+          },
           {
             "Header": "Task ID",
-            "accessor": [Function],
+            "accessor": "taskId",
             "className": "padded",
-            "id": "task_id",
             "width": 400,
           },
           {
             "Cell": [Function],
             "Header": "Totals",
-            "accessor": [Function],
+            "accessor": "rowStats.totals.buildSegments",
             "className": "padded",
             "id": "total",
             "width": 200,
@@ -638,41 +653,46 @@ exports[`SupervisorStatisticsTable matches snapshot on some data 1`] = `
       }
       columns={
         [
+          {
+            "Header": "Group ID",
+            "accessor": "groupId",
+            "className": "padded",
+            "width": 100,
+          },
           {
             "Header": "Task ID",
-            "accessor": [Function],
+            "accessor": "taskId",
             "className": "padded",
-            "id": "task_id",
             "width": 400,
           },
           {
             "Cell": [Function],
             "Header": "Totals",
-            "accessor": [Function],
+            "accessor": "rowStats.totals.buildSegments",
             "className": "padded",
             "id": "total",
             "width": 200,
           },
           {
             "Cell": [Function],
             "Header": "1m",
-            "accessor": [Function],
+            "accessor": "rowStats.movingAverages.buildSegments.1m",
             "className": "padded",
             "id": "1m",
             "width": 200,
           },
           {
             "Cell": [Function],
             "Header": "5m",
-            "accessor": [Function],
+            "accessor": "rowStats.movingAverages.buildSegments.5m",
             "className": "padded",
             "id": "5m",
             "width": 200,
           },
           {
             "Cell": [Function],
             "Header": "15m",
-            "accessor": [Function],
+            "accessor": "rowStats.movingAverages.buildSegments.15m",
             "className": "padded",
             "id": "15m",
             "width": 200,
@@ -682,23 +702,27 @@ exports[`SupervisorStatisticsTable matches snapshot on some data 1`] = `
       data={
         [
           {
-            "summary": {
+            "groupId": "0",
+            "rowStats": {
               "movingAverages": {
                 "buildSegments": {
                   "15m": {
                     "processed": 5.544749689510444,
+                    "processedBytes": 20,
                     "processedWithError": 0,
                     "thrownAway": 0,
                     "unparseable": 0,
                   },
                   "1m": {
                     "processed": 4.593670088770785,
+                    "processedBytes": 30,
                     "processedWithError": 0,
                     "thrownAway": 0,
                     "unparseable": 0,
                   },
                   "5m": {
                     "processed": 3.5455993615040584,
+                    "processedBytes": 10,
                     "processedWithError": 0,
                     "thrownAway": 0,
                     "unparseable": 0,
@@ -708,6 +732,7 @@ exports[`SupervisorStatisticsTable matches snapshot on some data 1`] = `
               "totals": {
                 "buildSegments": {
                   "processed": 7516,
+                  "processedBytes": 60,
                   "processedWithError": 0,
                   "thrownAway": 0,
                   "unparseable": 0,

web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.spec.tsx

@@ -28,7 +28,7 @@ import {
 } from './supervisor-statistics-table';
 
 let supervisorStatisticsState: QueryState<SupervisorStatisticsTableRow[]> = QueryState.INIT;
-jest.mock('../../../hooks', () => {
+jest.mock('../../../hooks/use-query-manager', () => {
   return {
     useQueryManager: () => [supervisorStatisticsState],
   };
@@ -72,18 +72,21 @@ describe('SupervisorStatisticsTable', () => {
               buildSegments: {
                 '5m': {
                   processed: 3.5455993615040584,
+                  processedBytes: 10,
                   unparseable: 0,
                   thrownAway: 0,
                   processedWithError: 0,
                 },
                 '15m': {
                   processed: 5.544749689510444,
+                  processedBytes: 20,
                   unparseable: 0,
                   thrownAway: 0,
                   processedWithError: 0,
                 },
                 '1m': {
                   processed: 4.593670088770785,
+                  processedBytes: 30,
                   unparseable: 0,
                   thrownAway: 0,
                   processedWithError: 0,
@@ -93,6 +96,7 @@ describe('SupervisorStatisticsTable', () => {
             totals: {
               buildSegments: {
                 processed: 7516,
+                processedBytes: 60,
                 processedWithError: 0,
                 thrownAway: 0,
                 unparseable: 0,