Skip to content

Commit ad58d76

Browse files
unidevelunidevel
committed
Fix live plan not showing
1 parent 003cda6 commit ad58d76

File tree

7 files changed

+23
-24
lines changed

7 files changed

+23
-24
lines changed

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

Lines changed: 5 additions & 6 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, formatDataSize} from "../utils";
2222
import {initializeGraph, initializeSvg} from "../d3utils";
2323
import {QueryHeader} from "./QueryHeader";
2424

@@ -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: formatDataSize(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/QueryDetail.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1646,7 +1646,7 @@ export class QueryDetail extends React.Component {
16461646
Output Data
16471647
</td>
16481648
<td className="info-text">
1649-
{query.queryStats.outputDataSize}
1649+
{query.queryStats.outputDataSizeInBytes}
16501650
</td>
16511651
</tr>
16521652
<tr>

‎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/QueryOverview.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ type QueryStats = {
139139
shuffledDataSize: string;
140140
peakTotalMemoryReservation: string;
141141
outputPositions: number;
142-
outputDataSize: string;
142+
outputDataSizeInBytes: string;
143143
writtenOutputPositions: number;
144144
writtenOutputLogicalDataSize: string;
145145
writtenOutputPhysicalDataSize: string;
@@ -1610,7 +1610,7 @@ export default function QueryOverview({ data, show }: { data: QueryData, show: b
16101610
Output Data
16111611
</td>
16121612
<td className="info-text">
1613-
{data.queryStats.outputDataSize}
1613+
{data.queryStats.outputDataSizeInBytes}
16141614
</td>
16151615
</tr>
16161616
<tr>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -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: 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: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ function OperatorSummary({ operator }) {
6262
Output
6363
</td>
6464
<td>
65-
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
65+
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSizeInBytes + ")"}
6666
</td>
6767
</tr>
6868
<tr>
@@ -172,8 +172,8 @@ function OperatorDetail({ index, operator, tasks }) {
172172
},
173173
{
174174
name: "Output Data Size",
175-
id: "outputDataSize",
176-
supplier: operator => parseDataSize(operator.outputDataSize),
175+
id: "outputDataSizeInBytes",
176+
supplier: operator => parseDataSize(operator.outputDataSizeInBytes),
177177
renderer: formatDataSize
178178
},
179179
];
@@ -207,7 +207,7 @@ function OperatorDetail({ index, operator, tasks }) {
207207
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
208208

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

212212
return (
213213
<div className="col-12 container mx-2">
@@ -246,7 +246,7 @@ function OperatorDetail({ index, operator, tasks }) {
246246
Output
247247
</td>
248248
<td>
249-
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
249+
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSizeInBytes + ")"}
250250
</td>
251251
</tr>
252252
<tr>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ class OperatorSummary extends React.Component {
6464
Output
6565
</td>
6666
<td>
67-
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
67+
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSizeInBytes + ")"}
6868
</td>
6969
</tr>
7070
<tr>
@@ -174,8 +174,8 @@ function OperatorDetail({ index, operator, tasks }) {
174174
},
175175
{
176176
name: "Output Data Size",
177-
id: "outputDataSize",
178-
supplier: operator => parseDataSize(operator.outputDataSize),
177+
id: "outputDataSizeInBytes",
178+
supplier: operator => parseDataSize(operator.outputDataSizeInBytes),
179179
renderer: formatDataSize
180180
},
181181
];
@@ -209,7 +209,7 @@ function OperatorDetail({ index, operator, tasks }) {
209209
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
210210

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

214214
return (
215215
<div className="col-12 container mx-2">
@@ -248,7 +248,7 @@ function OperatorDetail({ index, operator, tasks }) {
248248
Output
249249
</td>
250250
<td>
251-
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
251+
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSizeInBytes + ")"}
252252
</td>
253253
</tr>
254254
<tr>
@@ -649,4 +649,4 @@ export class StageDetail extends React.Component {
649649
}
650650
}
651651

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

0 commit comments

Comments
 (0)