reduce rerenders from run times (#842)

Co-authored-by: Tim Jacomb <timjacomb1+github@gmail.com>

Author: lewisbirks

src/main/frontend/common/utils/live-total.tsx

@@ -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());
+      }, 3001); // to match step polling interval
+      return () => clearInterval(interval);
+    } else {
+      setDuration(total);
+    }
+  }, [total]);
+
+  return <Total ms={duration} />;
+}

src/main/frontend/common/utils/run-estimator.ts

@@ -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
         }

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx

@@ -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,
@@ -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>

src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx

@@ -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,
@@ -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>

src/main/frontend/pipeline-console-view/pipeline-console/main/stage-details.tsx

@@ -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";
 
@@ -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"
@@ -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)}>

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphLayout.ts

@@ -401,20 +401,13 @@ function createTimings(
     }
     const stage = column.topStage;
 
-    const text = stage?.totalDurationMillis + "";
-    if (!text) {
-      // shouldn't happen
-      continue;
-    }
-    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}`,
     });
   }
 

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx

@@ -51,7 +51,7 @@ export interface StageInfo {
   synthetic?: boolean;
   pauseDurationMillis: number;
   startTimeMillis: number;
-  totalDurationMillis: number;
+  totalDurationMillis?: number; // will be null if the stage is still running
   agent: string;
   url: string;
 

src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/labels.tsx

@@ -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";
@@ -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>
   );
 }

src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx

@@ -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,
@@ -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>
@@ -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>
     );
   }

src/main/java/io/jenkins/plugins/pipelinegraphview/utils/AbstractPipelineNode.java

@@ -33,8 +33,8 @@ public long getStartTimeMillis() {
         return timingInfo.getStartTimeMillis();
     }
 
-    public long getTotalDurationMillis() {
-        return totalDurationMillis;
+    public Long getTotalDurationMillis() {
+        return state.isInProgress() ? null : totalDurationMillis;
     }
 
     public String getId() {