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 <[email protected]> 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;
