You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2022/07/12 21:30:23 UTC
[incubator-streampipes] branch STREAMPIPES-558 updated: [STREAMPIPES-537] Harmonize layout of pipeline monitoring view
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-558 by this push:
new 9272bb9d0 [STREAMPIPES-537] Harmonize layout of pipeline monitoring view
9272bb9d0 is described below
commit 9272bb9d0137d60684296df4b64dae37458195db
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Jul 12 23:30:12 2022 +0200
[STREAMPIPES-537] Harmonize layout of pipeline monitoring view
---
.../basic-inner-panel.component.html | 4 +-
.../actions/pipeline-actions.component.html | 87 +++++++++-------------
.../components/edit/quickedit.component.html | 51 +++++++------
.../elements/pipeline-elements.component.html | 12 +--
.../monitoring/pipeline-monitoring.component.ts | 10 ++-
.../preview/pipeline-preview.component.html | 17 ++---
.../status/pipeline-status.component.html | 9 +--
ui/src/scss/sp/main.scss | 2 +-
8 files changed, 85 insertions(+), 107 deletions(-)
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
index 1aaf875af..9d58bff41 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-inner-panel/basic-inner-panel.component.html
@@ -19,8 +19,10 @@
<div fxLayout="column" fxFlex="100" class="panel-outer" [ngStyle]="{margin: outerMargin}">
<div class="general-panel-header" fxLayout="row" fxFlex="100" fxLayoutAlign="start center" *ngIf="!hideToolbar">
<div fxLayout="fill" fxFlex="100">
+ <div fxLayoutAlign="start center" fxLayout="row">
<div class="content-box-title" *ngIf="showTitle">{{panelTitle}}</div>
- <ng-content select="[header]" fxFlex></ng-content>
+ </div>
+ <ng-content select="[header]" fxFlex class="pr-5"></ng-content>
</div>
</div>
diff --git a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
index 2ee14ea50..8bff66215 100644
--- a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
+++ b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
@@ -16,58 +16,41 @@
~
-->
-<div>
- <div class="assembly-options-preview sp-blue-bg">
- <div fxLayout="row" fxLayoutAlign="start center">
- <h4>Actions</h4>
+<sp-basic-inner-panel panelTitle="Actions">
+ <div fxFlex="100" fxLayoutAlign="center center" fxLayout="row" style="padding:10px">
+ <div fxFlex="30">
+ <button mat-button mat-raised-button color="accent"
+ matTooltip="Start Pipeline" matTooltipPosition="above"
+ (click)="startPipeline()"
+ [disabled]="starting" *ngIf="!pipeline.running">
+ <mat-icon>play_arrow</mat-icon>
+ <span> Start</span>
+ </button>
+ <button mat-button mat-raised-button color="accent"
+ matTooltip="Stop Pipeline" matTooltipPosition="above"
+ (click)="stopPipeline()"
+ [disabled]="stopping" *ngIf="pipeline.running">
+ <mat-icon>stop</mat-icon>
+ <span> Stop</span>
+ </button>
</div>
- </div>
- <div class="sp-blue-border">
- <div fxFlex="100" fxLayoutAlign="center center" fxLayout="row" style="padding:10px">
- <div fxFlex="30">
- <button mat-button mat-raised-button color="accent"
- matTooltip="Start Pipeline" matTooltipPosition="above"
- (click)="startPipeline()"
- [disabled]="starting" *ngIf="!pipeline.running">
- <mat-icon>play_arrow</mat-icon>
- <span> Start</span>
- </button>
- <button mat-button mat-raised-button color="accent"
- matTooltip="Stop Pipeline" matTooltipPosition="above"
- (click)="stopPipeline()"
- [disabled]="stopping" *ngIf="pipeline.running">
- <mat-icon>stop</mat-icon>
- <span> Stop</span>
- </button>
- </div>
- <div fxFlex="30">
- <button mat-button mat-raised-button color="accent"
- matTooltip="Modify Pipeline" matTooltipPosition="above"
- [disabled]="pipeline.running"
- (click)="pipelineOperationsService.modifyPipeline(pipeline._id)">
- <mat-icon>mode_edit</mat-icon>
- <span> Modify</span>
- </button>
- </div>
- <div fxFlex="30">
- <button mat-button mat-raised-button color="accent"
- matTooltip="Delete Pipeline" matTooltipPosition="above"
- *ngIf="hasPipelineDeletePrivileges"
- (click)="pipelineOperationsService.showDeleteDialog(pipeline, reloadPipelineEmitter, this.switchToPipelineView)">
- <mat-icon>delete</mat-icon>
- <span> Delete</span>
- </button>
- </div>
-<!-- <div flex="30">-->
-<!-- <md-button ng-click="ctrl.PipelineOperationsService.showLogs(ctrl.pipeline._id)" class="md-button">-->
-<!-- <md-icon-->
-<!-- md-svg-icon="action:ic_info_24px"-->
-<!-- aria-label="Logs" class="md-accent"></md-icon>-->
-<!-- Logs-->
-<!-- <md-tooltip md-direction="top">-->
-<!-- Show Logs-->
-<!-- </md-tooltip>-->
-<!-- </md-button>-->
+ <div fxFlex="30">
+ <button mat-button mat-raised-button color="accent"
+ matTooltip="Modify Pipeline" matTooltipPosition="above"
+ [disabled]="pipeline.running"
+ (click)="pipelineOperationsService.modifyPipeline(pipeline._id)">
+ <mat-icon>mode_edit</mat-icon>
+ <span> Modify</span>
+ </button>
+ </div>
+ <div fxFlex="30">
+ <button mat-button mat-raised-button color="accent"
+ matTooltip="Delete Pipeline" matTooltipPosition="above"
+ *ngIf="hasPipelineDeletePrivileges"
+ (click)="pipelineOperationsService.showDeleteDialog(pipeline, reloadPipelineEmitter, this.switchToPipelineView)">
+ <mat-icon>delete</mat-icon>
+ <span> Delete</span>
+ </button>
</div>
</div>
-</div>
+</sp-basic-inner-panel>
diff --git a/ui/src/app/pipeline-details/components/edit/quickedit.component.html b/ui/src/app/pipeline-details/components/edit/quickedit.component.html
index 2af6ed274..c5c44cab9 100644
--- a/ui/src/app/pipeline-details/components/edit/quickedit.component.html
+++ b/ui/src/app/pipeline-details/components/edit/quickedit.component.html
@@ -28,10 +28,9 @@
style="margin-bottom:15px;"
class="md-padding"
*ngIf="pipelineAvailable"></pipeline-preview>
- <div class="assembly-options-preview sp-blue-bg">
- <div fxLayout="row" fxLayoutAlign="start center">
- <h4>Edit configuration</h4>
- <span fxFlex></span>
+
+ <sp-basic-inner-panel panelTitle="Edit Configuration">
+ <div header fxLayoutAlign="end center" fxFlex="100" fxLayout="row">
<button color="accent" mat-button mat-raised-button matTooltip="Save Pipeline"
matTooltipPosition="above"
style="display:flex;align-items:center;" class="settings-bar-icon-button"
@@ -41,31 +40,31 @@
<span> Update pipeline</span>
</button>
</div>
- </div>
- <div class="sp-blue-border">
- <div *ngIf="selectedElement">
- <div fxLayout="column" style="padding:5px;padding-left:10px;">
- <pipeline-elements-row [pipeline]="pipeline"
- [element]="selectedElement"></pipeline-elements-row>
+ <div fxFlex="100" fxLayout="column">
+ <div *ngIf="selectedElement">
+ <div fxLayout="column" style="padding:5px;padding-left:10px;">
+ <pipeline-elements-row [pipeline]="pipeline"
+ [element]="selectedElement"></pipeline-elements-row>
- <div fxFlex="100" fxLayout="column"
- *ngIf="isInvocable">
- <form [formGroup]="parentForm" fxFlex="100">
- <app-static-property *ngFor="let config of _selectedElement.staticProperties"
- [staticProperty]="config"
- [displayRecommended]="true"
- [staticProperties]="_selectedElement.staticProperties"
- [eventSchemas]="eventSchemas"
- [parentForm]="parentForm"
- [fieldName]="config.internalName">
- </app-static-property>
- </form>
+ <div fxFlex="100" fxLayout="column"
+ *ngIf="isInvocable">
+ <form [formGroup]="parentForm" fxFlex="100">
+ <app-static-property *ngFor="let config of _selectedElement.staticProperties"
+ [staticProperty]="config"
+ [displayRecommended]="true"
+ [staticProperties]="_selectedElement.staticProperties"
+ [eventSchemas]="eventSchemas"
+ [parentForm]="parentForm"
+ [fieldName]="config.internalName">
+ </app-static-property>
+ </form>
+ </div>
</div>
</div>
+ <div fxLayout="column" fxLayoutAlign="center center" *ngIf="!selectedElement">
+ (select an element in the preview window to modify it)
+ </div>
</div>
- <div fxLayout="column" fxLayoutAlign="center center" *ngIf="!selectedElement">
- (select an element in the preview window to modify it)
- </div>
- </div>
+ </sp-basic-inner-panel>
</div>
</sp-basic-nav-tabs>
diff --git a/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.html b/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.html
index 4af2449ed..c04626454 100644
--- a/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.html
+++ b/ui/src/app/pipeline-details/components/elements/pipeline-elements.component.html
@@ -16,13 +16,9 @@
~
-->
-<div>
- <div class="assembly-options-preview sp-blue-bg">
- <div fxLayout="row" fxLayoutAlign="start center">
- <h4>Element Details</h4>
- </div>
- </div>
- <div class="sp-blue-border" style="max-height: 800px;overflow:auto;">
+<sp-basic-inner-panel panelTitle="Element Details">
+
+ <div style="max-height: 800px;overflow:auto;">
<div *ngIf="selectedElement">
<div fxLayout="column" style="padding:5px;padding-left:10px;">
<pipeline-elements-row [pipeline]="pipeline" [element]="selectedElement"></pipeline-elements-row>
@@ -36,4 +32,4 @@
(select an element in the preview window to see details)
</div>
</div>
-</div>
\ No newline at end of file
+</sp-basic-inner-panel>
diff --git a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts
index 3cff74f74..eef16165f 100644
--- a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts
+++ b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.ts
@@ -16,7 +16,7 @@
*
*/
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit } from '@angular/core';
import {
DataProcessorInvocation,
DataSinkInvocation,
@@ -31,6 +31,7 @@ import { PipelineOperationsService } from '../../../pipelines/services/pipeline-
import { AuthService } from '../../../services/auth.service';
import { SpPipelineDetailsDirective } from '../sp-pipeline-details.directive';
import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
@Component({
selector: 'pipeline-monitoring',
@@ -48,6 +49,9 @@ export class PipelineMonitoringComponent extends SpPipelineDetailsDirective impl
pipelineElementMonitoringInfo: Map<string, PipelineElementMonitoringInfo>;
+ reloadPipelinesEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+ reloadSubscription: Subscription;
+
constructor(activatedRoute: ActivatedRoute,
pipelineService: PipelineService,
authService: AuthService,
@@ -58,6 +62,7 @@ export class PipelineMonitoringComponent extends SpPipelineDetailsDirective impl
ngOnInit(): void {
super.onInit();
+ this.reloadSubscription = this.reloadPipelinesEmitter.subscribe(reload => this.loadPipeline());
}
checkMonitoringInfoCollection() {
@@ -97,10 +102,11 @@ export class PipelineMonitoringComponent extends SpPipelineDetailsDirective impl
ngOnDestroy(): void {
this.autoRefresh = false;
+ this.reloadSubscription.unsubscribe();
}
startPipeline() {
- //this.pipelineOperationsService.startPipeline(this.pipeline._id, () => this.loadPipeline());
+ this.pipelineOperationsService.startPipeline(this.pipeline._id, this.reloadPipelinesEmitter);
}
onPipelineAvailable(): void {
diff --git a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.html b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.html
index 93e8f4fc4..f9a118853 100644
--- a/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.html
+++ b/ui/src/app/pipeline-details/components/preview/pipeline-preview.component.html
@@ -16,15 +16,12 @@
~
-->
-<div class="assembly-options-preview sp-blue-bg">
- <div fxLayout="row" fxLayoutAlign="start center">
- <h4>Preview: {{pipeline.name}}</h4>
- </div>
-</div>
-<div class="outer-assembly-preview">
- <div class="canvas-preview-inner">
- <div id="{{jspcanvas}}" class="canvas-preview">
- <pipeline [canvasId]="jspcanvas" [rawPipelineModel]="rawPipelineModel" [preview]="true"></pipeline>
+<sp-basic-inner-panel [panelTitle]="'Preview: ' +pipeline.name" innerPadding="0">
+ <div class="outer-assembly-preview">
+ <div class="canvas-preview-inner">
+ <div id="{{jspcanvas}}" class="canvas-preview">
+ <pipeline [canvasId]="jspcanvas" [rawPipelineModel]="rawPipelineModel" [preview]="true"></pipeline>
+ </div>
</div>
</div>
-</div>
+</sp-basic-inner-panel>
diff --git a/ui/src/app/pipeline-details/components/status/pipeline-status.component.html b/ui/src/app/pipeline-details/components/status/pipeline-status.component.html
index 5083595e8..813b376a8 100644
--- a/ui/src/app/pipeline-details/components/status/pipeline-status.component.html
+++ b/ui/src/app/pipeline-details/components/status/pipeline-status.component.html
@@ -16,12 +16,7 @@
~
-->
-<div class="assembly-options-preview sp-blue-bg">
- <div fxLayout="row" fxLayoutAlign="start center">
- <h4>Pipeline Status</h4>
- </div>
-</div>
-<div class="sp-blue-border">
+<sp-basic-inner-panel panelTitle="Pipeline Status">
<div fxLayout="column" style="min-height:100px; padding:5px;padding-left:15px;" *ngIf="pipelineStatus.length > 0">
<div fxLayout="row" fxFlex="100">
<div fxFlex="20"><h5><b>Date</b></h5></div>
@@ -41,4 +36,4 @@
<div fxLayout="column"fxLayoutAlign="center center" style="min-height:100px; padding:5px;padding-left:15px;" *ngIf="pipelineStatus.length==0">
(no status information available)
</div>
-</div>
\ No newline at end of file
+</sp-basic-inner-panel>
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index 2d6549da6..ac216e040 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -915,7 +915,7 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md
padding: 5px;
border: 1px solid var(--color-bg-2);
height: 300px;
- width: 100%;
+ max-width: 100%;
background-color: var(--color-bg-1);
background-image: var(--canvas-color);