Move out remaining items in cf & autoscaler from core to own packages…

…, improve code splitting (cloudfoundry#4412)

* Move out cf themese from _all-theme & remove custom cf table sort/filter field widths

* Move cf routes out of app.routing & move out cf route modules from cf package module (fixes code splitting)

* Fix autoscaler e2e test

* Split out CF modules and router imports into custom module

* Create cf-autoscaler package & routing modules
- note - CfAutoscalerModule is imported in CfAutoscalerPackageModule
- note - AutoscalerModule should be brought back into CfAutoscalerModule (stepper is lazy loaded.. but content missing elsewhere)

* Fix autoscaler e2e test #2

* Fix app autoscaler tab widgets, import using package name

* Move CfAutoscalerModule (app AS tab) out of always loaded AS package into lazy loaded app module

* Add comments, fix e2e test following app-running-instance change

* Allow routes to be applied to stratos navigation root without appearing in side nav

* Fix app-card-app-usage on app AS tab
- only seen when policy does not contain metrics restrictions
- fixes by bringing in CloudFoundrySharedModule again to CfAutoscalerModule
- means an also use app-running-instances again
- i've checked the chunks & sizes, they're similar as before

* Move CloudFoundrySharedModule out of CloudFoundryPackageModule

* Add comments

* Bring back in smaller search/sort input fields in main lists

* Bring back lost styling

angular.json

@@ -32,7 +32,6 @@
             ],
             "styles": [
               "src/frontend/packages/core/src/styles.scss",
-              "src/frontend/packages/cf-autoscaler/src/styles.scss",
               "node_modules/xterm/css/xterm.css"
             ],
             "scripts": []

src/frontend/packages/cf-autoscaler/package.json

@@ -1,8 +1,13 @@
 {
-  "name": "cf-autoscaler",
+  "name": "@stratosui/cf-autoscaler",
   "version": "0.0.1",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
     "@angular/core": "^6.0.0-rc.0 || ^6.0.0"
+  },
+  "stratos": {
+    "module": "CfAutoscalerPackageModule",
+    "routingModule": "CfAutoscalerRoutingModule",
+    "theming": "sass/_all-theme#apply-theme-stratos-autoscaler"
   }
 }

src/frontend/packages/cf-autoscaler/sass/_all-theme.scss

@@ -0,0 +1,8 @@
+@import '../src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.theme';
+
+@mixin apply-theme-stratos-autoscaler($stratos-theme) {
+
+  $theme: map-get($stratos-theme, theme);
+  $app-theme: map-get($stratos-theme, app-theme);
+
+}

src/frontend/packages/cf-autoscaler/src/cf-autoscaler-package.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { EffectsModule } from '@ngrx/effects';
+
+import { EntityCatalogModule } from '../../store/src/entity-catalog.module';
+import { generateASEntities } from './store/autoscaler-entity-generator';
+import { AutoscalerEffects } from './store/autoscaler.effects';
+
+@NgModule({
+  imports: [
+    EntityCatalogModule.forFeature(generateASEntities),
+    EffectsModule.forFeature([
+      AutoscalerEffects
+    ]),
+  ],
+})
+export class CfAutoscalerPackageModule { }
+

src/frontend/packages/cf-autoscaler/src/cf-autoscaler-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+// Things in this path include add/edit policy stepper, policy metrics page and policy events page
+// They're include like this to ensure those parts are lazy loaded.
+// The core application policy tab is included via CfAutoscalerModule, which is imported in the Application Module
+const customRoutes: Routes = [
+  {
+    path: 'autoscaler',
+    loadChildren: () => import('./core/autoscaler.module').then(m => m.AutoscalerModule),
+    data: {
+      // Required to place content in the mat-drawer-content/.page-content container
+      stratosNavigationPage: true
+    },
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(customRoutes),
+  ],
+})
+export class CfAutoscalerRoutingModule { }

src/frontend/packages/cf-autoscaler/src/cf-autoscaler.module.ts

