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:17 UTC

[incubator-streampipes] branch dev updated (ef8f6380d -> 4a639dd80)

This is an automated email from the ASF dual-hosted git repository.

riemer pushed a change to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git


    from ef8f6380d [hotfix] Fix build problem
     new efade3aab [hotfix] Add reusable component for basic page view
     new 4a639dd80 [STREAMPIPES-537] Change routing for apps module

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 ui/.gitignore                                      |  1 +
 .../AdapterException.java => ui/deployment/apps.ts | 19 ++++---
 ui/deployment/modules.yml                          |  4 +-
 ui/deployment/prebuild.js                          |  1 +
 ui/projects/streampipes/shared-ui/package.json     |  4 +-
 .../basic-view/basic-view.component.html           | 62 +++++++++++++++++++++
 .../basic-view/basic-view.component.scss}          | 35 ++++++------
 .../components/basic-view/basic-view.component.ts} | 23 +++++---
 .../shared-ui/src/lib/shared-ui.module.ts          | 14 ++++-
 .../streampipes/shared-ui/src/public-api.ts        |  3 +-
 .../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 ++++++++++-----
 .../src/app/app-overview/apps.model.ts             | 10 ++--
 18 files changed, 244 insertions(+), 164 deletions(-)
 copy streampipes-connect-api/src/main/java/org/apache/streampipes/connect/api/exception/AdapterException.java => ui/deployment/apps.ts (64%)
 create mode 100644 ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
 copy ui/{src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.scss => projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss} (73%)
 copy ui/{src/app/pipeline-details/components/elements/pipeline-elements.component.ts => projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts} (69%)
 copy streampipes-client/src/main/java/org/apache/streampipes/client/api/SupportsDataProcessorApi.java => ui/src/app/app-overview/apps.model.ts (86%)


[incubator-streampipes] 01/02: [hotfix] Add reusable component for basic page view

Posted by ri...@apache.org.
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 efade3aabf3503320a228cd49eb9ef2060e07cec
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sun Jun 12 16:45:40 2022 +0200

    [hotfix] Add reusable component for basic page view
---
 ui/projects/streampipes/shared-ui/package.json     |  4 +-
 .../basic-view/basic-view.component.html           | 62 ++++++++++++++++++++++
 .../basic-view/basic-view.component.scss}          | 35 +++++++++---
 .../components/basic-view/basic-view.component.ts} | 31 ++++++++---
 .../shared-ui/src/lib/shared-ui.module.ts          | 14 +++--
 .../streampipes/shared-ui/src/public-api.ts        |  3 +-
 6 files changed, 128 insertions(+), 21 deletions(-)

