fix(ui): add subscription on workflowRun event (#5213)

Author: sguiheux

ui/src/app/shared/workflow/menu/edit-node/menu.edit.node.component.ts

@@ -7,7 +7,7 @@ import {
     OnInit,
     Output
 } from '@angular/core';
-import { Store } from '@ngxs/store';
+import { Select, Store } from '@ngxs/store';
 import { IPopup } from '@richardlt/ng2-semantic-ui';
 import { PipelineStatus } from 'app/model/pipeline.model';
 import { Project } from 'app/model/project.model';
@@ -16,6 +16,8 @@ import { WorkflowNodeRun, WorkflowRun } from 'app/model/workflow.run.model';
 import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
 import { ProjectState } from 'app/store/project.state';
 import { WorkflowState, WorkflowStateModel } from 'app/store/workflow.state';
+import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'app-workflow-menu-wnode-edit',
@@ -32,9 +34,16 @@ export class WorkflowWNodeMenuEditComponent implements OnInit {
 
     project: Project;
     workflow: Workflow;
+    node: WNode;
+
+
     workflowrun: WorkflowRun;
+    @Select(WorkflowState.getSelectedWorkflowRun()) workflowRun$: Observable<WorkflowRun>;
+    workflowRunSub: Subscription;
+
     noderun: WorkflowNodeRun;
-    node: WNode;
+    nodeRunSub: Subscription;
+
     runnable: boolean;
     readonly = true;
 
@@ -48,11 +57,36 @@ export class WorkflowWNodeMenuEditComponent implements OnInit {
 
         let state: WorkflowStateModel = this._store.selectSnapshot(WorkflowState);
         this.workflow = state.workflow;
-        this.workflowrun = state.workflowRun;
-        this.noderun = state.workflowNodeRun;
         this.node = state.node;
-        this.readonly = !state.canEdit || (!!this.workflow.from_template && !!this.workflow.from_repository);
 
+
+        this.workflowRunSub = this.workflowRun$.subscribe(wr => {
+            if (!wr) {
+               return;
+            }
+            if (this.workflow.id !== wr.workflow_id) {
+               return;
+            }
+            this.workflowrun = wr;
+            this.runnable = this.getCanBeRun();
+            this._cd.markForCheck();
+        });
+
+        this.nodeRunSub = this._store.select(WorkflowState.nodeRunByNodeID)
+            .pipe(map(filterFn => filterFn(this.node.id))).subscribe( nodeRun => {
+                if (!nodeRun) {
+                    return;
+                }
+                if (this.noderun && this.noderun.status === nodeRun.status) {
+                    return;
+                }
+                this.noderun = nodeRun;
+                this.runnable = this.getCanBeRun();
+                this._cd.markForCheck();
+            });
+
+
+        this.readonly = !state.canEdit || (!!this.workflow.from_template && !!this.workflow.from_repository);
         this.runnable = this.getCanBeRun();
         this._cd.markForCheck();
     }

ui/src/app/shared/workflow/sidebar/run-node/workflow.sidebar.run.node.component.ts

@@ -34,6 +34,9 @@ export class WorkflowSidebarRunNodeComponent implements OnDestroy, OnInit {
 
     project: Project;
     workflow: Workflow;
+
+    @Select(WorkflowState.getSelectedWorkflowRun()) worklowRun$: Observable<WorkflowRun>;
+    wrSubs: Subscription;
     workflowRun: WorkflowRun;
 
     @Select(WorkflowState.getSelectedNode()) node$: Observable<WNode>;
@@ -93,7 +96,15 @@ export class WorkflowSidebarRunNodeComponent implements OnDestroy, OnInit {
     ngOnInit(): void {
         this.project = this._store.selectSnapshot(ProjectState.projectSnapshot);
         this.workflow = this._store.selectSnapshot(WorkflowState.workflowSnapshot);
-        this.workflowRun = this._store.selectSnapshot(WorkflowState.workflowRunSnapshot);
+
+        this.wrSubs = this.worklowRun$.subscribe(wr => {
+            if (!wr) {
+                return;
+            }
+            this.workflowRun = wr;
+            this.canBeRun = this.getCanBeRun();
+            this._cd.markForCheck();
+        });
 
         this.nodeSubs = this.node$.subscribe(n => {
             if (!n && !this.node) {

ui/src/app/views/workflow/workflow.component.ts

@@ -51,7 +51,6 @@ export class WorkflowComponent implements OnInit {
     workflowSubscription: Subscription;
 
     projectSubscription: Subscription;
-    dataRouteSubscription: Subscription;
     qpRouteSubscription: Subscription;
     paramsRouteSubscription: Subscription;
     eventsRouteSubscription: Subscription;
@@ -80,9 +79,6 @@ export class WorkflowComponent implements OnInit {
     selectedNodeRef: string;
     selectecHookRef: string;
 
-    showButtons = false;
-    loadingPopupButton = false;
-
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,