You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by bo...@apache.org on 2023/01/08 21:16:24 UTC
[streampipes] 01/01: [#877] add formatting and linting to pipeline-details module
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a commit to branch chore/formatting-linting-pipeline-details
in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit a3ecd93629845d845ddc2a4837ff28a759e9cbdc
Author: bossenti <bo...@posteo.de>
AuthorDate: Sun Jan 8 22:14:44 2023 +0100
[#877] add formatting and linting to pipeline-details module
---
ui/.eslintignore | 1 -
ui/.prettierignore | 1 -
.../actions/pipeline-actions.component.html | 67 ++++--
.../actions/pipeline-actions.component.ts | 42 ++--
.../components/edit/quickedit.component.html | 81 ++++---
.../components/edit/quickedit.component.ts | 254 +++++++++++----------
.../elements/pipeline-elements-row.component.html | 24 +-
.../elements/pipeline-elements-row.component.ts | 12 +-
.../elements/pipeline-elements.component.html | 19 +-
.../elements/pipeline-elements.component.ts | 17 +-
.../components/model/pipeline-details.model.ts | 8 +-
.../monitoring/pipeline-monitoring.component.html | 138 ++++++-----
.../monitoring/pipeline-monitoring.component.scss | 26 +--
.../monitoring/pipeline-monitoring.component.ts | 190 ++++++++-------
.../pipeline-element-statistics.component.html | 69 ++++--
.../pipeline-element-statistics.component.scss | 6 +-
.../pipeline-element-statistics.component.ts | 207 +++++++++--------
.../widget/barchart/barchart-widget.component.html | 35 ++-
.../widget/barchart/barchart-widget.component.scss | 2 +-
.../widget/barchart/barchart-widget.component.ts | 43 ++--
.../pipeline-details-overview.component.html | 47 ++--
.../pipeline-details-overview.component.scss | 2 +-
.../pipeline-details-overview.component.ts | 54 +++--
.../pipeline-logs/pipeline-logs.component.html | 96 +++++---
.../pipeline-logs/pipeline-logs.component.ts | 92 ++++----
.../preview/pipeline-preview.component.html | 13 +-
.../preview/pipeline-preview.component.scss | 1 -
.../preview/pipeline-preview.component.ts | 74 ++++--
.../components/sp-pipeline-details.directive.ts | 72 +++---
.../status/pipeline-status.component.html | 47 +++-
.../components/status/pipeline-status.component.ts | 13 +-
.../app/pipeline-details/pipeline-details-tabs.ts | 33 ++-
.../pipeline-details/pipeline-details.module.ts | 68 +++---
.../pipeline-details/pipeline-details.routes.ts | 9 +-
34 files changed, 1116 insertions(+), 747 deletions(-)
diff --git a/ui/.eslintignore b/ui/.eslintignore
index 3c89c9fc7..39c15862d 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -35,4 +35,3 @@ src/app/info
src/app/login
src/app/notifications
src/app/NS
-src/app/pipeline-details
diff --git a/ui/.prettierignore b/ui/.prettierignore
index ffea33c3b..c857a8374 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -35,4 +35,3 @@ src/app/info
src/app/login
src/app/notifications
src/app/NS
-src/app/pipeline-details
diff --git a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
index 8bff66215..447a49f07 100644
--- a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
+++ b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
@@ -17,37 +17,70 @@
-->
<sp-basic-inner-panel panelTitle="Actions">
- <div fxFlex="100" fxLayoutAlign="center center" fxLayout="row" style="padding:10px">
+ <div
+ fxFlex="100"
+ fxLayoutAlign="center center"
+ fxLayout="row"
+ style="padding: 10px"
+ >
<div fxFlex="30">
- <button mat-button mat-raised-button color="accent"
- matTooltip="Start Pipeline" matTooltipPosition="above"
- (click)="startPipeline()"
- [disabled]="starting" *ngIf="!pipeline.running">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ matTooltip="Start Pipeline"
+ matTooltipPosition="above"
+ (click)="startPipeline()"
+ [disabled]="starting"
+ *ngIf="!pipeline.running"
+ >
<mat-icon>play_arrow</mat-icon>
<span> Start</span>
</button>
- <button mat-button mat-raised-button color="accent"
- matTooltip="Stop Pipeline" matTooltipPosition="above"
- (click)="stopPipeline()"
- [disabled]="stopping" *ngIf="pipeline.running">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ matTooltip="Stop Pipeline"
+ matTooltipPosition="above"
+ (click)="stopPipeline()"
+ [disabled]="stopping"
+ *ngIf="pipeline.running"
+ >
<mat-icon>stop</mat-icon>
<span> Stop</span>
</button>
</div>
<div fxFlex="30">
- <button mat-button mat-raised-button color="accent"
- matTooltip="Modify Pipeline" matTooltipPosition="above"
- [disabled]="pipeline.running"
- (click)="pipelineOperationsService.modifyPipeline(pipeline._id)">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ matTooltip="Modify Pipeline"
+ matTooltipPosition="above"
+ [disabled]="pipeline.running"
+ (click)="pipelineOperationsService.modifyPipeline(pipeline._id)"
+ >
<mat-icon>mode_edit</mat-icon>
<span> Modify</span>
</button>
</div>
<div fxFlex="30">
- <button mat-button mat-raised-button color="accent"
- matTooltip="Delete Pipeline" matTooltipPosition="above"
- *ngIf="hasPipelineDeletePrivileges"
- (click)="pipelineOperationsService.showDeleteDialog(pipeline, reloadPipelineEmitter, this.switchToPipelineView)">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ matTooltip="Delete Pipeline"
+ matTooltipPosition="above"
+ *ngIf="hasPipelineDeletePrivileges"
+ (click)="
+ pipelineOperationsService.showDeleteDialog(
+ pipeline,
+ reloadPipelineEmitter,
+ this.switchToPipelineView
+ )
+ "
+ >
<mat-icon>delete</mat-icon>
<span> Delete</span>
</button>
diff --git a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts
index 20f1f3def..9d4d89c1f 100644
--- a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts
+++ b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.ts
@@ -16,7 +16,14 @@
*
*/
-import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import {
+ Component,
+ EventEmitter,
+ Inject,
+ Input,
+ OnInit,
+ Output,
+} from '@angular/core';
import { PipelineOperationsService } from '../../../pipelines/services/pipeline-operations.service';
import { Pipeline } from '@streampipes/platform-services';
import { Router } from '@angular/router';
@@ -24,11 +31,10 @@ import { AuthService } from '../../../services/auth.service';
import { UserPrivilege } from '../../../_enums/user-privilege.enum';
@Component({
- selector: 'pipeline-actions',
+ selector: 'sp-pipeline-actions',
templateUrl: './pipeline-actions.component.html',
})
export class PipelineActionsComponent implements OnInit {
-
starting = false;
stopping = false;
@@ -40,14 +46,17 @@ export class PipelineActionsComponent implements OnInit {
hasPipelineDeletePrivileges = false;
- constructor(public pipelineOperationsService: PipelineOperationsService,
- private router: Router,
- private authService: AuthService) {
- }
+ constructor(
+ public pipelineOperationsService: PipelineOperationsService,
+ private router: Router,
+ private authService: AuthService,
+ ) {}
ngOnInit() {
this.authService.user$.subscribe(user => {
- this.hasPipelineDeletePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_DELETE_PIPELINE);
+ this.hasPipelineDeletePrivileges = this.authService.hasRole(
+ UserPrivilege.PRIVILEGE_DELETE_PIPELINE,
+ );
});
this.toggleRunningOperation = this.toggleRunningOperation.bind(this);
this.switchToPipelineView = this.switchToPipelineView.bind(this);
@@ -55,9 +64,9 @@ export class PipelineActionsComponent implements OnInit {
toggleRunningOperation(currentOperation) {
if (currentOperation === 'starting') {
- this.starting = !(this.starting);
+ this.starting = !this.starting;
} else {
- this.stopping = !(this.stopping);
+ this.stopping = !this.stopping;
}
}
@@ -66,11 +75,18 @@ export class PipelineActionsComponent implements OnInit {
}
startPipeline() {
- this.pipelineOperationsService.startPipeline(this.pipeline._id, this.reloadPipelineEmitter, this.toggleRunningOperation);
+ this.pipelineOperationsService.startPipeline(
+ this.pipeline._id,
+ this.reloadPipelineEmitter,
+ this.toggleRunningOperation,
+ );
}
stopPipeline() {
- this.pipelineOperationsService.stopPipeline(this.pipeline._id, this.reloadPipelineEmitter, this.toggleRunningOperation);
+ this.pipelineOperationsService.stopPipeline(
+ this.pipeline._id,
+ this.reloadPipelineEmitter,
+ this.toggleRunningOperation,
+ );
}
-
}
diff --git a/ui/src/app/pipeline-details/components/edit/quickedit.component.html b/ui/src/app/pipeline-details/components/edit/quickedit.component.html
index c5c44cab9..3817821c8 100644
--- a/ui/src/app/pipeline-details/components/edit/quickedit.component.html
+++ b/ui/src/app/pipeline-details/components/edit/quickedit.component.html
@@ -16,52 +16,75 @@
~
-->
-<sp-basic-nav-tabs [spNavigationItems]="tabs"
- [activeLink]="'quick-edit'"
- [showBackLink]="true"
- [backLinkTarget]="['pipelines']">
-
+<sp-basic-nav-tabs
+ [spNavigationItems]="tabs"
+ [activeLink]="'sp-quick-edit'"
+ [showBackLink]="true"
+ [backLinkTarget]="['pipelines']"
+>
<div fxLayout="column" class="page-container-padding" *ngIf="pipeline">
- <pipeline-preview [jspcanvas]="'assembly-preview'"
- [pipeline]="pipeline"
- (selectedElementEmitter)="selectElement($event)"
- style="margin-bottom:15px;"
- class="md-padding"
- *ngIf="pipelineAvailable"></pipeline-preview>
+ <sp-pipeline-preview
+ [jspcanvas]="'assembly-preview'"
+ [pipeline]="pipeline"
+ (selectedElementEmitter)="selectElement($event)"
+ style="margin-bottom: 15px"
+ class="md-padding"
+ *ngIf="pipelineAvailable"
+ ></sp-pipeline-preview>
<sp-basic-inner-panel panelTitle="Edit Configuration">
<div header fxLayoutAlign="end center" fxFlex="100" fxLayout="row">
- <button color="accent" mat-button mat-raised-button matTooltip="Save Pipeline"
- matTooltipPosition="above"
- style="display:flex;align-items:center;" class="settings-bar-icon-button"
- [disabled]="(!formValid || pipelineUpdating)"
- (click)="updatePipeline()">
+ <button
+ color="accent"
+ mat-button
+ mat-raised-button
+ matTooltip="Save Pipeline"
+ matTooltipPosition="above"
+ style="display: flex; align-items: center"
+ class="settings-bar-icon-button"
+ [disabled]="!formValid || pipelineUpdating"
+ (click)="updatePipeline()"
+ >
<mat-icon>save</mat-icon>
<span> Update pipeline</span>
</button>
</div>
<div fxFlex="100" fxLayout="column">
<div *ngIf="selectedElement">
- <div fxLayout="column" style="padding:5px;padding-left:10px;">
- <pipeline-elements-row [pipeline]="pipeline"
- [element]="selectedElement"></pipeline-elements-row>
+ <div
+ fxLayout="column"
+ style="padding: 5px; padding-left: 10px"
+ >
+ <sp-pipeline-elements-row
+ [pipeline]="pipeline"
+ [element]="selectedElement"
+ ></sp-pipeline-elements-row>
- <div fxFlex="100" fxLayout="column"
- *ngIf="isInvocable">
+ <div fxFlex="100" fxLayout="column" *ngIf="isInvocable">
<form [formGroup]="parentForm" fxFlex="100">
- <app-static-property *ngFor="let config of _selectedElement.staticProperties"
- [staticProperty]="config"
- [displayRecommended]="true"
- [staticProperties]="_selectedElement.staticProperties"
- [eventSchemas]="eventSchemas"
- [parentForm]="parentForm"
- [fieldName]="config.internalName">
+ <app-static-property
+ *ngFor="
+ let config of _selectedElement.staticProperties
+ "
+ [staticProperty]="config"
+ [displayRecommended]="true"
+ [staticProperties]="
+ _selectedElement.staticProperties
+ "
+ [eventSchemas]="eventSchemas"
+ [parentForm]="parentForm"
+ [fieldName]="config.internalName"
+ >
</app-static-property>
</form>
</div>
</div>
</div>
- <div fxLayout="column" fxLayoutAlign="center center" *ngIf="!selectedElement">
+ <div
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="!selectedElement"
+ >
(select an element in the preview window to modify it)
</div>
</div>
diff --git a/ui/src/app/pipeline-details/components/edit/quickedit.component.ts b/ui/src/app/pipeline-details/components/edit/quickedit.component.ts
index 6e07888fc..623e3a722 100644
--- a/ui/src/app/pipeline-details/components/edit/quickedit.component.ts
+++ b/ui/src/app/pipeline-details/components/edit/quickedit.component.ts
@@ -16,12 +16,18 @@
*
*/
-import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import {
- DataProcessorInvocation,
- DataSinkInvocation,
- EventSchema,
- PipelineService
+ AfterViewInit,
+ ChangeDetectorRef,
+ Component,
+ Input,
+ OnInit,
+} from '@angular/core';
+import {
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ EventSchema,
+ PipelineService,
} from '@streampipes/platform-services';
import { PipelineElementUnion } from '../../../editor/model/editor.model';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
@@ -32,120 +38,134 @@ import { SpBreadcrumbService } from '@streampipes/shared-ui';
import { SpPipelineRoutes } from '../../../pipelines/pipelines.routes';
@Component({
- selector: 'quick-edit',
- templateUrl: './quickedit.component.html',
+ selector: 'sp-quick-edit',
+ templateUrl: './quickedit.component.html',
})
-export class QuickEditComponent extends SpPipelineDetailsDirective implements OnInit, AfterViewInit {
-
- _selectedElement: PipelineElementUnion;
-
- eventSchemas: EventSchema[];
-
- parentForm: UntypedFormGroup;
- formValid: boolean;
- viewInitialized = false;
-
- isInvocable = false;
- isDataProcessor = false;
-
- pipelineUpdating = false;
-
- constructor(activatedRoute: ActivatedRoute,
- pipelineService: PipelineService,
- authService: AuthService,
- private fb: UntypedFormBuilder,
- private changeDetectorRef: ChangeDetectorRef,
- breadcrumbService: SpBreadcrumbService) {
- super(activatedRoute, pipelineService, authService, breadcrumbService);
- }
-
- ngOnInit() {
- super.onInit();
- this.parentForm = this.fb.group({});
-
- this.parentForm.statusChanges.subscribe((status) => {
- this.formValid = this.viewInitialized && this.parentForm.valid;
- });
- }
-
- ngAfterViewInit(): void {
- this.viewInitialized = true;
- this.formValid = this.viewInitialized && this.parentForm.valid;
- this.changeDetectorRef.detectChanges();
- }
-
- updatePipeline() {
- this.pipelineUpdating = true;
- this.updatePipelineElement();
- this.pipelineService.updatePipeline(this.pipeline).subscribe(data => {
- this.loadPipeline();
- this.pipelineUpdating = false;
- });
- }
-
- updatePipelineElement() {
- if (this._selectedElement instanceof DataProcessorInvocation) {
- this.updateDataProcessor();
- } else if (this._selectedElement instanceof DataSinkInvocation) {
- this.updateDataSink();
+export class QuickEditComponent
+ extends SpPipelineDetailsDirective
+ implements OnInit, AfterViewInit
+{
+ _selectedElement: PipelineElementUnion;
+
+ eventSchemas: EventSchema[];
+
+ parentForm: UntypedFormGroup;
+ formValid: boolean;
+ viewInitialized = false;
+
+ isInvocable = false;
+ isDataProcessor = false;
+
+ pipelineUpdating = false;
+
+ constructor(
+ activatedRoute: ActivatedRoute,
+ pipelineService: PipelineService,
+ authService: AuthService,
+ private fb: UntypedFormBuilder,
+ private changeDetectorRef: ChangeDetectorRef,
+ breadcrumbService: SpBreadcrumbService,
+ ) {
+ super(activatedRoute, pipelineService, authService, breadcrumbService);
}
- }
-
- updateDataProcessor() {
- const dataProcessors: DataProcessorInvocation[] = [];
- this.pipeline.sepas.forEach(p => {
- if (p.dom === this._selectedElement.dom) {
- dataProcessors.push(this._selectedElement as DataProcessorInvocation);
- } else {
- dataProcessors.push(p);
- }
- });
- this.pipeline.sepas = dataProcessors;
- }
-
- updateDataSink() {
- const dataSinks: DataSinkInvocation[] = [];
- this.pipeline.actions.forEach(p => {
- if (p.dom === this._selectedElement.dom) {
- dataSinks.push(this._selectedElement as DataSinkInvocation);
- } else {
- dataSinks.push(p);
- }
- });
- this.pipeline.actions = dataSinks;
- }
-
- get selectedElement() {
- return this._selectedElement;
- }
-
- @Input()
- set selectedElement(selectedElement: PipelineElementUnion) {
- if (this._selectedElement) {
- this.updatePipelineElement();
+
+ ngOnInit() {
+ super.onInit();
+ this.parentForm = this.fb.group({});
+
+ this.parentForm.statusChanges.subscribe(status => {
+ this.formValid = this.viewInitialized && this.parentForm.valid;
+ });
}
- this._selectedElement = selectedElement;
- this.eventSchemas = [];
- if (this._selectedElement instanceof DataProcessorInvocation || this._selectedElement instanceof DataSinkInvocation) {
- (this._selectedElement as any).inputStreams.forEach(is => {
- this.eventSchemas = this.eventSchemas.concat(is.eventSchema);
- });
+
+ ngAfterViewInit(): void {
+ this.viewInitialized = true;
+ this.formValid = this.viewInitialized && this.parentForm.valid;
+ this.changeDetectorRef.detectChanges();
+ }
+
+ updatePipeline() {
+ this.pipelineUpdating = true;
+ this.updatePipelineElement();
+ this.pipelineService.updatePipeline(this.pipeline).subscribe(data => {
+ this.loadPipeline();
+ this.pipelineUpdating = false;
+ });
+ }
+
+ updatePipelineElement() {
+ if (this._selectedElement instanceof DataProcessorInvocation) {
+ this.updateDataProcessor();
+ } else if (this._selectedElement instanceof DataSinkInvocation) {
+ this.updateDataSink();
+ }
}
- this.updateTypeInfo();
- }
-
- updateTypeInfo() {
- this.isDataProcessor = this._selectedElement instanceof DataProcessorInvocation;
- this.isInvocable = this._selectedElement instanceof DataProcessorInvocation ||
- this._selectedElement instanceof DataSinkInvocation;
- }
-
- selectElement(element: PipelineElementUnion) {
- this.selectedElement = element;
- }
-
- onPipelineAvailable(): void {
- this.breadcrumbService.updateBreadcrumb([SpPipelineRoutes.BASE, {label: this.pipeline.name}, {label: 'Quick Edit'} ]);
- }
-}
+ updateDataProcessor() {
+ const dataProcessors: DataProcessorInvocation[] = [];
+ this.pipeline.sepas.forEach(p => {
+ if (p.dom === this._selectedElement.dom) {
+ dataProcessors.push(
+ this._selectedElement as DataProcessorInvocation,
+ );
+ } else {
+ dataProcessors.push(p);
+ }
+ });
+ this.pipeline.sepas = dataProcessors;
+ }
+
+ updateDataSink() {
+ const dataSinks: DataSinkInvocation[] = [];
+ this.pipeline.actions.forEach(p => {
+ if (p.dom === this._selectedElement.dom) {
+ dataSinks.push(this._selectedElement as DataSinkInvocation);
+ } else {
+ dataSinks.push(p);
+ }
+ });
+ this.pipeline.actions = dataSinks;
+ }
+
+ get selectedElement() {
+ return this._selectedElement;
+ }
+
+ @Input()
+ set selectedElement(selectedElement: PipelineElementUnion) {
+ if (this._selectedElement) {
+ this.updatePipelineElement();
+ }
+ this._selectedElement = selectedElement;
+ this.eventSchemas = [];
+ if (
+ this._selectedElement instanceof DataProcessorInvocation ||
+ this._selectedElement instanceof DataSinkInvocation
+ ) {
+ (this._selectedElement as any).inputStreams.forEach(is => {
+ this.eventSchemas = this.eventSchemas.concat(is.eventSchema);
+ });
+ }
+ this.updateTypeInfo();
+ }
+
+ updateTypeInfo() {
+ this.isDataProcessor =
+ this._selectedElement instanceof DataProcessorInvocation;
+ this.isInvocable =
+ this._selectedElement instanceof DataProcessorInvocation ||
+ this._selectedElement instanceof DataSinkInvocation;
+ }
+
+ selectElement(element: PipelineElementUnion) {
+ this.selectedElement = element;
+ }
+
+ onPipelineAvailable(): void {
+ this.breadcrumbService.updateBreadcrumb([
+ SpPipelineRoutes.BASE,
+ { label: this.pipeline.name },
+ { label: 'Quick Edit' },
+ ]);
+ }
+}
diff --git a/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.html b/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.html
index 49f9875e6..e4cac6a02 100644
--- a/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.html
+++ b/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.html
@@ -18,14 +18,26 @@
<div fxFlex="100" fxLayout="column">
<div fxLayout="row" fxFlex="100">
- <div fxFlex="{{showDescription ? 30 : 100}}}" fxLayout="row" style="margin-bottom:10px;">
- <span class="draggable-icon {{elementType}}">
- <pipeline-element [preview]="true" [pipelineElement]="_element"></pipeline-element>
+ <div
+ fxFlex="{{ showDescription ? 30 : 100 }}}"
+ fxLayout="row"
+ style="margin-bottom: 10px"
+ >
+ <span class="draggable-icon {{ elementType }}">
+ <pipeline-element
+ [preview]="true"
+ [pipelineElement]="_element"
+ ></pipeline-element>
</span>
</div>
- <div fxFlex="70" fxLayout="column" fxLayoutAlign="center left" *ngIf="showDescription">
- <b>{{element.name}}</b>
- {{element.description}}
+ <div
+ fxFlex="70"
+ fxLayout="column"
+ fxLayoutAlign="center left"
+ *ngIf="showDescription"
+ >
+ <b>{{ element.name }}</b>
+ {{ element.description }}
</div>
</div>
</div>
diff --git a/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.ts b/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.ts
index 184c13717..016a0c211 100644
--- a/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.ts
+++ b/ui/src/app/pipeline-details/components/elements/pipeline-elements-row.component.ts
@@ -22,11 +22,10 @@ import { Pipeline } from '@streampipes/platform-services';
import { PipelineElementTypeUtils } from '../../../editor/utils/editor.utils';
@Component({
- selector: 'pipeline-elements-row',
+ selector: 'sp-pipeline-elements-row',
templateUrl: './pipeline-elements-row.component.html',
})
export class PipelineElementsRowComponent implements OnInit {
-
elementType: string;
@Input()
@@ -37,9 +36,7 @@ export class PipelineElementsRowComponent implements OnInit {
_element: PipelineElementUnion;
- constructor() {
-
- }
+ constructor() {}
ngOnInit() {
this.updateType();
@@ -56,7 +53,8 @@ export class PipelineElementsRowComponent implements OnInit {
}
updateType() {
- this.elementType = PipelineElementTypeUtils.toCssShortHand(PipelineElementTypeUtils.fromType(this._element));
+ this.elementType = PipelineElementTypeUtils.toCssShortHand(
+ PipelineElementTypeUtils.fromType(this._element),
+ );
}
-
}
diff --git a/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.html b/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.html
index c04626454..93dee2089 100644
--- a/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.html
+++ b/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.html
@@ -17,18 +17,23 @@
-->
<sp-basic-inner-panel panelTitle="Element Details">
-
- <div style="max-height: 800px;overflow:auto;">
+ <div style="max-height: 800px; overflow: auto">
<div *ngIf="selectedElement">
- <div fxLayout="column" style="padding:5px;padding-left:10px;">
- <pipeline-elements-row [pipeline]="pipeline" [element]="selectedElement"></pipeline-elements-row>
+ <div fxLayout="column" style="padding: 5px; padding-left: 10px">
+ <sp-pipeline-elements-row
+ [pipeline]="pipeline"
+ [element]="selectedElement"
+ ></sp-pipeline-elements-row>
<mat-divider></mat-divider>
- <div style="margin-bottom:15px;"></div>
-
+ <div style="margin-bottom: 15px"></div>
</div>
</div>
- <div fxLayout="column" fxLayoutAlign="center center" *ngIf="!selectedElement">
+ <div
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="!selectedElement"
+ >
(select an element in the preview window to see details)
</div>
</div>
diff --git a/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.ts b/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.ts
index b6f1b767a..e18cfdfb8 100644
--- a/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.ts
+++ b/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.ts
@@ -21,18 +21,15 @@ import { PipelineElementUnion } from '../../../editor/model/editor.model';
import { Pipeline } from '@streampipes/platform-services';
@Component({
- selector: 'pipeline-elements',
- templateUrl: './pipeline-elements.component.html',
+ selector: 'sp-pipeline-elements',
+ templateUrl: './pipeline-elements.component.html',
})
export class PipelineElementsComponent {
+ @Input()
+ pipeline: Pipeline;
- @Input()
- pipeline: Pipeline;
+ @Input()
+ selectedElement: PipelineElementUnion;
- @Input()
- selectedElement: PipelineElementUnion;
-
- constructor() {
-
- }
+ constructor() {}
}
diff --git a/ui/src/app/pipeline-details/components/model/pipeline-details.model.ts b/ui/src/app/pipeline-details/components/model/pipeline-details.model.ts
index 6704e36a0..98cda1dd3 100644
--- a/ui/src/app/pipeline-details/components/model/pipeline-details.model.ts
+++ b/ui/src/app/pipeline-details/components/model/pipeline-details.model.ts
@@ -17,11 +17,11 @@
*/
export interface HistoricalMonitoringData {
- name: string;
- value: number;
+ name: string;
+ value: number;
}
export interface ObservedMetricsStream {
- pipelineElementName: string;
- identifier: string;
+ pipelineElementName: string;
+ identifier: string;
}
diff --git a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.html b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.html
index a862bffc7..686bb83c9 100644
--- a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.html
+++ b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.html
@@ -16,63 +16,99 @@
~
-->
-<sp-basic-nav-tabs [spNavigationItems]="tabs"
- [activeLink]="'monitoring'"
- [showBackLink]="true"
- [backLinkTarget]="['pipelines']">
-
- <div nav fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <button mat-button
+<sp-basic-nav-tabs
+ [spNavigationItems]="tabs"
+ [activeLink]="'monitoring'"
+ [showBackLink]="true"
+ [backLinkTarget]="['pipelines']"
+>
+ <div nav fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+ <button
+ mat-button
mat-icon-button
color="accent"
class="mr-10"
matTooltip="Refresh"
- (click)="triggerMetricsUpdate()">
- <i class="material-icons">refresh</i>
- </button>
- <mat-slide-toggle [(ngModel)]="autoRefresh" color="accent">Auto refresh</mat-slide-toggle>
- </div>
- <div fxLayout="column" class="page-container-padding" *ngIf="pipeline">
- <div fxFlex="100" fxLayout="column" class="page-container-padding-inner">
- <div fxFlex="100" *ngIf="!pipeline.running" fxLayout="column" fxLayoutAlign="center center">
- <div class="error-message">(monitoring info is only available for running pipelines)</div>
- <button mat-button mat-raised-button color="accent"
- matTooltip="Start Pipeline" matTooltipPosition="above"
- *ngIf="hasPipelineWritePrivileges"
- (click)="startPipeline()">
- <mat-icon>play_arrow</mat-icon>
- <span> Start pipeline</span>
+ (click)="triggerMetricsUpdate()"
+ >
+ <i class="material-icons">refresh</i>
</button>
- </div>
- <div fxFlex="100" *ngIf="pipeline.running && pipelineMonitoringInfoAvailable">
- <pipeline-preview [jspcanvas]="'assembly-preview'"
- [pipeline]="pipeline"
- (selectedElementEmitter)="selectElement($event)"
- style="margin-bottom:15px;"
- class="md-padding"
- *ngIf="pipelineAvailable"></pipeline-preview>
- <div *ngFor="let pipelineElement of monitoredElements" fxLayout="column" class="mb-10 mt-10">
-
- <sp-basic-inner-panel [panelTitle]="pipelineElement.name" [id]="pipelineElement.elementId">
- <div fxFlex="100" fxLayout="row">
- <div fxFlex="20" fxLayoutAlign="start start">
- <pipeline-elements-row style="width: 100%;"
- [showDescription]="false"
- [pipeline]="pipeline"
- [element]="pipelineElement"></pipeline-elements-row>
- </div>
- <div fxFlex="80" fxLayoutAlign="start center">
- <pipeline-element-statistics
- [allElements]="allElements"
- [pipelineElement]="pipelineElement"
- [metricsInfo]="metricsInfo[pipelineElement.elementId]">
- </pipeline-element-statistics>
- </div>
+ <mat-slide-toggle [(ngModel)]="autoRefresh" color="accent"
+ >Auto refresh</mat-slide-toggle
+ >
+ </div>
+ <div fxLayout="column" class="page-container-padding" *ngIf="pipeline">
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ class="page-container-padding-inner"
+ >
+ <div
+ fxFlex="100"
+ *ngIf="!pipeline.running"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ >
+ <div class="error-message">
+ (monitoring info is only available for running pipelines)
+ </div>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ matTooltip="Start Pipeline"
+ matTooltipPosition="above"
+ *ngIf="hasPipelineWritePrivileges"
+ (click)="startPipeline()"
+ >
+ <mat-icon>play_arrow</mat-icon>
+ <span> Start pipeline</span>
+ </button>
+ </div>
+ <div
+ fxFlex="100"
+ *ngIf="pipeline.running && pipelineMonitoringInfoAvailable"
+ >
+ <sp-pipeline-preview
+ [jspcanvas]="'assembly-preview'"
+ [pipeline]="pipeline"
+ (selectedElementEmitter)="selectElement($event)"
+ style="margin-bottom: 15px"
+ class="md-padding"
+ *ngIf="pipelineAvailable"
+ ></sp-pipeline-preview>
+ <div
+ *ngFor="let pipelineElement of monitoredElements"
+ fxLayout="column"
+ class="mb-10 mt-10"
+ >
+ <sp-basic-inner-panel
+ [panelTitle]="pipelineElement.name"
+ [id]="pipelineElement.elementId"
+ >
+ <div fxFlex="100" fxLayout="row">
+ <div fxFlex="20" fxLayoutAlign="start start">
+ <sp-pipeline-elements-row
+ style="width: 100%"
+ [showDescription]="false"
+ [pipeline]="pipeline"
+ [element]="pipelineElement"
+ ></sp-pipeline-elements-row>
+ </div>
+ <div fxFlex="80" fxLayoutAlign="start center">
+ <sp-pipeline-element-statistics
+ [allElements]="allElements"
+ [pipelineElement]="pipelineElement"
+ [metricsInfo]="
+ metricsInfo[pipelineElement.elementId]
+ "
+ >
+ </sp-pipeline-element-statistics>
+ </div>
+ </div>
+ </sp-basic-inner-panel>
+ </div>
</div>
-
- </sp-basic-inner-panel>
</div>
- </div>
</div>
- </div>
</sp-basic-nav-tabs>
diff --git a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.scss b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.scss
index 3faa74b0c..208fbef4e 100644
--- a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.scss
+++ b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.scss
@@ -17,32 +17,32 @@
*/
.add-options {
- background-color: var(--color-bg-1);
- border-bottom: 1px solid var(--color-bg-3);
- padding-top:10px;
- padding-bottom:10px;
+ background-color: var(--color-bg-1);
+ border-bottom: 1px solid var(--color-bg-3);
+ padding-top: 10px;
+ padding-bottom: 10px;
}
.fixed-height {
- width:100%;
- height: 50px;
+ width: 100%;
+ height: 50px;
}
.page-container-padding-inner {
- margin: 10px;
+ margin: 10px;
}
.pipeline-element-statistics-panel {
- padding: 10px;
+ padding: 10px;
}
.mb-10 {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.error-message {
- font-weight: bold;
- margin-top:15px;
- margin-bottom: 15px;
- font-size: 12pt;
+ font-weight: bold;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ font-size: 12pt;
}
diff --git a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts
index 1097aa79e..0978e2810 100644
--- a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts
+++ b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts
@@ -18,14 +18,14 @@
import { Component, EventEmitter, OnDestroy, OnInit } from '@angular/core';
import {
- DataProcessorInvocation,
- DataSinkInvocation,
- PipelineMonitoringInfo,
- PipelineMonitoringService,
- PipelineService,
- SpDataSet,
- SpDataStream,
- SpMetricsEntry
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ PipelineMonitoringInfo,
+ PipelineMonitoringService,
+ PipelineService,
+ SpDataSet,
+ SpDataStream,
+ SpMetricsEntry,
} from '@streampipes/platform-services';
import { PipelineOperationsService } from '../../../pipelines/services/pipeline-operations.service';
import { AuthService } from '../../../services/auth.service';
@@ -36,91 +36,111 @@ import { SpBreadcrumbService } from '@streampipes/shared-ui';
import { SpPipelineRoutes } from '../../../pipelines/pipelines.routes';
@Component({
- selector: 'pipeline-monitoring',
- templateUrl: './pipeline-monitoring.component.html',
- styleUrls: ['./pipeline-monitoring.component.scss']
+ selector: 'sp-pipeline-monitoring',
+ templateUrl: './pipeline-monitoring.component.html',
+ styleUrls: ['./pipeline-monitoring.component.scss'],
})
-export class PipelineMonitoringComponent extends SpPipelineDetailsDirective implements OnInit, OnDestroy {
+export class PipelineMonitoringComponent
+ extends SpPipelineDetailsDirective
+ implements OnInit, OnDestroy
+{
+ pipelineMonitoringInfo: PipelineMonitoringInfo;
+ pipelineMonitoringInfoAvailable = false;
+
+ allElements: (
+ | SpDataSet
+ | SpDataStream
+ | DataProcessorInvocation
+ | DataSinkInvocation
+ )[] = [];
+ monitoredElements: (DataProcessorInvocation | DataSinkInvocation)[] = [];
+
+ autoRefresh = true;
+
+ metricsInfo: Record<string, SpMetricsEntry>;
+
+ reloadPipelinesEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+ reloadSubscription: Subscription;
+
+ constructor(
+ activatedRoute: ActivatedRoute,
+ pipelineService: PipelineService,
+ authService: AuthService,
+ private pipelineMonitoringService: PipelineMonitoringService,
+ private pipelineOperationsService: PipelineOperationsService,
+ breadcrumbService: SpBreadcrumbService,
+ ) {
+ super(activatedRoute, pipelineService, authService, breadcrumbService);
+ }
- pipelineMonitoringInfo: PipelineMonitoringInfo;
- pipelineMonitoringInfoAvailable = false;
+ ngOnInit(): void {
+ super.onInit();
+ this.reloadSubscription = this.reloadPipelinesEmitter.subscribe(
+ reload => this.loadPipeline(),
+ );
+ }
- allElements: (SpDataSet | SpDataStream | DataProcessorInvocation | DataSinkInvocation)[] = [];
- monitoredElements: (DataProcessorInvocation | DataSinkInvocation)[] = [];
+ checkMonitoringInfoCollection() {
+ if (this.pipeline.running) {
+ this.refreshMonitoringInfo();
+ }
+ }
- autoRefresh = true;
+ collectAllElements() {
+ this.monitoredElements = this.monitoredElements
+ .concat(this.pipeline.sepas)
+ .concat(this.pipeline.actions);
- metricsInfo: Record<string, SpMetricsEntry>;
+ this.allElements = this.allElements
+ .concat(this.monitoredElements)
+ .concat(this.pipeline.streams);
+ }
- reloadPipelinesEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
- reloadSubscription: Subscription;
+ refreshMonitoringInfo(addTimeout = true) {
+ this.pipelineMonitoringService
+ .getMetricsInfoForPipeline(this.pipeline._id)
+ .subscribe(monitoringInfo => {
+ this.metricsInfo = monitoringInfo;
+ this.pipelineMonitoringInfoAvailable = true;
+ if (this.autoRefresh && addTimeout) {
+ setTimeout(() => {
+ this.refreshMonitoringInfo();
+ }, 5000);
+ }
+ });
+ }
- constructor(activatedRoute: ActivatedRoute,
- pipelineService: PipelineService,
- authService: AuthService,
- private pipelineMonitoringService: PipelineMonitoringService,
- private pipelineOperationsService: PipelineOperationsService,
- breadcrumbService: SpBreadcrumbService) {
- super(activatedRoute, pipelineService, authService, breadcrumbService);
- }
+ selectElement(pipelineElement) {
+ document.getElementById(pipelineElement.elementId).scrollIntoView();
+ }
- ngOnInit(): void {
- super.onInit();
- this.reloadSubscription = this.reloadPipelinesEmitter.subscribe(reload => this.loadPipeline());
- }
+ ngOnDestroy(): void {
+ this.autoRefresh = false;
+ this.reloadSubscription.unsubscribe();
+ }
+
+ startPipeline() {
+ this.pipelineOperationsService.startPipeline(
+ this.pipeline._id,
+ this.reloadPipelinesEmitter,
+ );
+ }
+
+ onPipelineAvailable(): void {
+ this.breadcrumbService.updateBreadcrumb([
+ SpPipelineRoutes.BASE,
+ { label: this.pipeline.name },
+ { label: 'Metrics' },
+ ]);
+ this.collectAllElements();
+ this.refreshMonitoringInfo();
+ }
- checkMonitoringInfoCollection() {
- if (this.pipeline.running) {
- this.refreshMonitoringInfo();
+ triggerMetricsUpdate(): void {
+ this.pipelineMonitoringService
+ .triggerMonitoringUpdate()
+ .subscribe(res => {
+ this.refreshMonitoringInfo(false);
+ });
}
- }
-
- collectAllElements() {
- this.monitoredElements = this.monitoredElements
- .concat(this.pipeline.sepas)
- .concat(this.pipeline.actions);
-
- this.allElements = this.allElements
- .concat(this.monitoredElements)
- .concat(this.pipeline.streams);
- }
-
- refreshMonitoringInfo(addTimeout = true) {
- this.pipelineMonitoringService
- .getMetricsInfoForPipeline(this.pipeline._id)
- .subscribe(monitoringInfo => {
- this.metricsInfo = monitoringInfo;
- this.pipelineMonitoringInfoAvailable = true;
- if (this.autoRefresh && addTimeout) {
- setTimeout(() => {
- this.refreshMonitoringInfo();
- }, 5000);
- }
- });
- }
-
- selectElement(pipelineElement) {
- document.getElementById(pipelineElement.elementId).scrollIntoView();
- }
-
- ngOnDestroy(): void {
- this.autoRefresh = false;
- this.reloadSubscription.unsubscribe();
- }
-
- startPipeline() {
- this.pipelineOperationsService.startPipeline(this.pipeline._id, this.reloadPipelinesEmitter);
- }
-
- onPipelineAvailable(): void {
- this.breadcrumbService.updateBreadcrumb([SpPipelineRoutes.BASE, {label: this.pipeline.name}, {label: 'Metrics'} ]);
- this.collectAllElements();
- this.refreshMonitoringInfo();
- }
-
- triggerMetricsUpdate(): void {
- this.pipelineMonitoringService.triggerMonitoringUpdate().subscribe(res => {
- this.refreshMonitoringInfo(false);
- });
- }
}
diff --git a/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.html b/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.html
index ee5fad459..99060176c 100644
--- a/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.html
+++ b/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.html
@@ -16,25 +16,58 @@
~
-->
-
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start start">
- <div *ngIf="observedInputStreams.length > 0">
- <div [fxFlex]="70 / observedInputStreams.length" *ngFor="let observedInputStream of observedInputStreams">
- <div fxLayout="column" class="mb-10">
- <sp-status-widget fxFlex="100" [label]="'consumed from ' + observedInputStream.pipelineElementName"
- [color]="(consumedMessagesFirstInputStream == notAvailable) ? deactivatedCardColor : cardColor"
- [textColor]="(consumedMessagesFirstInputStream == notAvailable) ? deactivatedTextColor : textColor"
- [statusValue]="metricsInfo.messagesIn[observedInputStream.identifier] ? metricsInfo.messagesIn[observedInputStream.identifier].counter : '0'">
- </sp-status-widget>
- </div>
+ <div *ngIf="observedInputStreams.length > 0">
+ <div
+ [fxFlex]="70 / observedInputStreams.length"
+ *ngFor="let observedInputStream of observedInputStreams"
+ >
+ <div fxLayout="column" class="mb-10">
+ <sp-status-widget
+ fxFlex="100"
+ [label]="
+ 'consumed from ' +
+ observedInputStream.pipelineElementName
+ "
+ [color]="
+ consumedMessagesFirstInputStream === notAvailable
+ ? deactivatedCardColor
+ : cardColor
+ "
+ [textColor]="
+ consumedMessagesFirstInputStream === notAvailable
+ ? deactivatedTextColor
+ : textColor
+ "
+ [statusValue]="
+ metricsInfo.messagesIn[observedInputStream.identifier]
+ ? metricsInfo.messagesIn[
+ observedInputStream.identifier
+ ].counter
+ : '0'
+ "
+ >
+ </sp-status-widget>
+ </div>
+ </div>
</div>
- </div>
- <div fxFlex="30">
- <div fxLayout="column" class="mb-10" *ngIf="!dataSink">
- <sp-status-widget fxFlex="100" [label]="'produced messages'"
- [color]="producedMessages === notAvailable ? deactivatedCardColor : cardColor"
- [textColor]="producedMessages === notAvailable ? deactivatedTextColor : textColor"
- [statusValue]="metricsInfo.messagesOut.counter"></sp-status-widget>
+ <div fxFlex="30">
+ <div fxLayout="column" class="mb-10" *ngIf="!dataSink">
+ <sp-status-widget
+ fxFlex="100"
+ [label]="'produced messages'"
+ [color]="
+ producedMessages === notAvailable
+ ? deactivatedCardColor
+ : cardColor
+ "
+ [textColor]="
+ producedMessages === notAvailable
+ ? deactivatedTextColor
+ : textColor
+ "
+ [statusValue]="metricsInfo.messagesOut.counter"
+ ></sp-status-widget>
+ </div>
</div>
- </div>
</div>
diff --git a/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.scss b/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.scss
index 27392f1ca..f399ceb4c 100644
--- a/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.scss
+++ b/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.scss
@@ -17,9 +17,9 @@
*/
.mb-10 {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.mt--10 {
- margin-top: -10px;
-}
\ No newline at end of file
+ margin-top: -10px;
+}
diff --git a/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.ts b/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.ts
index 066b2e9f3..89a54c681 100644
--- a/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.ts
+++ b/ui/src/app/pipeline-details/components/monitoring/statistics/pipeline-element-statistics.component.ts
@@ -19,105 +19,130 @@
import { Component, Input, OnInit } from '@angular/core';
import {
- DataProcessorInvocation,
- DataSinkInvocation,
- SpDataSet,
- SpDataStream,
- SpMetricsEntry
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ SpDataSet,
+ SpDataStream,
+ SpMetricsEntry,
} from '@streampipes/platform-services';
-import { HistoricalMonitoringData, ObservedMetricsStream } from '../../model/pipeline-details.model';
+import {
+ HistoricalMonitoringData,
+ ObservedMetricsStream,
+} from '../../model/pipeline-details.model';
@Component({
- selector: 'pipeline-element-statistics',
- templateUrl: './pipeline-element-statistics.component.html',
- styleUrls: ['./pipeline-element-statistics.component.scss']
+ selector: 'sp-pipeline-element-statistics',
+ templateUrl: './pipeline-element-statistics.component.html',
+ styleUrls: ['./pipeline-element-statistics.component.scss'],
})
export class PipelineElementStatisticsComponent implements OnInit {
-
- @Input()
- allElements: (SpDataSet | SpDataStream | DataProcessorInvocation | DataSinkInvocation)[];
-
- @Input()
- pipelineElement: (SpDataSet | SpDataStream | DataProcessorInvocation | DataSinkInvocation);
-
- _metricsInfo: SpMetricsEntry;
-
- currentPipelineElement: SpDataSet | SpDataStream | DataProcessorInvocation | DataSinkInvocation;
- consumedMessagesFirstInputStream = '';
- consumedMessagesSecondInputStream = '';
-
- producedMessages: string | number = '';
-
- cardColor = 'rgb(27, 20, 100)';
- deactivatedCardColor = 'rgb(241,241,241)';
-
- textColor = 'rgb(208,208,208)';
- deactivatedTextColor = 'rgb(205,205,205)';
-
- bandColor = 'rgb(27, 20, 100)';
- deactivatedBandColor = 'rgb(241,241,241)';
- okBandColor = 'rgb(11,186,0)';
- warningBandColor = 'rgb(253,144,0)';
-
- chartBackgroundColor = 'rgb(27, 20, 100)';
- chartTextColor = 'rgb(208,208,208)';
-
- consumedMessagesFirstStreamBandColor: string;
- consumedMessagesSecondStreamBandColor: string;
-
- notAvailable = '-';
-
- historicFirstConsumedInputValues: HistoricalMonitoringData[] = [];
- historicSecondConsumedInputValues: HistoricalMonitoringData[] = [];
- historicProducedOutputValues: HistoricalMonitoringData[] = [];
-
- consumedMessagesFirstStreamLastValue = -1;
- consumedMessagesSecondStreamLastValue = -1;
- producedMessageOutputLastValue = -1;
-
- consumedMessagesFirstStreamAvailable = false;
- consumedMessagesSecondStreamAvailable = false;
- producedMessagesAvailable = false;
-
- observedInputStreams: ObservedMetricsStream[] = [];
- dataSink = false;
-
- ngOnInit(): void {
- this.dataSink = this.pipelineElement instanceof DataSinkInvocation;
- if (this.pipelineElement instanceof DataSinkInvocation || this.pipelineElement instanceof DataProcessorInvocation) {
- this.pipelineElement.inputStreams.forEach(is => {
- const identifier = is.eventGrounding.transportProtocols[0].topicDefinition.actualTopicName;
- this.observedInputStreams.push({
- pipelineElementName: this.extractName(identifier),
- identifier
- });
- });
- }
- }
-
- extractName(outputTopic: string): string {
- return this.allElements
- .filter(el => ! (el instanceof DataSinkInvocation))
- .find(el => {
- if (el instanceof DataProcessorInvocation) {
- return el.outputStream.eventGrounding.transportProtocols[0].topicDefinition.actualTopicName === outputTopic;
- } else {
- return (el as SpDataStream).eventGrounding.transportProtocols[0].topicDefinition.actualTopicName === outputTopic;
+ @Input()
+ allElements: (
+ | SpDataSet
+ | SpDataStream
+ | DataProcessorInvocation
+ | DataSinkInvocation
+ )[];
+
+ @Input()
+ pipelineElement:
+ | SpDataSet
+ | SpDataStream
+ | DataProcessorInvocation
+ | DataSinkInvocation;
+
+ _metricsInfo: SpMetricsEntry;
+
+ currentPipelineElement:
+ | SpDataSet
+ | SpDataStream
+ | DataProcessorInvocation
+ | DataSinkInvocation;
+ consumedMessagesFirstInputStream = '';
+ consumedMessagesSecondInputStream = '';
+
+ producedMessages: string | number = '';
+
+ cardColor = 'rgb(27, 20, 100)';
+ deactivatedCardColor = 'rgb(241,241,241)';
+
+ textColor = 'rgb(208,208,208)';
+ deactivatedTextColor = 'rgb(205,205,205)';
+
+ bandColor = 'rgb(27, 20, 100)';
+ deactivatedBandColor = 'rgb(241,241,241)';
+ okBandColor = 'rgb(11,186,0)';
+ warningBandColor = 'rgb(253,144,0)';
+
+ chartBackgroundColor = 'rgb(27, 20, 100)';
+ chartTextColor = 'rgb(208,208,208)';
+
+ consumedMessagesFirstStreamBandColor: string;
+ consumedMessagesSecondStreamBandColor: string;
+
+ notAvailable = '-';
+
+ historicFirstConsumedInputValues: HistoricalMonitoringData[] = [];
+ historicSecondConsumedInputValues: HistoricalMonitoringData[] = [];
+ historicProducedOutputValues: HistoricalMonitoringData[] = [];
+
+ consumedMessagesFirstStreamLastValue = -1;
+ consumedMessagesSecondStreamLastValue = -1;
+ producedMessageOutputLastValue = -1;
+
+ consumedMessagesFirstStreamAvailable = false;
+ consumedMessagesSecondStreamAvailable = false;
+ producedMessagesAvailable = false;
+
+ observedInputStreams: ObservedMetricsStream[] = [];
+ dataSink = false;
+
+ ngOnInit(): void {
+ this.dataSink = this.pipelineElement instanceof DataSinkInvocation;
+ if (
+ this.pipelineElement instanceof DataSinkInvocation ||
+ this.pipelineElement instanceof DataProcessorInvocation
+ ) {
+ this.pipelineElement.inputStreams.forEach(is => {
+ const identifier =
+ is.eventGrounding.transportProtocols[0].topicDefinition
+ .actualTopicName;
+ this.observedInputStreams.push({
+ pipelineElementName: this.extractName(identifier),
+ identifier,
+ });
+ });
}
- }).name;
- }
+ }
- updateMonitoringInfo() {
+ extractName(outputTopic: string): string {
+ return this.allElements
+ .filter(el => !(el instanceof DataSinkInvocation))
+ .find(el => {
+ if (el instanceof DataProcessorInvocation) {
+ return (
+ el.outputStream.eventGrounding.transportProtocols[0]
+ .topicDefinition.actualTopicName === outputTopic
+ );
+ } else {
+ return (
+ (el as SpDataStream).eventGrounding
+ .transportProtocols[0].topicDefinition
+ .actualTopicName === outputTopic
+ );
+ }
+ }).name;
+ }
- }
+ updateMonitoringInfo() {}
- get metricsInfo() {
- return this._metricsInfo;
- }
+ get metricsInfo() {
+ return this._metricsInfo;
+ }
- @Input()
- set metricsInfo(metricsInfo: SpMetricsEntry) {
- this._metricsInfo = metricsInfo;
- this.updateMonitoringInfo();
- }
+ @Input()
+ set metricsInfo(metricsInfo: SpMetricsEntry) {
+ this._metricsInfo = metricsInfo;
+ this.updateMonitoringInfo();
+ }
}
diff --git a/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.html b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.html
index 3cb206b50..da3da6a3d 100644
--- a/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.html
+++ b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.html
@@ -16,17 +16,28 @@
~
-->
-<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" [ngStyle]="{'background-color': backgroundColor, 'width':'265px', 'max-width': '265px', 'margin-left': '8px'}">
+<div
+ fxFlex="100"
+ fxLayoutAlign="center center"
+ fxLayout="column"
+ [ngStyle]="{
+ 'background-color': backgroundColor,
+ 'width': '265px',
+ 'max-width': '265px',
+ 'margin-left': '8px'
+ }"
+>
<ngx-charts-bar-vertical
- [view]="[265,150]"
- [results]="data"
- [scheme]="colorScheme"
- [gradient]="false"
- [xAxis]="false"
- [yAxis]="true"
- [legend]="false"
- [showXAxisLabel]="false"
- [showYAxisLabel]="false"
- [ngStyle]="{'fill': backgroundColor}">
+ [view]="[265, 150]"
+ [results]="data"
+ [scheme]="colorScheme"
+ [gradient]="false"
+ [xAxis]="false"
+ [yAxis]="true"
+ [legend]="false"
+ [showXAxisLabel]="false"
+ [showYAxisLabel]="false"
+ [ngStyle]="{ fill: backgroundColor }"
+ >
</ngx-charts-bar-vertical>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.scss b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.scss
index 41ecef044..13cbc4aac 100644
--- a/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.scss
+++ b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.scss
@@ -14,4 +14,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*
- */
\ No newline at end of file
+ */
diff --git a/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.ts b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.ts
index f9ef2adf2..81ea542d3 100644
--- a/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.ts
+++ b/ui/src/app/pipeline-details/components/monitoring/widget/barchart/barchart-widget.component.ts
@@ -19,34 +19,33 @@
import { Component, Input, OnInit } from '@angular/core';
@Component({
- selector: 'sp-barchart-widget',
- templateUrl: './barchart-widget.component.html',
- styleUrls: ['./barchart-widget.component.scss']
+ selector: 'sp-barchart-widget',
+ templateUrl: './barchart-widget.component.html',
+ styleUrls: ['./barchart-widget.component.scss'],
})
export class BarchartWidgetComponent implements OnInit {
+ _data = [];
- _data = [];
+ @Input()
+ backgroundColor = '#cccccc';
- @Input()
- backgroundColor = '#cccccc';
+ @Input()
+ textColor = '#1b1464';
- @Input()
- textColor = '#1b1464';
+ colorScheme = {
+ domain: ['#1b1464'],
+ };
- colorScheme = {
- domain: ['#1b1464']
- };
+ ngOnInit(): void {
+ this.colorScheme.domain = [this.textColor];
+ }
- ngOnInit(): void {
- this.colorScheme.domain = [this.textColor];
- }
+ @Input()
+ set data(data) {
+ this._data = data;
+ }
- @Input()
- set data(data) {
- this._data = data;
- }
-
- get data() {
- return this._data;
- }
+ get data() {
+ return this._data;
+ }
}
diff --git a/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.html b/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.html
index eca67efd2..3fc70d8c7 100644
--- a/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.html
+++ b/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.html
@@ -16,28 +16,47 @@
~
-->
-<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'overview'" [showBackLink]="true" [backLinkTarget]="['pipelines']">
+<sp-basic-nav-tabs
+ [spNavigationItems]="tabs"
+ [activeLink]="'overview'"
+ [showBackLink]="true"
+ [backLinkTarget]="['pipelines']"
+>
<div fxLayout="column" class="page-container-padding">
<div fxFlex="100" fxLayout="column">
- <pipeline-preview [jspcanvas]="'assembly-preview'"
- [pipeline]="pipeline"
- (selectedElementEmitter)="selectElement($event)"
- style="margin-bottom:15px;"
- class="md-padding"
- *ngIf="pipelineAvailable"></pipeline-preview>
- <div fxFlex fxLayout="row" fxLayoutAlign="start top" *ngIf="pipelineAvailable">
+ <sp-pipeline-preview
+ [jspcanvas]="'assembly-preview'"
+ [pipeline]="pipeline"
+ (selectedElementEmitter)="selectElement($event)"
+ style="margin-bottom: 15px"
+ class="md-padding"
+ *ngIf="pipelineAvailable"
+ ></sp-pipeline-preview>
+ <div
+ fxFlex
+ fxLayout="row"
+ fxLayoutAlign="start top"
+ *ngIf="pipelineAvailable"
+ >
<div fxFlex="60" class="md-padding">
<div fxFlex fxLayout="column">
- <pipeline-elements [pipeline]="pipeline"
- [selectedElement]="selectedElement"></pipeline-elements>
+ <sp-pipeline-elements
+ [pipeline]="pipeline"
+ [selectedElement]="selectedElement"
+ ></sp-pipeline-elements>
</div>
</div>
<div fxFlex="40" class="md-padding">
<div fxFlex fxLayout="column">
- <pipeline-actions (reloadPipelineEmitter)="loadPipeline()" [pipeline]="pipeline"
- style="margin-bottom:15px;"
- *ngIf="hasPipelineWritePrivileges"></pipeline-actions>
- <pipeline-status [pipeline]="pipeline"></pipeline-status>
+ <sp-pipeline-actions
+ (reloadPipelineEmitter)="loadPipeline()"
+ [pipeline]="pipeline"
+ style="margin-bottom: 15px"
+ *ngIf="hasPipelineWritePrivileges"
+ ></sp-pipeline-actions>
+ <sp-pipeline-status
+ [pipeline]="pipeline"
+ ></sp-pipeline-status>
</div>
</div>
</div>
diff --git a/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.scss b/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.scss
index 1100ab49e..02ee1e39c 100644
--- a/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.scss
+++ b/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.scss
@@ -17,5 +17,5 @@
*/
.md-padding {
- padding: 10px;
+ padding: 10px;
}
diff --git a/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.ts b/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.ts
index edc0d6a33..299968d9c 100644
--- a/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.ts
+++ b/ui/src/app/pipeline-details/components/overview/pipeline-details-overview.component.ts
@@ -26,33 +26,39 @@ import { SpBreadcrumbService } from '@streampipes/shared-ui';
import { SpPipelineRoutes } from '../../../pipelines/pipelines.routes';
@Component({
- selector: 'sp-pipeline-details-overview-component',
- templateUrl: './pipeline-details-overview.component.html',
- styleUrls: ['./pipeline-details-overview.component.scss']
+ selector: 'sp-pipeline-details-overview-component',
+ templateUrl: './pipeline-details-overview.component.html',
+ styleUrls: ['./pipeline-details-overview.component.scss'],
})
-export class SpPipelineDetailsOverviewComponent extends SpPipelineDetailsDirective implements OnInit {
+export class SpPipelineDetailsOverviewComponent
+ extends SpPipelineDetailsDirective
+ implements OnInit
+{
+ tabs = [];
+ selectedElement: PipelineElementUnion;
- tabs = [];
- selectedElement: PipelineElementUnion;
+ constructor(
+ activatedRoute: ActivatedRoute,
+ pipelineService: PipelineService,
+ authService: AuthService,
+ breadcrumbService: SpBreadcrumbService,
+ ) {
+ super(activatedRoute, pipelineService, authService, breadcrumbService);
+ }
- constructor(activatedRoute: ActivatedRoute,
- pipelineService: PipelineService,
- authService: AuthService,
- breadcrumbService: SpBreadcrumbService) {
- super(activatedRoute, pipelineService, authService, breadcrumbService);
- }
-
- ngOnInit(): void {
- super.onInit();
- }
-
- selectElement(element: PipelineElementUnion) {
- this.selectedElement = element;
- }
-
- onPipelineAvailable(): void {
- this.breadcrumbService.updateBreadcrumb([SpPipelineRoutes.BASE, {label: this.pipeline.name}, {label: 'Overview'} ]);
- }
+ ngOnInit(): void {
+ super.onInit();
+ }
+ selectElement(element: PipelineElementUnion) {
+ this.selectedElement = element;
+ }
+ onPipelineAvailable(): void {
+ this.breadcrumbService.updateBreadcrumb([
+ SpPipelineRoutes.BASE,
+ { label: this.pipeline.name },
+ { label: 'Overview' },
+ ]);
+ }
}
diff --git a/ui/src/app/pipeline-details/components/pipeline-logs/pipeline-logs.component.html b/ui/src/app/pipeline-details/components/pipeline-logs/pipeline-logs.component.html
index 475ab4714..8865a513f 100644
--- a/ui/src/app/pipeline-details/components/pipeline-logs/pipeline-logs.component.html
+++ b/ui/src/app/pipeline-details/components/pipeline-logs/pipeline-logs.component.html
@@ -16,47 +16,71 @@
~
-->
-<sp-basic-nav-tabs [spNavigationItems]="tabs"
- [activeLink]="'logs'"
- [showBackLink]="true"
- [backLinkTarget]="['pipelines']">
-
- <div nav fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <button mat-button
+<sp-basic-nav-tabs
+ [spNavigationItems]="tabs"
+ [activeLink]="'logs'"
+ [showBackLink]="true"
+ [backLinkTarget]="['pipelines']"
+>
+ <div nav fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
+ <button
+ mat-button
mat-icon-button
color="accent"
class="mr-10"
matTooltip="Refresh"
- (click)="triggerLogUpdate()">
- <i class="material-icons">refresh</i>
- </button>
- </div>
- <div fxLayout="column" class="page-container-padding" *ngIf="pipeline">
- <div fxFlex="100" fxLayout="column" class="page-container-padding-inner">
- <pipeline-preview [jspcanvas]="'assembly-preview'"
- [pipeline]="pipeline"
- (selectedElementEmitter)="selectElement($event)"
- style="margin-bottom:15px;"
- class="md-padding"
- *ngIf="pipelineAvailable"></pipeline-preview>
+ (click)="triggerLogUpdate()"
+ >
+ <i class="material-icons">refresh</i>
+ </button>
+ </div>
+ <div fxLayout="column" class="page-container-padding" *ngIf="pipeline">
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ class="page-container-padding-inner"
+ >
+ <sp-pipeline-preview
+ [jspcanvas]="'assembly-preview'"
+ [pipeline]="pipeline"
+ (selectedElementEmitter)="selectElement($event)"
+ style="margin-bottom: 15px"
+ class="md-padding"
+ *ngIf="pipelineAvailable"
+ ></sp-pipeline-preview>
- <sp-basic-inner-panel panelTitle="Logs">
- <div fxFlex="100" fxLayout="column" *ngIf="selectedElementId !== undefined">
- <div *ngIf="logInfos[selectedElementId]">
- <div *ngFor="let logEntry of logInfos[selectedElementId]">
- <sp-exception-message [message]="logEntry.errorMessage"
- [messageTimestamp]="logEntry.timestamp"
- *ngIf="logEntry.errorMessage" class="mt-10"></sp-exception-message>
- </div>
- </div>
- <div *ngIf="!logInfos[selectedElementId]">
- <h5 class="text-center">(no log messages available)</h5>
- </div>
- </div>
- <div fxFlex="100" fxLayout="column" *ngIf="selectedElementId === undefined">
- <h5 class="text-center">(click a pipeline element to view log messages)</h5>
+ <sp-basic-inner-panel panelTitle="Logs">
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="selectedElementId !== undefined"
+ >
+ <div *ngIf="logInfos[selectedElementId]">
+ <div
+ *ngFor="let logEntry of logInfos[selectedElementId]"
+ >
+ <sp-exception-message
+ [message]="logEntry.errorMessage"
+ [messageTimestamp]="logEntry.timestamp"
+ *ngIf="logEntry.errorMessage"
+ class="mt-10"
+ ></sp-exception-message>
+ </div>
+ </div>
+ <div *ngIf="!logInfos[selectedElementId]">
+ <h5 class="text-center">(no log messages available)</h5>
+ </div>
+ </div>
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="selectedElementId === undefined"
+ >
+ <h5 class="text-center">
+ (click a pipeline element to view log messages)
+ </h5>
+ </div>
+ </sp-basic-inner-panel>
</div>
- </sp-basic-inner-panel>
</div>
- </div>
</sp-basic-nav-tabs>
diff --git a/ui/src/app/pipeline-details/components/pipeline-logs/pipeline-logs.component.ts b/ui/src/app/pipeline-details/components/pipeline-logs/pipeline-logs.component.ts
index 973e53bb1..4d472997d 100644
--- a/ui/src/app/pipeline-details/components/pipeline-logs/pipeline-logs.component.ts
+++ b/ui/src/app/pipeline-details/components/pipeline-logs/pipeline-logs.component.ts
@@ -16,59 +16,71 @@
*
*/
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { SpPipelineDetailsDirective } from '../sp-pipeline-details.directive';
import { SpPipelineRoutes } from '../../../pipelines/pipelines.routes';
import { ActivatedRoute } from '@angular/router';
-import { PipelineMonitoringService, PipelineService, SpLogEntry } from '@streampipes/platform-services';
+import {
+ PipelineMonitoringService,
+ PipelineService,
+ SpLogEntry,
+} from '@streampipes/platform-services';
import { AuthService } from '../../../services/auth.service';
import { SpBreadcrumbService } from '@streampipes/shared-ui';
import { PipelineElementUnion } from '../../../editor/model/editor.model';
@Component({
- selector: 'sp-pipeline-logs',
- templateUrl: './pipeline-logs.component.html',
- styleUrls: ['./pipeline-logs.component.scss']
+ selector: 'sp-pipeline-logs',
+ templateUrl: './pipeline-logs.component.html',
+ styleUrls: ['./pipeline-logs.component.scss'],
})
-export class PipelineLogsComponent extends SpPipelineDetailsDirective implements OnInit, OnDestroy {
+export class PipelineLogsComponent
+ extends SpPipelineDetailsDirective
+ implements OnInit
+{
+ logInfos: Record<string, SpLogEntry[]> = {};
+ selectedElementId: string;
- logInfos: Record<string, SpLogEntry[]> = {};
- selectedElementId: string;
+ constructor(
+ activatedRoute: ActivatedRoute,
+ pipelineService: PipelineService,
+ authService: AuthService,
+ breadcrumbService: SpBreadcrumbService,
+ private pipelineMonitoringService: PipelineMonitoringService,
+ ) {
+ super(activatedRoute, pipelineService, authService, breadcrumbService);
+ }
- constructor(activatedRoute: ActivatedRoute,
- pipelineService: PipelineService,
- authService: AuthService,
- breadcrumbService: SpBreadcrumbService,
- private pipelineMonitoringService: PipelineMonitoringService) {
- super(activatedRoute, pipelineService, authService, breadcrumbService);
- }
+ ngOnInit(): void {
+ super.onInit();
+ }
- ngOnDestroy(): void {
- }
+ onPipelineAvailable(): void {
+ this.breadcrumbService.updateBreadcrumb([
+ SpPipelineRoutes.BASE,
+ { label: this.pipeline.name },
+ { label: 'Logs' },
+ ]);
+ this.receiveLogInfos();
+ }
- ngOnInit(): void {
- super.onInit();
- }
+ receiveLogInfos(): void {
+ this.pipelineMonitoringService
+ .getLogInfoForPipeline(this.pipeline._id)
+ .subscribe(response => {
+ this.logInfos = response;
+ });
+ }
- onPipelineAvailable(): void {
- this.breadcrumbService.updateBreadcrumb([SpPipelineRoutes.BASE, {label: this.pipeline.name}, {label: 'Logs'}]);
- this.receiveLogInfos();
- }
-
- receiveLogInfos(): void {
- this.pipelineMonitoringService.getLogInfoForPipeline(this.pipeline._id).subscribe(response => {
- this.logInfos = response;
- });
- }
-
- selectElement(pipelineElement: PipelineElementUnion): void {
- this.selectedElementId = pipelineElement.elementId;
- }
-
- triggerLogUpdate(): void {
- this.pipelineMonitoringService.triggerMonitoringUpdate().subscribe(res => {
- this.receiveLogInfos();
- });
- }
+ selectElement(pipelineElement: PipelineElementUnion): void {
+ this.selectedElementId = pipelineElement.elementId;
+ }
+ triggerLogUpdate(): void {
+ this.pipelineMonitoringService
+ .triggerMonitoringUpdate()
+ .subscribe(res => {
+ this.receiveLogInfos();
+ });
+ }
}
diff --git a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.html b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.html
index f9a118853..f75369f01 100644
--- a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.html
+++ b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.html
@@ -16,11 +16,18 @@
~
-->
-<sp-basic-inner-panel [panelTitle]="'Preview: ' +pipeline.name" innerPadding="0">
+<sp-basic-inner-panel
+ [panelTitle]="'Preview: ' + pipeline.name"
+ innerPadding="0"
+>
<div class="outer-assembly-preview">
<div class="canvas-preview-inner">
- <div id="{{jspcanvas}}" class="canvas-preview">
- <pipeline [canvasId]="jspcanvas" [rawPipelineModel]="rawPipelineModel" [preview]="true"></pipeline>
+ <div id="{{ jspcanvas }}" class="canvas-preview">
+ <pipeline
+ [canvasId]="jspcanvas"
+ [rawPipelineModel]="rawPipelineModel"
+ [preview]="true"
+ ></pipeline>
</div>
</div>
</div>
diff --git a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.scss b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.scss
index 58ba04bdd..13cbc4aac 100644
--- a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.scss
+++ b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.scss
@@ -15,4 +15,3 @@
* limitations under the License.
*
*/
-
diff --git a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts
index 564ccc9d0..b0af149c5 100644
--- a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts
+++ b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.ts
@@ -16,21 +16,30 @@
*
*/
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnDestroy,
+ OnInit,
+ Output,
+} from '@angular/core';
import { Pipeline } from '@streampipes/platform-services';
-import { PipelineElementConfig, PipelineElementUnion } from '../../../editor/model/editor.model';
+import {
+ PipelineElementConfig,
+ PipelineElementUnion,
+} from '../../../editor/model/editor.model';
import { PipelinePositioningService } from '../../../editor/services/pipeline-positioning.service';
import { JsplumbService } from '../../../editor/services/jsplumb.service';
import { ObjectProvider } from '../../../editor/services/object-provider.service';
import { JsplumbFactoryService } from '../../../editor/services/jsplumb-factory.service';
@Component({
- selector: 'pipeline-preview',
+ selector: 'sp-pipeline-preview',
templateUrl: './pipeline-preview.component.html',
- styleUrls: ['./pipeline-preview.component.scss']
+ styleUrls: ['./pipeline-preview.component.scss'],
})
export class PipelinePreviewComponent implements OnInit {
-
@Input()
jspcanvas: string;
@@ -40,31 +49,52 @@ export class PipelinePreviewComponent implements OnInit {
pipeline: Pipeline;
@Output()
- selectedElementEmitter: EventEmitter<PipelineElementUnion> = new EventEmitter<PipelineElementUnion>();
+ selectedElementEmitter: EventEmitter<PipelineElementUnion> =
+ new EventEmitter<PipelineElementUnion>();
- constructor(private pipelinePositioningService: PipelinePositioningService,
- private jsplumbService: JsplumbService,
- private jsplumbFactoryService: JsplumbFactoryService,
- private objectProvider: ObjectProvider) {
- }
+ constructor(
+ private pipelinePositioningService: PipelinePositioningService,
+ private jsplumbService: JsplumbService,
+ private jsplumbFactoryService: JsplumbFactoryService,
+ private objectProvider: ObjectProvider,
+ ) {}
ngOnInit() {
setTimeout(() => {
const elid = '#' + this.jspcanvas;
- this.rawPipelineModel = this.jsplumbService.makeRawPipeline(this.pipeline, true);
+ this.rawPipelineModel = this.jsplumbService.makeRawPipeline(
+ this.pipeline,
+ true,
+ );
setTimeout(() => {
- this.pipelinePositioningService.displayPipeline(this.rawPipelineModel, elid, true, true);
+ this.pipelinePositioningService.displayPipeline(
+ this.rawPipelineModel,
+ elid,
+ true,
+ true,
+ );
const existingEndpointIds = [];
setTimeout(() => {
- this.jsplumbFactoryService.getJsplumbBridge(true).selectEndpoints().each(endpoint => {
- if (existingEndpointIds.indexOf(endpoint.element.id) === -1) {
- $(endpoint.element).click(() => {
- const payload = this.objectProvider.findElement(endpoint.element.id, this.rawPipelineModel).payload;
- this.selectedElementEmitter.emit(payload);
- });
- existingEndpointIds.push(endpoint.element.id);
- }
- });
+ this.jsplumbFactoryService
+ .getJsplumbBridge(true)
+ .selectEndpoints()
+ .each(endpoint => {
+ if (
+ existingEndpointIds.indexOf(
+ endpoint.element.id,
+ ) === -1
+ ) {
+ $(endpoint.element).click(() => {
+ const payload =
+ this.objectProvider.findElement(
+ endpoint.element.id,
+ this.rawPipelineModel,
+ ).payload;
+ this.selectedElementEmitter.emit(payload);
+ });
+ existingEndpointIds.push(endpoint.element.id);
+ }
+ });
});
});
});
diff --git a/ui/src/app/pipeline-details/components/sp-pipeline-details.directive.ts b/ui/src/app/pipeline-details/components/sp-pipeline-details.directive.ts
index 68712a990..0e16e3a26 100644
--- a/ui/src/app/pipeline-details/components/sp-pipeline-details.directive.ts
+++ b/ui/src/app/pipeline-details/components/sp-pipeline-details.directive.ts
@@ -26,43 +26,47 @@ import { SpBreadcrumbService } from '@streampipes/shared-ui';
@Directive()
export abstract class SpPipelineDetailsDirective {
+ tabs = [];
+ hasPipelineWritePrivileges = false;
+ hasPipelineDeletePrivileges = false;
- tabs = [];
- hasPipelineWritePrivileges = false;
- hasPipelineDeletePrivileges = false;
+ currentPipeline: string;
+ pipeline: Pipeline;
+ pipelineAvailable = false;
- currentPipeline: string;
- pipeline: Pipeline;
- pipelineAvailable = false;
+ constructor(
+ protected activatedRoute: ActivatedRoute,
+ protected pipelineService: PipelineService,
+ protected authService: AuthService,
+ protected breadcrumbService: SpBreadcrumbService,
+ ) {}
- constructor(protected activatedRoute: ActivatedRoute,
- protected pipelineService: PipelineService,
- protected authService: AuthService,
- protected breadcrumbService: SpBreadcrumbService) {
- }
+ onInit(): void {
+ this.authService.user$.subscribe(user => {
+ this.hasPipelineWritePrivileges = this.authService.hasRole(
+ UserPrivilege.PRIVILEGE_WRITE_PIPELINE,
+ );
+ this.hasPipelineDeletePrivileges = this.authService.hasRole(
+ UserPrivilege.PRIVILEGE_DELETE_PIPELINE,
+ );
+ const pipelineId = this.activatedRoute.snapshot.params.pipelineId;
+ if (pipelineId) {
+ this.tabs = new SpPipelineDetailsTabs().getTabs(pipelineId);
+ this.currentPipeline = pipelineId;
+ this.loadPipeline();
+ }
+ });
+ }
- onInit(): void {
- this.authService.user$.subscribe(user => {
- this.hasPipelineWritePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_WRITE_PIPELINE);
- this.hasPipelineDeletePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_DELETE_PIPELINE);
- const pipelineId = this.activatedRoute.snapshot.params.pipelineId;
- if (pipelineId) {
- this.tabs = new SpPipelineDetailsTabs().getTabs(pipelineId);
- this.currentPipeline = pipelineId;
- this.loadPipeline();
- }
- });
- }
-
- loadPipeline(): void {
- this.pipelineService.getPipelineById(this.currentPipeline)
- .subscribe(pipeline => {
- this.pipeline = pipeline;
- this.pipelineAvailable = true;
- this.onPipelineAvailable();
- });
- }
-
- abstract onPipelineAvailable(): void;
+ loadPipeline(): void {
+ this.pipelineService
+ .getPipelineById(this.currentPipeline)
+ .subscribe(pipeline => {
+ this.pipeline = pipeline;
+ this.pipelineAvailable = true;
+ this.onPipelineAvailable();
+ });
+ }
+ abstract onPipelineAvailable(): void;
}
diff --git a/ui/src/app/pipeline-details/components/status/pipeline-status.component.html b/ui/src/app/pipeline-details/components/status/pipeline-status.component.html
index 813b376a8..3d01b8f07 100644
--- a/ui/src/app/pipeline-details/components/status/pipeline-status.component.html
+++ b/ui/src/app/pipeline-details/components/status/pipeline-status.component.html
@@ -17,23 +17,50 @@
-->
<sp-basic-inner-panel panelTitle="Pipeline Status">
- <div fxLayout="column" style="min-height:100px; padding:5px;padding-left:15px;" *ngIf="pipelineStatus.length > 0">
+ <div
+ fxLayout="column"
+ style="min-height: 100px; padding: 5px; padding-left: 15px"
+ *ngIf="pipelineStatus.length > 0"
+ >
<div fxLayout="row" fxFlex="100">
- <div fxFlex="20"><h5><b>Date</b></h5></div>
- <div fxFlex="20"><h5><b>Status</b></h5></div>
- <div fxFlex="60"><h5><b>Description</b></h5></div>
- <div fxFlex="60"><h5><b>Details</b></h5></div>
+ <div fxFlex="20">
+ <h5><b>Date</b></h5>
+ </div>
+ <div fxFlex="20">
+ <h5><b>Status</b></h5>
+ </div>
+ <div fxFlex="60">
+ <h5><b>Description</b></h5>
+ </div>
+ <div fxFlex="60">
+ <h5><b>Details</b></h5>
+ </div>
</div>
- <div fxFlex="100" fxLayout="column" *ngFor="let status of pipelineStatus">
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ *ngFor="let status of pipelineStatus"
+ >
<div fxFlex="100" fxLayout="row">
- <div fxFlex="20"><h5>{{status.timestamp | date:'dd.MM.yyyy HH:mm'}}</h5></div>
- <div fxFlex="20"><h5>{{status.messageType}}</h5></div>
- <div fxFlex="60"><h5>{{status.message}}</h5></div>
+ <div fxFlex="20">
+ <h5>{{ status.timestamp | date : 'dd.MM.yyyy HH:mm' }}</h5>
+ </div>
+ <div fxFlex="20">
+ <h5>{{ status.messageType }}</h5>
+ </div>
+ <div fxFlex="60">
+ <h5>{{ status.message }}</h5>
+ </div>
<div fxFlex="60"><h5>-</h5></div>
</div>
</div>
</div>
- <div fxLayout="column"fxLayoutAlign="center center" style="min-height:100px; padding:5px;padding-left:15px;" *ngIf="pipelineStatus.length==0">
+ <div
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ style="min-height: 100px; padding: 5px; padding-left: 15px"
+ *ngIf="pipelineStatus.length === 0"
+ >
(no status information available)
</div>
</sp-basic-inner-panel>
diff --git a/ui/src/app/pipeline-details/components/status/pipeline-status.component.ts b/ui/src/app/pipeline-details/components/status/pipeline-status.component.ts
index 56eb2dbcf..8baecf1d1 100644
--- a/ui/src/app/pipeline-details/components/status/pipeline-status.component.ts
+++ b/ui/src/app/pipeline-details/components/status/pipeline-status.component.ts
@@ -17,14 +17,17 @@
*/
import { Component, Input, OnInit } from '@angular/core';
-import { Pipeline, PipelineStatusMessage, PipelineService } from '@streampipes/platform-services';
+import {
+ Pipeline,
+ PipelineStatusMessage,
+ PipelineService,
+} from '@streampipes/platform-services';
@Component({
- selector: 'pipeline-status',
+ selector: 'sp-pipeline-status',
templateUrl: './pipeline-status.component.html',
})
export class PipelineStatusComponent implements OnInit {
-
pipelineStatus: PipelineStatusMessage[];
@Input()
@@ -39,12 +42,12 @@ export class PipelineStatusComponent implements OnInit {
}
getPipelineStatus() {
- this.pipelineService.getPipelineStatusById(this.pipeline._id)
+ this.pipelineService
+ .getPipelineStatusById(this.pipeline._id)
.subscribe(msg => {
this.pipelineStatus = msg.sort((a, b) => {
return a.timestamp - b.timestamp;
});
});
}
-
}
diff --git a/ui/src/app/pipeline-details/pipeline-details-tabs.ts b/ui/src/app/pipeline-details/pipeline-details-tabs.ts
index a34269b72..42fc0362d 100644
--- a/ui/src/app/pipeline-details/pipeline-details-tabs.ts
+++ b/ui/src/app/pipeline-details/pipeline-details-tabs.ts
@@ -19,13 +19,28 @@
import { SpNavigationItem } from '@streampipes/shared-ui';
export class SpPipelineDetailsTabs {
-
- public getTabs(pipelineId: string): SpNavigationItem[] {
- return [
- {itemId: 'overview', itemTitle: 'Overview', itemLink: ['pipelines', 'details', pipelineId, 'overview']},
- {itemId: 'monitoring', itemTitle: 'Metrics', itemLink: ['pipelines', 'details', pipelineId, 'metrics']},
- {itemId: 'logs', itemTitle: 'Logs', itemLink: ['pipelines', 'details', pipelineId, 'logs']},
- {itemId: 'quick-edit', itemTitle: 'Quick Edit', itemLink: ['pipelines', 'details', pipelineId, 'quick-edit']}
- ];
- }
+ public getTabs(pipelineId: string): SpNavigationItem[] {
+ return [
+ {
+ itemId: 'overview',
+ itemTitle: 'Overview',
+ itemLink: ['pipelines', 'details', pipelineId, 'overview'],
+ },
+ {
+ itemId: 'monitoring',
+ itemTitle: 'Metrics',
+ itemLink: ['pipelines', 'details', pipelineId, 'metrics'],
+ },
+ {
+ itemId: 'logs',
+ itemTitle: 'Logs',
+ itemLink: ['pipelines', 'details', pipelineId, 'logs'],
+ },
+ {
+ itemId: 'quick-edit',
+ itemTitle: 'Quick Edit',
+ itemLink: ['pipelines', 'details', pipelineId, 'quick-edit'],
+ },
+ ];
+ }
}
diff --git a/ui/src/app/pipeline-details/pipeline-details.module.ts b/ui/src/app/pipeline-details/pipeline-details.module.ts
index 8f9813ec2..71008da6a 100644
--- a/ui/src/app/pipeline-details/pipeline-details.module.ts
+++ b/ui/src/app/pipeline-details/pipeline-details.module.ts
@@ -42,42 +42,38 @@ import { SharedUiModule } from '@streampipes/shared-ui';
import { PipelineLogsComponent } from './components/pipeline-logs/pipeline-logs.component';
@NgModule({
- imports: [
- CoreUiModule,
- FlexLayoutModule,
- FormsModule,
- MatTabsModule,
- MatButtonModule,
- CustomMaterialModule,
- CommonModule,
- MatProgressSpinnerModule,
- NgxChartsModule,
- EditorModule,
- FormsModule,
- ReactiveFormsModule,
- PlatformServicesModule,
- SharedUiModule
- ],
- declarations: [
- PipelineActionsComponent,
- PipelineElementsComponent,
- PipelineElementsRowComponent,
- PipelineElementStatisticsComponent,
- PipelineLogsComponent,
- PipelineMonitoringComponent,
- PipelineStatusComponent,
- PipelinePreviewComponent,
- QuickEditComponent,
- BarchartWidgetComponent,
- SpPipelineDetailsOverviewComponent,
- ],
- providers: [],
- exports: [
- ]
+ imports: [
+ CoreUiModule,
+ FlexLayoutModule,
+ FormsModule,
+ MatTabsModule,
+ MatButtonModule,
+ CustomMaterialModule,
+ CommonModule,
+ MatProgressSpinnerModule,
+ NgxChartsModule,
+ EditorModule,
+ FormsModule,
+ ReactiveFormsModule,
+ PlatformServicesModule,
+ SharedUiModule,
+ ],
+ declarations: [
+ PipelineActionsComponent,
+ PipelineElementsComponent,
+ PipelineElementsRowComponent,
+ PipelineElementStatisticsComponent,
+ PipelineLogsComponent,
+ PipelineMonitoringComponent,
+ PipelineStatusComponent,
+ PipelinePreviewComponent,
+ QuickEditComponent,
+ BarchartWidgetComponent,
+ SpPipelineDetailsOverviewComponent,
+ ],
+ providers: [],
+ exports: [],
})
export class PipelineDetailsModule {
-
- constructor() {
- }
-
+ constructor() {}
}
diff --git a/ui/src/app/pipeline-details/pipeline-details.routes.ts b/ui/src/app/pipeline-details/pipeline-details.routes.ts
index b9ff0367d..ac5ebcb73 100644
--- a/ui/src/app/pipeline-details/pipeline-details.routes.ts
+++ b/ui/src/app/pipeline-details/pipeline-details.routes.ts
@@ -16,10 +16,11 @@
*
*/
-import { SpBreadcrumbItem, } from '@streampipes/shared-ui';
+import { SpBreadcrumbItem } from '@streampipes/shared-ui';
export class SpPipelineDetailsRoutes {
-
- static BASE: SpBreadcrumbItem = {label: 'Pipeline Details', link: ['pipelines']};
-
+ static BASE: SpBreadcrumbItem = {
+ label: 'Pipeline Details',
+ link: ['pipelines'],
+ };
}