diff --git a/src/frontend/app/app.routing.ts b/src/frontend/app/app.routing.ts index 04aee90e0b..4d2d00a9b7 100644 --- 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 index 0b74c72200..15ce4e82bd 100644 --- 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; + } }