Merge pull request #2950 from cloudfoundry-incubator/ext-side-menu

Extensions: Allow new side nav items to be added
cloudfoundry · Sep 11, 2018 · bb3ed78 · bb3ed78
2 parents 028cef2 + 2261a7d
commit bb3ed78
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 44 deletions.
diff --git a/src/frontend/app/app.routing.ts b/src/frontend/app/app.routing.ts
@@ -1,3 +1,4 @@
+import { of as observableOf } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -12,6 +13,7 @@ import { UpgradePageComponent } from './features/setup/upgrade-page/upgrade-page
 import { SharedModule } from './shared/shared.module';
 import { PageNotFoundComponentComponent } from './core/page-not-found-component/page-not-found-component.component';
 import { DomainMismatchComponent } from './features/setup/domain-mismatch/domain-mismatch.component';
+import { environment } from '../environments/environment';
 
 const appRoutes: Routes = [
   { path: '', redirectTo: 'applications', pathMatch: 'full' },
@@ -24,10 +26,35 @@ const appRoutes: Routes = [
     component: DashboardBaseComponent,
     canActivate: [AuthGuardService, EndpointsService],
     children: [
-      { path: 'dashboard', component: HomePageComponent },
-      { path: 'applications', loadChildren: 'app/features/applications/applications.module#ApplicationsModule' },
+      { path: 'dashboard', component: HomePageComponent,
+        data: {
+          stratosNavigation: {
+            text: 'Dashboard',
+            matIcon: 'assessment',
+            // Experimental - only show in development
+            hidden: observableOf(environment.production),
+            position: 10
+          }
+        }
+      },
+      { path: 'applications', loadChildren: 'app/features/applications/applications.module#ApplicationsModule',
+        data: {
+          stratosNavigation: {
+            text: 'Applications',
+            matIcon: 'apps',
+            position: 20
+          }
+        },
+      },
       {
         path: 'endpoints',
+        data: {
+          stratosNavigation: {
+            text: 'Endpoints',
+            matIcon: 'settings_ethernet',
+            position: 100
+          }
+        },
         children: [{
           path: '',
           loadChildren: 'app/features/endpoints/endpoints.module#EndpointsModule',
@@ -37,9 +64,35 @@ const appRoutes: Routes = [
           loadChildren: 'app/features/metrics/metrics.module#MetricsModule',
         }]
       },
-      { path: 'marketplace', loadChildren: 'app/features/service-catalog/service-catalog.module#ServiceCatalogModule' },
-      { path: 'services', loadChildren: 'app/features/services/services.module#ServicesModule' },
-      { path: 'cloud-foundry', loadChildren: 'app/features/cloud-foundry/cloud-foundry.module#CloudFoundryModule' },
+      { path: 'marketplace', loadChildren: 'app/features/service-catalog/service-catalog.module#ServiceCatalogModule',
+        data: {
+          stratosNavigation: {
+            text: 'Marketplace',
+            matIcon: 'store',
+            position: 30
+          }
+        },
+      },
+      { path: 'services', loadChildren: 'app/features/services/services.module#ServicesModule',
+        data: {
+          stratosNavigation: {
+            text: 'Services',
+            matIcon: 'service',
+            matIconFont: 'stratos-icons',
+            position: 40
+          }
+        },
+      },
+      { path: 'cloud-foundry', loadChildren: 'app/features/cloud-foundry/cloud-foundry.module#CloudFoundryModule',
+        data: {
+          stratosNavigation: {
+            text: 'Cloud Foundry',
+            matIcon: 'cloud_foundry',
+            matIconFont: 'stratos-icons',
+            position: 50
+          }
+        },
+      },
       { path: 'about', loadChildren: 'app/features/about/about.module#AboutModule' },
       { path: 'user-profile', loadChildren: 'app/features/user-profile/user-profile.module#UserProfileModule' },
     ]

diff --git a/src/frontend/app/features/dashboard/dashboard-base/dashboard-base.component.ts b/src/frontend/app/features/dashboard/dashboard-base/dashboard-base.component.ts
@@ -1,13 +1,12 @@
 
-import { of as observableOf, Observable, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { AfterContentInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatDrawer } from '@angular/material';
-import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router, Route } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { debounceTime, filter, withLatestFrom } from 'rxjs/operators';
 
-import { environment } from '../../../../environments/environment';
 import { AppState } from '../../../store/app-state';
 import { MetricsService } from '../../metrics/services/metrics-service';
 import { EventWatcherService } from './../../../core/event-watcher/event-watcher.service';
@@ -50,42 +49,7 @@ export class DashboardBaseComponent implements OnInit, OnDestroy, AfterContentIn
 
   @ViewChild('sidenav') public sidenav: MatDrawer;
 
-  sideNavTabs: SideNavItem[] = [
-    {
-      text: 'Dashboard',
-      matIcon: 'assessment',
-      link: '/dashboard',
-      // Experimental - only show in development
-      hidden: observableOf(environment.production),
-    },
-    {
-      text: 'Applications',
-      matIcon: 'apps',
-      link: '/applications'
-    },
-    {
-      text: 'Marketplace',
-      matIcon: 'store',
-      link: '/marketplace'
-    },
-    {
-      text: 'Services',
-      matIcon: 'service',
-      matIconFont: 'stratos-icons',
-      link: '/services'
-    },
-    {
-      text: 'Cloud Foundry',
-      matIcon: 'cloud_foundry',
-      matIconFont: 'stratos-icons',
-      link: '/cloud-foundry'
-    },
-    {
-      text: 'Endpoints',
-      matIcon: 'settings_ethernet',
-      link: '/endpoints'
-    },
-  ];
+  sideNavTabs: SideNavItem[] = this.getNavigationRoutes();
 
   sideNaveMode = 'side';
   dispatchRelations() {
@@ -156,4 +120,38 @@ export class DashboardBaseComponent implements OnInit, OnDestroy, AfterContentIn
     this.store.dispatch(new OpenSideNav());
     this.store.dispatch(new ChangeSideNavMode('side'));
   }
+
+  private getNavigationRoutes(): SideNavItem[] {
+    let navItems = this.collectNavigationRoutes('', this.router.config);
+
+    // Sort by name
+    navItems = navItems.sort((a: any, b: any) => a.text.localeCompare(b.text));
+
+    // Sort by position
+    navItems = navItems.sort((a: any, b: any) => {
+      const posA = a.position ? a.position : 99;
+      const posB = b.position ? b.position : 99;
+      return posA - posB;
+    });
+
+    return navItems;
+  }
+
+  private collectNavigationRoutes(path: string, routes: Route[]): SideNavItem[] {
+    let nav: SideNavItem[] = [];
+    if (!routes) {
+      return nav;
+    }
+    routes.forEach(route => {
+      if (route.data && route.data.stratosNavigation) {
+        nav.push({
+          ...route.data.stratosNavigation,
+          link: path + '/' + route.path
+        });
+      }
+      const navs = this.collectNavigationRoutes(route.path, route.children);
+      nav = nav.concat(navs);
+    });
+    return nav;
+  }
 }