fix(ui): workflow node run state management (#5103)

engine/api/workflow/execute_node_job_run.go

@@ -61,9 +61,9 @@ func (r *ProcessorReport) Add(ctx context.Context, i ...interface{}) {
 		case *sdk.WorkflowNodeJobRun:
 			r.jobs = append(r.jobs, *x)
 		case sdk.WorkflowNodeRun:
-			r.addWorkflowNodeRun(ctx, x)
+			r.addWorkflowNodeRun(x)
 		case *sdk.WorkflowNodeRun:
-			r.addWorkflowNodeRun(ctx, *x)
+			r.addWorkflowNodeRun(*x)
 		case sdk.WorkflowRun:
 			r.workflows = append(r.workflows, x)
 		case *sdk.WorkflowRun:
@@ -74,7 +74,7 @@ func (r *ProcessorReport) Add(ctx context.Context, i ...interface{}) {
 	}
 }
 
-func (r *ProcessorReport) addWorkflowNodeRun(ctx context.Context, nr sdk.WorkflowNodeRun) {
+func (r *ProcessorReport) addWorkflowNodeRun(nr sdk.WorkflowNodeRun) {
 	for i := range r.nodes {
 		if nr.ID == r.nodes[i].ID {
 			r.nodes[i] = nr

ui/package.json

@@ -58,7 +58,7 @@
     "angular2-prettyjson": "3.0.1",
     "angular2-toaster": "7.0.0",
     "animate.css": "3.7.2",
-    "ansi_up": "3.0.0",
+    "ansi_up": "4.0.4",
     "codemirror": "5.51.0",
     "core-js": "2.6.3",
     "d3": "5.7.0",

ui/src/app/app.component.ts

@@ -6,6 +6,7 @@ import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, NavigationStart, ResolveEnd, ResolveStart, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Store } from '@ngxs/store';
+import { WorkflowNodeRun } from 'app/model/workflow.run.model';
 import { GetCDSStatus } from 'app/store/cds.action';
 import { CDSState } from 'app/store/cds.state';
 import { Observable } from 'rxjs';
@@ -229,8 +230,21 @@ export class AppComponent implements OnInit {
                         if (!e.type_event || e.type_event.indexOf(EventType.RUN_WORKFLOW_PREFIX) !== 0) {
                             results.push(e);
                         } else {
-                            let wr = results.find(re => re.project_key === e.project_key
-                                && re.workflow_name === e.workflow_name && re.type_event === e.type_event);
+                            let wr = results.find(re => {
+                                if (re.project_key === e.project_key && re.workflow_name === e.workflow_name
+                                    && re.type_event === e.type_event) {
+                                    switch (e.type_event) {
+                                        case EventType.RUN_WORKFLOW_NODE:
+                                            let wnrEvent = <WorkflowNodeRun>e.payload;
+                                            let otherEvent = <WorkflowNodeRun>re.payload;
+                                            return wnrEvent.id === otherEvent.id;
+                                        case EventType.RUN_WORKFLOW_PREFIX:
+                                            return e.workflow_run_num === re.workflow_run_num;
+                                        default: return true
+                                    }
+                                }
+                                return false;
+                            });
                             if (!wr) {
                                 results.push(e);
                             }

ui/src/app/shared/commit/commit.list.component.ts

@@ -1,5 +1,10 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Select } from '@ngxs/store';
 import { Commit } from 'app/model/repositories.model';
+import { WorkflowNodeRun } from 'app/model/workflow.run.model';
+import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
+import { WorkflowState } from 'app/store/workflow.state';
+import { Observable, Subscription } from 'rxjs';
 import { Column, ColumnType } from '../table/data-table.component';
 
 @Component({
@@ -8,11 +13,16 @@ import { Column, ColumnType } from '../table/data-table.component';
     styleUrls: ['./commit.list.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CommitListComponent {
-    @Input() commits: Array<Commit>;
+@AutoUnsubscribe()
+export class CommitListComponent implements OnInit {
+
+    @Select(WorkflowState.getSelectedNodeRun()) nodeRun$: Observable<WorkflowNodeRun>;
+    nodeRunSubs: Subscription;
+
+    commits: Array<Commit>;
     columns: Column<Commit>[];
 
-    constructor() {
+    constructor(private _cd: ChangeDetectorRef) {
         this.columns = [
             <Column<Commit>>{
                 type: ColumnType.IMG_TEXT,
@@ -52,4 +62,17 @@ export class CommitListComponent {
             },
         ];
     }
+
+    ngOnInit(): void {
+        this.nodeRunSubs = this.nodeRun$.subscribe(nr => {
+           if (!nr) {
+               return;
+           }
+           if (this.commits && nr.commits && this.commits.length === nr.commits.length) {
+               return;
+           }
+           this.commits = nr.commits;
+           this._cd.markForCheck();
+        });
+    }
 }

ui/src/app/shared/diff/diff.ts

@@ -41,8 +41,8 @@ export function calculateWorkflowTemplateDiff(before: WorkflowTemplate, after: W
         }
     ];
 
-    let pipelinesLength = Math.max(before && before.pipelines ?
-        before.pipelines.length : 0, after && after.pipelines ? after.pipelines.length : 0);
+    let pipelinesLength = Math.max(before && before.pipelines ? before.pipelines.length : 0,
+        after && after.pipelines ? after.pipelines.length : 0);
     for (let i = 0; i < pipelinesLength; i++) {
         diffItems.push(
             <Item>{
@@ -65,7 +65,8 @@ export function calculateWorkflowTemplateDiff(before: WorkflowTemplate, after: W
                 translateData: { number: applicationsLength > 1 ? i : '' },
                 before: before && before.applications && before.applications[i] ?
                     Base64.b64DecodeUnicode(before.applications[i].value) : null,
-                after: after && after.applications && after.applications[i] ? Base64.b64DecodeUnicode(after.applications[i].value) : null,
+                after: after && after.applications && after.applications[i] ?
+                    Base64.b64DecodeUnicode(after.applications[i].value) : null,
                 type: 'text/x-yaml'
             })
     }
@@ -81,7 +82,8 @@ export function calculateWorkflowTemplateDiff(before: WorkflowTemplate, after: W
                 translateData: { number: environmentsLength > 1 ? i : '' },
                 before: before && before.environments && before.environments[i] ?
                     Base64.b64DecodeUnicode(before.environments[i].value) : null,
-                after: after && after.environments && after.environments[i] ? Base64.b64DecodeUnicode(after.environments[i].value) : null,
+                after: after && after.environments && after.environments[i] ?
+                    Base64.b64DecodeUnicode(after.environments[i].value) : null,
                 type: 'text/x-yaml'
             })
     }

ui/src/app/shared/vulnerability/list/vulnerability.list.component.ts

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { Store } from '@ngxs/store';
 import { Application, Vulnerability } from 'app/model/application.model';
 import { Project } from 'app/model/project.model';
 import { ApplicationService } from 'app/service/application/application.service';
 import { ToastService } from 'app/shared/toast/ToastService';
+import { ApplicationsState, ApplicationStateModel } from 'app/store/applications.state';
+import { ProjectState } from 'app/store/project.state';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { finalize } from 'rxjs/operators';
 
@@ -32,19 +35,21 @@ export class VulnerabilitiesListComponent {
         }
     };
     @Input() edit = false;
-    @Input() project: Project;
-    @Input() application: Application;
 
+    application: Application;
+    project: Project;
     allVulnerabilities: Array<Vulnerability>;
     filteredVulnerabilities: Array<Vulnerability>;
 
     constructor(
         private _applicationService: ApplicationService,
         private _translate: TranslateService,
         private _toast: ToastService,
-        private _cd: ChangeDetectorRef
+        private _cd: ChangeDetectorRef,
+        private _store: Store
     ) {
-
+        this.project = this._store.selectSnapshot(ProjectState.projectSnapshot);
+        this.application = (<ApplicationStateModel>this._store.selectSnapshot(ApplicationsState)).application;
     }
 
     updateVulns(): void {

ui/src/app/shared/vulnerability/vulnerabilities.component.ts

@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { Application, Severity, Vulnerability } from 'app/model/application.model';
-import { Project } from 'app/model/project.model';
-import { WorkflowNodeRunVulnerabilityReport } from 'app/model/workflow.run.model';
+import { Store } from '@ngxs/store';
+import { Severity, Vulnerability } from 'app/model/application.model';
+import { ApplicationsState, ApplicationStateModel } from 'app/store/applications.state';
+import { WorkflowState, WorkflowStateModel } from 'app/store/workflow.state';
 
 @Component({
     selector: 'app-vulnerabilities',
@@ -11,7 +12,8 @@ import { WorkflowNodeRunVulnerabilityReport } from 'app/model/workflow.run.model
 })
 export class VulnerabilitiesComponent {
 
-    _vulnerabilities: Vulnerability[];
+    @Input() edit = false;
+
     orderedVulnerabilities: Vulnerability[];
     summary = {
         total: 0,
@@ -30,33 +32,24 @@ export class VulnerabilitiesComponent {
         unknown: 0,
         deltaUnknown: 0,
     };
+    filter = '';
 
-    @Input('vulnerabilities')
-    set vulnerabilities(data: Vulnerability[]) {
-        this._vulnerabilities = data;
-        this.initVulnerabilities(data);
-    }
-    get vulnerabilities() {
-        return this._vulnerabilities;
-    }
-
-    @Input('report')
-    set report(data: WorkflowNodeRunVulnerabilityReport) {
-        if (data) {
-            this.vulnerabilities = data.report.vulnerabilities;
-            if (data.report.previous_run_summary) {
-                this.calculateDelta(data.report.previous_run_summary);
-            } else if (data.report.default_branch_summary) {
-                this.calculateDelta(data.report.default_branch_summary);
+    constructor(private _store: Store) {
+        let nr = (<WorkflowStateModel>this._store.selectSnapshot(WorkflowState)).workflowNodeRun;
+        if (nr) {
+            this.initVulnerabilities(nr.vulnerabilities_report.report.vulnerabilities);
+            if (nr.vulnerabilities_report.report.previous_run_summary) {
+                this.calculateDelta(nr.vulnerabilities_report.report.previous_run_summary);
+            } else {
+                this.calculateDelta(nr.vulnerabilities_report.report.default_branch_summary);
             }
+            this.edit = false;
+        } else {
+            let app = (<ApplicationStateModel>this._store.selectSnapshot(ApplicationsState)).application;
+            this.initVulnerabilities(app.vulnerabilities);
         }
-    }
-
-    @Input() edit = false;
-    @Input() project: Project;
-    @Input() application: Application;
 
-    filter = '';
+    }
 
     updateFilter(v: Vulnerability): void {
         this.filter = v.component + ' ' + v.version;

ui/src/app/shared/vulnerability/vulnerabilities.html

@@ -68,8 +68,7 @@
     </div>
 
     <div class="list">
-        <app-vulnerabilities-list [filter]="filter" [vulnerabilities]="orderedVulnerabilities" [edit]="edit"
-            [project]="project" [application]="application"></app-vulnerabilities-list>
+        <app-vulnerabilities-list [filter]="filter" [vulnerabilities]="orderedVulnerabilities" [edit]="edit"></app-vulnerabilities-list>
     </div>
 
 </div>

ui/src/app/shared/workflow/sidebar/run-node/stage/job/job.summary.component.html

@@ -17,7 +17,7 @@
             [pipelineActionId]="job.pipeline_action_id"
             [stepName]="job.action.actions[stepOrder].name"
             [stepOptionnal]="job.action.actions[stepOrder].optional"
-            [stepOrder]="stepIds"
+            [stepOrder]="stepOrder"
             [workflowNodeRunId]="workflowRunNodeId"
             [stageId]="stageId"
             [jobId]="jobId">

ui/src/app/store/cds.state.ts

@@ -41,11 +41,15 @@ export class CDSState {
     @Action(GetCDSStatus)
     getCDSStatus(ctx: StateContext<CDSStateModel>, _: GetCDSStatus) {
         this._monitoringService.getStatus().subscribe(s => {
-            let maintenance = s.lines.find(m => {
+            let maintenance = 'false';
+            let line = s.lines.find(m => {
                 if (m.component === 'Global/Maintenance') {
                     return m
                 }
-            }).value;
+            });
+            if (line) {
+                maintenance = line.value;
+            }
             ctx.dispatch(new UpdateMaintenance(maintenance === 'true'));
         });
     }

ui/src/app/store/workflow.action.ts

@@ -67,6 +67,11 @@ export class SelectWorkflowNodeRun {
     constructor(public payload: { workflowNodeRun: WorkflowNodeRun, node: WNode }) { }
 }
 
+export class SelectWorkflowNodeRunJob {
+    static readonly type = '[Workflow] Select Workflow Node Job Run';
+    constructor(public payload: { jobID: number}) { }
+}
+
 export class UpdateWorkflowRunList {
     static readonly type = '[Workflow] Update Workflow Run List';
     constructor(public payload: { workflowRun: WorkflowRun }) { }

ui/src/app/store/workflow.state.ts

@@ -1,7 +1,7 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Action, createSelector, Selector, State, StateContext } from '@ngxs/store';
 import { WNode, WNodeHook, WNodeTrigger, Workflow } from 'app/model/workflow.model';
-import { WorkflowNodeRun, WorkflowRun } from 'app/model/workflow.run.model';
+import { WorkflowNodeJobRun, WorkflowNodeRun, WorkflowRun } from 'app/model/workflow.run.model';
 import { NavbarService } from 'app/service/navbar/navbar.service';
 import { WorkflowRunService } from 'app/service/workflow/run/workflow.run.service';
 import { WorkflowService } from 'app/service/workflow/workflow.service';
@@ -28,6 +28,7 @@ export class WorkflowStateModel {
     sidebar: string;
     workflowRun: WorkflowRun;
     workflowNodeRun: WorkflowNodeRun;
+    workflowNodeJobRun: WorkflowNodeJobRun;
     listRuns: Array<WorkflowRun>;
     filters?: {};
     editWorkflow: Workflow;
@@ -50,6 +51,7 @@ export function getInitialWorkflowState(): WorkflowStateModel {
         canEdit: false,
         workflowRun: null,
         workflowNodeRun: null,
+        workflowNodeJobRun: null,
         listRuns: new Array<WorkflowRun>(),
         sidebar: WorkflowSidebarMode.RUNS,
         filters: {},
@@ -110,6 +112,13 @@ export class WorkflowState {
         );
     }
 
+    static getSelectedWorkflowNodeJobRun() {
+        return createSelector(
+            [WorkflowState],
+            (state: WorkflowStateModel): WorkflowNodeJobRun => state.workflowNodeJobRun
+        );
+    }
+
     static getListRuns() {
         return createSelector(
             [WorkflowState],
@@ -1217,6 +1226,7 @@ export class WorkflowState {
             ...state,
             workflowRun: null,
             workflowNodeRun: null,
+            workflowNodeJobRun: null,
             node: null,
             canEdit: state.workflow.permissions.writable,
             sidebar: WorkflowSidebarMode.RUNS
@@ -1275,6 +1285,41 @@ export class WorkflowState {
         });
     }
 
+    @Action(actionWorkflow.SelectWorkflowNodeRunJob)
+    selectWorkflowNodeRunJob(ctx: StateContext<WorkflowStateModel>, action: actionWorkflow.SelectWorkflowNodeRunJob) {
+        const state = ctx.getState();
+        if (!state.workflowNodeJobRun && !action.payload.jobID) {
+            return;
+        }
+        if (state.workflowNodeJobRun && !action.payload.jobID) {
+            ctx.setState({
+                ...state,
+                workflowNodeJobRun: null
+            });
+            return;
+        }
+        if (!state.workflowNodeRun) {
+            return;
+        }
+        if (state.workflowNodeRun.stages) {
+            for (let i = 0; i < state.workflowNodeRun.stages.length; i++) {
+                let s = state.workflowNodeRun.stages[i];
+                if (s.run_jobs) {
+                    for (let j = 0; j < s.run_jobs.length; j++) {
+                        let rj = s.run_jobs[j];
+                        if (rj.job.pipeline_action_id === action.payload.jobID) {
+                            ctx.setState({
+                                ...state,
+                                workflowNodeJobRun: rj
+                            });
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     @Action(actionWorkflow.SidebarRunsMode)
     sidebarRunsMode(ctx: StateContext<WorkflowStateModel>, action: actionWorkflow.SidebarRunsMode) {
         const state = ctx.getState();