This is an automated email from the ASF dual-hosted git repository.
cwylie pushed a commit to branch 31.0.1
in repository https://gitbox.apache.org/repos/asf/druid.git
The following commit(s) were added to refs/heads/31.0.1 by this push:
new b1802c4ff3a Web console: fix progress indication for table input
(#17334) (#17505)
b1802c4ff3a is described below
commit b1802c4ff3ad4f364e8e76c994147ab25fab8940
Author: Clint Wylie <[email protected]>
AuthorDate: Fri Nov 22 11:50:38 2024 -0800
Web console: fix progress indication for table input (#17334) (#17505)
* fix porgress indication for table input
* fix snapshot
Co-authored-by: Vadim Ogievetsky <[email protected]>
---
web-console/src/druid-models/stages/stages.spec.ts | 3 +-
web-console/src/druid-models/stages/stages.ts | 10 +++---
web-console/src/react-table/react-table-extra.scss | 5 +++
.../current-dart-panel/current-dart-panel.tsx | 2 +-
.../execution-stages-pane.spec.tsx.snap | 4 +--
.../execution-stages-pane.scss | 7 +++++
.../execution-stages-pane.tsx | 36 ++++++++++++++++------
.../recent-query-task-panel.tsx | 4 ++-
8 files changed, 51 insertions(+), 20 deletions(-)
diff --git a/web-console/src/druid-models/stages/stages.spec.ts
b/web-console/src/druid-models/stages/stages.spec.ts
index 2c0a6f5ec18..0cc49486ba6 100644
--- a/web-console/src/druid-models/stages/stages.spec.ts
+++ b/web-console/src/druid-models/stages/stages.spec.ts
@@ -32,7 +32,7 @@ describe('aggregateSortProgressCounters', () => {
},
{
type: 'sortProgress',
- totalMergingLevels: 4,
+ totalMergingLevels: -1,
levelToTotalBatches: { 0: 2, 1: 4, 2: 6, 3: 5 },
levelToMergedBatches: { 0: 2, 1: 4, 2: 6, 3: 5 },
totalMergersForUltimateLevel: 1,
@@ -41,7 +41,6 @@ describe('aggregateSortProgressCounters', () => {
).toEqual({
totalMergingLevels: {
'2': 1,
- '4': 1,
},
levelToBatches: {
'0': {
diff --git a/web-console/src/druid-models/stages/stages.ts
b/web-console/src/druid-models/stages/stages.ts
index ddddeab5d2f..5f89149dd37 100644
--- a/web-console/src/druid-models/stages/stages.ts
+++ b/web-console/src/druid-models/stages/stages.ts
@@ -200,7 +200,10 @@ export function aggregateSortProgressCounters(
sortProgressCounters: SortProgressCounter[],
): AggregatedSortProgress {
return {
- totalMergingLevels: countBy(sortProgressCounters, c =>
c.totalMergingLevels),
+ totalMergingLevels: countBy(
+ sortProgressCounters.filter(c => c.totalMergingLevels >= 0),
+ c => c.totalMergingLevels,
+ ),
levelToBatches: groupByAsMap(
sortProgressCounters.flatMap(c =>
Object.entries(c.levelToMergedBatches).map(([level, merged]) => [
@@ -430,9 +433,8 @@ export class Stages {
if (inputFileCount) {
// If we know how many files there are base the progress on how many
files were read
return (
- sum(input, (input, i) =>
- input.type === 'external' ? this.getTotalCounterForStage(stage,
`input${i}`, 'files') : 0,
- ) / inputFileCount
+ sum(input, (_, i) => this.getTotalCounterForStage(stage, `input${i}`,
'files')) /
+ inputFileCount
);
} else {
// Otherwise, base it on the stage input divided by the output of all
non-broadcast input stages,
diff --git a/web-console/src/react-table/react-table-extra.scss
b/web-console/src/react-table/react-table-extra.scss
index e1c65d5143f..534b417298f 100644
--- a/web-console/src/react-table/react-table-extra.scss
+++ b/web-console/src/react-table/react-table-extra.scss
@@ -31,6 +31,11 @@
padding: 0;
}
}
+
+ .rt-th.wrapped,
+ .rt-td.wrapped {
+ white-space: normal;
+ }
}
&.padded-header .rt-thead .rt-th {
diff --git
a/web-console/src/views/workbench-view/current-dart-panel/current-dart-panel.tsx
b/web-console/src/views/workbench-view/current-dart-panel/current-dart-panel.tsx
index aae00206942..5b4ac4f316f 100644
---
a/web-console/src/views/workbench-view/current-dart-panel/current-dart-panel.tsx
+++
b/web-console/src/views/workbench-view/current-dart-panel/current-dart-panel.tsx
@@ -134,7 +134,7 @@ export const CurrentDartPanel = React.memo(function
CurrentViberPanel(
const anonymous = w.identity === 'allowAll' && w.authenticator ===
'allowAll';
return (
<Popover className="work-entry" key={w.sqlQueryId}
position="left" content={menu}>
- <div>
+ <div onDoubleClick={() => setShowSql(w.sql)}>
<div className="line1">
<Icon
className={'status-icon ' + w.state.toLowerCase()}
diff --git
a/web-console/src/views/workbench-view/execution-stages-pane/__snapshots__/execution-stages-pane.spec.tsx.snap
b/web-console/src/views/workbench-view/execution-stages-pane/__snapshots__/execution-stages-pane.spec.tsx.snap
index 4f9706930e7..331e8235998 100644
---
a/web-console/src/views/workbench-view/execution-stages-pane/__snapshots__/execution-stages-pane.spec.tsx.snap
+++
b/web-console/src/views/workbench-view/execution-stages-pane/__snapshots__/execution-stages-pane.spec.tsx.snap
@@ -80,7 +80,7 @@ exports[`ExecutionStagesPane matches snapshot 1`] = `
"accessor": "stageNumber",
"className": "padded",
"id": "stage",
- "width": 140,
+ "width": 160,
},
{
"Cell": [Function],
@@ -102,7 +102,7 @@ exports[`ExecutionStagesPane matches snapshot 1`] = `
"accessor": [Function],
"className": "padded",
"id": "rows_processed",
- "width": 160,
+ "width": 200,
},
{
"Cell": [Function],
diff --git
a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.scss
b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.scss
index b3e8d4c11e9..c0a0553fdad 100644
---
a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.scss
+++
b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.scss
@@ -125,6 +125,13 @@
vertical-align: top;
background: $dark-gray3;
}
+
+ .detail-counters-for-sort {
+ .count {
+ font-style: italic;
+ opacity: 0.8;
+ }
+ }
}
.cpu-label {
diff --git
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
index 322b9a8544b..682287c0c90 100644
---
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
@@ -245,7 +245,7 @@ export const ExecutionStagesPane = React.memo(function
ExecutionStagesPane(
Header: 'Worker',
id: 'worker',
accessor: d => d.index,
- width: 100,
+ width: 95,
Cell({ value }) {
const taskId = `${execution.id}-worker${value}_0`;
return (
@@ -270,7 +270,8 @@ export const ExecutionStagesPane = React.memo(function
ExecutionStagesPane(
id: 'cpu',
accessor: d => d.cpu?.main?.cpu || 0,
className: 'padded',
- width: 220,
+ width: 240,
+ show: stages.hasCounterForStage(stage, 'cpu'),
Cell({ original }) {
const cpuTotals = original.cpu || {};
return (
@@ -310,7 +311,7 @@ export const ExecutionStagesPane = React.memo(function
ExecutionStagesPane(
id: counterName,
accessor: d => d[counterName]!.rows,
className: 'padded',
- width: 160,
+ width: 200,
Cell({ value, original }) {
const c = (original as SimpleWideCounter)[counterName]!;
return (
@@ -397,12 +398,27 @@ export const ExecutionStagesPane = React.memo(function
ExecutionStagesPane(
{
Header: `Counts`,
accessor: 'counts',
- className: 'padded',
- width: 180,
+ className: 'padded wrapped',
+ width: 300,
Cell({ value }) {
- return Object.entries(value)
- .map(([n, v]) => (Number(v) > 1 ? `${n} (${v})` : n))
- .join(', ');
+ const entries = Object.entries(value);
+ if (!entries.length) return '-';
+ return (
+ <>
+ {entries.map(([n, v], i) => (
+ <>
+ <span
+ key={n}
+ data-tooltip={`${pluralIfNeeded(Number(v), 'worker')}
reporting: ${n}`}
+ >
+ {n}
+ {Number(v) > 1 && <span className="count">{`
(${v})`}</span>}
+ </span>
+ {i < entries.length - 1 && <span key={`${n}_sep`}>,
</span>}
+ </>
+ ))}
+ </>
+ );
},
},
]}
@@ -686,7 +702,7 @@ ${title} uncompressed size: ${formatBytesCompact(
id: 'stage',
accessor: 'stageNumber',
className: 'padded',
- width: 140,
+ width: 160,
Cell(props) {
const stage = props.original as StageDefinition;
const myError = error && error.stageNumber === stage.stageNumber;
@@ -770,7 +786,7 @@ ${title} uncompressed size: ${formatBytesCompact(
id: 'rows_processed',
accessor: () => null,
className: 'padded',
- width: 160,
+ width: 200,
Cell({ original }) {
const stage = original as StageDefinition;
const { input, broadcast } = stage.definition;
diff --git
a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
index 1a08fff9aaf..4cbc7cc91b5 100644
---
a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
+++
b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
@@ -217,7 +217,9 @@ LIMIT 100`,
return (
<Popover className="work-entry" key={w.taskId} position="left"
content={menu}>
<div
- data-tooltip={w.errorMessage}
+ data-tooltip={
+ `ID: ${w.taskId}` + (w.errorMessage ?
`\n\nError:\n${w.errorMessage}` : '')
+ }
onDoubleClick={() => onExecutionDetails(w.taskId)}
>
<div className="line1">
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
