You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2021/08/22 14:04:28 UTC
[incubator-streampipes] 01/06: [STREAMPIPES-408] Resolve query
params for time settings in data explorer
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 3d571dc10476e535e836f19e33abd6bb3ac4397b
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Aug 21 12:17:26 2021 +0200
[STREAMPIPES-408] Resolve query params for time settings in data explorer
---
.../time-selector/timeRangeSelector.component.ts | 30 ++++++++++++-----
.../app/data-explorer/data-explorer.component.html | 4 ++-
.../app/data-explorer/data-explorer.component.ts | 39 +++++++++++++++-------
3 files changed, 52 insertions(+), 21 deletions(-)
diff --git a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.ts b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.ts
index 1c509d6..b5e4a61 100644
--- a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.ts
+++ b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.ts
@@ -29,7 +29,7 @@ export class TimeRangeSelectorComponent implements OnInit {
@Output() dateRangeEmitter = new EventEmitter<TimeSettings>();
- @Input() dateRange: TimeSettings;
+ _dateRange: TimeSettings;
startDate: Date;
endDate: Date;
@@ -42,7 +42,7 @@ export class TimeRangeSelectorComponent implements OnInit {
{value: '1 month', offset: 43800},
{value: '1 year', offset: 525600},
{value: 'custom', offset: -1},
- ];
+ ];
public selectedTimeButton;
@@ -50,10 +50,27 @@ export class TimeRangeSelectorComponent implements OnInit {
}
ngOnInit() {
+ if (!this.dateRange.startTime) {
+ this.setCurrentDateRange(this.possibleTimeButtons[0]);
+ }
+ }
+
+ @Input()
+ set dateRange(dateRange: TimeSettings) {
+ this._dateRange = dateRange;
+ this.updateTimeSettings();
+ }
+
+ get dateRange() {
+ return this._dateRange;
+ }
+
+ updateTimeSettings() {
this.startDate = new Date(this.dateRange.startTime);
this.endDate = new Date(this.dateRange.endTime);
this.selectedTimeButton = this.findOffset(this.dateRange.dynamicSelection);
- this.setCurrentDateRange(this.selectedTimeButton);
+ this.reloadData();
+ //this.setCurrentDateRange(this.selectedTimeButton);
}
findOffset(dynamicSelection: number) {
@@ -88,9 +105,8 @@ export class TimeRangeSelectorComponent implements OnInit {
this.startDate = new Date(newStartTime);
this.endDate = new Date(newEndTime);
- this.dateRange = { startTime: newStartTime, endTime: newEndTime, dynamicSelection: -1 };
this.selectedTimeButton = this.possibleTimeButtons[this.possibleTimeButtons.length - 1];
- this.reloadData();
+ this.dateRange = { startTime: newStartTime, endTime: newEndTime, dynamicSelection: -1 };
}
changeCustomDateRange() {
@@ -99,7 +115,6 @@ export class TimeRangeSelectorComponent implements OnInit {
const newEndTime = this.endDate.getTime();
this.dateRange = { startTime: newStartTime, endTime: newEndTime, dynamicSelection: -1 };
- this.reloadData();
}
/**
@@ -111,8 +126,7 @@ export class TimeRangeSelectorComponent implements OnInit {
const current = new Date().getTime();
this.startDate = new Date(current - item.offset * 60000);
this.endDate = new Date(current);
- this.dateRange = { startTime: current - item.offset * 60000, endTime: current, dynamicSelection: item.offset };
- this.reloadData();
+ this.dateRange = { startTime: this.startDate.getTime(), endTime: this.endDate.getTime(), dynamicSelection: item.offset };
}
}
diff --git a/ui/src/app/data-explorer/data-explorer.component.html b/ui/src/app/data-explorer/data-explorer.component.html
index cd3c920..d11635f 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -63,7 +63,9 @@
</button>
</div>
<div class="data-explorer-options-item" fxLayoutAlign="end center" fxFlex fxLayout="row">
- <sp-time-range-selector *ngIf="selectedIndex" (dateRangeEmitter)="updateDateRange($event)" [dateRange]="selectedDataViewDashboard.dashboardTimeSettings"></sp-time-range-selector>
+ <sp-time-range-selector *ngIf="selectedIndex" (dateRangeEmitter)="updateDateRange($event)" [dateRange]="selectedDataViewDashboard.dashboardTimeSettings">
+
+ </sp-time-range-selector>
</div>
<!-- <div class="data-explorer-options-item" fxLayoutAlign="start center" fxLayout="row">-->
<!-- <button mat-button mat-icon-button color="primary"-->
diff --git a/ui/src/app/data-explorer/data-explorer.component.ts b/ui/src/app/data-explorer/data-explorer.component.ts
index 8a1df2e..ac5c66d 100644
--- a/ui/src/app/data-explorer/data-explorer.component.ts
+++ b/ui/src/app/data-explorer/data-explorer.component.ts
@@ -22,6 +22,8 @@ import { RefreshDashboardService } from './services/refresh-dashboard.service';
import { DataExplorerDashboardPanelComponent } from './components/panel/data-explorer-dashboard-panel.component';
import { Dashboard, TimeSettings } from '../dashboard/models/dashboard.model';
import { Tuple2 } from '../core-model/base/Tuple2';
+import { ActivatedRoute } from '@angular/router';
+import { TimeRangeSelectorComponent } from './components/time-selector/timeRangeSelector.component';
@Component({
selector: 'sp-data-explorer',
@@ -37,19 +39,24 @@ export class DataExplorerComponent implements OnInit {
timeRangeVisible = true;
editMode = true;
- gridVisible = true;
-
dataViewDashboards: Dashboard[];
+ routeParams: any;
+
@ViewChild('dashboardPanel') dashboardPanel: DataExplorerDashboardPanelComponent;
constructor(private dataViewService: DataViewDataExplorerService,
- private refreshDashboardService: RefreshDashboardService) {
+ private refreshDashboardService: RefreshDashboardService,
+ private route: ActivatedRoute) {
}
public ngOnInit() {
- this.getDashboards();
+ this.route.queryParams.subscribe(params => {
+ this.routeParams = {startTime: params['startTime'], endTime: params['endTime'], dashboardId: params['dashboardId']};
+ console.log(this.routeParams);
+ this.getDashboards();
+ });
this.refreshDashboardService.refreshSubject.subscribe(currentDashboardId => {
this.getDashboards(currentDashboardId);
});
@@ -74,7 +81,13 @@ export class DataExplorerComponent implements OnInit {
}
applyTimeSettings(dashboard: Dashboard) {
- if (!dashboard.dashboardTimeSettings) {
+ if (this.routeParams.startTime && this.routeParams.endTime) {
+ dashboard.dashboardTimeSettings = {
+ startTime: this.routeParams.startTime * 1,
+ endTime: this.routeParams.endTime * 1,
+ dynamicSelection: -1
+ };
+ } else if (!dashboard.dashboardTimeSettings) {
const currentTime = new Date().getTime();
dashboard.dashboardTimeSettings = {
startTime: currentTime - 100000 * 60000,
@@ -84,13 +97,19 @@ export class DataExplorerComponent implements OnInit {
}
}
+ findAndSelectDashboard(dashboardId: string) {
+ const currentDashboard = this.dataViewDashboards.find(d => d._id === dashboardId);
+ this.selectDashboard(this.dataViewDashboards.indexOf(currentDashboard) + 1);
+ }
+
protected getDashboards(currentDashboardId?: string) {
this.dashboardsLoaded = false;
this.dataViewService.getDataViews().subscribe(data => {
this.dataViewDashboards = data;
if (currentDashboardId) {
- const currentDashboard = this.dataViewDashboards.find(d => d._id === currentDashboardId);
- this.selectDashboard(this.dataViewDashboards.indexOf(currentDashboard) + 1);
+ this.findAndSelectDashboard(currentDashboardId);
+ } else if (this.routeParams.dashboardId) {
+ this.findAndSelectDashboard(this.routeParams.dashboardId);
} else {
this.selectedIndex = 0;
}
@@ -107,11 +126,7 @@ export class DataExplorerComponent implements OnInit {
}
saveDashboard() {
- this.dashboardPanel.updateDashboard(false);
- }
-
- toggleGrid() {
- this.dashboardPanel.toggleGrid(this.gridVisible);
+ this.dashboardPanel.updateDashboard();
}
triggerEditMode() {