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/07/02 09:27:27 UTC
[incubator-streampipes] 03/03: [STREAMPIPES-145] Refactor edit
timestamp property
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 2c7776e2e5c298db5673ec2892aaea81380496b0
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Thu Jul 2 11:26:46 2020 +0200
[STREAMPIPES-145] Refactor edit timestamp property
---
.../edit-event-property-primitive.component.css | 23 ---------
.../edit-event-property-primitive.component.html | 18 +++----
.../edit-event-property-primitive.component.ts | 35 ++-----------
.../edit-event-property.component.html | 5 +-
.../edit-event-property.component.ts | 19 ++++---
.../edit-timestamp-property.component.css | 23 +--------
.../edit-timestamp-property.component.html | 32 ++++++------
.../edit-timestamp-property.component.ts | 59 ++--------------------
.../connect/new-adapter/new-adapter.component.ts | 1 -
.../semantic-type/semantic-type-utils.service.ts | 18 +++++--
10 files changed, 62 insertions(+), 171 deletions(-)
diff --git a/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.css b/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.css
index 1c1657f..7a945ed 100644
--- a/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.css
+++ b/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.css
@@ -16,29 +16,6 @@
*
*/
-.header {
- border-left: thin;
-}
-.container {
- border: dotted;
-}
.doubleWidth {
width: 370px !important;
}
-.divBorder {
- /* margin: auto; */
- width: 380px;
- /* border: solid #ccc 2px;
- border-radius: 5px; */
-}
-
-.aThirdWidth {
- width: 120px !important;
-}
-.onhover:hover {
- background-color: darkgrey;
-}
-
-::ng-deep .cdk-overlay-pane {
- width: auto !important;
-}
\ No newline at end of file
diff --git a/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.html b/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.html
index 32342a9..4b36ce2 100644
--- a/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.html
+++ b/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.html
@@ -17,9 +17,14 @@
-->
<div class="divBorder">
- <mat-form-field class="doubleWidth">
- <mat-select placeholder="Runtime Type" [(ngModel)]="cachedProperty.runtimeType"
- [disabled]="isTimestampProperty">
+ <sp-edit-timestamp-property
+ *ngIf="isTimestampProperty"
+ [cachedProperty]= "cachedProperty"
+ showEditTimestampProperty="!isTimestampProperty">
+ </sp-edit-timestamp-property>
+
+ <mat-form-field class="doubleWidth" *ngIf="!isTimestampProperty">
+ <mat-select placeholder="Runtime Type" [(ngModel)]="cachedProperty.runtimeType">
<mat-option *ngFor="let dataType of runtimeDataTypes" [value]="dataType.url">
{{ dataType.label }}
</mat-option>
@@ -31,13 +36,8 @@
[showUnitTransformation]="!isTimestampProperty">
</sp-unit-transformation>
- <sp-edit-timestamp-property
- [cachedProperty]= "cachedProperty"
- showEditTimestampProperty="!isTimestampProperty">
- </sp-edit-timestamp-property>
-
<mat-form-field *ngIf="staticValueAddedByUser()" class="doubleWidth">
- <input matInput placeholder="Static Value" name="static_value" id="static_value" [matAutocomplete]="auto"
+ <input matInput placeholder="Static Value" name="static_value" id="static_value"
[(ngModel)]="cachedProperty.staticValue">
</mat-form-field>
diff --git a/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.ts b/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.ts
index 3413491..99ad079 100644
--- a/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.ts
+++ b/ui/src/app/connect/dialog/edit-event-property-primitive/edit-event-property-primitive.component.ts
@@ -16,11 +16,9 @@
*
*/
-import { Component, DoCheck, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
-import { EventProperty } from '../../../core-model/gen/streampipes-model';
import { DataTypesService } from '../../schema-editor/data-type.service';
-import { DomainPropertyProbabilityList } from '../../schema-editor/model/DomainPropertyProbabilityList';
@Component({
selector: 'sp-edit-event-property-primitive',
@@ -29,44 +27,21 @@ import { DomainPropertyProbabilityList } from '../../schema-editor/model/DomainP
})
export class EditEventPropertyPrimitiveComponent implements OnInit {
- soTimestamp = 'http://schema.org/DateTime';
-
@Input() cachedProperty: any;
@Input() index: number;
-
- @Input() domainPropertyGuess: DomainPropertyProbabilityList;
- @Input() isEditable: boolean;
-
- @Output() delete: EventEmitter<EventProperty> = new EventEmitter<EventProperty>();
- @Output() addPrimitive: EventEmitter<EventProperty> = new EventEmitter<EventProperty>();
- @Output() addNested: EventEmitter<any> = new EventEmitter<any>();
+ @Input() isTimestampProperty: boolean;
runtimeDataTypes;
- private selectedTimeMultiplier;
- isTimestampProperty: boolean;
-
constructor(private formBuilder: FormBuilder,
- private dataTypeService: DataTypesService) {
- this.dataTypeService = dataTypeService;
-
- this.runtimeDataTypes = this.dataTypeService.getDataTypes();
-
- // Set preselected value
- this.selectedTimeMultiplier = 'second';
+ private dataTypeService: DataTypesService
+ ) {
}
- protected open = false;
-
ngOnInit() {
- this.isTimestampProperty = this.cachedProperty.domainProperties.some(dp => dp === this.soTimestamp);
- // (this.cachedProperty as any).timestampTransformationMultiplier = 1000;
+ this.runtimeDataTypes = this.dataTypeService.getDataTypes();
}
- // ngDoCheck() {
- // (this.cachedProperty as any).propertyNumber = this.index;
- // }
-
staticValueAddedByUser() {
if (this.cachedProperty.elementId.startsWith('http://eventProperty.de/staticValue/')) {
return true;
diff --git a/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.html b/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.html
index cb7962b..6e3cef2 100644
--- a/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.html
+++ b/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.html
@@ -35,7 +35,6 @@
<div class="form-group">
<mat-form-field class="doubleWidth">
- <!-- <input matInput placeholder="Description" name="description" id="description" [(ngModel)]="property.description"> -->
<textarea matInput name="description" placeholder="Description" id="description"
[(ngModel)]="cachedProperty.description" cols="20" rows="2"></textarea>
</mat-form-field>
@@ -48,7 +47,7 @@
</mat-form-field>
<div *ngIf="!isEventPropertyNested">
<mat-checkbox name="timestampCheckbox"
- (change)="addTimestampDomainProperty()" [checked]="isTimestampProperty">
+ (change)="editTimestampDomainProperty($event.checked)" [checked]="isTimestampProperty">
Mark as timestamp
</mat-checkbox>
</div>
@@ -57,7 +56,7 @@
<div *ngIf="isEventPropertyPrimitive">
<sp-edit-event-property-primitive
- [isEditable]="isEditable"
+ [isTimestampProperty]="isTimestampProperty"
[cachedProperty]="cachedProperty">
</sp-edit-event-property-primitive>
</div>
diff --git a/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts b/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
index 9e15af2..2d86157 100644
--- a/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
+++ b/ui/src/app/connect/dialog/edit-event-property/edit-event-property.component.ts
@@ -25,6 +25,7 @@ import {
EventPropertyPrimitive,
EventPropertyUnion
} from '../../../core-model/gen/streampipes-model';
+import { SemanticTypeUtilsService } from '../../../core-services/semantic-type/semantic-type-utils.service';
import { DataTypesService } from '../../schema-editor/data-type.service';
@@ -55,7 +56,8 @@ export class EditEventPropertyComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data: any,
private dialogRef: MatDialogRef<EditEventPropertyComponent>,
private formBuilder: FormBuilder,
- private dataTypeService: DataTypesService) {
+ private dataTypeService: DataTypesService,
+ private semanticTypeUtilsService: SemanticTypeUtilsService) {
}
ngOnInit(): void {
@@ -63,7 +65,7 @@ export class EditEventPropertyComponent implements OnInit {
this.isEditable = this.data.isEditable;
this.cachedProperty = this.copyEp(this.property);
this.runtimeDataTypes = this.dataTypeService.getDataTypes();
- this.isTimestampProperty = this.cachedProperty.domainProperties && this.cachedProperty.domainProperties.some(dp => dp === this.soTimestamp);
+ this.isTimestampProperty = this.semanticTypeUtilsService.isTimestamp(this.cachedProperty);
this.isEventPropertyList = this.property instanceof EventPropertyList;
this.isEventPropertyPrimitive = this.property instanceof EventPropertyPrimitive;
this.isEventPropertyNested = this.property instanceof EventPropertyNested;
@@ -72,7 +74,11 @@ export class EditEventPropertyComponent implements OnInit {
copyEp(ep: EventPropertyUnion) {
if (ep instanceof EventPropertyPrimitive) {
- return EventPropertyPrimitive.fromData(ep as EventPropertyPrimitive, new EventPropertyPrimitive());
+ const result = EventPropertyPrimitive.fromData(ep as EventPropertyPrimitive, new EventPropertyPrimitive());
+ (result as any).timestampTransformationMode = (ep as any).timestampTransformationMode;
+ (result as any).timestampTransformationFormatString = (ep as any).timestampTransformationFormatString;
+ (result as any).timestampTransformationMultiplier = (ep as any).timestampTransformationMultiplier;
+ return result;
} else if (ep instanceof EventPropertyNested) {
return EventPropertyNested.fromData(ep as EventPropertyNested, new EventPropertyNested());
} else {
@@ -94,12 +100,13 @@ export class EditEventPropertyComponent implements OnInit {
return (this.property.elementId.startsWith('http://eventProperty.de/staticValue/'));
}
- addTimestampDomainProperty() {
- if (!this.isTimestampProperty) {
+ editTimestampDomainProperty(checked: boolean) {
+ if (checked) {
this.isTimestampProperty = true;
this.cachedProperty.domainProperties = [this.soTimestamp];
} else {
- this.isTimestampProperty = this.cachedProperty.domainProperties.some(dp => dp === this.soTimestamp);
+ this.cachedProperty.domainProperties = [];
+ this.isTimestampProperty = false;
}
}
diff --git a/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.css b/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.css
index 1c1657f..a35e130 100644
--- a/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.css
+++ b/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.css
@@ -16,29 +16,8 @@
*
*/
-.header {
- border-left: thin;
-}
-.container {
- border: dotted;
-}
.doubleWidth {
+ margin-right: 10px;
width: 370px !important;
}
-.divBorder {
- /* margin: auto; */
- width: 380px;
- /* border: solid #ccc 2px;
- border-radius: 5px; */
-}
-
-.aThirdWidth {
- width: 120px !important;
-}
-.onhover:hover {
- background-color: darkgrey;
-}
-::ng-deep .cdk-overlay-pane {
- width: auto !important;
-}
\ No newline at end of file
diff --git a/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.html b/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.html
index 39327e1..aaf84ea 100644
--- a/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.html
+++ b/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.html
@@ -16,27 +16,25 @@
~
-->
-<div fxLayout="row" fxLayoutAlign="start" *ngIf="isTimestampProperty">
- <div class="form-group" fxFlexAlign="center">
- <mat-form-field [class.example-full-width]="cachedProperty.timestampTransformationMode !== undefined "
- style="margin-right: 10px" [class.doubleWidth]="cachedProperty.timestampTransformationMode === undefined"
- [class.aThirdWidth]="selectedTimeMultiplier === 'custom' && cachedProperty.timestampTransformationMode === 'timeUnit'">
- <mat-select placeholder="Timestamp converter (unix timestamp)"
- [(value)]="cachedProperty.timestampTransformationMode">
- <mat-option>None</mat-option>
- <mat-option value="formatString">Date String</mat-option>
- <mat-option value="timeUnit">Date Number</mat-option>
- </mat-select>
- </mat-form-field>
- </div>
+<div fxLayout="row" fxLayoutAlign="start">
+ <mat-form-field class="doubleWidth">
+ <mat-select placeholder="Timestamp converter (unix timestamp)"
+ [(value)]="cachedProperty.timestampTransformationMode">
+ <mat-option value="none">None</mat-option>
+ <mat-option value="formatString">Date String</mat-option>
+ <mat-option value="timeUnit">Date Number</mat-option>
+ </mat-select>
+ </mat-form-field>
+</div>
+
+
+<div fxLayout="row" fxLayoutAlign="start">
<div class="form-group" fxFlexAlign="center">
- <mat-form-field *ngIf="cachedProperty.timestampTransformationMode === 'formatString'">
+ <mat-form-field class="doubleWidth" *ngIf="cachedProperty.timestampTransformationMode === 'formatString'">
<input matInput placeholder="E.g. yyyy-MM-dd HH:mm:ss.SSSZ"
[(ngModel)]="cachedProperty.timestampTransformationFormatString">
</mat-form-field>
- <mat-form-field *ngIf="cachedProperty.timestampTransformationMode === 'timeUnit'"
- [class.example-full-width]="selectedTimeMultiplier !== 'custom'"
- [class.aThirdWidth]="selectedTimeMultiplier === 'custom'">
+ <mat-form-field class="doubleWidth" *ngIf="cachedProperty.timestampTransformationMode === 'timeUnit'">
<mat-select placeholder="Current time unit" [(value)]="selectedTimeMultiplier">
<mat-option value="milliseconds" (click)="cachedProperty.timestampTransformationMultiplier = 0">
Milliseconds</mat-option>
diff --git a/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.ts b/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.ts
index 8e0b46b..6d6d5a7 100644
--- a/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.ts
+++ b/ui/src/app/connect/dialog/edit-timestamp-property/edit-timestamp-property.component.ts
@@ -16,76 +16,23 @@
*
*/
-import { Component, DoCheck, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { EventProperty } from '../../../core-model/gen/streampipes-model';
-import { ShepherdService } from '../../../services/tour/shepherd.service';
-import { RestService } from '../../rest.service';
-import { DataTypesService } from '../../schema-editor/data-type.service';
-import { DomainPropertyProbabilityList } from '../../schema-editor/model/DomainPropertyProbabilityList';
-import { UnitProviderService } from '../../schema-editor/unit-provider.service';
+import { Component, Input } from '@angular/core';
@Component({
selector: 'sp-edit-timestamp-property',
templateUrl: './edit-timestamp-property.component.html',
styleUrls: ['./edit-timestamp-property.component.css']
})
-export class EditTimestampPropertyComponent implements OnInit, DoCheck {
-
- soTimestamp = 'http://schema.org/DateTime';
+export class EditTimestampPropertyComponent {
@Input() cachedProperty: any;
@Input() showEditTimestampProperty: boolean;
- @Input() index: number;
-
- @Input() domainPropertyGuess: DomainPropertyProbabilityList;
- @Input() isEditable: boolean;
-
- @Output() delete: EventEmitter<EventProperty> = new EventEmitter<EventProperty>();
- @Output() addPrimitive: EventEmitter<EventProperty> = new EventEmitter<EventProperty>();
- @Output() addNested: EventEmitter<any> = new EventEmitter<any>();
-
- runtimeDataTypes;
-
private selectedTimeMultiplier;
- isTimestampProperty: boolean;
-
-
-
- constructor(private formBuilder: FormBuilder,
- private dataTypeService: DataTypesService,
- private ShepherdService: ShepherdService,
- private restService: RestService,
- private unitProviderService: UnitProviderService) {
- this.dataTypeService = dataTypeService;
-
- this.runtimeDataTypes = this.dataTypeService.getDataTypes();
+ constructor() {
// Set preselected value
this.selectedTimeMultiplier = 'second';
}
- protected open = false;
- subscription: Subscription;
-
-
- ngOnInit() {
- this.isTimestampProperty = this.cachedProperty.domainProperties.some(dp => dp === this.soTimestamp);
- (this.cachedProperty as any).timestampTransformationMultiplier = 1000;
- }
-
- ngDoCheck() {
- (this.cachedProperty as any).propertyNumber = this.index;
- }
-
- staticValueAddedByUser() {
- if (this.cachedProperty.elementId.startsWith('http://eventProperty.de/staticValue/')) {
- return true;
- } else {
- return false;
- }
- }
-
}
diff --git a/ui/src/app/connect/new-adapter/new-adapter.component.ts b/ui/src/app/connect/new-adapter/new-adapter.component.ts
index cedc155..58d0fe3 100644
--- a/ui/src/app/connect/new-adapter/new-adapter.component.ts
+++ b/ui/src/app/connect/new-adapter/new-adapter.component.ts
@@ -299,7 +299,6 @@ export class NewAdapterComponent implements OnInit, AfterViewInit {
guessEventSchema() {
const eventSchema: EventSchema = this.getEventSchema(this.adapter);
- console.log(eventSchema);
if (eventSchema.eventProperties.length === 0) {
this.eventSchemaComponent.guessSchema();
} else {
diff --git a/ui/src/app/core-services/semantic-type/semantic-type-utils.service.ts b/ui/src/app/core-services/semantic-type/semantic-type-utils.service.ts
index 7bcf5c6..12294cd 100644
--- a/ui/src/app/core-services/semantic-type/semantic-type-utils.service.ts
+++ b/ui/src/app/core-services/semantic-type/semantic-type-utils.service.ts
@@ -16,21 +16,31 @@
*
*/
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
+import { EventProperty } from '../../core-model/gen/streampipes-model';
@Injectable()
export class SemanticTypeUtilsService {
- private IMAGE_TYPE: string = 'http://schema.org/DateTime';
+ public TIMESTAMP = 'http://schema.org/DateTime';
+ public IMAGE = 'https://image.com';
constructor() {
}
public getValue(inputValue, semanticType) {
- if (semanticType === this.IMAGE_TYPE) {
+ if (semanticType === this.TIMESTAMP) {
return new Date(inputValue).toLocaleString() ;
} else {
return inputValue;
}
}
-}
\ No newline at end of file
+
+ public isTimestamp(property: EventProperty): boolean {
+ return property.domainProperties.includes(this.TIMESTAMP);
+ }
+
+ public is(property: EventProperty, uri: string): boolean {
+ return property.domainProperties.includes(uri);
+ }
+}