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/06/05 12:21:30 UTC
[incubator-streampipes] 01/03: [hotfix] Improve handling of edit mode in data explorer
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 4c2c65fc9e0950c0ead0b22d583ff86119840def
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sun Jun 5 14:20:20 2022 +0200
[hotfix] Improve handling of edit mode in data explorer
---
.../data-explorer-dashboard-panel.component.html | 36 ++++++++++++++--------
.../data-explorer-dashboard-panel.component.ts | 13 +++++++-
.../data-explorer-dashboard-widget.component.scss | 1 +
.../base/base-data-explorer-widget.directive.ts | 2 +-
4 files changed, 38 insertions(+), 14 deletions(-)
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
index c8805f19c..d2108e6dc 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
@@ -59,7 +59,7 @@
<i class="material-icons">add</i>
</button>
</div>
- <div class="data-explorer-options-item" fxLayoutAlign="start center" fxLayout="row" >
+ <div class="data-explorer-options-item" fxLayoutAlign="start center" fxLayout="row">
<button mat-icon-button
[matMenuTriggerFor]="menu"
aria-label="View mode"
@@ -83,7 +83,8 @@
(dateRangeEmitter)="updateDateRange($event)" [dateRange]="timeSettings">
</sp-time-range-selector>
- <button mat-icon-button [matMenuTriggerFor]="optMenu" aria-label="Options" data-cy="options-data-explorer">
+ <button mat-icon-button [matMenuTriggerFor]="optMenu" aria-label="Options"
+ data-cy="options-data-explorer">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #optMenu="matMenu">
@@ -135,8 +136,19 @@
</div>
</mat-drawer>
<mat-drawer-content class="h-100 dashboard-grid">
+ <div *ngIf="showEditingHelpInfo" fxFlex="100" fxLayout="column" fxLayoutAlign="center center">
+ <h4>This data view is empty and doesn't contain any widgets.</h4>
+ <button mat-button
+ mat-raised-button
+ color="accent"
+ *ngIf="hasDataExplorerWritePrivileges"
+ (click)="triggerEditMode()">
+ <mat-icon>add</mat-icon>
+ Add widget
+ </button>
+ </div>
<sp-data-explorer-dashboard-grid #dashboardGrid
- *ngIf="viewMode === 'grid'"
+ *ngIf="!showEditingHelpInfo && viewMode === 'grid'"
[editMode]="editMode"
[dashboard]="dashboard"
[timeSettings]="timeSettings"
@@ -148,15 +160,15 @@
class="h-100 dashboard-grid">
</sp-data-explorer-dashboard-grid>
<sp-data-explorer-dashboard-slide-view class="h-100 dashboard-grid" #dashboardSlide
- [editMode]="editMode"
- [dashboard]="dashboard"
- [timeSettings]="timeSettings"
- [currentlyConfiguredWidgetId]="currentlyConfiguredWidgetId"
- (configureWidgetCallback)="updateCurrentlyConfiguredWidget($event)"
- (updateCallback)="updateAndQueueItemForDeletion($event)"
- (deleteCallback)="removeAndQueueItemForDeletion($event)"
- (startEditModeEmitter)="startEditMode($event)"
- *ngIf="viewMode === 'slide'">
+ [editMode]="editMode"
+ [dashboard]="dashboard"
+ [timeSettings]="timeSettings"
+ [currentlyConfiguredWidgetId]="currentlyConfiguredWidgetId"
+ (configureWidgetCallback)="updateCurrentlyConfiguredWidget($event)"
+ (updateCallback)="updateAndQueueItemForDeletion($event)"
+ (deleteCallback)="removeAndQueueItemForDeletion($event)"
+ (startEditModeEmitter)="startEditMode($event)"
+ *ngIf="!showEditingHelpInfo && viewMode === 'slide'">
</sp-data-explorer-dashboard-slide-view>
</mat-drawer-content>
</mat-drawer-container>
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
index 209542b93..52c876bec 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
@@ -84,6 +84,7 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
dataLakeMeasure: DataLakeMeasure;
showDesignerPanel = false;
+ showEditingHelpInfo = false;
constructor(
private dataViewDataExplorerService: DataViewDataExplorerService,
@@ -186,6 +187,7 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
this.editMode = true;
this.editModeChange.emit(true);
this.updateCurrentlyConfiguredWidget(widgetModel);
+ this.showEditingHelpInfo = false;
}
prepareWidgetUpdates(): Observable<any>[] {
@@ -245,8 +247,10 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
}
triggerEditMode() {
+ this.showEditingHelpInfo = false;
this.editMode = true;
this.editModeChange.emit(true);
+ this.createWidget();
}
createWidget() {
@@ -264,7 +268,9 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
this.newWidgetMode = true;
this.showDesignerPanel = true;
this.newWidgetMode = true;
- this.designerPanel.resetIndex();
+ if (this.designerPanel) {
+ this.designerPanel.resetIndex();
+ }
}
closeDesignerPanel() {
@@ -288,6 +294,11 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
(dashboard) => dashboard._id === dashboardId
)[0];
this.timeSettings = (startTime && endTime) ? this.overrideTime(+startTime, +endTime) : this.dashboard.dashboardTimeSettings;
+ if (this.dashboard.widgets.length === 0 && this.editMode) {
+ this.triggerEditMode();
+ } else if (this.dashboard.widgets.length === 0 && !(this.editMode)) {
+ this.showEditingHelpInfo = true;
+ }
this.dashboardLoaded = true;
});
}
diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
index 7dfcbef1b..c7b8cbec6 100644
--- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
+++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
@@ -46,6 +46,7 @@
display: flex;
flex-flow: column;
height: 100%;
+ padding-top: 5px;
}
.box .row.content {
diff --git a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
index 168228026..f528939e5 100644
--- a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
+++ b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts
@@ -87,7 +87,7 @@ export abstract class BaseDataExplorerWidgetDirective<T extends DataExplorerWidg
}
ngOnInit(): void {
- const heightOffset = this.gridMode ? 40 : 40;
+ const heightOffset = this.gridMode ? 55 : 55;
this.showData = true;
const sourceConfigs = this.dataExplorerWidget.dataConfig.sourceConfigs;
this.fieldProvider = this.fieldService.generateFieldLists(sourceConfigs);