You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2022/09/24 08:08:49 UTC
[incubator-streampipes] branch STREAMPIPES-583 updated: [STREAMPIPES-583] Refactore download component
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-583
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-583 by this push:
new 063afdc5f [STREAMPIPES-583] Refactore download component
063afdc5f is described below
commit 063afdc5f5979594e7f871cd78f8e5139d6b38e4
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Sat Sep 24 10:08:29 2022 +0200
[STREAMPIPES-583] Refactore download component
---
.../components/download/download.component.html | 6 +-
.../components/download/download.component.ts | 32 +--
.../data-download-dialog.component.ts | 18 +-
.../download-progress.model.ts} | 29 +--
.../services/data-export.service.ts | 218 ++++++++++++++-------
5 files changed, 183 insertions(+), 120 deletions(-)
diff --git a/ui/src/app/core-ui/data-download-dialog/components/download/download.component.html b/ui/src/app/core-ui/data-download-dialog/components/download/download.component.html
index eb80bd758..25b1d4f81 100644
--- a/ui/src/app/core-ui/data-download-dialog/components/download/download.component.html
+++ b/ui/src/app/core-ui/data-download-dialog/components/download/download.component.html
@@ -16,12 +16,12 @@
~
-->
<ng-template matStepLabel>Download</ng-template>
-<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="!downloadFinish" class="mt-35">
+<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="!downloadProgress.finished" class="mt-35">
<mat-spinner [diameter]="30" color="accent"></mat-spinner>
- <label *ngIf="downloadedMBs !== undefined">{{downloadedMBs | number : '1.0-2' }} Mb</label>
+ <label *ngIf="downloadProgress.downloadedMBs !== undefined">{{downloadProgress.downloadedMBs | number : '1.0-2' }} Mb</label>
<button mat-button warn color="warn" (click)="cancelDownload()">Cancel</button>
</div>
-<div fxLayout="column" fxLayoutAlign="space-around center" *ngIf="downloadFinish">
+<div fxLayout="column" fxLayoutAlign="space-around center" *ngIf="downloadProgress.finished">
<mat-icon class="icon-check">check</mat-icon>
<h5>Download successful</h5>
</div>
diff --git a/ui/src/app/core-ui/data-download-dialog/components/download/download.component.ts b/ui/src/app/core-ui/data-download-dialog/components/download/download.component.ts
index 33966d4a8..fea722a09 100644
--- a/ui/src/app/core-ui/data-download-dialog/components/download/download.component.ts
+++ b/ui/src/app/core-ui/data-download-dialog/components/download/download.component.ts
@@ -16,30 +16,40 @@
*
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { DataExportService } from '../../services/data-export.service';
+import { DownloadProgress } from '../../model/download-progress.model';
+import { Subscription } from 'rxjs';
@Component({
selector: 'sp-download',
templateUrl: './download.component.html',
styleUrls: ['./download.component.scss']
})
-export class DownloadComponent implements OnInit {
+export class DownloadComponent implements OnInit, OnDestroy {
- downloadFinish = false;
- downloadedMBs: number = undefined;
- downloadHttpRequestSubscription;
+ downloadProgress: DownloadProgress;
+ downloadProgressSubscription: Subscription;
- constructor() {
+ constructor(public dataExportService: DataExportService) {
}
ngOnInit(): void {
+ this.downloadProgress = {
+ downloadedMBs: 0,
+ finished: false,
+ };
+
+ this.downloadProgressSubscription = this.dataExportService.updateDownloadProgress.subscribe(progress => {
+ this.downloadProgress = progress;
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.downloadProgressSubscription.unsubscribe();
}
cancelDownload() {
- try {
- this.downloadHttpRequestSubscription.unsubscribe();
- } finally {
- // this.exitDialog();
+ // TODO implement
}
}
-}
diff --git a/ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.ts b/ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.ts
index 8c4cf8b46..c9aa11dd1 100644
--- a/ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.ts
+++ b/ui/src/app/core-ui/data-download-dialog/data-download-dialog.component.ts
@@ -21,6 +21,7 @@ import { MatStepper } from '@angular/material/stepper';
import { DialogRef } from '@streampipes/shared-ui';
import { ExportConfig } from './model/export-config.model';
import { DataDownloadDialogModel } from './model/data-download-dialog.model';
+import { DataExportService } from './services/data-export.service';
@Component({
@@ -36,18 +37,19 @@ export class DataDownloadDialogComponent implements OnInit {
exportConfig: ExportConfig;
- constructor(public dialogRef: DialogRef<DataDownloadDialogComponent>) {
+ constructor(public dialogRef: DialogRef<DataDownloadDialogComponent>,
+ public dataExportService: DataExportService) {
}
ngOnInit() {
- const measurement = this.dataDownloadDialogModel.measureName !== undefined ?
+ const measurementName = this.dataDownloadDialogModel.measureName !== undefined ?
this.dataDownloadDialogModel.measureName : this.dataDownloadDialogModel.dataExplorerDataConfig.sourceConfigs[0].measureName;
this.exportConfig = {
dataExportConfig: {
dataRangeConfiguration: 'all',
missingValueBehaviour: 'ignore',
- measurement: measurement
+ measurement: measurementName
},
formatExportConfig: {
exportFormat: 'csv',
@@ -69,10 +71,12 @@ export class DataDownloadDialogComponent implements OnInit {
}
downloadData() {
- // if (this.exportConfig.dataExportConfig.dataRangeConfiguration === 'visible') {
- // this.exportConfig.dataExportConfig.dateRange = this.dataDownloadDialogModel.dataExplorerDateRange;
- // }
+ // TODO check if I still need it
+ if (this.exportConfig.dataExportConfig.dataRangeConfiguration === 'visible') {
+ this.exportConfig.dataExportConfig.dateRange = this.dataDownloadDialogModel.dataExplorerDateRange;
+ }
- console.log(this.exportConfig);
+ this.dataExportService.downloadData(this.exportConfig, this.dataDownloadDialogModel);
+ this.downloadDialogStepper.next();
}
}
diff --git a/ui/src/app/core-ui/data-download-dialog/components/download/download.component.ts b/ui/src/app/core-ui/data-download-dialog/model/download-progress.model.ts
similarity index 61%
copy from ui/src/app/core-ui/data-download-dialog/components/download/download.component.ts
copy to ui/src/app/core-ui/data-download-dialog/model/download-progress.model.ts
index 33966d4a8..d4b0c84a1 100644
--- a/ui/src/app/core-ui/data-download-dialog/components/download/download.component.ts
+++ b/ui/src/app/core-ui/data-download-dialog/model/download-progress.model.ts
@@ -16,30 +16,7 @@
*
*/
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'sp-download',
- templateUrl: './download.component.html',
- styleUrls: ['./download.component.scss']
-})
-export class DownloadComponent implements OnInit {
-
- downloadFinish = false;
- downloadedMBs: number = undefined;
- downloadHttpRequestSubscription;
-
- constructor() {
- }
-
- ngOnInit(): void {
- }
-
- cancelDownload() {
- try {
- this.downloadHttpRequestSubscription.unsubscribe();
- } finally {
- // this.exitDialog();
- }
-}
+export interface DownloadProgress {
+ downloadedMBs?: number;
+ finished: boolean;
}
diff --git a/ui/src/app/core-ui/data-download-dialog/services/data-export.service.ts b/ui/src/app/core-ui/data-download-dialog/services/data-export.service.ts
index 9744d3d56..fa58fef70 100644
--- a/ui/src/app/core-ui/data-download-dialog/services/data-export.service.ts
+++ b/ui/src/app/core-ui/data-download-dialog/services/data-export.service.ts
@@ -16,20 +16,65 @@
*
*/
-import { Injectable } from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
import { ExportConfig } from '../model/export-config.model';
-import { DatalakeRestService } from '@streampipes/platform-services';
+import { DatalakeQueryParameters, DatalakeRestService, DataViewQueryGeneratorService } from '@streampipes/platform-services';
+import { HttpEventType } from '@angular/common/http';
import { DataDownloadDialogModel } from '../model/data-download-dialog.model';
+import { DownloadProgress } from '../model/download-progress.model';
@Injectable({
providedIn: 'root'
})
export class DataExportService {
- constructor(public datalakeRestService: DatalakeRestService) {
+ public updateDownloadProgress: EventEmitter<DownloadProgress> = new EventEmitter();
+
+ constructor(public dataLakeRestService: DatalakeRestService,
+ public dataViewQueryGeneratorService: DataViewQueryGeneratorService) {
}
- downloadData(exportConfig: ExportConfig) {
+ public downloadData(exportConfig: ExportConfig,
+ dataDownloadDialogModel: DataDownloadDialogModel) {
+
+ let downloadRequest;
+
+ if (exportConfig.dataExportConfig.dataRangeConfiguration === 'visible') {
+ downloadRequest = this.dataLakeRestService.downloadQueriedData(
+ exportConfig.dataExportConfig.measurement,
+ exportConfig.formatExportConfig.exportFormat,
+ exportConfig.formatExportConfig.exportFormat['delimiter'],
+ this.generateQueryRequest(exportConfig, dataDownloadDialogModel));
+ } else {
+ // case for 'all' & 'customInterval'
+ downloadRequest = this.dataLakeRestService.downloadRawData(
+ exportConfig.dataExportConfig.measurement,
+ exportConfig.formatExportConfig.exportFormat,
+ exportConfig.formatExportConfig.exportFormat['delimiter']);
+ }
+
+ downloadRequest.subscribe(event => {
+ let downloadProgress: DownloadProgress;
+ // progress
+ if (event.type === HttpEventType.DownloadProgress) {
+ downloadProgress = {
+ downloadedMBs: event.loaded / 1024 / 1014,
+ finished: false,
+ };
+ this.updateDownloadProgress.emit(downloadProgress);
+ }
+
+ // finished
+ if (event.type === HttpEventType.Response) {
+ // this.createFile(event.body, this.downloadFormat, this.measureName, startDate, endDate);
+ downloadProgress = {
+ downloadedMBs: event.loaded / 1024 / 1014,
+ finished: true,
+ };
+ this.updateDownloadProgress.emit(downloadProgress);
+ }
+ });
+
// const index = !this.dataExplorerDataConfig ?
// this.measureName : this.dataExplorerDataConfig.sourceConfigs[this.selectedQueryIndex].measureName;
@@ -38,62 +83,110 @@ export class DataExportService {
// const endTime = this.date.endDate.getTime();
// const startDateString = this.getDateString(this.date.startDate);
// const endDateString = this.getDateString(this.date.endDate);
- switch (exportConfig.dataExportConfig.dataRangeConfiguration) {
- case 'all':
- this.performRequest(this.datalakeRestService.downloadRawData(
- exportConfig.dataExportConfig.measurement,
- exportConfig.formatExportConfig.exportFormat,
- exportConfig.formatExportConfig.exportFormat['delimiter']),
- '',
- '');
- break;
- case 'customInterval':
- this.performRequest(this.datalakeRestService.downloadRawData(
- index,
- this.downloadFormat,
- this.delimiter,
- startTime,
- endTime), startDateString,
- endDateString);
- break;
- case 'visible':
- this.performRequest(
- this.datalakeRestService
- .downloadQueriedData(
- index,
- this.downloadFormat,
- this.delimiter,
- this.generateQueryRequest(startTime, endTime)
- ),
- startDateString,
- endDateString
- );
- }
+ // this.performRequest(
+ // this.datalakeRestService.downloadRawData(
+ // exportConfig.dataExportConfig.measurement,
+ // exportConfig.formatExportConfig.exportFormat,
+ // exportConfig.formatExportConfig.exportFormat['delimiter']),
+ // '',
+ // '');
+ // this.performRequest(
+ // this.datalakeRestService
+ // .downloadQueriedData(
+ // index,
+ // this.downloadFormat,
+ // this.delimiter,
+ // this.generateQueryRequest(startTime, endTime)
+ // ),
+ // startDateString,
+ // endDateString
+ // );
+ // this.performRequest(
+ // this.datalakeRestService.downloadRawData(
+ // exportConfig.dataExportConfig.measurement,
+ // exportConfig.formatExportConfig.exportFormat,
+ // exportConfig.formatExportConfig.exportFormat['delimiter']),
+ // exportConfig.dataExportConfig.dateRange.startDate,
+ // exportConfig.dataExportConfig.dateRange.endDate),
+ // this.getDateString(exportConfig.dataExportConfig.dateRange.startDate),
+ // this.getDateString(exportConfig.dataExportConfig.dateRange.endDate);
+ // )
+ // ;
+ // break;
+ // case 'visible':
+ // this.performRequest(
+ // this.datalakeRestService
+ // .downloadQueriedData(
+ // index,
+ // this.downloadFormat,
+ // this.delimiter,
+ // this.generateQueryRequest(startTime, endTime)
+ // ),
+ // startDateString,
+ // endDateString
+ // );
+
}
- generateQueryRequest(startTime: number,
- endTime: number): DatalakeQueryParameters {
- return this.dataViewQueryService
- .generateQuery(startTime, endTime, this.dataExplorerDataConfig.sourceConfigs[this.selectedQueryIndex]);
+ // TODO how to set the selected Query Index
+ private generateQueryRequest(
+ exportConfig: ExportConfig,
+ dataDownloadDialogModel: DataDownloadDialogModel,
+ selectedQueryIndex: number = 0): DatalakeQueryParameters {
+ return this.dataViewQueryGeneratorService
+ .generateQuery(
+ exportConfig.dataExportConfig.dateRange.startDate.getTime(),
+ exportConfig.dataExportConfig.dateRange.startDate.getTime(),
+ dataDownloadDialogModel.dataExplorerDataConfig.sourceConfigs[selectedQueryIndex]);
}
- performRequest(request, startDate, endDate) {
- this.downloadHttpRequestSubscription = request.subscribe(event => {
- // progress
- if (event.type === HttpEventType.DownloadProgress) {
- this.downloadedMBs = event.loaded / 1024 / 1014;
- }
+ // performRequest(request, startDate, endDate) {
+ // const downloadHttpRequestSubscription = request.subscribe(event => {
+ // let downloadProgress: DownloadProgress;
+ // // progress
+ // if (event.type === HttpEventType.DownloadProgress) {
+ // downloadProgress = {
+ // downloadedMBs: event.loaded / 1024 / 1014,
+ // finished: false,
+ // };
+ // // this.downloadedMBs = event.loaded / 1024 / 1014;
+ // }
+ //
+ // // finished
+ // if (event.type === HttpEventType.Response) {
+ // // this.createFile(event.body, this.downloadFormat, this.measureName, startDate, endDate);
+ // downloadProgress = {
+ // finished: true,
+ // };
+ //
+ // // this.downloadFinish = true;
+ // }
+ // });
+ // }
+
+
+ private createFile(data, format, fileName, startDate, endDate, downloadFormat) {
+ const a = document.createElement('a');
+ document.body.appendChild(a);
+ a.style.display = 'display: none';
- // finished
- if (event.type === HttpEventType.Response) {
- this.createFile(event.body, this.downloadFormat, this.measureName, startDate, endDate);
- this.downloadFinish = true;
- }
- });
+ let name = 'sp_' + startDate + '_' + fileName + '.' + downloadFormat;
+ name = name.replace('__', '_');
+
+ const url = window.URL.createObjectURL(new Blob([String(data)], {type: 'data:text/' + format + ';charset=utf-8'}));
+ a.href = url;
+ a.download = name;
+ a.click();
+ window.URL.revokeObjectURL(url);
+ }
+
+ private getDateString(date: Date): string {
+ return date.toLocaleDateString() + 'T' + date.toLocaleTimeString().replace(':', '.')
+ .replace(':', '.');
}
- convertData(data, format, xAxesKey, yAxesKeys) {
+ private convertData(data, format, xAxesKey, yAxesKeys) {
const indexXKey = data.headers.findIndex(headerName => headerName === xAxesKey);
const indicesYKeys = [];
yAxesKeys.forEach(key => {
@@ -143,25 +236,4 @@ export class DataExportService {
}
}
- createFile(data, format, fileName, startDate, endDate) {
- const a = document.createElement('a');
- document.body.appendChild(a);
- a.style.display = 'display: none';
-
- let name = 'sp_' + startDate + '_' + fileName + '.' + this.downloadFormat;
- name = name.replace('__', '_');
-
- const url = window.URL.createObjectURL(new Blob([String(data)], {type: 'data:text/' + format + ';charset=utf-8'}));
- a.href = url;
- a.download = name;
- a.click();
- window.URL.revokeObjectURL(url);
- }
-
- getDateString(date: Date): string {
- return date.toLocaleDateString() + 'T' + date.toLocaleTimeString().replace(':', '.')
- .replace(':', '.');
- }
-
-
}