feat(#3033): Support modification of data views

streampipes-model/src/main/java/org/apache/streampipes/model/datalake/DataExplorerWidgetModel.java

@@ -40,6 +40,9 @@ public class DataExplorerWidgetModel extends DashboardEntity {
   @JsonSerialize(using = CustomMapSerializer.class, as = Map.class)
   private Map<String, Object> dataConfig;
 
+  @JsonSerialize(using = CustomMapSerializer.class, as = Map.class)
+  private Map<String, Object> timeSettings;
+
   private String pipelineId;
   private String measureName;
 
@@ -49,6 +52,7 @@ public DataExplorerWidgetModel() {
     this.baseAppearanceConfig = new HashMap<>();
     this.visualizationConfig = new HashMap<>();
     this.dataConfig = new HashMap<>();
+    this.timeSettings = new HashMap<>();
   }
 
   public String getWidgetId() {
@@ -107,4 +111,8 @@ public void setMeasureName(String measureName) {
     this.measureName = measureName;
   }
 
+  public Map<String, Object> getTimeSettings() {
+    return this.timeSettings;
+  }
+
 }

ui/projects/streampipes/platform-services/src/lib/apis/data-view-data-explorer.service.ts

@@ -21,7 +21,6 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Dashboard } from '../model/dashboard/dashboard.model';
 import { Injectable } from '@angular/core';
-import { DatalakeRestService } from './datalake-rest.service';
 import {
     DataExplorerWidgetModel,
     DataLakeMeasure,
@@ -34,32 +33,13 @@ import { SharedDatalakeRestService } from './shared-dashboard.service';
 export class DataViewDataExplorerService {
     constructor(
         private http: HttpClient,
-        private dataLakeRestService: DatalakeRestService,
         private sharedDatalakeRestService: SharedDatalakeRestService,
     ) {}
 
-    getVisualizableData(): Observable<DataLakeMeasure[]> {
-        return this.dataLakeRestService.getAllMeasurementSeries().pipe(
-            map(data => {
-                return (data as any[]).map(d =>
-                    DataLakeMeasure.fromData(d as DataLakeMeasure),
-                );
-            }),
-        );
-    }
-
     getDataViews(): Observable<Dashboard[]> {
         return this.sharedDatalakeRestService.getDashboards(this.dashboardUrl);
     }
 
-    getDataView(dataViewId: string): Observable<Dashboard> {
-        return this.http.get(this.dashboardUrl + '/' + dataViewId).pipe(
-            map(data => {
-                return data as Dashboard;
-            }),
-        );
-    }
-
     updateDashboard(dashboard: Dashboard): Observable<Dashboard> {
         return this.sharedDatalakeRestService.updateDashboard(
             this.dashboardUrl,
@@ -97,6 +77,12 @@ export class DataViewDataExplorerService {
         return `${this.baseUrl}/api/v3/datalake/dashboard/widgets`;
     }
 
+    getAllWidgets(): Observable<DataExplorerWidgetModel[]> {
+        return this.http
+            .get(this.dashboardWidgetUrl)
+            .pipe(map(res => res as DataExplorerWidgetModel[]));
+    }
+
     getWidget(widgetId: string): Observable<DataExplorerWidgetModel> {
         return this.http.get(this.dashboardWidgetUrl + '/' + widgetId).pipe(
             map(response => {

ui/projects/streampipes/platform-services/src/lib/model/gen/streampipes-model.ts

@@ -20,7 +20,7 @@
 /* tslint:disable */
 /* eslint-disable */
 // @ts-nocheck
-// Generated using typescript-generator version 3.2.1263 on 2024-06-30 09:10:19.
+// Generated using typescript-generator version 3.2.1263 on 2024-07-13 11:00:10.
 
 export class NamedStreamPipesEntity implements Storable {
     '@class':
@@ -1097,6 +1097,7 @@ export class DataExplorerWidgetModel extends DashboardEntity {
     dataConfig: { [index: string]: any };
     measureName: string;
     pipelineId: string;
+    timeSettings: { [index: string]: any };
     visualizationConfig: { [index: string]: any };
     widgetId: string;
     widgetType: string;
@@ -1118,6 +1119,9 @@ export class DataExplorerWidgetModel extends DashboardEntity {
         );
         instance.measureName = data.measureName;
         instance.pipelineId = data.pipelineId;
+        instance.timeSettings = __getCopyObjectFn(__identity<any>())(
+            data.timeSettings,
+        );
         instance.visualizationConfig = __getCopyObjectFn(__identity<any>())(
             data.visualizationConfig,
         );

ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.html

@@ -0,0 +1,74 @@
+<!--
+  ~ 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.
+  ~
+  -->
+
+<sp-basic-view
+    [backLinkTarget]="['dataexplorer']"
+    [showBackLink]="true"
+    *ngIf="dataViewLoaded"
+>
+    <div
+        nav
+        fxFlex="100"
+        fxLayoutAlign="start center"
+        fxLayout="row"
+        class="pl-10"
+    >
+        <sp-data-explorer-data-view-toolbar
+            [timeSettings]="timeSettings"
+            (updateDateRangeEmitter)="updateDateRange($event)"
+            (saveDataViewEmitter)="saveDataView()"
+            fxFlex="100"
+        >
+        </sp-data-explorer-data-view-toolbar>
+    </div>
+    <div fxFlex="100" fxLayout="column">
+        <mat-drawer-container
+            class="designer-panel-container h-100 dashboard-grid"
+        >
+            <mat-drawer
+                [opened]="editMode"
+                mode="side"
+                position="end"
+                class="designer-panel"
+            >
+                <div fxLayout="column" fxFlex="100">
+                    <sp-data-explorer-designer-panel
+                        [currentlyConfiguredWidget]="dataView"
+                        [dataLakeMeasure]="dataLakeMeasure"
+                        fxFlex="100"
+                    >
+                    </sp-data-explorer-designer-panel>
+                </div>
+            </mat-drawer>
+            <mat-drawer-content class="h-100 dashboard-grid">
+                <div #panel fxFlex="100" fxLayout="column">
+                    <sp-data-explorer-dashboard-widget
+                        *ngIf="dataView && gridsterItemComponent"
+                        [configuredWidget]="dataView"
+                        [gridsterItemComponent]="gridsterItemComponent"
+                        [timeSettings]="timeSettings"
+                        [dataLakeMeasure]="
+                            dataView.dataConfig.sourceConfigs[0].measure
+                        "
+                    >
+                    </sp-data-explorer-dashboard-widget>
+                </div>
+            </mat-drawer-content>
+        </mat-drawer-container>
+    </div>
+</sp-basic-view>

ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.scss

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ *
+ */
+
+.fixed-height {
+    height: 50px;
+}
+
+.data-explorer-options {
+    padding: 0px;
+}
+
+.data-explorer-options-item {
+    display: inline;
+    margin-right: 10px;
+}
+
+.m-20 {
+    margin: 20px;
+}
+
+.h-100 {
+    height: 100%;
+}
+
+.dashboard-grid {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 100%;
+}
+
+.designer-panel-container {
+    width: 100%;
+    height: 100%;
+}
+
+.designer-panel {
+    width: 450px;
+    border: 1px solid var(--color-tab-border);
+}

ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts

@@ -0,0 +1,120 @@
+/*
+ * 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, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {
+    DataExplorerWidgetModel,
+    DataLakeMeasure,
+    DataViewDataExplorerService,
+    TimeSettings,
+} from '@streampipes/platform-services';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TimeSelectionService } from '../../services/time-selection.service';
+
+@Component({
+    selector: 'sp-data-explorer-data-view',
+    templateUrl: './data-explorer-data-view.component.html',
+    styleUrls: ['./data-explorer-data-view.component.scss'],
+})
+export class DataExplorerDataViewComponent implements OnInit {
+    dataViewLoaded = false;
+    timeSettings: TimeSettings;
+
+    editMode = true;
+    dataView: DataExplorerWidgetModel;
+    dataLakeMeasure: DataLakeMeasure;
+    gridsterItemComponent: any;
+
+    @ViewChild('panel', { static: false }) outerPanel: ElementRef;
+
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private dataViewService: DataViewDataExplorerService,
+        private timeSelectionService: TimeSelectionService,
+    ) {}
+
+    ngOnInit() {
+        const dataViewId = this.route.snapshot.params.id;
+        this.editMode = this.route.snapshot.queryParams.editMode;
+
+        if (dataViewId) {
+            this.dataViewService.getWidget(dataViewId).subscribe(res => {
+                this.dataView = res;
+                if (!this.dataView.timeSettings?.startTime) {
+                    this.timeSettings = this.makeDefaultTimeSettings();
+                } else {
+                    this.timeSettings = this.dataView
+                        .timeSettings as TimeSettings;
+                }
+                this.afterDataViewLoaded();
+            });
+        } else {
+            this.createWidget();
+            this.timeSettings = this.makeDefaultTimeSettings();
+            this.afterDataViewLoaded();
+        }
+    }
+
+    afterDataViewLoaded(): void {
+        this.dataViewLoaded = true;
+        setTimeout(() => {
+            const width = this.outerPanel.nativeElement.offsetWidth;
+            const height = this.outerPanel.nativeElement.offsetHeight;
+            this.gridsterItemComponent = { width, height };
+            this.timeSelectionService.notify(this.timeSettings);
+        });
+    }
+
+    makeDefaultTimeSettings(): TimeSettings {
+        return {
+            dynamicSelection: 1440,
+            endTime: new Date().getTime(),
+            startTime: new Date().getTime() - 1000 * 24 * 60 * 60,
+        };
+    }
+
+    createWidget() {
+        this.dataLakeMeasure = new DataLakeMeasure();
+        this.dataView = new DataExplorerWidgetModel();
+        this.dataView['@class'] =
+            'org.apache.streampipes.model.datalake.DataExplorerWidgetModel';
+        this.dataView.baseAppearanceConfig = {};
+        this.dataView.baseAppearanceConfig.widgetTitle = 'New Widget';
+        this.dataView.dataConfig = {};
+        this.dataView.dataConfig.ignoreMissingValues = false;
+        this.dataView.baseAppearanceConfig.backgroundColor = '#FFFFFF';
+        this.dataView.baseAppearanceConfig.textColor = '#3e3e3e';
+        this.dataView = { ...this.dataView };
+    }
+
+    saveDataView(): void {
+        this.dataView.timeSettings = this.timeSettings;
+        const observable = this.editMode
+            ? this.dataViewService.updateWidget(this.dataView)
+            : this.dataViewService.saveWidget(this.dataView);
+        observable.subscribe(() => {
+            this.router.navigate(['dataexplorer']);
+        });
+    }
+
+    updateDateRange(timeSettings: TimeSettings) {
+        this.timeSettings = timeSettings;
+        this.timeSelectionService.notify(timeSettings);
+    }
+}