Web console: better tooltip when no size is available (#17008)

* better tooltip when no size is available * better labels for columns * fix label in segments view
2024-09-05 13:51:03 -07:00 · 2024-09-05 13:51:03 -07:00 · dc5c55a836
parent ba6f804f48
commit dc5c55a836
6 changed files with 66 additions and 47 deletions
--- a/web-console/src/views/datasources-view/snapshots/datasources-view.spec.tsx.snap
+++ b/web-console/src/views/datasources-view/snapshots/datasources-view.spec.tsx.snap
@ -67,17 +67,35 @@ exports[`DatasourcesView matches snapshot 1`] = `
          "Availability",
          "Historical load/drop queues",
          "Total data size",
-          "Running tasks",
+          {
+            "label": "sys.tasks",
+            "text": "Running tasks",
+          },
          "Segment rows",
          "Segment size",
-          "Segment granularity",
+          {
+            "label": "𝑓(sys.segments)",
+            "text": "Segment granularity",
+          },
          "Total rows",
          "Avg. row size",
          "Replicated size",
-          "Compaction",
-          "% Compacted",
-          "Left to be compacted",
-          "Retention",
+          {
+            "label": "compaction API",
+            "text": "Compaction",
+          },
+          {
+            "label": "compaction API",
+            "text": "% Compacted",
+          },
+          {
+            "label": "compaction API",
+            "text": "Left to be compacted",
+          },
+          {
+            "label": "rules API",
+            "text": "Retention",
+          },
        ]
      }
      onChange={[Function]}
--- a/web-console/src/views/datasources-view/datasources-view.tsx
+++ b/web-console/src/views/datasources-view/datasources-view.tsx
@ -26,6 +26,7 @@ import type { Filter } from 'react-table';
 import ReactTable from 'react-table';

 import {
+  type TableColumnSelectorColumn,
  ACTION_COLUMN_ID,
  ACTION_COLUMN_LABEL,
  ACTION_COLUMN_WIDTH,
@ -86,44 +87,44 @@ import { RuleUtil } from '../../utils/load-rule';

 import './datasources-view.scss';

-const tableColumns: Record<CapabilitiesMode, string[]> = {
+const TABLE_COLUMNS_BY_MODE: Record<CapabilitiesMode, TableColumnSelectorColumn[]> = {
  'full': [
    'Datasource name',
    'Availability',
    'Historical load/drop queues',
    'Total data size',
-    'Running tasks',
+    { text: 'Running tasks', label: 'sys.tasks' },
    'Segment rows',
    'Segment size',
-    'Segment granularity',
+    { text: 'Segment granularity', label: '𝑓(sys.segments)' },
    'Total rows',
    'Avg. row size',
    'Replicated size',
-    'Compaction',
-    '% Compacted',
-    'Left to be compacted',
-    'Retention',
+    { text: 'Compaction', label: 'compaction API' },
+    { text: '% Compacted', label: 'compaction API' },
+    { text: 'Left to be compacted', label: 'compaction API' },
+    { text: 'Retention', label: 'rules API' },
  ],
  'no-sql': [
    'Datasource name',
    'Availability',
    'Historical load/drop queues',
    'Total data size',
-    'Running tasks',
-    'Compaction',
-    '% Compacted',
-    'Left to be compacted',
-    'Retention',
+    { text: 'Running tasks', label: 'tasks API' },
+    { text: 'Compaction', label: 'compaction API' },
+    { text: '% Compacted', label: 'compaction API' },
+    { text: 'Left to be compacted', label: 'compaction API' },
+    { text: 'Retention', label: 'rules API' },
  ],
  'no-proxy': [
    'Datasource name',
    'Availability',
    'Historical load/drop queues',
    'Total data size',
-    'Running tasks',
+    { text: 'Running tasks', label: 'sys.tasks' },
    'Segment rows',
    'Segment size',
-    'Segment granularity',
+    { text: 'Segment granularity', label: '𝑓(sys.segments)' },
    'Total rows',
    'Avg. row size',
    'Replicated size',
@ -517,21 +518,18 @@ GROUP BY 1, 2`;
          if (capabilities.hasOverlordAccess()) {
            auxiliaryQueries.push(async (datasourcesAndDefaultRules, cancelToken) => {
              try {
-                const runningTasks = await queryDruidSql<RunningTaskRow>(
-                  {
-                    query: DatasourcesView.RUNNING_TASK_SQL,
-                  },
-                  cancelToken,
-                );
+                const taskList = (
+                  await Api.instance.get(`/druid/indexer/v1/tasks?state=running`, { cancelToken })
+                ).data;

                const runningTasksByDatasource = groupByAsMap(
-                  runningTasks,
-                  x => x.datasource,
+                  taskList,
+                  (t: any) => t.dataSource,
                  xs =>
                    groupByAsMap(
                      xs,
                      x => normalizeTaskType(x.type),
-                      ys => sum(ys, y => y.num_running_tasks),
+                      ys => ys.length,
                    ),
                );

@ -1703,7 +1701,7 @@ GROUP BY 1, 2`;
            disabled={!capabilities.hasSqlOrCoordinatorAccess()}
          />
          <TableColumnSelector
-            columns={tableColumns[capabilities.getMode()]}
+            columns={TABLE_COLUMNS_BY_MODE[capabilities.getMode()]}
            onChange={column =>
              this.setState(prevState => ({
                visibleColumns: prevState.visibleColumns.toggle(column),
--- a/web-console/src/views/segments-view/snapshots/segments-view.spec.tsx.snap
+++ b/web-console/src/views/segments-view/snapshots/segments-view.spec.tsx.snap
@ -55,7 +55,10 @@ exports[`SegmentsView matches snapshot 1`] = `
            "Start",
            "End",
            "Version",
-            "Time span",
+            {
+              "label": "𝑓(sys.segments)",
+              "text": "Time span",
+            },
            "Shard type",
            "Shard spec",
            "Partition",
--- a/web-console/src/views/segments-view/segments-view.tsx
+++ b/web-console/src/views/segments-view/segments-view.tsx
@ -26,6 +26,7 @@ import type { Filter } from 'react-table';
 import ReactTable from 'react-table';

 import {
+  type TableColumnSelectorColumn,
  ACTION_COLUMN_ID,
  ACTION_COLUMN_LABEL,
  ACTION_COLUMN_WIDTH,
@ -76,14 +77,14 @@ import type { BasicAction } from '../../utils/basic-action';

 import './segments-view.scss';

-const tableColumns: Record<CapabilitiesMode, string[]> = {
+const TABLE_COLUMNS_BY_MODE: Record<CapabilitiesMode, TableColumnSelectorColumn[]> = {
  'full': [
    'Segment ID',
    'Datasource',
    'Start',
    'End',
    'Version',
-    'Time span',
+    { text: 'Time span', label: '𝑓(sys.segments)' },
    'Shard type',
    'Shard spec',
    'Partition',
@ -105,6 +106,7 @@ const tableColumns: Record<CapabilitiesMode, string[]> = {
    'Start',
    'End',
    'Version',
+    { text: 'Time span', label: '𝑓(sys.segments)' },
    'Shard type',
    'Shard spec',
    'Partition',
@ -260,7 +262,7 @@ END AS "time_span"`,
        if (capabilities.hasSql()) {
          const whereParts = filterMap(filtered, (f: Filter) => {
            if (f.id === 'shard_type') {
-              // Special handling for shard_type that needs to be search in the shard_spec
+              // Special handling for shard_type that needs to be searched for in the shard_spec
              // Creates filters like `shard_spec LIKE '%"type":"numbered"%'`
              const modeAndNeedle = parseFilterModeAndNeedle(f);
              if (!modeAndNeedle) return;
@ -1008,7 +1010,7 @@ END AS "time_span"`,
              disabled={!capabilities.hasSqlOrCoordinatorAccess()}
            />
            <TableColumnSelector
-              columns={tableColumns[capabilities.getMode()]}
+              columns={TABLE_COLUMNS_BY_MODE[capabilities.getMode()]}
              onChange={column =>
                this.setState(prevState => ({
                  visibleColumns: prevState.visibleColumns.toggle(column),
--- a/web-console/src/views/services-view/services-view.tsx
+++ b/web-console/src/views/services-view/services-view.tsx
@ -24,6 +24,7 @@ import type { Filter } from 'react-table';
 import ReactTable from 'react-table';

 import {
+  type TableColumnSelectorColumn,
  ACTION_COLUMN_ID,
  ACTION_COLUMN_LABEL,
  ACTION_COLUMN_WIDTH,
@ -59,7 +60,7 @@ import type { BasicAction } from '../../utils/basic-action';

 import './services-view.scss';

-const tableColumns: Record<CapabilitiesMode, string[]> = {
+const TABLE_COLUMNS_BY_MODE: Record<CapabilitiesMode, TableColumnSelectorColumn[]> = {
  'full': [
    'Service',
    'Type',
@ -804,7 +805,7 @@ ORDER BY
          />
          {this.renderBulkServicesActions()}
          <TableColumnSelector
-            columns={tableColumns[capabilities.getMode()]}
+            columns={TABLE_COLUMNS_BY_MODE[capabilities.getMode()]}
            onChange={column =>
              this.setState(prevState => ({
                visibleColumns: prevState.visibleColumns.toggle(column),
--- a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
+++ b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
@ -61,6 +61,7 @@ import './execution-stages-pane.scss';
 const MAX_STAGE_ROWS = 20;
 const MAX_DETAIL_ROWS = 20;
 const NOT_SIZE_ON_DISK = '(does not represent size on disk)';
+const NO_SIZE_INFO = 'no size info';

 function summarizeTableInput(tableStageInput: StageInput): string {
  if (tableStageInput.type !== 'table') return '';
@ -271,7 +272,7 @@ export const ExecutionStagesPane = React.memo(function ExecutionStagesPane(
                      title={
                        c.bytes
                          ? `Uncompressed size: ${formatBytesCompact(c.bytes)} ${NOT_SIZE_ON_DISK}`
-                          : undefined
+                          : NO_SIZE_INFO
                      }
                    />
                    {Boolean(c.totalFiles) && (
@ -378,7 +379,7 @@ export const ExecutionStagesPane = React.memo(function ExecutionStagesPane(
                    title={
                      c.bytes
                        ? `Uncompressed size: ${formatBytesCompact(c.bytes)} ${NOT_SIZE_ON_DISK}`
-                        : undefined
+                        : NO_SIZE_INFO
                    }
                  />
                );
@ -395,19 +396,15 @@ export const ExecutionStagesPane = React.memo(function ExecutionStagesPane(
    const hasCounter = stages.hasCounterForStage(stage, inputCounter);
    const bytes = stages.getTotalCounterForStage(stage, inputCounter, 'bytes');
    const inputFileCount = stages.getTotalCounterForStage(stage, inputCounter, 'totalFiles');
+    const inputLabel = `${formatInputLabel(stage, inputNumber)} (input${inputNumber})`;
    return (
      <div
        className="data-transfer"
        key={inputNumber}
        title={
          bytes
-            ? `${formatInputLabel(
-                stage,
-                inputNumber,
-              )} (input${inputNumber}) uncompressed size: ${formatBytesCompact(
-                bytes,
-              )} ${NOT_SIZE_ON_DISK}`
-            : undefined
+            ? `${inputLabel} uncompressed size: ${formatBytesCompact(bytes)} ${NOT_SIZE_ON_DISK}`
+            : `${inputLabel}: ${NO_SIZE_INFO}`
        }
      >
        <BracedText
@ -510,7 +507,7 @@ ${title} uncompressed size: ${formatBytesCompact(
    if (!stages.hasCounterForStage(stage, 'segmentGenerationProgress')) return;

    return (
-      <div className="data-transfer">
+      <div className="data-transfer" title={NO_SIZE_INFO}>
        <BracedText
          text={formatRows(stages.getTotalSegmentGenerationProgressForStage(stage, field))}
          braces={rowsValues}