@@ -1,57 +1,31 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { EffectsModule } from '@ngrx/effects';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { of } from 'rxjs';
+import { ExtensionService } from 'frontend/packages/core/src/core/extension/extension-service';
 
 import { CloudFoundrySharedModule } from '../../cloud-foundry/src/shared/cf-shared.module';
 import { CoreModule } from '../../core/src/core/core.module';
 import { MDAppModule } from '../../core/src/core/md.module';
 import { SharedModule } from '../../core/src/shared/shared.module';
-import { EntityCatalogModule } from '../../store/src/entity-catalog.module';
-import { AutoscalerModule } from './core/autoscaler.module';
 import { AutoscalerTabExtensionComponent } from './features/autoscaler-tab-extension/autoscaler-tab-extension.component';
-import { generateASEntities } from './store/autoscaler-entity-generator';
-import { AutoscalerEffects } from './store/autoscaler.effects';
-import { ExtensionService } from 'frontend/packages/core/src/core/extension/extension-service';
+import { CardAutoscalerDefaultComponent } from './shared/card-autoscaler-default/card-autoscaler-default.component';
 
-// FIXME Work out why we need this and remove it.
-const customRoutes: Routes = [
-  {
-    path: 'autoscaler',
-    loadChildren: () => import('./core/autoscaler.module').then(m => m.AutoscalerModule),
-    data: {
-      stratosNavigation: {
-        text: 'Applications',
-        matIcon: 'apps',
-        position: 20,
-        hidden: of(true)
-      }
-    },
-  },
-];
 
 @NgModule({
   imports: [
     CoreModule,
     CommonModule,
     SharedModule,
     MDAppModule,
-    NgxChartsModule,
     CloudFoundrySharedModule,
-    AutoscalerModule,
-    RouterModule.forRoot(customRoutes),
-    EntityCatalogModule.forFeature(generateASEntities),
-    EffectsModule.forFeature([
-      AutoscalerEffects
-    ]),
+    NgxChartsModule,
     ExtensionService.declare([
       AutoscalerTabExtensionComponent,
     ])
   ],
   declarations: [
-    AutoscalerTabExtensionComponent
+    CardAutoscalerDefaultComponent,
+    AutoscalerTabExtensionComponent,
   ]
 })
 export class CfAutoscalerModule { }

src/frontend/packages/cf-autoscaler/src/core/autoscaler.module.ts

@@ -1,7 +1,11 @@
+import { DatePipe } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 import { ApplicationService } from '../../../cloud-foundry/src/features/applications/application.service';
+import {
+  ApplicationEnvVarsHelper,
+} from '../../../cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/application-env-vars.service';
 import { CloudFoundrySharedModule } from '../../../cloud-foundry/src/shared/cf-shared.module';
 import { CoreModule } from '../../../core/src/core/core.module';
 import { SharedModule } from '../../../core/src/shared/shared.module';
@@ -26,7 +30,6 @@ import {
   EditAutoscalerPolicyStep4Component,
 } from '../features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component';
 import { EditAutoscalerPolicyComponent } from '../features/edit-autoscaler-policy/edit-autoscaler-policy.component';
-import { CardAutoscalerDefaultComponent } from '../shared/card-autoscaler-default/card-autoscaler-default.component';
 import {
   TableCellAutoscalerEventChangeIconPipe,
 } from '../shared/list-types/app-autoscaler-event/table-cell-autoscaler-event-change/table-cell-autoscaler-event-change-icon.pipe';
@@ -69,7 +72,6 @@ import { AutoscalerRoutingModule } from './autoscaler.routing';
     EditAutoscalerPolicyStep3Component,
     EditAutoscalerPolicyStep4Component,
     EditAutoscalerCredentialComponent,
-    CardAutoscalerDefaultComponent,
     AppAutoscalerMetricChartCardComponent,
     AppAutoscalerComboChartComponent,
     AppAutoscalerComboSeriesVerticalComponent,
@@ -78,11 +80,10 @@ import { AutoscalerRoutingModule } from './autoscaler.routing';
     TableCellAutoscalerEventStatusIconPipe,
     TableCellAutoscalerEventChangeIconPipe,
   ],
-  exports: [
-    CardAutoscalerDefaultComponent
-  ],
   providers: [
-    ApplicationService
+    ApplicationService,
+    ApplicationEnvVarsHelper,
+    DatePipe
   ]
 })
 export class AutoscalerModule { }

