Improve stage view

package.json

@@ -26,11 +26,11 @@
     "@babel/helpers": "^7.20.7",
     "@babel/preset-typescript": "^7.21.0",
     "@babel/traverse": "^7.20.7",
+    "@tippyjs/react": "^4.2.6",
     "babel-loader": "^9.1.2",
     "babel-plugin-import": "^1.13.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-tippy": "^1.4.0",
     "react-virtuoso": "^4.6.2"
   },
   "devDependencies": {

src/main/frontend/common/components/tooltip.tsx

@@ -1,33 +1,23 @@
-import React, { useEffect, useRef } from "react";
-
-declare global {
-  interface Window {
-    Behaviour: any;
-  }
-}
+import Tippy, { TippyProps } from "@tippyjs/react";
+import React from "react";
 
 /**
- * Provides a bridge between React and the Jenkins' tooltip component
+ * A customized (and customizable) implementation of Tippy tooltips
  */
-export default function Tooltip({ text, children }: TooltipProps) {
-  const ref = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    window.Behaviour?.applySubtree(ref.current.parentNode, true);
-  }, []);
+export default function Tooltip(props: TippyProps) {
+  if (props.content === undefined) {
+    return props.children;
+  }
 
   return (
-    <span {...{ tooltip: text }} ref={ref}>
-      {children}
-    </span>
+    <Tippy
+      theme="tooltip"
+      animation="tooltip"
+      duration={250}
+      touch={false}
+      {...props}
+    >
+      {props.children}
+    </Tippy>
   );
 }
-
-interface TooltipProps {
-  text: string;
-  children: React.ReactNode;
-}

src/main/frontend/common/utils/timings.ts

@@ -79,11 +79,20 @@ export function paused(since: number): string {
 }
 
 export function started(since: number): string {
-  return since == 0
+  return since === 0
     ? ""
     : `Started ${getTimeSpanString(Math.abs(since - Date.now()))} ago`;
 }
 
+export function time(since: number): string {
+  return since === 0
+    ? ""
+    : new Date(since).toLocaleTimeString("en-GB", {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+}
+
 export function exact(since: number): string {
   if (since === 0) return "";
 

src/main/frontend/multi-pipeline-graph-view/app.scss

@@ -1,7 +1,3 @@
 .app-page-body--one-column {
   max-width: 95vw;
 }
-
-.pgw-user-specified-text {
-  overflow-wrap: break-word;
-}

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx

@@ -18,27 +18,35 @@ export const MultiPipelineGraph = () => {
       });
     }
   }, [runs, poll]);
+
+  const groupedRuns: Record<string, RunInfo[]> = runs.reduce(
+    (acc: Record<string, RunInfo[]>, run) => {
+      const date = new Date(run.timestamp).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+
+      if (!acc[date]) {
+        acc[date] = [];
+      }
+      acc[date].push(run);
+
+      return acc;
+    },
+    {},
+  );
+
   return (
     <>
-      {runs.length > 0 && (
-        <table className="jenkins-table sortable">
-          <thead>
-            <tr>
-              <th className="jenkins-table__cell--tight">id</th>
-              <th data-sort-disable="true">pipeline</th>
-            </tr>
-          </thead>
-          <tbody>
-            {runs.map((run) => (
-              <SingleRun
-                key={run.id}
-                run={run}
-                currentJobPath={currentJobPath}
-              />
-            ))}
-          </tbody>
-        </table>
-      )}
+      {Object.entries(groupedRuns).map(([date, runsOnDate]) => (
+        <div className={"pgv-stages__group"} key={date}>
+          <p className="pgv-stages__heading">{date}</p>
+          {runsOnDate.map((run) => (
+            <SingleRun key={run.id} run={run} currentJobPath={currentJobPath} />
+          ))}
+        </div>
+      ))}
     </>
   );
 };

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraphModel.ts

