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 2020/03/08 22:45:31 UTC
[incubator-streampipes] branch dev updated: STREAMPIPES-95: Add
support for standalone dashboards
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
The following commit(s) were added to refs/heads/dev by this push:
new d7d0e48 STREAMPIPES-95: Add support for standalone dashboards
d7d0e48 is described below
commit d7d0e48abb82b858ddae1887c68ebc3f42549ace
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Mar 8 23:45:17 2020 +0100
STREAMPIPES-95: Add support for standalone dashboards
---
ui/deployment/state.config.mst | 10 +++++
.../overview/dashboard-overview.component.ts | 8 ++--
.../standalone/standalone-dashboard.component.css | 31 +++++++++++++++
.../standalone/standalone-dashboard.component.html | 21 +++++++++++
.../standalone/standalone-dashboard.component.ts | 44 ++++++++++++++++++++++
ui/src/app/dashboard/dashboard.module.ts | 12 +++++-
ui/src/app/dashboard/services/dashboard.service.ts | 6 +++
7 files changed, 127 insertions(+), 5 deletions(-)
diff --git a/ui/deployment/state.config.mst b/ui/deployment/state.config.mst
index 8b3c086..58a32bd 100644
--- a/ui/deployment/state.config.mst
+++ b/ui/deployment/state.config.mst
@@ -25,6 +25,7 @@ import { {{{ng5_component}}} } from '{{{ng5_componentPath}}}';
import { HomeComponent } from '../home/home.component';
import { InfoComponent } from '../info/info.component';
import { AppContainerComponent } from '../app-container/app-container.component';
+import { StandaloneDashboardComponent } from "../dashboard/components/standalone/standalone-dashboard.component";
export default function stateConfig($stateProvider, $urlRouterProvider) {
@@ -92,6 +93,15 @@ export default function stateConfig($stateProvider, $urlRouterProvider) {
},
},
})
+ .state('standalone', {
+ url: '/dashboard/standalone/:dashboardId',
+ params: {dashboardId: null},
+ views: {
+ 'container': {
+ component: StandaloneDashboardComponent
+ }
+ }
+ })
/*
.state('streampipes.applinks', {
url: '/applinks',
diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
index 296dde0..3c47866 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
@@ -16,7 +16,7 @@
*
*/
-import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import {Component, EventEmitter, Inject, Input, OnInit, Output} from "@angular/core";
import {Dashboard} from "../../models/dashboard.model";
import {MatTableDataSource} from "@angular/material/table";
import {MatDialog} from "@angular/material/dialog";
@@ -38,7 +38,8 @@ export class DashboardOverviewComponent implements OnInit {
dataSource = new MatTableDataSource<Dashboard>();
displayedColumns: string[] = ['name', 'open', 'openWindow', 'settings', 'edit', 'delete'];
- constructor(private dashboardService: DashboardService,
+ constructor(@Inject('$state') private $state: any,
+ private dashboardService: DashboardService,
public dialog: MatDialog) {
}
@@ -86,7 +87,8 @@ export class DashboardOverviewComponent implements OnInit {
}
openExternalDashboard(dashboard: Dashboard) {
-
+ let href = this.$state.href('standalone', {dashboardId: dashboard._id});
+ window.open(href, "_blank");
}
}
\ No newline at end of file
diff --git a/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.css b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.css
new file mode 100644
index 0000000..ec18df7
--- /dev/null
+++ b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.css
@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+.panel {
+ height: calc(100vh - 20px);
+}
+
+.h-100 {
+ height: 100%;
+}
+
+.icon-overlay {
+ position: absolute;
+ bottom: 20px;
+ right: 10px;
+ z-index: 20;
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.html b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.html
new file mode 100644
index 0000000..a5e7832
--- /dev/null
+++ b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.html
@@ -0,0 +1,21 @@
+<!--
+ ~ 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 fxFlex="100" class="panel">
+<dashboard-grid [editMode]="false" [dashboard]="dashboard"
+ class="h-100" *ngIf="dashboardReady"></dashboard-grid>
+ <img src="/assets/img/favicon/apple-touch-icon-76x76.png" class="icon-overlay">
+</div>
\ No newline at end of file
diff --git a/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts
new file mode 100644
index 0000000..c162897
--- /dev/null
+++ b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts
@@ -0,0 +1,44 @@
+/*
+ * 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, OnInit} from "@angular/core";
+import {Dashboard} from "../../models/dashboard.model";
+import {UIRouter} from "@uirouter/core";
+import {DashboardService} from "../../services/dashboard.service";
+
+@Component({
+ templateUrl: './standalone-dashboard.component.html',
+ styleUrls: ['./standalone-dashboard.component.css']
+})
+export class StandaloneDashboardComponent implements OnInit {
+
+ dashboard: Dashboard;
+ dashboardReady: boolean = false;
+
+ constructor(private uiRouter: UIRouter,
+ private dashboardService: DashboardService) {
+ }
+
+ ngOnInit(): void {
+ let dashboardId = this.uiRouter.globals.params.dashboardId;
+ this.dashboardService.getDashboard(dashboardId).subscribe(dashboard => {
+ this.dashboard = dashboard;
+ this.dashboardReady = true;
+ })
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard/dashboard.module.ts b/ui/src/app/dashboard/dashboard.module.ts
index bc5c90e..49e345e 100644
--- a/ui/src/app/dashboard/dashboard.module.ts
+++ b/ui/src/app/dashboard/dashboard.module.ts
@@ -54,6 +54,7 @@ import {LeafletModule} from "@asymmetrik/ngx-leaflet";
import {RawWidgetComponent} from "./components/widgets/raw/raw-widget.component";
import {HtmlWidgetComponent} from "./components/widgets/html/html-widget.component";
import {TrafficLightWidgetComponent} from "./components/widgets/trafficlight/traffic-light-widget.component";
+import {StandaloneDashboardComponent} from "./components/standalone/standalone-dashboard.component";
const dashboardWidgets = [
@@ -96,7 +97,8 @@ const dashboardWidgets = [
MapWidgetComponent,
RawWidgetComponent,
HtmlWidgetComponent,
- TrafficLightWidgetComponent
+ TrafficLightWidgetComponent,
+ StandaloneDashboardComponent
],
providers: [
DashboardService,
@@ -117,6 +119,11 @@ const dashboardWidgets = [
provide: RxStompService,
useFactory: rxStompServiceFactory,
deps: [InjectableRxStompConfig]
+ },
+ {
+ provide: '$state',
+ useFactory: ($injector: any) => $injector.get('$state'),
+ deps: ['$injector']
}
],
exports: [
@@ -125,7 +132,8 @@ const dashboardWidgets = [
entryComponents: [
DashboardComponent,
AddVisualizationDialogComponent,
- EditDashboardDialogComponent
+ EditDashboardDialogComponent,
+ StandaloneDashboardComponent
]
})
export class DashboardModule {
diff --git a/ui/src/app/dashboard/services/dashboard.service.ts b/ui/src/app/dashboard/services/dashboard.service.ts
index 0560303..4cf5fca 100644
--- a/ui/src/app/dashboard/services/dashboard.service.ts
+++ b/ui/src/app/dashboard/services/dashboard.service.ts
@@ -78,6 +78,12 @@ export class DashboardService {
});
}
+ getDashboard(dashboardId: string): Observable<Dashboard> {
+ return this.http.get(this.dashboardUrl + "/" +dashboardId).map(data => {
+ return data as Dashboard;
+ })
+ }
+
updateDashboard(dashboard: Dashboard): Observable<Dashboard> {
return this.http.put(this.dashboardUrl + "/" +dashboard._id, dashboard).map(data => {
return data as Dashboard;