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/16 21:52:17 UTC
[incubator-streampipes] branch STREAMPIPES-79 updated: Change
select keys to select properties to display timestamp in table
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 70401ab Change select keys to select properties to display timestamp in table
70401ab is described below
commit 70401abd25386e215aada26df9646b7ae86a51fa
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Mon Mar 16 22:51:32 2020 +0100
Change select keys to select properties to display timestamp in table
---
.../widgets/base/base-data-explorer-widget.ts | 43 ++++++++++++++--------
.../line-chart/line-chart-widget.component.html | 2 +-
.../line-chart/line-chart-widget.component.ts | 19 ++++++----
.../widgets/table/table-widget.component.css | 8 ----
.../widgets/table/table-widget.component.html | 24 ++++++++----
.../widgets/table/table-widget.component.ts | 15 ++++----
.../utils/select-keys/select-keys.component.html | 8 ----
.../utils/select-keys/select-keys.component.ts | 30 ---------------
.../select-properties.component.css} | 0
.../select-properties.component.html | 8 ++++
.../select-properties.component.ts | 29 +++++++++++++++
.../data-explorer-v2/data-explorer-v2.module.ts | 4 +-
12 files changed, 104 insertions(+), 86 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 ae045ab..59d0007 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
@@ -18,14 +18,13 @@
import { EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { GridsterItem, GridsterItemComponent } from 'angular-gridster2';
-import { EventPropertyComponent } from '../../../../connect/schema-editor/event-property/event-property.component';
import { EventProperty } from '../../../../connect/schema-editor/model/EventProperty';
import { EventPropertyPrimitive } from '../../../../connect/schema-editor/model/EventPropertyPrimitive';
import { EventSchema } from '../../../../connect/schema-editor/model/EventSchema';
import { DataExplorerWidgetModel } from '../../../../core-model/datalake/DataExplorerWidgetModel';
import { DateRange } from '../../../../core-model/datalake/DateRange';
-import { IDataViewDashboardItem } from '../../../models/dataview-dashboard.model';
import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
+import { IDataViewDashboardItem } from '../../../models/dataview-dashboard.model';
export abstract class BaseDataExplorerWidget implements OnChanges {
@@ -60,9 +59,9 @@ export abstract class BaseDataExplorerWidget implements OnChanges {
public setShownComponents(showNoDataInDateRange: boolean,
showData: boolean, showIsLoadingData: boolean) {
- this.showNoDataInDateRange = showNoDataInDateRange;
- this.showData = showData;
- this.showIsLoadingData = showIsLoadingData;
+ this.showNoDataInDateRange = showNoDataInDateRange;
+ this.showData = showData;
+ this.showIsLoadingData = showIsLoadingData;
}
ngOnChanges(changes: SimpleChanges) {
@@ -73,47 +72,61 @@ export abstract class BaseDataExplorerWidget implements OnChanges {
public abstract updateData();
getValuePropertyKeys(eventSchema: EventSchema) {
- const propertyKeys: string[] = [];
+ const propertyKeys: EventProperty[] = [];
eventSchema.eventProperties.forEach(p => {
if (p.domainProperty !== 'http://schema.org/DateTime') {
- propertyKeys.push(p.getRuntimeName());
+ propertyKeys.push(p);
}
});
return propertyKeys;
}
- getNumericPropertyKeys(eventSchema: EventSchema) {
- const propertyKeys: string[] = [];
+ getNumericProperty(eventSchema: EventSchema) {
+ const propertyKeys: EventProperty[] = [];
eventSchema.eventProperties.forEach(p => {
if (p.domainProperty !== 'http://schema.org/DateTime' && this.isNumber(p)) {
- propertyKeys.push(p.getRuntimeName());
+ propertyKeys.push(p);
}
});
return propertyKeys;
}
- getTimestampPropertyKey(eventSchema: EventSchema) {
+ getTimestampProperty(eventSchema: EventSchema) {
const propertyKeys: string[] = [];
const result = eventSchema.eventProperties.find(p =>
- p.domainProperty === 'http://schema.org/DateTime'
+ this.isTimestamp(p)
);
- return result.getRuntimeName();
+ return result;
}
isNumber(p: EventProperty): boolean {
return (p instanceof EventPropertyPrimitive &&
((p as EventPropertyPrimitive).runtimeType === 'http://www.w3.org/2001/XMLSchema#number') ||
(p as EventPropertyPrimitive).runtimeType === 'http://www.w3.org/2001/XMLSchema#float') ||
- ((p as EventPropertyPrimitive).runtimeType === 'http://www.w3.org/2001/XMLSchema#double') ||
+ ((p as EventPropertyPrimitive).runtimeType === 'http://www.w3.org/2001/XMLSchema#double') ||
((p as EventPropertyPrimitive).runtimeType === 'http://www.w3.org/2001/XMLSchema#integer')
? true : false;
-}
+ }
+
+ public isTimestamp(p: EventProperty) {
+ return p.domainProperty === 'http://schema.org/DateTime';
+ }
+
+ getRuntimeNames(properties: EventProperty[]): string[] {
+ const result = []
+ properties.forEach(p => {
+ result.push(p.runtimeName);
+ });
+
+ return result;
+ }
+
// updateDataExplorerWidget() {
diff --git a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.html b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.html
index bb60499..d616ff6 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.html
+++ b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.html
@@ -19,7 +19,7 @@
<div fxLayout="column" fxLayoutAlign="stretch">
<div class="assemblyOptions sp-blue-bg m-0 row header h-40" style="margin-left: 0px;margin-right: 0px;margin-top: 0px;">
<div fxFlex="100" layout="row" fxLayoutAlign="end center" style="margin-left: 0px;margin-right: 0px;">
- <sp-select-keys (changeSelectedKeys)="setSelectedColumn($event)" [availableKeys]="availableColumns" [selectedKeys]="yKeys"></sp-select-keys>
+ <sp-select-properties (changeSelectedProperties)="setSelectedColumn($event)" [availableProperties]="availableColumns" [selectedProperties]="selectedColumns"></sp-select-properties>
<button mat-button mat-icon-button color="white" (click)="removeWidget()">
<i class="material-icons">clear</i>
</button>
diff --git a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts
index b424981..2b22ca1 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts
+++ b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts
@@ -16,7 +16,8 @@
*
*/
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { EventProperty } from '../../../../connect/schema-editor/model/EventProperty';
import { DataResult } from '../../../../core-model/datalake/DataResult';
import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
@@ -29,7 +30,8 @@ import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
export class LineChartWidgetComponent extends BaseDataExplorerWidget implements OnInit {
data: any[] = undefined;
- availableColumns: string[] = [];
+ availableColumns: EventProperty[] = [];
+ selectedColumns: EventProperty[] = [];
yKeys: string[] = [];
xKey: string;
@@ -40,12 +42,12 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
ngOnInit(): void {
- this.availableColumns = this.getNumericPropertyKeys(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
- this.xKey = this.getTimestampPropertyKey(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
-
+ this.availableColumns = this.getNumericProperty(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
// Reduce selected columns when more then 6
- this.yKeys = this.availableColumns.length > 6 ? this.availableColumns.slice(0, 5) : this.availableColumns;
+ this.selectedColumns = this.availableColumns.length > 6 ? this.availableColumns.slice(0, 5) : this.availableColumns;
+ this.xKey = this.getTimestampProperty(this.dataExplorerWidget.dataLakeMeasure.eventSchema).runtimeName;
+ this.yKeys = this.getRuntimeNames(this.selectedColumns);
this.updateData();
}
@@ -176,8 +178,9 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
return data;
}
- setSelectedColumn(selectedColumns: string[]) {
- this.yKeys = selectedColumns;
+ setSelectedColumn(selectedColumns: EventProperty[]) {
+ this.selectedColumns = selectedColumns;
+ this.yKeys = this.getRuntimeNames(selectedColumns);
this.updateData();
}
}
diff --git a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.css b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.css
index aafdad6..1986fe3 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.css
+++ b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.css
@@ -16,14 +16,6 @@
*
*/
-.circleNumber {
- width:100%;
- height: 100%;
- text-align: center;
- left: 50%;
- display:inline-grid;
- align-content: center;
-}
.numberItem {
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 d0d068a..dd82bb9 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
@@ -21,7 +21,7 @@
<div fxLayout="column" fxLayoutAlign="stretch">
<div class="assemblyOptionsDataExplorer sp-blue-bg m-0 row header h-40" style="margin-left: 0px;margin-right: 0px;">
<div fxFlex="100" layout="row" fxLayoutAlign="end center" style="margin-left: 0px;margin-right: 0px;">
- <sp-select-keys (changeSelectedKeys)="setSelectedColumn($event)" [availableKeys]="availableColumns" [selectedKeys]="selectedColumns"></sp-select-keys>
+ <sp-select-properties (changeSelectedProperties)="setSelectedColumn($event)" [availableProperties]="availableColumns" [selectedProperties]="selectedColumns"></sp-select-properties>
<button mat-button mat-icon-button color="white" (click)="removeWidget()">
<i class="material-icons">clear</i>
</button>
@@ -34,14 +34,24 @@
<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>
+ <table *ngIf="showData" mat-table [dataSource]="dataSource" matSort >
+ <ng-container *ngFor="let element of this.selectedColumns" [cdkColumnDef]="element.runtimeName">
+
+ <div *ngIf="!isTimestamp(element)">
+ <!-- <td *ngIf="isTimestamp(property)">{{runtimeData[property.properties.runtimeName] | date:'yyyy-MM-dd HH:mm:ss '}}</td>-->
+ <th mat-header-cell *matHeaderCellDef mat-sort-header><label style="font-size: large">{{element.runtimeName}}</label></th>
+ <td mat-cell *matCellDef="let row"style="text-align: center;">{{row[element.runtimeName]}}</td>
+
+ </div>
+ <div *ngIf="isTimestamp(element)">
+ <th mat-header-cell *matHeaderCellDef mat-sort-header><label style="font-size: large">{{element.runtimeName}}</label></th>
+ <td mat-cell *matCellDef="let row"style="text-align: left;">{{row[element.runtimeName]| date:'yyyy-MM-dd HH:mm:ss'}}</td>
+
+ </div>
</ng-container>
- <tr mat-header-row *matHeaderRowDef="this.selectedColumns; sticky: true"></tr>
- <tr mat-row *matRowDef="let row; columns: selectedColumns;"></tr>
+ <tr mat-header-row *matHeaderRowDef="this.columnNames; sticky: true"></tr>
+ <tr mat-row *matRowDef="let row; columns: columnNames;"></tr>
</table>
</div>
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 5fdfd1a..9c0fb99 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
@@ -19,7 +19,7 @@
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
-import { EventSchema } from '../../../../connect/schema-editor/model/EventSchema';
+import { EventProperty } from '../../../../connect/schema-editor/model/EventProperty';
import { DataResult } from '../../../../core-model/datalake/DataResult';
import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
@@ -34,8 +34,9 @@ export class TableWidgetComponent extends BaseDataExplorerWidget implements OnIn
@ViewChild(MatSort, {static: true}) sort: MatSort;
- availableColumns: string[];
- selectedColumns: string[];
+ availableColumns: EventProperty[];
+ selectedColumns: EventProperty[];
+ columnNames: string[];
dataSource = new MatTableDataSource();
@@ -45,18 +46,17 @@ export class TableWidgetComponent extends BaseDataExplorerWidget implements OnIn
ngOnInit(): void {
this.dataSource.sort = this.sort;
- this.availableColumns = [this.getTimestampPropertyKey(this.dataExplorerWidget.dataLakeMeasure.eventSchema)];
+ this.availableColumns = [this.getTimestampProperty(this.dataExplorerWidget.dataLakeMeasure.eventSchema)];
this.availableColumns = this.availableColumns.concat(this.getValuePropertyKeys(this.dataExplorerWidget.dataLakeMeasure.eventSchema));
// Reduce selected columns when more then 6
this.selectedColumns = this.availableColumns.length > 6 ? this.availableColumns.slice(0, 5) : this.availableColumns;
+ this.columnNames = this.getRuntimeNames(this.selectedColumns);
this.updateData();
}
-
-
updateData() {
this.setShownComponents(false, false, true);
@@ -91,8 +91,9 @@ export class TableWidgetComponent extends BaseDataExplorerWidget implements OnIn
return object;
}
- setSelectedColumn(selectedColumns: string[]) {
+ setSelectedColumn(selectedColumns: EventProperty[]) {
this.selectedColumns = selectedColumns;
+ this.columnNames = this.getRuntimeNames(this.selectedColumns);
}
ngOnDestroy(): void {
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/select-keys/select-keys.component.html b/ui/src/app/data-explorer-v2/components/widgets/utils/select-keys/select-keys.component.html
deleted file mode 100644
index 8e4acc2..0000000
--- a/ui/src/app/data-explorer-v2/components/widgets/utils/select-keys/select-keys.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<mat-form-field appearance="outline">
- <mat-label>Select Columns</mat-label>
- <mat-select [ngModel]="this.selectedKeys" (selectionChange)="triggerSelectedKeys($event.value)" multiple>
- <mat-option *ngFor="let column of availableKeys" [value]="column" style="background-color: #FFFFFF">
- {{column}}
- </mat-option>
- </mat-select>
-</mat-form-field>
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/select-keys/select-keys.component.ts b/ui/src/app/data-explorer-v2/components/widgets/utils/select-keys/select-keys.component.ts
deleted file mode 100644
index e8d58ec..0000000
--- a/ui/src/app/data-explorer-v2/components/widgets/utils/select-keys/select-keys.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { GridsterItem } from 'angular-gridster2';
-
-@Component({
- selector: 'sp-select-keys',
- templateUrl: './select-keys.component.html',
- styleUrls: ['./select-keys.component.css']
-})
-export class SelectKeysComponent implements OnInit {
-
- @Output()
- changeSelectedKeys: EventEmitter<string[]> = new EventEmitter();
-
- @Input()
- availableKeys: string[];
-
- @Input()
- selectedKeys: string[];
-
-
- constructor() { }
-
- ngOnInit(): void {
- }
-
- triggerSelectedKeys(keys: string[]) {
- this.changeSelectedKeys.emit(keys);
- }
-
-}
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/select-keys/select-keys.component.css b/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css
similarity index 100%
rename from ui/src/app/data-explorer-v2/components/widgets/utils/select-keys/select-keys.component.css
rename to ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.html b/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.html
new file mode 100644
index 0000000..8d6eaa9
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.html
@@ -0,0 +1,8 @@
+<mat-form-field appearance="outline">
+ <mat-label>Select Columns</mat-label>
+ <mat-select [ngModel]="this.selectedProperties" (selectionChange)="triggerSelectedProperties($event.value)" multiple>
+ <mat-option *ngFor="let column of availableProperties" [value]="column" style="background-color: #FFFFFF">
+ {{column.runtimeName}}
+ </mat-option>
+ </mat-select>
+</mat-form-field>
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.ts b/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.ts
new file mode 100644
index 0000000..f78ab01
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.ts
@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { EventProperty } from '../../../../../connect/schema-editor/model/EventProperty';
+
+@Component({
+ selector: 'sp-select-properties',
+ templateUrl: './select-properties.component.html',
+ styleUrls: ['./select-properties.component.css']
+})
+export class SelectPropertiesComponent implements OnInit {
+
+ @Output()
+ changeSelectedProperties: EventEmitter<EventProperty[]> = new EventEmitter();
+
+ @Input()
+ availableProperties: EventProperty[];
+
+ @Input()
+ selectedProperties: EventProperty[];
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+ triggerSelectedProperties(properties: EventProperty[]) {
+ this.changeSelectedProperties.emit(properties);
+ }
+
+}
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 0f369d1..81bbd05 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
@@ -49,6 +49,7 @@ import { OldExplorerComponent } from './components/widgets/old-explorer-widget/o
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 { SelectPropertiesComponent } from './components/widgets/utils/select-properties/select-properties.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';
@@ -56,7 +57,6 @@ 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 { SelectKeysComponent } from './components/widgets/utils/select-keys/select-keys.component';
const dashboardWidgets = [
@@ -113,7 +113,7 @@ export const MY_NATIVE_FORMATS = {
OldExplorerComponent,
NoDataInDateRangeComponent,
LoadDataSpinnerComponent,
- SelectKeysComponent
+ SelectPropertiesComponent
],
providers: [
SharedDatalakeRestService,