File

src/app/tasks/task-definition/summary/task-summary.component.ts

Description

Component that shows the summary details of a Stream Definition

Implements

OnInit

Example

Metadata

selector app-task-summary
styleUrls .styles.scss
templateUrl task-summary.component.html

Index

Properties
Methods

Constructor

constructor(route: ActivatedRoute, toolsService: ToolsService, tasksService: TasksService)

Constructor

Parameters :
Name Type Optional Description
route ActivatedRoute
toolsService ToolsService
tasksService TasksService

Methods

ngOnInit
ngOnInit()

Init component, call refresh method

Returns : void
refresh
refresh()

Refresh Create an observable which provides the required data

Returns : void

Properties

task$
task$: Observable<any>
Type : Observable<any>

Observable of stream information Contains the stream definition, a list of the streams"s apps

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { mergeMap, map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { TasksService } from '../../tasks.service';
import { ToolsService } from '../../components/flo/tools.service';
import { TaskConversion } from '../../components/flo/model/models';

/**
 * Component that shows the summary details of a Stream Definition
 *
 * @author Damien Vitrac
 */
@Component({
  selector: 'app-task-summary',
  templateUrl: 'task-summary.component.html',
  styleUrls: ['../styles.scss'],
})
export class TaskSummaryComponent implements OnInit {

  /**
   * Observable of stream information
   * Contains the stream definition, a list of the streams"s apps
   */
  task$: Observable<any>;

  /**
   * Constructor
   *
   * @param {ActivatedRoute} route
   * @param {ToolsService} toolsService
   * @param {TasksService} tasksService
   */
  constructor(private route: ActivatedRoute,
              private toolsService: ToolsService,
              private tasksService: TasksService) {
  }

  /**
   * Init component, call refresh method
   */
  ngOnInit() {
    this.refresh();
  }

  /**
   * Refresh
   * Create an observable which provides the required data
   */
  refresh() {
    this.task$ = this.route.parent.params
      .pipe(mergeMap(val => this.tasksService.getDefinition(val.id)))
      .pipe(mergeMap(
        val => this.toolsService.parseTaskTextToGraph(val.dslText, val.name)
          .pipe(map((val2: TaskConversion) => {
            let apps = [];
            if (val2.graph && val2.graph.nodes) {
              apps = val2.graph.nodes.map((node) => {
                if (node.name === 'START' || node.name === 'END') {
                  return null;
                }
                const item = {
                  name: node.name,
                  origin: node.name,
                  type: 'task'
                };
                if (node.metadata && node.metadata['label']) {
                  item.name = node.metadata['label'];
                }
                return item;
              }).filter((app) => app !== null);
            }
            return {
              taskDefinition: val,
              apps: apps
            };
          }))
      ));
  }

}
<div *ngIf="task$ | async as task; else loading">

  <div dataflowLayoutType type="large">
    <div class="row task-summary-row">
      <div class="col-md-3">
        <strong>Definition:</strong>
      </div>
      <div class="col-md-21">
        <app-stream-dsl>
          {{ task.taskDefinition.dslText }}
        </app-stream-dsl>
      </div>
    </div>
    <div class="row task-summary-row">
      <div class="col-md-3">
        <strong>Status:</strong>
      </div>
      <div class="col-md-21">
        <app-task-status [taskDefinition]="task.taskDefinition"></app-task-status>
      </div>
    </div>
    <div class="row task-summary-row" *ngIf="task.apps.length > 0">
      <div class="col-md-3">
        <strong>Applications:</strong>
      </div>
      <div class="col-md-21">
        <table class="table table-apps table-hover table-actions">
          <thead>
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>&nbsp;</th>
          </tr>
          </thead>
          <tbody>
            <tr *ngFor="let app of task.apps">
              <td>
                <strong>{{ app.name }}</strong>
                <span *ngIf="app.origin !== app.name">
                  ({{ app.origin }})
                </span>
              </td>
              <td>
                <app-type [application]="app"></app-type>
              </td>
              <td class="table-actions" width="10px" nowrap="">
                <div class="actions-btn" role="group">
                  <a routerLink="/apps/{{ app.type }}/{{ app.origin }}" class="btn btn-default" title="Details">
                    <span class="fa fa-info-circle"></span>
                  </a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""