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/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 8439185aa2 feat: Add user hint to data view selection panel if no data
view is present (#3406)
8439185aa2 is described below
commit 8439185aa2d3136a3e9b9573bd685b5058111ab1
Author: Dominik Riemer <[email protected]>
AuthorDate: Thu Jan 9 13:08:07 2025 +0100
feat: Add user hint to data view selection panel if no data view is present
(#3406)
---
...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 },
+ });
+ }
}
