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 2021/05/21 21:47:59 UTC
[incubator-streampipes] 01/03: [STREAMPIPES-369] Improve user
guidance in live dashboard
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 5fe0cf87bd9d7c50c314b487c28053d3301dbcab
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri May 21 15:51:38 2021 +0200
[STREAMPIPES-369] Improve user guidance in live dashboard
---
.../widget/dashboard-widget.component.html | 11 +++++++---
.../widget/dashboard-widget.component.ts | 21 ++++++++++++++++++-
.../add-visualization-dialog.component.html | 5 ++---
.../add-visualization-dialog.component.ts | 24 +++++++++++++---------
4 files changed, 44 insertions(+), 17 deletions(-)
diff --git a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
index 4227fa2..1aabc78 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
@@ -19,7 +19,7 @@
<div style="height:100%;">
<div class="box">
<div class="assemblyOptions sp-blue-bg m-0 row header h-40" *ngIf="editMode && headerVisible">
- <div fxFlex="100" layout="row" fxLayoutAlign="end center">
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
<button mat-button mat-icon-button color="white" (click)="editWidget()">
<i class="material-icons">settings</i>
</button>
@@ -29,18 +29,23 @@
</div>
</div>
<div class="h-100 p-0 row content">
- <!-- <div *ngIf="widget."></div>-->
<div *ngIf="widgetLoaded && widgetNotAvailable" class="h-100 pipeline-not-running" fxFlex="100"
fxLayout="column"
fxLayoutAlign="center center">
<i class="material-icons disconnect-icon">block</i>
<h5 style="text-align:center;">Widget not found, did you modify the pipeline?</h5>
+ <button mat-button mat-raised-button color="primary" (click)="modifyWidget()">
+ <span>Modify widget</span>
+ </button>
</div>
<div *ngIf="widgetLoaded && !widgetNotAvailable && !pipelineRunning" class="h-100 pipeline-not-running" fxFlex="100"
fxLayout="column"
fxLayoutAlign="center center">
<i class="material-icons disconnect-icon">link_off</i>
- <h5 style="text-align:center;">Underlying pipeline {{pipeline.name}} is not running, did you start the pipeline?</h5>
+ <h5 style="text-align:center;">Pipeline <i>{{pipeline.name}}</i> is not running, did you start the pipeline?</h5>
+ <button mat-button mat-raised-button color="primary" (click)="startPipeline()">
+ <span>Start pipeline</span>
+ </button>
</div>
<div *ngIf="widgetLoaded && pipelineRunning" class="h-100">
<div *ngIf="widget.widgetType === 'number'" class="h-100 p-0">
diff --git a/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts b/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
index 39a6122..8149020 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
@@ -27,6 +27,7 @@ import {
} from "../../../core-model/gen/streampipes-model";
import {PanelType} from "../../../core-ui/dialog/base-dialog/base-dialog.model";
import {DialogService} from "../../../core-ui/dialog/base-dialog/base-dialog.service";
+import {PipelineService} from "../../../platform-services/apis/pipeline.service";
@Component({
selector: 'dashboard-widget',
@@ -53,10 +54,15 @@ export class DashboardWidgetComponent implements OnInit {
widgetNotAvailable: boolean = false;
constructor(private dashboardService: DashboardService,
- private dialogService: DialogService) {
+ private dialogService: DialogService,
+ private pipelineService: PipelineService) {
}
ngOnInit(): void {
+ this.loadWidget();
+ }
+
+ loadWidget() {
this.dashboardService.getWidget(this.widget.id).subscribe(response => {
this.configuredWidget = response;
this.dashboardService.getVisualizablePipelineByPipelineIdAndVisualizationName(this.configuredWidget.pipelineId,
@@ -79,6 +85,19 @@ export class DashboardWidgetComponent implements OnInit {
this.deleteCallback.emit(this.widget);
}
+ startPipeline() {
+ if (!this.pipelineRunning) {
+ this.pipelineService
+ .startPipeline(this.pipeline._id)
+ .subscribe(status => this.loadWidget());
+ }
+ }
+
+ modifyWidget() {
+ this.editMode = true;
+ this.editWidget();
+ }
+
editWidget(): void {
const dialogRef = this.dialogService.open(AddVisualizationDialogComponent,{
panelType: PanelType.SLIDE_IN_PANEL,
diff --git a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html
index 714743b..9e026d4 100644
--- a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html
+++ b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html
@@ -73,8 +73,7 @@
<button mat-button mat-raised-button class="mat-basic" (click)="onCancel()" style="margin-right:10px;">
Cancel
</button>
- <button mat-button mat-raised-button class="mat-basic" (click)="back()" *ngIf="(!('select-pipeline'===page))
- && !(editMode)" style="margin-right:10px;">
+ <button mat-button mat-raised-button class="mat-basic" (click)="back()" *ngIf="(!('select-pipeline'===page))" style="margin-right:10px;">
Back
</button>
<button mat-button mat-raised-button color="primary" (click)="next()" [disabled]="'configure-widget' === page
@@ -84,4 +83,4 @@
<span *ngIf="editMode == null && !('configure-widget' === page)">Next</span>
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
index 69c63b3..087625b 100644
--- a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
+++ b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.ts
@@ -100,16 +100,7 @@ export class AddVisualizationDialogComponent implements OnInit, AfterViewInit {
});
if (!this.editMode) {
this.dialogTitle = 'Add widget';
- this.dashboardService.getVisualizablePipelines().subscribe(visualizations => {
- this.visualizablePipelines = [];
- visualizations.forEach(vis => {
- this.pipelineService.getPipelineById(vis.pipelineId).subscribe(pipeline => {
- vis.pipelineName = pipeline.name;
- this.visualizablePipelines.push(vis);
- this.sortPipeline();
- });
- });
- });
+ this.loadVisualizablePipelines();
} else {
this.dialogTitle = 'Edit widget';
this.selectedPipeline = this.pipeline;
@@ -124,6 +115,19 @@ export class AddVisualizationDialogComponent implements OnInit, AfterViewInit {
this.changeDetectorRef.detectChanges();
}
+ loadVisualizablePipelines() {
+ this.dashboardService.getVisualizablePipelines().subscribe(visualizations => {
+ this.visualizablePipelines = [];
+ visualizations.forEach(vis => {
+ this.pipelineService.getPipelineById(vis.pipelineId).subscribe(pipeline => {
+ vis.pipelineName = pipeline.name;
+ this.visualizablePipelines.push(vis);
+ this.sortPipeline();
+ });
+ });
+ });
+ }
+
sortPipeline() {
this.visualizablePipelines.sort((a, b) => {
return a.pipelineName < b.pipelineName ? -1 : 1;