Skip to content

fix: Live plan not showing and output data size is undefined #26264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 9, 2025
Merged

fix: Live plan not showing and output data size is undefined #26264

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6fcd813
Fix live plan not showing
unidevel Sep 14, 2025
b8e50b0
fix output and input data size
unidevel Sep 16, 2025
bcfb3d0
fix(ci): Clear more space for Maven checks (#26216)
tdcmeehan Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 8 additions & 9 deletions presto-ui/src/components/LivePlan.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import ReactDOMServer from "react-dom/server";
import * as dagreD3 from "dagre-d3-es";
import * as d3 from "d3";

import {formatRows, getStageStateColor, truncateString} from "../utils";
import {formatRows, getStageStateColor, truncateString, formatDataSizeBytes} from "../utils";
import {initializeGraph, initializeSvg} from "../d3utils";
import {QueryHeader} from "./QueryHeader";

Expand Down Expand Up @@ -98,18 +98,18 @@ export class StageStatistics extends React.Component<StageStatisticsProps, Stage
{stage.state}
<hr/>
CPU: {stats.totalCpuTime}<br />
Buffered: {stats.bufferedDataSize}<br />
Buffered: {formatDataSizeBytes(stats.bufferedDataSizeInBytes)}<br />
{stats.fullyBlocked ?
<div style={{color: '#ff0000'}}>Blocked: {stats.totalBlockedTime} </div> :
<div>Blocked: {stats.totalBlockedTime} </div>
}
Memory: {stats.userMemoryReservation}
Memory: {formatDataSizeBytes(stats.userMemoryReservationInBytes)}
<br/>
Splits: {"Q:" + stats.queuedDrivers + ", R:" + stats.runningDrivers + ", F:" + stats.completedDrivers}
<br/>
Lifespans: {stats.completedLifespans + " / " + stats.totalLifespans}
<hr/>
Input: {stats.rawInputDataSize + " / " + formatRows(stats.rawInputPositions)}
Input: {formatDataSizeBytes(stats.rawInputDataSizeInBytes) + " / " + formatRows(stats.rawInputPositions)}
</div>
</div>
);
Expand Down Expand Up @@ -160,6 +160,7 @@ type LivePlanState = {
render: any,
}


export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
timeoutId: TimeoutID;

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

componentDidUpdate(prevProps: LivePlanProps, prevState: LivePlanState) {
if (this.state.query !== prevState.query) {
this.updateD3Graph();
}
this.updateD3Graph();
//$FlowFixMe
$('[data-bs-toggle="tooltip"]')?.tooltip?.()
}
Expand Down Expand Up @@ -361,4 +360,4 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
}
}

export default LivePlan;
export default LivePlan;
4 changes: 2 additions & 2 deletions presto-ui/src/components/QueryHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,10 @@ export class QueryHeader extends React.Component {
<div className="col-6 d-flex justify-content-end">
<nav className="nav nav-tabs">
{tabs.map((page, _) => (
<>
<React.Fragment key={page.path}>
<a className={clsx('nav-link', 'navbar-btn', this.isActive(page.path) && 'active')} href={page.path + '?' + queryId} >{page.label}</a>
&nbsp;
</>
</React.Fragment>
))}
<a className="nav-link navbar-btn" href={"/v1/query/" + query.queryId + "?pretty"} target="_blank">JSON</a>
</nav>
Expand Down
6 changes: 3 additions & 3 deletions presto-ui/src/components/QueryPlanView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { StageStatistics, PlanNode } from './LivePlan';
import ReactDOMServer from "react-dom/server";
import * as dagreD3 from "dagre-d3-es";
import * as d3 from "d3";
import { formatRows, getStageStateColor } from "../utils";
import { formatDataSizeBytes, formatRows, getStageStateColor } from "../utils";
import { initializeGraph } from "../d3utils";

export default function PlanView({show, data}) {
Expand Down Expand Up @@ -64,7 +64,7 @@ export default function PlanView({show, data}) {
class: "plan-edge",
style: "stroke-width: 4px",
arrowheadClass: "plan-arrowhead",
label: sourceStats.outputDataSize + " / " + formatRows(sourceStats.outputPositions),
label: formatDataSizeBytes(sourceStats.outputDataSizeInBytes) + " / " + formatRows(sourceStats.outputPositions),
labelStyle: "color: #fff; font-weight: bold; font-size: 24px;",
labelType: "html",
});
Expand Down Expand Up @@ -131,4 +131,4 @@ export default function PlanView({show, data}) {
</div>
</div>
);
}
}
23 changes: 11 additions & 12 deletions presto-ui/src/components/QueryStageView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {
formatDataSize,
formatDuration,
getTaskNumber,
parseDataSize,
parseDuration
} from "../utils";
import { initializeGraph } from '../d3utils';
Expand All @@ -43,7 +42,7 @@ function OperatorSummary({ operator }) {
parseDuration(operator.finishWall) +
parseDuration(operator.blockedWall);
const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / (totalWallTime / 1000.0);
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);

