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 2022/06/12 14:46:19 UTC
[incubator-streampipes] 02/02: [STREAMPIPES-537] Change routing for apps module
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 4a639dd809508e8b82d0c891016867f4015a6ec6
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sun Jun 12 16:46:01 2022 +0200
[STREAMPIPES-537] Change routing for apps module
---
ui/.gitignore | 1 +
ui/deployment/apps.ts | 33 +++++++++++
ui/deployment/modules.yml | 4 +-
ui/deployment/prebuild.js | 1 +
.../app-asset-monitoring.component.html | 24 ++++----
.../app-asset-monitoring.module.ts | 65 ++++++++++++----------
.../dashboard-overview.component.html | 7 ++-
.../dashboard-overview.component.ts | 1 +
.../app/app-overview/app-overview.component.html | 54 +++++++-----------
ui/src/app/app-overview/app-overview.component.ts | 36 +++---------
ui/src/app/app-overview/app-overview.module.ts | 45 ++++++++++-----
ui/src/app/app-overview/apps.model.ts | 25 +++++++++
12 files changed, 175 insertions(+), 121 deletions(-)
diff --git a/ui/.gitignore b/ui/.gitignore
index fa7611034..77e77f6e3 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -21,6 +21,7 @@ src/assets/lib/apps/*
# prebuild
src/app/app-routing.module.ts
+src/app/app-overview/apps.ts
src/app/appng5.module.ts
src/app/home/home.service.ts
src/app/services/version/version.service.ts
diff --git a/ui/deployment/apps.ts b/ui/deployment/apps.ts
new file mode 100644
index 000000000..c049dedd3
--- /dev/null
+++ b/ui/deployment/apps.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { App } from './apps.model';
+
+export class AvailableAppsService {
+
+ public static apps: App[] = [
+ {
+ appName: 'Asset Dashboards',
+ appDescription: 'Monitor measurements of your assets by placing visualizations on an image of your asset.',
+ appId: 'asset-monitoring',
+ appLink: 'asset-monitoring',
+ appModuleLink: () =>
+ import('../app-asset-monitoring/app-asset-monitoring.module').then(m => m.AppAssetMonitoringModule)
+ }
+ ];
+}
diff --git a/ui/deployment/modules.yml b/ui/deployment/modules.yml
index 78011fad9..a02603d6c 100644
--- a/ui/deployment/modules.yml
+++ b/ui/deployment/modules.yml
@@ -84,12 +84,12 @@ spConfiguration:
pageNames: 'PageName.SETTINGS'
admin: True
spAppOverview:
- componentImport: True
+ componentImport: False
ng5_moduleName: 'AppOverviewModule'
ng5_component: 'AppOverviewComponent'
ng5_componentPath: './app-overview/app-overview.component'
path: './app-overview/app-overview.module'
- link: 'app-overview'
+ link: 'apps'
url: '/apps'
title: 'Apps'
description: 'The app overview allows you to view and open additional StreamPipes plugins.'
diff --git a/ui/deployment/prebuild.js b/ui/deployment/prebuild.js
index dc165ee04..0c1a81d87 100644
--- a/ui/deployment/prebuild.js
+++ b/ui/deployment/prebuild.js
@@ -85,6 +85,7 @@ fs.writeFileSync('src/app/appng5.module.ts', mustache.render(fs.readFileSync('de
fs.writeFileSync('src/app/home/home.service.ts', mustache.render(fs.readFileSync('deployment/home.service.mst', 'utf8').toString(), modulesActive));
fs.writeFileSync('src/app/app-routing.module.ts', mustache.render(fs.readFileSync('deployment/app-routing.module.mst', 'utf8').toString(), modulesActive));
fs.writeFileSync('src/app/core/components/base-navigation.component.ts', mustache.render(fs.readFileSync('deployment/base-navigation.component.mst', 'utf8').toString(), modulesActive));
+fs.writeFileSync('src/app/app-overview/apps.ts', fs.readFileSync('deployment/apps.ts'));
fs.writeFileSync('src/scss/sp/sp-theme.scss', fs.readFileSync('deployment/sp-theme.scss'));
fs.writeFileSync('src/app/services/app.constants.ts', fs.readFileSync('deployment/app-constants.ts', 'utf8'));
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
index 13dae7412..80269581c 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.component.html
@@ -16,21 +16,19 @@
~
-->
-<div fxLayout="column" fxFlex="100" class="page-container-connect">
- <div fxLayout="row" class="sp-tab-bg">
- <div fxLayout="fill" class="page-container-nav">
- <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)" color="accent">
- <mat-tab label="Asset Dashboards">
- </mat-tab>
- <mat-tab id="all-adapters" label="New Asset Dashboard">
- </mat-tab>
- </mat-tab-group>
- </div>
- </div>
+<sp-basic-view showBackLink="true" [backLinkTarget]="['apps']">
+ <ng-container nav>
+ <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)" color="accent">
+ <mat-tab label="Asset Dashboards">
+ </mat-tab>
+ <mat-tab id="all-adapters" label="New Asset Dashboard">
+ </mat-tab>
+ </mat-tab-group>
+ </ng-container>
<div fxLayout="column" fxFlex="100">
- <sp-asset-dashboard-overview *ngIf="selectedIndex == 0 && !dashboardSelected" fxFlex="100" (selectedDashboard)="openDashboard($event)"></sp-asset-dashboard-overview>
+ <sp-asset-dashboard-overview *ngIf="selectedIndex == 0 && !dashboardSelected" fxFlex="100" (selectedDashboard)="openDashboard($event)" (createDashboard)="selectedIndex = 1"></sp-asset-dashboard-overview>
<sp-view-asset fxFlex="100" *ngIf="selectedIndex == 0 && dashboardSelected" [dashboardConfig]="selectedDashboard" (dashboardClosed)="closeDashboard($event)" (editDashboardEmitter)="editDashboard($event)"></sp-view-asset>
<sp-create-asset *ngIf="selectedIndex == 1" fxFlex="100" (dashboardClosed)="closeDashboard($event)" [dashboardConfig]="selectedDashboard"></sp-create-asset>
</div>
-</div>
+</sp-basic-view>
diff --git a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
index a2882c5fb..215705e01 100644
--- a/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
+++ b/ui/src/app/app-asset-monitoring/app-asset-monitoring.module.ts
@@ -39,36 +39,45 @@ import { SaveDashboardDialogComponent } from './dialog/save-dashboard/save-dashb
import { AssetDashboardOverviewComponent } from './components/dashboard-overview/dashboard-overview.component';
import { AddLinkDialogComponent } from './dialog/add-link/add-link-dialog.component';
import { DashboardModule } from '../dashboard/dashboard.module';
+import { RouterModule } from '@angular/router';
+import { SharedUiModule } from '@streampipes/shared-ui';
@NgModule({
- imports: [
- CommonModule,
- FlexLayoutModule,
- CustomMaterialModule,
- MatGridListModule,
- MatInputModule,
- MatFormFieldModule,
- FormsModule,
- ColorPickerModule,
- DashboardModule
- ],
- declarations: [
- AppAssetMonitoringComponent,
- CreateAssetComponent,
- ViewAssetComponent,
- AddLinkDialogComponent,
- AddPipelineDialogComponent,
- SaveDashboardDialogComponent,
- AssetDashboardOverviewComponent
- ],
- providers: [
- RestService,
- ShapeService,
- ElementIconText
- ],
- exports: [
- AppAssetMonitoringComponent
- ]
+ imports: [
+ CommonModule,
+ FlexLayoutModule,
+ CustomMaterialModule,
+ MatGridListModule,
+ MatInputModule,
+ MatFormFieldModule,
+ FormsModule,
+ ColorPickerModule,
+ DashboardModule,
+ RouterModule.forChild([
+ {
+ path: '',
+ component: AppAssetMonitoringComponent
+ }
+ ]),
+ SharedUiModule
+ ],
+ declarations: [
+ AppAssetMonitoringComponent,
+ CreateAssetComponent,
+ ViewAssetComponent,
+ AddLinkDialogComponent,
+ AddPipelineDialogComponent,
+ SaveDashboardDialogComponent,
+ AssetDashboardOverviewComponent
+ ],
+ providers: [
+ RestService,
+ ShapeService,
+ ElementIconText
+ ],
+ exports: [
+ AppAssetMonitoringComponent
+ ]
})
export class AppAssetMonitoringModule {
}
diff --git a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.html b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.html
index 3c380931c..90b70374c 100644
--- a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.html
+++ b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.html
@@ -20,7 +20,7 @@
<h1>Asset Dashboards</h1>
<mat-grid-list
[cols]="3" [rowHeight]="500"
- [gutterSize]="10" fxFlex="100">
+ [gutterSize]="10" fxFlex="100" *ngIf="dashboardConfigs.length > 0">
<mat-grid-tile class="gray" *ngFor="let dashboardConfig of dashboardConfigs">
@@ -41,7 +41,8 @@
</mat-card>
</mat-grid-tile>
</mat-grid-list>
- <div *ngIf="dashboardConfigs.length == 0">
- <h4>(no dashboards available, navigate to <i>New Dashboard</i> to create a new asset dashboard)</h4>
+ <div *ngIf="dashboardConfigs.length == 0" fxLayoutAlign="center center" fxFlex="100" fxLayout="column">
+ <h4>No asset dashboards available</h4>
+ <button mat-button mat-raised-button color="accent" style="margin-top: 10px;" (click)="createDashboard.emit()">Create new</button>
</div>
</div>
diff --git a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.ts b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.ts
index 57b0a6f70..65e7a9c20 100644
--- a/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.ts
+++ b/ui/src/app/app-asset-monitoring/components/dashboard-overview/dashboard-overview.component.ts
@@ -28,6 +28,7 @@ import { DashboardConfiguration } from '../../model/dashboard-configuration.mode
export class AssetDashboardOverviewComponent implements OnInit {
@Output() selectedDashboard = new EventEmitter<DashboardConfiguration>();
+ @Output() createDashboard = new EventEmitter<void>();
dashboardConfigs: DashboardConfiguration[] = [];
diff --git a/ui/src/app/app-overview/app-overview.component.html b/ui/src/app/app-overview/app-overview.component.html
index 9085fd3bd..2a479a85c 100644
--- a/ui/src/app/app-overview/app-overview.component.html
+++ b/ui/src/app/app-overview/app-overview.component.html
@@ -16,39 +16,27 @@
~
-->
-<div fxLayout="column" class="page-container page-container-connect">
- <div fxLayout="row" class="sp-tab-bg">
- <div fxLayoutAlign="end center" fxLayout="fill" class="page-container-nav"
- style="padding-right:10px; width:100%;min-height:50px;line-height:24px;margin-bottom:1px;">
- <div *ngIf="appOpen">
- <button mat-button mat-raised-button color="accent" (click)="appClosed()">
- Close App
- </button>
- </div>
- </div>
- </div>
+<sp-basic-view padding="true">
+ <ng-container nav>
+
+ </ng-container>
+
- <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="!appOpen">
- <div fxFlex="100" fxLayout="column">
- <h1>My apps</h1>
- <mat-card class="example-card" *ngFor="let app of apps">
- <div fxFlex="100" fxLayout="row">
- <div fxFlex="75" fxLayout="column" fxLayoutAlign="center start">
- <mat-card-header>
- <mat-card-title> {{app.appName}}</mat-card-title>
- <mat-card-subtitle>{{app.appDescription}}</mat-card-subtitle>
- </mat-card-header>
- </div>
- <div fxFlex="25" fxLayoutAlign="center end" fxLayout="column">
- <button mat-button mat-raised-button color="accent" (click)="selectApp(app.appId)">Open App
- </button>
- </div>
+ <div fxFlex="100" fxLayout="column">
+ <h1>My apps</h1>
+ <mat-card class="example-card" *ngFor="let app of apps">
+ <div fxFlex="100" fxLayout="row">
+ <div fxFlex="75" fxLayout="column" fxLayoutAlign="center start">
+ <mat-card-header>
+ <mat-card-title> {{app.appName}}</mat-card-title>
+ <mat-card-subtitle>{{app.appDescription}}</mat-card-subtitle>
+ </mat-card-header>
</div>
- </mat-card>
- </div>
- </div>
- <div class="fixed-height" fxLayout="column" fxFlex="100">
- <sp-app-asset-monitoring (appOpened)="appOpened($event)"
- *ngIf="currentlySelectedApp === apps[0].appId"></sp-app-asset-monitoring>
+ <div fxFlex="25" fxLayoutAlign="center end" fxLayout="column">
+ <button mat-button mat-raised-button color="accent" (click)="selectApp(app.appLink)">Open App
+ </button>
+ </div>
+ </div>
+ </mat-card>
</div>
-</div>
+</sp-basic-view>
diff --git a/ui/src/app/app-overview/app-overview.component.ts b/ui/src/app/app-overview/app-overview.component.ts
index d89f93b47..d9c79b7c8 100644
--- a/ui/src/app/app-overview/app-overview.component.ts
+++ b/ui/src/app/app-overview/app-overview.component.ts
@@ -17,6 +17,9 @@
*/
import { Component, OnInit } from '@angular/core';
+import { App } from './apps.model';
+import { AvailableAppsService } from './apps';
+import { Router } from '@angular/router';
@Component({
templateUrl: './app-overview.component.html',
@@ -24,41 +27,18 @@ import { Component, OnInit } from '@angular/core';
})
export class AppOverviewComponent implements OnInit {
- selectedIndex = 0;
- appOpen = false;
- currentlySelectedApp = '';
+ apps: App[] = [];
- apps: any[] = [
- {
- appName: 'Asset Dashboards',
- appDescription: 'Monitor measurements of your assets by placing visualizations on an image of your asset.',
- appId: 'asset-monitoring',
- }
- ];
-
- constructor() {
+ constructor(private router: Router) {
}
ngOnInit() {
-
- }
-
- selectedIndexChange(index: number) {
- this.selectedIndex = index;
- }
-
- appOpened(appOpen: boolean) {
- this.appOpen = appOpen;
- }
-
- appClosed() {
- this.appOpen = false;
- this.currentlySelectedApp = '';
+ this.apps = AvailableAppsService.apps;
}
- selectApp(appId: string) {
- this.currentlySelectedApp = appId;
+ selectApp(appLink: string) {
+ this.router.navigate(['apps', appLink]);
}
diff --git a/ui/src/app/app-overview/app-overview.module.ts b/ui/src/app/app-overview/app-overview.module.ts
index 1d956178b..d924dfd7c 100644
--- a/ui/src/app/app-overview/app-overview.module.ts
+++ b/ui/src/app/app-overview/app-overview.module.ts
@@ -27,22 +27,39 @@ import { MatGridListModule } from '@angular/material/grid-list';
import { MatInputModule } from '@angular/material/input';
import { AppAssetMonitoringModule } from '../app-asset-monitoring/app-asset-monitoring.module';
import { AppOverviewComponent } from './app-overview.component';
+import { RouterModule } from '@angular/router';
+import { AvailableAppsService } from './apps';
+import { PageName } from '../_enums/page-name.enum';
+import { SharedUiModule } from '@streampipes/shared-ui';
@NgModule({
- imports: [
- CommonModule,
- FlexLayoutModule,
- CustomMaterialModule,
- MatGridListModule,
- MatInputModule,
- MatFormFieldModule,
- FormsModule,
- AppAssetMonitoringModule,
- ],
- declarations: [
- AppOverviewComponent,
- ],
- providers: []
+ imports: [
+ AppAssetMonitoringModule,
+ CommonModule,
+ CustomMaterialModule,
+ FlexLayoutModule,
+ FormsModule,
+ MatGridListModule,
+ MatInputModule,
+ MatFormFieldModule,
+ SharedUiModule,
+ RouterModule.forChild([
+ {
+ path: 'apps',
+ children: [{'path': '', component: AppOverviewComponent}, ...AvailableAppsService.apps.map(app => {
+ return {
+ path: app.appLink,
+ data: {authPageNames: [PageName.APPS]},
+ loadChildren: app.appModuleLink
+ };
+ }) as any]
+ }
+ ])
+ ],
+ declarations: [
+ AppOverviewComponent,
+ ],
+ providers: []
})
export class AppOverviewModule {
}
diff --git a/ui/src/app/app-overview/apps.model.ts b/ui/src/app/app-overview/apps.model.ts
new file mode 100644
index 000000000..8d1d8711f
--- /dev/null
+++ b/ui/src/app/app-overview/apps.model.ts
@@ -0,0 +1,25 @@
+/*
+ * 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.
+ *
+ */
+
+export interface App {
+ appName: string;
+ appDescription: string;
+ appId: string;
+ appLink: string;
+ appModuleLink?: any;
+}