File

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

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

constructor(route: ActivatedRoute, service: WorkflowService, helper: HelperService)
Parameters :
Name Type Optional
route ActivatedRoute No
service WorkflowService No
helper HelperService No

Methods

Protected loadWorkflow
loadWorkflow()
Returns : void
ngOnInit
ngOnInit()
Returns : void
resumeWorkflow
resumeWorkflow()
Returns : void
stopWorkflow
stopWorkflow()
Returns : void

Properties

can
Default value : false
clusterName
Type : string
isLoading
Default value : true
workflow
Type : Workflow
workflowName
Type : string
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>

./workflow-detail.component.scss

@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
Component
Html element with directive

results matching ""

    No results matching ""