feat(cf): Reduce angular dependencies (spinnaker#6893)

spinnaker/spinnaker#4298

Co-Authored-By: Stu Pollock <spollock@pivotal.io>

app/scripts/app.ts

@@ -12,14 +12,13 @@ import { ORACLE_MODULE } from '@spinnaker/oracle';
 import { KAYENTA_MODULE } from '@spinnaker/kayenta';
 import { TITUS_MODULE } from '@spinnaker/titus';
 import { ECS_MODULE } from '@spinnaker/ecs';
-import { CLOUD_FOUNDRY_MODULE } from '@spinnaker/cloudfoundry';
+import '@spinnaker/cloudfoundry';
 
 module('netflix.spinnaker', [
   CORE_MODULE,
   AMAZON_MODULE,
   GOOGLE_MODULE,
   ECS_MODULE,
-  CLOUD_FOUNDRY_MODULE,
   require('./modules/azure/azure.module').name,
   KUBERNETES_V1_MODULE,
   DOCKER_MODULE,

app/scripts/modules/cloudfoundry/src/cf.module.ts

@@ -1,29 +1,32 @@
-import { module } from 'angular';
-
 import { CloudProviderRegistry } from '@spinnaker/core';
 
-import { CLOUD_FOUNDRY_LOAD_BALANCER_MODULE } from './loadBalancer/loadBalancer.module';
-import { CLOUD_FOUNDRY_REACT_MODULE } from './reactShims/cf.react.module';
-import { CLOUD_FOUNDRY_SERVER_GROUP_TRANSFORMER } from './serverGroup/serverGroup.transformer';
-import { CLOUD_FOUNDRY_SERVER_GROUP_COMMAND_BUILDER } from './serverGroup/configure/serverGroupCommandBuilder.service.cf';
-import { CLOUD_FOUNDRY_SEARCH_FORMATTER } from './search/searchResultFormatter';
 import './help/cloudfoundry.help';
+import './logo/cf.logo.less';
+
+import {
+  CloudFoundryLoadBalancerDetails,
+  CloudFoundryLoadBalancerTransformer,
+  CloudFoundryNoLoadBalancerModal,
+} from 'cloudfoundry/loadBalancer';
 
 import {
-  ServerGroupInformationSection,
   ApplicationManagerSection,
-  MetricsSection,
-  ServerGroupSizingSection,
-  HealthCheckSection,
-  PackageSection,
   BoundServicesSection,
+  cfServerGroupDetailsGetter,
+  CloudFoundryCreateServerGroupModal,
+  CloudFoundryServerGroupActions,
+  CloudFoundryServerGroupCommandBuilder,
+  CloudFoundryServerGroupTransformer,
   EvironmentVariablesSection,
+  HealthCheckSection,
+  MetricsSection,
+  PackageSection,
+  ServerGroupInformationSection,
+  ServerGroupSizingSection,
 } from 'cloudfoundry/serverGroup';
-import { CloudFoundryServerGroupActions } from './serverGroup/details/cloudFoundryServerGroupActions';
-import { cfServerGroupDetailsGetter } from './serverGroup/details/cfServerGroupDetailsGetter';
 
-import './logo/cf.logo.less';
-import { CloudFoundryNoLoadBalancerModal } from './loadBalancer/configure/cloudFoundryNoLoadBalancerModal';
+import { CloudFoundryInstanceDetails } from 'cloudfoundry/instance/details';
+
 import 'cloudfoundry/pipeline/config/validation/cfTargetImpedance.validator';
 import 'cloudfoundry/pipeline/config/validation/instanceSize.validator';
 import 'cloudfoundry/pipeline/config/validation/requiredRoutes.validator';
@@ -41,60 +44,37 @@ import './pipeline/stages/rollbackCluster/cloudfoundryRollbackClusterStage.modul
 import './pipeline/stages/shareService/cloudfoundryShareServiceStage.module';
 import './pipeline/stages/unmapLoadBalancers/cloudfoundryUnmapLoadBalancersStage.module';
 import './pipeline/stages/unshareService/cloudfoundryUnshareServiceStage.module';
-import { CloudFoundryCreateServerGroupModal } from 'cloudfoundry/serverGroup/configure/wizard/CreateServerGroupModal';
-import { CLOUD_FOUNDRY_INSTANCE_DETAILS } from 'cloudfoundry/instance/details/cloudfoundryInstanceDetails.module';
-
-// load all templates into the $templateCache
-const templates = require.context('./', true, /\.html$/);
-templates.keys().forEach(function(key) {
-  templates(key);
-});
 
-export const CLOUD_FOUNDRY_MODULE = 'spinnaker.cloudfoundry';
-module(CLOUD_FOUNDRY_MODULE, [
-  CLOUD_FOUNDRY_INSTANCE_DETAILS,
-  CLOUD_FOUNDRY_LOAD_BALANCER_MODULE,
-  CLOUD_FOUNDRY_REACT_MODULE,
-  CLOUD_FOUNDRY_SEARCH_FORMATTER,
-  CLOUD_FOUNDRY_SERVER_GROUP_COMMAND_BUILDER,
-  CLOUD_FOUNDRY_SERVER_GROUP_TRANSFORMER,
-]).config(() => {
-  CloudProviderRegistry.registerProvider('cloudfoundry', {
-    name: 'Cloud Foundry',
-    logo: {
-      path: require('./logo/cf.logo.svg'),
-    },
-    loadBalancer: {
-      transformer: 'cfLoadBalancerTransformer',
-      detailsTemplateUrl: require('./loadBalancer/details/cloudFoundryLoadBalancerDetails.html'),
-      detailsController: 'cloudfoundryLoadBalancerDetailsCtrl',
-      CreateLoadBalancerModal: CloudFoundryNoLoadBalancerModal,
-    },
-    serverGroup: {
-      skipUpstreamStageCheck: true,
-      transformer: 'cfServerGroupTransformer',
-      detailsActions: CloudFoundryServerGroupActions,
-      detailsGetter: cfServerGroupDetailsGetter,
-      detailsSections: [
-        ServerGroupInformationSection,
-        ApplicationManagerSection,
-        MetricsSection,
-        ServerGroupSizingSection,
-        HealthCheckSection,
-        PackageSection,
-        BoundServicesSection,
-        EvironmentVariablesSection,
-      ],
-      CloneServerGroupModal: CloudFoundryCreateServerGroupModal,
-      commandBuilder: 'cfServerGroupCommandBuilder',
-      scalingActivitiesEnabled: false, // FIXME enable?
-    },
-    search: {
-      resultFormatter: 'cfSearchResultFormatter',
-    },
-    instance: {
-      detailsTemplateUrl: require('./instance/details/cloudFoundryInstanceDetails.html'),
-      detailsController: 'cfInstanceDetailsCtrl',
-    },
-  });
+CloudProviderRegistry.registerProvider('cloudfoundry', {
+  name: 'Cloud Foundry',
+  logo: {
+    path: require('./logo/cf.logo.svg'),
+  },
+  loadBalancer: {
+    transformer: CloudFoundryLoadBalancerTransformer,
+    details: CloudFoundryLoadBalancerDetails,
+    CreateLoadBalancerModal: CloudFoundryNoLoadBalancerModal,
+  },
+  serverGroup: {
+    skipUpstreamStageCheck: true,
+    transformer: CloudFoundryServerGroupTransformer,
+    detailsActions: CloudFoundryServerGroupActions,
+    detailsGetter: cfServerGroupDetailsGetter,
+    detailsSections: [
+      ServerGroupInformationSection,
+      ApplicationManagerSection,
+      MetricsSection,
+      ServerGroupSizingSection,
+      HealthCheckSection,
+      PackageSection,
+      BoundServicesSection,
+      EvironmentVariablesSection,
+    ],
+    CloneServerGroupModal: CloudFoundryCreateServerGroupModal,
+    commandBuilder: CloudFoundryServerGroupCommandBuilder,
+    scalingActivitiesEnabled: false, // FIXME enable?
+  },
+  instance: {
+    details: CloudFoundryInstanceDetails,
+  },
 });

app/scripts/modules/cloudfoundry/src/index.ts

@@ -1,8 +1,7 @@
-export { CLOUD_FOUNDRY_MODULE } from './cf.module';
+export * from './cf.module';
 export * from './cf.settings';
 
 export * from './domain/index';
 export * from './loadBalancer/index';
 export * from './presentation/index';
-export * from './reactShims/index';
 export * from './serverGroup/index';

app/scripts/modules/cloudfoundry/src/instance/details/CloudFoundryInstanceDetails.tsx

@@ -2,29 +2,104 @@ import * as React from 'react';
 import { UISref } from '@uirouter/react';
 import { UIRouterContext } from '@uirouter/react-hybrid';
 
-import { Application, ConfirmationModalService, InstanceWriter, Spinner } from '@spinnaker/core';
+import {
+  Application,
+  ConfirmationModalService,
+  InstanceReader,
+  InstanceWriter,
+  RecentHistoryService,
+  Spinner,
+} from '@spinnaker/core';
 
 import { ICloudFoundryInstance } from 'cloudfoundry/domain';
 import { CloudFoundryInstanceDetailsSection } from 'cloudfoundry/instance/details/sections';
 import { CloudFoundryInstanceActions } from 'cloudfoundry/instance/details/CloudFoundryInstanceActions';
+import { flattenDeep } from 'lodash';
 
-export interface ICloudFoundryInstanceDetailsProps {
-  application: Application;
-  confirmationModalService: ConfirmationModalService;
-  instance: ICloudFoundryInstance;
+interface InstanceFromStateParams {
+  instanceId: string;
+}
+
+interface InstanceManager {
+  account: string;
+  region: string;
+  category: string; // e.g., serverGroup, loadBalancer.
+  name: string; // Parent resource name, not instance name.
+  instances: ICloudFoundryInstance[];
+}
+
+interface ICloudFoundryInstanceDetailsState {
+  instance?: ICloudFoundryInstance;
   instanceIdNotFound: string;
+  loading: boolean;
+}
+
+interface ICloudFoundryInstanceDetailsProps {
+  app: Application;
+  confirmationModalService: ConfirmationModalService;
+  instance: InstanceFromStateParams;
   instanceWriter: InstanceWriter;
   loading: boolean;
 }
 
 @UIRouterContext
-export class CloudFoundryInstanceDetails extends React.Component<ICloudFoundryInstanceDetailsProps> {
+export class CloudFoundryInstanceDetails extends React.Component<
+  ICloudFoundryInstanceDetailsProps,
+  ICloudFoundryInstanceDetailsState
+> {
   constructor(props: ICloudFoundryInstanceDetailsProps) {
     super(props);
+
+    this.state = {
+      loading: true,
+      instanceIdNotFound: props.instance.instanceId,
+    };
+  }
+
+  public componentDidMount(): void {
+    this.props.app.ready().then(() => this.retrieveInstance(this.props.instance));
+  }
+
+  private retrieveInstance(instanceFromParams: InstanceFromStateParams): void {
+    const instanceLocatorPredicate = (dataSource: InstanceManager) => {
+      return dataSource.instances.some(possibleMatch => possibleMatch.id === instanceFromParams.instanceId);
+    };
+
+    const dataSources: InstanceManager[] = flattenDeep([
+      this.props.app.getDataSource('serverGroups').data,
+      this.props.app.getDataSource('loadBalancers').data,
+      this.props.app.getDataSource('loadBalancers').data.map(loadBalancer => loadBalancer.serverGroups),
+    ]);
+
+    const instanceManager = dataSources.find(instanceLocatorPredicate);
+
+    if (instanceManager) {
+      const recentHistoryExtraData: { [key: string]: string } = {
+        region: instanceManager.region,
+        account: instanceManager.account,
+      };
+      if (instanceManager.category === 'serverGroup') {
+        recentHistoryExtraData.serverGroup = instanceManager.name;
+      }
+      RecentHistoryService.addExtraDataToLatest('instances', recentHistoryExtraData);
+      InstanceReader.getInstanceDetails(instanceManager.account, instanceManager.region, instanceFromParams.instanceId)
+        .then((instanceDetails: ICloudFoundryInstance) => {
+          instanceDetails.account = instanceManager.account;
+          instanceDetails.region = instanceManager.region;
+          return instanceDetails;
+        })
+        .then(instance => {
+          this.setState({
+            instance,
+            loading: false,
+          });
+        });
+    }
   }
 
   public render(): JSX.Element {
-    const { application, confirmationModalService, instance, instanceIdNotFound, instanceWriter, loading } = this.props;
+    const { app, confirmationModalService, instanceWriter } = this.props;
+    const { instance, instanceIdNotFound, loading } = this.state;
     const CloseButton = (
       <div className="close-button">
         <UISref to="^">
@@ -56,7 +131,7 @@ export class CloudFoundryInstanceDetails extends React.Component<ICloudFoundryIn
           <h3 className="horizontal middle space-between flex-1">{instance.name}</h3>
         </div>
         <CloudFoundryInstanceActions
-          application={application}
+          application={app}
           confirmationModalService={confirmationModalService}
           instance={instance}
           instanceWriter={instanceWriter}