This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch 3043-support-selection-of-data-views-in-data-explorer-dashboard in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit e4603d685d8771dc6a639fbdf77d52556abfca7f Author: Dominik Riemer <[email protected]> AuthorDate: Wed Jul 17 16:33:30 2024 +0200 feat(#3043): Add data view selection to data explorer dashboard --- .../dashboard-toolbar.component.html | 130 ++++++++++++ .../dashboard-toolbar.component.scss} | 11 +- .../dashboard-toolbar.component.ts} | 35 +++- ...dashboard-widget-selection-panel.component.html | 44 ++++ ...ashboard-widget-selection-panel.component.scss} | 2 +- .../dashboard-widget-selection-panel.component.ts} | 23 ++- .../data-view-preview.component.html | 42 ++++ .../data-view-preview.component.scss} | 18 +- .../data-view-preview.component.ts | 44 ++++ .../data-view-selection.component.html | 27 +++ .../data-view-selection.component.scss} | 6 +- .../data-view-selection.component.ts | 47 +++++ .../data-explorer-dashboard-panel.component.html | 109 ++++++++++ .../data-explorer-dashboard-panel.component.scss | 11 +- .../data-explorer-dashboard-panel.component.ts | 135 ++---------- ...lorer-widget-appearance-settings.component.html | 0 ...lorer-widget-appearance-settings.component.scss | 0 ...xplorer-widget-appearance-settings.component.ts | 6 +- .../data-explorer-designer-panel.component.html | 0 .../data-explorer-designer-panel.component.scss | 3 +- .../data-explorer-designer-panel.component.ts | 2 +- ...ta-explorer-widget-data-settings.component.html | 0 ...ta-explorer-widget-data-settings.component.scss | 0 ...data-explorer-widget-data-settings.component.ts | 4 +- .../field-selection-panel.component.html | 0 .../field-selection-panel.component.scss | 0 .../field-selection-panel.component.ts | 4 +- .../field-selection/field-selection.component.html | 0 .../field-selection/field-selection.component.scss | 0 .../field-selection/field-selection.component.ts | 2 +- .../filter-selection-panel.component.html | 0 .../filter-selection-panel.component.scss | 0 .../filter-selection-panel.component.ts | 4 +- .../group-selection-panel.component.html | 0 .../group-selection-panel.component.scss | 0 .../group-selection-panel.component.ts | 4 +- ...-explorer-visualisation-settings.component.html | 0 ...-explorer-visualisation-settings.component.scss | 0 ...ta-explorer-visualisation-settings.component.ts | 6 +- .../data-explorer-data-view-toolbar.component.html | 12 +- .../data-explorer-data-view-toolbar.component.ts | 3 + ...data-explorer-dashboard-overview.component.html | 2 +- .../data-explorer-dashboard-panel.component.html | 230 --------------------- .../data-explorer-dashboard-widget.component.html | 29 +-- .../data-explorer-dashboard-widget.component.ts | 19 -- .../data-explorer-panel.can-deactivate.guard.ts | 2 +- ui/src/app/data-explorer/data-explorer.module.ts | 26 ++- 47 files changed, 579 insertions(+), 463 deletions(-) diff --git a/ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.html b/ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.html new file mode 100644 index 0000000000..52823b8ad0 --- /dev/null +++ b/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-data-explorer-widget-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> 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> diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.scss b/ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.scss similarity index 86% copy from ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.scss copy to ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.scss index 7dffaf1d04..e9e5de91bb 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.scss +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.scss @@ -1,4 +1,4 @@ -/* +/*! * 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. @@ -16,6 +16,11 @@ * */ -.mat-mdc-form-field.aggregation-width { - width: 100px; +.data-explorer-options { + padding: 0; +} + +.data-explorer-options-item { + display: inline; + margin-right: 10px; } diff --git a/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.ts b/ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.ts similarity index 57% copy from ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.ts copy to ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.ts index 37295d4769..e2da2c238d 100644 --- a/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.ts +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-toolbar/dashboard-toolbar.component.ts @@ -20,20 +20,43 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { TimeSettings } from '@streampipes/platform-services'; @Component({ - selector: 'sp-data-explorer-data-view-toolbar', - templateUrl: './data-explorer-data-view-toolbar.component.html', + selector: 'sp-data-explorer-dashboard-toolbar', + templateUrl: './dashboard-toolbar.component.html', + styleUrls: ['./dashboard-toolbar.component.scss'], }) -export class DataExplorerDataViewToolbarComponent { +export class DataExplorerDashboardToolbarComponent { @Input() - editMode = true; + editMode: boolean; + + @Input() + viewMode: string; + + @Input() + timeRangeVisible: boolean; + + @Input() + hasDataExplorerWritePrivileges: boolean; + + @Input() + hasDataExplorerDeletePrivileges: boolean; @Input() timeSettings: TimeSettings; - timeRangeVisible = true; + @Output() + viewModeChange: EventEmitter<string> = new EventEmitter<string>(); + + @Output() + saveDashboardEmitter: EventEmitter<void> = new EventEmitter(); + + @Output() + discardDashboardEmitter: EventEmitter<void> = new EventEmitter(); + + @Output() + deleteDashboardEmitter: EventEmitter<void> = new EventEmitter(); @Output() - saveDataViewEmitter: EventEmitter<void> = new EventEmitter(); + triggerEditModeEmitter: EventEmitter<void> = new EventEmitter<void>(); @Output() updateDateRangeEmitter: EventEmitter<TimeSettings> = new EventEmitter(); 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 new file mode 100644 index 0000000000..eea0f0d838 --- /dev/null +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.html @@ -0,0 +1,44 @@ +<!-- + ~ 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="designer-panel-content" fxLayout="column"> + <div fxLayout="row" class="sp-tab-bg designer-panel-header"> + <div fxLayoutAlign="start center" class="designer-panel-title"> + <span> Configure Dashboard </span> + </div> + </div> + <div fxFlex="100" fxLayout="column" class="no-overflow"> + <mat-tab-group + color="accent" + fxFlexFill + class="small-tab-headers mat-tab-fill-height" + > + <mat-tab data-cy="designer-panel-data-config" label="Data Views"> + <div class="scroll-tab-content"> + <sp-data-explorer-data-view-selection + (addDataViewEmitter)="addDataViewEmitter.emit($event)" + > + </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/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.scss similarity index 99% copy from ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss copy to ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.scss index 13cbc4aacb..e280dd74d5 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.scss @@ -1,4 +1,4 @@ -/* +/*! * 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. diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.ts similarity index 59% copy from ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss copy to ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.ts index 65a3b416cd..363a5a7e59 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component.ts @@ -16,16 +16,17 @@ * */ -.field-scroll-panel { - max-height: 100px; - overflow-y: auto; - overflow-x: hidden; -} - -.pull-btn-right { - margin-left: auto; -} +import { Component, EventEmitter, Output } from '@angular/core'; -.btn-margin { - margin-right: 10px; +@Component({ + selector: 'sp-data-explorer-dashboard-widget-selection-panel', + templateUrl: './dashboard-widget-selection-panel.component.html', + styleUrls: [ + './dashboard-widget-selection-panel.component.scss', + '../../data-view/data-view-designer-panel/data-explorer-designer-panel.component.scss', + ], +}) +export class DataExplorerDashboardWidgetSelectionPanelComponent { + @Output() + addDataViewEmitter: EventEmitter<string> = new EventEmitter<string>(); } diff --git a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.html b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.html new file mode 100644 index 0000000000..f578965231 --- /dev/null +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.html @@ -0,0 +1,42 @@ +<!-- + ~ 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" class="data-view-preview-outer"> + <div fxFlex fxLayout="column"> + <h5>{{ dataView.baseAppearanceConfig.widgetTitle }}</h5> + <div fxLayout="row" fxLayoutGap="15px" class="data-view-preview-info"> + <span fxLayoutAlign="start center">Visualization</span> + <span fxFlex fxLayoutAlign="end center">{{ widgetTypeLabel }}</span> + </div> + <div fxLayout="row" fxLayoutGap="15px" class="data-view-preview-info"> + <span fxLayoutAlign="start center">Data</span> + <span fxFlex fxLayoutAlign="end center">{{ + dataView.dataConfig.sourceConfigs[0].measureName + }}</span> + </div> + </div> + <div fxLayoutAlign="end center"> + <button + mat-icon-button + color="accent" + (click)="addDataViewEmitter.emit(dataView.elementId)" + > + <i class="material-icons">add</i> + </button> + </div> +</div> diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.scss similarity index 76% copy from ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss copy to ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.scss index 65a3b416cd..992ec84093 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.scss @@ -1,4 +1,4 @@ -/* +/*! * 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. @@ -16,16 +16,16 @@ * */ -.field-scroll-panel { - max-height: 100px; - overflow-y: auto; - overflow-x: hidden; +.data-view-preview-outer { + border: 1px solid var(--color-bg-2); + padding: 10px; } -.pull-btn-right { - margin-left: auto; +.data-view-preview-outer:hover { + border-color: var(--color-bg-3); + background: var(--color-bg-1); } -.btn-margin { - margin-right: 10px; +.data-view-preview-info { + font-size: small; } diff --git a/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.ts b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.ts new file mode 100644 index 0000000000..4734957e54 --- /dev/null +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component.ts @@ -0,0 +1,44 @@ +/* + * 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, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { DataExplorerWidgetModel } from '@streampipes/platform-services'; +import { DataExplorerWidgetRegistry } from '../../../../../registry/data-explorer-widget-registry'; + +@Component({ + selector: 'sp-data-explorer-data-view-preview', + templateUrl: './data-view-preview.component.html', + styleUrls: ['./data-view-preview.component.scss'], +}) +export class DataExplorerDataViewPreviewComponent implements OnInit { + @Input() + dataView: DataExplorerWidgetModel; + + widgetTypeLabel: string; + + @Output() + addDataViewEmitter: EventEmitter<string> = new EventEmitter<string>(); + + constructor(private widgetRegistryService: DataExplorerWidgetRegistry) {} + + ngOnInit() { + this.widgetTypeLabel = this.widgetRegistryService.getWidgetTemplate( + this.dataView.widgetType, + ).label; + } +} 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 new file mode 100644 index 0000000000..3fb1c3cccc --- /dev/null +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.html @@ -0,0 +1,27 @@ +<!-- + ~ 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"> + <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> +</div> diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.scss similarity index 96% copy from ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss copy to ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.scss index 13cbc4aacb..198edb0cf3 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.scss @@ -1,4 +1,4 @@ -/* +/*! * 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. @@ -15,3 +15,7 @@ * limitations under the License. * */ + +.m-10 { + margin: 10px; +} 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 new file mode 100644 index 0000000000..e3cb045741 --- /dev/null +++ b/ui/src/app/data-explorer/components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component.ts @@ -0,0 +1,47 @@ +/* + * 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, EventEmitter, OnInit, Output } from '@angular/core'; +import { + DataExplorerWidgetModel, + DataViewDataExplorerService, +} from '@streampipes/platform-services'; + +@Component({ + selector: 'sp-data-explorer-data-view-selection', + templateUrl: './data-view-selection.component.html', + styleUrls: ['./data-view-selection.component.scss'], +}) +export class DataExplorerDataViewSelectionComponent implements OnInit { + @Output() + addDataViewEmitter: EventEmitter<string> = new EventEmitter(); + + dataViews: DataExplorerWidgetModel[] = []; + + constructor(private dataViewService: DataViewDataExplorerService) {} + + ngOnInit() { + this.dataViewService.getAllWidgets().subscribe(dataViews => { + this.dataViews = dataViews.sort((a, b) => + a.baseAppearanceConfig.widgetTitle.localeCompare( + b.baseAppearanceConfig.widgetTitle, + ), + ); + }); + } +} diff --git a/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.html b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.html new file mode 100644 index 0000000000..1d4d38d67b --- /dev/null +++ b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.html @@ -0,0 +1,109 @@ +<!-- + ~ 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]="['dataexplorer']" + [showBackLink]="true" + *ngIf="dashboardLoaded" +> + <div nav fxFlex="100" class="ml-10"> + <sp-data-explorer-dashboard-toolbar + [editMode]="editMode" + [(viewMode)]="viewMode" + [hasDataExplorerDeletePrivileges]="hasDataExplorerDeletePrivileges" + [hasDataExplorerWritePrivileges]="hasDataExplorerWritePrivileges" + [timeRangeVisible]="timeRangeVisible" + [timeSettings]="timeSettings" + (saveDashboardEmitter)="persistDashboardChanges()" + (discardDashboardEmitter)="discardChanges()" + (deleteDashboardEmitter)="deleteDashboard()" + (triggerEditModeEmitter)="triggerEditMode()" + (updateDateRangeEmitter)="updateDateRange($event)" + > + </sp-data-explorer-dashboard-toolbar> + </div> + + <div fxFlex="100" fxLayout="column"> + <mat-drawer-container + class="designer-panel-container h-100 dashboard-grid" + > + <mat-drawer + #designerDrawer + [opened]="editMode" + mode="side" + position="end" + class="designer-panel" + > + <div fxLayout="column" fxFlex="100"> + <sp-data-explorer-dashboard-widget-selection-panel + #designerPanel + (addDataViewEmitter)="addDataViewToDashboard($event)" + fxFlex="100" + > + </sp-data-explorer-dashboard-widget-selection-panel> + </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="!showEditingHelpInfo && viewMode === 'grid'" + [editMode]="editMode" + [dashboard]="dashboard" + [timeSettings]="timeSettings" + [currentlyConfiguredWidgetId]="currentlyConfiguredWidgetId" + (deleteCallback)="removeAndQueueItemForDeletion($event)" + (startEditModeEmitter)="startEditMode($event)" + 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" + (deleteCallback)="removeAndQueueItemForDeletion($event)" + (startEditModeEmitter)="startEditMode($event)" + *ngIf="!showEditingHelpInfo && viewMode === 'slide'" + > + </sp-data-explorer-dashboard-slide-view> + </mat-drawer-content> + </mat-drawer-container> + </div> +</sp-basic-view> diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.scss b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.scss similarity index 90% rename from ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.scss rename to ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.scss index c1e524bb89..285b384708 100644 --- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.scss +++ b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.scss @@ -1,4 +1,4 @@ -/* +/*! * 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. @@ -20,15 +20,6 @@ height: 50px; } -.data-explorer-options { - padding: 0px; -} - -.data-explorer-options-item { - display: inline; - margin-right: 10px; -} - .m-20 { margin: 20px; } diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts similarity index 65% rename from ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts rename to ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts index 5b33a4bfc1..06500d62f9 100644 --- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts +++ b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts @@ -17,10 +17,9 @@ */ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { Observable, of, Subscription, zip } from 'rxjs'; +import { Observable, of, Subscription } from 'rxjs'; import { DataExplorerDashboardGridComponent } from '../widget-view/grid-view/data-explorer-dashboard-grid.component'; import { MatDrawer } from '@angular/material/sidenav'; -import { Tuple2 } from '../../../core-model/base/Tuple2'; import { ClientDashboardItem, Dashboard, @@ -29,7 +28,6 @@ import { DataViewDataExplorerService, TimeSettings, } from '@streampipes/platform-services'; -import { DataExplorerDesignerPanelComponent } from '../designer-panel/data-explorer-designer-panel.component'; import { TimeSelectionService } from '../../services/time-selection.service'; import { AuthService } from '../../../services/auth.service'; import { UserPrivilege } from '../../../_enums/user-privilege.enum'; @@ -76,26 +74,17 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy { @ViewChild('designerDrawer') designerDrawer: MatDrawer; - @ViewChild('designerPanel') - designerPanel: DataExplorerDesignerPanelComponent; - hasDataExplorerWritePrivileges = false; hasDataExplorerDeletePrivileges = false; public items: Dashboard[]; widgetIdsToRemove: string[] = []; - widgetsToUpdate: Map<string, DataExplorerWidgetModel> = new Map< - string, - DataExplorerWidgetModel - >(); currentlyConfiguredWidget: DataExplorerWidgetModel; - newWidgetMode = false; currentlyConfiguredWidgetId: string; dataLakeMeasure: DataLakeMeasure; - showDesignerPanel = false; showEditingHelpInfo = false; authSubscription: Subscription; @@ -139,39 +128,22 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy { } ngOnDestroy() { - if (this.authSubscription) { - this.authSubscription.unsubscribe(); - } - } - - triggerResize() { - window.dispatchEvent(new Event('resize')); - } - - addWidget( - widgetConfig: Tuple2<DataLakeMeasure, DataExplorerWidgetModel>, - ): void { - this.dataLakeMeasure = widgetConfig.a; - this.dataViewDataExplorerService - .saveWidget(widgetConfig.b) - .subscribe(response => { - this.addWidgetToDashboard(response); - }); + this.authSubscription?.unsubscribe(); } - addWidgetToDashboard(widget: DataExplorerWidgetModel) { + addDataViewToDashboard(dataViewElementId: string) { // eslint-disable-next-line @typescript-eslint/consistent-type-assertions const dashboardItem = {} as ClientDashboardItem; - dashboardItem.id = widget.elementId; + dashboardItem.id = dataViewElementId; dashboardItem.cols = 3; dashboardItem.rows = 4; dashboardItem.x = 0; dashboardItem.y = 0; this.dashboard.widgets.push(dashboardItem); if (this.viewMode === 'grid') { - this.dashboardGrid.loadWidgetConfig(widget.elementId, true); + this.dashboardGrid.loadWidgetConfig(dataViewElementId, true); } else { - this.dashboardSlide.loadWidgetConfig(widget.elementId, true); + this.dashboardSlide.loadWidgetConfig(dataViewElementId, true); } } @@ -181,20 +153,14 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy { .subscribe(result => { this.dashboard.rev = result.rev; if (this.widgetIdsToRemove.length > 0) { - const observables = this.deleteWidgets(); - zip(...observables).subscribe(() => { - this.widgetIdsToRemove.forEach(id => { - if (this.viewMode === 'grid') { - this.dashboardGrid.configuredWidgets.delete(id); - } else { - this.dashboardSlide.configuredWidgets.delete( - id, - ); - } - }); - - this.afterDashboardChange(); + this.widgetIdsToRemove.forEach(id => { + if (this.viewMode === 'grid') { + this.dashboardGrid.configuredWidgets.delete(id); + } else { + this.dashboardSlide.configuredWidgets.delete(id); + } }); + this.afterDashboardChange(); } else { this.afterDashboardChange(); } @@ -209,12 +175,10 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy { } else { this.dashboardSlide.updateAllWidgets(); } - this.closeDesignerPanel(); } startEditMode(widgetModel: DataExplorerWidgetModel) { this.editMode = true; - this.updateCurrentlyConfiguredWidget(widgetModel); this.showEditingHelpInfo = false; } @@ -229,86 +193,23 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy { } } - updateAndQueueItemForDeletion(widget: DataExplorerWidgetModel) { - this.widgetsToUpdate.set(widget.elementId, widget); - } - - deleteWidgets(): Observable<any>[] { - return this.widgetIdsToRemove.map(widgetId => { - return this.dataViewDataExplorerService.deleteWidget(widgetId); - }); - } - updateDateRange(timeSettings: TimeSettings) { this.timeSettings = timeSettings; this.dashboard.dashboardTimeSettings = timeSettings; this.timeSelectionService.notify(timeSettings); } - updateCurrentlyConfiguredWidget(currentWidget: DataExplorerWidgetModel) { - if (currentWidget) { - this.widgetsToUpdate.set(currentWidget.elementId, currentWidget); - this.currentlyConfiguredWidget = currentWidget; - this.currentlyConfiguredWidgetId = currentWidget.elementId; - this.designerPanel.modifyWidgetMode(currentWidget, false); - this.showDesignerPanel = true; - } else { - this.showDesignerPanel = false; - } - } - discardChanges() { this.editMode = false; } triggerEditMode() { this.showEditingHelpInfo = false; - if (this.dashboard.widgets.length > 0) { - this.currentlyConfiguredWidgetId = this.dashboard.widgets[0].id; - const currentView = this.dashboardGrid - ? this.dashboardGrid - : this.dashboardSlide; - currentView.selectFirstWidgetForEditing( - this.currentlyConfiguredWidgetId, - ); - } else { - this.editMode = true; - this.createWidget(); - } - } - - createWidget() { - this.dataLakeMeasure = new DataLakeMeasure(); - this.currentlyConfiguredWidget = new DataExplorerWidgetModel(); - this.currentlyConfiguredWidget['@class'] = - 'org.apache.streampipes.model.datalake.DataExplorerWidgetModel'; - this.currentlyConfiguredWidget.baseAppearanceConfig = {}; - this.currentlyConfiguredWidget.baseAppearanceConfig.widgetTitle = - 'New Widget'; - this.currentlyConfiguredWidget.dataConfig = {}; - this.currentlyConfiguredWidget.dataConfig.ignoreMissingValues = false; - this.currentlyConfiguredWidget.baseAppearanceConfig.backgroundColor = - '#FFFFFF'; - this.currentlyConfiguredWidget.baseAppearanceConfig.textColor = - '#3e3e3e'; - this.currentlyConfiguredWidget = { ...this.currentlyConfiguredWidget }; - this.newWidgetMode = true; - this.showDesignerPanel = true; - this.newWidgetMode = true; - if (this.designerPanel) { - this.designerPanel.resetIndex(); - } - } - - closeDesignerPanel() { - this.showDesignerPanel = false; - this.currentlyConfiguredWidget = undefined; - this.dataLakeMeasure = undefined; - this.currentlyConfiguredWidgetId = undefined; + this.editMode = true; } - deleteDashboard(dashboard: Dashboard) { - this.dashboardService.deleteDashboard(dashboard).subscribe(_ => { + deleteDashboard() { + this.dashboardService.deleteDashboard(this.dashboard).subscribe(_ => { this.goBackToOverview(); }); } @@ -349,8 +250,8 @@ export class DataExplorerDashboardPanelComponent implements OnInit, OnDestroy { } confirmLeaveDashboard( - route: ActivatedRouteSnapshot, - state: RouterStateSnapshot, + _route: ActivatedRouteSnapshot, + _state: RouterStateSnapshot, ): Observable<boolean> { if (this.editMode) { const dialogRef = this.dialog.open(ConfirmDialogComponent, { diff --git a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html diff --git a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.scss diff --git a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts similarity index 92% rename from ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts index 9c6adcaaa8..d077141cf7 100644 --- a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts @@ -17,10 +17,10 @@ */ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { WidgetConfigurationService } from '../../../services/widget-configuration.service'; +import { WidgetConfigurationService } from '../../../../services/widget-configuration.service'; import { DataExplorerWidgetModel } from '@streampipes/platform-services'; -import { WidgetTypeService } from '../../../services/widget-type.service'; -import { DataExplorerWidgetRegistry } from '../../../registry/data-explorer-widget-registry'; +import { WidgetTypeService } from '../../../../services/widget-type.service'; +import { DataExplorerWidgetRegistry } from '../../../../registry/data-explorer-widget-registry'; import { Subscription } from 'rxjs'; @Component({ diff --git a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.html similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.html diff --git a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.scss b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.scss similarity index 95% rename from ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.scss rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.scss index a473489e0e..89b6abd1ba 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.scss +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.scss @@ -16,7 +16,7 @@ * */ -@import '../../../../scss/sp/sp-dialog.scss'; +@import '../../../../../scss/sp/sp-dialog.scss'; .designer-panel-content { padding: 0; @@ -33,6 +33,7 @@ margin-left: 20px; font-size: 12pt; font-weight: bold; + height: 40px; } .designer-panel-header { diff --git a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.ts b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.ts similarity index 98% rename from ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.ts rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.ts index 2b5eb57efc..f2400158ac 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-explorer-designer-panel.component.ts @@ -27,7 +27,7 @@ import { DataExplorerWidgetModel, DataLakeMeasure, } from '@streampipes/platform-services'; -import { Tuple2 } from '../../../core-model/base/Tuple2'; +import { Tuple2 } from '../../../../core-model/base/Tuple2'; import { DataExplorerWidgetDataSettingsComponent } from './data-settings/data-explorer-widget-data-settings.component'; @Component({ diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.html similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.html diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.scss b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.scss rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.scss diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.ts similarity index 98% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.ts index 38eb68730f..f780e87b06 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component.ts @@ -32,9 +32,9 @@ import { DataViewDataExplorerService, SourceConfig, } from '@streampipes/platform-services'; -import { Tuple2 } from '../../../../core-model/base/Tuple2'; +import { Tuple2 } from '../../../../../core-model/base/Tuple2'; import { zip } from 'rxjs'; -import { WidgetConfigurationService } from '../../../services/widget-configuration.service'; +import { WidgetConfigurationService } from '../../../../services/widget-configuration.service'; import { FieldSelectionPanelComponent } from './field-selection-panel/field-selection-panel.component'; import { GroupSelectionPanelComponent } from './group-selection-panel/group-selection-panel.component'; diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.html b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection-panel/field-selection-panel.component.html similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.html rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection-panel/field-selection-panel.component.html diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection-panel/field-selection-panel.component.scss diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts similarity index 95% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts index d9d892b947..6da1c34cd2 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection-panel/field-selection-panel.component.ts @@ -22,8 +22,8 @@ import { FieldConfig, SourceConfig, } from '@streampipes/platform-services'; -import { DataExplorerFieldProviderService } from '../../../../services/data-explorer-field-provider-service'; -import { WidgetConfigurationService } from '../../../../services/widget-configuration.service'; +import { DataExplorerFieldProviderService } from '../../../../../services/data-explorer-field-provider-service'; +import { WidgetConfigurationService } from '../../../../../services/widget-configuration.service'; @Component({ selector: 'sp-field-selection-panel', diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.html b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection/field-selection.component.html similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.html rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection/field-selection.component.html diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.scss b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection/field-selection.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.scss rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection/field-selection.component.scss diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.ts b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection/field-selection.component.ts similarity index 94% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.ts rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection/field-selection.component.ts index e7db6f6f40..9c67c91b61 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/field-selection/field-selection.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/field-selection/field-selection.component.ts @@ -22,7 +22,7 @@ import { FieldConfig, SourceConfig, } from '@streampipes/platform-services'; -import { WidgetConfigurationService } from '../../../../services/widget-configuration.service'; +import { WidgetConfigurationService } from '../../../../../services/widget-configuration.service'; @Component({ selector: 'sp-field-selection', diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.scss diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts similarity index 95% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts index 03fe6fe2f3..ecdec5f465 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.ts @@ -23,8 +23,8 @@ import { SelectedFilter, SourceConfig, } from '@streampipes/platform-services'; -import { WidgetConfigurationService } from '../../../../services/widget-configuration.service'; -import { DataExplorerFieldProviderService } from '../../../../services/data-explorer-field-provider-service'; +import { WidgetConfigurationService } from '../../../../../services/widget-configuration.service'; +import { DataExplorerFieldProviderService } from '../../../../../services/data-explorer-field-provider-service'; @Component({ selector: 'sp-filter-selection-panel', diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/group-selection-panel/group-selection-panel.component.html b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/group-selection-panel/group-selection-panel.component.html similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/group-selection-panel/group-selection-panel.component.html rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/group-selection-panel/group-selection-panel.component.html diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/group-selection-panel/group-selection-panel.component.scss b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/group-selection-panel/group-selection-panel.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/group-selection-panel/group-selection-panel.component.scss rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/group-selection-panel/group-selection-panel.component.scss diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/group-selection-panel/group-selection-panel.component.ts b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/group-selection-panel/group-selection-panel.component.ts similarity index 93% rename from ui/src/app/data-explorer/components/designer-panel/data-settings/group-selection-panel/group-selection-panel.component.ts rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/group-selection-panel/group-selection-panel.component.ts index 80c20febdc..a6e05965df 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/group-selection-panel/group-selection-panel.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/data-settings/group-selection-panel/group-selection-panel.component.ts @@ -17,8 +17,8 @@ */ import { Component, Input, OnInit } from '@angular/core'; -import { DataExplorerFieldProviderService } from '../../../../services/data-explorer-field-provider-service'; -import { WidgetConfigurationService } from '../../../../services/widget-configuration.service'; +import { DataExplorerFieldProviderService } from '../../../../../services/data-explorer-field-provider-service'; +import { WidgetConfigurationService } from '../../../../../services/widget-configuration.service'; import { EventPropertyUnion, FieldConfig, diff --git a/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html diff --git a/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.scss b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.scss rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.scss diff --git a/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts similarity index 90% rename from ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts rename to ui/src/app/data-explorer/components/data-view/data-view-designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts index 8b8b3b8899..cc5bd31b0b 100644 --- a/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-view-designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts @@ -24,10 +24,10 @@ import { SimpleChanges, } from '@angular/core'; import { DataExplorerWidgetModel } from '@streampipes/platform-services'; -import { WidgetTypeService } from '../../../services/widget-type.service'; +import { WidgetTypeService } from '../../../../services/widget-type.service'; import { MatSelectChange } from '@angular/material/select'; -import { IWidget } from '../../../models/dataview-dashboard.model'; -import { DataExplorerWidgetRegistry } from '../../../registry/data-explorer-widget-registry'; +import { IWidget } from '../../../../models/dataview-dashboard.model'; +import { DataExplorerWidgetRegistry } from '../../../../registry/data-explorer-widget-registry'; @Component({ selector: 'sp-explorer-visualisation-settings', diff --git a/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.html b/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.html index 4be9360243..7387819356 100644 --- a/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.html +++ b/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.html @@ -33,7 +33,17 @@ data-cy="save-data-explorer-widget-btn" > <mat-icon>save</mat-icon> - Save data view + Save + </button> + <button + mat-raised-button + matTooltip="Discard" + class="mat-basic mr-10 edit-menu-btn" + (click)="discardDataViewEmitter.emit()" + data-cy="discard-data-explorer-widget-btn" + > + <i class="material-icons">undo</i> + <span> Discard</span> </button> <span fxFlex></span> <div diff --git a/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.ts b/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.ts index 37295d4769..c67c6beda7 100644 --- a/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component.ts @@ -35,6 +35,9 @@ export class DataExplorerDataViewToolbarComponent { @Output() saveDataViewEmitter: EventEmitter<void> = new EventEmitter(); + @Output() + discardDataViewEmitter: EventEmitter<void> = new EventEmitter(); + @Output() updateDateRangeEmitter: EventEmitter<TimeSettings> = new EventEmitter(); } diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.html b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.html index a2eae808fa..4ada6cdaed 100644 --- a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.html +++ b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.html @@ -33,7 +33,7 @@ mat-header-cell *matHeaderCellDef > - Data View + Dashboard </th> <td fxFlex="60" 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 deleted file mode 100644 index 0d04478e00..0000000000 --- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html +++ /dev/null @@ -1,230 +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. - ~ - --> - -<sp-basic-view - [backLinkTarget]="['dataexplorer']" - [showBackLink]="true" - *ngIf="dashboardLoaded" -> - <div nav fxFlex="100"> - <div - class="data-explorer-options-item" - fxLayoutAlign="start center" - fxLayout="row" - *ngIf="editMode" - > - <button - mat-icon-button - color="accent" - matTooltip="Save" - class="edit-menu-btn" - (click)="persistDashboardChanges()" - data-cy="save-data-explorer-widget-btn" - > - <mat-icon>save</mat-icon> - </button> - <button - mat-icon-button - color="accent" - matTooltip="Discard" - class="mat-basic mr-10 edit-menu-btn" - (click)="discardChanges()" - > - <i class="material-icons">undo</i> - </button> - <button - mat-icon-button - matTooltip="Add widget" - color="accent" - class="edit-menu-btn" - (click)="createWidget()" - [disabled]="!editMode" - data-cy="add-new-widget" - > - <i class="material-icons">add</i> - </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)="viewMode = 'grid'"> - <mat-icon>grid_view</mat-icon> - <span>Grid</span> - </button> - <button mat-menu-item (click)="viewMode = '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)="updateDateRange($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)="triggerEditMode()" - *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)="deleteDashboard(dashboard)" - > - <mat-icon>clear</mat-icon> - <span>Delete dashboard</span> - </button> - </mat-menu> - </div> - </div> - - <div fxFlex="100" fxLayout="column"> - <mat-drawer-container - class="designer-panel-container h-100 dashboard-grid" - > - <mat-drawer - #designerDrawer - [opened]="showDesignerPanel" - (opened)="triggerResize()" - (closed)="triggerResize()" - mode="side" - position="end" - class="designer-panel" - > - <div fxLayout="column" fxFlex="100"> - <sp-data-explorer-designer-panel - #designerPanel - [currentlyConfiguredWidget]="currentlyConfiguredWidget" - [dataLakeMeasure]="dataLakeMeasure" - [newWidgetMode]="newWidgetMode" - (addWidgetEmitter)="addWidget($event)" - (closeDesignerPanelEmitter)="closeDesignerPanel()" - fxFlex="100" - > - </sp-data-explorer-designer-panel> - </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="!showEditingHelpInfo && viewMode === 'grid'" - [editMode]="editMode" - [dashboard]="dashboard" - [timeSettings]="timeSettings" - [currentlyConfiguredWidgetId]="currentlyConfiguredWidgetId" - (configureWidgetCallback)=" - updateCurrentlyConfiguredWidget($event) - " - (updateCallback)="updateAndQueueItemForDeletion($event)" - (deleteCallback)="removeAndQueueItemForDeletion($event)" - (startEditModeEmitter)="startEditMode($event)" - 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="!showEditingHelpInfo && viewMode === 'slide'" - > - </sp-data-explorer-dashboard-slide-view> - </mat-drawer-content> - </mat-drawer-container> - </div> -</sp-basic-view> diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html index f2a051edab..e540b2d85c 100644 --- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html +++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html @@ -24,11 +24,8 @@ color: configuredWidget.baseAppearanceConfig.textColor, height: gridsterItemComponent.height - 13 + 'px', border: - editMode && - currentlyConfiguredWidgetId === configuredWidget.elementId - ? '4px solid var(--color-accent)' - : '2px solid ' + - configuredWidget.baseAppearanceConfig.backgroundColor + '2px solid ' + + configuredWidget.baseAppearanceConfig.backgroundColor }" [attr.data-cy]=" 'widget-' + configuredWidget.baseAppearanceConfig.widgetTitle @@ -114,28 +111,6 @@ > <mat-icon>get_app</mat-icon> </button> - <button - mat-icon-button - [class.mat-raised-button]=" - currentlyConfiguredWidgetId === - configuredWidget.elementId - " - (click)="triggerWidgetEditMode()" - *ngIf="editMode" - [color]=" - currentlyConfiguredWidgetId === - configuredWidget.elementId - ? 'accent' - : '' - " - matTooltip="Edit widget" - [attr.data-cy]=" - 'edit-' + - configuredWidget.baseAppearanceConfig.widgetTitle - " - > - <mat-icon>edit</mat-icon> - </button> <button mat-icon-button (click)="removeWidget()" diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts index 468c266931..3f6ef8df3e 100644 --- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts +++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts @@ -73,9 +73,6 @@ export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy { @Input() gridsterItemComponent: GridsterItemComponent; - @Input() - currentlyConfiguredWidgetId: string; - @Input() previewMode = false; @@ -90,17 +87,11 @@ export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy { @Output() deleteCallback: EventEmitter<DataExplorerWidgetModel> = new EventEmitter<DataExplorerWidgetModel>(); - @Output() updateCallback: EventEmitter<DataExplorerWidgetModel> = - new EventEmitter<DataExplorerWidgetModel>(); - @Output() configureWidgetCallback: EventEmitter<DataExplorerWidgetModel> = - new EventEmitter<DataExplorerWidgetModel>(); @Output() startEditModeEmitter: EventEmitter<DataExplorerWidgetModel> = new EventEmitter<DataExplorerWidgetModel>(); title = ''; widgetLoaded = false; - - msCounter = interval(10); timerActive = false; loadingTime = 0; @@ -227,16 +218,6 @@ export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy { this.startEditModeEmitter.emit(this.configuredWidget); } - triggerWidgetEditMode() { - if ( - this.currentlyConfiguredWidgetId === this.configuredWidget.elementId - ) { - this.configureWidgetCallback.emit(); - } else { - this.configureWidgetCallback.emit(this.configuredWidget); - } - } - startLoadingTimer() { this.timerActive = true; this.intervalSubscription = interval(100) diff --git a/ui/src/app/data-explorer/data-explorer-panel.can-deactivate.guard.ts b/ui/src/app/data-explorer/data-explorer-panel.can-deactivate.guard.ts index 1c51438c29..4adbda1f04 100644 --- a/ui/src/app/data-explorer/data-explorer-panel.can-deactivate.guard.ts +++ b/ui/src/app/data-explorer/data-explorer-panel.can-deactivate.guard.ts @@ -17,7 +17,7 @@ */ import { Injectable } from '@angular/core'; -import { DataExplorerDashboardPanelComponent } from './components/panel/data-explorer-dashboard-panel.component'; +import { DataExplorerDashboardPanelComponent } from './components/dashboard/data-explorer-dashboard-panel.component'; import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs'; diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts index 44b8ab9baf..62dc60706a 100644 --- a/ui/src/app/data-explorer/data-explorer.module.ts +++ b/ui/src/app/data-explorer/data-explorer.module.ts @@ -38,7 +38,7 @@ import { PlatformServicesModule } from '@streampipes/platform-services'; import { CoreUiModule } from '../core-ui/core-ui.module'; import { DataExplorerDashboardGridComponent } from './components/widget-view/grid-view/data-explorer-dashboard-grid.component'; import { DataExplorerOverviewComponent } from './components/overview/data-explorer-overview.component'; -import { DataExplorerDashboardPanelComponent } from './components/panel/data-explorer-dashboard-panel.component'; +import { DataExplorerDashboardPanelComponent } from './components/dashboard/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'; @@ -51,22 +51,22 @@ import { SelectColorPropertiesComponent } from './components/widgets/utils/selec import { DataExplorerEditDataViewDialogComponent } from './dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component'; import { GroupConfigurationComponent } from './components/widgets/utils/group-configuration/group-configuration.component'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; -import { DataExplorerDesignerPanelComponent } from './components/designer-panel/data-explorer-designer-panel.component'; +import { DataExplorerDesignerPanelComponent } from './components/data-view/data-view-designer-panel/data-explorer-designer-panel.component'; import { TableWidgetConfigComponent } from './components/widgets/table/config/table-widget-config.component'; import { MapWidgetComponent } from './components/widgets/map/map-widget.component'; import { MapWidgetConfigComponent } from './components/widgets/map/config/map-widget-config.component'; import { HeatmapWidgetConfigComponent } from './components/widgets/heatmap/config/heatmap-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 { DataExplorerWidgetAppearanceSettingsComponent } from './components/data-view/data-view-designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component'; +import { DataExplorerWidgetDataSettingsComponent } from './components/data-view/data-view-designer-panel/data-settings/data-explorer-widget-data-settings.component'; import { TimeSeriesChartWidgetConfigComponent } from './components/widgets/time-series-chart/config/time-series-chart-widget-config.component'; import { ImageWidgetConfigComponent } from './components/widgets/image/config/image-widget-config.component'; import { IndicatorWidgetConfigComponent } from './components/widgets/indicator/config/indicator-chart-widget-config.component'; -import { FieldSelectionPanelComponent } from './components/designer-panel/data-settings/field-selection-panel/field-selection-panel.component'; -import { FieldSelectionComponent } from './components/designer-panel/data-settings/field-selection/field-selection.component'; -import { FilterSelectionPanelComponent } from './components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component'; +import { FieldSelectionPanelComponent } from './components/data-view/data-view-designer-panel/data-settings/field-selection-panel/field-selection-panel.component'; +import { FieldSelectionComponent } from './components/data-view/data-view-designer-panel/data-settings/field-selection/field-selection.component'; +import { FilterSelectionPanelComponent } from './components/data-view/data-view-designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component'; import { SelectPropertyComponent } from './components/widgets/utils/select-property/select-property.component'; -import { DataExplorerVisualisationSettingsComponent } from './components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component'; -import { GroupSelectionPanelComponent } from './components/designer-panel/data-settings/group-selection-panel/group-selection-panel.component'; +import { DataExplorerVisualisationSettingsComponent } from './components/data-view/data-view-designer-panel/visualisation-settings/data-explorer-visualisation-settings.component'; +import { GroupSelectionPanelComponent } from './components/data-view/data-view-designer-panel/data-settings/group-selection-panel/group-selection-panel.component'; import { WidgetDirective } from './components/widget/widget.directive'; import { CorrelationWidgetConfigComponent } from './components/widgets/correlation-chart/config/correlation-chart-widget-config.component'; import { TooMuchDataComponent } from './components/widgets/utils/too-much-data/too-much-data.component'; @@ -117,6 +117,10 @@ import { SpDataExplorerDataViewOverviewComponent } from './components/overview/d import { SpDataExplorerDashboardOverviewComponent } from './components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component'; import { DataExplorerDataViewComponent } from './components/data-view/data-explorer-data-view.component'; import { DataExplorerDataViewToolbarComponent } from './components/data-view/data-view-toolbar/data-explorer-data-view-toolbar.component'; +import { DataExplorerDataViewSelectionComponent } from './components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-selection.component'; +import { DataExplorerDashboardWidgetSelectionPanelComponent } from './components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component'; +import { DataExplorerDataViewPreviewComponent } from './components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component'; +import { DataExplorerDashboardToolbarComponent } from './components/dashboard/dashboard-toolbar/dashboard-toolbar.component'; @NgModule({ imports: [ @@ -201,7 +205,11 @@ import { DataExplorerDataViewToolbarComponent } from './components/data-view/dat DataExplorerOverviewComponent, DataExplorerDashboardPanelComponent, DataExplorerDashboardSlideViewComponent, + DataExplorerDashboardToolbarComponent, DataExplorerDashboardWidgetComponent, + DataExplorerDashboardWidgetSelectionPanelComponent, + DataExplorerDataViewPreviewComponent, + DataExplorerDataViewSelectionComponent, DataExplorerDesignerPanelComponent, DataExplorerEditDataViewDialogComponent, DataExplorerWidgetAppearanceSettingsComponent,
