Update node symbols

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

@@ -25,14 +25,6 @@ export const SingleRun: (data: Props) => JSX.Element = ({ run }) => {
     singleRunPage = `${run.id}/pipeline-graph/`;
   }
 
-  const handleNodeClick = (nodeName: string, id: number) => {
-    console.log(nodeName, id);
-    let redirect = `../${run.id}/pipeline-console?selected-node=${id}`;
-    if (onJobView) {
-      redirect = `${run.id}/pipeline-console?selected-node=${id}`;
-    }
-    window.location.href = redirect;
-  };
   return (
     <tr>
       <td>
@@ -47,7 +39,6 @@ export const SingleRun: (data: Props) => JSX.Element = ({ run }) => {
         <PipelineGraph
           stages={stages}
           setStages={setStages}
-          onNodeClick={handleNodeClick}
           path={path}
           collapsed={true}
         />

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

@@ -12,7 +12,7 @@ export type {
 } from "../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel";
 export { default as startPollingPipelineStatus } from "../../../pipeline-graph-view/pipeline-graph/main/support/startPollingPipelineStatus";
 export { pollUntilComplete } from "../../../common/Poller";
-export { getGroupForResult } from "../../../pipeline-graph-view/pipeline-graph/main/support/StatusIcons";
+export { getSymbolForResult } from "../../../pipeline-graph-view/pipeline-graph/main/support/StatusIcons";
 export * from "../../../common/RestClient";
 
 export const LOG_FETCH_SIZE = 150 * 1024;

src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss

@@ -220,12 +220,6 @@ g.build-status-icon__outer {
   padding: unset;
 }
 
-.jenkins-button svg {
-  width: 20px !important;
-  height: 20px !important;
-  color: currentColor !important;
-}
-
 .svg-icon {
   // Force rotating icons to rotate about their center.
   transform-origin: center;

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

@@ -40,12 +40,6 @@
   }
 }
 
-.jenkins-button svg {
-  width: 20px !important;
-  height: 20px !important;
-  color: currentColor !important;
-}
-
 .app-details__prev_next {
   color: inherit !important;
   text-decoration: none !important;

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

@@ -6,22 +6,11 @@ import { PipelineGraph } from "./pipeline-graph/main";
 import "./app.scss";
 import "./pipeline-graph/styles/main.scss";
 
-function handleNodeClick(nodeName: string, id: number) {
-  let location = `../pipeline-console?selected-node=${id}`;
-  const url = new URL(window.location.href);
-  if (!url.pathname.endsWith("pipeline-graph/")) {
-    location = `pipeline-console?selected-node=${id}`;
-  }
-
-  window.location.href = location;
-}
-
 const App: FunctionComponent = () => {
   return (
     <div>
       <PipelineGraph
         stages={[]}
-        onNodeClick={handleNodeClick}
         collapsed={false}
       />
     </div>

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

@@ -7,7 +7,6 @@ import {
   NodeLabelInfo,
   LayoutInfo,
   NodeColumn,
-  NodeInfo,
   StageInfo,
 } from "./PipelineGraphModel";
 import { layoutGraph } from "./PipelineGraphLayout";
@@ -24,7 +23,6 @@ interface Props {
   stages: Array<StageInfo>;
   layout?: Partial<LayoutInfo>;
   setStages?: (stages: Array<StageInfo>) => void;
-  onNodeClick?: (nodeName: string, id: number) => void;
   selectedStage?: StageInfo;
   path?: string;
   collapsed?: boolean;
@@ -145,20 +143,6 @@ export class PipelineGraph extends React.Component {
     return (selectedStage && stage && selectedStage.id === stage.id) || false;
   };
 
-  private handleNodeClick = (node: NodeInfo) => {
-    if (node.isPlaceholder === false && node.stage.state !== "skipped") {
-      const stage = node.stage;
-      const listener = this.props.onNodeClick;
-
-      if (listener) {
-        listener(stage.name, stage.id);
-      }
-
-      // Update selection
-      this.setState({ selectedStage: stage });
-    }
-  };
-
   render() {
     const {
       nodeColumns,
@@ -194,22 +178,19 @@ export class PipelineGraph extends React.Component {
               layout={this.state.layout}
             />
 
-            {nodes.map((node) => (
-              <Node
-                key={node.id}
-                node={node}
-                layout={this.state.layout}
-                onClick={this.handleNodeClick}
-                isStageSelected={this.stageIsSelected}
-              />
-            ))}
             <SelectionHighlight
               layout={this.state.layout}
               nodeColumns={this.state.nodeColumns}
               isStageSelected={this.stageIsSelected}
             />
           </svg>
 
+          {nodes.map((node) => (
+            <Node
+              key={node.id}
+              node={node}
+            />
+          ))}
           {bigLabels.map((label) => (
             <BigLabel
               key={label.key}

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

@@ -1,76 +1,106 @@
 import * as React from "react";
 import { Result } from "../PipelineGraphModel";
-import { SvgStatus } from "./SvgStatus";
 
 export const nodeStrokeWidth = 3.5; // px.
 
-// Returns the correct <g> element for the result / progress percent.
-export function getGroupForResult(
-  result: Result,
-  percentage: number,
-  radius: number,
-  centerX: number,
-  centerY: number,
-  outerStyle: React.CSSProperties,
-): React.ReactElement<SvgStatus> {
+function mapResultToCore(result: Result): string {
   switch (result) {
-    case Result.running:
-    case Result.queued:
-    case Result.not_built:
-    case Result.skipped:
     case Result.success:
+      return "blue";
+    case Result.running:
+      return "nobuilt-anime";
     case Result.failure:
-    case Result.paused:
+      return "red";
     case Result.unstable:
+      return "yellow";
     case Result.aborted:
-    case Result.unknown:
-      return (
-        <SvgStatus
-          radius={radius}
-          result={result}
-          outerStyle={outerStyle}
-          centerX={centerX}
-          centerY={centerY}
-        />
-      );
+      return "aborted";
+    case Result.not_built:
+      return "nobuilt";
     default:
-      badResult(result);
-      return (
-        <SvgStatus
-          radius={radius}
-          result={Result.unknown}
-          outerStyle={outerStyle}
-          centerX={centerX}
-          centerY={centerY}
-        />
-      );
+      throw new Error(`Unhandled result: ${result}`);
   }
 }
 
-function badResult(x: never) {
-  console.error("Unexpected Result value", x);
-}
+export function getSymbolForResult(
+  result: Result,
+): React.ReactElement {
+  // Handle non-core symbols
+  if (result === Result.paused) {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <ellipse
+          cx="256"
+          cy="256"
+          rx="210"
+          ry="210"
+          fill="none"
+          stroke="var(--text-color-secondary)"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+          strokeWidth="36"
+        />
+        <path
+          fill="none"
+          stroke="var(--text-color-secondary)"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+          strokeWidth="32"
+          d="M208 192v128M304 192v128"
+        />
+      </svg>
+    );
+  }
 
-export const getClassForResult = (result: Result) => {
-  // These come from the themes icons.less
-  switch (result) {
-    case Result.aborted:
-      return "icon-aborted";
-    case Result.unstable:
-      return "icon-yellow";
-    case Result.failure:
-      return "icon-red";
-    case Result.success:
-      return "icon-blue";
-    case Result.running:
-    case Result.queued:
-      return "icon-grey";
-    case Result.skipped:
-      return "icon-skipped";
-    case Result.not_built:
-    case Result.paused:
-    case Result.unknown:
-    default:
-      return "icon-nobuilt";
+  if (result === Result.unknown) {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <ellipse
+          cx="256"
+          cy="256"
+          rx="210"
+          ry="210"
+          fill="none"
+          stroke="var(--text-color-secondary)"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+          strokeWidth="36"
+        />
+        <path
+          d="M200 202.29s.84-17.5 19.57-32.57C230.68 160.77 244 158.18 256 158c10.93-.14 20.69 1.67 26.53 4.45 10 4.76 29.47 16.38 29.47 41.09 0 26-17 37.81-36.37 50.8S251 281.43 251 296"
+          fill="none"
+          stroke="var(--text-color-secondary)"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+          strokeWidth="28"
+        />
+        <circle cx="250" cy="348" r="20"
+                fill="var(--text-color-secondary)" />
+      </svg>
+    );
+  }
+
+  if (result === Result.skipped) {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--text-color-secondary)"
+                 strokeLinecap="round" strokeMiterlimit="10" strokeWidth="36" />
+      </svg>
+    )
   }
-};
+
+  // Map the result to retrieve the appropriate symbol from core
+  const symbols = document.querySelector<HTMLTemplateElement>(
+    "#pgv-build-status-icons",
+  );
+  const mappedResult = mapResultToCore(result);
+
+  return (
+    <div
+      dangerouslySetInnerHTML={{
+        // This fails in React tests without the Jelly context
+        __html: symbols?.content?.querySelector("#" + mappedResult)?.outerHTML || `<div></div>`,
+      }}
+    />
+  );
+}