Skip to content

reduce rerenders from run times #842

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
timja merged 6 commits into from
Jun 17, 2025
Merged

reduce rerenders from run times #842

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d209abd
initial integration with live timings
lewisbirks Jun 11, 2025
e2ea590
add more usages
lewisbirks Jun 13, 2025
67a7866
add an explanation
lewisbirks Jun 16, 2025
a1fc774
account for more states when thing is in progress
lewisbirks Jun 17, 2025
4cc7cca
Merge remote-tracking branch 'upstream/main' into live-timings
lewisbirks Jun 17, 2025
b25d987
Adjust delay to match live polling
timja Jun 17, 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
26 changes: 26 additions & 0 deletions src/main/frontend/common/utils/live-total.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { useEffect, useState } from "react";

import { Total } from "./timings.tsx";

export default function LiveTotal({
total,
start,
}: {
total: number | undefined;
start: number;
}) {
const sinceStart = () => Date.now() - start;
const [duration, setDuration] = useState<number>(total ?? sinceStart());
useEffect(() => {
if (total == null) {
const interval = setInterval(() => {
setDuration(sinceStart());
}, 500);
return () => clearInterval(interval);
} else {
setDuration(total);
}
}, [total]);

return <Total ms={duration} />;
}
5 changes: 3 additions & 2 deletions src/main/frontend/common/utils/run-estimator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@ export default class RunEstimator {
if (previous === undefined) {
return 0; // No previous run, so no estimate
}
const previousTiming = previous.totalDurationMillis;
const currentTiming = stage.totalDurationMillis;
const previousTiming = previous.totalDurationMillis!;
const currentTiming =
stage.totalDurationMillis ?? Date.now() - stage.startTimeMillis;
if (previousTiming <= currentTiming) {
return 99; // Assume 99% complete if the previous run was longer than the current run
}
Expand Down
7 changes: 5 additions & 2 deletions src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import StatusIcon from "../../../common/components/status-icon.tsx";
import Tooltip from "../../../common/components/tooltip.tsx";
import { LocalizedMessageKey, useMessages } from "../../../common/i18n";
import { classNames } from "../../../common/utils/classnames.ts";
import { Total } from "../../../common/utils/timings.tsx";
import LiveTotal from "../../../common/utils/live-total.tsx";
import {
LOG_FETCH_SIZE,
StepInfo,
Expand Down Expand Up @@ -122,7 +122,10 @@ export default function ConsoleLogCard(props: ConsoleLogCardProps) {
fontWeight: "normal",
}}
>
<Total ms={props.step.totalDurationMillis} />
<LiveTotal
total={props.step.totalDurationMillis}
start={props.step.startTimeMillis}
/>
</span>
</div>
</a>
Expand Down
7 changes: 5 additions & 2 deletions src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
import Filter from "../../../common/components/filter.tsx";
import StatusIcon from "../../../common/components/status-icon.tsx";
import { classNames } from "../../../common/utils/classnames.ts";
import { Total } from "../../../common/utils/timings.tsx";
import LiveTotal from "../../../common/utils/live-total.tsx";
import {
Result,
StageInfo,
Expand Down Expand Up @@ -190,7 +190,10 @@ const TreeNode = memo(function TreeNode({
{stage.name}
</div>
<div className="pgv-tree-item__description">
<Total ms={stage.totalDurationMillis} />
<LiveTotal
start={stage.startTimeMillis}
total={stage.totalDurationMillis}
/>
</div>
</div>
</div>
Expand Down
19 changes: 11 additions & 8 deletions src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,8 @@ import StatusIcon, {
} from "../../../common/components/status-icon.tsx";
import { DOCUMENT } from "../../../common/components/symbols.tsx";
import Tooltip from "../../../common/components/tooltip.tsx";
import {
exact,
Paused,
Started,
Total,
} from "../../../common/utils/timings.tsx";
import LiveTotal from "../../../common/utils/live-total.tsx";
import { exact, Paused, Started } from "../../../common/utils/timings.tsx";
import { StageInfo } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
import StageNodeLink from "./StageNodeLink.tsx";

Expand Down Expand Up @@ -39,7 +35,11 @@ export default function StageDetails({ stage }: StageDetailsProps) {
</div>
<ul>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
aria-label={"Total duration"}
>
<path
d="M112.91 128A191.85 191.85 0 0064 254c-1.18 106.35 85.65 193.8 192 194 106.2.2 192-85.83 192-192 0-104.54-83.55-189.61-187.5-192a4.36 4.36 0 00-4.5 4.37V152"
fill="none"
Expand All @@ -53,7 +53,10 @@ export default function StageDetails({ stage }: StageDetailsProps) {
fill="currentColor"
/>
</svg>
<Total ms={stage.totalDurationMillis} />
<LiveTotal
total={stage.totalDurationMillis}
start={stage.startTimeMillis}
/>
</li>
<li>
<Tooltip content={exact(stage.startTimeMillis)}>
Expand Down
11 changes: 2 additions & 9 deletions src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphLayout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,20 +401,13 @@ function createTimings(
}
const stage = column.topStage;

const text = stage?.totalDurationMillis + "";
if (!text) {
// shouldn't happen
continue;
}
Comment on lines -405 to -408
Copy link
Contributor Author

@lewisbirks lewisbirks Jun 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@timja what was the reason for this having to be accounted for?

Copy link
Member

@timja timja Jun 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

umm I think was just a safety thing, if it says shouldn't happen then likely wasn't expected in practice

const key = "l_t_" + node.key;

labels.push({
x: column.centerX,
y: node.y + 55,
node,
stage,
text,
key,
text: "", // we take the duration from the stage itself at render time
key: `l_t_${node.key}`,
});
}

Expand Down
2 changes: 1 addition & 1 deletion src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export interface StageInfo {
synthetic?: boolean;
pauseDurationMillis: number;
startTimeMillis: number;
totalDurationMillis: number;
totalDurationMillis?: number;
agent: string;
url: string;

Expand Down
7 changes: 5 additions & 2 deletions src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/labels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CSSProperties } from "react";

import { Total } from "../../../../common/utils/timings.tsx";
import LiveTotal from "../../../../common/utils/live-total.tsx";
import { sequentialStagesLabelOffset } from "../PipelineGraphLayout.ts";
import { LayoutInfo, NodeLabelInfo } from "../PipelineGraphModel.tsx";
import { TooltipLabel } from "./convertLabelToTooltip.tsx";
Expand Down Expand Up @@ -124,7 +124,10 @@ export function TimingsLabel({

return (
<div className={classNames.join(" ")} style={style} key={details.key}>
<Total ms={parseInt(details.text, 10)} />
<LiveTotal
total={details.stage?.totalDurationMillis}
start={details.stage?.startTimeMillis ?? Date.now()}
/>
</div>
);
}
Expand Down
17 changes: 13 additions & 4 deletions src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import StatusIcon, {
} from "../../../../common/components/status-icon.tsx";
import Tooltip from "../../../../common/components/tooltip.tsx";
import { classNames } from "../../../../common/utils/classnames.ts";
import { Total } from "../../../../common/utils/timings.tsx";
import LiveTotal from "../../../../common/utils/live-total.tsx";
import { CounterNodeInfo } from "../PipelineGraphLayout.ts";
import {
LayoutInfo,
Expand Down Expand Up @@ -58,7 +58,10 @@ export function Node({
/>
{stage.name}
<span style={{ color: "var(--text-color-secondary)" }}>
<Total ms={stage.totalDurationMillis} />
<LiveTotal
total={stage.totalDurationMillis}
start={stage.startTimeMillis}
/>
</span>
</a>
</li>
Expand Down Expand Up @@ -143,14 +146,20 @@ export function Node({
<div className="pgv-node-tooltip">
<div>{title}</div>
<div>
<Total ms={node.stage.totalDurationMillis} />
<LiveTotal
total={node.stage.totalDurationMillis}
start={node.stage.startTimeMillis}
/>
</div>
</div>
);
} else {
tooltip = (
<div className="pgv-node-tooltip">
<Total ms={node.stage.totalDurationMillis} />
<LiveTotal
total={node.stage.totalDurationMillis}
start={node.stage.startTimeMillis}
/>
</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions src/main/java/io/jenkins/plugins/pipelinegraphview/utils/AbstractPipelineNode.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ public long getStartTimeMillis() {
return timingInfo.getStartTimeMillis();
}

public long getTotalDurationMillis() {
return totalDurationMillis;
public Long getTotalDurationMillis() {
return state == PipelineState.RUNNING ? null : totalDurationMillis;
}

public String getId() {
Expand Down