-
Notifications
You must be signed in to change notification settings - Fork 900
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(google): add gce scale-down controls (#7570)
* feat(google): add feature flag for gce scale down controls * feat(google): add gce scale-down controls to autoscaling policy ui * fix(google): add min and max timeWindowSec, sidebar details
- Loading branch information
1 parent
2c100b6
commit 5d89a04
Showing
13 changed files
with
223 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
...ules/google/src/serverGroup/details/autoscalingPolicy/modal/GceAutoScalingFieldLayout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import * as React from 'react'; | ||
| import { isEmpty } from 'lodash'; | ||
|
|
||
| import { ILayoutProps } from '@spinnaker/core'; | ||
|
|
||
| import './gceScaleDownControls.less'; | ||
|
|
||
| // todo(mneterval): remove when GCE Autoscaling Controls are entirely converted to React & Formik | ||
| export function GceAutoScalingFieldLayout(props: ILayoutProps) { | ||
| const { label, help, input, actions, validation, required } = props; | ||
|
|
||
| const showLabel = !isEmpty(label) || !isEmpty(help); | ||
| const { hidden, messageNode } = validation; | ||
|
|
||
| return ( | ||
| <div className="gce-scale-down-controls"> | ||
| {showLabel && ( | ||
| <label className="col-md-3 sm-label-right"> | ||
| {label} | ||
| {required && <span>*</span>} {help} | ||
| </label> | ||
| )} | ||
| <div className="col-md-2 content-fields"> | ||
| <div> | ||
| {input} {actions} | ||
| </div> | ||
| {!hidden && <div className="message">{messageNode}</div>} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
137 changes: 137 additions & 0 deletions
137
...s/modules/google/src/serverGroup/details/autoscalingPolicy/modal/GceScaleDownControls.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import { module } from 'angular'; | ||
|
|
||
| import * as React from 'react'; | ||
| import { react2angular } from 'react2angular'; | ||
| import { isEmpty } from 'lodash'; | ||
|
|
||
| import { CheckboxInput, FormField, LayoutProvider, NumberInput, ReactSelectInput, SETTINGS } from '@spinnaker/core'; | ||
|
|
||
| import { GceAutoScalingFieldLayout } from './GceAutoScalingFieldLayout'; | ||
|
|
||
| enum maxReplicasUnit { | ||
| fixed = 'fixed', | ||
| percent = 'percent', | ||
| } | ||
|
|
||
| interface IGceScaleDownControl { | ||
| maxScaledDownReplicas?: { | ||
| fixed?: number; | ||
| percent?: number; | ||
| }; | ||
| timeWindowSec?: number; | ||
| } | ||
|
|
||
| interface IGceAutoscalingPolicy { | ||
| scaleDownControl: IGceScaleDownControl; | ||
| } | ||
|
|
||
| interface IGceScaleDownControlsProps { | ||
| policy: IGceAutoscalingPolicy; | ||
| updatePolicy: (policy: IGceAutoscalingPolicy) => void; | ||
| } | ||
|
|
||
| const defaultScaleDownControl: IGceScaleDownControl = { | ||
| maxScaledDownReplicas: { | ||
| fixed: null, | ||
| percent: 0, | ||
| }, | ||
| timeWindowSec: 60, | ||
| }; | ||
|
|
||
| function GceScaleDownControls({ policy, updatePolicy }: IGceScaleDownControlsProps) { | ||
| if (!SETTINGS.feature.gceScaleDownControlsEnabled) { | ||
| return null; | ||
| } | ||
|
|
||
| function updateScaleDownControl(scaleDownControl: IGceScaleDownControl) { | ||
| updatePolicy({ | ||
| ...policy, | ||
| scaleDownControl, | ||
| }); | ||
| } | ||
|
|
||
| function getMaxReplicasUnit(): maxReplicasUnit { | ||
| if (Number.isInteger(policy.scaleDownControl.maxScaledDownReplicas.percent)) { | ||
| return maxReplicasUnit.percent; | ||
| } | ||
| return maxReplicasUnit.fixed; | ||
| } | ||
|
|
||
| return ( | ||
| <LayoutProvider value={GceAutoScalingFieldLayout}> | ||
| <div className="row"> | ||
| <FormField | ||
| input={inputProps => <CheckboxInput {...inputProps} />} | ||
| label="Enable scale-down controls" | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| updateScaleDownControl(e.target.checked ? defaultScaleDownControl : {}); | ||
| }} | ||
| value={!isEmpty(policy.scaleDownControl)} | ||
| /> | ||
| </div> | ||
| {!isEmpty(policy.scaleDownControl) && ( | ||
| <> | ||
| <div className="row"> | ||
| <FormField | ||
| input={inputProps => ( | ||
| <NumberInput | ||
| {...inputProps} | ||
| min={0} | ||
| max={getMaxReplicasUnit() === maxReplicasUnit.percent ? 100 : null} | ||
| /> | ||
| )} | ||
| label="Max scaled-down replicas" | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| updateScaleDownControl({ | ||
| ...policy.scaleDownControl, | ||
| maxScaledDownReplicas: { | ||
| [getMaxReplicasUnit()]: parseInt(e.target.value, 10), | ||
| }, | ||
| }); | ||
| }} | ||
| value={policy.scaleDownControl.maxScaledDownReplicas[getMaxReplicasUnit()]} | ||
| /> | ||
| <FormField | ||
| input={inputProps => ( | ||
| <ReactSelectInput | ||
| {...inputProps} | ||
| clearable={false} | ||
| stringOptions={[maxReplicasUnit.percent, maxReplicasUnit.fixed]} | ||
| /> | ||
| )} | ||
| label="" | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| updateScaleDownControl({ | ||
| ...policy.scaleDownControl, | ||
| maxScaledDownReplicas: { | ||
| [e.target.value]: policy.scaleDownControl.maxScaledDownReplicas[getMaxReplicasUnit()], | ||
| }, | ||
| }); | ||
| }} | ||
| value={getMaxReplicasUnit()} | ||
| /> | ||
| </div> | ||
| <div className="row"> | ||
| <FormField | ||
| input={inputProps => <NumberInput {...inputProps} min={60} max={3600} />} | ||
| label="Time window (seconds)" | ||
| onChange={(e: React.ChangeEvent<any>) => { | ||
| updateScaleDownControl({ | ||
| ...policy.scaleDownControl, | ||
| timeWindowSec: parseInt(e.target.value, 10), | ||
| }); | ||
| }} | ||
| value={policy.scaleDownControl.timeWindowSec} | ||
| /> | ||
| </div> | ||
| </> | ||
| )} | ||
| </LayoutProvider> | ||
| ); | ||
| } | ||
|
|
||
| export const GCE_SCALE_DOWN_CONTROLS = 'spinnaker.gce.scaleDownControls'; | ||
| module(GCE_SCALE_DOWN_CONTROLS, []).component( | ||
| 'gceScaleDownControls', | ||
| react2angular(GceScaleDownControls, ['policy', 'updatePolicy']), | ||
| ); |
7 changes: 7 additions & 0 deletions
7
.../modules/google/src/serverGroup/details/autoscalingPolicy/modal/gceScaleDownControls.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| // todo(mneterval): remove when GCE Autoscaling Controls are entirely converted to React & Formik | ||
| .gce-scale-down-controls { | ||
| .checkbox { | ||
| margin-left: 5px; | ||
| margin-top: 7px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters