diff --git a/ui/.eslintignore b/ui/.eslintignore index 4477defaa0..90dae20178 100644 --- a/ui/.eslintignore +++ b/ui/.eslintignore @@ -36,5 +36,4 @@ src/app/login src/app/notifications src/app/NS src/app/pipeline-details -src/app/pipelines src/scss diff --git a/ui/.prettierignore b/ui/.prettierignore index faf703573d..ad3b9f482b 100644 --- a/ui/.prettierignore +++ b/ui/.prettierignore @@ -36,5 +36,4 @@ src/app/login src/app/notifications src/app/NS src/app/pipeline-details -src/app/pipelines 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 = {}; - contentReady = false; - tabs = []; - streamNames: Record = {}; + 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[] { + return relatedStreams.map(s => + this.pipelineElementService.getDataStreamByElementId(s), + ); + } - getStreamObservables(relatedStreams: string[]): Observable[] { - 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 @@ ~ --> - -
- -
-
- - -
- - + (click)="triggerUpdate()" + > + refresh + + +
+ + +
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 @@ ~ --> - -
- -
-
-
- - + (click)="triggerUpdate()" + > + refresh + +
+
+
+ + +
-
- - 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 @@ ~ --> -
- - - - - +
+
Name -

{{spFunction.id}}:{{spFunction.version}}

-
+ + + + - - - + - + (click)="showFunctionDetails(spFunction.id)" + > + search + + + + + - - - -
Name +

+ {{ spFunction.id }}:{{ spFunction.version }} +

+ 		- Action - -
- -
+ Action + +
+ + - -
-
-
- -
+ + + +
+ +
-
-
(no functions available)
+
+
(no functions available)
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; - dataSource: MatTableDataSource; + displayedColumns: string[] = ['name', 'action']; - displayedColumns: string[] = ['name', 'action']; + constructor(private router: Router) {} - constructor(private router: Router) {} - - ngOnInit(): void { - this.dataSource = new MatTableDataSource(this.functions); - } - - showFunctionDetails(functionId: string): void { - this.router.navigate(['pipelines', 'functions', functionId, 'metrics']); - } + ngOnInit(): void { + this.dataSource = new MatTableDataSource(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 @@ ~ --> -
- +
+
- + - + - + - + - + - - +
StatusStatus
-
-
-
-
-
StartStart - - NameName -

{{pipeline.name}}

-
{{pipeline.description != '' ? pipeline.description : '-'}}
+

{{ pipeline.name }}

+
+ {{ + pipeline.description !== '' ? pipeline.description : '-' + }} +
CreatedCreated -
{{pipeline.createdAt | date:'dd.MM.yyyy HH:mm'}}
+
{{ pipeline.createdAt | date : 'dd.MM.yyyy HH:mm' }}
 ActionAction
- - - - - + + + - - - + + + - - - + + + - + (click)=" + pipelineOperationsService.showPermissionsDialog( + pipeline, + refreshPipelinesEmitter + ) + " + data-cy="share" + > + share + +
- +
-
+
(no pipelines available)
- 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 = + new EventEmitter(); - @Output() - refreshPipelinesEmitter: EventEmitter = new EventEmitter(); + displayedColumns: string[] = [ + 'status', + 'start', + 'name', + 'lastModified', + 'action', + ]; - displayedColumns: string[] = ['status', 'start', 'name', 'lastModified', 'action']; + dataSource: MatTableDataSource; - dataSource: MatTableDataSource; + @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( + 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(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 @@
-

Do you really want to delete pipeline {{pipeline.name}}?

 -

This pipeline is still running.

 +

+ Do you really want to delete pipeline + {{ pipeline.name }}? +

+

+ This pipeline is still running. +

This operation cannot be undone.
- -
-
+
- +
-

{{currentStatus}}

 +

{{ currentStatus }}
-
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, - private pipelineService: PipelineService) { - } + constructor( + private dialogRef: DialogRef, + 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 @@
-
-
-

{{pages[0].description}}

- - +
+
+

{{ pages[0].description }}

+ +
-
-

{{pages[1].description}}

+
+

{{ pages[1].description }}

- - {{availablePipeline.name}} + + {{ availablePipeline.name }}
-
-

{{pages[2].description}}

 - -

Importing {{selectedPipelines.length}} {{selectedPipelines.length == 1 ? 'pipeline' : 'pipelines'}}...

 +
+

{{ pages[2].description }}

 + +

+ Importing {{ selectedPipelines.length }} + {{ + selectedPipelines.length === 1 + ? 'pipeline' + : 'pipelines' + }}... +

-
- - -
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) { - } + constructor( + private pipelineService: PipelineService, + private dialogRef: DialogRef, + ) {} 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 @@
-
-
+
+
-

{{pipelineCategory.categoryName}}

-
{{pipelineCategory.categoryDescription}}
-
-
-
- +

+ {{ pipelineCategory.categoryName }} +

+
+ {{ pipelineCategory.categoryDescription }} +
+
+
+
+ - {{pipeline.name}}
+ *ngFor=" + let pipeline of pipelines + | categoryAlreadyInPipelineFilter + : pipelineCategory._id + " + [value]="pipeline._id" + > + {{ pipeline.name }}
 - {{systemPipeline.name}}
+ *ngFor=" + let systemPipeline of systemPipelines + | categoryAlreadyInPipelineFilter + : pipelineCategory._id + " + [value]="systemPipeline._id" + > + {{ systemPipeline.name }}
-
-
-
-
-
-
-
- {{pipeline.name}} +
+
+ {{ pipeline.name }}
-
-
-
-
- -
-
-
-
-
@@ -117,29 +247,50 @@
{{pipelineCategory.categoryDescription}}
Name - +
Description - +
-
-
- +
+
-
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) { + constructor( + private pipelineService: PipelineService, + private dialogRef: DialogRef, + ) { 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 @@
-
Pipeline health monitoring discovered the following issues:
+
+ Pipeline health monitoring discovered the following issues: +
-

{{notification}}

+

{{ notification }}
-
-
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, - private pipelineService: PipelineService) { - } +export class PipelineNotificationsComponent { + @Input() + pipeline: Pipeline; - ngOnInit(): void { - } + constructor( + private dialogRef: DialogRef, + 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 @@
-
-
+
+
- {{action == 0 ? "Starting..." : "Stopping"}} + {{ action === 0 ? 'Starting...' : 'Stopping' }}
-
-

Please wait while the pipeline is {{action == 0 ? "starting..." : "stopping"}}...

+
+

+ Please wait while the pipeline is + {{ action === 0 ? 'starting...' : 'stopping' }}... +

-
-
+
+
done  Forced stop successful @@ -42,21 +70,27 @@

Please wait while the pipeline is {{action == 0 ? "starting..." : "stopping"

+ *ngIf="!operationInProgress && !forceStopActive" + [pipelineOperationStatus]="pipelineOperationStatus" + [action]="action" + (forceStopPipelineEmitter)="forceStopPipeline()" + fxLayout="column" + fxLayoutAlign="center center" + fxFlex="100" + > -
-
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, - private pipelineService: PipelineService, - private shepherdService: ShepherdService) { - } + constructor( + private dialogRef: DialogRef, + 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 @@
-
-

You are about to {{action ? 'start' : 'stop'}} the following pipelines:

+
+

+ You are about to {{ action ? 'start' : 'stop' }} the + following pipelines: +

-
{{pipeline.name}}
+
{{ pipeline.name }}
Press 'Next' to start the process.
-
+
-

{{action ? 'Starting pipeline ' : 'Stopping pipeline'}} {{status.id + 1}} of - {{pipelinesToModify.length}} ({{status.name}})...{{status.status}}

+

+ {{ + action ? 'Starting pipeline ' : 'Stopping pipeline' + }} + {{ status.id + 1 }} of + {{ pipelinesToModify.length }} ({{ status.name }})...{{ + status.status + }} +

-
-

Sorry, there are no pipelines that are currently {{action ? "idle." : "running."}}

+
+

+ Sorry, there are no pipelines that are currently + {{ action ? 'idle.' : 'running.' }} +

- -
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, - 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, + 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 @@ --> -
- - - - - -
- +
- +
- +
-
- +
+
- +
- +
@@ -80,4 +134,3 @@
- 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 = 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 = 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 = 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 = + 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 = + 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 = + 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, + 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, - toggleRunningOperation?, ) { - if (toggleRunningOperation) { - toggleRunningOperation('starting'); + stopPipeline( + pipelineId: string, + refreshPipelinesEmitter: EventEmitter, + 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, - toggleRunningOperation?) { - if (toggleRunningOperation) { - toggleRunningOperation('stopping'); + + afterPipelineOperationsDialogClosed( + dialogRef: DialogRef, + refreshPipelinesEmitter: EventEmitter, + toggleAction: string, + toggleRunningOperation?, + ) { + dialogRef.afterClosed().subscribe(msg => { + refreshPipelinesEmitter.emit(true); + if (toggleRunningOperation) { + toggleRunningOperation(toggleAction); + } + }); + } + + showDeleteDialog( + pipeline: Pipeline, + refreshPipelinesEmitter: EventEmitter, + switchToPipelineView?: any, + ) { + const dialogRef: DialogRef = + 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 { + return this.dialogService.open(PipelineStatusDialogComponent, { + panelType: PanelType.STANDARD_PANEL, + title: 'Pipeline Status', + width: '70vw', + data: { + pipelineId: pipelineId, + action: action, + }, + }); + } + + showPipelineNotificationsDialog( + pipeline: Pipeline, + refreshPipelinesEmitter: EventEmitter, + ) { + const dialogRef: DialogRef = + 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, + ) { + 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, - refreshPipelinesEmitter: EventEmitter, - toggleAction: string, - toggleRunningOperation?) { - dialogRef.afterClosed().subscribe(msg => { - refreshPipelinesEmitter.emit(true); - if (toggleRunningOperation) { - toggleRunningOperation(toggleAction); - } - }); - } - - showDeleteDialog(pipeline: Pipeline, - refreshPipelinesEmitter: EventEmitter, - switchToPipelineView?: any) { - const dialogRef: DialogRef = 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 { - return this.dialogService.open(PipelineStatusDialogComponent, { - panelType: PanelType.STANDARD_PANEL, - title: 'Pipeline Status', - width: '70vw', - data: { - 'pipelineId': pipelineId, - 'action': action - } - }); - } - - showPipelineNotificationsDialog(pipeline: Pipeline, - refreshPipelinesEmitter: EventEmitter) { - const dialogRef: DialogRef = 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) { - 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}); - } }