feat(#3043): Add data view selection to data explorer dashboard

ui/cypress/support/utils/DataDownloadDialogUtils.ts

@@ -34,7 +34,7 @@ export class DataDownloadDialogUtils {
         DataLakeUtils.editDataView(dataViewName);
 
         // select download button
-        cy.dataCy('download-prepared_data-table').click();
+        cy.dataCy('data-view-data-download-btn').click();
 
         // download-customInterval, download-all, download-visible
         cy.dataCy(

ui/cypress/support/utils/datalake/DataLakeUtils.ts

@@ -99,9 +99,12 @@ export class DataLakeUtils {
         // DataLakeUtils.addNewWidget();
         DataLakeUtils.selectDataSet(dataSet);
         DataLakeUtils.dataConfigSelectAllFields();
+
+        DataLakeUtils.selectAppearanceConfig();
+        DataLakeUtils.selectDataViewName(dataViewName);
+
         DataLakeUtils.openVisualizationConfig();
         DataLakeUtils.selectVisualizationType(widgetType);
-        DataLakeUtils.clickCreateButton();
 
         cy.wait(1000);
     }
@@ -132,29 +135,52 @@ export class DataLakeUtils {
         PrepareTestDataUtils.loadDataIntoDataLake('fileTest/random.csv');
     }
 
-    public static createAndEditDataView(name: string) {
+    public static createAndEditDashboard(name: string) {
         // Create new data view
-        cy.dataCy('open-new-data-view-dialog').click();
+        cy.dataCy('open-new-dashboard-dialog').click();
 
         // Configure data view
         cy.dataCy('data-view-name').type(name);
         cy.dataCy('save-data-view').click();
 
-        this.editDataView(name);
+        this.editDashboard(name);
+    }
+
+    public static addDataViewToDashboard(dataViewName: string) {
+        this.selectTimeRange(
+            new Date(2020, 10, 20, 22, 44),
+            this.getFutureDate(),
+        );
+        cy.dataCy('add-data-view-btn-' + dataViewName).click();
+    }
+
+    public static createAndEditDataView(name: string) {
+        // Create new data view
+        cy.dataCy('open-new-data-view').click();
     }
 
-    public static removeWidget(widgetName: string) {
-        cy.dataCy('remove-' + widgetName).click();
+    public static removeWidget(dataViewName: string) {
+        cy.dataCy('remove-' + dataViewName).click();
+    }
+
+    public static editDashboard(dashboardName: string) {
+        // Click edit button
+        // following only works if single view is available
+        cy.dataCy('edit-dashboard-' + dashboardName).click();
     }
 
     public static editDataView(dataViewName: string) {
         // Click edit button
         // following only works if single view is available
-        cy.dataCy('edit-dashboard-' + dataViewName).click();
+        cy.dataCy('edit-data-view-' + dataViewName).click();
+    }
+
+    public static saveDataViewConfiguration() {
+        cy.dataCy('save-data-view-btn', { timeout: 10000 }).click();
     }
 
-    public static saveDataExplorerWidgetConfiguration() {
-        cy.dataCy('save-data-explorer-widget-btn', { timeout: 10000 }).click();
+    public static saveDashboardConfiguration() {
+        cy.dataCy('save-dashboard-btn', { timeout: 10000 }).click();
     }
 
     public static editWidget(widgetName: string) {
@@ -167,12 +193,17 @@ export class DataLakeUtils {
     }
 
     public static saveAndReEditWidget(dataViewName: string) {
-        // Save configuration
-        DataLakeUtils.saveDataExplorerWidgetConfiguration();
-        DataLakeUtils.goBackToOverview();
+        // Save data view configuration
+        DataLakeUtils.saveDataViewConfiguration();
         DataLakeUtils.editDataView(dataViewName);
     }
 
+    public static saveAndReEditDashboard(dashboardName: string) {
+        // Save dashboard configuration
+        DataLakeUtils.saveDashboardConfiguration();
+        DataLakeUtils.editDashboard(dashboardName);
+    }
+
     public static clickTab(tabName: string) {
         // Click start tab to go to overview
         cy.get('div').contains(tabName).parent().click();
@@ -277,6 +308,10 @@ export class DataLakeUtils {
         cy.get('.mdc-tab__text-label').contains('Appearance').parent().click();
     }
 
+    public static selectDataViewName(dataViewName: string) {
+        cy.dataCy('appearance-config-widget-title').clear().type(dataViewName);
+    }
+
     public static clickCreateButton() {
         // Create widget
         cy.dataCy('data-explorer-select-data-set-create-btn').click();

ui/cypress/tests/dataDownloadDialog/dataDownloadDialogTest.smoke.spec.ts

@@ -21,7 +21,7 @@ import { DataDownloadDialogUtils } from '../../support/utils/DataDownloadDialogU
 import { DataLakeUtils } from '../../support/utils/datalake/DataLakeUtils';
 import { PrepareTestDataUtils } from '../../support/utils/PrepareTestDataUtils';
 
-describe('Test live data download dialog', () => {
+describe('Test data explorer data download dialog', () => {
     before('Setup Test', () => {
         cy.initStreamPipesTest();
         PrepareTestDataUtils.loadDataIntoDataLake(
@@ -30,15 +30,15 @@ describe('Test live data download dialog', () => {
         );
 
         DataLakeUtils.addDataViewAndTableWidget(dataViewName, 'Persist');
-        DataLakeUtils.saveDataExplorerWidgetConfiguration();
+        DataLakeUtils.saveDataViewConfiguration();
     });
 
     beforeEach('Setup Test', () => {
         cy.removeDownloadDirectory();
         cy.login();
     });
 
-    const dataViewName = 'TestView';
+    const dataViewName = 'NewWidget';
 
     const formatTestsExportConfig: ExportConfig = {
         formatExportConfig: undefined,

ui/cypress/tests/datalake/deleteWidget.ts

@@ -28,37 +28,42 @@ describe('Test Table View in Data Explorer', () => {
          * Prepare tests
          */
         DataLakeUtils.addDataViewAndTableWidget('TestView', 'Persist');
+        DataLakeUtils.saveDataViewConfiguration();
+        DataLakeUtils.createAndEditDashboard('TestDashboard');
+        DataLakeUtils.addDataViewToDashboard('TestView');
 
         // Check that widget is visible
-        cy.dataCy('widget-datalake_configuration', { timeout: 10000 }).should(
-            'be.visible',
-        );
+        cy.dataCy('widget-TestView', { timeout: 10000 }).should('be.visible');
 
         // Activate edit mode
-        DataLakeUtils.saveAndReEditWidget('TestView');
+        DataLakeUtils.saveAndReEditDashboard('TestDashboard');
 
         // Delete widget
-        DataLakeUtils.removeWidget('datalake_configuration');
+        DataLakeUtils.removeWidget('TestView');
 
         // Save dashboard
-        DataLakeUtils.saveDataExplorerWidgetConfiguration();
+        DataLakeUtils.saveDashboardConfiguration();
+
+        // Go back to dashboard
+        DataLakeUtils.saveAndReEditDashboard('TestDashboard');
 
         // Check that widget is gone
         cy.dataCy('widget-datalake_configuration', { timeout: 10000 }).should(
             'not.exist',
         );
 
-        // Delete Dashboard
-        // DataLakeUtils.clickStartTab();
-
-        // Check that dashboard is gone
+        DataLakeUtils.goBackToOverview();
 
-        cy.dataCy('delete-dashboard-TestView', { timeout: 10000 }).should(
+        cy.dataCy('delete-dashboard-TestDashboard', { timeout: 10000 }).should(
             'have.length',
             1,
         );
-        cy.dataCy('delete-dashboard-TestView', { timeout: 10000 }).click();
-        cy.dataCy('delete-dashboard-TestView', { timeout: 10000 }).should(
+
+        // Delete dashboard
+        cy.dataCy('delete-dashboard-TestDashboard', { timeout: 10000 }).click();
+
+        // Check that dashboard is gone
+        cy.dataCy('delete-dashboard-TestDashboard', { timeout: 10000 }).should(
             'have.length',
             0,
         );

ui/cypress/tests/datalake/widgetDataConfiguration.smoke.spec.ts

@@ -30,7 +30,7 @@ describe('Test Table View in Data Explorer', () => {
         /**
          * Prepare tests
          */
-        DataLakeUtils.addDataViewAndTableWidget('TestView', 'Persist');
+        DataLakeUtils.addDataViewAndTableWidget('NewWidget', 'Persist');
 
         // Validate that X lines are available
         DataLakeWidgetTableUtils.checkRows(10);
@@ -72,7 +72,7 @@ describe('Test Table View in Data Explorer', () => {
         DataLakeUtils.dataConfigAddFilter(filterConfig);
         DataLakeUtils.checkIfFilterIsSet(1);
         DataLakeWidgetTableUtils.checkRows(4);
-        DataLakeUtils.saveAndReEditWidget('TestView');
+        DataLakeUtils.saveAndReEditWidget('NewWidget');
         DataLakeUtils.checkIfFilterIsSet(1);
         DataLakeWidgetTableUtils.checkRows(4);
         DataLakeUtils.dataConfigRemoveFilter();
@@ -90,7 +90,7 @@ describe('Test Table View in Data Explorer', () => {
             .last({ timeout: 10000 })
             .contains('c', { timeout: 10000 });
         DataLakeWidgetTableUtils.checkRows(10);
-        DataLakeUtils.saveAndReEditWidget('TestView');
+        DataLakeUtils.saveAndReEditWidget('NewWidget');
         cy.dataCy('data-explorer-group-by-randomtext')
             .find('input')
             .should('be.checked');

ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.html

@@ -0,0 +1,130 @@
+<!--
+  ~ 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
+    class="data-explorer-options-item"
+    fxLayoutAlign="start center"
+    fxLayout="row"
+    *ngIf="editMode"
+>
+    <button
+        mat-raised-button
+        color="accent"
+        matTooltip="Save"
+        class="edit-menu-btn"
+        (click)="saveDashboardEmitter.emit()"
+        data-cy="save-dashboard-btn"
+    >
+        <mat-icon>save</mat-icon>
+        <span>Save</span>
+    </button>
+    <button
+        mat-raised-button
+        color="accent"
+        matTooltip="Discard"
+        class="mat-basic mr-10 edit-menu-btn"
+        (click)="discardDashboardEmitter.emit()"
+    >
+        <i class="material-icons">undo</i>
+        <span>&nbsp;Discard</span>
+    </button>
+</div>
+<div
+    class="data-explorer-options-item"
+    fxLayoutAlign="start center"
+    fxLayout="row"
+>
+    <button
+        mat-icon-button
+        [matMenuTriggerFor]="menu"
+        aria-label="View mode"
+        matTooltip="View mode"
+    >
+        <mat-icon
+            >{{ viewMode === 'grid' ? 'grid_view' : 'web_asset' }}
+        </mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="viewModeChange.emit('grid')">
+            <mat-icon>grid_view</mat-icon>
+            <span>Grid</span>
+        </button>
+        <button mat-menu-item (click)="viewModeChange.emit('slide')">
+            <mat-icon>web_asset</mat-icon>
+            <span>Slides</span>
+        </button>
+    </mat-menu>
+</div>
+<div
+    class="data-explorer-options-item"
+    style="margin-right: 0"
+    fxLayoutAlign="end center"
+    fxFlex
+    fxLayout="row"
+>
+    <sp-time-range-selector
+        *ngIf="editMode || timeRangeVisible"
+        (dateRangeEmitter)="updateDateRangeEmitter.emit($event)"
+        [dateRange]="timeSettings"
+    >
+    </sp-time-range-selector>
+
+    <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">
+        <button
+            mat-menu-item
+            (click)="triggerEditModeEmitter.emit()"
+            *ngIf="!editMode && hasDataExplorerWritePrivileges"
+            data-cy="options-edit-dashboard"
+        >
+            <mat-icon>edit</mat-icon>
+            <span>Edit dashboard</span>
+        </button>
+        <button
+            mat-menu-item
+            (click)="timeRangeVisible = true"
+            *ngIf="!editMode && !timeRangeVisible"
+        >
+            <mat-icon>alarm_on</mat-icon>
+            <span>Show time range selector</span>
+        </button>
+        <button
+            mat-menu-item
+            (click)="timeRangeVisible = false"
+            *ngIf="!editMode && timeRangeVisible"
+        >
+            <mat-icon>alarm_off</mat-icon>
+            <span>Hide time range selector</span>
+        </button>
+        <button
+            mat-menu-item
+            *ngIf="hasDataExplorerDeletePrivileges"
+            (click)="deleteDashboardEmitter.emit()"
+        >
+            <mat-icon>clear</mat-icon>
+            <span>Delete dashboard</span>
+        </button>
+    </mat-menu>
+</div>

ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.scss

@@ -0,0 +1,26 @@
+/*!
+ * 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.
+ *
+ */
+
+.data-explorer-options {
+    padding: 0;
+}
+
+.data-explorer-options-item {
+    display: inline;
+    margin-right: 10px;
+}