return (
<div className="header-data">
Expand All @@ -62,7 +61,7 @@ function OperatorSummary({ operator }) {
Output
</td>
<td>
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
{formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
</td>
</tr>
<tr>
Expand Down Expand Up @@ -94,7 +93,7 @@ function OperatorSummary({ operator }) {
Input
</td>
<td>
{formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
{formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -160,8 +159,8 @@ function OperatorDetail({ index, operator, tasks }) {
},
{
name: "Input Data Size",
id: "inputDataSize",
supplier: operator => parseDataSize(operator.inputDataSize),
id: "inputDataSizeInBytes",
supplier: operator => operator.inputDataSizeInBytes,
renderer: formatDataSize
},
{
Expand All @@ -172,8 +171,8 @@ function OperatorDetail({ index, operator, tasks }) {
},
{
name: "Output Data Size",
id: "outputDataSize",
supplier: operator => parseDataSize(operator.outputDataSize),
id: "outputDataSizeInBytes",
supplier: operator => operator.outputDataSizeInBytes,
renderer: formatDataSize
},
];
Expand Down Expand Up @@ -204,10 +203,10 @@ function OperatorDetail({ index, operator, tasks }) {
const totalWallTime = getTotalWallTime(operator);

const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / totalWallTime;
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);

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

return (
<div className="col-12 container mx-2">
Expand All @@ -230,7 +229,7 @@ function OperatorDetail({ index, operator, tasks }) {
Input
</td>
<td>
{formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
{formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
</td>
</tr>
<tr>
Expand All @@ -246,7 +245,7 @@ function OperatorDetail({ index, operator, tasks }) {
Output
</td>
<td>
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
{formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
</td>
</tr>
<tr>
Expand Down
25 changes: 12 additions & 13 deletions presto-ui/src/components/StageDetail.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import {
getFirstParameter,
getTaskNumber,
isQueryEnded,
parseDataSize,
parseDuration
} from "../utils";
import { initializeGraph, initializeSvg } from "../d3utils";
Expand All @@ -45,7 +44,7 @@ class OperatorSummary extends React.Component {
const totalWallTime = parseDuration(operator.addInputWall) + parseDuration(operator.getOutputWall) + parseDuration(operator.finishWall) + parseDuration(operator.blockedWall);

const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / (totalWallTime / 1000.0);
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);

return (
<div className="header-data">
Expand All @@ -64,7 +63,7 @@ class OperatorSummary extends React.Component {
Output
</td>
<td>
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
{formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
</td>
</tr>
<tr>
Expand Down Expand Up @@ -96,7 +95,7 @@ class OperatorSummary extends React.Component {
Input
</td>
<td>
{formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
{formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -162,8 +161,8 @@ function OperatorDetail({ index, operator, tasks }) {
},
{
name: "Input Data Size",
id: "inputDataSize",
supplier: operator => parseDataSize(operator.inputDataSize),
id: "inputDataSizeInBytes",
supplier: operator => operator.inputDataSizeInBytes,
renderer: formatDataSize
},
{
Expand All @@ -174,8 +173,8 @@ function OperatorDetail({ index, operator, tasks }) {
},
{
name: "Output Data Size",
id: "outputDataSize",
supplier: operator => parseDataSize(operator.outputDataSize),
id: "outputDataSizeInBytes",
supplier: operator => operator.outputDataSizeInBytes,
renderer: formatDataSize
},
];
Expand Down Expand Up @@ -206,10 +205,10 @@ function OperatorDetail({ index, operator, tasks }) {
const totalWallTime = getTotalWallTime(operator);

const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / totalWallTime;
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);

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

return (
<div className="col-12 container mx-2">
Expand All @@ -232,7 +231,7 @@ function OperatorDetail({ index, operator, tasks }) {
Input
</td>
<td>
{formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
{formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
</td>
</tr>
<tr>
Expand All @@ -248,7 +247,7 @@ function OperatorDetail({ index, operator, tasks }) {
Output
</td>
<td>
{formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
{formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
</td>
</tr>
<tr>
Expand Down Expand Up @@ -649,4 +648,4 @@ export class StageDetail extends React.Component {
}
}

export default StageDetail;
export default StageDetail;
Loading