refactor(cf): separate SG details sections (#6291)

Co-Authored-By: Jammy Louie <jlouie@pivotal.io>

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

@@ -11,7 +11,16 @@ import { SERVER_GROUP_DETAILS_MODULE } from './serverGroup/details/serverGroupDe
 import { CLOUD_FOUNDRY_SEARCH_FORMATTER } from './search/searchResultFormatter';
 import './help/cloudfoundry.help';
 
-import { CloudFoundryInfoDetailsSection } from 'cloudfoundry/serverGroup';
+import {
+  ServerGroupInformationSection,
+  ApplicationManagerSection,
+  MetricsSection,
+  ServerGroupSizingSection,
+  HealthCheckSection,
+  PackageSection,
+  BoundServicesSection,
+  EvironmentVariablesSection,
+} from 'cloudfoundry/serverGroup';
 import { CloudFoundryServerGroupActions } from './serverGroup/details/cloudFoundryServerGroupActions';
 import { cfServerGroupDetailsGetter } from './serverGroup/details/cfServerGroupDetailsGetter';
 
@@ -69,7 +78,16 @@ module(CLOUD_FOUNDRY_MODULE, [
       transformer: 'cfServerGroupTransformer',
       detailsActions: CloudFoundryServerGroupActions,
       detailsGetter: cfServerGroupDetailsGetter,
-      detailsSections: [CloudFoundryInfoDetailsSection],
+      detailsSections: [
+        ServerGroupInformationSection,
+        ApplicationManagerSection,
+        MetricsSection,
+        ServerGroupSizingSection,
+        HealthCheckSection,
+        PackageSection,
+        BoundServicesSection,
+        EvironmentVariablesSection,
+      ],
       CloneServerGroupModal: CloudFoundryCreateServerGroupModal,
       commandBuilder: 'cfServerGroupCommandBuilder',
       scalingActivitiesEnabled: false, // FIXME enable?

app/scripts/modules/cloudfoundry/src/serverGroup/configure/serverGroupCommandBuilder.service.cf.ts

@@ -86,9 +86,9 @@ export class CloudFoundryServerGroupCommandBuilder {
         memory: serverGroup.memory ? serverGroup.memory + 'M' : '1024M',
         diskQuota: serverGroup.diskQuota ? serverGroup.diskQuota + 'M' : '1024M',
         buildpacks:
-          serverGroup.droplet && serverGroup.droplet.buildpacks.length > 0
-            ? serverGroup.droplet.buildpacks[0].name
-            : '',
+          serverGroup.droplet && serverGroup.droplet.buildpacks
+            ? serverGroup.droplet.buildpacks.map(item => item.name)
+            : [],
         instances: serverGroup.instances ? serverGroup.instances.length : 1,
         routes: serverGroup.loadBalancers,
         environment: CloudFoundryServerGroupCommandBuilder.envVarsFromObject(serverGroup.env),

app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/ApplicationManagerSection.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { CollapsibleSection } from '@spinnaker/core';
+import { ICloudFoundryServerGroupDetailsSectionProps } from './ICloudFoundryServerGroupDetailsSectionProps';
+
+export class ApplicationManagerSection extends React.Component<ICloudFoundryServerGroupDetailsSectionProps> {
+  constructor(props: ICloudFoundryServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    return (
+      <>
+        {serverGroup.appsManagerUri && (
+          <CollapsibleSection heading="Apps Manager" defaultExpanded={true}>
+            <div>
+              <a href={serverGroup.appsManagerUri} target="_blank">
+                Apps Manager
+              </a>
+            </div>
+          </CollapsibleSection>
+        )}
+      </>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/BoundServicesSection.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { isEmpty } from 'lodash';
+
+import { CollapsibleSection } from '@spinnaker/core';
+
+import { ICloudFoundryServiceInstance } from 'cloudfoundry/domain';
+import { ICloudFoundryServerGroupDetailsSectionProps } from './ICloudFoundryServerGroupDetailsSectionProps';
+
+export class BoundServicesSection extends React.Component<ICloudFoundryServerGroupDetailsSectionProps> {
+  constructor(props: ICloudFoundryServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    return (
+      <>
+        {!isEmpty(serverGroup.serviceInstances) && (
+          <CollapsibleSection heading="Bound Services" defaultExpanded={true}>
+            <dl className="dl-horizontal dl-flex">
+              {serverGroup.serviceInstances.map(function(service: ICloudFoundryServiceInstance, index: number) {
+                return (
+                  <div key={index}>
+                    <dt>Name</dt>
+                    <dd>{service.name}</dd>
+                    <dt>Plan</dt>
+                    <dd>{service.plan}</dd>
+                    <dt>Tags</dt>
+                    {service.tags && <dd>{service.tags.join(', ')}</dd>}
+                  </div>
+                );
+              })}
+            </dl>
+          </CollapsibleSection>
+        )}
+      </>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/EvironmentVariablesSection.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { isEmpty, map } from 'lodash';
+
+import { CollapsibleSection } from '@spinnaker/core';
+
+import { ICloudFoundryEnvVar } from 'cloudfoundry/domain';
+import { ICloudFoundryServerGroupDetailsSectionProps } from './ICloudFoundryServerGroupDetailsSectionProps';
+
+export class EvironmentVariablesSection extends React.Component<ICloudFoundryServerGroupDetailsSectionProps> {
+  constructor(props: ICloudFoundryServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    return (
+      <>
+        {!isEmpty(serverGroup.env) && (
+          <CollapsibleSection heading="Environment Variables" defaultExpanded={true}>
+            <dl className="dl-horizontal dl-flex">
+              {map(serverGroup.env, (obj: ICloudFoundryEnvVar, index: number) => {
+                return (
+                  <div key={index}>
+                    <dt>{obj.key}</dt>
+                    <dd>{obj.value}</dd>
+                  </div>
+                );
+              })}
+            </dl>
+          </CollapsibleSection>
+        )}
+      </>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/HealthCheckSection.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { CollapsibleSection } from '@spinnaker/core';
+import { ICloudFoundryServerGroupDetailsSectionProps } from './ICloudFoundryServerGroupDetailsSectionProps';
+
+export class HealthCheckSection extends React.Component<ICloudFoundryServerGroupDetailsSectionProps> {
+  constructor(props: ICloudFoundryServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    return (
+      <CollapsibleSection heading="Health Check" defaultExpanded={true}>
+        <dl className="dl-horizontal dl-flex">
+          <dt>Type</dt>
+          <dd>{serverGroup.healthCheckType === undefined ? 'port' : serverGroup.healthCheckType}</dd>
+          {serverGroup.healthCheckType === 'http' && (
+            <div>
+              <dt>Endpoint</dt>
+              <dd>{serverGroup.healthCheckHttpEndpoint}</dd>
+            </div>
+          )}
+        </dl>
+      </CollapsibleSection>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/ICloudFoundryServerGroupDetailsSectionProps.ts

@@ -0,0 +1,7 @@
+import { IServerGroupDetailsSectionProps } from '@spinnaker/core';
+
+import { ICloudFoundryServerGroup } from 'cloudfoundry/domain';
+
+export interface ICloudFoundryServerGroupDetailsSectionProps extends IServerGroupDetailsSectionProps {
+  serverGroup: ICloudFoundryServerGroup;
+}

app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/MetricsSection.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { CollapsibleSection } from '@spinnaker/core';
+import { ICloudFoundryServerGroupDetailsSectionProps } from './ICloudFoundryServerGroupDetailsSectionProps';
+
+export class MetricsSection extends React.Component<ICloudFoundryServerGroupDetailsSectionProps> {
+  constructor(props: ICloudFoundryServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    return (
+      <>
+        {serverGroup.metricsUri && (
+          <CollapsibleSection heading="Metrics" defaultExpanded={true}>
+            <div>
+              <a href={serverGroup.metricsUri} target="_blank">
+                Metrics
+              </a>
+            </div>
+          </CollapsibleSection>
+        )}
+      </>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/PackageSection.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { CollapsibleSection } from '@spinnaker/core';
+
+import { ICloudFoundryServerGroupDetailsSectionProps } from './ICloudFoundryServerGroupDetailsSectionProps';
+
+export class PackageSection extends React.Component<ICloudFoundryServerGroupDetailsSectionProps> {
+  constructor(props: ICloudFoundryServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    return (
+      <>
+        {serverGroup.droplet &&
+          serverGroup.droplet.sourcePackage && (
+            <CollapsibleSection heading="Package" defaultExpanded={true}>
+              <dl className="dl-horizontal dl-flex">
+                <dt>Checksum</dt>
+                <dd>{serverGroup.droplet.sourcePackage.checksum}</dd>
+              </dl>
+            </CollapsibleSection>
+          )}
+      </>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/ServerGroupInformationSection.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import { AccountTag, CollapsibleSection, timestamp } from '@spinnaker/core';
+
+import { ICloudFoundryBuildpack } from 'cloudfoundry/domain';
+import { ICloudFoundryServerGroupDetailsSectionProps } from './ICloudFoundryServerGroupDetailsSectionProps';
+
+export class ServerGroupInformationSection extends React.Component<ICloudFoundryServerGroupDetailsSectionProps> {
+  constructor(props: ICloudFoundryServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    return (
+      <CollapsibleSection heading="Server Group Information" defaultExpanded={true}>
+        <dl className="dl-horizontal dl-flex">
+          <dt>Created</dt>
+          <dd>{timestamp(serverGroup.createdTime)}</dd>
+          <dt>Account</dt>
+          <dd>
+            <AccountTag account={serverGroup.account} />
+          </dd>
+          <dt>Organization</dt>
+          <dd>{serverGroup.space.organization.name}</dd>
+          <dt>Space</dt>
+          <dd>{serverGroup.space.name}</dd>
+          {serverGroup.droplet && (
+            <div>
+              <dt>Rootfs</dt>
+              <dd>{serverGroup.droplet.stack}</dd>
+              <dt>Buildpack</dt>
+              {serverGroup.droplet.buildpacks ? (
+                serverGroup.droplet.buildpacks.map(function(buildpack: ICloudFoundryBuildpack, index: number) {
+                  return (
+                    <dd key={index}>
+                      {buildpack.name} {buildpack.version}
+                    </dd>
+                  );
+                })
+              ) : (
+                <dd>n/a</dd>
+              )}
+            </div>
+          )}
+        </dl>
+      </CollapsibleSection>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/ServerGroupSizingSection.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { CollapsibleSection } from '@spinnaker/core';
+
+import { ICloudFoundryServerGroupDetailsSectionProps } from './ICloudFoundryServerGroupDetailsSectionProps';
+
+export class ServerGroupSizingSection extends React.Component<ICloudFoundryServerGroupDetailsSectionProps> {
+  constructor(props: ICloudFoundryServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    return (
+      <CollapsibleSection heading="Server Group Sizing" defaultExpanded={true}>
+        <dl className="dl-horizontal dl-flex">
+          <dt>Instances</dt>
+          <dd>{serverGroup.instances.length}</dd>
+          <dt>Disk Mb</dt>
+          <dd>{serverGroup.diskQuota}</dd>
+          <dt>Memory Mb</dt>
+          <dd>{serverGroup.memory}</dd>
+        </dl>
+      </CollapsibleSection>
+    );
+  }
+}