src/app/streams/stream/summary/stream-summary.component.ts
Component that shows the summary details of a Stream Definition
| selector | app-stream-summary |
| styleUrls | .styles.scss |
| templateUrl | stream-summary.component.html |
Properties |
Methods |
constructor(route: ActivatedRoute, streamsService: StreamsService)
|
||||||||||||
|
Constructor
Parameters :
|
| canShowDeploymentInfo | ||||||||
canShowDeploymentInfo(streamDefinition: StreamDefinition)
|
||||||||
|
Determine show deployment info
Parameters :
Returns :
boolean
more info is required |
| ngOnInit |
ngOnInit()
|
|
Init component, call refresh method
Returns :
void
|
| refresh |
refresh()
|
|
Refresh Create an observable which provides the required data
Returns :
void
|
| modal |
modal:
|
Type : BsModalRef
|
|
Modal reference |
| stream$ |
stream$:
|
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 { StreamsService } from '../../streams.service';
import { ActivatedRoute } from '@angular/router';
import { mergeMap, map } from 'rxjs/operators';
import { StreamDefinition } from '../../model/stream-definition';
import { Observable, of } from 'rxjs';
import { Parser } from '../../../shared/services/parser';
import { BsModalRef } from 'ngx-bootstrap';
import { StreamStatuses } from '../../model/stream-metrics';
/**
* Component that shows the summary details of a Stream Definition
*
* @author Damien Vitrac
*/
@Component({
selector: 'app-stream-summary',
templateUrl: 'stream-summary.component.html',
styleUrls: ['../styles.scss'],
})
export class StreamSummaryComponent implements OnInit {
/**
* Observable of stream information
* Contains the stream definition, a list of the streams"s apps
*/
stream$: Observable<any>;
/**
* Modal reference
*/
modal: BsModalRef;
/**
* Constructor
*
* @param {ActivatedRoute} route
* @param {StreamsService} streamsService
*/
constructor(private route: ActivatedRoute,
private streamsService: StreamsService) {
}
/**
* Init component, call refresh method
*/
ngOnInit() {
this.refresh();
}
/**
* Refresh
* Create an observable which provides the required data
*/
refresh() {
this.stream$ = this.route.parent.params
.pipe(mergeMap(
val => this.streamsService.getDefinition(val.id)
.pipe(map((streamDefinition: StreamDefinition) => {
return streamDefinition;
}))
))
.pipe(mergeMap((val: StreamDefinition) => {
if (val.status === 'deployed') {
return this.streamsService.getRuntimeStreamStatuses([val.name])
.pipe(map((statuses: StreamStatuses[]) => {
return {
streamDefinition: val,
runtimes: statuses.length === 1 ? statuses[0].applications : []
};
}));
} else {
return of({
streamDefinition: val,
runtimes: []
});
}
}
))
.pipe(mergeMap(
(val: any) => of(Parser.parse(val.streamDefinition.dslText as string, 'stream'))
.pipe(map((val2) => {
return {
streamDefinition: val.streamDefinition,
runtimes: val.runtimes,
apps: val2.lines[0].nodes
.map((node) => ({
origin: node['name'],
name: node['label'] || node['name'],
type: node.type.toString()
}))
};
}))
)
);
}
/**
* Determine show deployment info
*
* @param {StreamDefinition} streamDefinition
* @returns {boolean} more info is required
*/
canShowDeploymentInfo(streamDefinition: StreamDefinition) {
return streamDefinition.status === 'deployed'
|| streamDefinition.status === 'deploying'
|| streamDefinition.status === 'failed'
|| streamDefinition.status === 'incomplete';
}
}
<div *ngIf="stream$ | async as stream; else loading">
<div dataflowLayoutType type="large">
<div class="row stream-summary-row">
<div class="col-md-3">
<strong>Definition:</strong>
</div>
<div class="col-md-21">
<app-stream-dsl>
{{ stream.streamDefinition.dslText }}
</app-stream-dsl>
</div>
</div>
<div class="row stream-summary-row">
<div class="col-md-3">
<strong>Status:</strong>
</div>
<div class="col-md-21">
<app-stream-status [streamDefinition]="stream.streamDefinition"></app-stream-status>
</div>
</div>
<div class="row stream-summary-row">
<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 stream.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 *ngIf="canShowDeploymentInfo(stream.streamDefinition)">
<div class="row stream-summary-row">
<div class="col-md-3">
<strong>Deployment Info:</strong>
</div>
<div class="col-md-21 stream-summary-row-table">
<app-stream-deployment-properties-info [streamDefinition]="stream.streamDefinition">
</app-stream-deployment-properties-info>
</div>
</div>
</div>
<div class="row stream-summary-row" *ngIf="stream.runtimes.length > 0">
<div class="col-md-3">
<strong>Runtimes:</strong>
</div>
<div class="col-md-21">
<table id="table" class="table table-apps table-actions">
<thead>
<tr>
<th>App Id</th>
<th># of Instances</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-runtimeApp [ngForOf]="stream.runtimes">
<tr class="align-middle">
<td>
{{ runtimeApp.id }}
</td>
<td>
{{ runtimeApp.instances.length }}
<span *ngIf="runtimeApp.instances.length == 1">
instance
</span>
<span *ngIf="runtimeApp.instances.length > 1">
instances
</span>
</td>
</tr>
</ng-template>
</tbody>
</table>
</div>
</div>
</div>
</div>
<ng-template #loading>
<app-loader></app-loader>
</ng-template>