You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2022/08/02 19:50:29 UTC

[incubator-streampipes] branch dev updated: [STREAMPIPES-569] Reuse data download dialog in configuration

This is an automated email from the ASF dual-hosted git repository.

riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git


The following commit(s) were added to refs/heads/dev by this push:
     new 438a2419a [STREAMPIPES-569] Reuse data download dialog in configuration
438a2419a is described below

commit 438a2419ae576ea65bad55f81b4d5835fa986240
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Aug 2 21:49:55 2022 +0200

    [STREAMPIPES-569] Reuse data download dialog in configuration
---
 .../lib/query/data-view-query-generator.service.ts   |  3 +--
 .../datalake-configuration.component.html            | 20 ++++++++++++++++++--
 .../datalake-configuration.component.ts              | 17 +++++++++++++++--
 ui/src/app/core-ui/core-ui.module.ts                 |  6 ++++++
 .../data-download-dialog.component.html              |  8 ++++----
 .../data-download-dialog.component.scss              |  0
 .../data-download-dialog.component.ts                |  9 +++++++++
 .../data-explorer-dashboard-widget.component.ts      |  2 +-
 ui/src/app/data-explorer/data-explorer.module.ts     |  2 --
 9 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/ui/projects/streampipes/platform-services/src/lib/query/data-view-query-generator.service.ts b/ui/projects/streampipes/platform-services/src/lib/query/data-view-query-generator.service.ts
