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/02 13:55:47 UTC
[incubator-streampipes] branch STREAMPIPES-79 updated: Add time
selector component
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 8d9610d Add time selector component
8d9610d is described below
commit 8d9610dc37b04b960b629dc6e62c9c63e404fcb8
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Mon Mar 2 14:55:22 2020 +0100
Add time selector component
---
ui/package.json | 1 +
ui/src/app/core-model/datalake/DateRange.ts | 35 +++++++++++
.../data-explorer-dashboard-panel.component.ts | 6 +-
.../time-selector/timeRangeSelector.component.css | 17 ++++++
.../time-selector/timeRangeSelector.component.html | 53 +++++++++++++++++
.../time-selector/timeRangeSelector.component.ts | 68 ++++++++++++++++++++++
.../widgets/base/base-data-explorer-widget.ts | 34 +++++------
.../data-explorer-v2.component.html | 17 +++---
.../data-explorer-v2/data-explorer-v2.module.ts | 2 +
ui/src/scss/main.scss | 1 +
10 files changed, 207 insertions(+), 27 deletions(-)
diff --git a/ui/package.json b/ui/package.json
index 8793bd4..558dae5 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -99,6 +99,7 @@
"systemjs": "^0.21.6",
"trix": "0.10.1",
"tslib": "^1.11.1",
+ "ng-pick-datetime": "^7.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
diff --git a/ui/src/app/core-model/datalake/DateRange.ts b/ui/src/app/core-model/datalake/DateRange.ts
new file mode 100644
index 0000000..36bec0c
--- /dev/null
+++ b/ui/src/app/core-model/datalake/DateRange.ts
@@ -0,0 +1,35 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { RdfsClass } from '../../platform-services/tsonld/RdfsClass';
+import { RdfProperty } from '../../platform-services/tsonld/RdfsProperty';
+
+@RdfsClass('sp:DateRange')
+export class DateRange {
+
+ @RdfProperty('sp:startDate')
+ public startDate: Date;
+
+ @RdfProperty('sp:endDate')
+ public endDate: Date;
+
+ constructor(startDate: Date, endDate: Date) {
+ this.startDate = startDate;
+ this.endDate = endDate;
+ }
+}
diff --git a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.ts
index eb1a024..e9681e0 100644
--- a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.ts
+++ b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.ts
@@ -19,12 +19,12 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable, Subscription } from 'rxjs';
+import { forkJoin } from 'rxjs/internal/observable/forkJoin';
import { DataExplorerWidgetModel } from '../../../core-model/datalake/DataExplorerWidgetModel';
import { DataExplorerAddVisualizationDialogComponent } from '../../dialogs/add-widget/data-explorer-add-visualization-dialog.component';
import { IDataViewDashboard, IDataViewDashboardItem } from '../../models/dataview-dashboard.model';
import { DataViewDataExplorerService } from '../../services/data-view-data-explorer.service';
import { RefreshDashboardService } from '../../services/refresh-dashboard.service';
-import forkJoin = module
@Component({
selector: 'sp-data-explorer-dashboard-panel',
@@ -105,7 +105,7 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
prepareWidgetUpdates(): Array<Observable<any>> {
const promises: Array<Observable<any>> = [];
this.widgetsToUpdate.forEach((widget, key) => {
- promises.push(this.dashboardService.updateWidget(widget));
+ promises.push(this.dataViewDataExplorerService.updateWidget(widget));
});
return promises;
@@ -127,7 +127,7 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
deleteWidgets() {
this.widgetIdsToRemove.forEach(widgetId => {
- this.dashboardService.deleteWidget(widgetId).subscribe();
+ this.dataViewDataExplorerService.deleteWidget(widgetId).subscribe();
});
}
}
diff --git a/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.css b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.css
new file mode 100644
index 0000000..13cbc4a
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.css
@@ -0,0 +1,17 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
diff --git a/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.html b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.html
new file mode 100644
index 0000000..e528332
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.html
@@ -0,0 +1,53 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
+<div flex layout-fill layout="row" layout-align="start center" style="padding-top: 5px;">
+
+ <mat-form-field style="width: 270px; margin-left: 10px; margin-right: 10px;">
+ <mat-label>Start</mat-label>
+ <input matInput
+ [owlDateTime]="dt1"
+ [owlDateTimeTrigger]="dt1"
+ [(ngModel)]="dateRange.startDate"
+ (dateTimeChange)="reloadData()">
+ <mat-icon matSuffix [owlDateTimeTrigger]="dt1" style="color: grey">event</mat-icon>
+ <owl-date-time #dt1></owl-date-time>
+ </mat-form-field>
+ <mat-form-field style="width: 270px; margin-left: 10px; margin-right: 10px;">
+ <mat-label>End</mat-label>
+ <input matInput
+ [owlDateTime]="dt2"
+ [owlDateTimeTrigger]="dt2"
+ [(ngModel)]="dateRange.endDate"
+ (dateTimeChange)="reloadData()">
+ <mat-icon matSuffix [owlDateTimeTrigger]="dt2" style="color: grey">event</mat-icon>
+ <owl-date-time #dt2></owl-date-time>
+ </mat-form-field>
+
+ <button mat-raised-button
+ *ngFor="let item of possibleTimeButtons"
+ [color]="selectedTimeButton.value === item.value ? 'primary' : ''"
+ (click)="this.setCurrentDateRange(item)">{{item.value}}</button>
+
+
+ <button mat-icon-button class="icon" style="margin-left: 5px" color="primary">
+ <mat-icon style="font-size: 30px;height: 30px; width: 30px; padding-top: 3px" (click)="reloadData()">autorenew</mat-icon>
+ </button>
+
+
+</div>
diff --git a/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.ts b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.ts
new file mode 100644
index 0000000..154353c
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.ts
@@ -0,0 +1,68 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Component, EventEmitter, OnInit, Output } from "@angular/core";
+import { DateRange } from '../../../core-model/datalake/DateRange';
+
+@Component({
+ selector: 'sp-time-range-selector',
+ templateUrl: 'timeRangeSelector.component.html',
+ styleUrls: ['./timeRangeSelector.component.css']
+})
+export class TimeRangeSelectorComponent implements OnInit {
+
+ // [0] start, [1] end
+ @Output()
+ dateRangeEmitter = new EventEmitter<DateRange>();
+
+ public dateRange: DateRange;
+
+ public possibleTimeButtons = [
+ {value: '15 min', offset: 15},
+ {value: '1 hour', offset: 60},
+ {value: '1 day', offset: 1440},
+ {value: '1 week', offset: 10080},
+ {value: '1 month', offset: 43800},
+ {value: '1 year', offset: 525600},
+ {value: 'custom', offset: -1},
+ ];
+
+ public selectedTimeButton;
+
+ constructor() {
+ }
+
+ ngOnInit() {
+ this.selectedTimeButton = this.possibleTimeButtons[0];
+ this.setCurrentDateRange(this.selectedTimeButton);
+ }
+
+ reloadData() {
+ this.dateRangeEmitter.emit(this.dateRange);
+ }
+
+ /**
+ * Sets the current date range from now to the value of offset in the past
+ * @param offset in minutes
+ */
+ setCurrentDateRange(item) {
+ this.selectedTimeButton = item;
+ const current = new Date();
+ this.dateRange = new DateRange(new Date(current.getTime() - item.offset * 60000), current);
+ }
+}
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 0ea1c49..9564ed6 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
@@ -57,23 +57,23 @@ export abstract class BaseDataExplorerWidget implements OnChanges, OnInit, OnDes
}
prepareConfigExtraction() {
- const extractor: StaticPropertyExtractor = new StaticPropertyExtractor(
- this.widgetConfig.dashboardWidgetDataConfig.schema, this.widgetConfig.dashboardWidgetSettings.config);
- if (extractor.hasStaticProperty(WidgetConfigBuilder.BACKGROUND_COLOR_KEY)) {
- this.hasSelectableColorSettings = true;
- this.selectedBackgroundColor = extractor.selectedColor(WidgetConfigBuilder.BACKGROUND_COLOR_KEY);
- this.selectedPrimaryTextColor = extractor.selectedColor(WidgetConfigBuilder.PRIMARY_TEXT_COLOR_KEY);
- this.selectedSecondaryTextColor = extractor.selectedColor(WidgetConfigBuilder.SECONDARY_TEXT_COLOR_KEY);
- } else {
- this.selectedBackgroundColor = this.defaultBackgroundColor;
- this.selectedPrimaryTextColor = this.defaultPrimaryTextColor;
- this.selectedSecondaryTextColor = this.defaultSecondaryTextColor;
- }
- if (extractor.hasStaticProperty(WidgetConfigBuilder.TITLE_KEY)) {
- this.hasTitlePanelSettings = true;
- this.selectedTitle = extractor.stringParameter(WidgetConfigBuilder.TITLE_KEY);
- }
- this.extractConfig(extractor);
+ // const extractor: StaticPropertyExtractor = new StaticPropertyExtractor(
+ // this.widgetConfig.dashboardWidgetDataConfig.schema, this.widgetConfig.dashboardWidgetSettings.config);
+ // if (extractor.hasStaticProperty(WidgetConfigBuilder.BACKGROUND_COLOR_KEY)) {
+ // this.hasSelectableColorSettings = true;
+ // this.selectedBackgroundColor = extractor.selectedColor(WidgetConfigBuilder.BACKGROUND_COLOR_KEY);
+ // this.selectedPrimaryTextColor = extractor.selectedColor(WidgetConfigBuilder.PRIMARY_TEXT_COLOR_KEY);
+ // this.selectedSecondaryTextColor = extractor.selectedColor(WidgetConfigBuilder.SECONDARY_TEXT_COLOR_KEY);
+ // } else {
+ // this.selectedBackgroundColor = this.defaultBackgroundColor;
+ // this.selectedPrimaryTextColor = this.defaultPrimaryTextColor;
+ // this.selectedSecondaryTextColor = this.defaultSecondaryTextColor;
+ // }
+ // if (extractor.hasStaticProperty(WidgetConfigBuilder.TITLE_KEY)) {
+ // this.hasTitlePanelSettings = true;
+ // this.selectedTitle = extractor.stringParameter(WidgetConfigBuilder.TITLE_KEY);
+ // }
+ // this.extractConfig(extractor);
}
ngOnDestroy(): void {
diff --git a/ui/src/app/data-explorer-v2/data-explorer-v2.component.html b/ui/src/app/data-explorer-v2/data-explorer-v2.component.html
index 1319386..81a2d35 100644
--- a/ui/src/app/data-explorer-v2/data-explorer-v2.component.html
+++ b/ui/src/app/data-explorer-v2/data-explorer-v2.component.html
@@ -23,10 +23,13 @@
<div fxFlex fxLayoutAlign="start center">
<mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectDashboard($event)">
<mat-tab label="Start"></mat-tab>
- <mat-tab *ngFor="let dataViewDashboard of dataViewDashboards" label="{{dataViewDashboard.name}}"></mat-tab>
+ <!--<mat-tab *ngFor="let dataViewDashboard of dataViewDashboards" label="{{dataViewDashboard.name}}"></mat-tab>-->
</mat-tab-group>
- </div>
- <div fxFlex fxLayoutAlign="end center" class="mr-20">
+
+ <!--</div>-->
+ <!--<div fxFlex fxLayoutAlign="start center" class="mr-20">-->
+ <sp-time-range-selector *ngIf="selectedIndex"></sp-time-range-selector>
+
<button mat-button mat-icon-button color="primary"
*ngIf="selectedIndex > 0" (click)="toggleEditMode()" [disabled]="editMode">
<i class="material-icons">edit</i>
@@ -38,13 +41,13 @@
<div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
<sp-data-explorer-dashboard-overview (selectDashboardEmitter)="openDashboard($event)"
- (reloadDashboardsEmitter)="getDashboards()"
- [dataViewDashboards]="dataViewDashboards"
- *ngIf="!dashboardTabSelected">
+ (reloadDashboardsEmitter)="getDashboards()"
+ [dataViewDashboards]="dataViewDashboards"
+ *ngIf="!dashboardTabSelected">
</sp-data-explorer-dashboard-overview>
<sp-data-explorer-dashboard-panel fxLayout="column" [(editMode)]="editMode" [dashboard]="selectedDataViewDashboard"
- style="height:100%;" *ngIf="dashboardTabSelected">
+ style="height:100%;" *ngIf="dashboardTabSelected">
</sp-data-explorer-dashboard-panel>
</div>
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 3c7ee1e..8e37c01 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
@@ -41,6 +41,7 @@ import { ElementIconText } from '../services/get-element-icon-text.service';
import { DataExplorerDashboardGridComponent } from './components/grid/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';
+import { TimeRangeSelectorComponent } from './components/time-selector/timeRangeSelector.component';
import { DataExplorerDashboardWidgetComponent } from './components/widget/data-explorer-dashboard-widget.component';
import { DataDownloadDialog } from './components/widgets/old-explorer-widget/datadownloadDialog/dataDownload.dialog';
import { OldExplorerComponent } from './components/widgets/old-explorer-widget/old-explorer.component';
@@ -102,6 +103,7 @@ export const MY_NATIVE_FORMATS = {
DataExplorerEditDataViewDialogComponent,
TableWidgetComponent,
DataDownloadDialog,
+ TimeRangeSelectorComponent,
OldExplorerComponent
],
providers: [
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 9200d4f..3e98f84 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -35,6 +35,7 @@
@import '~prismjs/themes/prism.css';
@import '~angular-loading-bar/build/loading-bar.min.css';
@import '~shepherd.js/dist/css/shepherd-theme-default.css';
+@import "~ng-pick-datetime/assets/style/picker.min.css";
@import '../assets/fonts/MaterialIcons-Regular.css';
@import '../assets/fonts/Roboto-Regular.css';