cloudfoundry · KlapTrap · Oct 18, 2018 · Sep 7, 2018 · Sep 7, 2018 · Sep 7, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
@@ -20,8 +20,7 @@ import { SharedModule } from './shared/shared.module';
 import { AppStoreModule } from './store/store.module';
 import { XSRFModule } from './xsrf.module';
 import { GITHUB_API_URL, getGitHubAPIURL } from './core/github.helpers';
-import { ExtensionService, applyRoutesFromExtensions } from './core/extension/extension-service';
-import { Router } from '@angular/router';
+import { ExtensionService } from './core/extension/extension-service';
 import { DynamicExtenstionRoutes } from './core/extension/dynamic-extension-routes';
 
 // Create action for router navigation. See
@@ -90,7 +89,7 @@ export class CustomRouterStateSerializer
   bootstrap: [AppComponent]
 })
 export class AppModule {
-  constructor(private router: Router, private ext: ExtensionService) {
-    applyRoutesFromExtensions(router);
+  constructor(private ext: ExtensionService) {
+    ext.init();
   }
 }
diff --git a/src/frontend/app/core/extension/dynamic-extension-routes.ts b/src/frontend/app/core/extension/dynamic-extension-routes.ts
@@ -3,6 +3,19 @@ import { CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot, Route
 import { Observable } from 'rxjs';
 import { getRoutesFromExtensions, StratosRouteType } from './extension-service';
 
+/**
+ * This is used to dynamically add an extension's routes - since we can't do this
+ * if the extentsion's module is lazy-loaded.
+ *
+ * This CanActive plugin typically is added to the route config to catch all unknown routes '**'
+ * When activated, it removes itself from the routing congif, so it only evern activates once.
+ *
+ * It checks if there are any new routes from extensions that need to be added and add them.
+ *
+ * Lastly, it navigates to the saem route that it intercepted - if a new extension route
+ * was added that now matches, it gets the route, otherwise the route goes up the chain
+ * as it would have before.
+ */
 
 @Injectable()
 export class DynamicExtenstionRoutes implements CanActivate {
@@ -12,22 +25,24 @@ export class DynamicExtenstionRoutes implements CanActivate {
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Observable<boolean>|Promise<boolean>|boolean {
+    const childRoutes = this.getChildRoutes(route.parent.routeConfig);
+    // Remove the last route (which is us, the '**' route)
+    let newChildRoutes = childRoutes.splice(0, childRoutes.length - 1);
+
     // Does the parent root have metadata to tell us what route group this is?
+    // i.e. are there extension routes we need to try and add?
     if (route.routeConfig.data && route.routeConfig.data.stratosRouteGroup) {
       const tabGroup = route.routeConfig.data.stratosRouteGroup;
-      const childRoutes = this.getChildRoutes(route.parent.routeConfig);
-
-      // Remove the last route
-      let newChildRoutes = childRoutes.splice(0, childRoutes.length - 1);
 
       // Add the missing routes
       const newRoutes = getRoutesFromExtensions(tabGroup as StratosRouteType);
       newChildRoutes = newChildRoutes.concat(newRoutes);
-      this.setChildRoutes(route.parent.routeConfig, newChildRoutes);
-      this.router.navigateByUrl(state.url);
-      return false;
     }
-    return true;
+
+    // Update the route config and navigate again to the same route that was intercepted
+    this.setChildRoutes(route.parent.routeConfig, newChildRoutes);
+    this.router.navigateByUrl(state.url);
+    return false;
   }
 
   private getChildRoutes(r: any) {

diff --git a/src/frontend/app/core/extension/extension-service.ts b/src/frontend/app/core/extension/extension-service.ts
@@ -1,18 +1,19 @@
-import { Injectable, Component, Injector } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Route, Router } from '@angular/router';
-import { AppModule } from '../../app.module';
+
+export const extensionsActionRouteKey = 'extensionsActionsKey';
 
 export interface EndpointTypeExtension {
   type: string;
   label: string;
   authTypes: string[];
 }
 
-export interface RouteInfo {
-  target: any;
-  name: string;
+export interface StratosExtensionConfig {
+  routes?: Route[];
 }
 
+// The different types of Tab
 export enum StratosTabType {
   Application = 'appTabs',
   CloudFoundry = 'cfTabs',
@@ -26,6 +27,7 @@ export interface StratosTabMetadata {
   link: string;
 }
 
+// The different types of Action
 export enum StratosActionType {
   Applications = 'appsActions',
   Application = 'appActions',
@@ -45,6 +47,7 @@ export interface StratosActionMetadata {
 
 export type StratosRouteType = StratosTabType | StratosActionType;
 
+// Stores the extension metadata as defined by the decorators
 const extensionMetadata = {
   routes: [],
   loginComponent: null,
@@ -53,6 +56,42 @@ const extensionMetadata = {
   actions: {},
 };
 
+/**
+ * Decortator for a Tab extension
+ */
+export function StratosTab(props: StratosTabMetadata) {
+  return function (target) {
+    addExtensionTab(props.type, target, props);
+  };
+}
+
+/**
+ * Decortator for an Action extension
+ */
+export function StratosAction(props: StratosActionMetadata) {
+  return function (target) {
+    addExtensionAction(props.type, target, props);
+  };
+}
+
+/**
+ * Decorator for an Extension module providing routes etc.
+ */
+
+export function StratosExtension(config: StratosExtensionConfig) {
+  return (_target) => {
+    if (config.routes) {
+      extensionMetadata.routes.push(config.routes);
+    }
+  };
+}
+
+export function StratosLoginComponent() {
+  return (target) => {
+    extensionMetadata.loginComponent = target;
+  };
+}
+
 function addExtensionTab(tab: StratosTabType, target: any, props: any) {
   if (!extensionMetadata.tabs[tab]) {
     extensionMetadata.tabs[tab] = [];
@@ -80,103 +119,25 @@ function addExtensionAction(action: StratosActionType, target: any, props: any)
   extensionMetadata.actions[action].push(props);
 }
 
-export function StratosTab(props: StratosTabMetadata) {
-  return function(target) {
-    addExtensionTab(props.type, target, props);
-  };
-}
-
-export function StratosAction(props: StratosActionMetadata) {
-  return function(target) {
-    addExtensionAction(props.type, target, props);
-  };
-}
-
-
-export interface StratosNavExtensionConfig {
-  routes: Route[];
-}
-
-export function StratosNavExtension(config: StratosNavExtensionConfig) {
-  return (target) => {
-    extensionMetadata.routes.push(config.routes);
-  };
-}
-
-export function StratosLoginComponent() {
-  return (target) => {
-    extensionMetadata.loginComponent = target;
-  };
-}
-
-
+// Injectable Extension Service
 @Injectable()
 export class ExtensionService {
 
-  private routes: Route[] = [];
-
-  private endointTypes: EndpointTypeExtension[] = [];
-
-  private loginComponent: any;
-
   public metadata = extensionMetadata;
 
-  constructor(private router: Router, private injector: Injector) {}
-
-  /**
-   * Regiser new top-level routes
-   */
-  public registerRoutes(r: Route[]): ExtensionService {
-    this.routes = this.routes.concat(r);
-    return this;
-  }
+  constructor(private router: Router) { }
 
   /**
-   * Register a component to use for the Login page
+   * Initialize the extensions - to be invoked in the AppModule
    */
-  public registerLoginComponent(component: any): ExtensionService {
-    this.loginComponent = component;
-    return this;
-  }
-
-  public registerEndpointType(epType: EndpointTypeExtension): ExtensionService {
-    this.endointTypes.push(epType);
-    return this;
-  }
-
-  public getEndpointTypes(): EndpointTypeExtension[] {
-    return this.endointTypes;
+  public init() {
+    this.applyRoutesFromExtensions(this.router);
   }
 
   /**
    * Apply route configuration
    */
-  public applyRouteConfig() {
-    const routeConfig = [...this.router.config];
-    const dashboardRoute = routeConfig.find(r => r.path === '' && !!r.component && r.component.name === 'DashboardBaseComponent');
-    let needsReset = false;
-    if (dashboardRoute) {
-      dashboardRoute.children = [
-        ...dashboardRoute.children,
-        ...this.routes
-      ];
-      needsReset = true;
-    }
-
-    if (this.loginComponent) {
-      // Override the component used for the login route
-      const loginRoute = routeConfig.find(r => r.path === 'login') || {};
-      loginRoute.component = this.loginComponent;
-      needsReset = true;
-    }
-
-    if (needsReset) {
-      this.router.resetConfig(routeConfig);
-    }
-  }
-}
-
-export function applyRoutesFromExtensions(router: Router) {
+  private applyRoutesFromExtensions(router: Router) {
     const routeConfig = [...router.config];
     const dashboardRoute = routeConfig.find(r => r.path === '' && !!r.component && r.component.name === 'DashboardBaseComponent');
     let needsReset = false;
@@ -195,8 +156,11 @@ export function applyRoutesFromExtensions(router: Router) {
     if (needsReset) {
       router.resetConfig(routeConfig);
     }
+  }
 }
 
+// Helpers to access Extension metadata (without using the injectable Extension Service)
+
 export function getRoutesFromExtensions(routeType: StratosRouteType) {
   return extensionMetadata.extensionRoutes[routeType] || [];
 }

diff --git a/...rontend/app/features/applications/application-delete/application-delete.component.spec.ts b/...rontend/app/features/applications/application-delete/application-delete.component.spec.ts
@@ -17,7 +17,7 @@ describe('ApplicationDeleteComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         ...BaseTestModules,
-        ApplicationsModule,
+        ApplicationsModule
       ],
       providers: [
         generateTestEntityServiceProvider(

diff --git a/src/frontend/app/features/applications/application-wall/application-wall.component.html b/src/frontend/app/features/applications/application-wall/application-wall.component.html
@@ -9,8 +9,6 @@ <h1>Applications</h1>
         <button id="appwall-deploy-application" mat-icon-button [routerLink]="'/applications/deploy/'">
           <mat-icon>file_upload</mat-icon>
         </button>
-        <!-- Extension buttons -->
-        <app-extension-buttons type="Applications"></app-extension-buttons>
       </ng-container>
     </ng-container>
   </div>
@@ -30,4 +28,4 @@ <h1>Applications</h1>
 }"></app-no-content-message>
 </ng-template>
 <app-list [noEntries]="noEntries" [noEntriesForCurrentFilter]="noEntriesForCurrentFilter" *ngIf="!!(cloudFoundryService.hasRegisteredCFEndpoints$ | async) && !!(cloudFoundryService.hasConnectedCFEndpoints$ | async)">
-</app-list>
+</app-list>
diff --git a/...tures/applications/application/application-tabs-base/application-tabs-base.component.html b/...tures/applications/application/application-tabs-base/application-tabs-base.component.html
@@ -2,42 +2,47 @@
   <div *ngIf="applicationService.application$ | async as application" class="app-page-header">
     <h1>{{ application?.app?.entity?.name }} </h1>
     <div>
-      <a class="app-page-header__anchor" mat-icon-button *ngIf="(applicationService.applicationUrl$ | async) != null && application?.app.entity.state === 'STARTED'" href="{{applicationService.applicationUrl$ | async}}" target="_blank" matTooltip="Visit">
+      <a class="app-page-header__anchor" mat-icon-button *ngIf="(applicationService.applicationUrl$ | async) != null && application?.app.entity.state === 'STARTED'"
+        href="{{applicationService.applicationUrl$ | async}}" target="_blank" matTooltip="Visit">
         <mat-icon>launch</mat-icon>
       </a>
       <span *ngIf="isBusyUpdating$ | async as busy">
         <span *ngIf="applicationService.appSpace$ | async as space">
           <span class="manage-application-actions" *appUserPermission="manageAppPermission;spaceGuid:space.metadata.guid;endpointGuid:this.applicationService.cfGuid">
-            <button mat-icon-button name="edit" *ngIf="(this.applicationService.applicationState$ | async)" routerLink="/applications/{{applicationService.cfGuid}}/{{applicationService.appGuid}}/edit" matTooltip="Edit">
-            <mat-icon>edit</mat-icon>
+            <button mat-icon-button name="edit" *ngIf="(this.applicationService.applicationState$ | async)" routerLink="/applications/{{applicationService.cfGuid}}/{{applicationService.appGuid}}/edit"
+              matTooltip="Edit">
+              <mat-icon>edit</mat-icon>
             </button>
             <button mat-icon-button name="delete" (click)="redirectToDeletePage()" matTooltip="Delete">
               <mat-icon>delete</mat-icon>
             </button>
             <div *ngIf="applicationService.applicationState$ | async as appState" class="app-page-header__actions">
-              <button mat-icon-button name="restart" [disabled]="busy.updating || !appState.actions.restart" (click)="restartApplication()" matTooltip="Restart">
-              <mat-icon>settings_backup_restore</mat-icon>
-            </button>
-            <button mat-icon-button name="stop" [disabled]="busy.updating" *ngIf="appState.actions.stop;else startButton" (click)="stopApplication()" matTooltip="Stop">
-              <mat-icon>stop</mat-icon>
-            </button>
-            <ng-template #startButton>
-              <button mat-icon-button name="start" [disabled]="busy.updating || !appState.actions.start && !appState.actions.stop" (click)="startApplication()" matTooltip="Start">
-                <mat-icon>play_arrow</mat-icon>
+              <button mat-icon-button name="restart" [disabled]="busy.updating || !appState.actions.restart" (click)="restartApplication()"
+                matTooltip="Restart">
+                <mat-icon>settings_backup_restore</mat-icon>
+              </button>
+              <button mat-icon-button name="stop" [disabled]="busy.updating" *ngIf="appState.actions.stop;else startButton"
+                (click)="stopApplication()" matTooltip="Stop">
+                <mat-icon>stop</mat-icon>
+              </button>
+              <ng-template #startButton>
+                <button mat-icon-button name="start" [disabled]="busy.updating || !appState.actions.start && !appState.actions.stop"
+                  (click)="startApplication()" matTooltip="Start">
+                  <mat-icon>play_arrow</mat-icon>
+                </button>
+              </ng-template>
+              <button mat-icon-button name="restage" [disabled]="busy.updating || !appState.actions.restage" (click)="restageApplication()"
+                matTooltip="Restage">
+                <mat-icon>redo</mat-icon>
               </button>
-            </ng-template>
-            <button mat-icon-button name="restage" [disabled]="busy.updating || !appState.actions.restage" (click)="restageApplication()" matTooltip="Restage">
-              <mat-icon>redo</mat-icon>
-            </button>
             </div>
           </span>
         </span>
-        <!-- Extension buttons -->
-        <app-extension-buttons type="Application"></app-extension-buttons>
       </span>
     </div>
   </div>
 </app-page-header>
-<app-loading-page [entityId]="applicationService.appGuid" [entitySchema]="schema" deleteText="Deleting application" text="Retrieving application" class="router-component">
+<app-loading-page [entityId]="applicationService.appGuid" [entitySchema]="schema" deleteText="Deleting application"
+  text="Retrieving application" class="router-component">
   <router-outlet></router-outlet>
-</app-loading-page>
+</app-loading-page>