Add support for finally syntax in UI (kubeflow#221)

* Add support for ExitHandlers in UI

* Add default empty arrays

* Change label and background color for Static Graph

frontend/src/lib/StaticGraphParser.ts

@@ -15,6 +15,7 @@
  */
 
 import * as dagre from 'dagre';
+import { color } from '../Css';
 import { Constants } from './Constants';
 
 export type nodeType = 'container' | 'resource' | 'dag' | 'unknown';
@@ -86,7 +87,14 @@ export function createGraph(workflow: any): dagre.graphlib.Graph {
 
 function buildTektonDag(graph: dagre.graphlib.Graph, template: any): void {
   const pipeline = template;
-  const tasks = pipeline['spec']['pipelineSpec']['tasks'];
+  const tasks = (pipeline['spec']['pipelineSpec']['tasks'] || []).concat(
+    pipeline['spec']['pipelineSpec']['finally'] || [],
+  );
+
+  const exitHandlers =
+    (pipeline['spec']['pipelineSpec']['finally'] || []).map((element: any) => {
+      return element['name'];
+    }) || [];
 
   for (const task of tasks) {
     const taskName = task['name'];
@@ -129,11 +137,18 @@ function buildTektonDag(graph: dagre.graphlib.Graph, template: any): void {
     const info = new SelectedNodeInfo();
     _populateInfoFromTask(info, task);
 
+    const label = exitHandlers.includes(task['name']) ? 'onExit - ' + taskName : taskName;
+    const bgColor = exitHandlers.includes(task['name'])
+      ? color.lightGrey
+      : task.when
+      ? 'cornsilk'
+      : undefined;
+
     graph.setNode(taskName, {
-      bgColor: task.when ? 'cornsilk' : undefined,
+      bgColor: bgColor,
       height: Constants.NODE_HEIGHT,
       info,
-      label: taskName,
+      label: label,
       width: Constants.NODE_WIDTH,
     });
   }

frontend/src/lib/WorkflowParser.ts

@@ -55,9 +55,15 @@ export default class WorkflowParser {
     )
       return graph;
 
-    const tasks = workflow['spec']['pipelineSpec']['tasks'] || [];
+    const tasks = (workflow['spec']['pipelineSpec']['tasks'] || []).concat(
+      workflow['spec']['pipelineSpec']['finally'] || [],
+    );
     const status = workflow['status']['taskRuns'];
     const pipelineParams = workflow['spec']['params'];
+    const exitHandlers =
+      (workflow['spec']['pipelineSpec']['finally'] || []).map((element: any) => {
+        return element['name'];
+      }) || [];
 
     // Create a map from task name to status for every status received
     const statusMap = new Map<string, any>();
@@ -96,12 +102,15 @@ export default class WorkflowParser {
         for (const edge of edges || []) graph.setEdge(edge['parent'], edge['child']);
 
         const phase = statusToPhase(this.getPhase(statusMap.get(task['name'])));
+        const statusColoring = exitHandlers.includes(task['name'])
+          ? '#fef7f0'
+          : statusToBgColor(phase, '');
         // Add a node for the Task
         graph.setNode(taskId, {
           height: Constants.NODE_HEIGHT,
           icon: statusToIcon(phase),
           label: task['name'],
-          statusColoring: statusToBgColor(phase, ''),
+          statusColoring: statusColoring,
           width: Constants.NODE_WIDTH,
         });
       }