Add job view (#48)

Co-authored-by: Tim Jacomb <[email protected]>

Author: farodin91

.editorconfig

@@ -0,0 +1,3 @@
+[*.java]
+indent_size = 2
+indent_style = space

pom.xml

@@ -4,7 +4,7 @@
     <parent>
         <groupId>org.jenkins-ci.plugins</groupId>
         <artifactId>plugin</artifactId>
-        <version>4.18</version>
+        <version>4.31</version>
         <relativePath />
     </parent>
     <groupId>io.jenkins.plugins</groupId>

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import {
+  FunctionComponent,
+} from "react";
+
+import { MultiPipelineGraph } from "./multi-pipeline-graph/main";
+
+import "./app.scss";
+import "./multi-pipeline-graph/styles/main.scss";
+
+
+const App: FunctionComponent = () => {
+  return (
+    <div>
+      <MultiPipelineGraph />
+    </div>
+  );
+};
+
+export default App;

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import App from "./app";
+import { resetEnvironment } from "../common/reset-environment";
+
+resetEnvironment();
+const root = document.getElementById("multiple-pipeline-root");
+ReactDOM.render(<App />, root);

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

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react";
+import { RunInfo } from "./MultiPipelineGraphModel";
+import startPollingRunsStatus from "./support/startPollingRunsStatus";
+import { SingleRun } from "./SingleRun";
+
+export const MultiPipelineGraph = () => {
+  const [runs, setRuns] = useState<Array<RunInfo>>([]);
+  const [poll, setPoll] = useState(false);
+
+  useEffect(() => {
+    if (!poll) {
+      setPoll(true);
+      startPollingRunsStatus(setRuns, (err) => {
+        console.log(err);
+      });
+    }
+  }, [runs, poll]);
+  return (
+    <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} />
+        ))}
+      </tbody>
+    </table>
+  );
+};

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

@@ -0,0 +1,4 @@
+export interface RunInfo {
+  id: string;
+  displayName: string;
+}

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

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { RunInfo } from "./MultiPipelineGraphModel";
+import {
+  PipelineGraph,
+  StageInfo,
+} from "../../../pipeline-graph-view/pipeline-graph/main";
+
+interface Props {
+  run: RunInfo;
+}
+
+export const SingleRun: (data: Props) => JSX.Element = ({ run }) => {
+  const [stages, setStages] = useState<Array<StageInfo>>([]);
+  const path = `graph?runId=${run.id}`;
+  const singleRunPage = `../${run.id}`;
+
+  const handleNodeClick = (nodeName: string, id: number) => {
+    console.log(nodeName, id);
+    window.location.href = `../${
+      run.id
+    }/pipeline-console?selected-node=${id}`;
+  };
+  return (
+    <tr>
+      <td>
+        <a href={singleRunPage} className="jenkins-table__link">
+          {run.id}
+        </a>
+      </td>
+      <td>
+        <PipelineGraph
+          stages={stages}
+          setStages={setStages}
+          onNodeClick={handleNodeClick}
+          path={path}
+          collapsed={true}
+        />
+      </td>
+    </tr>
+  );
+};

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

@@ -0,0 +1 @@
+export { MultiPipelineGraph } from "./MultiPipelineGraph";

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

@@ -0,0 +1,26 @@
+import { RunInfo } from "../MultiPipelineGraphModel";
+
+/**
+ * Starts polling the server to retrieve pipeline status.
+ * Will only stop once the run is finished.
+ */
+export default function startPollingRunsStatus(
+  onFetchSuccess: (data: Array<RunInfo>) => void,
+  onFetchError: (err: Error) => void,
+  interval = 10000
+) {
+  const path = "runs";
+  async function fetchPipelineData() {
+    try {
+      const res = await fetch(path);
+      const result = await res.json();
+      onFetchSuccess(result.data);
+    } catch (err) {
+      // TODO: implement exponential backoff of the timeout interval
+      onFetchError(err);
+    } finally {
+      setTimeout(() => fetchPipelineData(), interval);
+    }
+  }
+  fetchPipelineData();
+}