fix(redblack): fixing redblack onchange values (#10107)

* fix(redblack): fixing redblack onchange values * fix(lint): fixing linting erros * fix(lint): fixing linting - lodash * fix(prettier): fixing prettier for AdditionalFields.tsx --------- Co-authored-by: ovidiupopa07 <[email protected]> (cherry picked from commit 443408e)
spinnaker · May 13, 2024 · e6e3530 · e6e3530
1 parent 0d188f1
commit e6e3530
Showing 1 changed file with 97 additions and 68 deletions.
diff --git a/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx b/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
@@ -8,72 +8,101 @@ export interface IRedBlackStrategyAdditionalFieldsProps extends IDeploymentStrat
  command: IRedBlackCommand;
 }
 
-export const AdditionalFields = ({ command, onChange }: IRedBlackStrategyAdditionalFieldsProps) => (
- <div className="form-group">
- <div className="col-md-12 checkbox">
- <label>
- <input
- type="checkbox"
- checked={command.rollback?.onFailure ?? false}
- onChange={(e) => onChange('rollback.onFailure', e.target.checked)}
- />
- Rollback to previous server group if deployment fails <HelpField id="strategy.redblack.rollback" />
- </label>
- </div>
- <div className="col-md-12 checkbox">
- <label>
- <input type="checkbox" checked={command.scaleDown} onChange={(e) => onChange('scaleDown', e.target.checked)} />
- Scale down replaced server groups to zero instances
- <HelpField id="strategy.redblack.scaleDown" />
- </label>
- </div>
- <div className="col-md-12 form-inline">
- <label>
- Maximum number of server groups to leave
- <HelpField id="strategy.redblack.maxRemainingAsgs" />
- </label>
- <input
- className="form-control input-sm"
- style={{ width: '50px' }}
- type="number"
- value={command.maxRemainingAsgs}
- onChange={(e) => onChange('maxRemainingAsgs', e.target.value)}
- min="2"
- />
- </div>
- <div className="col-md-12 form-inline">
- <label>
- Wait Before Disable
- <HelpField content="Time to wait before disabling all old server groups in this cluster" />
- </label>
- <input
- className="form-control input-sm"
- style={{ width: '60px' }}
- min="0"
- type="number"
- value={command.delayBeforeDisableSec}
- onChange={(e) => onChange('delayBeforeDisableSec', e.target.value)}
- placeholder="0"
- />
- seconds
- </div>
- {command.scaleDown && (
- <div className="col-md-12 form-inline" style={{ marginTop: '5px' }}>
- <label>
- Wait Before Scale Down
- <HelpField content="Time to wait before scaling down all old server groups in this cluster" />
- </label>
- <input
- className="form-control input-sm"
- style={{ width: '60px' }}
- min="0"
- type="number"
- value={command.delayBeforeScaleDownSec}
- onChange={(e) => onChange('delayBeforeScaleDownSec', e.target.value)}
- placeholder="0"
- />
- seconds
+export class AdditionalFields extends React.Component<IRedBlackStrategyAdditionalFieldsProps> {
+ private rollbackOnFailureChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this.props.command.rollback.onFailure = e.target.checked;
+ this.forceUpdate();
+ };
+
+ private scaleDownChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this.props.command.scaleDown = e.target.checked;
+ this.forceUpdate();
+ };
+
+ private maxRemainingAsgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this.props.command.maxRemainingAsgs = parseInt(e.target.value, 10);
+ this.forceUpdate();
+ };
+
+ private delayBeforeDisableSecChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this.props.command.delayBeforeDisableSec = parseInt(e.target.value, 10);
+ this.forceUpdate();
+ };
+
+ private delayBeforeScaleDownSecChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this.props.command.delayBeforeScaleDownSec = parseInt(e.target.value, 10);
+ this.forceUpdate();
+ };
+
+ public render() {
+ const { command } = this.props;
+ return (
+ <div className="form-group">
+ <div className="col-md-12 checkbox" style={{ marginTop: 0 }}>
+ <label>
+ <input
+ type="checkbox"
+ checked={command.rollback?.onFailure ?? false}
+ onChange={this.rollbackOnFailureChange}
+ />
+ Rollback to previous server group if deployment fails <HelpField id="strategy.redblack.rollback" />
+ </label>
+ </div>
+ <div className="col-md-12 checkbox">
+ <label>
+ <input type="checkbox" checked={command.scaleDown} onChange={this.scaleDownChange} />
+ Scale down replaced server groups to zero instances <HelpField id="strategy.redblack.scaleDown" />
+ </label>
+ </div>
+ <div className="col-md-12 form-inline">
+ <label>
+ Maximum number of server groups to leave
+ <HelpField id="strategy.redblack.maxRemainingAsgs" />
+ </label>
+ <input
+ className="form-control input-sm"
+ style={{ width: '50px' }}
+ type="number"
+ value={command.maxRemainingAsgs}
+ onChange={this.maxRemainingAsgsChange}
+ min="2"
+ />
+ </div>
+ <div className="col-md-12 form-inline">
+ <label>
+ Wait Before Disable
+ <HelpField content="Time to wait before disabling all old server groups in this cluster" />
+ </label>
+ <input
+ className="form-control input-sm"
+ style={{ width: '60px' }}
+ min="0"
+ type="number"
+ value={command.delayBeforeDisableSec}
+ onChange={this.delayBeforeDisableSecChange}
+ placeholder="0"
+ />
+ seconds
+ </div>
+ {command.scaleDown && (
+ <div className="col-md-12 form-inline" style={{ marginTop: '5px' }}>
+ <label>
+ Wait Before Scale Down
+ <HelpField content="Time to wait before scaling down all old server groups in this cluster" />
+ </label>
+ <input
+ className="form-control input-sm"
+ style={{ width: '60px' }}
+ min="0"
+ type="number"
+ value={command.delayBeforeScaleDownSec}
+ onChange={this.delayBeforeScaleDownSecChange}
+ placeholder="0"
+ />
+ seconds
+ </div>
+ )}
  </div>
- )}
- </div>
-);
+ );
+ }
+}