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 2021/08/17 15:20:15 UTC
[incubator-streampipes] 03/04: [STREAMPIPES-402] Remove obsolete
AddWidget dialog in data explorer
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-319
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit c5d22ff76e5cddd848c9c1832bf5c41d6dba1b84
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue Aug 17 17:19:39 2021 +0200
[STREAMPIPES-402] Remove obsolete AddWidget dialog in data explorer
---
.../app/data-explorer/data-explorer.component.ts | 4 -
ui/src/app/data-explorer/data-explorer.module.ts | 103 ++++++-------
...explorer-add-visualization-dialog.component.css | 71 ---------
...xplorer-add-visualization-dialog.component.html | 79 ----------
...-explorer-add-visualization-dialog.component.ts | 171 ---------------------
5 files changed, 50 insertions(+), 378 deletions(-)
diff --git a/ui/src/app/data-explorer/data-explorer.component.ts b/ui/src/app/data-explorer/data-explorer.component.ts
index 07de37c..8a1df2e 100644
--- a/ui/src/app/data-explorer/data-explorer.component.ts
+++ b/ui/src/app/data-explorer/data-explorer.component.ts
@@ -110,10 +110,6 @@ export class DataExplorerComponent implements OnInit {
this.dashboardPanel.updateDashboard(false);
}
- addVisualization() {
- this.dashboardPanel.addWidget();
- }
-
toggleGrid() {
this.dashboardPanel.toggleGrid(this.gridVisible);
}
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 0e01f8b..67b6749 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -16,63 +16,62 @@
*
*/
-import {CdkTableModule} from '@angular/cdk/table';
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatNativeDateModule} from '@angular/material/core';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatGridListModule} from '@angular/material/grid-list';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatSliderModule} from '@angular/material/slider';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {MatTabsModule} from '@angular/material/tabs';
+import { CdkTableModule } from '@angular/cdk/table';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTabsModule } from '@angular/material/tabs';
import {
OWL_DATE_TIME_FORMATS,
OwlDateTimeModule,
OwlNativeDateTimeModule
} from '@danielmoncada/angular-datetime-picker';
-import {NgxChartsModule} from '@swimlane/ngx-charts';
-import {GridsterModule} from 'angular-gridster2';
-import {PlotlyViaWindowModule} from 'angular-plotly.js';
-import {ColorPickerModule} from 'ngx-color-picker';
-import {DatalakeRestService} from '../core-services/datalake/datalake-rest.service';
-import {SemanticTypeUtilsService} from '../core-services/semantic-type/semantic-type-utils.service';
-import {SharedDatalakeRestService} from '../core-services/shared/shared-dashboard.service';
-import {CoreUiModule} from '../core-ui/core-ui.module';
-import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
-import {DataDownloadDialog} from './components/datadownloadDialog/dataDownload.dialog';
-import {DataExplorerDashboardGridComponent} from './components/grid/data-explorer-dashboard-grid.component';
-import {DataExplorerDashboardOverviewComponent} from './components/overview/data-explorer-dashboard-overview.component';
-import {DataExplorerDashboardPanelComponent} from './components/panel/data-explorer-dashboard-panel.component';
-import {TimeRangeSelectorComponent} from './components/time-selector/timeRangeSelector.component';
-import {DataExplorerDashboardWidgetComponent} from './components/widget/data-explorer-dashboard-widget.component';
-import {ImageWidgetComponent} from './components/widgets/image/image-widget.component';
-import {LineChartWidgetComponent} from './components/widgets/line-chart/line-chart-widget.component';
-import {TableWidgetComponent} from './components/widgets/table/table-widget.component';
-import {AggregateConfigurationComponent} from './components/widgets/utils/aggregate-configuration/aggregate-configuration.component';
-import {LoadDataSpinnerComponent} from './components/widgets/utils/load-data-spinner/load-data-spinner.component';
-import {NoDataInDateRangeComponent} from './components/widgets/utils/no-data/no-data-in-date-range.component';
-import {SelectPropertiesComponent} from './components/widgets/utils/select-properties/select-properties.component';
-import {DataExplorerComponent} from './data-explorer.component';
-import {DataExplorerAddVisualizationDialogComponent} from './dialogs/add-widget/data-explorer-add-visualization-dialog.component';
-import {DataExplorerEditDataViewDialogComponent} from './dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
-import {DataViewDataExplorerService} from './services/data-view-data-explorer.service';
-import {RefreshDashboardService} from './services/refresh-dashboard.service';
-import {ResizeService} from './services/resize.service';
-import {GroupConfigurationComponent} from './components/widgets/utils/group-configuration/group-configuration.component';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { GridsterModule } from 'angular-gridster2';
+import { PlotlyViaWindowModule } from 'angular-plotly.js';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { DatalakeRestService } from '../core-services/datalake/datalake-rest.service';
+import { SemanticTypeUtilsService } from '../core-services/semantic-type/semantic-type-utils.service';
+import { SharedDatalakeRestService } from '../core-services/shared/shared-dashboard.service';
+import { CoreUiModule } from '../core-ui/core-ui.module';
+import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
+import { DataDownloadDialog } from './components/datadownloadDialog/dataDownload.dialog';
+import { DataExplorerDashboardGridComponent } from './components/grid/data-explorer-dashboard-grid.component';
+import { DataExplorerDashboardOverviewComponent } from './components/overview/data-explorer-dashboard-overview.component';
+import { DataExplorerDashboardPanelComponent } from './components/panel/data-explorer-dashboard-panel.component';
+import { TimeRangeSelectorComponent } from './components/time-selector/timeRangeSelector.component';
+import { DataExplorerDashboardWidgetComponent } from './components/widget/data-explorer-dashboard-widget.component';
+import { ImageWidgetComponent } from './components/widgets/image/image-widget.component';
+import { LineChartWidgetComponent } from './components/widgets/line-chart/line-chart-widget.component';
+import { TableWidgetComponent } from './components/widgets/table/table-widget.component';
+import { AggregateConfigurationComponent } from './components/widgets/utils/aggregate-configuration/aggregate-configuration.component';
+import { LoadDataSpinnerComponent } from './components/widgets/utils/load-data-spinner/load-data-spinner.component';
+import { NoDataInDateRangeComponent } from './components/widgets/utils/no-data/no-data-in-date-range.component';
+import { SelectPropertiesComponent } from './components/widgets/utils/select-properties/select-properties.component';
+import { DataExplorerComponent } from './data-explorer.component';
+import { DataExplorerEditDataViewDialogComponent } from './dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
+import { DataViewDataExplorerService } from './services/data-view-data-explorer.service';
+import { RefreshDashboardService } from './services/refresh-dashboard.service';
+import { ResizeService } from './services/resize.service';
+import { GroupConfigurationComponent } from './components/widgets/utils/group-configuration/group-configuration.component';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
// tslint:disable-next-line:max-line-length
-import {ColorService} from './components/widgets/line-chart/services/color.service';
-import {DataExplorerDesignerPanelComponent} from "./components/designer-panel/data-explorer-designer-panel.component";
-import {TableWidgetConfigComponent} from "./components/widgets/table/config/table-widget-config.component";
-import {DataExplorerWidgetAppearanceSettingsComponent} from "./components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component";
-import {DataExplorerWidgetDataSettingsComponent} from "./components/designer-panel/data-settings/data-explorer-widget-data-settings.component";
-import {WidgetConfigurationService} from "./services/widget-configuration.service";
-import {LineChartWidgetConfigComponent} from "./components/widgets/line-chart/config/line-chart-widget-config.component";
-import {ImageWidgetConfigComponent} from "./components/widgets/image/config/image-widget-config.component";
+import { ColorService } from './components/widgets/line-chart/services/color.service';
+import { DataExplorerDesignerPanelComponent } from './components/designer-panel/data-explorer-designer-panel.component';
+import { TableWidgetConfigComponent } from './components/widgets/table/config/table-widget-config.component';
+import { DataExplorerWidgetAppearanceSettingsComponent } from './components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component';
+import { DataExplorerWidgetDataSettingsComponent } from './components/designer-panel/data-settings/data-explorer-widget-data-settings.component';
+import { WidgetConfigurationService } from './services/widget-configuration.service';
+import { LineChartWidgetConfigComponent } from './components/widgets/line-chart/config/line-chart-widget-config.component';
+import { ImageWidgetConfigComponent } from './components/widgets/image/config/image-widget-config.component';
const dashboardWidgets = [];
@@ -126,7 +125,6 @@ export const MY_NATIVE_FORMATS = {
DataExplorerDashboardPanelComponent,
DataExplorerDashboardWidgetComponent,
DataExplorerDesignerPanelComponent,
- DataExplorerAddVisualizationDialogComponent,
DataExplorerEditDataViewDialogComponent,
DataExplorerWidgetAppearanceSettingsComponent,
DataExplorerWidgetDataSettingsComponent,
@@ -162,7 +160,6 @@ export const MY_NATIVE_FORMATS = {
],
entryComponents: [
DataExplorerComponent,
- DataExplorerAddVisualizationDialogComponent,
DataDownloadDialog,
DataExplorerEditDataViewDialogComponent
]
diff --git a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css
deleted file mode 100644
index b7f5117..0000000
--- a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * 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.
- *
- */
-
-.element-margin {
- margin-top:10px;
- margin-bottom:10px;
-}
-
-mat-toolbar {
- background: var(--color-primary);
- color:var(--color-bg-0);
-}
-
-mat-dialog-content {
- padding: 24px;
- -webkit-box-ordinal-group: 2;
- -webkit-order: 1;
- order: 1;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- flex-direction: column;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-}
-
-.mat-dialog-content {
- width:100%;
- height:74%;
- margin: 0px;
-}
-
-.mat-dialog-actions {
- margin-bottom:0px;
- padding-right:10px;
-}
-
-.mat-radio-button {
- padding: 10px;
-}
-
-.pipeline-avatar {
- align-items: center;
- justify-content: center;
- display: flex;
- color:white;
-}
-
-.list-item:hover {
- background: var(--color-bg-1);
- cursor: pointer;
-}
-
-.list-item {
- border-bottom: 1px solid var(--color-bg-0);
-}
diff --git a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html
deleted file mode 100644
index d1d5b57..0000000
--- a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!--
-~ 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.
-~
--->
-
-<mat-toolbar>
- <div class="md-toolbar-tools">
- <h2>{{dialogTitle}}</h2>
- <span fxFlex></span>
- <button mat-icon-button (click)="onCancel()">
- <i class="material-icons">close</i>
- </button>
- </div>
- </mat-toolbar>
- <mat-divider></mat-divider>
- <div mat-dialog-content class="md-dialog-content">
- <div fxFlex="100">
- <div fxFlex="100" style="margin:5px;width:100%">
- <div *ngIf="page == 'select-pipeline'">
- <h4>{{pages[0].description}}</h4>
- <mat-list>
- <mat-list-item *ngFor="let dataSet of visualizableData"
- (click)="selectPipeline(dataSet)" class="list-item">
- <div mat-list-avatar
- class="pipeline-avatar sp-accent-bg">{{iconText(dataSet.measureName)}}
- </div>
- <h4 mat-line>{{dataSet.pipelineName}}</h4>
- <p mat-line>{{dataSet.measureName}} </p>
- </mat-list-item>
- </mat-list>
- </div>
-
- <!-- Select Type -->
- <div *ngIf="page == 'select-widget'" fxLayout="column">
- <h4>{{pages[1].description}}</h4>
- <mat-list>
- <mat-list-item *ngFor="let widget of availableWidgets"
- (click)="selectWidget(widget.id)" class="list-item">
- <div mat-list-avatar
- class="pipeline-avatar sp-accent-bg">
- <span>{{iconText(widget.label)}}</span>
- </div>
- <h4 mat-line>{{widget.label}}</h4>
- </mat-list-item>
- </mat-list>
- </div>
- </div>
- </div>
- </div>
- <mat-divider></mat-divider>
- <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
- <button mat-button mat-raised-button class="mat-basic" (click)="onCancel()">
- Cancel
- </button>
- <button mat-button mat-raised-button class="mat-basic" (click)="back()" *ngIf="(!('select-pipeline'===page))
- && !(data)">
- Back
- </button>
- <button mat-button mat-raised-button color="accent" (click)="next()">
- <span *ngIf="!data && 'configure-widget' === page">Create</span>
- <span *ngIf="data && 'configure-widget' === page">Save</span>
- <span *ngIf="data == null && !('configure-widget' === page)">Next</span>
- </button>
- </div>
-
-
diff --git a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.ts b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.ts
deleted file mode 100644
index 24f0ac1..0000000
--- a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-/*
- * 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.
- *
- */
-
-import {Component, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {ElementIconText} from '../../../services/get-element-icon-text.service';
-import {IWidget} from '../../models/dataview-dashboard.model';
-import {DataExplorerWidgetRegistry} from '../../registry/data-explorer-widget-registry';
-import {DataViewDataExplorerService} from '../../services/data-view-data-explorer.service';
-import {
- DataExplorerWidgetModel,
- DataLakeMeasure,
- EventSchema
-} from "../../../core-model/gen/streampipes-model";
-import {Dashboard} from "../../../dashboard/models/dashboard.model";
-
-@Component({
- selector: 'sp-data-explorer-add-visualization-dialog-component',
- templateUrl: './data-explorer-add-visualization-dialog.component.html',
- styleUrls: ['./data-explorer-add-visualization-dialog.component.css']
-})
-export class DataExplorerAddVisualizationDialogComponent implements OnInit {
-
-
- constructor(
- public dialogRef: MatDialogRef<DataExplorerAddVisualizationDialogComponent>,
- @Inject(MAT_DIALOG_DATA) public data: any,
- private dataViewDataExplorerService: DataViewDataExplorerService,
- public elementIconText: ElementIconText) {
- }
-
- pages = [{
- type: 'select-pipeline',
- title: 'Select Pipeline',
- description: 'Select a pipeline you\'d like to visualize'
- }, {
- type: 'select-widget',
- title: 'Select Widget',
- description: 'Select widget'
- }];
-
- visualizableData: DataLakeMeasure[] = [];
- availableWidgets: IWidget[];
-
- selectedDataSet: DataLakeMeasure;
- selectedWidget: string;
-
- dashboard: Dashboard;
-
- selectedType: any;
- page: any = 'select-pipeline';
- dialogTitle: string;
-
- static getSelectedCss(selected, current) {
- if (selected === current) {
- return 'wizard-preview wizard-preview-selected';
- } else {
- return 'wizard-preview';
- }
- }
-
- ngOnInit() {
- if (!this.data) {
- this.dialogTitle = 'Add widget';
- this.dataViewDataExplorerService.getAllPersistedDataStreams().subscribe(visualizations => {
- this.visualizableData = visualizations;
- });
- this.availableWidgets = DataExplorerWidgetRegistry.getAvailableWidgetTemplates();
- } else {
- this.dialogTitle = 'Edit widget';
- // this.selectedDataSet = this.data.widget.dashboardWidgetDataConfig;
- // TODO
- // this.selectedWidget = this.data.widget;
- this.page = 'configure-widget';
- }
- }
-
- onCancel(): void {
- this.dialogRef.close();
- }
-
- getSelectedPipelineCss(vis) {
- return DataExplorerAddVisualizationDialogComponent.getSelectedCss(this.selectedDataSet, vis);
- }
-
- getSelectedVisTypeCss(type) {
- return DataExplorerAddVisualizationDialogComponent.getSelectedCss(this.selectedDataSet, type);
- }
-
- getTabCss(page) {
- if (page === this.page) { return 'md-fab md-accent'; } else { return 'md-fab md-accent wizard-inactive'; }
- }
-
- selectPipeline(ds) {
- this.selectedDataSet = ds;
- this.next();
- }
-
- selectWidget(widget) {
- this.selectedWidget = widget;
- this.next();
- }
-
- findRequirement(requiredSchema: EventSchema, internalName: string) {
- return requiredSchema.eventProperties.find(ep => ep.runtimeName === internalName);
- }
-
- next() {
- if (this.page === 'select-pipeline') {
- this.page = 'select-widget';
- } else if (this.page === 'select-widget') {
- const configuredWidget: DataExplorerWidgetModel = new DataExplorerWidgetModel();
- configuredWidget["@class"] = "org.apache.streampipes.model.datalake.DataExplorerWidgetModel";
- // TODO find solution for event schema
- // configuredWidget.eventSchema = new EventSchema();
- // configuredWidget.eventSchema.eventProperties = this.selectedDataSet.eventSchema.eventProperties;
- // for (const ep of this.selectedDataSet.eventSchema.eventProperties) {
- // configuredWidget.eventSchema.eventProperties.push(ep.copy());
- // }
-
-
- configuredWidget.pipelineId = this.selectedDataSet.pipelineId;
- configuredWidget.measureName = this.selectedDataSet.measureName;
- configuredWidget.baseAppearanceConfig = {};
- configuredWidget.baseAppearanceConfig.widgetTitle = this.selectedDataSet.measureName;
- configuredWidget.visualizationConfig = {};
- configuredWidget.dataConfig = {};
- configuredWidget.widgetType = this.selectedWidget;
- this.dataViewDataExplorerService.saveWidget(configuredWidget).subscribe(response => {
- this.dialogRef.close(response);
- });
-
- // if (!this.data) {
- // this.dashboardService.saveWidget(configuredWidget).subscribe(response => {
- // this.dialogRef.close(response);
- // });
- // } else {
- // configuredWidget._id = this.data.widget._id;
- // configuredWidget._ref = this.data.widget._ref;
- // configuredWidget.widgetId = this.data.widget.widgetId;
- // this.dialogRef.close(configuredWidget);
- // }
- }
- }
-
- back() {
- if (this.page === 'select-widget') {
- this.page = 'select-pipeline';
- }
- }
-
- iconText(s) {
- return this.elementIconText.getElementIconText(s);
- }
-
-}