index 828ea69b7..59d5a611f 100644
--- a/ui/projects/streampipes/platform-services/src/lib/query/data-view-query-generator.service.ts
+++ b/ui/projects/streampipes/platform-services/src/lib/query/data-view-query-generator.service.ts
@@ -54,8 +54,7 @@ export class DataViewQueryGeneratorService {
   generateQuery(startTime: number,
                 endTime: number,
                 sourceConfig: SourceConfig,
-                maximumResultingEvents: number = -1
-                ): DatalakeQueryParameters {
+                maximumResultingEvents: number = -1): DatalakeQueryParameters {
     const queryBuilder = DatalakeQueryParameterBuilder.create(startTime, endTime);
     const queryConfig = sourceConfig.queryConfig;
 
diff --git a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
index 587a8b6b5..a967e01a9 100644
--- a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
+++ b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.html
@@ -58,11 +58,27 @@
                             </td>
                         </ng-container>
 
+                        <ng-container matColumnDef="download">
+                            <th mat-header-cell *matHeaderCellDef>Download</th>
+                            <td mat-cell *matCellDef="let configurationEntry">
+                                <div fxLayout="row">
+                                    <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="start center">
+                                        <button color="accent" mat-button mat-icon-button
+                                                matTooltip="Download data from index" matTooltipPosition="above"
+                                                data-cy="datalake-download-btn"
+                                                (click)="openDownloadDialog(configurationEntry.name)">
+                                            <i class="material-icons">download</i>
+                                        </button>
+                                    </span>
+                                </div>
+                            </td>
+                        </ng-container>
+
                         <ng-container matColumnDef="truncate">
                             <th mat-header-cell *matHeaderCellDef>Truncate</th>
                             <td mat-cell *matCellDef="let configurationEntry">
                                 <div fxLayout="row">
-                                    <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center">
+                                    <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="start center">
                                         <button color="accent" mat-button mat-icon-button
                                             matTooltip="Truncate all data from index" matTooltipPosition="above"
                                             data-cy="datalake-truncate-btn"
@@ -78,7 +94,7 @@
                             <th mat-header-cell *matHeaderCellDef>Remove</th>
                             <td mat-cell *matCellDef="let configurationEntry">
                                 <div fxLayout="row">
-                                    <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center">
+                                    <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="start center">
                                         <button color="accent" mat-button mat-icon-button
                                             matTooltip="Remove index from database" data-cy="datalake-delete-btn"
                                             matTooltipPosition="above" [disabled]="!configurationEntry.remove"
diff --git a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.ts b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.ts
index 4c3e896d5..c1ec6d271 100644
--- a/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.ts
+++ b/ui/src/app/configuration/datalake-configuration/datalake-configuration.component.ts
@@ -20,10 +20,11 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { DataLakeConfigurationEntry } from './datalake-configuration-entry';
 import {
+  DataExplorerDataConfig,
   DatalakeQueryParameterBuilder,
   DatalakeQueryParameters,
   DatalakeRestService,
-  DataViewDataExplorerService,
+  DataViewDataExplorerService, DateRange,
   EventSchema,
   FieldConfig,
   SpQueryResult
@@ -34,6 +35,7 @@ import { DialogRef, DialogService, PanelType, SpBreadcrumbService } from '@strea
 import { DeleteDatalakeIndexComponent } from '../dialog/delete-datalake-index/delete-datalake-index-dialog.component';
 import { SpConfigurationTabs } from '../configuration-tabs';
 import { SpConfigurationRoutes } from '../configuration.routes';
+import { DataDownloadDialogComponent } from '../../core-ui/data-download-dialog/data-download-dialog.component';
 
 @Component({
   selector: 'sp-datalake-configuration',
@@ -51,7 +53,7 @@ export class DatalakeConfigurationComponent implements OnInit {
   dataSource: MatTableDataSource<DataLakeConfigurationEntry>;
   availableMeasurements: DataLakeConfigurationEntry[] = [];
 
-  displayedColumns: string[] = ['name', 'pipeline', 'events', 'truncate', 'remove'];
+  displayedColumns: string[] = ['name', 'pipeline', 'events', 'download', 'truncate', 'remove'];
 
   constructor(
     // protected dataLakeRestService: DatalakeRestService,
@@ -153,6 +155,17 @@ export class DatalakeConfigurationComponent implements OnInit {
     });
   }
 
+  openDownloadDialog(measurementName: string) {
+    this.dialogService.open(DataDownloadDialogComponent, {
+      panelType: PanelType.SLIDE_IN_PANEL,
+      title: 'Download data',
+      width: '50vw',
+      data: {
+        'index': measurementName,
+      }
+    });
+  }
+
   private buildQ(column: FieldConfig): DatalakeQueryParameters {
     return DatalakeQueryParameterBuilder.create(0, new Date().getTime())
       .withColumnFilter([column], true)
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index e2330944a..89f0163ef 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -84,6 +84,8 @@ import { ImageBarPreviewComponent } from './image/components/image-bar/image-bar
 import { SharedUiModule } from '@streampipes/shared-ui';
 import { PipelineElementTemplateConfigComponent } from './pipeline-element-template-config/pipeline-element-template-config.component';
 import { PipelineElementTemplatePipe } from './pipeline-element-template-config/pipeline-element-template.pipe';
+import { DataDownloadDialogComponent } from './data-download-dialog/data-download-dialog.component';
+import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 
 @NgModule({
   imports: [
@@ -106,6 +108,8 @@ import { PipelineElementTemplatePipe } from './pipeline-element-template-config/
     MatSlideToggleModule,
     MatChipsModule,
     MatTreeModule,
+    OwlDateTimeModule,
+    OwlNativeDateTimeModule,
     PlatformServicesModule,
     PortalModule,
     SharedUiModule,
@@ -115,6 +119,7 @@ import { PipelineElementTemplatePipe } from './pipeline-element-template-config/
   ],
   declarations: [
     ConfigureLabelsComponent,
+    DataDownloadDialogComponent,
     DisplayRecommendedPipe,
     ImageBarPreviewComponent,
     ImageComponent,
@@ -163,6 +168,7 @@ import { PipelineElementTemplatePipe } from './pipeline-element-template-config/
   ],
   exports: [
     ConfigureLabelsComponent,
+    DataDownloadDialogComponent,
     ImageComponent,
     ImageLabelingComponent,
     PipelineElementTemplateConfigComponent,
diff --git a/ui/src/app/data-explorer/dialogs/data-download-dialog/data-download-dialog.component.html b/ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.html
similarity index 96%
rename from ui/src/app/data-explorer/dialogs/data-download-dialog/data-download-dialog.component.html
rename to ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.html
index 7d61db70b..4eee9e73a 100644
--- a/ui/src/app/data-explorer/dialogs/data-download-dialog/data-download-dialog.component.html
+++ b/ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.html
@@ -24,13 +24,13 @@
                     <ng-template matStepLabel>Select Data</ng-template>
                     <div class="mt-10">
                         <mat-radio-group class="example-radio-group" [(ngModel)]="selectedData">
-                            <mat-radio-button value="visible" class="example-radio-button">
+                            <mat-radio-button value="visible" class="example-radio-button" *ngIf="dataConfig">
                                 Currently configured query
                             </mat-radio-button>
-                            <div fxLayout="column" fxLayoutAlign="start start" class="ml-35 mb-10" *ngIf="selectedData === 'visible' && dataConfig.sourceConfigs.length > 1">
+                            <div fxLayout="column" fxLayoutAlign="start start" class="ml-35 mb-10" *ngIf="selectedData === 'visible' && dataConfig && dataConfig.sourceConfigs.length > 1">
                                 <h5>Select source (only one source can be exported in a single file)</h5>
-                                <mat-radio-group class="example-radio-group" [(ngModel)]="selectedQueryIndex">
-                                    <mat-radio-button [value]="i" *ngFor="let sourceConfig of dataConfig.sourceConfigs; let i = index">
+                                <mat-radio-group class="example-radio-group" [(ngModel)]="selectedQueryIndex" fxLayout="column">
+                                    <mat-radio-button [value]="i" *ngFor="let sourceConfig of dataConfig.sourceConfigs; let i = index" class="p-5">
                                         {{sourceConfig.measureName}}
                                     </mat-radio-button>
                                 </mat-radio-group>
diff --git a/ui/src/app/data-explorer/dialogs/data-download-dialog/data-download-dialog.component.scss b/ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.scss
similarity index 100%
rename from ui/src/app/data-explorer/dialogs/data-download-dialog/data-download-dialog.component.scss
rename to ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.scss
diff --git a/ui/src/app/data-explorer/dialogs/data-download-dialog/data-download-dialog.component.ts b/ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.ts
similarity index 96%
rename from ui/src/app/data-explorer/dialogs/data-download-dialog/data-download-dialog.component.ts
rename to ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.ts
index 93db48e93..b15054aab 100644
--- a/ui/src/app/data-explorer/dialogs/data-download-dialog/data-download-dialog.component.ts
+++ b/ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.ts
@@ -59,8 +59,17 @@ export class DataDownloadDialogComponent implements OnInit {
   }
 
   ngOnInit() {
+    if (!this.date) {
+      const endDate = new Date();
+      endDate.setDate(endDate.getDate() - 5);
+      this.date = {startDate: new Date(), endDate};
+    }
     this.dateRange[0] = this.date.startDate;
     this.dateRange[1] = this.date.endDate;
+
+    if (!this.dataConfig) {
+      this.selectedData = 'all';
+    }
   }
 
   downloadData() {
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 75ff11511..fb112b1e7 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
@@ -26,7 +26,7 @@ import {
   DateRange,
   TimeSettings
 } from '@streampipes/platform-services';
-import { DataDownloadDialogComponent } from '../../dialogs/data-download-dialog/data-download-dialog.component';
+import { DataDownloadDialogComponent } from '../../../core-ui/data-download-dialog/data-download-dialog.component';
 import { interval } from 'rxjs';
 import { takeWhile } from 'rxjs/operators';
 import { DataExplorerWidgetRegistry } from '../../registry/data-explorer-widget-registry';
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 82d0711f8..f0702a24b 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -50,7 +50,6 @@ import {
 } from '@streampipes/platform-services';
 import { CoreUiModule } from '../core-ui/core-ui.module';
 import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
-import { DataDownloadDialogComponent } from './dialogs/data-download-dialog/data-download-dialog.component';
 import { DataExplorerDashboardGridComponent } from './components/widget-view/grid-view/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';
@@ -177,7 +176,6 @@ export const MY_NATIVE_FORMATS = {
   ],
   declarations: [
     AggregateConfigurationComponent,
-    DataDownloadDialogComponent,
     DataExplorerDashboardGridComponent,
     DataExplorerDashboardOverviewComponent,
     DataExplorerDashboardPanelComponent,