Skip to content

Commit 9f26e77

Browse files
unideveltdcmeehan
unidevel
and
tdcmeehan
authored
fix: Live plan not showing and output data size is undefined (#26264)
## Description 1. Fix live plan not showing <img width="2448" height="1730" alt="image" src="https://github.com/user-attachments/assets/25698228-0d62-4326-b0c7-41c1ed3af579" /> 2. Fix warnings in Query Header 3. Fix output data size is `undefined` - due to [this change](7458b52) , `outputDataSize` is changed to `outputDataSizeInBytes` ## Motivation and Context PR for master branch: #26033 ## Impact UI ## Test Plan Manual test ## Contributor checklist - [ ] Please make sure your submission complies with our [contributing guide](https://github.com/prestodb/presto/blob/master/CONTRIBUTING.md), in particular [code style](https://github.com/prestodb/presto/blob/master/CONTRIBUTING.md#code-style) and [commit standards](https://github.com/prestodb/presto/blob/master/CONTRIBUTING.md#commit-standards). - [ ] PR description addresses the issue accurately and concisely. If the change is non-trivial, a GitHub Issue is referenced. - [ ] Documented new properties (with its default value), SQL syntax, functions, or other functionality. - [ ] If release notes are required, they follow the [release notes guidelines](https://github.com/prestodb/presto/wiki/Release-Notes-Guidelines). - [ ] Adequate tests were added if applicable. - [ ] CI passed. ## Release Notes ``` == NO RELEASE NOTE == ``` --------- Co-authored-by: Timothy Meehan <tim@timdmeehan.com>
1 parent 54e1578 commit 9f26e77

File tree

6 files changed

+40
-43
lines changed

6 files changed

+40
-43
lines changed

‎.github/workflows/maven-checks.yml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ jobs:
2323
cancel-in-progress: true
2424
steps:
2525
- name: Free Disk Space
26-
run: |
27-
df -h
28-
sudo apt-get clean
29-
df -h
26+
uses: jlumbroso/free-disk-space@54081f138730dfa15788a46383842cd2f914a1be # v1.3.1
27+
with:
28+
tool-cache: true
29+
swap-storage: false
3030
- uses: actions/checkout@v4
3131
with:
3232
show-progress: false

‎presto-ui/src/components/LivePlan.jsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import ReactDOMServer from "react-dom/server";
1818
import * as dagreD3 from "dagre-d3-es";
1919
import * as d3 from "d3";
2020

21-
import {formatRows, getStageStateColor, truncateString} from "../utils";
21+
import {formatRows, getStageStateColor, truncateString, formatDataSizeBytes} from "../utils";
2222
import {initializeGraph, initializeSvg} from "../d3utils";
2323
import {QueryHeader} from "./QueryHeader";
2424

@@ -98,18 +98,18 @@ export class StageStatistics extends React.Component<StageStatisticsProps, Stage
9898
{stage.state}
9999
<hr/>
100100
CPU: {stats.totalCpuTime}<br />
101-
Buffered: {stats.bufferedDataSize}<br />
101+
Buffered: {formatDataSizeBytes(stats.bufferedDataSizeInBytes)}<br />
102102
{stats.fullyBlocked ?
103103
<div style={{color: '#ff0000'}}>Blocked: {stats.totalBlockedTime} </div> :
104104
<div>Blocked: {stats.totalBlockedTime} </div>
105105
}
106-
Memory: {stats.userMemoryReservation}
106+
Memory: {formatDataSizeBytes(stats.userMemoryReservationInBytes)}
107107
<br/>
108108
Splits: {"Q:" + stats.queuedDrivers + ", R:" + stats.runningDrivers + ", F:" + stats.completedDrivers}
109109
<br/>
110110
Lifespans: {stats.completedLifespans + " / " + stats.totalLifespans}
111111
<hr/>
112-
Input: {stats.rawInputDataSize + " / " + formatRows(stats.rawInputPositions)}
112+
Input: {formatDataSizeBytes(stats.rawInputDataSizeInBytes) + " / " + formatRows(stats.rawInputPositions)}
113113
</div>
114114
</div>
115115
);
@@ -160,6 +160,7 @@ type LivePlanState = {
160160
render: any,
161161
}
162162

163+
163164
export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
164165
timeoutId: TimeoutID;
165166

