Adds polling to have live updates (#14)

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

Author: fqueiruga

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { nodeStrokeWidth, getGroupForResult } from './support/StatusIcons';
 import { TruncatingLabel } from './support/TruncatingLabel';
+import startPollingPipelineStatus from './support/startPollingPipelineStatus';
 
 import {
     CompositeConnection,
@@ -63,16 +64,21 @@ export class PipelineGraph extends React.Component {
     }
 
     componentDidMount() {
-        fetch('graph')
-            .then(res => res.json())
-            .then((result) => {
-                this.setState({
-                    stages: result.data.stages
-                })
-                this.stagesUpdated(result.data.stages); // TODO this doesn't seem right
-            })
-            .catch(console.log)
+        const onPipelineDataReceived = (data: { stages: Array<StageInfo> }) => {
+            const { stages } = data;
+            this.setState({ stages });
+            this.stagesUpdated(stages)
+        };
+        const onPollingError = (err: Error) => {
+            console.log('There was an error when polling the pipeline status', err)
+        };
+        const onPipelineComplete = () => undefined
 
+        startPollingPipelineStatus(
+            onPipelineDataReceived,
+            onPollingError,
+            onPipelineComplete
+        )
     }
 
     componentWillReceiveProps(nextProps: Props) {

src/main/frontend/pipeline-graph/main/support/startPollingPipelineStatus.ts

@@ -0,0 +1,39 @@
+import { StageInfo } from '../PipelineGraphModel'
+
+interface ApiResult {
+	complete: boolean;
+	stages: Array<StageInfo>;
+}
+
+/**
+ * Starts polling the server to retrieve pipeline status.
+ * Will only stop once the run is finished.
+ */
+export default function startPollingPipelineStatus(
+	onFetchSuccess: (data: ApiResult) => void,
+	onFetchError: (err: Error) => void,
+	onPipelineComplete: () => void,
+	interval = 3000
+) {
+	let isComplete = false;
+
+	async function fetchPipelineData() {
+		try {
+				const res = await fetch('graph')
+				const result = await res.json()
+				onFetchSuccess(result.data);
+				isComplete = result.data.complete;
+		} catch (err) {
+			// TODO: implement exponential backoff of the timeout interval
+			onFetchError(err)
+		}
+		finally {
+				if (isComplete) {
+					onPipelineComplete()
+				} else {
+					setTimeout(() => fetchPipelineData(), interval)
+				}
+		}
+	}
+	fetchPipelineData()
+}

src/main/java/io/jenkins/plugins/pipelinegraphview/PipelineGraph.java

@@ -5,11 +5,16 @@
 public class PipelineGraph {
 
     private List<PipelineStage> stages;
+    private boolean complete = false;
 
-    public PipelineGraph(List<PipelineStage> stages) {
+    public PipelineGraph(List<PipelineStage> stages, boolean complete) {
         this.stages = stages;
+        this.complete = complete;
     }
 
+    public boolean isComplete() { 
+        return complete;
+    }
     public List<PipelineStage> getStages() {
         return stages;
     }

src/main/java/io/jenkins/plugins/pipelinegraphview/PipelineGraphApi.java

@@ -105,7 +105,7 @@ public PipelineGraph createGraph() {
                 })
                 .filter(stage -> !stagesThatAreChildrenOrNestedStages.contains(stage.getId())).collect(Collectors.toList());
 
-        return new PipelineGraph(stageResults);
+        return new PipelineGraph(stageResults, run.getExecution().isComplete());
     }
 
     private Function<Integer, PipelineStage> mapper(Map<Integer, PipelineStageInternal> stageMap, Map<Integer, List<Integer>> stageToChildrenMap) {