src/app/tasks/task-definition/summary/task-summary.component.ts
Component that shows the summary details of a Stream Definition
selector | app-task-summary |
styleUrls | .styles.scss |
templateUrl | task-summary.component.html |
Properties |
Methods |
constructor(route: ActivatedRoute, toolsService: ToolsService, tasksService: TasksService)
|
||||||||||||||||
Constructor
Parameters :
|
ngOnInit |
ngOnInit()
|
Init component, call refresh method
Returns :
void
|
refresh |
refresh()
|
Refresh Create an observable which provides the required data
Returns :
void
|
task$ |
task$:
|
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> </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>