@@ -250,7 +251,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
250251
class: "plan-edge",
251252
style: "stroke-width: 4px",
252253
arrowheadClass: "plan-arrowhead",
253-
label: sourceStats.outputDataSize + " / " + formatRows(sourceStats.outputPositions),
254+
label: formatDataSizeBytes(sourceStats.outputDataSizeInBytes) + " / " + formatRows(sourceStats.outputPositions),
254255
labelStyle: "color: #fff; font-weight: bold; font-size: 24px;",
255256
labelType: "html",
256257
});
@@ -308,9 +309,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
308309
}
309310

310311
componentDidUpdate(prevProps: LivePlanProps, prevState: LivePlanState) {
311-
if (this.state.query !== prevState.query) {
312-
this.updateD3Graph();
313-
}
312+
this.updateD3Graph();
314313
//$FlowFixMe
315314
$('[data-bs-toggle="tooltip"]')?.tooltip?.()
316315
}
@@ -361,4 +360,4 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
361360
}
362361
}
363362

364-
export default LivePlan;
363+
export default LivePlan;

‎presto-ui/src/components/QueryHeader.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,10 @@ export class QueryHeader extends React.Component {
115115
<div className="col-6 d-flex justify-content-end">
116116
<nav className="nav nav-tabs">
117117
{tabs.map((page, _) => (
118-
<>
118+
<React.Fragment key={page.path}>
119119
<a className={clsx('nav-link', 'navbar-btn', this.isActive(page.path) && 'active')} href={page.path + '?' + queryId} >{page.label}</a>
120120
&nbsp;
121-
</>
121+
</React.Fragment>
122122
))}
123123
<a className="nav-link navbar-btn" href={"/v1/query/" + query.queryId + "?pretty"} target="_blank">JSON</a>
124124
</nav>

‎presto-ui/src/components/QueryPlanView.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { StageStatistics, PlanNode } from './LivePlan';
2020
import ReactDOMServer from "react-dom/server";
2121
import * as dagreD3 from "dagre-d3-es";
2222
import * as d3 from "d3";
23-
import { formatRows, getStageStateColor } from "../utils";
23+
import { formatDataSizeBytes, formatRows, getStageStateColor } from "../utils";
2424
import { initializeGraph } from "../d3utils";
2525

2626
export default function PlanView({show, data}) {
@@ -64,7 +64,7 @@ export default function PlanView({show, data}) {
6464
class: "plan-edge",
6565
style: "stroke-width: 4px",
6666
arrowheadClass: "plan-arrowhead",
67-
label: sourceStats.outputDataSize + " / " + formatRows(sourceStats.outputPositions),
67+
label: formatDataSizeBytes(sourceStats.outputDataSizeInBytes) + " / " + formatRows(sourceStats.outputPositions),
6868
labelStyle: "color: #fff; font-weight: bold; font-size: 24px;",
6969
labelType: "html",
7070
});
@@ -131,4 +131,4 @@ export default function PlanView({show, data}) {
131131
</div>
132132
</div>
133133
);
134-
}
134+
}

‎presto-ui/src/components/QueryStageView.jsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
formatDataSize,
2626
formatDuration,
2727
getTaskNumber,
28-
parseDataSize,
2928
parseDuration
3029
} from "../utils";
3130
import { initializeGraph } from '../d3utils';
@@ -43,7 +42,7 @@ function OperatorSummary({ operator }) {
4342
parseDuration(operator.finishWall) +
4443
parseDuration(operator.blockedWall);
4544
const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / (totalWallTime / 1000.0);
46-
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
45+
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);
4746