diff --git a/ui/projects/streampipes/shared-ui/package.json b/ui/projects/streampipes/shared-ui/package.json
index 95c747714..a602da9ba 100644
--- a/ui/projects/streampipes/shared-ui/package.json
+++ b/ui/projects/streampipes/shared-ui/package.json
@@ -3,10 +3,12 @@
   "version": "0.0.1",
   "peerDependencies": {
     "@angular/animations": "^13.3.0",
+    "@angular/cdk": "^13.3.0",
     "@angular/common": "^13.3.0",
     "@angular/core": "^13.3.0",
+    "@angular/flex-layout": "^13.0.0-beta.38",
     "@angular/material": "^13.3.0",
-    "@angular/cdk": "^13.3.0",
+    "@angular/router": "^13.3.0",
     "rxjs": "^6.6.2"
   },
   "dependencies": {
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
new file mode 100644
index 000000000..0c1c6ffce
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
@@ -0,0 +1,62 @@
+<!--
+  ~ 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.
+  ~
+  -->
+
+<!--
+  ~ 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 fxLayout="column" class="page-container">
+    <div fxLayout="row" class="p-0 sp-bg-lightgray page-container-nav">
+        <div fxLayout="fill">
+            <div class="pl-5 pr-5"
+                 fxLayout="row"
+                 fxLayoutAlign="start center"
+                 style="border-right: 2px solid var(--color-bg-2)" *ngIf="showBackLink">
+                <button mat-button
+                        mat-icon-button
+                        color="accent"
+                        matTooltip="Back"
+                        (click)="navigateBack()"
+                        class="edit-menu-btn"
+                        data-cy="save-data-explorer-go-back-to-overview">
+                    <mat-icon>arrow_back</mat-icon>
+                </button>
+            </div>
+            <ng-content select="[nav]"></ng-content>
+        </div>
+    </div>
+
+    <div [ngClass]="padding ? 'page-container-padding-inner' : ''" fxLayout="column" fxFlex="100">
+        <ng-content fxFlex="100"></ng-content>
+    </div>
+</div>
+
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
similarity index 62%
copy from ui/projects/streampipes/shared-ui/src/public-api.ts
copy to ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
index b7b26edd9..a73f16375 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
@@ -16,15 +16,34 @@
  *
  */
 
-export * from './lib/shared-ui.module';
+.page-container-nav {
+  line-height:24px;
+  height: 50px;
+  border-bottom:1px solid var(--color-bg-3);
+}
 
-export * from './lib/dialog/base-dialog/base-dialog.model';
-// export * from './lib/dialog/base-dialog/base-dialog.component';
-export * from './lib/dialog/base-dialog/base-dialog.service';
-export * from './lib/dialog/base-dialog/dialog-ref';
+.sp-bg-lightgray {
+  background-color: var(--color-bg-1);
+}
 
-export * from './lib/dialog/confirm-dialog/confirm-dialog.component';
-export * from './lib/dialog/panel-dialog/panel-dialog.component';
-export * from './lib/dialog/standard-dialog/standard-dialog.component';
+.sp-tab-bg {
+  background-color: var(--color-bg-1);
+}
 
+.page-container {
+  margin: 10px;
+  border: 1px solid var(--color-bg-3);
+  min-height: calc(100% - 20px);
+}
 
+.page-container-padding-inner {
+  margin: 10px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts
similarity index 62%
copy from ui/projects/streampipes/shared-ui/src/public-api.ts
copy to ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts
index b7b26edd9..f77767864 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts
@@ -16,15 +16,30 @@
  *
  */
 
-export * from './lib/shared-ui.module';
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 
-export * from './lib/dialog/base-dialog/base-dialog.model';
-// export * from './lib/dialog/base-dialog/base-dialog.component';
-export * from './lib/dialog/base-dialog/base-dialog.service';
-export * from './lib/dialog/base-dialog/dialog-ref';
+@Component({
+  selector: 'sp-basic-view',
+  templateUrl: './basic-view.component.html',
+  styleUrls: ['./basic-view.component.scss']
+})
+export class SpBasicViewComponent {
 
-export * from './lib/dialog/confirm-dialog/confirm-dialog.component';
-export * from './lib/dialog/panel-dialog/panel-dialog.component';
-export * from './lib/dialog/standard-dialog/standard-dialog.component';
+  @Input()
+  padding = false;
 
+  @Input()
+  showBackLink = false;
 
+  @Input()
+  backLinkTarget: string[];
+
+  constructor(private router: Router) {
+
+  }
+
+  navigateBack() {
+    this.router.navigate(this.backLinkTarget);
+  }
+}
diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
index f7102fcbc..7d26b8e54 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
@@ -24,21 +24,29 @@ import { CommonModule } from '@angular/common';
 import { PortalModule } from '@angular/cdk/portal';
 import { MatButtonModule } from '@angular/material/button';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { SpBasicViewComponent } from './components/basic-view/basic-view.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
     ConfirmDialogComponent,
     PanelDialogComponent,
-    StandardDialogComponent
+    StandardDialogComponent,
+    SpBasicViewComponent
   ],
   imports: [
     CommonModule,
-    PortalModule,
+    FlexLayoutModule,
     MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+    PortalModule,
     OverlayModule
   ],
   exports: [
-    ConfirmDialogComponent, PanelDialogComponent, StandardDialogComponent
+    ConfirmDialogComponent, PanelDialogComponent, StandardDialogComponent, SpBasicViewComponent
   ]
 })
 export class SharedUiModule { }
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/public-api.ts
index b7b26edd9..cd25a6bd7 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -19,7 +19,6 @@
 export * from './lib/shared-ui.module';
 
 export * from './lib/dialog/base-dialog/base-dialog.model';
-// export * from './lib/dialog/base-dialog/base-dialog.component';
 export * from './lib/dialog/base-dialog/base-dialog.service';
 export * from './lib/dialog/base-dialog/dialog-ref';
 
@@ -27,4 +26,6 @@ export * from './lib/dialog/confirm-dialog/confirm-dialog.component';
 export * from './lib/dialog/panel-dialog/panel-dialog.component';
 export * from './lib/dialog/standard-dialog/standard-dialog.component';
 
+export * from './lib/components/basic-view/basic-view.component';
+
 


[incubator-streampipes] 02/02: [STREAMPIPES-537] Change routing for apps module

Posted by ri...@apache.org.
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;
+}