Web console: split the Ingestion view into two views: Supervisors and…

… Tasks (#14395)

* init split

* don't crash if unable to get running tasks

* update snapshots

* push down state into call

* googies

* simplify

* update e2e tests

* feedback fixes

* update e2e tests

* better icons

* fix test

* adjust colors

web-console/e2e-tests/component/datasources/overview.ts

@@ -33,6 +33,7 @@ enum DatasourceColumn {
   AVAILABILITY,
   SEGMENT_LOAD_DROP,
   TOTAL_DATA_SIZE,
+  RUNNING_TASKS,
   SEGMENT_ROWS,
   // SEGMENT_SIZE, (Hidden by default)
   // SEGMENT_GRANULARITY, (Hidden by default)

web-console/e2e-tests/component/ingestion/overview.ts

@@ -37,22 +37,22 @@ enum TaskColumn {
 }
 
 /**
- * Represents ingestion overview tab.
+ * Represents task tab.
  */
-export class IngestionOverview {
+export class TasksOverview {
   private readonly page: playwright.Page;
   private readonly baseUrl: string;
 
   constructor(page: playwright.Page, unifiedConsoleUrl: string) {
     this.page = page;
-    this.baseUrl = unifiedConsoleUrl + '#ingestion';
+    this.baseUrl = unifiedConsoleUrl + '#tasks';
   }
 
   async getTasks(): Promise<IngestionTask[]> {
     await this.page.goto(this.baseUrl);
     await this.page.reload({ waitUntil: 'networkidle' });
 
-    const data = await extractTable(this.page, 'div.bottom-pane div.rt-tr-group', 'div.rt-td');
+    const data = await extractTable(this.page, 'div.rt-tr-group', 'div.rt-td');
 
     return data.map(
       row =>

web-console/e2e-tests/reindexing.spec.ts

@@ -20,7 +20,7 @@ import path from 'path';
 import type * as playwright from 'playwright-chromium';
 
 import { DatasourcesOverview } from './component/datasources/overview';
-import { IngestionOverview } from './component/ingestion/overview';
+import { TasksOverview } from './component/ingestion/overview';
 import { ConfigureSchemaConfig } from './component/load-data/config/configure-schema';
 import {
   PartitionConfig,
@@ -155,10 +155,10 @@ function validateConnectLocalData(preview: string) {
 }
 
 async function validateTaskStatus(page: playwright.Page, datasourceName: string) {
-  const ingestionOverview = new IngestionOverview(page, UNIFIED_CONSOLE_URL);
+  const tasksOverview = new TasksOverview(page, UNIFIED_CONSOLE_URL);
 
   await retryIfJestAssertionError(async () => {
-    const tasks = await ingestionOverview.getTasks();
+    const tasks = await tasksOverview.getTasks();
     const task = tasks.find(t => t.datasource === datasourceName);
     expect(task).toBeDefined();
     expect(task!.status).toMatch('SUCCESS');

web-console/e2e-tests/tutorial-batch.spec.ts

@@ -20,7 +20,7 @@ import { T } from 'druid-query-toolkit';
 import type * as playwright from 'playwright-chromium';
 
 import { DatasourcesOverview } from './component/datasources/overview';
-import { IngestionOverview } from './component/ingestion/overview';
+import { TasksOverview } from './component/ingestion/overview';
 import { ConfigureSchemaConfig } from './component/load-data/config/configure-schema';
 import { ConfigureTimestampConfig } from './component/load-data/config/configure-timestamp';
 import { PartitionConfig, SegmentGranularity } from './component/load-data/config/partition';
@@ -143,10 +143,10 @@ function validateConnectLocalData(preview: string) {
 }
 
 async function validateTaskStatus(page: playwright.Page, datasourceName: string) {
-  const ingestionOverview = new IngestionOverview(page, UNIFIED_CONSOLE_URL);
+  const tasksOverview = new TasksOverview(page, UNIFIED_CONSOLE_URL);
 
   await retryIfJestAssertionError(async () => {
-    const tasks = await ingestionOverview.getTasks();
+    const tasks = await tasksOverview.getTasks();
     const task = tasks.find(t => t.datasource === datasourceName);
     expect(task).toBeDefined();
     expect(task!.status).toMatch('SUCCESS');

web-console/src/components/cell-filter-menu/cell-filter-menu.tsx

@@ -148,7 +148,6 @@ export function CellFilterMenu(props: CellFilterMenuProps) {
 
     const updatedClause =
       currentClauses.length === 1 && val ? addToClause(currentClauses[0], val) : undefined;
-    console.log(updatedClause, currentClauses);
 
     const jsonColumn = column.nativeType === 'COMPLEX<json>';
     return (

web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap

@@ -110,10 +110,19 @@ exports[`HeaderBar matches snapshot 1`] = `
       active={false}
       className="header-entry"
       disabled={false}
-      href="#ingestion"
+      href="#supervisors"
+      icon="eye-open"
+      minimal={true}
+      text="Supervisors"
+    />
+    <Blueprint4.AnchorButton
+      active={false}
+      className="header-entry"
+      disabled={false}
+      href="#tasks"
       icon="gantt-chart"
       minimal={true}
-      text="Ingestion"
+      text="Tasks"
     />
     <Blueprint4.AnchorButton
       active={false}

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

@@ -61,7 +61,8 @@ export type HeaderActiveTab =
   | 'data-loader'
   | 'streaming-data-loader'
   | 'classic-batch-data-loader'
-  | 'ingestion'
+  | 'supervisors'
+  | 'tasks'
   | 'datasources'
   | 'segments'
   | 'services'
@@ -432,10 +433,19 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         <AnchorButton
           className="header-entry"
           minimal
-          active={active === 'ingestion'}
+          active={active === 'supervisors'}
+          icon={IconNames.EYE_OPEN}
+          text="Supervisors"
+          href="#supervisors"
+          disabled={!capabilities.hasSqlOrOverlordAccess()}
+        />
+        <AnchorButton
+          className="header-entry"
+          minimal
+          active={active === 'tasks'}
           icon={IconNames.GANTT_CHART}
-          text="Ingestion"
-          href="#ingestion"
+          text="Tasks"
+          href="#tasks"
           disabled={!capabilities.hasSqlOrOverlordAccess()}
         />
         <AnchorButton