4847
return (
4948
<div className="header-data">
@@ -62,7 +61,7 @@ function OperatorSummary({ operator }) {
6261
Output
6362
</td>
6463
<td>
65-
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
64+
{formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
6665
</td>
6766
</tr>
6867
<tr>
@@ -94,7 +93,7 @@ function OperatorSummary({ operator }) {
9493
Input
9594
</td>
9695
<td>
97-
{formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
96+
{formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
9897
</td>
9998
</tr>
10099
</tbody>
@@ -160,8 +159,8 @@ function OperatorDetail({ index, operator, tasks }) {
160159
},
161160
{
162161
name: "Input Data Size",
163-
id: "inputDataSize",
164-
supplier: operator => parseDataSize(operator.inputDataSize),
162+
id: "inputDataSizeInBytes",
163+
supplier: operator => operator.inputDataSizeInBytes,
165164
renderer: formatDataSize
166165
},
167166
{
@@ -172,8 +171,8 @@ function OperatorDetail({ index, operator, tasks }) {
172171
},
173172
{
174173
name: "Output Data Size",
175-
id: "outputDataSize",
176-
supplier: operator => parseDataSize(operator.outputDataSize),
174+
id: "outputDataSizeInBytes",
175+
supplier: operator => operator.outputDataSizeInBytes,
177176
renderer: formatDataSize
178177
},
179178
];
@@ -204,10 +203,10 @@ function OperatorDetail({ index, operator, tasks }) {
204203
const totalWallTime = getTotalWallTime(operator);
205204

206205
const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / totalWallTime;
207-
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
206+
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);
208207

209208
const rowOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputPositions) / totalWallTime;
210-
const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.outputDataSize)) / (totalWallTime / 1000.0);
209+
const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputDataSizeInBytes) / (totalWallTime / 1000.0);
211210

212211
return (
213212
<div className="col-12 container mx-2">
@@ -230,7 +229,7 @@ function OperatorDetail({ index, operator, tasks }) {
230229
Input
231230
</td>
232231
<td>
233-
{formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
232+
{formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
234233
</td>
235234
</tr>
236235
<tr>
@@ -246,7 +245,7 @@ function OperatorDetail({ index, operator, tasks }) {
246245
Output
247246
</td>
248247
<td>
249-
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
248+
{formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
250249
</td>
251250
</tr>
252251
<tr>

‎presto-ui/src/components/StageDetail.jsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import {
2828
getFirstParameter,
2929
getTaskNumber,
3030
isQueryEnded,
31-
parseDataSize,
3231
parseDuration
3332
} from "../utils";
3433
import { initializeGraph, initializeSvg } from "../d3utils";
@@ -45,7 +44,7 @@ class OperatorSummary extends React.Component {
4544
const totalWallTime = parseDuration(operator.addInputWall) + parseDuration(operator.getOutputWall) + parseDuration(operator.finishWall) + parseDuration(operator.blockedWall);
4645

4746
const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / (totalWallTime / 1000.0);
48-
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
47+
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);
4948

5049
return (
5150
<div className="header-data">
@@ -64,7 +63,7 @@ class OperatorSummary extends React.Component {
6463
Output
6564
</td>
6665
<td>
67-
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
66+
{formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
6867
</td>
6968
</tr>
7069
<tr>
@@ -96,7 +95,7 @@ class OperatorSummary extends React.Component {
9695
Input
9796
</td>
9897
<td>
99-
{formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
98+
{formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
10099
</td>
101100
</tr>
102101
</tbody>
@@ -162,8 +161,8 @@ function OperatorDetail({ index, operator, tasks }) {
162161
},
163162
{
164163
name: "Input Data Size",
165-
id: "inputDataSize",
166-
supplier: operator => parseDataSize(operator.inputDataSize),
164+
id: "inputDataSizeInBytes",
165+
supplier: operator => operator.inputDataSizeInBytes,
167166
renderer: formatDataSize
168167
},
169168
{
@@ -174,8 +173,8 @@ function OperatorDetail({ index, operator, tasks }) {
174173
},
175174
{
176175
name: "Output Data Size",
177-
id: "outputDataSize",
178-
supplier: operator => parseDataSize(operator.outputDataSize),
176+
id: "outputDataSizeInBytes",
177+
supplier: operator => operator.outputDataSizeInBytes,
179178
renderer: formatDataSize
180179
},
181180
];
@@ -206,10 +205,10 @@ function OperatorDetail({ index, operator, tasks }) {
206205
const totalWallTime = getTotalWallTime(operator);
207206

208207
const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / totalWallTime;
209-
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
208+
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);
210209

211210
const rowOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputPositions) / totalWallTime;
212-
const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.outputDataSize)) / (totalWallTime / 1000.0);
211+
const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputDataSizeInBytes) / (totalWallTime / 1000.0);
213212

214213
return (
215214
<div className="col-12 container mx-2">
@@ -232,7 +231,7 @@ function OperatorDetail({ index, operator, tasks }) {
232231
Input
233232
</td>
234233
<td>
235-
{formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
234+
{formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
236235
</td>
237236
</tr>
238237
<tr>
@@ -248,7 +247,7 @@ function OperatorDetail({ index, operator, tasks }) {
248247
Output
249248
</td>
250249
<td>
251-
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
250+
{formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
252251
</td>
253252
</tr>
254253
<tr>
@@ -649,4 +648,4 @@ export class StageDetail extends React.Component {
649648
}
650649
}
651650

652-
export default StageDetail;
651+
export default StageDetail;

0 commit comments

Comments
 (0)