From 8857a48c7c1fe811e39cd508c15aa847db5e6421 Mon Sep 17 00:00:00 2001
From: bossenti <bossenti@posteo.de>
Date: Sat, 7 Jan 2023 10:08:21 +0100
Subject: [PATCH] [#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.component.html | 41 +-
.../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 +-
.../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 a4ba0955eb..4e279ce556 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 e90ed933fe..2b96342e8a 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 6f44912fed..be5a2e1afe 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 1a4fdba6c0..286c817e8d 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 dbc9f8d1d5..c11db2f50e 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 9d40fed338..6935081885 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 c04a4d2bc6..f5558ae53c 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 fe2b7ff781..3b4303c5fb 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 690663f2ab..0e86260ff3 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 1637303ec1..d12a92617f 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 01955e5e23..ac70f65cd9 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 7f1e8435c0..909c886378 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 a9a54461ac..933c9484df 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 24f27216dd..b9bbc7873f 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 0a776e5ffc..fddade7bf6 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 f812584a0f..34f55646e6 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 168191f844..6b33ca0b4c 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 0a776e5ffc..fddade7bf6 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 b790afaf04..2dfd2178f6 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 dab840ca52..1ff1df01dc 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 @@ <h5><i>{{pipelineCategory.categoryDescription}}</i></h5>
<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 0a776e5ffc..fddade7bf6 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 c39745262e..e480e4eccf 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 3812194fc4..6bf9f1c805 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 0a47a46ace..ed322482a1 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 dbdde3e7fe..c3f4637c79 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 ba92a1dee7..048f2c5693 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 @@ <h3>Please wait while the pipeline is {{action == 0 ? "starting..." : "stopping"
</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 dc367af0a8..22d12079d2 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 d4b0d8c8c2..c60548217f 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 f9abd57f3b..ab9af64d48 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 0a776e5ffc..fddade7bf6 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 82b9c89f10..229fdee5e5 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 d3bed94c60..d77aa95b33 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 711712616f..9ba3aa4811 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 8d9fa2a64a..f999c49123 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 31cb972202..5af5f2cb73 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 be344504b0..d5ceba5de4 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 ae655b9855..0878251c61 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 c3707b8a82..6f9225b2f8 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 997d0f1dd0..7b721d0a72 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});
- }
}