File
    Implements
    
    
    
    
    
    
    
        Methods
    
    
        
            
                | Protected
                        loadWorkflow | 
            
                | loadWorkflow() | 
            
                |  | 
            
                |  | 
        
    
    
    
        
            
                | resumeWorkflow | 
            
                | resumeWorkflow() | 
            
                |  | 
            
                |  | 
        
    
    
        
            
                | stopWorkflow | 
            
                | stopWorkflow() | 
            
                |  | 
            
                |  | 
        
    
    
    
    
    
        
            
                | can | 
                
                    | Default value : false | 
                    
                        |  | 
        
    
    
    
        
            
                | isLoading | 
                
                    | Default value : true | 
                    
                        |  | 
        
    
    
    
        import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Workflow } from '../shared/workflow.model';
import { WorkflowService } from '../shared/workflow.service';
import { HelperService } from '../../shared/helper.service';
@Component({
  selector: 'hi-workflow-detail',
  templateUrl: './workflow-detail.component.html',
  styleUrls: ['./workflow-detail.component.scss'],
})
export class WorkflowDetailComponent implements OnInit {
  isLoading = true;
  workflow: Workflow;
  clusterName: string;
  workflowName: string;
  can = false;
  constructor(
    protected route: ActivatedRoute,
    protected service: WorkflowService,
    protected helper: HelperService
  ) {}
  ngOnInit() {
    this.clusterName = this.route.snapshot.params['cluster_name'];
    this.workflowName = this.route.snapshot.params['workflow_name'];
    this.service.can().subscribe((data) => (this.can = data));
    this.loadWorkflow();
  }
  stopWorkflow() {
    this.service.stop(this.clusterName, this.workflowName).subscribe(
      () => {
        this.helper.showSnackBar('Pause command sent.');
        this.loadWorkflow();
      },
      (error) => this.helper.showError(error)
    );
  }
  resumeWorkflow() {
    this.service.resume(this.clusterName, this.workflowName).subscribe(
      () => {
        this.helper.showSnackBar('Resume command sent.');
        this.loadWorkflow();
      },
      (error) => this.helper.showError(error)
    );
  }
  protected loadWorkflow() {
    this.isLoading = true;
    this.service.get(this.clusterName, this.workflowName).subscribe(
      (workflow) => (this.workflow = workflow),
      (error) => this.helper.showError(error),
      () => (this.isLoading = false)
    );
  }
}
     
    
        <!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->
<mat-toolbar class="mat-elevation-z1">
  <mat-toolbar-row>
    <hi-detail-header
      [cluster]="clusterName"
      [workflow]="workflow?.name"
    ></hi-detail-header>
    <hi-disabled-label
      *ngIf="!isLoading && workflow.state !== 'IN_PROGRESS'"
      [text]="workflow.state"
    ></hi-disabled-label>
  </mat-toolbar-row>
  <mat-toolbar-row class="information">
    <a mat-mini-fab routerLink="../"><mat-icon>arrow_back</mat-icon></a>
    <hi-key-value-pairs [obj]="workflow">
      <hi-key-value-pair
        name="Capacity"
        prop="config.capacity"
      ></hi-key-value-pair>
      <hi-key-value-pair
        name="Target State"
        prop="config.TargetState"
      ></hi-key-value-pair>
      <hi-key-value-pair
        name="Terminable"
        prop="config.Terminable"
      ></hi-key-value-pair>
      <hi-key-value-pair
        name="Parallel Jobs"
        prop="config.ParallelJobs"
      ></hi-key-value-pair>
      <hi-key-value-pair
        name="Failure Threshold"
        prop="config.FailureThreshold"
      ></hi-key-value-pair>
      <hi-key-value-pair name="Expiry" prop="config.Expiry"></hi-key-value-pair>
    </hi-key-value-pairs>
    <span fxFlex="1 1 auto"></span>
    <button mat-mini-fab *ngIf="can" [matMenuTriggerFor]="menu">
      <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item (click)="stopWorkflow()">
        <mat-icon>pause_circle_outline</mat-icon>
        <span>Pause this Workflow</span>
      </button>
      <button mat-menu-item (click)="resumeWorkflow()">
        <mat-icon>play_circle_outline</mat-icon>
        <span>Resume this workflow</span>
      </button>
    </mat-menu>
  </mat-toolbar-row>
</mat-toolbar>
<section fxLayout="column" fxLayoutAlign="center center">
  <mat-spinner *ngIf="isLoading"></mat-spinner>
  <section
    *ngIf="!isLoading"
    class="content"
    fxLayout="column"
    fxLayoutAlign="center center"
    fxLayoutGap="10px"
    fxFlexFill
  >
    <mat-button-toggle-group
      #group="matButtonToggleGroup"
      [value]="'list'"
    >
      <mat-button-toggle *ngIf="!workflow.isJobQueue" value="graph">
        Graph View
      </mat-button-toggle>
      <mat-button-toggle value="list"> List View </mat-button-toggle>
      <mat-button-toggle value="json"> JSON View </mat-button-toggle>
    </mat-button-toggle-group>
    <section
      class="viewer"
      [ngSwitch]="group.value"
      fxLayout="column"
      fxLayoutAlign="center center"
      fxFill
    >
      <hi-workflow-dag
        *ngSwitchCase="'graph'"
        [workflow]="workflow"
      ></hi-workflow-dag>
      <hi-job-list
        *ngSwitchCase="'list'"
        [jobs]="workflow.jobs"
        fxFill
      ></hi-job-list>
      <ngx-json-viewer
        *ngSwitchCase="'json'"
        [json]="workflow.json"
        fxFill
      ></ngx-json-viewer>
    </section>
  </section>
</section>
     
    
                
                @use '@angular/material' as mat;
.content {
  padding: 20px;
}
.state-default {
  color: mat.get-color-from-palette(
    mat.define-palette(mat.$deep-orange-palette)
  );
}
.state-COMPLETED {
  color: mat.get-color-from-palette(mat.define-palette(mat.$green-palette));
}
.state-PENDING {
  color: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette));
}
     
    
        
        
            
                Legend
            
            
            
            
                Html element with directive