src/frontend/packages/cf-autoscaler/src/public_api.ts

@@ -2,5 +2,6 @@
  * Public API Surface of cloud-foundry
  */
 
-// export * from './lib/cloud-foundry.service';
-export * from './lib/cf-autoscaler.module';
+export * from './cf-autoscaler-package.module';
+export * from './cf-autoscaler-routing.module';
+export * from './core/autoscaler-helpers/autoscaler-available';

src/frontend/packages/cloud-foundry/package.json

@@ -1,12 +1,13 @@
 {
-  "name": "cloud-foundry",
+  "name": "@stratosui/cloud-foundry",
   "version": "0.0.1",
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
     "@angular/core": "^6.0.0-rc.0 || ^6.0.0"
   },
   "stratos": {
+    "module": "CloudFoundryPackageModule",
+    "routingModule": "CloudFoundryRoutingModule",
     "theming": "sass/_all-theme#apply-theme-stratos-cloud-foundry"
   }
-
-}
+}

src/frontend/packages/cloud-foundry/sass/_all-theme.scss

@@ -1,12 +1,27 @@
 // Theming for the copmponents in the Cloud Foundry package
 
+
 @import '../src/features/applications/application-wall/application-wall.component.theme';
+@import '../src/features/services/services-wall/services-wall.component.theme';
+@import '../src/features/service-catalog/service-catalog-page/service-catalog-page.component.theme';
+
 @import '../src/shared/components/list/list-types/cf-security-groups/cf-security-groups-card/cf-security-groups-card.component.theme';
+@import '../src/shared/components/schema-form/schema-form.component.theme';
+@import '../src/features/cloud-foundry/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.theme';
+@import '../src/features/applications/deploy-application/deploy-application.component.theme';
+@import '../src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.theme';
+@import '../src/features/cloud-foundry/tabs/cloud-foundry-firehose/cloud-foundry-firehose.component.theme';
 
 @mixin apply-theme-stratos-cloud-foundry($stratos-theme) {
 
   $theme: map-get($stratos-theme, theme);
   $app-theme: map-get($stratos-theme, app-theme);
 
   @include cf-security-group-theme($theme);
+  @include app-schema-form-theme($theme, $app-theme);
+  @include cf-admin-add-user-warning($theme, $app-theme);
+  @include app-deploy-app-theme($theme, $app-theme);
+  @include app-deploy-app-fs-component-theme($theme, $app-theme);
+  @include app-cloud-foundry-firehose-theme($theme, $app-theme);
+
 }

src/frontend/packages/cloud-foundry/sass/mixins.scss

@@ -0,0 +1,20 @@
+@mixin apply-smaller-list-input {
+
+  @include breakpoint(phablet) {
+    .list-component__header__right-filter {
+      width: 140px;
+    }
+    .list-component__header__right-sort {
+      width: 120px;
+    }
+  }
+
+  @include breakpoint(laptop) {
+    .list-component__header__right-filter {
+      width: inherit;
+    }
+    .list-component__header__right-sort {
+      width: inherit;
+    }
+  }
+}

src/frontend/packages/cloud-foundry/src/cloud-foundry-package.module.ts

@@ -5,14 +5,10 @@ import { MDAppModule } from '../../core/src/core/md.module';
 import { SharedModule } from '../../core/src/shared/shared.module';
 import { EntityCatalogModule } from '../../store/src/entity-catalog.module';
 import { generateCFEntities } from './cf-entity-generator';
-import { ApplicationsModule } from './features/applications/applications.module';
-import { CloudFoundryModule } from './features/cloud-foundry/cloud-foundry.module';
-import { ServiceCatalogModule } from './features/service-catalog/service-catalog.module';
-import { ServicesModule } from './features/services/services.module';
-import { CloudFoundrySharedModule } from './shared/cf-shared.module';
 import { CfUserService } from './shared/data-services/cf-user.service';
 import { CloudFoundryService } from './shared/data-services/cloud-foundry.service';
 import { LongRunningCfOperationsService } from './shared/data-services/long-running-cf-op.service';
