refactor(core/serverGroup): Extract capacity details components to re…

…use across providers (#7182)

app/scripts/modules/amazon/src/aws.module.ts

@@ -30,7 +30,7 @@ import { amazonServerGroupDetailsGetter } from './serverGroup/details/amazonServ
 import {
   AdvancedSettingsDetailsSection,
   AmazonInfoDetailsSection,
-  CapacityDetailsSection,
+  AmazonCapacityDetailsSection,
   HealthDetailsSection,
   LaunchConfigDetailsSection,
   LogsDetailsSection,
@@ -95,7 +95,7 @@ module(AMAZON_MODULE, [
       detailsGetter: amazonServerGroupDetailsGetter,
       detailsSections: [
         AmazonInfoDetailsSection,
-        CapacityDetailsSection,
+        AmazonCapacityDetailsSection,
         HealthDetailsSection,
         LaunchConfigDetailsSection,
         SecurityGroupsDetailsSection,

app/scripts/modules/amazon/src/serverGroup/details/sections/AmazonCapacityDetailsSection.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { CollapsibleSection, NgReact, Overridable, ICapacity, CapacityDetailsSection } from '@spinnaker/core';
+
+import { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import { AmazonResizeServerGroupModal } from '../resize/AmazonResizeServerGroupModal';
+
+@Overridable('amazon.serverGroup.CapacityDetailsSection')
+export class AmazonCapacityDetailsSection extends React.Component<IAmazonServerGroupDetailsSectionProps> {
+  public render(): JSX.Element {
+    const { serverGroup, app: application } = this.props;
+    const { ViewScalingActivitiesLink } = NgReact;
+
+    const capacity: ICapacity = {
+      min: serverGroup.asg.minSize,
+      max: serverGroup.asg.maxSize,
+      desired: serverGroup.asg.desiredCapacity,
+    };
+
+    return (
+      <CollapsibleSection heading="Capacity" defaultExpanded={true}>
+        <CapacityDetailsSection current={serverGroup.instances.length} capacity={capacity} />
+
+        <div>
+          <a className="clickable" onClick={() => AmazonResizeServerGroupModal.show({ application, serverGroup })}>
+            Resize Server Group
+          </a>
+        </div>
+
+        <div>
+          <ViewScalingActivitiesLink serverGroup={serverGroup} />
+        </div>
+      </CollapsibleSection>
+    );
+  }
+}

app/scripts/modules/amazon/src/serverGroup/details/sections/index.ts

@@ -1,6 +1,6 @@
 export * from './AdvancedSettingsDetailsSection';
 export * from './AmazonInfoDetailsSection';
-export * from './CapacityDetailsSection';
+export * from './AmazonCapacityDetailsSection';
 export * from './HealthDetailsSection';
 export * from './IAmazonServerGroupDetailsSectionProps';
 export * from './LaunchConfigDetailsSection';

app/scripts/modules/core/src/serverGroup/details/capacity/CapacityDetailsSection.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { ICapacity } from '../../serverGroupWriter.service';
+import { CurrentCapacity } from './CurrentCapacity';
+import { DesiredCapacity } from './DesiredCapacity';
+
+interface ICapacityDetailsSectionProps {
+  capacity: ICapacity;
+  current: number;
+}
+
+export function CapacityDetailsSection(props: ICapacityDetailsSectionProps) {
+  const { capacity, current } = props;
+  const simpleMode = capacity.max === capacity.max;
+  return (
+    <dl className="dl-horizontal dl-flex">
+      <DesiredCapacity capacity={capacity} simpleMode={simpleMode} />
+      <CurrentCapacity currentCapacity={current} />
+    </dl>
+  );
+}

app/scripts/modules/core/src/serverGroup/details/capacity/CurrentCapacity.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export function CurrentCapacity(props: { currentCapacity: number }) {
+  return (
+    <>
+      <dt>Current</dt>
+      <dd>{props.currentCapacity}</dd>
+    </>
+  );
+}

app/scripts/modules/core/src/serverGroup/details/capacity/DesiredCapacity.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ICapacity } from '../../serverGroupWriter.service';
+
+export function DesiredCapacity(props: { capacity: ICapacity; simpleMode: boolean }) {
+  const SimpleCapacity = () => (
+    <>
+      <dt>Min/Max</dt>
+      <dd>{props.capacity.desired}</dd>
+    </>
+  );
+
+  const AdvancedCapacity = () => (
+    <>
+      <dt>Min</dt>
+      <dd>{props.capacity.min}</dd>
+      <dt>Desired</dt>
+      <dd>{props.capacity.desired}</dd>
+      <dt>Max</dt>
+      <dd>{props.capacity.max}</dd>
+    </>
+  );
+
+  return props.simpleMode ? <SimpleCapacity /> : <AdvancedCapacity />;
+}

app/scripts/modules/core/src/serverGroup/details/capacity/index.ts

@@ -0,0 +1,3 @@
+export * from './CapacityDetailsSection';
+export * from './CurrentCapacity';
+export * from './DesiredCapacity';

app/scripts/modules/core/src/serverGroup/details/index.ts

@@ -0,0 +1,7 @@
+export * from './ServerGroupDetails';
+export * from './ServerGroupDetails';
+export * from './ServerGroupDetailsWrapper';
+export * from './ShowUserData';
+export * from './capacity';
+export * from './scalingActivities';
+export * from './serverGroupWarningMessage.service';

app/scripts/modules/core/src/serverGroup/details/scalingActivities/index.ts

@@ -0,0 +1 @@
+export * from './ViewScalingActivitiesLink';

app/scripts/modules/core/src/serverGroup/index.ts

@@ -1,12 +1,9 @@
 export * from './ServerGroup';
 export * from './ServerGroupHeader';
 export * from './configure/common';
-export * from './details/ServerGroupDetails';
-export * from './details/ServerGroupDetailsWrapper';
-export * from './details/ShowUserData';
-export * from './details/serverGroupWarningMessage.service';
+export * from './details';
 export * from './metrics/CloudMetricsReader';
-export * from './resize/MinMaxDesiredChanges';
+export * from './resize';
 export * from './serverGroupReader.service';
 export * from './serverGroupWriter.service';
 export * from './templates';

app/scripts/modules/core/src/serverGroup/resize/index.ts

@@ -0,0 +1 @@
+export * from './MinMaxDesiredChanges';

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

@@ -1,4 +1,5 @@
 export { TITUS_MODULE } from './titus.module';
 
-export * from './titus.settings';
 export * from './reactShims';
+export * from './serverGroup/details';
+export * from './titus.settings';

app/scripts/modules/titus/src/serverGroup/details/TitusCapacityDetailsSection.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { ReactModal, Application, Overridable } from '@spinnaker/core';
+import { CurrentCapacity, DesiredCapacity, ReactModal, Application, Overridable } from '@spinnaker/core';
 import { ITitusServerGroup } from 'titus/domain';
 import { ITitusResizeServerGroupModalProps, TitusResizeServerGroupModal } from './resize/TitusResizeServerGroupModal';
 
@@ -9,48 +9,28 @@ interface ICapacityDetailsSectionProps {
   serverGroup: ITitusServerGroup;
 }
 
-export const TitusSimpleMinMaxDesired = ({ serverGroup }: ICapacityDetailsSectionProps) => (
-  <>
-    <dt>Min/Max</dt>
-    <dd>{serverGroup.capacity.desired}</dd>
-    <dt>Current</dt>
-    <dd>{serverGroup.instances.length}</dd>
-  </>
-);
-
-export const TitusAdvancedMinMaxDesired = ({ serverGroup }: ICapacityDetailsSectionProps) => (
-  <>
-    <dt>Min</dt>
-    <dd>{serverGroup.capacity.min}</dd>
-    <dt>Desired</dt>
-    <dd>{serverGroup.capacity.desired}</dd>
-    <dt>Max</dt>
-    <dd>{serverGroup.capacity.max}</dd>
-    <dt>Current</dt>
-    <dd>{serverGroup.instances.length}</dd>
-  </>
-);
-
-export const TitusCapacityGroup = ({ serverGroup }: ICapacityDetailsSectionProps) => (
-  <>
-    <dt>Cap. Group</dt>
-    <dd>{serverGroup.capacityGroup}</dd>
-  </>
-);
-
 @Overridable('titus.serverGroup.CapacityDetailsSection')
 export class TitusCapacityDetailsSection extends React.Component<ICapacityDetailsSectionProps> {
   public render(): JSX.Element {
     const { serverGroup, app: application } = this.props;
-    const isSimpleMode = serverGroup.capacity.min === serverGroup.capacity.max;
+    const { capacity } = serverGroup;
+    const current = serverGroup.instances.length;
+    const simpleMode = capacity.min === capacity.max;
+
     const resizeServerGroup = () =>
       ReactModal.show<ITitusResizeServerGroupModalProps>(TitusResizeServerGroupModal, { serverGroup, application });
 
     return (
       <>
         <dl className="dl-horizontal dl-flex">
-          {isSimpleMode ? <TitusSimpleMinMaxDesired {...this.props} /> : <TitusAdvancedMinMaxDesired {...this.props} />}
-          {serverGroup.capacityGroup && <TitusCapacityGroup {...this.props} />}
+          <DesiredCapacity capacity={capacity} simpleMode={simpleMode} />
+          <CurrentCapacity currentCapacity={current} />
+          {serverGroup.capacityGroup && (
+            <>
+              <dt>Cap. Group</dt>
+              <dd>{serverGroup.capacityGroup}</dd>
+            </>
+          )}
         </dl>
 
         <div>

app/scripts/modules/titus/src/serverGroup/details/index.ts

@@ -0,0 +1,3 @@
+export * from './TitusCapacityDetailsSection';
+export * from './TitusSecurityGroups';
+export * from './resize/TitusResizeServerGroupModal';