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 2020/03/07 08:44:00 UTC
[incubator-streampipes] branch STREAMPIPES-79 updated: Create
components for loading spinner and no data
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-79
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-79 by this push:
new cc48912 Create components for loading spinner and no data
cc48912 is described below
commit cc4891204456009db0e99776d4bfb132dd25ae74
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Sat Mar 7 09:43:05 2020 +0100
Create components for loading spinner and no data
---
.../widgets/base/base-data-explorer-widget.ts | 15 ++++++++++++++-
.../widgets/table/table-widget.component.html | 6 +++++-
.../widgets/table/table-widget.component.ts | 13 ++++++++++---
.../load-data-spinner/load-data-spinner.component.css | 0
.../load-data-spinner.component.html | 8 ++++++++
.../load-data-spinner/load-data-spinner.component.ts | 15 +++++++++++++++
.../utils/no-data/no-data-in-date-range.component.css | 0
.../no-data/no-data-in-date-range.component.html | 10 ++++++++++
.../utils/no-data/no-data-in-date-range.component.ts | 19 +++++++++++++++++++
.../app/data-explorer-v2/data-explorer-v2.module.ts | 9 ++++++---
10 files changed, 87 insertions(+), 8 deletions(-)
diff --git a/ui/src/app/data-explorer-v2/components/widgets/base/base-data-explorer-widget.ts b/ui/src/app/data-explorer-v2/components/widgets/base/base-data-explorer-widget.ts
index 39cae64..2107df3 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/base/base-data-explorer-widget.ts
+++ b/ui/src/app/data-explorer-v2/components/widgets/base/base-data-explorer-widget.ts
@@ -41,8 +41,21 @@ export abstract class BaseDataExplorerWidget {
@Input() dataViewDashboardItem: IDataViewDashboardItem;
@Input() dataExplorerWidget: DataExplorerWidgetModel;
- removeWidget() {
+ public showNoDataInDateRange: boolean;
+ public showData: boolean;
+ public showIsLoadingData: boolean;
+
+
+ public removeWidget() {
this.removeWidgetCallback.emit(true);
}
+ public setShownComponents(showNoDataInDateRange: boolean,
+ showData: boolean, showIsLoadingData: boolean) {
+
+ this.showNoDataInDateRange = showNoDataInDateRange;
+ this.showData = showData;
+ this.showIsLoadingData = showIsLoadingData;
+ }
+
}
diff --git a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.html b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.html
index 8b6aaf8..75ef366 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.html
+++ b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.html
@@ -50,8 +50,12 @@
<div style=" overflow-y: auto;" [style.max-height.px]="gridsterItem.rows * 100 - 40">
- <table mat-table [dataSource]="dataSource" matSort>
+ <sp-load-data-spinner *ngIf="showIsLoadingData"></sp-load-data-spinner>
+
+ <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="viewDateRange"></sp-no-data-in-date-range>
+
+ <table *ngIf="showData" mat-table [dataSource]="dataSource" matSort>
<ng-container *ngFor="let element of this.selectedColumns" [cdkColumnDef]="element">
<th mat-header-cell *matHeaderCellDef mat-sort-header><label style="font-size: large">{{element}}</label></th>
<td mat-cell *matCellDef="let row">{{row[element]}}</td>
diff --git a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.ts b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.ts
index f846ca6..3a95308 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.ts
+++ b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.ts
@@ -51,6 +51,8 @@ export class TableWidgetComponent extends BaseDataExplorerWidget implements OnIn
}
updateData() {
+ this.setShownComponents(false, false, true);
+
this.dataLakeRestService.getDataAutoAggergation(
this.dataExplorerWidget.measureName, this.viewDateRange.startDate.getTime(), this.viewDateRange.endDate.getTime()).subscribe(
(res: DataResult) => {
@@ -62,9 +64,14 @@ export class TableWidgetComponent extends BaseDataExplorerWidget implements OnIn
transformData(data: DataResult) {
const result = [];
- data.rows.forEach(row =>
- result.push(this.createTableObject(data.headers, row))
- );
+ if (data.total === 0) {
+ this.setShownComponents(true, false, false);
+ } else {
+ data.rows.forEach(row =>
+ result.push(this.createTableObject(data.headers, row))
+ );
+ this.setShownComponents(false, true, false);
+ }
return result;
}
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/load-data-spinner/load-data-spinner.component.css b/ui/src/app/data-explorer-v2/components/widgets/utils/load-data-spinner/load-data-spinner.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/load-data-spinner/load-data-spinner.component.html b/ui/src/app/data-explorer-v2/components/widgets/utils/load-data-spinner/load-data-spinner.component.html
new file mode 100644
index 0000000..ffe66fb
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/load-data-spinner/load-data-spinner.component.html
@@ -0,0 +1,8 @@
+<div fxLayout="column" fxLayoutAlign="space-around center" >
+ <div fxLayout="row" fxLayoutAlign="center center" style="margin-top: 30px">
+ <mat-spinner></mat-spinner>
+ </div>
+ <div fxLayout="row" fxLayoutAlign="center center" style="margin-top: 30px">
+ <h3>Loading Data</h3>
+ </div>
+</div>
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/load-data-spinner/load-data-spinner.component.ts b/ui/src/app/data-explorer-v2/components/widgets/utils/load-data-spinner/load-data-spinner.component.ts
new file mode 100644
index 0000000..bf60055
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/load-data-spinner/load-data-spinner.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'sp-load-data-spinner',
+ templateUrl: './load-data-spinner.component.html',
+ styleUrls: ['./load-data-spinner.component.css']
+})
+export class LoadDataSpinnerComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/no-data/no-data-in-date-range.component.css b/ui/src/app/data-explorer-v2/components/widgets/utils/no-data/no-data-in-date-range.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/no-data/no-data-in-date-range.component.html b/ui/src/app/data-explorer-v2/components/widgets/utils/no-data/no-data-in-date-range.component.html
new file mode 100644
index 0000000..35e21e6
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/no-data/no-data-in-date-range.component.html
@@ -0,0 +1,10 @@
+<div fxLayout="column" fxLayoutAlign="space-around center" >
+
+ <div fxLayout="row" fxLayoutAlign="center center" style="margin-top: 30px">
+ <!-- TODO Icon -->
+ </div>
+ <div fxLayout="row" fxLayoutAlign="center center" style="margin-top: 30px">
+ <h3>Found no data in selected time range ({{viewDateRange.startDate | date:'MM/dd/yyyy HH:mm'}} - {{viewDateRange.endDate | date:'MM/dd/yyyy HH:mm'}})</h3>
+
+ </div>
+</div>
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/no-data/no-data-in-date-range.component.ts b/ui/src/app/data-explorer-v2/components/widgets/utils/no-data/no-data-in-date-range.component.ts
new file mode 100644
index 0000000..96ad658
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/no-data/no-data-in-date-range.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DateRange } from '../../../../../core-model/datalake/DateRange';
+
+@Component({
+ selector: 'sp-no-data-in-date-range',
+ templateUrl: './no-data-in-date-range.component.html',
+ styleUrls: ['./no-data-in-date-range.component.css']
+})
+export class NoDataInDateRangeComponent implements OnInit {
+
+ @Input()
+ public viewDateRange: DateRange;
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts b/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
index bb10a0f..18eb0f1 100644
--- a/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
+++ b/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
@@ -47,14 +47,15 @@ import { LineChartWidgetComponent } from './components/widgets/line-chart/line-c
import { DataDownloadDialog } from './components/widgets/old-explorer-widget/datadownloadDialog/dataDownload.dialog';
import { OldExplorerComponent } from './components/widgets/old-explorer-widget/old-explorer.component';
import { TableWidgetComponent } from './components/widgets/table/table-widget.component';
+import { LoadDataSpinnerComponent } from './components/widgets/utils/load-data-spinner/load-data-spinner.component';
+import { NoDataInDateRangeComponent } from './components/widgets/utils/no-data/no-data-in-date-range.component';
import { DataExplorerV2Component } from './data-explorer-v2.component';
import { DataExplorerAddVisualizationDialogComponent } from './dialogs/add-widget/data-explorer-add-visualization-dialog.component';
import { DataExplorerEditDataViewDialogComponent } from './dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
+import { DataLakeService } from './services/data-lake.service';
import { DataViewDataExplorerService } from './services/data-view-data-explorer.service';
import { RefreshDashboardService } from './services/refresh-dashboard.service';
import { ResizeService } from './services/resize.service';
-import { DatalakeRestService } from "../core-services/datalake/datalake-rest.service";
-import { DataLakeService } from "./services/data-lake.service";
const dashboardWidgets = [
@@ -108,7 +109,9 @@ export const MY_NATIVE_FORMATS = {
LineChartWidgetComponent,
DataDownloadDialog,
TimeRangeSelectorComponent,
- OldExplorerComponent
+ OldExplorerComponent,
+ NoDataInDateRangeComponent,
+ LoadDataSpinnerComponent
],
providers: [
SharedDatalakeRestService,