feat: add node pool label to workflow tasks

src/app/config/config.service.ts

@@ -1,19 +1,57 @@
 import { Injectable } from '@angular/core';
-import { ConfigServiceService } from '../../api';
+import { ConfigServiceService, GetConfigResponse } from '../../api';
 import { map } from 'rxjs/operators';
+import { of } from 'rxjs';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root'
 })
 export class ConfigService {
+    private responseCache: GetConfigResponse;
+    private responseCacheObtainedAt: Date = null;
 
-  constructor(private configServiceService: ConfigServiceService) { }
+    constructor(private configServiceService: ConfigServiceService) {
+    }
 
-  public getMachineTypeByValue(value: string) {
-    return this.configServiceService.getConfig().pipe(
-        map(res => {
-          return res.nodePool.options.find(option => option.value === value);
+    public getMachineTypeByValue(value: string) {
+        if (this.responseCache && this.responseCacheObtainedAt) {
+            const now = new Date();
+            const difference = now.getTime() - this.responseCacheObtainedAt.getTime();
+
+            // 30 seconds
+            if (difference < 30000) {
+                const result = this.responseCache.nodePool.options.find(option => option.value === value)
+                return of(result);
+            }
+        }
+
+        return this.configServiceService.getConfig().pipe(
+            map(res => {
+                    this.responseCache = res;
+                    this.responseCacheObtainedAt = new Date();
+                    return res.nodePool.options.find(option => option.value === value);
+                }
+            ));
+    }
+
+    public getNodePoolLabel() {
+        if (this.responseCache && this.responseCacheObtainedAt) {
+            const now = new Date();
+            const difference = now.getTime() - this.responseCacheObtainedAt.getTime();
+
+            // 90 seconds
+            if (difference < 90000) {
+                const result = this.responseCache.nodePool.label;
+                return of(result);
+            }
         }
-      ));
-  }
+
+        return this.configServiceService.getConfig().pipe(
+            map(res => {
+                    this.responseCache = res;
+                    this.responseCacheObtainedAt = new Date();
+                    return res.nodePool.label;
+                }
+            ));
+    }
 }

src/app/node-info/node-info.component.html

@@ -36,12 +36,14 @@
       <tr class="text-left">
         <th>Name</th>
         <th>Type</th>
+        <th *ngIf="nodePool">Node pool</th>
       </tr>
       </thead>
       <tbody>
       <tr>
-        <td *ngIf="node" class="w-50">{{node.id}}</td>
-        <td *ngIf="node" class="w-50">{{node.type}}</td>
+        <td *ngIf="node" [class.w-33]="nodePool" [class.w-50]="!nodePool">{{node.id}}</td>
+        <td *ngIf="node" [class.w-33]="nodePool" [class.w-50]="!nodePool">{{node.type}}</td>
+        <td *ngIf="nodePool" class="w-33">{{nodePool.name}} ({{nodePool.value}})</td>
       </tr>
       </tbody>
     </table>

src/app/node-info/node-info.component.ts

@@ -3,16 +3,16 @@ import { NodeParameter, NodeStatus } from '../node/node.service';
 import { SimpleWorkflowDetail, WorkflowPhase, WorkflowService, } from '../workflow/workflow.service';
 import * as yaml from 'js-yaml';
 import { TemplateDefinition, VolumeMount } from '../workflow-template/workflow-template.service';
-import { FileNavigator, LongRunningTaskState, SlowValueUpdate } from '../files/fileNavigator';
-import { WorkflowServiceService } from '../../api';
+import { FileNavigator } from '../files/fileNavigator';
+import { Parameter, WorkflowServiceService } from '../../api';
 import { Metric, MetricsService } from './metrics/metrics.service';
 import { WorkflowFileApiWrapper } from '../files/WorkflowFileApiWrapper';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { FileSyncerFileApi } from '../files/file-api';
 import { AuthService } from '../auth/auth.service';
 import { HttpClient } from '@angular/common/http';
-import { environment } from '../../environments/environment';
 import { BreadcrumbPath, PathPart } from '../files/file-browser/file-browser.component';
+import { ConfigService } from '../config/config.service';
 
 interface SideCar {
   name: string;
@@ -33,14 +33,16 @@ export class NodeInfoComponent implements OnInit, OnDestroy {
               private metricsService: MetricsService,
               private snackBar: MatSnackBar,
               private appAuthService: AuthService,
-              private httpClient: HttpClient) { }
+              private httpClient: HttpClient,
+              private configService: ConfigService) { }
 
   private static sysSideCarUrlPrefixLength = 17;
   @Input() namespace: string;
   @Input() name: string;
 
   @Input() visible = true;
   @Input() workflow: SimpleWorkflowDetail;
+  @Input() nodePoolLabel: string;
   @Output() yamlClicked = new EventEmitter();
   @Output() closeClicked = new EventEmitter();
   @Output() logsClicked = new EventEmitter();
@@ -73,6 +75,8 @@ export class NodeInfoComponent implements OnInit, OnDestroy {
   sidecars = new Array<SideCar>();
 
   localFileNavigators = new Array<FileNavigator>();
+  nodePool: Parameter;
+  nodePoolRequestedAt: Date;
 
   static outputArtifactsToDirectories(outputArtifacts: any[]): Array<string> {
     const directoriesSet = new Map<string, boolean>();
@@ -242,6 +246,9 @@ export class NodeInfoComponent implements OnInit, OnDestroy {
     this.updateFiles();
     this.updateMetrics();
     this.refreshOutputParameters();
+
+    this.nodePool = null;
+    this.getNodePool();
   }
 
   onCloseClick() {
@@ -481,4 +488,40 @@ export class NodeInfoComponent implements OnInit, OnDestroy {
       pathParts
     };
   }
+
+  parseNodePool(): string {
+    if (!this.template || !this.template.nodeSelector) {
+      return null;
+    }
+
+    let nodePoolKey = this.template.nodeSelector[this.nodePoolLabel];
+    nodePoolKey = nodePoolKey.replace(/[{}\s]/g, '');
+
+    const parts = nodePoolKey.split('.');
+    nodePoolKey = parts[parts.length - 1];
+
+    const jsonManifest = this.workflow.getJsonManifest();
+
+    const value = jsonManifest.spec.arguments.parameters;
+
+    for (const param of value) {
+      if (param.name === nodePoolKey) {
+        return param.value;
+      }
+    }
+  }
+
+  getNodePool() {
+    this.nodePoolRequestedAt = new Date();
+    const requestStartedAt = new Date();
+
+    const value = this.parseNodePool();
+
+    this.configService.getMachineTypeByValue(value).subscribe(res => {
+      const timeDifference = requestStartedAt.getTime() - this.nodePoolRequestedAt.getTime();
+      if (timeDifference >= 0) {
+        this.nodePool = res;
+      }
+    });
+  }
 }

src/app/workflow-template/workflow-template.service.ts

@@ -35,6 +35,7 @@ export interface TemplateDefinition {
   container?: ContainerDefinition;
   script?: ScriptDefinition;
   resource?: ResourceDefinition;
+  nodeSelector?: { [key: string]: string };
 }
 
 export interface WorkflowTemplateBase {

src/app/workflow/workflow-view/workflow-view.component.html

@@ -148,6 +148,7 @@
                 [name]="uid"
                 [visible]="showNodeInfo"
                 [workflow]="workflow"
+                [nodePoolLabel]="nodePoolLabel"
                 (closeClicked)="onNodeInfoClosed()"
                 (yamlClicked)="onYamlClicked()"
                 (logsClicked)="onLogsClicked()">

src/app/workflow/workflow-view/workflow-view.component.ts

@@ -86,6 +86,7 @@ export class WorkflowViewComponent implements OnInit, OnDestroy {
   metrics: Metric[] = [];
 
   machineType: NodePoolOption;
+  nodePoolLabel = 'beta.kubernetes.io/instance-type';
 
   private socketClosedCount = 0;
   private socketErrorCount = 0;
@@ -139,6 +140,11 @@ export class WorkflowViewComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.activatedRoute.paramMap.subscribe(next => {
       const namespace = next.get('namespace');
+
+      this.configService.getNodePoolLabel().subscribe(res => {
+        this.nodePoolLabel = res;
+      });
+
       this.setNamespaceUid(namespace, next.get('uid'));
       if (this.clock) {
         this.clock.reset(true);

src/app/workflow/workflow.service.ts

@@ -141,7 +141,7 @@ export class SimpleWorkflowDetail {
         for (const template of templates) {
             if (template.name === name) {
                 // output parameters may be undefined
-                if (template.outputs.parameters) {
+                if (template.outputs && template.outputs.parameters) {
                     return template.outputs.parameters;
                 }
 
@@ -151,6 +151,10 @@ export class SimpleWorkflowDetail {
 
         return [];
     }
+
+    getJsonManifest(): WorkflowManifest|null {
+        return this.jsonManifest;
+    }
 }
 
 // todo deprecated. Remove this and use API generated WorkflowExecution.