From 97c4aed44ea05672dcbdc2316cc857fb1f96c0dc Mon Sep 17 00:00:00 2001 From: Chris Thielen Date: Mon, 1 Jul 2019 16:15:10 -0700 Subject: [PATCH] refactor(core/serverGroup): Extract MinMaxDesiredChanges component (#7171) --- .../resize/AmazonResizeServerGroupModal.tsx | 67 +++++++------------ .../modules/amazon/src/serverGroup/index.ts | 1 + .../modules/core/src/serverGroup/index.ts | 13 ++-- .../resize/MinMaxDesiredChanges.tsx | 35 ++++++++++ 4 files changed, 66 insertions(+), 50 deletions(-) create mode 100644 app/scripts/modules/core/src/serverGroup/resize/MinMaxDesiredChanges.tsx diff --git a/app/scripts/modules/amazon/src/serverGroup/details/resize/AmazonResizeServerGroupModal.tsx b/app/scripts/modules/amazon/src/serverGroup/details/resize/AmazonResizeServerGroupModal.tsx index 429dae40ae2..3b5907f7ed0 100644 --- a/app/scripts/modules/amazon/src/serverGroup/details/resize/AmazonResizeServerGroupModal.tsx +++ b/app/scripts/modules/amazon/src/serverGroup/details/resize/AmazonResizeServerGroupModal.tsx @@ -1,30 +1,31 @@ import * as React from 'react'; import { Modal } from 'react-bootstrap'; import { FormikErrors, Form, Formik, FormikProps } from 'formik'; -import { startCase } from 'lodash'; +import { pickBy } from 'lodash'; import { Application, - HelpField, - IServerGroupJob, - ReactInjector, + CheckboxInput, FormikFormField, - TaskMonitor, + HelpField, + ICapacity, IModalComponentProps, - noop, - ReactModal, + IServerGroupJob, + MinMaxDesiredChanges, ModalClose, + NgReact, NumberInput, PlatformHealthOverride, - CheckboxInput, + ReactInjector, + ReactModal, + TaskMonitor, TaskReason, ValidationMessage, - NgReact, - ICapacity, + noop, } from '@spinnaker/core'; import { AwsModalFooter } from 'amazon/common'; -import { IAmazonAsg, IAmazonServerGroup } from 'amazon/domain'; +import { IAmazonServerGroup } from 'amazon/domain'; export interface IAmazonResizeServerGroupModalProps extends IModalComponentProps { application: Application; @@ -53,12 +54,6 @@ export interface IResizeJob extends IServerGroupJob { interestingHealthProviderNames: string[]; } -interface IChangedField { - field: keyof ICapacity; - prevValue: number | string; - value: number | string; -} - export class AmazonResizeServerGroupModal extends React.Component< IAmazonResizeServerGroupModalProps, IAmazonResizeServerGroupModalState @@ -100,27 +95,12 @@ export class AmazonResizeServerGroupModal extends React.Component< }; } - private getChangedFields(capacity: ICapacity, asg: IAmazonAsg): IChangedField[] { - const fields: IChangedField[] = [ - { field: 'min', value: capacity.min, prevValue: asg.minSize }, - { field: 'max', value: capacity.max, prevValue: asg.maxSize }, - { field: 'desired', value: capacity.desired, prevValue: asg.desiredCapacity }, - ]; - - return fields.filter(field => field.value !== field.prevValue); - } - private validate = ( values: IAmazonResizeServerGroupValues, ): Partial> => { const { min, max, desired } = values; - const { asg } = this.props.serverGroup; const errors: Partial> = {}; - if (this.getChangedFields(values, asg).length === 0) { - (errors as any).nochange = 'no changes to capacity'; - } - if (!this.state.advancedMode) { return errors; } @@ -192,10 +172,14 @@ export class AmazonResizeServerGroupModal extends React.Component< const { serverGroup, application } = this.props; const { asg } = serverGroup; - const changedFields: IChangedField[] = this.getChangedFields({ min, max, desired }, asg); - const capacity = changedFields.reduce((acc: Partial, change) => { - return { ...acc, [change.field]: change.value }; - }, {}); + const capacity = pickBy( + { + min: min !== asg.minSize ? min : undefined, + max: max !== asg.maxSize ? max : undefined, + desired: desired !== asg.desiredCapacity ? desired : undefined, + }, + x => x !== undefined, + ); const command: IResizeJob = { capacity, @@ -419,7 +403,8 @@ export class AmazonResizeServerGroupModal extends React.Component< onSubmit={this.submit} render={formik => { const { asg } = serverGroup; - const changedCapacityFields: IChangedField[] = this.getChangedFields(formik.values, asg); + const currentCapacity = { min: asg.minSize, max: asg.maxSize, desired: asg.desiredCapacity }; + const nextCapacity = formik.values; return ( <> @@ -451,13 +436,7 @@ export class AmazonResizeServerGroupModal extends React.Component<
Changes
- {!changedCapacityFields.length && 'no changes'} - {changedCapacityFields.map(field => ( -
- {startCase(field.field)}: {field.prevValue}{' '} - {field.value} -
- ))} +
diff --git a/app/scripts/modules/amazon/src/serverGroup/index.ts b/app/scripts/modules/amazon/src/serverGroup/index.ts index a3b9425a8e4..83c22b8234b 100644 --- a/app/scripts/modules/amazon/src/serverGroup/index.ts +++ b/app/scripts/modules/amazon/src/serverGroup/index.ts @@ -1,4 +1,5 @@ export * from './configure'; +export * from './details/resize/AmazonResizeServerGroupModal'; export * from './details/scalingPolicy/ScalingPolicyTypeRegistry'; export * from './details/scalingPolicy/ScalingPolicyWriter'; export * from './details/scalingPolicy/upsert/PolicyTypeSelectionModal'; diff --git a/app/scripts/modules/core/src/serverGroup/index.ts b/app/scripts/modules/core/src/serverGroup/index.ts index d47d0e1006c..525e6655db7 100644 --- a/app/scripts/modules/core/src/serverGroup/index.ts +++ b/app/scripts/modules/core/src/serverGroup/index.ts @@ -1,11 +1,12 @@ -export * from './serverGroupReader.service'; -export * from './serverGroupWriter.service'; -export * from './details/serverGroupWarningMessage.service'; +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 './metrics/CloudMetricsReader'; -export * from './configure/common'; +export * from './resize/MinMaxDesiredChanges'; +export * from './serverGroupReader.service'; +export * from './serverGroupWriter.service'; export * from './templates'; -export * from './ServerGroup'; -export * from './ServerGroupHeader'; diff --git a/app/scripts/modules/core/src/serverGroup/resize/MinMaxDesiredChanges.tsx b/app/scripts/modules/core/src/serverGroup/resize/MinMaxDesiredChanges.tsx new file mode 100644 index 00000000000..54764d1841e --- /dev/null +++ b/app/scripts/modules/core/src/serverGroup/resize/MinMaxDesiredChanges.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { startCase } from 'lodash'; +import { ICapacity } from '@spinnaker/core'; + +export interface IMinMaxDesiredChangesProps { + current: ICapacity; + next: ICapacity; +} + +export function MinMaxDesiredChanges(props: IMinMaxDesiredChangesProps) { + const { current, next } = props; + const fields: Array = ['min', 'max', 'desired']; + + const changedCapacityFields = fields + .map(field => { + const hasChanged = current[field] !== next[field]; + return hasChanged ? { field, currentValue: current[field], nextValue: next[field] } : null; + }) + .filter(x => !!x); + + if (!changedCapacityFields.length) { + return No changes; + } + + return ( + <> + {changedCapacityFields.map(field => ( +
+ {startCase(field.field)}: {field.currentValue} {' '} + {field.nextValue} +
+ ))} + + ); +}