This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch 3921-dashboard
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/3921-dashboard by this push:
new 4122848079 refactor(#3921): Migrate dashboard to control flow syntax
4122848079 is described below
commit 4122848079c07dc041eddf31d72a48d874b0def2
Author: Philipp Zehnder <[email protected]>
AuthorDate: Thu Nov 13 16:57:37 2025 +0100
refactor(#3921): Migrate dashboard to control flow syntax
---
.../kiosk/dashboard-kiosk.component.html | 55 ++---
.../slide-view/dashboard-slide-view.component.html | 137 +++++------
.../dashboard-overview-table.component.html | 68 +++---
.../overview/dashboard-overview.component.html | 57 ++---
.../chart-selection/chart-selection.component.html | 48 ++--
.../panel/dashboard-panel.component.html | 251 +++++++++++----------
.../dashboard-toolbar.component.html | 146 ++++++------
7 files changed, 393 insertions(+), 369 deletions(-)
diff --git
a/ui/src/app/dashboard-kiosk/components/kiosk/dashboard-kiosk.component.html
b/ui/src/app/dashboard-kiosk/components/kiosk/dashboard-kiosk.component.html
index 13e9c8f850..c6550df07e 100644
--- a/ui/src/app/dashboard-kiosk/components/kiosk/dashboard-kiosk.component.html
+++ b/ui/src/app/dashboard-kiosk/components/kiosk/dashboard-kiosk.component.html
@@ -1,20 +1,20 @@
<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
+~ Licensed to the Apache Software Foundation (ASF) under one or more
+~ contributor license agreements. See the NOTICE file distributed with
+~ this work for additional information regarding copyright ownership.
+~ The ASF licenses this file to You under the Apache License, Version 2.0
+~ (the "License"); you may not use this file except in compliance with
+~ the License. You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
<div
fxLayout="column"
@@ -57,17 +57,18 @@
</mat-toolbar>
<div fxLayout="column" style="height: calc(100vh - 40px)">
@if (dashboard) {
- <sp-dashboard-grid-view
- *ngIf="dashboard?.widgets.length > 0"
- [editMode]="false"
- [kioskMode]="true"
- [dashboard]="dashboard"
- [observableGenerator]="observableGenerator"
- [widgets]="widgets"
- [timeSettings]="dashboard.dashboardTimeSettings"
- class="dashboard-grid"
- >
- </sp-dashboard-grid-view>
+ @if (dashboard?.widgets.length > 0) {
+ <sp-dashboard-grid-view
+ [editMode]="false"
+ [kioskMode]="true"
+ [dashboard]="dashboard"
+ [observableGenerator]="observableGenerator"
+ [widgets]="widgets"
+ [timeSettings]="dashboard.dashboardTimeSettings"
+ class="dashboard-grid"
+ >
+ </sp-dashboard-grid-view>
+ }
}
</div>
</div>
diff --git
a/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.html
b/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.html
index e7fd8d59b2..660c84dd6c 100644
---
a/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.html
+++
b/ui/src/app/dashboard-shared/components/chart-view/slide-view/dashboard-slide-view.component.html
@@ -1,78 +1,79 @@
<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
+~ Licensed to the Apache Software Foundation (ASF) under one or more
+~ contributor license agreements. See the NOTICE file distributed with
+~ this work for additional information regarding copyright ownership.
+~ The ASF licenses this file to You under the Apache License, Version 2.0
+~ (the "License"); you may not use this file except in compliance with
+~ the License. You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
<div fxFlex="100" fxLayout="column" style="overflow-y: hidden">
<div class="h-100" fxLayout="row" fxFlex="100">
- <div
- fxFlex="200px"
- fxLayout="column"
- class="selection-box"
- *ngIf="widgetsAvailable && currentWidget"
- >
- <div
- *ngFor="let item of dashboard.widgets; let i = index"
- [ngClass]="
- item.id === currentWidget.elementId
- ? 'viz-preview viz-preview-selected'
- : 'viz-preview'
- "
- fxLayoutAlign="center center"
- (click)="selectWidget(i, item.id)"
- >
- <div
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="center center"
- >
- <span class="slide-view-title" *ngIf="widgetsVisible">{{
- configuredWidgets.get(item.id).baseAppearanceConfig
- .widgetTitle
- }}</span>
- </div>
+ @if (widgetsAvailable && currentWidget) {
+ <div fxFlex="200px" fxLayout="column" class="selection-box">
+ @for (item of dashboard.widgets; track item; let i = $index) {
+ <div
+ [ngClass]="
+ item.id === currentWidget.elementId
+ ? 'viz-preview viz-preview-selected'
+ : 'viz-preview'
+ "
+ fxLayoutAlign="center center"
+ (click)="selectWidget(i, item.id)"
+ >
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ >
+ @if (widgetsVisible) {
+ <span class="slide-view-title">{{
+ configuredWidgets.get(item.id)
+ .baseAppearanceConfig.widgetTitle
+ }}</span>
+ }
+ </div>
+ </div>
+ }
</div>
- </div>
+ }
<div fxFlex="100">
<div class="h-100 w-100 mw-100" id="slideViewOuter" fxFlex="100">
- <sp-data-explorer-chart-container
- [ngStyle]="{
- height: gridsterItemComponent.height - 15 + 'px'
- }"
- [timeSettings]="timeSettings"
- [globalTimeEnabled]="
- dashboard.dashboardGeneralSettings.globalTimeEnabled
- "
- (deleteCallback)="propagateItemRemoval($event)"
- (startEditModeEmitter)="startEditMode($event)"
- [dashboardItem]="currentDashboardItem"
- [configuredWidget]="currentWidget"
- [dataLakeMeasure]="currentMeasure"
- [observableGenerator]="observableGenerator"
- [editMode]="editMode"
- [gridMode]="false"
- [widgetIndex]="i"
- [gridsterItemComponent]="gridsterItemComponent"
- *ngIf="
- widgetsAvailable &&
- displayWidget &&
- currentWidget &&
- widgetsVisible
- "
- ></sp-data-explorer-chart-container>
+ @if (
+ widgetsAvailable &&
+ displayWidget &&
+ currentWidget &&
+ widgetsVisible
+ ) {
+ <sp-data-explorer-chart-container
+ [ngStyle]="{
+ height: gridsterItemComponent.height - 15 + 'px'
+ }"
+ [timeSettings]="timeSettings"
+ [globalTimeEnabled]="
+
dashboard.dashboardGeneralSettings.globalTimeEnabled
+ "
+ (deleteCallback)="propagateItemRemoval($event)"
+ (startEditModeEmitter)="startEditMode($event)"
+ [dashboardItem]="currentDashboardItem"
+ [configuredWidget]="currentWidget"
+ [dataLakeMeasure]="currentMeasure"
+ [observableGenerator]="observableGenerator"
+ [editMode]="editMode"
+ [gridMode]="false"
+ [widgetIndex]="i"
+ [gridsterItemComponent]="gridsterItemComponent"
+ ></sp-data-explorer-chart-container>
+ }
</div>
</div>
</div>
diff --git
a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html
b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html
index 0d339c3c21..4725718082 100644
---
a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html
+++
b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html
@@ -1,20 +1,20 @@
<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
+~ Licensed to the Apache Software Foundation (ASF) under one or more
+~ contributor license agreements. See the NOTICE file distributed with
+~ this work for additional information regarding copyright ownership.
+~ The ASF licenses this file to You under the Apache License, Version 2.0
+~ (the "License"); you may not use this file except in compliance with
+~ the License. You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
<div fxFlex="100" fxLayout="column">
<sp-basic-header-title-component
@@ -52,14 +52,18 @@
{{ 'Last modified' | translate }}
</th>
<td mat-cell *matCellDef="let element">
- <div *ngIf="element.metadata">
- {{
- this.formatDate(
- element.metadata.lastModifiedEpochMs
- )
- }}
- </div>
- <div *ngIf="!element.metadata">–</div>
+ @if (element.metadata) {
+ <div>
+ {{
+ this.formatDate(
+ element.metadata.lastModifiedEpochMs
+ )
+ }}
+ </div>
+ }
+ @if (!element.metadata) {
+ <div>–</div>
+ }
</td>
</ng-container>
@@ -68,10 +72,18 @@
{{ 'Created' | translate }}
</th>
<td mat-cell *matCellDef="let element">
- <div *ngIf="element.metadata">
- {{ this.formatDate(element.metadata.createdAtEpochMs)
}}
- </div>
- <div *ngIf="!element.metadata">–</div>
+ @if (element.metadata) {
+ <div>
+ {{
+ this.formatDate(
+ element.metadata.createdAtEpochMs
+ )
+ }}
+ </div>
+ }
+ @if (!element.metadata) {
+ <div>–</div>
+ }
</td>
</ng-container>
diff --git
a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
index a52a9c7721..89d0a12407 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
@@ -1,20 +1,20 @@
<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
+~ Licensed to the Apache Software Foundation (ASF) under one or more
+~ contributor license agreements. See the NOTICE file distributed with
+~ this work for additional information regarding copyright ownership.
+~ The ASF licenses this file to You under the Apache License, Version 2.0
+~ (the "License"); you may not use this file except in compliance with
+~ the License. You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
<sp-basic-view [showBackLink]="false" [padding]="true">
<div
@@ -24,18 +24,19 @@
fxLayout="row"
class="pl-10"
>
- <button
- mat-button
- mat-flat-button
- color="accent"
- data-cy="open-new-dashboard-dialog"
- (click)="openNewDashboardDialog()"
- class="mr-10"
- *ngIf="hasDashboardWritePrivileges"
- >
- <i class="material-icons">add</i>
- <span>{{ 'New dashboard' | translate }}</span>
- </button>
+ @if (hasDashboardWritePrivileges) {
+ <button
+ mat-button
+ mat-flat-button
+ color="accent"
+ data-cy="open-new-dashboard-dialog"
+ (click)="openNewDashboardDialog()"
+ class="mr-10"
+ >
+ <i class="material-icons">add</i>
+ <span>{{ 'New dashboard' | translate }}</span>
+ </button>
+ }
</div>
<div fxFlex="100" fxLayout="column">
<sp-dashboard-overview-table
diff --git
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
index 8838a45048..0346b5bbb7 100644
---
a/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
+++
b/ui/src/app/dashboard/components/panel/chart-selection-panel/chart-selection/chart-selection.component.html
@@ -1,30 +1,32 @@
<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
+~ Licensed to the Apache Software Foundation (ASF) under one or more
+~ contributor license agreements. See the NOTICE file distributed with
+~ this work for additional information regarding copyright ownership.
+~ The ASF licenses this file to You under the Apache License, Version 2.0
+~ (the "License"); you may not use this file except in compliance with
+~ the License. You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
<div fxFlex="100" class="m-10" fxLayoutGap="10px" fxLayout="column">
@if (charts.length > 0) {
- <div *ngFor="let chart of charts">
- <sp-chart-preview
- [chart]="chart"
- (addChartEmitter)="addChartEmitter.emit($event)"
- >
- </sp-chart-preview>
- </div>
+ @for (chart of charts; track chart) {
+ <div>
+ <sp-chart-preview
+ [chart]="chart"
+ (addChartEmitter)="addChartEmitter.emit($event)"
+ >
+ </sp-chart-preview>
+ </div>
+ }
} @else {
<div fxLayoutAlign="center center" fxLayout="column" fxFlex="100">
<span class="no-widget-hint">{{
diff --git
a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
index fca9b6789c..a2aca9c431 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html
@@ -1,136 +1,147 @@
<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
+~ Licensed to the Apache Software Foundation (ASF) under one or more
+~ contributor license agreements. See the NOTICE file distributed with
+~ this work for additional information regarding copyright ownership.
+~ The ASF licenses this file to You under the Apache License, Version 2.0
+~ (the "License"); you may not use this file except in compliance with
+~ the License. You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
-<sp-basic-view
- [backLinkTarget]="['dashboard']"
- [showBackLink]="true"
- *ngIf="dashboardLoaded || dashboardNotFound"
->
- <div
- nav
- fxFlex="100"
- class="ml-10"
- fxLayout="row"
- fxLayoutAlign="start center"
- >
- @if (!dashboardNotFound) {
- <sp-dashboard-toolbar
- fxFlex="100"
- [dashboard]="dashboard"
- [editMode]="editMode"
- [(viewMode)]="viewMode"
- [hasDataExplorerWritePrivileges]="
- hasDataExplorerWritePrivileges
- "
- [timeRangeVisible]="timeRangeVisible"
- [timeSettings]="timeSettings"
- (saveDashboardEmitter)="persistDashboardChanges()"
- (discardDashboardEmitter)="discardChanges()"
- (deleteDashboardEmitter)="deleteDashboard()"
- (triggerEditModeEmitter)="triggerEditMode()"
- (updateDateRangeEmitter)="updateDateRange($event)"
-
(intervalSettingsChangedEmitter)="modifyRefreshInterval($event)"
- >
- </sp-dashboard-toolbar>
- }
- </div>
-
- <div fxFlex="100" fxLayout="column">
- @if (dashboardNotFound) {
- <div
- *ngIf="dashboardNotFound"
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="center center"
- data-cy="dashboard-not-found"
- >
- <h4>
- {{ 'The desired dashboard was not found!' | translate }}
- </h4>
- </div>
- } @else {
- <mat-drawer-container
- class="designer-panel-container h-100 dashboard-grid"
- >
- <mat-drawer
- [opened]="editMode"
- mode="side"
- position="end"
- class="designer-panel"
+@if (dashboardLoaded || dashboardNotFound) {
+ <sp-basic-view [backLinkTarget]="['dashboard']" [showBackLink]="true">
+ <div
+ nav
+ fxFlex="100"
+ class="ml-10"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ >
+ @if (!dashboardNotFound) {
+ <sp-dashboard-toolbar
+ fxFlex="100"
+ [dashboard]="dashboard"
+ [editMode]="editMode"
+ [(viewMode)]="viewMode"
+ [hasDataExplorerWritePrivileges]="
+ hasDataExplorerWritePrivileges
+ "
+ [timeRangeVisible]="timeRangeVisible"
+ [timeSettings]="timeSettings"
+ (saveDashboardEmitter)="persistDashboardChanges()"
+ (discardDashboardEmitter)="discardChanges()"
+ (deleteDashboardEmitter)="deleteDashboard()"
+ (triggerEditModeEmitter)="triggerEditMode()"
+ (updateDateRangeEmitter)="updateDateRange($event)"
+ (intervalSettingsChangedEmitter)="
+ modifyRefreshInterval($event)
+ "
>
- <div fxLayout="column" fxFlex="100">
- @if (editMode) {
- <sp-dashboard-chart-selection-panel
- (addChartEmitter)="addChartToDashboard($event)"
- fxFlex="100"
- >
- </sp-dashboard-chart-selection-panel>
- }
- </div>
- </mat-drawer>
- <mat-drawer-content class="h-100 dashboard-grid">
+ </sp-dashboard-toolbar>
+ }
+ </div>
+ <div fxFlex="100" fxLayout="column">
+ @if (dashboardNotFound) {
+ @if (dashboardNotFound) {
<div
- *ngIf="dashboard.widgets.length === 0"
fxFlex="100"
fxLayout="column"
fxLayoutAlign="center center"
- data-cy="empty-dashboard"
+ data-cy="dashboard-not-found"
>
<h4>
{{
- "This dashboard is empty and doesn't contain
any charts."
+ 'The desired dashboard was not found!'
| translate
}}
</h4>
</div>
-
- <sp-dashboard-grid-view
- #dashboardGrid
- *ngIf="
- dashboard.widgets.length > 0 && viewMode === 'grid'
- "
- [editMode]="editMode"
- [dashboard]="dashboard"
- [widgets]="widgets"
- [observableGenerator]="observableGenerator"
- [timeSettings]="timeSettings"
- (deleteCallback)="removeChartFromDashboard($event)"
- (startEditModeEmitter)="startEditMode($event)"
- class="h-100 dashboard-grid"
+ }
+ } @else {
+ <mat-drawer-container
+ class="designer-panel-container h-100 dashboard-grid"
+ >
+ <mat-drawer
+ [opened]="editMode"
+ mode="side"
+ position="end"
+ class="designer-panel"
>
- </sp-dashboard-grid-view>
- <sp-dashboard-slide-view
- class="h-100 dashboard-grid"
- #dashboardSlide
- [editMode]="editMode"
- [dashboard]="dashboard"
- [widgets]="widgets"
- [observableGenerator]="observableGenerator"
- [timeSettings]="timeSettings"
- (deleteCallback)="removeChartFromDashboard($event)"
- (startEditModeEmitter)="startEditMode($event)"
- *ngIf="
+ <div fxLayout="column" fxFlex="100">
+ @if (editMode) {
+ <sp-dashboard-chart-selection-panel
+ (addChartEmitter)="
+ addChartToDashboard($event)
+ "
+ fxFlex="100"
+ >
+ </sp-dashboard-chart-selection-panel>
+ }
+ </div>
+ </mat-drawer>
+ <mat-drawer-content class="h-100 dashboard-grid">
+ @if (dashboard.widgets.length === 0) {
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ data-cy="empty-dashboard"
+ >
+ <h4>
+ {{
+ "This dashboard is empty and doesn't
contain any charts."
+ | translate
+ }}
+ </h4>
+ </div>
+ }
+ @if (
+ dashboard.widgets.length > 0 && viewMode === 'grid'
+ ) {
+ <sp-dashboard-grid-view
+ #dashboardGrid
+ [editMode]="editMode"
+ [dashboard]="dashboard"
+ [widgets]="widgets"
+ [observableGenerator]="observableGenerator"
+ [timeSettings]="timeSettings"
+ (deleteCallback)="
+ removeChartFromDashboard($event)
+ "
+ (startEditModeEmitter)="startEditMode($event)"
+ class="h-100 dashboard-grid"
+ >
+ </sp-dashboard-grid-view>
+ }
+ @if (
dashboard.widgets.length > 0 && viewMode ===
'slide'
- "
- >
- </sp-dashboard-slide-view>
- </mat-drawer-content>
- </mat-drawer-container>
- }
- </div>
-</sp-basic-view>
+ ) {
+ <sp-dashboard-slide-view
+ class="h-100 dashboard-grid"
+ #dashboardSlide
+ [editMode]="editMode"
+ [dashboard]="dashboard"
+ [widgets]="widgets"
+ [observableGenerator]="observableGenerator"
+ [timeSettings]="timeSettings"
+ (deleteCallback)="
+ removeChartFromDashboard($event)
+ "
+ (startEditModeEmitter)="startEditMode($event)"
+ >
+ </sp-dashboard-slide-view>
+ }
+ </mat-drawer-content>
+ </mat-drawer-container>
+ }
+ </div>
+ </sp-basic-view>
+}
diff --git
a/ui/src/app/dashboard/components/panel/dashboard-toolbar/dashboard-toolbar.component.html
b/ui/src/app/dashboard/components/panel/dashboard-toolbar/dashboard-toolbar.component.html
index c500c3573b..22f0e0fcfb 100644
---
a/ui/src/app/dashboard/components/panel/dashboard-toolbar/dashboard-toolbar.component.html
+++
b/ui/src/app/dashboard/components/panel/dashboard-toolbar/dashboard-toolbar.component.html
@@ -1,49 +1,50 @@
<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
+~ Licensed to the Apache Software Foundation (ASF) under one or more
+~ contributor license agreements. See the NOTICE file distributed with
+~ this work for additional information regarding copyright ownership.
+~ The ASF licenses this file to You under the Apache License, Version 2.0
+~ (the "License"); you may not use this file except in compliance with
+~ the License. You may obtain a copy of the License at
+~
+~ http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
<div fxLayout="row" fxFlex="100">
- <div
- class="data-explorer-options-item"
- fxLayoutAlign="start center"
- fxLayout="row"
- fxLayoutGap="10px"
- *ngIf="editMode"
- >
- <button
- mat-flat-button
- [matTooltip]="'Save' | translate"
- class="edit-menu-btn"
- (click)="saveDashboardEmitter.emit()"
- data-cy="save-dashboard-btn"
+ @if (editMode) {
+ <div
+ class="data-explorer-options-item"
+ fxLayoutAlign="start center"
+ fxLayout="row"
+ fxLayoutGap="10px"
>
- <mat-icon>save</mat-icon>
- <span>{{ 'Save' | translate }}</span>
- </button>
- <button
- mat-flat-button
- [matTooltip]="'Discard' | translate"
- class="mat-basic mr-10 edit-menu-btn"
- (click)="discardDashboardEmitter.emit()"
- >
- <i class="material-icons">undo</i>
- <span> {{ 'Discard' | translate }}</span>
- </button>
- </div>
+ <button
+ mat-flat-button
+ [matTooltip]="'Save' | translate"
+ class="edit-menu-btn"
+ (click)="saveDashboardEmitter.emit()"
+ data-cy="save-dashboard-btn"
+ >
+ <mat-icon>save</mat-icon>
+ <span>{{ 'Save' | translate }}</span>
+ </button>
+ <button
+ mat-flat-button
+ [matTooltip]="'Discard' | translate"
+ class="mat-basic mr-10 edit-menu-btn"
+ (click)="discardDashboardEmitter.emit()"
+ >
+ <i class="material-icons">undo</i>
+ <span> {{ 'Discard' | translate }}</span>
+ </button>
+ </div>
+ }
<div
class="data-explorer-options-item"
fxLayoutAlign="start center"
@@ -99,39 +100,34 @@
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #optMenu="matMenu">
- <button
- mat-menu-item
- (click)="triggerEditModeEmitter.emit()"
- *ngIf="!editMode && hasDataExplorerWritePrivileges"
- data-cy="options-edit-dashboard"
- >
- <mat-icon>edit</mat-icon>
- <span>{{ 'Edit dashboard' | translate }}</span>
- </button>
- <button
- mat-menu-item
- (click)="timeRangeVisible = true"
- *ngIf="!editMode && !timeRangeVisible"
- >
- <mat-icon>alarm_on</mat-icon>
- <span>{{ 'Show time range selector' | translate }}</span>
- </button>
- <button
- mat-menu-item
- (click)="timeRangeVisible = false"
- *ngIf="!editMode && timeRangeVisible"
- >
- <mat-icon>alarm_off</mat-icon>
- <span>{{ 'Hide time range selector' | translate }}</span>
- </button>
- <button
- mat-menu-item
- *ngIf="hasDataExplorerWritePrivileges"
- (click)="deleteDashboardEmitter.emit()"
- >
- <mat-icon>clear</mat-icon>
- <span>{{ 'Delete dashboard' | translate }}</span>
- </button>
+ @if (!editMode && hasDataExplorerWritePrivileges) {
+ <button
+ mat-menu-item
+ (click)="triggerEditModeEmitter.emit()"
+ data-cy="options-edit-dashboard"
+ >
+ <mat-icon>edit</mat-icon>
+ <span>{{ 'Edit dashboard' | translate }}</span>
+ </button>
+ }
+ @if (!editMode && !timeRangeVisible) {
+ <button mat-menu-item (click)="timeRangeVisible = true">
+ <mat-icon>alarm_on</mat-icon>
+ <span>{{ 'Show time range selector' | translate }}</span>
+ </button>
+ }
+ @if (!editMode && timeRangeVisible) {
+ <button mat-menu-item (click)="timeRangeVisible = false">
+ <mat-icon>alarm_off</mat-icon>
+ <span>{{ 'Hide time range selector' | translate }}</span>
+ </button>
+ }
+ @if (hasDataExplorerWritePrivileges) {
+ <button mat-menu-item (click)="deleteDashboardEmitter.emit()">
+ <mat-icon>clear</mat-icon>
+ <span>{{ 'Delete dashboard' | translate }}</span>
+ </button>
+ }
</mat-menu>
</div>
</div>
