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/07 09:09:25 UTC
[streampipes] branch chore/formatting-linting-pipelines created (now 8857a48c7)
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a change to branch chore/formatting-linting-pipelines
in repository https://gitbox.apache.org/repos/asf/streampipes.git
at 8857a48c7 [#877] apply formatting and linting to pipelines module
This branch includes the following new commits:
new 8857a48c7 [#877] apply formatting and linting to pipelines module
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[streampipes] 01/01: [#877] apply formatting and linting to pipelines module
Posted by bo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a commit to branch chore/formatting-linting-pipelines
in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 8857a48c7c1fe811e39cd508c15aa847db5e6421
Author: bossenti <bo...@posteo.de>
AuthorDate: Sat Jan 7 10:08:21 2023 +0100
[#877] apply formatting and linting to pipelines module
---
ui/.eslintignore | 1 -
ui/.prettierignore | 1 -
.../category-already-in-pipeline.filter.ts | 18 +-
.../abstract-function-details.directive.ts | 118 ++++---
.../functions-logs/functions-logs.component.html | 41 ++-
.../functions-logs/functions-logs.component.ts | 55 +--
.../functions-metrics.component.html | 46 +--
.../functions-metrics.component.ts | 46 +--
.../functions-overview.component.html | 94 +++--
.../functions-overview.component.ts | 30 +-
.../pipeline-overview.component.html | 252 ++++++++++----
.../pipeline-overview.component.scss | 37 +-
.../pipeline-overview.component.ts | 205 ++++++-----
.../delete-pipeline-dialog.component.html | 62 +++-
.../delete-pipeline-dialog.component.scss | 2 +-
.../delete-pipeline-dialog.component.ts | 25 +-
.../import-pipeline-dialog.component.html | 80 +++--
.../import-pipeline-dialog.component.scss | 2 +-
.../import-pipeline-dialog.component.ts | 67 ++--
.../pipeline-categories-dialog.component.html | 275 +++++++++++----
.../pipeline-categories-dialog.component.scss | 2 +-
.../pipeline-categories-dialog.component.ts | 47 +--
.../pipeline-notifications.component.html | 14 +-
.../pipeline-notifications.component.scss | 18 +-
.../pipeline-notifications.component.ts | 42 +--
.../pipeline-status-dialog.component.html | 74 ++--
.../pipeline-status-dialog.component.scss | 38 +-
.../pipeline-status-dialog.component.ts | 166 ++++-----
.../start-all-pipelines-dialog.component.html | 57 ++-
.../start-all-pipelines-dialog.component.scss | 2 +-
.../start-all-pipelines-dialog.component.ts | 234 +++++++------
ui/src/app/pipelines/model/pipeline-model.ts | 4 +-
ui/src/app/pipelines/pipeline-category.filter.ts | 18 +-
ui/src/app/pipelines/pipelines.component.html | 123 +++++--
ui/src/app/pipelines/pipelines.component.scss | 8 +-
ui/src/app/pipelines/pipelines.component.ts | 386 +++++++++++----------
ui/src/app/pipelines/pipelines.module.ts | 187 +++++-----
ui/src/app/pipelines/pipelines.routes.ts | 9 +-
.../services/pipeline-operations.service.ts | 283 ++++++++-------
39 files changed, 1924 insertions(+), 1245 deletions(-)
diff --git a/ui/.eslintignore b/ui/.eslintignore
index a4ba0955e..4e279ce55 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -36,7 +36,6 @@ src/app/login
src/app/notifications
src/app/NS
src/app/pipeline-details
-src/app/pipelines
src/app/profile
src/app/services
src/scss
diff --git a/ui/.prettierignore b/ui/.prettierignore
index e90ed933f..2b96342e8 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -37,7 +37,6 @@ src/app/login
src/app/notifications
src/app/NS
src/app/pipeline-details
-src/app/pipelines
src/app/profile
src/app/services
src/scss
diff --git a/ui/src/app/pipelines/category-already-in-pipeline.filter.ts b/ui/src/app/pipelines/category-already-in-pipeline.filter.ts
index 6f44912fe..be5a2e1af 100644
--- a/ui/src/app/pipelines/category-already-in-pipeline.filter.ts
+++ b/ui/src/app/pipelines/category-already-in-pipeline.filter.ts
@@ -20,14 +20,16 @@ import { Pipe, PipeTransform } from '@angular/core';
import { Pipeline } from '@streampipes/platform-services';
@Pipe({
- name: 'categoryAlreadyInPipelineFilter',
- pure: false
+ name: 'categoryAlreadyInPipelineFilter',
+ pure: false,
})
export class CategoryAlreadyInPipelinePipe implements PipeTransform {
-
- transform(pipelines: Pipeline[], categoryId: string): any {
- return pipelines.filter(pipeline => {
- return !pipeline.pipelineCategories || !(pipeline.pipelineCategories.some(pc => pc === categoryId));
- });
- }
+ transform(pipelines: Pipeline[], categoryId: string): any {
+ return pipelines.filter(pipeline => {
+ return (
+ !pipeline.pipelineCategories ||
+ !pipeline.pipelineCategories.some(pc => pc === categoryId)
+ );
+ });
+ }
}
diff --git a/ui/src/app/pipelines/components/functions-overview/abstract-function-details.directive.ts b/ui/src/app/pipelines/components/functions-overview/abstract-function-details.directive.ts
index 1a4fdba6c..286c817e8 100644
--- a/ui/src/app/pipelines/components/functions-overview/abstract-function-details.directive.ts
+++ b/ui/src/app/pipelines/components/functions-overview/abstract-function-details.directive.ts
@@ -18,11 +18,11 @@
import { ActivatedRoute } from '@angular/router';
import {
- AdapterMonitoringService,
- FunctionDefinition,
- FunctionsService,
- PipelineElementService,
- SpDataStream
+ AdapterMonitoringService,
+ FunctionDefinition,
+ FunctionsService,
+ PipelineElementService,
+ SpDataStream,
} from '@streampipes/platform-services';
import { Directive } from '@angular/core';
import { Observable, zip } from 'rxjs';
@@ -31,57 +31,77 @@ import { SpPipelineRoutes } from '../../pipelines.routes';
@Directive()
export abstract class AbstractFunctionDetailsDirective {
+ public activeFunction: FunctionDefinition;
- public activeFunction: FunctionDefinition;
+ contentReady = false;
+ tabs = [];
+ streamNames: Record<string, string> = {};
- contentReady = false;
- tabs = [];
- streamNames: Record<string, string> = {};
+ constructor(
+ private route: ActivatedRoute,
+ protected functionsService: FunctionsService,
+ private pipelineElementService: PipelineElementService,
+ private adapterMonitoringService: AdapterMonitoringService,
+ private breadcrumbService: SpBreadcrumbService,
+ ) {}
- constructor(private route: ActivatedRoute,
- protected functionsService: FunctionsService,
- private pipelineElementService: PipelineElementService,
- private adapterMonitoringService: AdapterMonitoringService,
- private breadcrumbService: SpBreadcrumbService) {
- }
+ onInit() {
+ const functionId = this.route.snapshot.params.functionId;
+ this.breadcrumbService.updateBreadcrumb([
+ SpPipelineRoutes.BASE,
+ { label: functionId },
+ { label: this.getBreadcrumbLabel() },
+ ]);
+ this.tabs = [
+ {
+ itemId: 'metrics',
+ itemTitle: 'Metrics',
+ itemLink: ['pipelines', 'functions', functionId, 'metrics'],
+ },
+ {
+ itemId: 'logs',
+ itemTitle: 'Logs',
+ itemLink: ['pipelines', 'functions', functionId, 'logs'],
+ },
+ ];
+ this.loadFunctions(functionId);
+ }
- onInit() {
- const functionId = this.route.snapshot.params.functionId;
- this.breadcrumbService.updateBreadcrumb([SpPipelineRoutes.BASE, {label: functionId}, {label: this.getBreadcrumbLabel()}]);
- this.tabs = [
- {itemId: 'metrics', itemTitle: 'Metrics', itemLink: ['pipelines', 'functions', functionId, 'metrics']},
- {itemId: 'logs', itemTitle: 'Logs', itemLink: ['pipelines', 'functions', functionId, 'logs']}
- ]
- this.loadFunctions(functionId);
- }
+ loadFunctions(functionId: string) {
+ this.functionsService.getActiveFunctions().subscribe(functions => {
+ this.activeFunction = functions.find(
+ f => f.functionId.id === functionId,
+ );
+ this.loadStreams(this.activeFunction.consumedStreams);
+ });
+ }
- loadFunctions(functionId: string) {
- this.functionsService.getActiveFunctions().subscribe(functions => {
- this.activeFunction = functions.find(f => f.functionId.id === functionId);
- this.loadStreams(this.activeFunction.consumedStreams);
- })
- }
+ loadStreams(relatedStreams: string[]) {
+ this.streamNames = {};
+ const observables = this.getStreamObservables(relatedStreams);
+ zip(...observables).subscribe(streams => {
+ streams.forEach(
+ stream => (this.streamNames[stream.elementId] = stream.name),
+ );
+ this.afterFunctionLoaded();
+ });
+ }
- loadStreams(relatedStreams: string[]) {
- this.streamNames = {};
- const observables = this.getStreamObservables(relatedStreams);
- zip(...observables).subscribe(streams => {
- streams.forEach(stream => this.streamNames[stream.elementId] = stream.name);
- this.afterFunctionLoaded();
- })
- }
+ getStreamObservables(relatedStreams: string[]): Observable<SpDataStream>[] {
+ return relatedStreams.map(s =>
+ this.pipelineElementService.getDataStreamByElementId(s),
+ );
+ }
- getStreamObservables(relatedStreams: string[]): Observable<SpDataStream>[] {
- return relatedStreams.map(s => this.pipelineElementService.getDataStreamByElementId(s));
- }
+ triggerUpdate() {
+ this.adapterMonitoringService
+ .triggerMonitoringUpdate()
+ .subscribe(() => {
+ this.afterFunctionLoaded();
+ });
+ }
- triggerUpdate() {
- this.adapterMonitoringService.triggerMonitoringUpdate().subscribe(() => {
- this.afterFunctionLoaded();
- });
- }
+ abstract afterFunctionLoaded(): void;
- abstract afterFunctionLoaded(): void;
-
- abstract getBreadcrumbLabel(): string;
+ abstract getBreadcrumbLabel(): string;
}
diff --git a/ui/src/app/pipelines/components/functions-overview/functions-logs/functions-logs.component.html b/ui/src/app/pipelines/components/functions-overview/functions-logs/functions-logs.component.html
index dbc9f8d1d..c11db2f50 100644
--- a/ui/src/app/pipelines/components/functions-overview/functions-logs/functions-logs.component.html
+++ b/ui/src/app/pipelines/components/functions-overview/functions-logs/functions-logs.component.html
@@ -16,26 +16,31 @@
~
-->
-<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)="triggerUpdate()">
- <i class="material-icons">refresh</i>
- </button>
- </div>
- <div fxFlex="100" fxLayout="column" *ngIf="activeFunction && contentReady">
- <sp-simple-logs [elementName]="activeFunction.functionId.id" [logs]="logs"
- fxFlex="100"
- fxLayout="column">
- </sp-simple-logs>
- </div>
-
-
+ (click)="triggerUpdate()"
+ >
+ <i class="material-icons">refresh</i>
+ </button>
+ </div>
+ <div fxFlex="100" fxLayout="column" *ngIf="activeFunction && contentReady">
+ <sp-simple-logs
+ [elementName]="activeFunction.functionId.id"
+ [logs]="logs"
+ fxFlex="100"
+ fxLayout="column"
+ >
+ </sp-simple-logs>
+ </div>
</sp-basic-nav-tabs>
diff --git a/ui/src/app/pipelines/components/functions-overview/functions-logs/functions-logs.component.ts b/ui/src/app/pipelines/components/functions-overview/functions-logs/functions-logs.component.ts
index 9d40fed33..693508188 100644
--- a/ui/src/app/pipelines/components/functions-overview/functions-logs/functions-logs.component.ts
+++ b/ui/src/app/pipelines/components/functions-overview/functions-logs/functions-logs.component.ts
@@ -21,31 +21,34 @@ import { AbstractFunctionDetailsDirective } from '../abstract-function-details.d
import { SpLogEntry } from '@streampipes/platform-services';
@Component({
- selector: 'sp-functions-logs',
- templateUrl: './functions-logs.component.html',
- styleUrls: []
+ selector: 'sp-functions-logs',
+ templateUrl: './functions-logs.component.html',
+ styleUrls: [],
})
-export class SpFunctionsLogsComponent extends AbstractFunctionDetailsDirective implements OnInit {
-
- logs: SpLogEntry[] = [];
-
- ngOnInit(): void {
- super.onInit();
- }
-
- afterFunctionLoaded(): void {
- this.loadLogs();
- }
-
- loadLogs(): void {
- this.functionsService.getFunctionLogs(this.activeFunction.functionId.id).subscribe(logs => {
- this.logs = logs;
- this.contentReady = true;
- });
- }
-
- getBreadcrumbLabel(): string {
- return 'Logs';
- }
-
+export class SpFunctionsLogsComponent
+ extends AbstractFunctionDetailsDirective
+ implements OnInit
+{
+ logs: SpLogEntry[] = [];
+
+ ngOnInit(): void {
+ super.onInit();
+ }
+
+ afterFunctionLoaded(): void {
+ this.loadLogs();
+ }
+
+ loadLogs(): void {
+ this.functionsService
+ .getFunctionLogs(this.activeFunction.functionId.id)
+ .subscribe(logs => {
+ this.logs = logs;
+ this.contentReady = true;
+ });
+ }
+
+ getBreadcrumbLabel(): string {
+ return 'Logs';
+ }
}
diff --git a/ui/src/app/pipelines/components/functions-overview/functions-metrics/functions-metrics.component.html b/ui/src/app/pipelines/components/functions-overview/functions-metrics/functions-metrics.component.html
index c04a4d2bc..f5558ae53 100644
--- a/ui/src/app/pipelines/components/functions-overview/functions-metrics/functions-metrics.component.html
+++ b/ui/src/app/pipelines/components/functions-overview/functions-metrics/functions-metrics.component.html
@@ -16,30 +16,34 @@
~
-->
-<sp-basic-nav-tabs [spNavigationItems]="tabs"
- [activeLink]="'metrics'"
- [showBackLink]="true"
- [backLinkTarget]="['pipelines']">
- <div nav fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <button mat-button
+<sp-basic-nav-tabs
+ [spNavigationItems]="tabs"
+ [activeLink]="'metrics'"
+ [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)="triggerUpdate()">
- <i class="material-icons">refresh</i>
- </button>
- </div>
- <div fxFlex="100" fxLayout="column" *ngIf="activeFunction && contentReady">
- <div *ngFor="let messagesIn of metrics.messagesIn | keyvalue">
- <sp-simple-metrics [elementName]="streamNames[messagesIn.key]"
- lastPublishedLabel="Last consumed message"
- statusValueLabel="Consumed messages"
- [lastTimestamp]="messagesIn.value.lastTimestamp"
- [statusValue]="messagesIn.value.counter">
- </sp-simple-metrics>
+ (click)="triggerUpdate()"
+ >
+ <i class="material-icons">refresh</i>
+ </button>
+ </div>
+ <div fxFlex="100" fxLayout="column" *ngIf="activeFunction && contentReady">
+ <div *ngFor="let messagesIn of metrics.messagesIn | keyvalue">
+ <sp-simple-metrics
+ [elementName]="streamNames[messagesIn.key]"
+ lastPublishedLabel="Last consumed message"
+ statusValueLabel="Consumed messages"
+ [lastTimestamp]="messagesIn.value.lastTimestamp"
+ [statusValue]="messagesIn.value.counter"
+ >
+ </sp-simple-metrics>
+ </div>
</div>
- </div>
-
-
</sp-basic-nav-tabs>
diff --git a/ui/src/app/pipelines/components/functions-overview/functions-metrics/functions-metrics.component.ts b/ui/src/app/pipelines/components/functions-overview/functions-metrics/functions-metrics.component.ts
index fe2b7ff78..3b4303c5f 100644
--- a/ui/src/app/pipelines/components/functions-overview/functions-metrics/functions-metrics.component.ts
+++ b/ui/src/app/pipelines/components/functions-overview/functions-metrics/functions-metrics.component.ts
@@ -21,30 +21,34 @@ import { AbstractFunctionDetailsDirective } from '../abstract-function-details.d
import { SpMetricsEntry } from '@streampipes/platform-services';
@Component({
- selector: 'sp-functions-metrics',
- templateUrl: './functions-metrics.component.html',
- styleUrls: []
+ selector: 'sp-functions-metrics',
+ templateUrl: './functions-metrics.component.html',
+ styleUrls: [],
})
-export class SpFunctionsMetricsComponent extends AbstractFunctionDetailsDirective implements OnInit {
+export class SpFunctionsMetricsComponent
+ extends AbstractFunctionDetailsDirective
+ implements OnInit
+{
+ metrics: SpMetricsEntry;
- metrics: SpMetricsEntry;
+ ngOnInit(): void {
+ super.onInit();
+ }
- ngOnInit(): void {
- super.onInit();
- }
+ afterFunctionLoaded(): void {
+ this.loadMetrics();
+ }
- afterFunctionLoaded(): void {
- this.loadMetrics();
- }
+ loadMetrics() {
+ this.functionsService
+ .getFunctionMetrics(this.activeFunction.functionId.id)
+ .subscribe(metrics => {
+ this.metrics = metrics;
+ this.contentReady = true;
+ });
+ }
- loadMetrics() {
- this.functionsService.getFunctionMetrics(this.activeFunction.functionId.id).subscribe(metrics => {
- this.metrics = metrics;
- this.contentReady = true;
- })
- }
-
- getBreadcrumbLabel(): string {
- return 'Metrics';
- }
+ getBreadcrumbLabel(): string {
+ return 'Metrics';
+ }
}
diff --git a/ui/src/app/pipelines/components/functions-overview/functions-overview.component.html b/ui/src/app/pipelines/components/functions-overview/functions-overview.component.html
index 690663f2a..0e86260ff 100644
--- a/ui/src/app/pipelines/components/functions-overview/functions-overview.component.html
+++ b/ui/src/app/pipelines/components/functions-overview/functions-overview.component.html
@@ -16,40 +16,70 @@
~
-->
-<div fxFlex="100" fxLayout="column" *ngIf="functions.length > 0" style="margin:1px;">
- <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
- <ng-container matColumnDef="name">
- <th mat-header-cell mat-sort-header *matHeaderCellDef> Name</th>
- <td mat-cell *matCellDef="let spFunction">
- <h4 style="margin-bottom:0px;">{{spFunction.id}}:{{spFunction.version}}</h4>
- </td>
- </ng-container>
+<div
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="functions.length > 0"
+ style="margin: 1px"
+>
+ <table
+ fxFlex="100"
+ mat-table
+ [dataSource]="dataSource"
+ style="width: 100%"
+ matSort
+ >
+ <ng-container matColumnDef="name">
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>
+ <td mat-cell *matCellDef="let spFunction">
+ <h4 style="margin-bottom: 0px">
+ {{ spFunction.id }}:{{ spFunction.version }}
+ </h4>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="action">
- <th mat-header-cell *matHeaderCellDef>
- <span fxLayoutAlign="end center">Action</span>
- </th>
- <td mat-cell *matCellDef="let spFunction">
- <div fxLayout="row">
- <span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="end center">
- <button color="accent" mat-button mat-icon-button matTooltip="Show function details"
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef>
+ <span fxLayoutAlign="end center">Action</span>
+ </th>
+ <td mat-cell *matCellDef="let spFunction">
+ <div fxLayout="row">
+ <span
+ fxFlex
+ fxFlexOrder="1"
+ fxLayout="row"
+ fxLayoutAlign="end center"
+ >
+ <button
+ color="accent"
+ mat-button
+ mat-icon-button
+ matTooltip="Show function details"
matTooltipPosition="above"
- (click)="showFunctionDetails(spFunction.id)"><i
- class="material-icons">search</i>
- </button>
- </span>
- </div>
- </td>
- </ng-container>
+ (click)="showFunctionDetails(spFunction.id)"
+ >
+ <i class="material-icons">search</i>
+ </button>
+ </span>
+ </div>
+ </td>
+ </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
- </table>
- <div fxFlex="100" fxLayoutAlign="end end">
- <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="20"></mat-paginator>
- </div>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+ </table>
+ <div fxFlex="100" fxLayoutAlign="end end">
+ <mat-paginator
+ [pageSizeOptions]="[5, 10, 25, 100]"
+ [pageSize]="20"
+ ></mat-paginator>
+ </div>
</div>
-<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="functions.length === 0">
- <h5>(no functions available)</h5>
+<div
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="functions.length === 0"
+>
+ <h5>(no functions available)</h5>
</div>
diff --git a/ui/src/app/pipelines/components/functions-overview/functions-overview.component.ts b/ui/src/app/pipelines/components/functions-overview/functions-overview.component.ts
index 1637303ec..d12a92617 100644
--- a/ui/src/app/pipelines/components/functions-overview/functions-overview.component.ts
+++ b/ui/src/app/pipelines/components/functions-overview/functions-overview.component.ts
@@ -22,27 +22,25 @@ import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
@Component({
- selector: 'sp-functions-overview',
- templateUrl: './functions-overview.component.html',
- styleUrls: ['./functions-overview.component.scss']
+ selector: 'sp-functions-overview',
+ templateUrl: './functions-overview.component.html',
+ styleUrls: ['./functions-overview.component.scss'],
})
export class FunctionsOverviewComponent implements OnInit {
+ @Input()
+ functions: FunctionId[] = [];
- @Input()
- functions: FunctionId[] = [];
+ dataSource: MatTableDataSource<FunctionId>;
- dataSource: MatTableDataSource<FunctionId>;
+ displayedColumns: string[] = ['name', 'action'];
- displayedColumns: string[] = ['name', 'action'];
+ constructor(private router: Router) {}
- constructor(private router: Router) {}
-
- ngOnInit(): void {
- this.dataSource = new MatTableDataSource<FunctionId>(this.functions);
- }
-
- showFunctionDetails(functionId: string): void {
- this.router.navigate(['pipelines', 'functions', functionId, 'metrics']);
- }
+ ngOnInit(): void {
+ this.dataSource = new MatTableDataSource<FunctionId>(this.functions);
+ }
+ showFunctionDetails(functionId: string): void {
+ this.router.navigate(['pipelines', 'functions', functionId, 'metrics']);
+ }
}
diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
index 01955e5e2..ac70f65cd 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
+++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
@@ -16,108 +16,242 @@
~
-->
-<div fxFlex="100" fxLayout="column" *ngIf="filteredPipelinesAvailable" style="margin:1px;">
- <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
+<div
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="filteredPipelinesAvailable"
+ style="margin: 1px"
+>
+ <table
+ fxFlex="100"
+ mat-table
+ [dataSource]="dataSource"
+ style="width: 100%"
+ matSort
+ >
<ng-container matColumnDef="status">
- <th mat-header-cell mat-sort-header *matHeaderCellDef> Status</th>
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let pipeline">
<div fxLayout="row" fxLayoutAlign="start center">
- <div *ngIf="pipeline.running && pipeline.healthStatus == 'OK'" class="light light-green"></div>
- <div *ngIf="pipeline.running && pipeline.healthStatus == 'REQUIRES_ATTENTION'"
- class="light light-yellow"></div>
- <div *ngIf="pipeline.running && pipeline.healthStatus == 'FAILURE'" class="light light-red"></div>
- <div *ngIf="!pipeline.running" class="light light-neutral" [matTooltip]="'Stopped'"></div>
- <button class="ml-10"
- mat-button
- mat-icon-button
- [disabled]="!hasPipelineWritePrivileges"
- (click)="openPipelineNotificationsDialog(pipeline)"
- *ngIf="pipeline.pipelineNotifications.length > 0"
- matTooltip="{{pipeline.pipelineNotifications.length}} notification{{pipeline.pipelineNotifications.length > 1 ? 's' : ''}}">
+ <div
+ *ngIf="
+ pipeline.running && pipeline.healthStatus === 'OK'
+ "
+ class="light light-green"
+ ></div>
+ <div
+ *ngIf="
+ pipeline.running &&
+ pipeline.healthStatus === 'REQUIRES_ATTENTION'
+ "
+ class="light light-yellow"
+ ></div>
+ <div
+ *ngIf="
+ pipeline.running &&
+ pipeline.healthStatus === 'FAILURE'
+ "
+ class="light light-red"
+ ></div>
+ <div
+ *ngIf="!pipeline.running"
+ class="light light-neutral"
+ [matTooltip]="'Stopped'"
+ ></div>
+ <button
+ class="ml-10"
+ mat-button
+ mat-icon-button
+ [disabled]="!hasPipelineWritePrivileges"
+ (click)="openPipelineNotificationsDialog(pipeline)"
+ *ngIf="pipeline.pipelineNotifications.length > 0"
+ matTooltip="{{
+ pipeline.pipelineNotifications.length
+ }} notification{{
+ pipeline.pipelineNotifications.length > 1 ? 's' : ''
+ }}"
+ >
<mat-icon color="warn">warning</mat-icon>
</button>
</div>
</td>
</ng-container>
<ng-container matColumnDef="start">
- <th mat-header-cell *matHeaderCellDef> Start</th>
+ <th mat-header-cell *matHeaderCellDef>Start</th>
<td mat-cell *matCellDef="let pipeline">
- <button color="accent" mat-button mat-icon-button matTooltip="Start pipeline" matTooltipPosition="above"
- (click)="pipelineOperationsService.startPipeline(pipeline._id, refreshPipelinesEmitter, toggleRunningOperation)"
- [disabled]="!hasPipelineWritePrivileges || starting" *ngIf="!pipeline.running">
+ <button
+ color="accent"
+ mat-button
+ mat-icon-button
+ matTooltip="Start pipeline"
+ matTooltipPosition="above"
+ (click)="
+ pipelineOperationsService.startPipeline(
+ pipeline._id,
+ refreshPipelinesEmitter,
+ toggleRunningOperation
+ )
+ "
+ [disabled]="!hasPipelineWritePrivileges || starting"
+ *ngIf="!pipeline.running"
+ >
<i class="material-icons">play_arrow</i>
</button>
- <button color="accent" mat-button mat-icon-button matTooltip="Stop pipeline" matTooltipPosition="above"
- (click)="pipelineOperationsService.stopPipeline(pipeline._id, refreshPipelinesEmitter, toggleRunningOperation)"
- [disabled]="!hasPipelineWritePrivileges || stopping" *ngIf="pipeline.running">
+ <button
+ color="accent"
+ mat-button
+ mat-icon-button
+ matTooltip="Stop pipeline"
+ matTooltipPosition="above"
+ (click)="
+ pipelineOperationsService.stopPipeline(
+ pipeline._id,
+ refreshPipelinesEmitter,
+ toggleRunningOperation
+ )
+ "
+ [disabled]="!hasPipelineWritePrivileges || stopping"
+ *ngIf="pipeline.running"
+ >
<i class="material-icons">stop</i>
</button>
</td>
</ng-container>
<ng-container matColumnDef="name">
- <th mat-header-cell mat-sort-header *matHeaderCellDef> Name</th>
+ <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let pipeline">
- <h4 style="margin-bottom:0px;">{{pipeline.name}}</h4>
- <h5>{{pipeline.description != '' ? pipeline.description : '-'}}</h5>
+ <h4 style="margin-bottom: 0px">{{ pipeline.name }}</h4>
+ <h5>
+ {{
+ pipeline.description !== '' ? pipeline.description : '-'
+ }}
+ </h5>
</td>
</ng-container>
<ng-container matColumnDef="lastModified">
- <th mat-header-cell *matHeaderCellDef> Created</th>
+ <th mat-header-cell *matHeaderCellDef>Created</th>
<td mat-cell *matCellDef="let pipeline">
- <h5>{{pipeline.createdAt | date:'dd.MM.yyyy HH:mm'}}</h5>
+ <h5>{{ pipeline.createdAt | date : 'dd.MM.yyyy HH:mm' }}</h5>
</td>
</ng-container>
<ng-container matColumnDef="action">
- <th mat-header-cell *matHeaderCellDef> Action</th>
+ <th mat-header-cell *matHeaderCellDef>Action</th>
<td mat-cell *matCellDef="let pipeline">
<div fxLayout="row">
- <span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">
- <button color="accent" mat-button mat-icon-button matTooltip="Show pipeline"
+ <span
+ fxFlex
+ fxFlexOrder="1"
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ >
+ <button
+ color="accent"
+ mat-button
+ mat-icon-button
+ matTooltip="Show pipeline"
matTooltipPosition="above"
- (click)="pipelineOperationsService.showPipelineDetails(pipeline._id)"><i
- class="material-icons">search</i>
- </button>
- </span>
- <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center" *ngIf="hasPipelineWritePrivileges">
- <button color="accent" mat-button mat-icon-button matTooltip="Modify pipeline"
+ (click)="
+ pipelineOperationsService.showPipelineDetails(
+ pipeline._id
+ )
+ "
+ >
+ <i class="material-icons">search</i>
+ </button>
+ </span>
+ <span
+ fxFlex
+ fxFlexOrder="2"
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ *ngIf="hasPipelineWritePrivileges"
+ >
+ <button
+ color="accent"
+ mat-button
+ mat-icon-button
+ matTooltip="Modify pipeline"
matTooltipPosition="above"
[disabled]="pipeline.running"
- (click)="pipelineOperationsService.modifyPipeline(pipeline._id)">
- <i class="material-icons">mode_edit</i>
- </button>
- </span>
- <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center" *ngIf="hasPipelineDeletePrivileges">
- <button color="accent" mat-button mat-icon-button matTooltip="Delete pipeline"
+ (click)="
+ pipelineOperationsService.modifyPipeline(
+ pipeline._id
+ )
+ "
+ >
+ <i class="material-icons">mode_edit</i>
+ </button>
+ </span>
+ <span
+ fxFlex
+ fxFlexOrder="3"
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ *ngIf="hasPipelineDeletePrivileges"
+ >
+ <button
+ color="accent"
+ mat-button
+ mat-icon-button
+ matTooltip="Delete pipeline"
matTooltipPosition="above"
- (click)="pipelineOperationsService.showDeleteDialog(pipeline, refreshPipelinesEmitter)"
- data-cy="delete-pipeline">
- <i class="material-icons">delete</i>
- </button>
- </span>
- <span fxFlex fxFlexOrder="4" fxLayout="row" fxLayoutAlign="center center" *ngIf="isAdmin">
- <button color="accent" mat-button mat-icon-button matTooltip="Permissions"
+ (click)="
+ pipelineOperationsService.showDeleteDialog(
+ pipeline,
+ refreshPipelinesEmitter
+ )
+ "
+ data-cy="delete-pipeline"
+ >
+ <i class="material-icons">delete</i>
+ </button>
+ </span>
+ <span
+ fxFlex
+ fxFlexOrder="4"
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ *ngIf="isAdmin"
+ >
+ <button
+ color="accent"
+ mat-button
+ mat-icon-button
+ matTooltip="Permissions"
matTooltipPosition="above"
- (click)="pipelineOperationsService.showPermissionsDialog(pipeline, refreshPipelinesEmitter)"
- data-cy="share">
- <i class="material-icons">share</i>
- </button>
- </span>
+ (click)="
+ pipelineOperationsService.showPermissionsDialog(
+ pipeline,
+ refreshPipelinesEmitter
+ )
+ "
+ data-cy="share"
+ >
+ <i class="material-icons">share</i>
+ </button>
+ </span>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
+ <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<div fxFlex="100" fxLayoutAlign="end end">
- <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="20"></mat-paginator>
+ <mat-paginator
+ [pageSizeOptions]="[5, 10, 25, 100]"
+ [pageSize]="20"
+ ></mat-paginator>
</div>
</div>
-<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="!filteredPipelinesAvailable">
+<div
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="!filteredPipelinesAvailable"
+>
<h5>(no pipelines available)</h5>
</div>
-
diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
index 7f1e8435c..909c88637 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
+++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
@@ -16,53 +16,52 @@
*
*/
-
.mat-table {
}
.mat-paginator {
- border-top: 1px solid rgba(0, 0, 0, .12);
+ border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.mat-row:nth-child(even) {
- background-color: var(--color-bg-1);
+ background-color: var(--color-bg-1);
}
.mat-row:nth-child(odd) {
- background-color: var(--color-bg-2);
+ background-color: var(--color-bg-2);
}
.mat-column-status {
- width: 100px;
- max-width: 100px;
+ width: 100px;
+ max-width: 100px;
}
.light {
- background-color:rgba(0, 0, 0, 0.3);
- border-radius:50%;
- width: 15px;
- height: 15px;
+ background-color: rgba(0, 0, 0, 0.3);
+ border-radius: 50%;
+ width: 15px;
+ height: 15px;
}
.light-red {
- background-color: red;
- box-shadow: 0 0 5px 2px red;
+ background-color: red;
+ box-shadow: 0 0 5px 2px red;
}
.light-yellow {
- background-color: #dede2d;
- box-shadow: 0 0 5px 2px #dede2d;
+ background-color: #dede2d;
+ box-shadow: 0 0 5px 2px #dede2d;
}
.light-green {
- background-color: green;
- box-shadow: 0 0 5px 2px green;
+ background-color: green;
+ box-shadow: 0 0 5px 2px green;
}
.light-neutral {
- background-color: #b4b4b4;
- box-shadow: 0 0 2px 1px #b4b4b4;
+ background-color: #b4b4b4;
+ box-shadow: 0 0 2px 1px #b4b4b4;
}
.ml-10 {
- margin-left: 10px;
+ margin-left: 10px;
}
diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
index a9a54461a..933c9484d 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
+++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
@@ -17,7 +17,14 @@
*/
import { Pipeline } from '@streampipes/platform-services';
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnInit,
+ Output,
+ ViewChild,
+} from '@angular/core';
import { PipelineOperationsService } from '../../services/pipeline-operations.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
@@ -26,110 +33,134 @@ import { AuthService } from '../../../services/auth.service';
import { UserRole } from '../../../_enums/user-role.enum';
import { UserPrivilege } from '../../../_enums/user-privilege.enum';
-
@Component({
- selector: 'pipeline-overview',
- templateUrl: './pipeline-overview.component.html',
- styleUrls: ['./pipeline-overview.component.scss']
+ selector: 'sp-pipeline-overview',
+ templateUrl: './pipeline-overview.component.html',
+ styleUrls: ['./pipeline-overview.component.scss'],
})
export class PipelineOverviewComponent implements OnInit {
+ _pipelines: Pipeline[];
+ _activeCategoryId: string;
- _pipelines: Pipeline[];
- _activeCategoryId: string;
+ filteredPipelinesAvailable = false;
- filteredPipelinesAvailable = false;
+ @Input()
+ pipelineToStart: Pipeline;
- @Input()
- pipelineToStart: Pipeline;
+ @Output()
+ refreshPipelinesEmitter: EventEmitter<boolean> =
+ new EventEmitter<boolean>();
- @Output()
- refreshPipelinesEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+ displayedColumns: string[] = [
+ 'status',
+ 'start',
+ 'name',
+ 'lastModified',
+ 'action',
+ ];
- displayedColumns: string[] = ['status', 'start', 'name', 'lastModified', 'action'];
+ dataSource: MatTableDataSource<Pipeline>;
- dataSource: MatTableDataSource<Pipeline>;
+ @ViewChild(MatPaginator) paginator: MatPaginator;
+ pageSize = 1;
- @ViewChild(MatPaginator) paginator: MatPaginator;
- pageSize = 1;
+ @ViewChild(MatSort) sort: MatSort;
- @ViewChild(MatSort) sort: MatSort;
+ starting: any;
+ stopping: any;
- starting: any;
- stopping: any;
+ isAdmin = false;
+ hasPipelineWritePrivileges = false;
+ hasPipelineDeletePrivileges = false;
- isAdmin = false;
- hasPipelineWritePrivileges = false;
- hasPipelineDeletePrivileges = false;
+ constructor(
+ public pipelineOperationsService: PipelineOperationsService,
+ private authService: AuthService,
+ ) {
+ this.starting = false;
+ this.stopping = false;
+ }
- constructor(public pipelineOperationsService: PipelineOperationsService,
- private authService: AuthService) {
- this.starting = false;
- this.stopping = false;
- }
+ ngOnInit() {
+ this.authService.user$.subscribe(user => {
+ this.isAdmin = user.roles.indexOf(UserRole.ROLE_ADMIN) > -1;
+ this.hasPipelineWritePrivileges = this.authService.hasRole(
+ UserPrivilege.PRIVILEGE_WRITE_PIPELINE,
+ );
+ this.hasPipelineDeletePrivileges = this.authService.hasRole(
+ UserPrivilege.PRIVILEGE_DELETE_PIPELINE,
+ );
+ });
+ this.toggleRunningOperation = this.toggleRunningOperation.bind(this);
+
+ if (this.pipelineToStart) {
+ if (!this.pipelineToStart.running) {
+ this.pipelineOperationsService.startPipeline(
+ this.pipelineToStart._id,
+ this.refreshPipelinesEmitter,
+ this.toggleRunningOperation,
+ );
+ }
+ }
+ }
- ngOnInit() {
- this.authService.user$.subscribe(user => {
- this.isAdmin = user.roles.indexOf(UserRole.ROLE_ADMIN) > -1;
- this.hasPipelineWritePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_WRITE_PIPELINE);
- this.hasPipelineDeletePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_DELETE_PIPELINE);
- });
- this.toggleRunningOperation = this.toggleRunningOperation.bind(this);
+ toggleRunningOperation(currentOperation) {
+ if (currentOperation === 'starting') {
+ this.starting = !this.starting;
+ } else {
+ this.stopping = !this.stopping;
+ }
+ }
- if (this.pipelineToStart) {
- if (!(this.pipelineToStart.running)) {
- this.pipelineOperationsService.startPipeline(this.pipelineToStart._id, this.refreshPipelinesEmitter, this.toggleRunningOperation);
- }
+ openPipelineNotificationsDialog(pipeline: Pipeline) {
+ this.pipelineOperationsService.showPipelineNotificationsDialog(
+ pipeline,
+ this.refreshPipelinesEmitter,
+ );
}
- }
- toggleRunningOperation(currentOperation) {
- if (currentOperation === 'starting') {
- this.starting = !(this.starting);
- } else {
- this.stopping = !(this.stopping);
+ get pipelines() {
+ return this._pipelines;
}
- }
-
- openPipelineNotificationsDialog(pipeline: Pipeline) {
- this.pipelineOperationsService.showPipelineNotificationsDialog(pipeline,
- this.refreshPipelinesEmitter);
- }
-
- get pipelines() {
- return this._pipelines;
- }
-
- @Input()
- set pipelines(pipelines: Pipeline[]) {
- this._pipelines = pipelines;
- this.addPipelinesToTable();
- }
-
- get activeCategoryId(): string {
- return this._activeCategoryId;
- }
-
- @Input()
- set activeCategoryId(activeCategoryId: string) {
- this._activeCategoryId = activeCategoryId;
- if (this._pipelines) {
- this.addPipelinesToTable();
+
+ @Input()
+ set pipelines(pipelines: Pipeline[]) {
+ this._pipelines = pipelines;
+ this.addPipelinesToTable();
+ }
+
+ get activeCategoryId(): string {
+ return this._activeCategoryId;
+ }
+
+ @Input()
+ set activeCategoryId(activeCategoryId: string) {
+ this._activeCategoryId = activeCategoryId;
+ if (this._pipelines) {
+ this.addPipelinesToTable();
+ }
+ }
+
+ addPipelinesToTable() {
+ this.dataSource = new MatTableDataSource<Pipeline>(
+ this.filterPipelines(),
+ );
+ setTimeout(() => {
+ this.dataSource.paginator = this.paginator;
+ this.dataSource.sort = this.sort;
+ });
+ }
+
+ filterPipelines(): Pipeline[] {
+ const filteredPipelines: Pipeline[] = this._pipelines.filter(
+ pipeline =>
+ !this._activeCategoryId ||
+ (pipeline.pipelineCategories &&
+ pipeline.pipelineCategories.some(
+ pc => pc === this.activeCategoryId,
+ )),
+ );
+ this.filteredPipelinesAvailable = filteredPipelines.length > 0;
+ return filteredPipelines.sort((a, b) => a.name.localeCompare(b.name));
}
- }
-
- addPipelinesToTable() {
- this.dataSource = new MatTableDataSource<Pipeline>(this.filterPipelines());
- setTimeout(() => {
- this.dataSource.paginator = this.paginator;
- this.dataSource.sort = this.sort;
- });
- }
-
- filterPipelines(): Pipeline[] {
- const filteredPipelines: Pipeline[] = this._pipelines
- .filter(pipeline => !(this._activeCategoryId) ||
- (pipeline.pipelineCategories && pipeline.pipelineCategories.some(pc => pc === this.activeCategoryId)));
- this.filteredPipelinesAvailable = filteredPipelines.length > 0;
- return filteredPipelines.sort((a, b) => a.name.localeCompare(b.name));
- }
}
diff --git a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
index 24f27216d..b9bbc7873 100644
--- a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
+++ b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.html
@@ -20,34 +20,68 @@
<div class="sp-dialog-content p-15">
<div *ngIf="!isInProgress" fxLayout="column">
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
- <b><h4>Do you really want to delete pipeline {{pipeline.name}}?</h4></b>
- <b><h4 *ngIf="pipeline.running">This pipeline is still running.</h4></b>
+ <b
+ ><h4>
+ Do you really want to delete pipeline
+ {{ pipeline.name }}?
+ </h4></b
+ >
+ <b
+ ><h4 *ngIf="pipeline.running">
+ This pipeline is still running.
+ </h4></b
+ >
<b><h5>This operation cannot be undone.</h5></b>
</div>
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
- <button mat-button mat-raised-button color="accent" *ngIf="!pipeline.running"
- (click)="deletePipeline()">Delete
- pipeline
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ *ngIf="!pipeline.running"
+ (click)="deletePipeline()"
+ >
+ Delete pipeline
</button>
- <button mat-button mat-raised-button color="accent" *ngIf="pipeline.running"
- (click)="stopAndDeletePipeline()"
- data-cy="sp-pipeline-stop-and-delete">
- Stop and
- delete pipeline
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ *ngIf="pipeline.running"
+ (click)="stopAndDeletePipeline()"
+ data-cy="sp-pipeline-stop-and-delete"
+ >
+ Stop and delete pipeline
</button>
</div>
</div>
- <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" *ngIf="isInProgress">
+ <div
+ fxFlex="100"
+ fxLayoutAlign="center center"
+ fxLayout="column"
+ *ngIf="isInProgress"
+ >
<div fxLayout="row" fxLayoutAlign="space-around">
- <mat-spinner [diameter]="50" [mode]="'indeterminate'" color="accent"></mat-spinner>
+ <mat-spinner
+ [diameter]="50"
+ [mode]="'indeterminate'"
+ color="accent"
+ ></mat-spinner>
</div>
- <b><h4>{{currentStatus}}</h4></b>
+ <b
+ ><h4>{{ currentStatus }}</h4></b
+ >
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
- <button mat-button mat-raised-button class="mat-basic" (click)="close(false)">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close(false)"
+ >
Close
</button>
</div>
diff --git a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.scss b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.scss
index 0a776e5ff..fddade7bf 100644
--- a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.scss
+++ b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.scss
@@ -16,4 +16,4 @@
*
*/
-@import '../../../../scss/sp/sp-dialog.scss';
\ No newline at end of file
+@import '../../../../scss/sp/sp-dialog.scss';
diff --git a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
index f812584a0..34f55646e 100644
--- a/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/delete-pipeline/delete-pipeline-dialog.component.ts
@@ -23,19 +23,19 @@ import { DialogRef } from '@streampipes/shared-ui';
@Component({
selector: 'sp-delete-pipeline-dialog',
templateUrl: './delete-pipeline-dialog.component.html',
- styleUrls: ['./delete-pipeline-dialog.component.scss']
+ styleUrls: ['./delete-pipeline-dialog.component.scss'],
})
export class DeletePipelineDialogComponent {
-
@Input()
pipeline: Pipeline;
isInProgress = false;
currentStatus: any;
- constructor(private dialogRef: DialogRef<DeletePipelineDialogComponent>,
- private pipelineService: PipelineService) {
- }
+ constructor(
+ private dialogRef: DialogRef<DeletePipelineDialogComponent>,
+ private pipelineService: PipelineService,
+ ) {}
close(refreshPipelines: boolean) {
this.dialogRef.close(refreshPipelines);
@@ -44,7 +44,8 @@ export class DeletePipelineDialogComponent {
deletePipeline() {
this.isInProgress = true;
this.currentStatus = 'Deleting pipeline...';
- this.pipelineService.deleteOwnPipeline(this.pipeline._id)
+ this.pipelineService
+ .deleteOwnPipeline(this.pipeline._id)
.subscribe(data => {
this.close(true);
});
@@ -53,11 +54,13 @@ export class DeletePipelineDialogComponent {
stopAndDeletePipeline() {
this.isInProgress = true;
this.currentStatus = 'Stopping pipeline...';
- this.pipelineService.stopPipeline(this.pipeline._id)
- .subscribe(data => {
- this.deletePipeline();
- }, data => {
+ this.pipelineService.stopPipeline(this.pipeline._id).subscribe(
+ data => {
this.deletePipeline();
- });
+ },
+ data => {
+ this.deletePipeline();
+ },
+ );
}
}
diff --git a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.html b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.html
index 168191f84..6b33ca0b4 100644
--- a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.html
+++ b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.html
@@ -20,48 +20,86 @@
<div class="sp-dialog-content p-15">
<div fxFlex="100">
<!-- Select element to visualize -->
- <div fxFlex="100" style="margin:5px;width:100%">
- <div *ngIf="page == 'upload-pipelines'">
- <h4>{{pages[0].description}}</h4>
- <input type="file"
- id="file"
- (change)="handleFileInput($event.target.files)">
-<!-- <button mat-button ngf-select="ctrl.upload($file)">Upload Pipeline JSON</button>-->
+ <div fxFlex="100" style="margin: 5px; width: 100%">
+ <div *ngIf="page === 'upload-pipelines'">
+ <h4>{{ pages[0].description }}</h4>
+ <input
+ type="file"
+ id="file"
+ (change)="handleFileInput($event.target.files)"
+ />
+ <!-- <button mat-button ngf-select="ctrl.upload($file)">Upload Pipeline JSON</button>-->
</div>
<!-- Select Type -->
- <div *ngIf="page == 'select-pipelines'">
- <h4>{{pages[1].description}}</h4>
+ <div *ngIf="page === 'select-pipelines'">
+ <h4>{{ pages[1].description }}</h4>
<div *ngFor="let availablePipeline of availablePipelines">
- <mat-checkbox (click)="toggleSelectedPipeline(availablePipeline)">
- {{availablePipeline.name}}
+ <mat-checkbox
+ (click)="toggleSelectedPipeline(availablePipeline)"
+ >
+ {{ availablePipeline.name }}
</mat-checkbox>
</div>
</div>
<!-- Select Scheme -->
<div ng-if="page == 'import-pipelines'">
- <div fxLayout="column" fxLayoutAlign="center center" *ngIf="importing">
- <b><h4>{{pages[2].description}}</h4></b>
- <mat-spinner [mode]="'indeterminate'" class="md-accent"
- ></mat-spinner>
- <b><h4>Importing {{selectedPipelines.length}} {{selectedPipelines.length == 1 ? 'pipeline' : 'pipelines'}}...</h4></b>
+ <div
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="importing"
+ >
+ <b
+ ><h4>{{ pages[2].description }}</h4></b
+ >
+ <mat-spinner
+ [mode]="'indeterminate'"
+ class="md-accent"
+ ></mat-spinner>
+ <b
+ ><h4>
+ Importing {{ selectedPipelines.length }}
+ {{
+ selectedPipelines.length === 1
+ ? 'pipeline'
+ : 'pipelines'
+ }}...
+ </h4></b
+ >
</div>
</div>
-
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
- <button mat-button mat-raised-button class="mat-basic" (click)="close(false)" style="margin-right:10px;">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close(false)"
+ style="margin-right: 10px"
+ >
Close
</button>
- <button mat-button mat-raised-button class="mat-basic" (click)="back()" *ngIf="!('upload-pipelines'===page)" style="margin-right:10px;">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="back()"
+ *ngIf="!('upload-pipelines' === page)"
+ style="margin-right: 10px"
+ >
Back
</button>
- <button mat-button mat-raised-button color="accent" (click)="startImport()"
- *ngIf="page === 'select-pipelines'">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="startImport()"
+ *ngIf="page === 'select-pipelines'"
+ >
Import
</button>
</div>
diff --git a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.scss b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.scss
index 0a776e5ff..fddade7bf 100644
--- a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.scss
+++ b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.scss
@@ -16,4 +16,4 @@
*
*/
-@import '../../../../scss/sp/sp-dialog.scss';
\ No newline at end of file
+@import '../../../../scss/sp/sp-dialog.scss';
diff --git a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts
index b790afaf0..2dfd2178f 100644
--- a/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/import-pipeline/import-pipeline-dialog.component.ts
@@ -24,10 +24,9 @@ import { forkJoin } from 'rxjs';
@Component({
selector: 'sp-import-pipeline-dialog',
templateUrl: './import-pipeline-dialog.component.html',
- styleUrls: ['./import-pipeline-dialog.component.scss']
+ styleUrls: ['./import-pipeline-dialog.component.scss'],
})
export class ImportPipelineDialogComponent {
-
currentStatus: any;
page = 'upload-pipelines';
@@ -36,23 +35,29 @@ export class ImportPipelineDialogComponent {
importing = false;
- pages = [{
- type: 'upload-pipelines',
- title: 'Upload',
- description: 'Upload a json file containing the pipelines to import'
- }, {
- type: 'select-pipelines',
- title: 'Select pipelines',
- description: 'Select the pipelines to import'
- }, {
- type: 'import-pipelines',
- title: 'Import',
- description: ''
- }];
+ pages = [
+ {
+ type: 'upload-pipelines',
+ title: 'Upload',
+ description:
+ 'Upload a json file containing the pipelines to import',
+ },
+ {
+ type: 'select-pipelines',
+ title: 'Select pipelines',
+ description: 'Select the pipelines to import',
+ },
+ {
+ type: 'import-pipelines',
+ title: 'Import',
+ description: '',
+ },
+ ];
- constructor(private pipelineService: PipelineService,
- private dialogRef: DialogRef<ImportPipelineDialogComponent>) {
- }
+ constructor(
+ private pipelineService: PipelineService,
+ private dialogRef: DialogRef<ImportPipelineDialogComponent>,
+ ) {}
handleFileInput(files: any) {
const file = files[0];
@@ -79,24 +84,27 @@ export class ImportPipelineDialogComponent {
toggleSelectedPipeline(pipeline: Pipeline) {
if (this.selectedPipelines.some(p => p._id === pipeline._id)) {
- this.selectedPipelines.splice(this.selectedPipelines.findIndex(sp => sp._id === pipeline._id), 1);
+ this.selectedPipelines.splice(
+ this.selectedPipelines.findIndex(sp => sp._id === pipeline._id),
+ 1,
+ );
} else {
this.selectedPipelines.push(pipeline);
}
}
storePipelines() {
- const promises = [];
- this.selectedPipelines.forEach(pipeline => {
- pipeline._rev = undefined;
- pipeline._id = undefined;
- promises.push(this.pipelineService.storePipeline(pipeline));
- });
+ const promises = [];
+ this.selectedPipelines.forEach(pipeline => {
+ pipeline._rev = undefined;
+ pipeline._id = undefined;
+ promises.push(this.pipelineService.storePipeline(pipeline));
+ });
- forkJoin(promises).subscribe(results => {
- this.importing = false;
- this.close(true);
- });
+ forkJoin(promises).subscribe(results => {
+ this.importing = false;
+ this.close(true);
+ });
}
startImport() {
@@ -104,5 +112,4 @@ export class ImportPipelineDialogComponent {
this.importing = true;
this.storePipelines();
}
-
}
diff --git a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
index dab840ca5..1ff1df01d 100644
--- a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
+++ b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
@@ -18,94 +18,224 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15">
- <div *ngFor="let pipelineCategory of pipelineCategories" fxLayout="column">
- <div style="border: 5px;border-color:blue;">
+ <div
+ *ngFor="let pipelineCategory of pipelineCategories"
+ fxLayout="column"
+ >
+ <div style="border: 5px; border-color: blue">
<div fxFlex="80" fxLayout="column">
<div fxFlex fxLayout="column">
- <h4><b>{{pipelineCategory.categoryName}}</b></h4>
- <h5><i>{{pipelineCategory.categoryDescription}}</i></h5>
- <div *ngIf="categoryDetailsVisible[pipelineCategory._id]">
- <div *ngIf="addPipelineToCategorySelected[pipelineCategory._id]"
- style="padding:10px;">
- <div class="md-list-item-text" fxFlex="80" fxLayout="column">
- <mat-select [(ngModel)]="selectedPipelineId"
- placeholder="Select Pipeline">
+ <h4>
+ <b>{{ pipelineCategory.categoryName }}</b>
+ </h4>
+ <h5>
+ <i>{{ pipelineCategory.categoryDescription }}</i>
+ </h5>
+ <div
+ *ngIf="categoryDetailsVisible[pipelineCategory._id]"
+ >
+ <div
+ *ngIf="
+ addPipelineToCategorySelected[
+ pipelineCategory._id
+ ]
+ "
+ style="padding: 10px"
+ >
+ <div
+ class="md-list-item-text"
+ fxFlex="80"
+ fxLayout="column"
+ >
+ <mat-select
+ [(ngModel)]="selectedPipelineId"
+ placeholder="Select Pipeline"
+ >
<mat-option
- *ngFor="let pipeline of pipelines | categoryAlreadyInPipelineFilter: pipelineCategory._id"
- [value]="pipeline._id">
- <b>{{pipeline.name}}</b><br/>
+ *ngFor="
+ let pipeline of pipelines
+ | categoryAlreadyInPipelineFilter
+ : pipelineCategory._id
+ "
+ [value]="pipeline._id"
+ >
+ <b>{{ pipeline.name }}</b
+ ><br />
</mat-option>
<mat-option
- *ngFor="let systemPipeline of systemPipelines | categoryAlreadyInPipelineFilter: pipelineCategory._id"
- [value]="systemPipeline._id">
- <b>{{systemPipeline.name}}</b><br/>
+ *ngFor="
+ let systemPipeline of systemPipelines
+ | categoryAlreadyInPipelineFilter
+ : pipelineCategory._id
+ "
+ [value]="systemPipeline._id"
+ >
+ <b>{{ systemPipeline.name }}</b
+ ><br />
</mat-option>
</mat-select>
</div>
- <div class="md-list-item-text" fxFlex="20" fxLayout="row"
- fxLayoutAlign="end center">
- <div fxFlex="50" fxLayout="row" fxLayoutAlign="center end">
- <button mat-button mat-icon-button
- (click)="addPipelineToCategory(pipelineCategory)"
- color="accent">
+ <div
+ class="md-list-item-text"
+ fxFlex="20"
+ fxLayout="row"
+ fxLayoutAlign="end center"
+ >
+ <div
+ fxFlex="50"
+ fxLayout="row"
+ fxLayoutAlign="center end"
+ >
+ <button
+ mat-button
+ mat-icon-button
+ (click)="
+ addPipelineToCategory(
+ pipelineCategory
+ )
+ "
+ color="accent"
+ >
<mat-icon>save</mat-icon>
</button>
</div>
- <div fxFlex="50" fxLayout="row" fxLayoutAlign="center end">
- <button mat-button mat-icon-button
- (click)="showAddToCategoryInput(pipelineCategory._id, false)"
- color="accent">
+ <div
+ fxFlex="50"
+ fxLayout="row"
+ fxLayoutAlign="center end"
+ >
+ <button
+ mat-button
+ mat-icon-button
+ (click)="
+ showAddToCategoryInput(
+ pipelineCategory._id,
+ false
+ )
+ "
+ color="accent"
+ >
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
- <div *ngFor="let pipeline of pipelines | pipelineInCategoryFilter: pipelineCategory._id">
- <div class="md-list-item-text" fxFlex="80" fxLayout="column">
- {{pipeline.name}}
+ <div
+ *ngFor="
+ let pipeline of pipelines
+ | pipelineInCategoryFilter
+ : pipelineCategory._id
+ "
+ >
+ <div
+ class="md-list-item-text"
+ fxFlex="80"
+ fxLayout="column"
+ >
+ {{ pipeline.name }}
</div>
- <div class="md-list-item-text" fxFlex="20" fxLayout="column"
- fxLayoutAlign="end center">
- <button mat-button mat-icon-button
- (click)="removePipelineFromCategory(pipeline, pipelineCategory._id)"
- color="accent">
+ <div
+ class="md-list-item-text"
+ fxFlex="20"
+ fxLayout="column"
+ fxLayoutAlign="end center"
+ >
+ <button
+ mat-button
+ mat-icon-button
+ (click)="
+ removePipelineFromCategory(
+ pipeline,
+ pipelineCategory._id
+ )
+ "
+ color="accent"
+ >
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
-
</div>
<div fxFlex="20" fxLayout="row">
- <div class="md-list-item-text" fxFlex="33" fxLayout="row" fxLayoutAlign="center start">
- <button mat-button mat-icon-button *ngIf="categoryDetailsVisible[pipelineCategory._id]"
- (click)="toggleCategoryDetailsVisibility(pipelineCategory._id)"
- color="accent"
- matTooltip="Hide Details" matTooltipPosition="above">
+ <div
+ class="md-list-item-text"
+ fxFlex="33"
+ fxLayout="row"
+ fxLayoutAlign="center start"
+ >
+ <button
+ mat-button
+ mat-icon-button
+ *ngIf="categoryDetailsVisible[pipelineCategory._id]"
+ (click)="
+ toggleCategoryDetailsVisibility(
+ pipelineCategory._id
+ )
+ "
+ color="accent"
+ matTooltip="Hide Details"
+ matTooltipPosition="above"
+ >
<mat-icon>expand_less</mat-icon>
</button>
- <button mat-button mat-icon-button
- *ngIf="!categoryDetailsVisible[pipelineCategory._id]"
- (click)="toggleCategoryDetailsVisibility(pipelineCategory._id)"
- color="accent"
- matTooltip="Show Details" matTooltipPosition="above">
+ <button
+ mat-button
+ mat-icon-button
+ *ngIf="
+ !categoryDetailsVisible[pipelineCategory._id]
+ "
+ (click)="
+ toggleCategoryDetailsVisibility(
+ pipelineCategory._id
+ )
+ "
+ color="accent"
+ matTooltip="Show Details"
+ matTooltipPosition="above"
+ >
<mat-icon>expand_more</mat-icon>
</button>
</div>
- <div class="md-list-item-text" fxFlex="33" fxLayout="row" fxLayoutAlign="center start">
- <button mat-button mat-icon-button
- (click)="showAddToCategoryInput(pipelineCategory._id, true)"
- color="accent"
- matTooltip="Add Pipeline To Category" matTooltipPosition="above">
+ <div
+ class="md-list-item-text"
+ fxFlex="33"
+ fxLayout="row"
+ fxLayoutAlign="center start"
+ >
+ <button
+ mat-button
+ mat-icon-button
+ (click)="
+ showAddToCategoryInput(
+ pipelineCategory._id,
+ true
+ )
+ "
+ color="accent"
+ matTooltip="Add Pipeline To Category"
+ matTooltipPosition="above"
+ >
<mat-icon>add_circle_outline</mat-icon>
</button>
</div>
- <div class="md-list-item-text" flex="33" layout="row" layout-align="center start">
- <button mat-button mat-icon-button
- (click)="deletePipelineCategory(pipelineCategory._id)"
- color="accent"
- matTooltip="Delete Category" matTooltipPosition="above">
+ <div
+ class="md-list-item-text"
+ flex="33"
+ layout="row"
+ layout-align="center start"
+ >
+ <button
+ mat-button
+ mat-icon-button
+ (click)="
+ deletePipelineCategory(pipelineCategory._id)
+ "
+ color="accent"
+ matTooltip="Delete Category"
+ matTooltipPosition="above"
+ >
<mat-icon>delete</mat-icon>
</button>
</div>
@@ -117,29 +247,50 @@
<div class="md-list-item-text" fxFlex="20" fxLayout="column">
<mat-form-field color="accent">
<mat-label>Name</mat-label>
- <input matInput type="text" [(ngModel)]="newCategoryName">
+ <input matInput type="text" [(ngModel)]="newCategoryName" />
</mat-form-field>
</div>
<div class="md-list-item-text" fxFlex="60" fxLayout="column">
<mat-form-field color="accent">
<mat-label>Description</mat-label>
- <input matInput type="text" [(ngModel)]="newCategoryDescription">
+ <input
+ matInput
+ type="text"
+ [(ngModel)]="newCategoryDescription"
+ />
</mat-form-field>
</div>
<div class="md-list-item-text" fxFlex="20" fxLayout="column">
- <button mat-button mat-icon-button (click)="addPipelineCategory()" color="accent"
- class="md-accent md-icon-button">
+ <button
+ mat-button
+ mat-icon-button
+ (click)="addPipelineCategory()"
+ color="accent"
+ class="md-accent md-icon-button"
+ >
<mat-icon>save</mat-icon>
</button>
</div>
</div>
- <div style="margin-top:10px;">
- <button mat-button mat-raised-button color="accent" (click)="showAddInput()">Add Category</button>
+ <div style="margin-top: 10px">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="showAddInput()"
+ >
+ Add Category
+ </button>
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
- <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close()"
+ >
Close
</button>
</div>
diff --git a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.scss b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.scss
index 0a776e5ff..fddade7bf 100644
--- a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.scss
+++ b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.scss
@@ -16,4 +16,4 @@
*
*/
-@import '../../../../scss/sp/sp-dialog.scss';
\ No newline at end of file
+@import '../../../../scss/sp/sp-dialog.scss';
diff --git a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
index c39745262..e480e4ecc 100644
--- a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
@@ -17,16 +17,19 @@
*/
import { Component, Input, OnInit } from '@angular/core';
-import { Pipeline, PipelineCategory, PipelineService } from '@streampipes/platform-services';
+import {
+ Pipeline,
+ PipelineCategory,
+ PipelineService,
+} from '@streampipes/platform-services';
import { DialogRef } from '@streampipes/shared-ui';
@Component({
selector: 'sp-pipeline-categories-dialog',
templateUrl: './pipeline-categories-dialog.component.html',
- styleUrls: ['./pipeline-categories-dialog.component.scss']
+ styleUrls: ['./pipeline-categories-dialog.component.scss'],
})
export class PipelineCategoriesDialogComponent implements OnInit {
-
addSelected: any;
addPipelineToCategorySelected: any;
@@ -44,8 +47,10 @@ export class PipelineCategoriesDialogComponent implements OnInit {
@Input()
systemPipelines: Pipeline[];
- constructor(private pipelineService: PipelineService,
- private dialogRef: DialogRef<PipelineCategoriesDialogComponent>) {
+ constructor(
+ private pipelineService: PipelineService,
+ private dialogRef: DialogRef<PipelineCategoriesDialogComponent>,
+ ) {
this.addSelected = false;
this.addPipelineToCategorySelected = [];
this.categoryDetailsVisible = [];
@@ -58,14 +63,16 @@ export class PipelineCategoriesDialogComponent implements OnInit {
}
toggleCategoryDetailsVisibility(categoryId) {
- this.categoryDetailsVisible[categoryId] = !this.categoryDetailsVisible[categoryId];
+ this.categoryDetailsVisible[categoryId] =
+ !this.categoryDetailsVisible[categoryId];
}
-
addPipelineToCategory(pipelineCategory) {
console.log(pipelineCategory);
const pipeline = this.findPipeline(this.selectedPipelineId);
- if (pipeline['pipelineCategories'] === undefined) { pipeline['pipelineCategories'] = []; }
+ if (pipeline['pipelineCategories'] === undefined) {
+ pipeline['pipelineCategories'] = [];
+ }
pipeline['pipelineCategories'].push(pipelineCategory._id);
this.storeUpdatedPipeline(pipeline);
}
@@ -77,12 +84,11 @@ export class PipelineCategoriesDialogComponent implements OnInit {
}
storeUpdatedPipeline(pipeline) {
- this.pipelineService.updatePipeline(pipeline)
- .subscribe(msg => {
- // this.refreshPipelines();
- // this.getPipelineCategories();
- this.fetchPipelineCategories();
- });
+ this.pipelineService.updatePipeline(pipeline).subscribe(msg => {
+ // this.refreshPipelines();
+ // this.getPipelineCategories();
+ this.fetchPipelineCategories();
+ });
}
findPipeline(pipelineId) {
@@ -99,7 +105,8 @@ export class PipelineCategoriesDialogComponent implements OnInit {
const newCategory: any = {};
newCategory.categoryName = this.newCategoryName;
newCategory.categoryDescription = this.newCategoryDescription;
- this.pipelineService.storePipelineCategory(newCategory)
+ this.pipelineService
+ .storePipelineCategory(newCategory)
.subscribe(data => {
this.fetchPipelineCategories();
this.addSelected = false;
@@ -107,15 +114,14 @@ export class PipelineCategoriesDialogComponent implements OnInit {
}
fetchPipelineCategories() {
- this.pipelineService.getPipelineCategories()
+ this.pipelineService
+ .getPipelineCategories()
.subscribe(pipelineCategories => {
this.pipelineCategories = pipelineCategories;
});
}
- fetchPipelines() {
-
- }
+ fetchPipelines() {}
showAddToCategoryInput(categoryId, show) {
this.addPipelineToCategorySelected[categoryId] = show;
@@ -124,7 +130,8 @@ export class PipelineCategoriesDialogComponent implements OnInit {
}
deletePipelineCategory(pipelineId) {
- this.pipelineService.deletePipelineCategory(pipelineId)
+ this.pipelineService
+ .deletePipelineCategory(pipelineId)
.subscribe(data => {
this.fetchPipelineCategories();
});
diff --git a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
index 3812194fc..6bf9f1c80 100644
--- a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
+++ b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.html
@@ -18,17 +18,23 @@
<div class="sp-dialog-container" fxLayout="column">
<div class="sp-dialog-content p-15" fxFlex="100" fxLayout="column">
- <div class="info-message">Pipeline health monitoring discovered the following issues:</div>
+ <div class="info-message">
+ Pipeline health monitoring discovered the following issues:
+ </div>
<div class="log-message" fxFlex="100" fxLayout="column">
<span *ngFor="let notification of pipeline.pipelineNotifications">
- <p>{{notification}}</p>
+ <p>{{ notification }}</p>
</span>
</div>
-
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
- <button mat-button mat-raised-button color="accent" (click)="acknowledgeAndClose()">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="acknowledgeAndClose()"
+ >
Acknowledge
</button>
</div>
diff --git a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.scss b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.scss
index 0a47a46ac..ed322482a 100644
--- a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.scss
+++ b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.scss
@@ -20,16 +20,16 @@
@import '../../../../scss/sp/sp-dialog.scss';
.log-message {
- background-color: black;
- font: 11pt Inconsolata, monospace;
- text-shadow: 0 0 5px #C8C8C8;
- color: white;
- padding: 10px;
- max-width: 100%;
+ background-color: black;
+ font: 11pt Inconsolata, monospace;
+ text-shadow: 0 0 5px #c8c8c8;
+ color: white;
+ padding: 10px;
+ max-width: 100%;
}
.info-message {
- font-size: 12pt;
- margin-top: 10px;
- margin-bottom: 5px;
+ font-size: 12pt;
+ margin-top: 10px;
+ margin-bottom: 5px;
}
diff --git a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
index dbdde3e7f..c3f4637c7 100644
--- a/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-notifications/pipeline-notifications.component.ts
@@ -18,33 +18,29 @@
import { DialogRef } from '@streampipes/shared-ui';
import { Pipeline, PipelineService } from '@streampipes/platform-services';
-import { Component, Input, OnInit } from '@angular/core';
-
+import { Component, Input } from '@angular/core';
@Component({
- selector: 'sp-pipeline-notifications',
- templateUrl: './pipeline-notifications.component.html',
- styleUrls: ['./pipeline-notifications.component.scss']
+ selector: 'sp-pipeline-notifications',
+ templateUrl: './pipeline-notifications.component.html',
+ styleUrls: ['./pipeline-notifications.component.scss'],
})
-export class PipelineNotificationsComponent implements OnInit {
-
- @Input()
- pipeline: Pipeline;
-
- constructor(private dialogRef: DialogRef<PipelineNotificationsComponent>,
- private pipelineService: PipelineService) {
- }
+export class PipelineNotificationsComponent {
+ @Input()
+ pipeline: Pipeline;
- ngOnInit(): void {
- }
+ constructor(
+ private dialogRef: DialogRef<PipelineNotificationsComponent>,
+ private pipelineService: PipelineService,
+ ) {}
- acknowledgeAndClose() {
- this.pipeline.pipelineNotifications = [];
- if (this.pipeline.healthStatus === 'REQUIRES_ATTENTION') {
- this.pipeline.healthStatus = 'OK';
+ acknowledgeAndClose() {
+ this.pipeline.pipelineNotifications = [];
+ if (this.pipeline.healthStatus === 'REQUIRES_ATTENTION') {
+ this.pipeline.healthStatus = 'OK';
+ }
+ this.pipelineService.updatePipeline(this.pipeline).subscribe(msg => {
+ this.dialogRef.close();
+ });
}
- this.pipelineService.updatePipeline(this.pipeline).subscribe(msg => {
- this.dialogRef.close();
- });
- }
}
diff --git a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
index ba92a1dee..048f2c569 100644
--- a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
+++ b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.html
@@ -17,23 +17,51 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15">
- <div class="sp-dialog-content p-15" fxLayout="column" fxLayoutAlign="center center" fxFlex="100">
- <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" *ngIf="operationInProgress">
+ <div
+ class="sp-dialog-content p-15"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ fxFlex="100"
+ >
+ <div
+ fxFlex="100"
+ fxLayoutAlign="center center"
+ fxLayout="column"
+ *ngIf="operationInProgress"
+ >
<div fxFlex="100" fxLayoutAlign="center center">
- <mat-spinner color="accent"
- [diameter]="50"
- fxLayoutAlign="center"
- style="margin: 10px 0 5px 0">{{action == 0 ? "Starting..." : "Stopping"}}
+ <mat-spinner
+ color="accent"
+ [diameter]="50"
+ fxLayoutAlign="center"
+ style="margin: 10px 0 5px 0"
+ >{{ action === 0 ? 'Starting...' : 'Stopping' }}
</mat-spinner>
</div>
- <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
- <h3>Please wait while the pipeline is {{action == 0 ? "starting..." : "stopping"}}...</h3>
+ <div
+ fxFlex="100"
+ fxLayoutAlign="center center"
+ fxLayout="column"
+ >
+ <h3>
+ Please wait while the pipeline is
+ {{ action === 0 ? 'starting...' : 'stopping' }}...
+ </h3>
</div>
</div>
- <div *ngIf="!operationInProgress && forceStopActive" fxLayout="column" fxLayoutAlign="center center"
- fxFlex="100">
- <div class="success-message" fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
+ <div
+ *ngIf="!operationInProgress && forceStopActive"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ fxFlex="100"
+ >
+ <div
+ class="success-message"
+ fxFlex="100"
+ fxLayoutAlign="center center"
+ fxLayout="column"
+ >
<div fxLayout="row">
<mat-icon color="accent">done</mat-icon>
<span> Forced stop successful</span>
@@ -42,21 +70,27 @@
</div>
<sp-pipeline-started-status
- *ngIf="!operationInProgress && !forceStopActive"
- [pipelineOperationStatus]="pipelineOperationStatus"
- [action]="action"
- (forceStopPipelineEmitter)="forceStopPipeline()"
- fxLayout="column" fxLayoutAlign="center center" fxFlex="100">
+ *ngIf="!operationInProgress && !forceStopActive"
+ [pipelineOperationStatus]="pipelineOperationStatus"
+ [action]="action"
+ (forceStopPipelineEmitter)="forceStopPipeline()"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ fxFlex="100"
+ >
</sp-pipeline-started-status>
-
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
- <button mat-button mat-raised-button class="mat-basic"
- (click)="close()"
- data-cy="sp-pipeline-dialog-close">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close()"
+ data-cy="sp-pipeline-dialog-close"
+ >
Close
</button>
</div>
diff --git a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.scss b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.scss
index dc367af0a..22d12079d 100644
--- a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.scss
+++ b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.scss
@@ -20,44 +20,44 @@
@import '../../../../scss/sp/sp-dialog.scss';
.success-text {
- font-size:14pt;
+ font-size: 14pt;
}
.error-message {
- background-color: black;
- font: 1.3rem Inconsolata, monospace;
- text-shadow: 0 0 5px #C8C8C8;
- color: white;
- padding: 10px;
- width: 100%;
+ background-color: black;
+ font: 1.3rem Inconsolata, monospace;
+ text-shadow: 0 0 5px #c8c8c8;
+ color: white;
+ padding: 10px;
+ width: 100%;
}
.success-message {
- text-align: center;
- font-size: 14pt;
- margin-top: 20px;
- margin-bottom: 20px;
+ text-align: center;
+ font-size: 14pt;
+ margin-top: 20px;
+ margin-bottom: 20px;
}
.message-small {
- text-align: center;
- font-size: 11pt;
- margin-top: 10px;
- margin-bottom: 10px;
+ text-align: center;
+ font-size: 11pt;
+ margin-top: 10px;
+ margin-bottom: 10px;
}
.ml-5 {
- margin-left: 5px;
+ margin-left: 5px;
}
.mt-10 {
- margin-top: 10px;
+ margin-top: 10px;
}
.w-100 {
- width: 100%;
+ width: 100%;
}
.ml-10 {
- margin-left: 10px;
+ margin-left: 10px;
}
diff --git a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
index d4b0d8c8c..c60548217 100644
--- a/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-status/pipeline-status-dialog.component.ts
@@ -17,99 +17,107 @@
*/
import { DialogRef } from '@streampipes/shared-ui';
-import { PipelineOperationStatus, PipelineService } from '@streampipes/platform-services';
+import {
+ PipelineOperationStatus,
+ PipelineService,
+} from '@streampipes/platform-services';
import { Component, Input, OnInit } from '@angular/core';
import { PipelineAction } from '../../model/pipeline-model';
import { ShepherdService } from '../../../services/tour/shepherd.service';
-
@Component({
- selector: 'sp-pipeline-status-dialog',
- templateUrl: './pipeline-status-dialog.component.html',
- styleUrls: ['./pipeline-status-dialog.component.scss']
+ selector: 'sp-pipeline-status-dialog',
+ templateUrl: './pipeline-status-dialog.component.html',
+ styleUrls: ['./pipeline-status-dialog.component.scss'],
})
export class PipelineStatusDialogComponent implements OnInit {
+ operationInProgress = true;
+ forceStopActive = false;
+ pipelineOperationStatus: PipelineOperationStatus;
- operationInProgress = true;
- forceStopActive = false;
- pipelineOperationStatus: PipelineOperationStatus;
-
- @Input()
- pipelineId: string;
+ @Input()
+ pipelineId: string;
- @Input()
- action: PipelineAction;
+ @Input()
+ action: PipelineAction;
- constructor(private dialogRef: DialogRef<PipelineStatusDialogComponent>,
- private pipelineService: PipelineService,
- private shepherdService: ShepherdService) {
- }
+ constructor(
+ private dialogRef: DialogRef<PipelineStatusDialogComponent>,
+ private pipelineService: PipelineService,
+ private shepherdService: ShepherdService,
+ ) {}
- ngOnInit(): void {
- if (this.action === PipelineAction.Start) {
- this.startPipeline();
- } else {
- this.stopPipeline();
+ ngOnInit(): void {
+ if (this.action === PipelineAction.Start) {
+ this.startPipeline();
+ } else {
+ this.stopPipeline();
+ }
}
- }
-
- close() {
- this.dialogRef.close();
- }
-
-
- startPipeline() {
- this.pipelineService.startPipeline(this.pipelineId).subscribe(msg => {
- this.pipelineOperationStatus = msg;
- this.operationInProgress = false;
- if (this.shepherdService.isTourActive()) {
- this.shepherdService.trigger('pipeline-started');
- }
- }, error => {
- this.operationInProgress = false;
- this.pipelineOperationStatus = {
- title: 'Network Error',
- success: false,
- pipelineId: undefined,
- pipelineName: undefined,
- elementStatus: []
- };
- });
- }
- stopPipeline() {
- this.pipelineService.stopPipeline(this.pipelineId).subscribe(msg => {
- this.pipelineOperationStatus = msg;
- this.operationInProgress = false;
- }, error => {
- this.operationInProgress = false;
- this.pipelineOperationStatus = {
- title: 'Network Error',
- success: false,
- pipelineId: undefined,
- pipelineName: undefined,
- elementStatus: []
- };
- });
- }
+ close() {
+ this.dialogRef.close();
+ }
- forceStopPipeline() {
- this.operationInProgress = true;
- this.forceStopActive = true;
- this.pipelineService.stopPipeline(this.pipelineId, true).subscribe(msg => {
- this.pipelineOperationStatus = msg;
- this.operationInProgress = false;
- }, error => {
- this.operationInProgress = false;
- this.pipelineOperationStatus = {
- title: 'Network Error',
- success: false,
- pipelineId: undefined,
- pipelineName: undefined,
- elementStatus: []
- };
- });
- }
+ startPipeline() {
+ this.pipelineService.startPipeline(this.pipelineId).subscribe(
+ msg => {
+ this.pipelineOperationStatus = msg;
+ this.operationInProgress = false;
+ if (this.shepherdService.isTourActive()) {
+ this.shepherdService.trigger('pipeline-started');
+ }
+ },
+ error => {
+ this.operationInProgress = false;
+ this.pipelineOperationStatus = {
+ title: 'Network Error',
+ success: false,
+ pipelineId: undefined,
+ pipelineName: undefined,
+ elementStatus: [],
+ };
+ },
+ );
+ }
+ stopPipeline() {
+ this.pipelineService.stopPipeline(this.pipelineId).subscribe(
+ msg => {
+ this.pipelineOperationStatus = msg;
+ this.operationInProgress = false;
+ },
+ error => {
+ this.operationInProgress = false;
+ this.pipelineOperationStatus = {
+ title: 'Network Error',
+ success: false,
+ pipelineId: undefined,
+ pipelineName: undefined,
+ elementStatus: [],
+ };
+ },
+ );
+ }
+ forceStopPipeline() {
+ this.operationInProgress = true;
+ this.forceStopActive = true;
+ this.pipelineService.stopPipeline(this.pipelineId, true).subscribe(
+ msg => {
+ this.pipelineOperationStatus = msg;
+ this.operationInProgress = false;
+ },
+ error => {
+ this.operationInProgress = false;
+ this.pipelineOperationStatus = {
+ title: 'Network Error',
+ success: false,
+ pipelineId: undefined,
+ pipelineName: undefined,
+ elementStatus: [],
+ };
+ },
+ );
+ }
}
diff --git a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.html b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.html
index f9abd57f3..ab9af64d4 100644
--- a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.html
+++ b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.html
@@ -19,31 +19,66 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15">
<div>
- <div fxFlex="100" class="md-dialog-content" style="padding:20px;" *ngIf="page == 'preview'">
- <h4>You are about to {{action ? 'start' : 'stop'}} the following pipelines:</h4>
+ <div
+ fxFlex="100"
+ class="md-dialog-content"
+ style="padding: 20px"
+ *ngIf="page === 'preview'"
+ >
+ <h4>
+ You are about to {{ action ? 'start' : 'stop' }} the
+ following pipelines:
+ </h4>
<div *ngFor="let pipeline of pipelinesToModify">
- <h5>{{pipeline.name}}</h5>
+ <h5>{{ pipeline.name }}</h5>
</div>
<h5><b>Press 'Next' to start the process.</b></h5>
</div>
- <div fxFlex="100" class="md-dialog-content" style="padding:20px;" *ngIf="page == 'installation'">
+ <div
+ fxFlex="100"
+ class="md-dialog-content"
+ style="padding: 20px"
+ *ngIf="page === 'installation'"
+ >
<div *ngFor="let status of installationStatus">
- <h4>{{action ? 'Starting pipeline ' : 'Stopping pipeline'}} {{status.id + 1}} of
- {{pipelinesToModify.length}} ({{status.name}})...{{status.status}}</h4>
+ <h4>
+ {{
+ action ? 'Starting pipeline ' : 'Stopping pipeline'
+ }}
+ {{ status.id + 1 }} of
+ {{ pipelinesToModify.length }} ({{ status.name }})...{{
+ status.status
+ }}
+ </h4>
</div>
- <div *ngIf="pipelinesToModify.length == 0">
- <h4>Sorry, there are no pipelines that are currently {{action ? "idle." : "running."}}</h4>
+ <div *ngIf="pipelinesToModify.length === 0">
+ <h4>
+ Sorry, there are no pipelines that are currently
+ {{ action ? 'idle.' : 'running.' }}
+ </h4>
</div>
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
- <button mat-button mat-raised-button class="mat-basic" (click)="close(false)" style="margin-right:10px;">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close(false)"
+ style="margin-right: 10px"
+ >
Cancel
</button>
- <button mat-button mat-raised-button color="accent" [disabled]="installationRunning" (click)="next()">
- {{nextButton}}
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ [disabled]="installationRunning"
+ (click)="next()"
+ >
+ {{ nextButton }}
</button>
</div>
</div>
diff --git a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.scss b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.scss
index 0a776e5ff..fddade7bf 100644
--- a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.scss
+++ b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.scss
@@ -16,4 +16,4 @@
*
*/
-@import '../../../../scss/sp/sp-dialog.scss';
\ No newline at end of file
+@import '../../../../scss/sp/sp-dialog.scss';
diff --git a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
index 82b9c89f1..229fdee5e 100644
--- a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
@@ -21,126 +21,150 @@ import { DialogRef } from '@streampipes/shared-ui';
import { Pipeline, PipelineService } from '@streampipes/platform-services';
@Component({
- selector: 'sp-start-all-pipelines-dialog',
- templateUrl: './start-all-pipelines-dialog.component.html',
- styleUrls: ['./start-all-pipelines-dialog.component.scss']
+ selector: 'sp-start-all-pipelines-dialog',
+ templateUrl: './start-all-pipelines-dialog.component.html',
+ styleUrls: ['./start-all-pipelines-dialog.component.scss'],
})
export class StartAllPipelinesDialogComponent implements OnInit {
-
- @Input()
- pipelines: Pipeline[];
-
- @Input()
- activeCategory: string;
-
- pipelinesToModify: Pipeline[];
- installationStatus: any;
- installationFinished: boolean;
- page: string;
- nextButton: string;
- installationRunning: boolean;
-
- @Input()
- action: boolean;
-
-
- constructor(private dialogRef: DialogRef<StartAllPipelinesDialogComponent>,
- private pipelineService: PipelineService) {
- this.pipelinesToModify = [];
- this.installationStatus = [];
- this.installationFinished = false;
- this.page = 'preview';
- this.nextButton = 'Next';
- this.installationRunning = false;
- }
-
- ngOnInit() {
- this.getPipelinesToModify();
- if (this.pipelinesToModify.length === 0) {
- this.nextButton = 'Close';
- this.page = 'installation';
+ @Input()
+ pipelines: Pipeline[];
+
+ @Input()
+ activeCategory: string;
+
+ pipelinesToModify: Pipeline[];
+ installationStatus: any;
+ installationFinished: boolean;
+ page: string;
+ nextButton: string;
+ installationRunning: boolean;
+
+ @Input()
+ action: boolean;
+
+ constructor(
+ private dialogRef: DialogRef<StartAllPipelinesDialogComponent>,
+ private pipelineService: PipelineService,
+ ) {
+ this.pipelinesToModify = [];
+ this.installationStatus = [];
+ this.installationFinished = false;
+ this.page = 'preview';
+ this.nextButton = 'Next';
+ this.installationRunning = false;
}
- }
- close(refreshPipelines: boolean) {
- this.dialogRef.close(refreshPipelines);
- }
-
- next() {
- if (this.page === 'installation') {
- this.close(true);
- } else {
- this.page = 'installation';
- this.initiateInstallation(this.pipelinesToModify[0], 0);
+ ngOnInit() {
+ this.getPipelinesToModify();
+ if (this.pipelinesToModify.length === 0) {
+ this.nextButton = 'Close';
+ this.page = 'installation';
+ }
}
- }
- getPipelinesToModify() {
- this.pipelines.forEach(pipeline => {
- if (pipeline.running !== this.action && this.hasCategory(pipeline)) {
- this.pipelinesToModify.push(pipeline);
- }
- });
- }
+ close(refreshPipelines: boolean) {
+ this.dialogRef.close(refreshPipelines);
+ }
- hasCategory(pipeline: Pipeline) {
- let categoryPresent = false;
- if (!this.activeCategory) {
- return true;
- } else {
- pipeline.pipelineCategories.forEach(category => {
- if (category === this.activeCategory) {
- categoryPresent = true;
+ next() {
+ if (this.page === 'installation') {
+ this.close(true);
+ } else {
+ this.page = 'installation';
+ this.initiateInstallation(this.pipelinesToModify[0], 0);
}
- });
- return categoryPresent;
}
- }
- initiateInstallation(pipeline, index) {
- this.installationRunning = true;
- this.installationStatus.push({ 'name': pipeline.name, 'id': index, 'status': 'waiting' });
- if (this.action) {
- this.startPipeline(pipeline, index);
- } else {
- this.stopPipeline(pipeline, index);
+ getPipelinesToModify() {
+ this.pipelines.forEach(pipeline => {
+ if (
+ pipeline.running !== this.action &&
+ this.hasCategory(pipeline)
+ ) {
+ this.pipelinesToModify.push(pipeline);
+ }
+ });
}
- }
- startPipeline(pipeline, index) {
- this.pipelineService.startPipeline(pipeline._id)
- .subscribe(data => {
- this.installationStatus[index].status = data.success ? 'success' : 'error';
- }, data => {
- this.installationStatus[index].status = 'error';
- })
- .add(() => {
- if (index < this.pipelinesToModify.length - 1) {
- index++;
- this.initiateInstallation(this.pipelinesToModify[index], index);
+ hasCategory(pipeline: Pipeline) {
+ let categoryPresent = false;
+ if (!this.activeCategory) {
+ return true;
} else {
- this.nextButton = 'Close';
- this.installationRunning = false;
+ pipeline.pipelineCategories.forEach(category => {
+ if (category === this.activeCategory) {
+ categoryPresent = true;
+ }
+ });
+ return categoryPresent;
}
- });
- }
-
+ }
- stopPipeline(pipeline, index) {
- this.pipelineService.stopPipeline(pipeline._id)
- .subscribe(data => {
- this.installationStatus[index].status = data.success ? 'success' : 'error';
- }, data => {
- this.installationStatus[index].status = 'error';
- })
- .add(() => {
- if (index < this.pipelinesToModify.length - 1) {
- index++;
- this.initiateInstallation(this.pipelinesToModify[index], index);
+ initiateInstallation(pipeline, index) {
+ this.installationRunning = true;
+ this.installationStatus.push({
+ name: pipeline.name,
+ id: index,
+ status: 'waiting',
+ });
+ if (this.action) {
+ this.startPipeline(pipeline, index);
} else {
- this.nextButton = 'Close';
- this.installationRunning = false;
+ this.stopPipeline(pipeline, index);
}
- });
- }
+ }
+
+ startPipeline(pipeline, index) {
+ this.pipelineService
+ .startPipeline(pipeline._id)
+ .subscribe(
+ data => {
+ this.installationStatus[index].status = data.success
+ ? 'success'
+ : 'error';
+ },
+ data => {
+ this.installationStatus[index].status = 'error';
+ },
+ )
+ .add(() => {
+ if (index < this.pipelinesToModify.length - 1) {
+ index++;
+ this.initiateInstallation(
+ this.pipelinesToModify[index],
+ index,
+ );
+ } else {
+ this.nextButton = 'Close';
+ this.installationRunning = false;
+ }
+ });
+ }
+
+ stopPipeline(pipeline, index) {
+ this.pipelineService
+ .stopPipeline(pipeline._id)
+ .subscribe(
+ data => {
+ this.installationStatus[index].status = data.success
+ ? 'success'
+ : 'error';
+ },
+ data => {
+ this.installationStatus[index].status = 'error';
+ },
+ )
+ .add(() => {
+ if (index < this.pipelinesToModify.length - 1) {
+ index++;
+ this.initiateInstallation(
+ this.pipelinesToModify[index],
+ index,
+ );
+ } else {
+ this.nextButton = 'Close';
+ this.installationRunning = false;
+ }
+ });
+ }
}
diff --git a/ui/src/app/pipelines/model/pipeline-model.ts b/ui/src/app/pipelines/model/pipeline-model.ts
index d3bed94c6..d77aa95b3 100644
--- a/ui/src/app/pipelines/model/pipeline-model.ts
+++ b/ui/src/app/pipelines/model/pipeline-model.ts
@@ -17,6 +17,6 @@
*/
export enum PipelineAction {
- Start,
- Stop
+ Start,
+ Stop,
}
diff --git a/ui/src/app/pipelines/pipeline-category.filter.ts b/ui/src/app/pipelines/pipeline-category.filter.ts
index 711712616..9ba3aa481 100644
--- a/ui/src/app/pipelines/pipeline-category.filter.ts
+++ b/ui/src/app/pipelines/pipeline-category.filter.ts
@@ -20,14 +20,16 @@ import { Pipe, PipeTransform } from '@angular/core';
import { Pipeline } from '@streampipes/platform-services';
@Pipe({
- name: 'pipelineInCategoryFilter',
- pure: false
+ name: 'pipelineInCategoryFilter',
+ pure: false,
})
export class PipelineInCategoryPipe implements PipeTransform {
-
- transform(pipelines: Pipeline[], categoryId: string): any {
- return pipelines.filter(pipeline => {
- return pipeline.pipelineCategories && pipeline.pipelineCategories.some(pc => pc === categoryId);
- });
- }
+ transform(pipelines: Pipeline[], categoryId: string): any {
+ return pipelines.filter(pipeline => {
+ return (
+ pipeline.pipelineCategories &&
+ pipeline.pipelineCategories.some(pc => pc === categoryId)
+ );
+ });
+ }
}
diff --git a/ui/src/app/pipelines/pipelines.component.html b/ui/src/app/pipelines/pipelines.component.html
index 8d9fa2a64..f999c4912 100644
--- a/ui/src/app/pipelines/pipelines.component.html
+++ b/ui/src/app/pipelines/pipelines.component.html
@@ -17,61 +17,115 @@
-->
<sp-basic-view [showBackLink]="false" [padding]="true">
- <div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10">
- <button mat-button mat-raised-button color="accent" (click)="navigateToPipelineEditor()" data-cy="pipelines-navigate-to-editor">
+ <div
+ nav
+ fxFlex="100"
+ fxLayoutAlign="start center"
+ fxLayout="row"
+ class="pl-10"
+ >
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="navigateToPipelineEditor()"
+ data-cy="pipelines-navigate-to-editor"
+ >
<i class="material-icons">add</i> New pipeline
</button>
- <button class="mr-10" mat-button color="accent" (click)="startAllPipelines(true)"
- [disabled]="checkCurrentSelectionStatus(false)" *ngIf="hasPipelineWritePrivileges">
+ <button
+ class="mr-10"
+ mat-button
+ color="accent"
+ (click)="startAllPipelines(true)"
+ [disabled]="checkCurrentSelectionStatus(false)"
+ *ngIf="hasPipelineWritePrivileges"
+ >
<mat-icon>play_arrow</mat-icon><span>Start all pipelines</span>
</button>
- <button mat-button color="accent" (click)="startAllPipelines(false)"
- [disabled]="checkCurrentSelectionStatus(true)" *ngIf="hasPipelineWritePrivileges">
+ <button
+ mat-button
+ color="accent"
+ (click)="startAllPipelines(false)"
+ [disabled]="checkCurrentSelectionStatus(true)"
+ *ngIf="hasPipelineWritePrivileges"
+ >
<mat-icon>stop</mat-icon>
<span>Stop all pipelines</span>
</button>
<span fxFlex></span>
- <button mat-button mat-icon-button color="accent" matTooltip="Refresh pipelines" matTooltipPosition="above"
- (click)="refreshPipelines()">
- <i class="material-icons">
- refresh
- </i>
+ <button
+ mat-button
+ mat-icon-button
+ color="accent"
+ matTooltip="Refresh pipelines"
+ matTooltipPosition="above"
+ (click)="refreshPipelines()"
+ >
+ <i class="material-icons"> refresh </i>
</button>
- <button mat-button mat-icon-button color="accent" matTooltip="Export pipelines" matTooltipPosition="above"
- (click)="exportPipelines()">
- <i class="material-icons">
- cloud_download
- </i>
+ <button
+ mat-button
+ mat-icon-button
+ color="accent"
+ matTooltip="Export pipelines"
+ matTooltipPosition="above"
+ (click)="exportPipelines()"
+ >
+ <i class="material-icons"> cloud_download </i>
</button>
- <button mat-button mat-icon-button color="accent" matTooltip="Import pipelines" matTooltipPosition="above"
- (click)="openImportPipelinesDialog()">
- <i class="material-icons">
- cloud_upload
- </i>
+ <button
+ mat-button
+ mat-icon-button
+ color="accent"
+ matTooltip="Import pipelines"
+ matTooltipPosition="above"
+ (click)="openImportPipelinesDialog()"
+ >
+ <i class="material-icons"> cloud_upload </i>
</button>
</div>
<div fxFlex="100" fxLayout="column">
<div fxLayout="column">
- <sp-basic-header-title-component title="Pipelines"></sp-basic-header-title-component>
+ <sp-basic-header-title-component
+ title="Pipelines"
+ ></sp-basic-header-title-component>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
- <sp-basic-inner-panel [showTitle]="false" innerPadding="0" outerMargin="0" fxFlex="90"
- [hideToolbar]="true">
+ <sp-basic-inner-panel
+ [showTitle]="false"
+ innerPadding="0"
+ outerMargin="0"
+ fxFlex="90"
+ [hideToolbar]="true"
+ >
<div fxFlex="100">
- <pipeline-overview [activeCategoryId]="activeCategoryId" [pipelines]="pipelines"
- [pipelineToStart]="pipelineToStart"
- (refreshPipelinesEmitter)="refreshPipelines()"
- *ngIf="pipelinesReady"></pipeline-overview>
+ <sp-pipeline-overview
+ [activeCategoryId]="activeCategoryId"
+ [pipelines]="pipelines"
+ [pipelineToStart]="pipelineToStart"
+ (refreshPipelinesEmitter)="refreshPipelines()"
+ *ngIf="pipelinesReady"
+ ></sp-pipeline-overview>
</div>
</sp-basic-inner-panel>
</div>
- <div fxFlex="100" fxLayout="column" style="margin-top: 20px;">
- <sp-basic-header-title-component title="Functions"></sp-basic-header-title-component>
+ <div fxFlex="100" fxLayout="column" style="margin-top: 20px">
+ <sp-basic-header-title-component
+ title="Functions"
+ ></sp-basic-header-title-component>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
- <sp-basic-inner-panel [showTitle]="false" innerPadding="0" outerMargin="0" fxFlex="90"
- [hideToolbar]="true">
+ <sp-basic-inner-panel
+ [showTitle]="false"
+ innerPadding="0"
+ outerMargin="0"
+ fxFlex="90"
+ [hideToolbar]="true"
+ >
<div fxFlex="100">
- <sp-functions-overview [functions]="functions"
- *ngIf="functionsReady">
+ <sp-functions-overview
+ [functions]="functions"
+ *ngIf="functionsReady"
+ >
</sp-functions-overview>
</div>
</sp-basic-inner-panel>
@@ -80,4 +134,3 @@
</div>
</div>
</sp-basic-view>
-
diff --git a/ui/src/app/pipelines/pipelines.component.scss b/ui/src/app/pipelines/pipelines.component.scss
index 31cb97220..5af5f2cb7 100644
--- a/ui/src/app/pipelines/pipelines.component.scss
+++ b/ui/src/app/pipelines/pipelines.component.scss
@@ -17,13 +17,13 @@
*/
.page-container-padding-inner {
- margin: 20px;
+ margin: 20px;
}
.mr-10 {
- margin-right: 10px;
+ margin-right: 10px;
}
.mt-20 {
- margin-top: 20px;
-}
\ No newline at end of file
+ margin-top: 20px;
+}
diff --git a/ui/src/app/pipelines/pipelines.component.ts b/ui/src/app/pipelines/pipelines.component.ts
index be344504b..d5ceba5de 100644
--- a/ui/src/app/pipelines/pipelines.component.ts
+++ b/ui/src/app/pipelines/pipelines.component.ts
@@ -19,13 +19,18 @@
import * as FileSaver from 'file-saver';
import { Component, OnInit } from '@angular/core';
import {
- FunctionId,
- FunctionsService,
- Pipeline,
- PipelineCategory,
- PipelineService
+ FunctionId,
+ FunctionsService,
+ Pipeline,
+ PipelineCategory,
+ PipelineService,
} from '@streampipes/platform-services';
-import { DialogRef, DialogService, PanelType, SpBreadcrumbService } from '@streampipes/shared-ui';
+import {
+ DialogRef,
+ DialogService,
+ PanelType,
+ SpBreadcrumbService,
+} from '@streampipes/shared-ui';
import { ImportPipelineDialogComponent } from './dialog/import-pipeline/import-pipeline-dialog.component';
import { StartAllPipelinesDialogComponent } from './dialog/start-all-pipelines/start-all-pipelines-dialog.component';
import { PipelineCategoriesDialogComponent } from './dialog/pipeline-categories/pipeline-categories-dialog.component';
@@ -36,182 +41,199 @@ import { SpPipelineRoutes } from './pipelines.routes';
import { UserRole } from '../_enums/user-role.enum';
@Component({
- selector: 'pipelines',
- templateUrl: './pipelines.component.html',
- styleUrls: ['./pipelines.component.scss']
+ selector: 'sp-pipelines',
+ templateUrl: './pipelines.component.html',
+ styleUrls: ['./pipelines.component.scss'],
})
export class PipelinesComponent implements OnInit {
-
- pipeline: Pipeline;
- pipelines: Pipeline[] = [];
- systemPipelines: Pipeline[] = [];
- starting: boolean;
- stopping: boolean;
- pipelineCategories: PipelineCategory[];
- activeCategoryId: string;
-
- pipelineIdToStart: string;
-
- pipelineToStart: Pipeline;
- systemPipelineToStart: Pipeline;
-
- pipelinesReady = false;
-
- selectedCategoryIndex = 0;
- hasPipelineWritePrivileges = false;
-
- functions: FunctionId[] = [];
- functionsReady = false;
- isAdminRole = false;
-
- constructor(private pipelineService: PipelineService,
- private dialogService: DialogService,
- private activatedRoute: ActivatedRoute,
- private authService: AuthService,
- private router: Router,
- private functionsService: FunctionsService,
- private breadcrumbService: SpBreadcrumbService) {
- this.pipelineCategories = [];
- this.starting = false;
- this.stopping = false;
- }
-
- ngOnInit() {
- this.breadcrumbService.updateBreadcrumb(this.breadcrumbService.getRootLink(SpPipelineRoutes.BASE));
- this.authService.user$.subscribe(user => {
- this.hasPipelineWritePrivileges = this.authService.hasRole(UserPrivilege.PRIVILEGE_WRITE_PIPELINE);
- this.isAdminRole = this.authService.hasRole(UserRole.ROLE_ADMIN);
- });
- this.activatedRoute.queryParams.subscribe(params => {
- if (params['pipeline']) {
- this.pipelineIdToStart = params['pipeline'];
- }
- this.getPipelineCategories();
- this.getPipelines();
- this.getFunctions()
- });
- }
-
- setSelectedTab(index) {
- this.activeCategoryId = index === 0 ? undefined : this.pipelineCategories[index - 1]._id;
- }
-
- exportPipelines() {
- const blob = new Blob([JSON.stringify(this.pipelines)], {type: 'application/json'});
- FileSaver.saveAs(blob, 'pipelines.json');
- }
-
- getFunctions() {
- this.functionsService.getActiveFunctions().subscribe(functions => {
- this.functions = functions.map(f => f.functionId);
- console.log(this.functions);
- this.functionsReady = true;
- })
- }
-
- getPipelines() {
- this.pipelines = [];
- this.pipelineService.getOwnPipelines().subscribe(pipelines => {
- this.pipelines = pipelines;
- this.checkForImmediateStart(pipelines);
- this.pipelinesReady = true;
- });
- }
-
- checkForImmediateStart(pipelines: Pipeline[]) {
- this.pipelineToStart = undefined;
- pipelines.forEach(pipeline => {
- if (pipeline._id === this.pipelineIdToStart) {
- this.pipelineToStart = pipeline;
- }
- });
- this.pipelineIdToStart = undefined;
- }
-
- getPipelineCategories() {
- this.pipelineService.getPipelineCategories()
- .subscribe(pipelineCategories => {
- this.pipelineCategories = pipelineCategories;
- });
- }
-
- activeClass(pipeline) {
- return 'active-pipeline';
- }
-
- checkCurrentSelectionStatus(status) {
- let active = true;
- this.pipelines.forEach(pipeline => {
- if (!this.activeCategoryId || pipeline.pipelineCategories.some(pc => pc === this.activeCategoryId)) {
- if (pipeline.running === status) {
- active = false;
- }
- }
- });
- return active;
- }
-
- openImportPipelinesDialog() {
- const dialogRef: DialogRef<ImportPipelineDialogComponent> = this.dialogService.open(ImportPipelineDialogComponent, {
- panelType: PanelType.STANDARD_PANEL,
- title: 'Import Pipeline',
- width: '70vw',
- data: {
- 'pipelines': this.pipelines
- }
- });
- dialogRef.afterClosed().subscribe(data => {
- if (data) {
- this.refreshPipelines();
- }
- });
- }
-
- startAllPipelines(action) {
- const dialogRef: DialogRef<StartAllPipelinesDialogComponent> = this.dialogService.open(StartAllPipelinesDialogComponent, {
- panelType: PanelType.STANDARD_PANEL,
- title: (action ? 'Start' : 'Stop') + ' all pipelines',
- width: '70vw',
- data: {
- 'pipelines': this.pipelines,
- 'action': action,
- 'activeCategoryId': this.activeCategoryId
- }
- });
-
- dialogRef.afterClosed().subscribe(data => {
- if (data) {
- this.refreshPipelines();
- }
- });
- }
-
- showPipelineCategoriesDialog() {
- const dialogRef: DialogRef<PipelineCategoriesDialogComponent> = this.dialogService.open(PipelineCategoriesDialogComponent, {
- panelType: PanelType.STANDARD_PANEL,
- title: 'Pipeline Categories',
- width: '70vw',
- data: {
- 'pipelines': this.pipelines,
- 'systemPipelines': this.systemPipelines
- }
- });
-
- dialogRef.afterClosed().subscribe(data => {
- this.getPipelineCategories();
- this.refreshPipelines();
- });
- }
-
- refreshPipelines() {
- this.getPipelines();
- }
-
- showPipeline(pipeline) {
- pipeline.display = !pipeline.display;
- }
-
- navigateToPipelineEditor() {
- this.router.navigate(['pipelines', 'create']);
- }
+ pipeline: Pipeline;
+ pipelines: Pipeline[] = [];
+ systemPipelines: Pipeline[] = [];
+ starting: boolean;
+ stopping: boolean;
+ pipelineCategories: PipelineCategory[];
+ activeCategoryId: string;
+
+ pipelineIdToStart: string;
+
+ pipelineToStart: Pipeline;
+ systemPipelineToStart: Pipeline;
+
+ pipelinesReady = false;
+
+ selectedCategoryIndex = 0;
+ hasPipelineWritePrivileges = false;
+
+ functions: FunctionId[] = [];
+ functionsReady = false;
+ isAdminRole = false;
+
+ constructor(
+ private pipelineService: PipelineService,
+ private dialogService: DialogService,
+ private activatedRoute: ActivatedRoute,
+ private authService: AuthService,
+ private router: Router,
+ private functionsService: FunctionsService,
+ private breadcrumbService: SpBreadcrumbService,
+ ) {
+ this.pipelineCategories = [];
+ this.starting = false;
+ this.stopping = false;
+ }
+
+ ngOnInit() {
+ this.breadcrumbService.updateBreadcrumb(
+ this.breadcrumbService.getRootLink(SpPipelineRoutes.BASE),
+ );
+ this.authService.user$.subscribe(user => {
+ this.hasPipelineWritePrivileges = this.authService.hasRole(
+ UserPrivilege.PRIVILEGE_WRITE_PIPELINE,
+ );
+ this.isAdminRole = this.authService.hasRole(UserRole.ROLE_ADMIN);
+ });
+ this.activatedRoute.queryParams.subscribe(params => {
+ if (params['pipeline']) {
+ this.pipelineIdToStart = params['pipeline'];
+ }
+ this.getPipelineCategories();
+ this.getPipelines();
+ this.getFunctions();
+ });
+ }
+
+ setSelectedTab(index) {
+ this.activeCategoryId =
+ index === 0 ? undefined : this.pipelineCategories[index - 1]._id;
+ }
+
+ exportPipelines() {
+ const blob = new Blob([JSON.stringify(this.pipelines)], {
+ type: 'application/json',
+ });
+ FileSaver.saveAs(blob, 'pipelines.json');
+ }
+
+ getFunctions() {
+ this.functionsService.getActiveFunctions().subscribe(functions => {
+ this.functions = functions.map(f => f.functionId);
+ console.log(this.functions);
+ this.functionsReady = true;
+ });
+ }
+
+ getPipelines() {
+ this.pipelines = [];
+ this.pipelineService.getOwnPipelines().subscribe(pipelines => {
+ this.pipelines = pipelines;
+ this.checkForImmediateStart(pipelines);
+ this.pipelinesReady = true;
+ });
+ }
+
+ checkForImmediateStart(pipelines: Pipeline[]) {
+ this.pipelineToStart = undefined;
+ pipelines.forEach(pipeline => {
+ if (pipeline._id === this.pipelineIdToStart) {
+ this.pipelineToStart = pipeline;
+ }
+ });
+ this.pipelineIdToStart = undefined;
+ }
+
+ getPipelineCategories() {
+ this.pipelineService
+ .getPipelineCategories()
+ .subscribe(pipelineCategories => {
+ this.pipelineCategories = pipelineCategories;
+ });
+ }
+
+ activeClass(pipeline) {
+ return 'active-pipeline';
+ }
+
+ checkCurrentSelectionStatus(status) {
+ let active = true;
+ this.pipelines.forEach(pipeline => {
+ if (
+ !this.activeCategoryId ||
+ pipeline.pipelineCategories.some(
+ pc => pc === this.activeCategoryId,
+ )
+ ) {
+ if (pipeline.running === status) {
+ active = false;
+ }
+ }
+ });
+ return active;
+ }
+
+ openImportPipelinesDialog() {
+ const dialogRef: DialogRef<ImportPipelineDialogComponent> =
+ this.dialogService.open(ImportPipelineDialogComponent, {
+ panelType: PanelType.STANDARD_PANEL,
+ title: 'Import Pipeline',
+ width: '70vw',
+ data: {
+ pipelines: this.pipelines,
+ },
+ });
+ dialogRef.afterClosed().subscribe(data => {
+ if (data) {
+ this.refreshPipelines();
+ }
+ });
+ }
+
+ startAllPipelines(action) {
+ const dialogRef: DialogRef<StartAllPipelinesDialogComponent> =
+ this.dialogService.open(StartAllPipelinesDialogComponent, {
+ panelType: PanelType.STANDARD_PANEL,
+ title: (action ? 'Start' : 'Stop') + ' all pipelines',
+ width: '70vw',
+ data: {
+ pipelines: this.pipelines,
+ action: action,
+ activeCategoryId: this.activeCategoryId,
+ },
+ });
+
+ dialogRef.afterClosed().subscribe(data => {
+ if (data) {
+ this.refreshPipelines();
+ }
+ });
+ }
+
+ showPipelineCategoriesDialog() {
+ const dialogRef: DialogRef<PipelineCategoriesDialogComponent> =
+ this.dialogService.open(PipelineCategoriesDialogComponent, {
+ panelType: PanelType.STANDARD_PANEL,
+ title: 'Pipeline Categories',
+ width: '70vw',
+ data: {
+ pipelines: this.pipelines,
+ systemPipelines: this.systemPipelines,
+ },
+ });
+
+ dialogRef.afterClosed().subscribe(data => {
+ this.getPipelineCategories();
+ this.refreshPipelines();
+ });
+ }
+
+ refreshPipelines() {
+ this.getPipelines();
+ }
+
+ showPipeline(pipeline) {
+ pipeline.display = !pipeline.display;
+ }
+
+ navigateToPipelineEditor() {
+ this.router.navigate(['pipelines', 'create']);
+ }
}
diff --git a/ui/src/app/pipelines/pipelines.module.ts b/ui/src/app/pipelines/pipelines.module.ts
index ae655b985..0878251c6 100644
--- a/ui/src/app/pipelines/pipelines.module.ts
+++ b/ui/src/app/pipelines/pipelines.module.ts
@@ -53,102 +53,97 @@ import { SpFunctionsMetricsComponent } from './components/functions-overview/fun
import { SpFunctionsLogsComponent } from './components/functions-overview/functions-logs/functions-logs.component';
@NgModule({
- imports: [
- FlexLayoutModule,
- FormsModule,
- MatTabsModule,
- MatButtonModule,
- CustomMaterialModule,
- CommonModule,
- MatProgressSpinnerModule,
- MatSortModule,
- MatTableModule,
- CoreUiModule,
- PlatformServicesModule,
- EditorModule,
- PipelineDetailsModule,
- SharedUiModule,
- RouterModule.forChild([
- {
- path: 'pipelines',
- children: [
- {
- path: '',
- component: PipelinesComponent
- },
- {
- path: 'functions/:functionId/metrics',
- component: SpFunctionsMetricsComponent
- },
- {
- path: 'functions/:functionId/logs',
- component: SpFunctionsLogsComponent
- },
- {
- path: 'details/:pipelineId',
- children: [
- {
- path: '',
- redirectTo: 'overview',
- pathMatch: 'full'
- },
- {
- path: 'overview',
- component: SpPipelineDetailsOverviewComponent,
- },
- {
- path: 'metrics',
- component: PipelineMonitoringComponent,
- },
- {
- path: 'logs',
- component: PipelineLogsComponent,
- },
- {
- path: 'quick-edit',
- component: QuickEditComponent,
- }
- ]
- },
- {
- path: 'create',
- component: EditorComponent
- },
- {
- path: 'modify/:pipelineId',
- component: EditorComponent
- }
- ]
- }
- ]),
- ],
- declarations: [
- DeletePipelineDialogComponent,
- FunctionsOverviewComponent,
- ImportPipelineDialogComponent,
- PipelinesComponent,
- PipelineCategoriesDialogComponent,
- PipelineNotificationsComponent,
- PipelineOverviewComponent,
- PipelineStatusDialogComponent,
- StartAllPipelinesDialogComponent,
- PipelineInCategoryPipe,
- CategoryAlreadyInPipelinePipe,
- SpFunctionsMetricsComponent,
- SpFunctionsLogsComponent
- ],
- providers: [
- PipelineOperationsService,
- CategoryAlreadyInPipelinePipe,
- PipelineInCategoryPipe
- ],
- exports: [
- PipelinesComponent
- ]
+ imports: [
+ FlexLayoutModule,
+ FormsModule,
+ MatTabsModule,
+ MatButtonModule,
+ CustomMaterialModule,
+ CommonModule,
+ MatProgressSpinnerModule,
+ MatSortModule,
+ MatTableModule,
+ CoreUiModule,
+ PlatformServicesModule,
+ EditorModule,
+ PipelineDetailsModule,
+ SharedUiModule,
+ RouterModule.forChild([
+ {
+ path: 'pipelines',
+ children: [
+ {
+ path: '',
+ component: PipelinesComponent,
+ },
+ {
+ path: 'functions/:functionId/metrics',
+ component: SpFunctionsMetricsComponent,
+ },
+ {
+ path: 'functions/:functionId/logs',
+ component: SpFunctionsLogsComponent,
+ },
+ {
+ path: 'details/:pipelineId',
+ children: [
+ {
+ path: '',
+ redirectTo: 'overview',
+ pathMatch: 'full',
+ },
+ {
+ path: 'overview',
+ component: SpPipelineDetailsOverviewComponent,
+ },
+ {
+ path: 'metrics',
+ component: PipelineMonitoringComponent,
+ },
+ {
+ path: 'logs',
+ component: PipelineLogsComponent,
+ },
+ {
+ path: 'quick-edit',
+ component: QuickEditComponent,
+ },
+ ],
+ },
+ {
+ path: 'create',
+ component: EditorComponent,
+ },
+ {
+ path: 'modify/:pipelineId',
+ component: EditorComponent,
+ },
+ ],
+ },
+ ]),
+ ],
+ declarations: [
+ DeletePipelineDialogComponent,
+ FunctionsOverviewComponent,
+ ImportPipelineDialogComponent,
+ PipelinesComponent,
+ PipelineCategoriesDialogComponent,
+ PipelineNotificationsComponent,
+ PipelineOverviewComponent,
+ PipelineStatusDialogComponent,
+ StartAllPipelinesDialogComponent,
+ PipelineInCategoryPipe,
+ CategoryAlreadyInPipelinePipe,
+ SpFunctionsMetricsComponent,
+ SpFunctionsLogsComponent,
+ ],
+ providers: [
+ PipelineOperationsService,
+ CategoryAlreadyInPipelinePipe,
+ PipelineInCategoryPipe,
+ ],
+ exports: [PipelinesComponent],
})
export class PipelinesModule {
-
- constructor() {
- }
-
+ constructor() {}
}
diff --git a/ui/src/app/pipelines/pipelines.routes.ts b/ui/src/app/pipelines/pipelines.routes.ts
index c3707b8a8..6f9225b2f 100644
--- a/ui/src/app/pipelines/pipelines.routes.ts
+++ b/ui/src/app/pipelines/pipelines.routes.ts
@@ -16,10 +16,11 @@
*
*/
-import { SpBreadcrumbItem, } from '@streampipes/shared-ui';
+import { SpBreadcrumbItem } from '@streampipes/shared-ui';
export class SpPipelineRoutes {
-
- static BASE: SpBreadcrumbItem = {label: 'Pipelines & Functions', link: ['pipelines']};
-
+ static BASE: SpBreadcrumbItem = {
+ label: 'Pipelines & Functions',
+ link: ['pipelines'],
+ };
}
diff --git a/ui/src/app/pipelines/services/pipeline-operations.service.ts b/ui/src/app/pipelines/services/pipeline-operations.service.ts
index 997d0f1dd..7b721d0a7 100644
--- a/ui/src/app/pipelines/services/pipeline-operations.service.ts
+++ b/ui/src/app/pipelines/services/pipeline-operations.service.ts
@@ -29,131 +29,166 @@ import { ObjectPermissionDialogComponent } from '../../core-ui/object-permission
@Injectable()
export class PipelineOperationsService {
+ starting: any;
+ stopping: any;
+
+ constructor(
+ private shepherdService: ShepherdService,
+ private pipelineService: PipelineService,
+ private dialogService: DialogService,
+ private router: Router,
+ ) {}
+
+ startPipeline(
+ pipelineId: string,
+ refreshPipelinesEmitter: EventEmitter<boolean>,
+ toggleRunningOperation?,
+ ) {
+ if (toggleRunningOperation) {
+ toggleRunningOperation('starting');
+ }
+ const dialogRef = this.showPipelineOperationsDialog(
+ pipelineId,
+ PipelineAction.Start,
+ );
+ this.afterPipelineOperationsDialogClosed(
+ dialogRef,
+ refreshPipelinesEmitter,
+ 'starting',
+ toggleRunningOperation,
+ );
+ }
- starting: any;
- stopping: any;
-
- constructor(
- private shepherdService: ShepherdService,
- private pipelineService: PipelineService,
- private dialogService: DialogService,
- private router: Router) {
- }
-
- startPipeline(pipelineId: string,
- refreshPipelinesEmitter: EventEmitter<boolean>,
- toggleRunningOperation?, ) {
- if (toggleRunningOperation) {
- toggleRunningOperation('starting');
+ stopPipeline(
+ pipelineId: string,
+ refreshPipelinesEmitter: EventEmitter<boolean>,
+ toggleRunningOperation?,
+ ) {
+ if (toggleRunningOperation) {
+ toggleRunningOperation('stopping');
+ }
+ const dialogRef = this.showPipelineOperationsDialog(
+ pipelineId,
+ PipelineAction.Stop,
+ );
+ this.afterPipelineOperationsDialogClosed(
+ dialogRef,
+ refreshPipelinesEmitter,
+ 'stopping',
+ toggleRunningOperation,
+ );
}
- const dialogRef = this.showPipelineOperationsDialog(pipelineId, PipelineAction.Start);
- this.afterPipelineOperationsDialogClosed(dialogRef, refreshPipelinesEmitter, 'starting', toggleRunningOperation);
- }
-
- stopPipeline(pipelineId: string,
- refreshPipelinesEmitter: EventEmitter<boolean>,
- toggleRunningOperation?) {
- if (toggleRunningOperation) {
- toggleRunningOperation('stopping');
+
+ afterPipelineOperationsDialogClosed(
+ dialogRef: DialogRef<PipelineStatusDialogComponent>,
+ refreshPipelinesEmitter: EventEmitter<boolean>,
+ toggleAction: string,
+ toggleRunningOperation?,
+ ) {
+ dialogRef.afterClosed().subscribe(msg => {
+ refreshPipelinesEmitter.emit(true);
+ if (toggleRunningOperation) {
+ toggleRunningOperation(toggleAction);
+ }
+ });
+ }
+
+ showDeleteDialog(
+ pipeline: Pipeline,
+ refreshPipelinesEmitter: EventEmitter<boolean>,
+ switchToPipelineView?: any,
+ ) {
+ const dialogRef: DialogRef<DeletePipelineDialogComponent> =
+ this.dialogService.open(DeletePipelineDialogComponent, {
+ panelType: PanelType.STANDARD_PANEL,
+ title: 'Delete Pipeline',
+ width: '70vw',
+ data: {
+ pipeline: pipeline,
+ },
+ });
+
+ dialogRef.afterClosed().subscribe(data => {
+ if (data) {
+ if (!switchToPipelineView) {
+ refreshPipelinesEmitter.emit(true);
+ } else {
+ switchToPipelineView();
+ }
+ }
+ });
+ }
+
+ showPipelineOperationsDialog(
+ pipelineId: string,
+ action: PipelineAction,
+ ): DialogRef<PipelineStatusDialogComponent> {
+ return this.dialogService.open(PipelineStatusDialogComponent, {
+ panelType: PanelType.STANDARD_PANEL,
+ title: 'Pipeline Status',
+ width: '70vw',
+ data: {
+ pipelineId: pipelineId,
+ action: action,
+ },
+ });
+ }
+
+ showPipelineNotificationsDialog(
+ pipeline: Pipeline,
+ refreshPipelinesEmitter: EventEmitter<boolean>,
+ ) {
+ const dialogRef: DialogRef<PipelineNotificationsComponent> =
+ this.dialogService.open(PipelineNotificationsComponent, {
+ panelType: PanelType.STANDARD_PANEL,
+ title: 'Pipeline Notifications',
+ width: '70vw',
+ data: {
+ pipeline: pipeline,
+ },
+ });
+
+ dialogRef.afterClosed().subscribe(close => {
+ refreshPipelinesEmitter.emit(true);
+ });
+ }
+
+ showPermissionsDialog(
+ pipeline: Pipeline,
+ refreshPipelinesEmitter: EventEmitter<boolean>,
+ ) {
+ const dialogRef = this.dialogService.open(
+ ObjectPermissionDialogComponent,
+ {
+ panelType: PanelType.SLIDE_IN_PANEL,
+ title: 'Manage permissions',
+ width: '70vw',
+ data: {
+ objectInstanceId: pipeline._id,
+ headerTitle:
+ 'Manage permissions for pipeline ' + pipeline.name,
+ },
+ },
+ );
+
+ dialogRef.afterClosed().subscribe(refresh => {
+ refreshPipelinesEmitter.emit(refresh);
+ });
+ }
+
+ showPipelineInEditor(id: string) {
+ this.router.navigate(['pipelines', 'modify', id]);
+ }
+
+ showPipelineDetails(id: string) {
+ this.router.navigate(['pipelines', 'details', id]);
+ }
+
+ modifyPipeline(pipeline) {
+ this.showPipelineInEditor(pipeline);
+ }
+
+ showLogs(id) {
+ // this.$state.go("streampipes.pipelinelogs", {pipeline: id});
}
- const dialogRef = this.showPipelineOperationsDialog(pipelineId, PipelineAction.Stop);
- this.afterPipelineOperationsDialogClosed(dialogRef, refreshPipelinesEmitter, 'stopping', toggleRunningOperation);
- }
-
- afterPipelineOperationsDialogClosed(dialogRef: DialogRef<PipelineStatusDialogComponent>,
- refreshPipelinesEmitter: EventEmitter<boolean>,
- toggleAction: string,
- toggleRunningOperation?) {
- dialogRef.afterClosed().subscribe(msg => {
- refreshPipelinesEmitter.emit(true);
- if (toggleRunningOperation) {
- toggleRunningOperation(toggleAction);
- }
- });
- }
-
- showDeleteDialog(pipeline: Pipeline,
- refreshPipelinesEmitter: EventEmitter<boolean>,
- switchToPipelineView?: any) {
- const dialogRef: DialogRef<DeletePipelineDialogComponent> = this.dialogService.open(DeletePipelineDialogComponent, {
- panelType: PanelType.STANDARD_PANEL,
- title: 'Delete Pipeline',
- width: '70vw',
- data: {
- 'pipeline': pipeline,
- }
- });
-
- dialogRef.afterClosed().subscribe(data => {
- if (data) {
- if (!switchToPipelineView) {
- refreshPipelinesEmitter.emit(true);
- } else {
- switchToPipelineView();
- }
- }
- });
- }
-
- showPipelineOperationsDialog(pipelineId: string,
- action: PipelineAction): DialogRef<PipelineStatusDialogComponent> {
- return this.dialogService.open(PipelineStatusDialogComponent, {
- panelType: PanelType.STANDARD_PANEL,
- title: 'Pipeline Status',
- width: '70vw',
- data: {
- 'pipelineId': pipelineId,
- 'action': action
- }
- });
- }
-
- showPipelineNotificationsDialog(pipeline: Pipeline,
- refreshPipelinesEmitter: EventEmitter<boolean>) {
- const dialogRef: DialogRef<PipelineNotificationsComponent> = this.dialogService.open(PipelineNotificationsComponent, {
- panelType: PanelType.STANDARD_PANEL,
- title: 'Pipeline Notifications',
- width: '70vw',
- data: {
- 'pipeline': pipeline,
- }
- });
-
- dialogRef.afterClosed().subscribe(close => {
- refreshPipelinesEmitter.emit(true);
- });
- }
-
- showPermissionsDialog(pipeline: Pipeline,
- refreshPipelinesEmitter: EventEmitter<boolean>) {
- const dialogRef = this.dialogService.open(ObjectPermissionDialogComponent, {
- panelType: PanelType.SLIDE_IN_PANEL,
- title: 'Manage permissions',
- width: '70vw',
- data: {
- 'objectInstanceId': pipeline._id,
- 'headerTitle': 'Manage permissions for pipeline ' + pipeline.name
- }
- });
-
- dialogRef.afterClosed().subscribe(refresh => {
- refreshPipelinesEmitter.emit(refresh);
- });
- }
-
- showPipelineInEditor(id: string) {
- this.router.navigate(['pipelines', 'modify', id]);
- }
-
- showPipelineDetails(id: string) {
- this.router.navigate(['pipelines', 'details', id]);
- }
-
- modifyPipeline(pipeline) {
- this.showPipelineInEditor(pipeline);
- }
-
- showLogs(id) {
- // this.$state.go("streampipes.pipelinelogs", {pipeline: id});
- }
}