+import { GitSCMService } from './shared/data-services/scm/scm.service';
 import { ServiceActionHelperService } from './shared/data-services/service-action-helper.service';
 import { CloudFoundryUserProvidedServicesService } from './shared/services/cloud-foundry-user-provided-services.service';
 import { CloudFoundryStoreModule } from './store/cloud-foundry.store.module';
@@ -24,18 +20,7 @@ import { cfCurrentUserPermissionsService } from './user-permissions/cf-user-perm
     CommonModule,
     SharedModule,
     MDAppModule,
-    ApplicationsModule,
-    CloudFoundryModule,
-    ServiceCatalogModule,
-    ServicesModule,
     CloudFoundryStoreModule,
-    // FIXME: Ensure that anything lazy loaded is not included here - #3675
-    CloudFoundrySharedModule,
-    // FIXME: Move cf effects into cf module - #3675
-    // EffectsModule.for Root([
-    //   PermissionsEffects,
-    //   PermissionEffects
-    // ])
   ],
   providers: [
     ...cfCurrentUserPermissionsService,
@@ -44,6 +29,7 @@ import { cfCurrentUserPermissionsService } from './user-permissions/cf-user-perm
     ServiceActionHelperService,
     LongRunningCfOperationsService,
     CloudFoundryUserProvidedServicesService,
+    GitSCMService,
   ]
 })
 export class CloudFoundryPackageModule { }

src/frontend/packages/cloud-foundry/src/cloud-foundry-routing.module.ts

@@ -0,0 +1,64 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const customRoutes: Routes = [
+  {
+    path: 'applications',
+    loadChildren: () => import('./features/applications/applications.module').then(m => m.ApplicationsModule),
+    data: {
+      stratosNavigation: {
+        label: 'Applications',
+        matIcon: 'apps',
+        requiresEndpointType: 'cf',
+        position: 20
+      }
+    },
+  },
+  {
+    path: 'marketplace',
+    loadChildren: () => import('./features/service-catalog/service-catalog.module')
+      .then(m => m.ServiceCatalogModule),
+    data: {
+      stratosNavigation: {
+        label: 'Marketplace',
+        matIcon: 'store',
+        requiresEndpointType: 'cf',
+        position: 30
+      }
+    },
+  },
+  {
+    path: 'services',
+    loadChildren: () => import('./features/services/services.module').then(m => m.ServicesModule),
+    data: {
+      stratosNavigation: {
+        label: 'Services',
+        matIcon: 'service',
+        matIconFont: 'stratos-icons',
+        requiresEndpointType: 'cf',
+        position: 40
+      }
+    },
+  },
+  {
+    path: 'cloud-foundry',
+    loadChildren: () => import('./features/cloud-foundry/cloud-foundry-section.module').then(m => m.CloudFoundrySectionModule),
+    data: {
+      stratosNavigation: {
+        label: 'Cloud Foundry',
+        matIcon: 'cloud_foundry',
+        matIconFont: 'stratos-icons',
+        requiresEndpointType: 'cf',
+        position: 50
+      }
+    },
+  },
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(customRoutes),
+  ],
+  declarations: []
+})
+export class CloudFoundryRoutingModule { }

src/frontend/packages/cloud-foundry/src/cloud-foundry-test.module.ts

@@ -29,7 +29,7 @@ import { CloudFoundryStoreModule } from './store/cloud-foundry.store.module';
             return [
               ...generateCFEntities(),
               ...generateStratosEntities(),
-              ...generateASEntities(), // FIXME: CF should not depend on autoscaler. See #3916
+              ...generateASEntities(), // FIXME: Remove hard link between cf and autoscaler packages #4416
             ];
           }
         }

src/frontend/packages/cloud-foundry/src/features/applications/application-wall/application-wall.component.theme.scss

@@ -1,9 +1,6 @@
-// For the App Wall, reduce the size of the filter and sort
+@import '../../../../sass/mixins';
+
 .app-wall {
-  .list-component__header__right-filter {
-    width: 140px;
-  }
-  .list-component__header__right-sort {
-    width: 120px;
-  }
+  @include apply-smaller-list-input;
 }
+