@spinnaker/amazon 0.0.0-2025.1-0

package/src/serverGroup/configure/wizard/pages/ServerGroupLoadBalancers.tsx

@@ -0,0 +1,262 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+import type { Option } from 'react-select';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+import { HelpField, ReactInjector, TetheredSelect } from '@spinnaker/core';
+
+import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+export interface IServerGroupLoadBalancersProps {
+  hideLoadBalancers?: boolean;
+  hideTargetGroups?: boolean;
+  targetGroupTypeHelpText?: 'instance' | 'ip';
+  formik: FormikProps<IAmazonServerGroupCommand>;
+}
+
+export interface IServerGroupLoadBalancersState {
+  refreshed: boolean;
+  refreshing: boolean;
+  showVpcLoadBalancers: boolean;
+}
+
+const stringToOption = (value: string): Option<string> => {
+  return { value, label: value };
+};
+
+export class ServerGroupLoadBalancers
+  extends React.Component<IServerGroupLoadBalancersProps, IServerGroupLoadBalancersState>
+  implements IWizardPageComponent<IAmazonServerGroupCommand> {
+  public state = {
+    refreshing: false,
+    refreshed: false,
+    showVpcLoadBalancers: false,
+  };
+
+  public validate(values: IAmazonServerGroupCommand) {
+    const errors = {} as any;
+
+    if (values.viewState.dirty.targetGroups) {
+      errors.targetGroups = 'You must confirm the removed target groups.';
+    }
+    if (values.viewState.dirty.loadBalancers) {
+      errors.loadBalancers = 'You must confirm the removed load balancers.';
+    }
+
+    return errors;
+  }
+
+  public refreshLoadBalancers = () => {
+    const { values } = this.props.formik;
+    this.setState({ refreshing: true });
+    const configurationService: any = ReactInjector.providerServiceDelegate.getDelegate(
+      values.cloudProvider || values.selectedProvider,
+      'serverGroup.configurationService',
+    );
+    configurationService.refreshLoadBalancers(values).then(() => {
+      this.setState({
+        refreshing: false,
+        refreshed: true,
+      });
+    });
+  };
+
+  public clearWarnings(key: 'loadBalancers' | 'targetGroups'): void {
+    this.props.formik.values.viewState.dirty[key] = null;
+    this.props.formik.validateForm();
+  }
+
+  private targetGroupsChanged = (options: Array<Option<string>>) => {
+    const targetGroups = options.map((o) => o.value);
+    this.props.formik.setFieldValue('targetGroups', targetGroups);
+  };
+
+  private loadBalancersChanged = (options: Array<Option<string>>) => {
+    const loadBalancers = options.map((o) => o.value);
+    this.props.formik.setFieldValue('loadBalancers', loadBalancers);
+  };
+
+  private vpcLoadBalancersChanged = (options: Array<Option<string>>) => {
+    const vpcLoadBalancers = options.map((o) => o.value);
+    this.props.formik.setFieldValue('vpcLoadBalancers', vpcLoadBalancers);
+  };
+
+  public render() {
+    const { hideLoadBalancers, hideTargetGroups } = this.props;
+    const { values } = this.props.formik;
+    const { dirty } = values.viewState;
+    const { refreshed, refreshing, showVpcLoadBalancers } = this.state;
+
+    let targetGroupSection = null;
+    if (!hideTargetGroups) {
+      const targetGroupOptions = (values.backingData.filtered.targetGroups || [])
+        .concat(values.viewState.spelTargetGroups || [])
+        .map(stringToOption);
+
+      targetGroupSection = (
+        <>
+          {dirty.targetGroups && (
+            <div className="col-md-12">
+              <div className="alert alert-warning">
+                <p>
+                  <i className="fa fa-exclamation-triangle" />
+                  The following target groups could not be found in the selected account/region/VPC and were removed:
+                </p>
+                <ul>
+                  {dirty.targetGroups.map((tg) => (
+                    <li key={tg}>{tg}</li>
+                  ))}
+                </ul>
+                <p className="text-right">
+                  <a
+                    className="btn btn-sm btn-default dirty-flag-dismiss clickable"
+                    onClick={() => this.clearWarnings('targetGroups')}
+                  >
+                    Okay
+                  </a>
+                </p>
+              </div>
+            </div>
+          )}
+          <div className="form-group">
+            <div className="col-md-4 sm-label-right">
+              <b>Target Groups </b>
+              <HelpField id="aws.loadBalancer.targetGroups" />
+            </div>
+            <div className="col-md-7">
+              {targetGroupOptions.length === 0 && (
+                <div className="form-control-static">
+                  No <b>{this.props.targetGroupTypeHelpText ?? 'instance'}</b> target groups found in the selected
+                  account/region/VPC
+                </div>
+              )}
+              {targetGroupOptions.length > 0 && (
+                <TetheredSelect
+                  multi={true}
+                  options={targetGroupOptions}
+                  value={values.targetGroups}
+                  onChange={this.targetGroupsChanged}
+                />
+              )}
+            </div>
+          </div>
+        </>
+      );
+    }
+
+    let loadBalancersSection = null;
+    if (!hideLoadBalancers) {
+      const loadBalancerOptions = (values.backingData.filtered.loadBalancers || [])
+        .concat(values.viewState.spelLoadBalancers || [])
+        .map(stringToOption);
+
+      const vpcLoadBalancerOptions = (values.backingData.filtered.vpcLoadBalancers || []).map(stringToOption);
+
+      const hasVpcLoadBalancers = values.vpcLoadBalancers && values.vpcLoadBalancers.length > 0;
+      loadBalancersSection = (
+        <>
+          {dirty.loadBalancers && (
+            <div className="col-md-12">
+              <div className="alert alert-warning">
+                <p>
+                  <i className="fa fa-exclamation-triangle" />
+                  The following load balancers could not be found in the selected account/region/VPC and were removed:
+                </p>
+                <ul>
+                  {dirty.loadBalancers.map((lb) => (
+                    <li key={lb}>{lb}</li>
+                  ))}
+                </ul>
+                <p className="text-right">
+                  <a
+                    className="btn btn-sm btn-default dirty-flag-dismiss clickable"
+                    onClick={() => this.clearWarnings('loadBalancers')}
+                  >
+                    Okay
+                  </a>
+                </p>
+              </div>
+            </div>
+          )}
+          <div className="form-group">
+            <div className="col-md-4 sm-label-right">
+              <b>Classic Load Balancers </b>
+              <HelpField id="aws.loadBalancer.loadBalancers" />
+            </div>
+            <div className="col-md-7">
+              {loadBalancerOptions.length === 0 && (
+                <div className="form-control-static">No load balancers found in the selected account/region/VPC</div>
+              )}
+              {loadBalancerOptions.length > 0 && (
+                <TetheredSelect
+                  multi={true}
+                  options={loadBalancerOptions}
+                  value={values.loadBalancers}
+                  onChange={this.loadBalancersChanged}
+                />
+              )}
+            </div>
+          </div>
+          {!values.vpcId && (
+            <div className="form-group">
+              {!hasVpcLoadBalancers && !showVpcLoadBalancers && (
+                <div>
+                  <div className="col-md-8 col-md-offset-3">
+                    <a className="clickable" onClick={() => this.setState({ showVpcLoadBalancers: true })}>
+                      Add VPC Load Balancers
+                    </a>
+                  </div>
+                </div>
+              )}
+              {hasVpcLoadBalancers && (
+                <div>
+                  <div className="col-md-4 sm-label-right">
+                    <b>VPC Load Balancers</b>
+                  </div>
+                  <div className="col-md-8">
+                    {vpcLoadBalancerOptions.length > 0 && (
+                      <TetheredSelect
+                        multi={true}
+                        options={vpcLoadBalancerOptions}
+                        value={values.vpcLoadBalancers}
+                        onChange={this.vpcLoadBalancersChanged}
+                      />
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          {!refreshed && (
+            <div className="form-group small" style={{ marginTop: '20px' }}>
+              <div className="col-md-8 col-md-offset-4">
+                {refreshing && (
+                  <p>
+                    <span className="fa fa-sync-alt fa-spin" />
+                    <span> refreshing...</span>
+                  </p>
+                )}
+                {!refreshing && (
+                  <p>
+                    If you are looking for a load balancer or target group from a different application, <br />
+                    <a className="clickable" onClick={this.refreshLoadBalancers}>
+                      click here
+                    </a>{' '}
+                    to load all load balancers.
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+        </>
+      );
+    }
+
+    return (
+      <div className="container-fluid form-horizontal">
+        {targetGroupSection}
+        {loadBalancersSection}
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/ServerGroupSecurityGroups.tsx

@@ -0,0 +1,52 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+
+import { SecurityGroupSelector } from '../securityGroups/SecurityGroupSelector';
+import { ServerGroupSecurityGroupsRemoved } from '../securityGroups/ServerGroupSecurityGroupsRemoved';
+import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+export interface IServerGroupSecurityGroupsProps {
+  formik: FormikProps<IAmazonServerGroupCommand>;
+}
+
+export class ServerGroupSecurityGroups
+  extends React.Component<IServerGroupSecurityGroupsProps>
+  implements IWizardPageComponent<IAmazonServerGroupCommand> {
+  public validate(values: IAmazonServerGroupCommand) {
+    const errors = {} as any;
+
+    if (values.viewState.dirty.securityGroups) {
+      errors.securityGroups = 'You must acknowledge removed security groups.';
+    }
+
+    return errors;
+  }
+
+  private onChange = (securityGroups: string[]) => {
+    this.props.formik.setFieldValue('securityGroups', securityGroups);
+  };
+
+  private acknowledgeRemovedGroups = () => {
+    const { viewState } = this.props.formik.values;
+    viewState.dirty.securityGroups = null;
+    this.props.formik.setFieldValue('viewState', viewState);
+  };
+
+  public render() {
+    const { values } = this.props.formik;
+
+    return (
+      <div className="container-fluid form-horizontal">
+        <ServerGroupSecurityGroupsRemoved command={values} onClear={this.acknowledgeRemovedGroups} />
+        <SecurityGroupSelector
+          command={values}
+          availableGroups={values.backingData.filtered.securityGroups}
+          groupsToEdit={values.securityGroups}
+          onChange={this.onChange}
+        />
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/ServerGroupZones.tsx

@@ -0,0 +1,68 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+
+import { AvailabilityZoneSelector } from '../../../AvailabilityZoneSelector';
+import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+export interface IServerGroupZonesProps {
+  formik: FormikProps<IAmazonServerGroupCommand>;
+}
+
+export class ServerGroupZones
+  extends React.Component<IServerGroupZonesProps>
+  implements IWizardPageComponent<IAmazonServerGroupCommand> {
+  public validate(values: IAmazonServerGroupCommand) {
+    const errors = {} as any;
+
+    if (!values.availabilityZones || values.availabilityZones.length === 0) {
+      errors.availabilityZones = 'You must select at least one availability zone.';
+    }
+    return errors;
+  }
+
+  private handleAvailabilityZonesChanged = (zones: string[]): void => {
+    const { values, setFieldValue } = this.props.formik;
+    values.usePreferredZonesChanged(values);
+    setFieldValue('availabilityZones', zones);
+  };
+
+  private rebalanceToggled = () => {
+    const { values, setFieldValue } = this.props.formik;
+    values.toggleSuspendedProcess(values, 'AZRebalance');
+    setFieldValue('suspendedProcesses', values.suspendedProcesses);
+    this.setState({});
+  };
+
+  public render() {
+    const { values } = this.props.formik;
+    return (
+      <div className="container-fluid form-horizontal">
+        <AvailabilityZoneSelector
+          credentials={values.credentials}
+          region={values.region}
+          onChange={this.handleAvailabilityZonesChanged}
+          selectedZones={values.availabilityZones}
+          allZones={values.backingData.filtered.availabilityZones}
+          usePreferredZones={values.viewState.usePreferredZones}
+        />
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>AZ Rebalance</b>
+          </div>
+          <div className="col-md-7 checkbox">
+            <label>
+              <input
+                type="checkbox"
+                onChange={this.rebalanceToggled}
+                checked={!values.processIsSuspended(values, 'AZRebalance')}
+              />
+              Keep instances evenly distributed across zones
+            </label>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/advancedSettings/ServerGroupAdvancedSettings.tsx

@@ -0,0 +1,30 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import type { Application, IWizardPageComponent } from '@spinnaker/core';
+
+import { ServerGroupAdvancedSettingsInner } from './ServerGroupAdvancedSettingsInner';
+import type { IAmazonServerGroupCommand } from '../../../serverGroupConfiguration.service';
+
+export interface IServerGroupAdvancedSettingsProps {
+  app: Application;
+  formik: FormikProps<IAmazonServerGroupCommand>;
+}
+
+export class ServerGroupAdvancedSettings
+  extends React.Component<IServerGroupAdvancedSettingsProps>
+  implements IWizardPageComponent<IAmazonServerGroupCommand> {
+  private ref: any = React.createRef();
+
+  public validate(values: IAmazonServerGroupCommand) {
+    if (this.ref && this.ref.current) {
+      return this.ref.current.validate(values);
+    }
+    return {};
+  }
+
+  public render() {
+    const { app, formik } = this.props;
+    return <ServerGroupAdvancedSettingsInner formik={formik} app={app} ref={this.ref} />;
+  }
+}