This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch add-data-view-link-data-explorer in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 75527ffa4971029132dddbcf9aa3a610e1732811 Author: Dominik Riemer <[email protected]> AuthorDate: Thu Jan 9 11:14:55 2025 +0100 feat: Add user hint to data view selection panel if no data view is present --- ...dashboard-widget-selection-panel.component.html | 4 +-- .../data-view-selection.component.html | 31 +++++++++++++++++----- .../data-view-selection.component.scss | 5 ++++ .../data-view-selection.component.ts | 13 ++++++++- 4 files changed, 42 insertions(+), 11 deletions(-) diff --git a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.html b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.html index eea0f0d838..8624782710 100644 --- a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.html +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.html @@ -32,13 +32,11 @@ <div class="scroll-tab-content"> <sp-data-explorer-data-view-selection (addDataViewEmitter)="addDataViewEmitter.emit($event)" + fxFlex="100" > </sp-data-explorer-data-view-selection> </div> </mat-tab> - <mat-tab data-cy="designer-panel-data-config" label="Layout"> - <div class="scroll-tab-content">Layout</div> - </mat-tab> </mat-tab-group> </div> </div> diff --git a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.html b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.html index 3fb1c3cccc..65af2d52e2 100644 --- a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.html +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.html @@ -17,11 +17,28 @@ --> <div fxFlex="100" class="m-10" fxLayoutGap="10px" fxLayout="column"> - <div *ngFor="let dataView of dataViews"> - <sp-data-explorer-data-view-preview - [dataView]="dataView" - (addDataViewEmitter)="addDataViewEmitter.emit($event)" - > - </sp-data-explorer-data-view-preview> - </div> + @if (dataViews.length > 0) { + <div *ngFor="let dataView of dataViews"> + <sp-data-explorer-data-view-preview + [dataView]="dataView" + (addDataViewEmitter)="addDataViewEmitter.emit($event)" + > + </sp-data-explorer-data-view-preview> + </div> + } @else { + <div fxLayoutAlign="center center" fxLayout="column" fxFlex="100"> + <span class="no-widget-hint" + >No data views found - create a new data view first to add it to + this dashboard.</span + > + <button + mat-button + color="accent" + class="mt-10" + (click)="navigateToDataViewCreation()" + > + Create Data View + </button> + </div> + } </div> diff --git a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.scss b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.scss index 198edb0cf3..0bfc9c03c3 100644 --- a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.scss +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.scss @@ -19,3 +19,8 @@ .m-10 { margin: 10px; } + +.no-widget-hint { + font-size: 10pt; + text-align: center; +} diff --git a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.ts b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.ts index e3cb045741..bac0270449 100644 --- a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.ts +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.ts @@ -21,6 +21,7 @@ import { DataExplorerWidgetModel, DataViewDataExplorerService, } from '@streampipes/platform-services'; +import { Router } from '@angular/router'; @Component({ selector: 'sp-data-explorer-data-view-selection', @@ -33,7 +34,10 @@ export class DataExplorerDataViewSelectionComponent implements OnInit { dataViews: DataExplorerWidgetModel[] = []; - constructor(private dataViewService: DataViewDataExplorerService) {} + constructor( + private dataViewService: DataViewDataExplorerService, + private router: Router, + ) {} ngOnInit() { this.dataViewService.getAllWidgets().subscribe(dataViews => { @@ -44,4 +48,11 @@ export class DataExplorerDataViewSelectionComponent implements OnInit { ); }); } + + navigateToDataViewCreation(): void { + this.router.navigate(['dataexplorer', 'data-view'], { + queryParams: { editMode: true }, + state: { omitConfirm: true }, + }); + } }