@@ -1,4 +1,9 @@
+import { Result } from "../../../pipeline-graph-view/pipeline-graph/main";
+
 export interface RunInfo {
   id: string;
   displayName: string;
+  timestamp: number;
+  duration: number;
+  result: Result;
 }

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx

@@ -1,32 +1,42 @@
 import React, { useState } from "react";
 import { RunInfo } from "./MultiPipelineGraphModel";
 import {
+  LayoutInfo,
   PipelineGraph,
   StageInfo,
 } from "../../../pipeline-graph-view/pipeline-graph/main";
+import { defaultLayout } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel";
+import { time, total } from "../../../common/utils/timings";
+import "./single-run.scss";
+import StatusIcon from "../../../common/components/status-icon";
 
 export default function SingleRun({ run, currentJobPath }: SingleRunProps) {
   const [stages, setStages] = useState<Array<StageInfo>>([]);
 
+  const layout: LayoutInfo = {
+    ...defaultLayout,
+    nodeSpacingH: 45,
+  };
+
   return (
-    <tr>
-      <td>
-        <a
-          href={currentJobPath + run.id}
-          className="jenkins-table__link pgw-user-specified-text"
-        >
+    <div className="pgv-single-run">
+      <div>
+        <a href={currentJobPath + run.id} className="pgw-user-specified-text">
+          <StatusIcon status={run.result} />
           {run.displayName}
+          <span>
+            {time(run.timestamp)} - {total(run.duration)}
+          </span>
         </a>
-      </td>
-      <td>
-        <PipelineGraph
-          stages={stages}
-          setStages={setStages}
-          currentRunPath={currentJobPath + run.id + "/"}
-          collapsed={true}
-        />
-      </td>
-    </tr>
+      </div>
+      <PipelineGraph
+        stages={stages}
+        setStages={setStages}
+        currentRunPath={currentJobPath + run.id + "/"}
+        layout={layout}
+        collapsed={true}
+      />
+    </div>
   );
 }
 

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/single-run.scss

@@ -0,0 +1,49 @@
+.pgv-single-run {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  align-items: center;
+
+  // This is hacky - the pipeline graph is too tall and isn't centered
+  .PWGx-PipelineGraph-container {
+    height: 36px;
+
+    & > div {
+      margin-top: -36px;
+    }
+  }
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+
+  .pgw-user-specified-text {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: start;
+    gap: 0.125rem 0.625rem;
+    color: var(--text-color);
+    text-decoration: none;
+    transition: opacity var(--standard-transition);
+    word-break: normal;
+    overflow-wrap: anywhere;
+
+    span {
+      grid-area: 2 / 2;
+      color: var(--text-color-secondary);
+      font-size: var(--font-size-xs);
+    }
+
+    &:hover {
+      opacity: 0.75;
+    }
+
+    &:active {
+      opacity: 0.5;
+    }
+
+    svg {
+      width: 1.375rem;
+      height: 1.375rem;
+    }
+  }
+}

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/styles/MultiPipelineGraph.scss

@@ -0,0 +1,19 @@
+.pgv-stages__group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 1rem;
+
+  .pgv-stages__heading {
+    display: flex;
+    font-size: var(--font-size-xs);
+    color: var(--text-color-secondary);
+    font-weight: var(--font-bold-weight);
+    margin-bottom: 0.25rem;
+    margin-top: 0;
+  }
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}

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

@@ -1,7 +1,5 @@
 /** * @jest-environment jsdom */
 
-(global as any).TextEncoder = require("util").TextEncoder;
-
 import "@testing-library/jest-dom";
 import React from "react";
 import ConsoleLogCard, { ConsoleLogCardProps } from "./ConsoleLogCard";

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

@@ -118,7 +118,7 @@ export default function ConsoleLogCard(props: ConsoleLogCardProps) {
           </div>
         </a>
 
-        <Tooltip text={"View step as plain text"}>
+        <Tooltip content={"View step as plain text"}>
           <a
             href={`log?nodeId=${props.step.id}`}
             className={"jenkins-button jenkins-button--tertiary"}