@spinnaker/azure 2026.2.2 → 2026.3.0

package/src/serverGroup/configure/wizard/AzureCloneServerGroupModal.tsx

@@ -0,0 +1,349 @@
+import { cloneDeep } from 'lodash';
+import React from 'react';
+
+import type {
+  Application,
+  DeckRuntimeServices,
+  IModalComponentProps,
+  IRouterInjectedProps,
+  IStage,
+  ITemplateSelectionText,
+} from '@spinnaker/core';
+import {
+  DeckRuntimeContext,
+  DeployInitializer,
+  FirewallLabels,
+  noop,
+  ReactModal,
+  TaskMonitor,
+  withRouter,
+  WizardModal,
+  WizardPage,
+} from '@spinnaker/core';
+
+import {
+  ServerGroupAdvancedSettings,
+  ServerGroupBasicSettings,
+  ServerGroupCapacityAndZones,
+  ServerGroupHealthSettings,
+  ServerGroupImageSettings,
+  ServerGroupInstanceType,
+  ServerGroupLoadBalancers,
+  ServerGroupNetworkSettings,
+  ServerGroupSecurityGroups,
+  ServerGroupTags,
+} from './pages';
+import type { AzureServerGroupConfigurationService } from '../serverGroupConfiguration.service';
+
+export interface IAzureCloneServerGroupModalProps extends IModalComponentProps {
+  application: Application;
+  command: any;
+  title: string;
+}
+
+interface IAzureCloneServerGroupModalState {
+  command: any;
+  loaded: boolean;
+  requiresTemplateSelection: boolean;
+  taskMonitor: TaskMonitor;
+  templateSelectionText: ITemplateSelectionText;
+}
+
+export class AzureCloneServerGroupModalComponent extends React.Component<
+  IAzureCloneServerGroupModalProps & IRouterInjectedProps,
+  IAzureCloneServerGroupModalState
+> {
+  public static contextType = DeckRuntimeContext;
+  public declare context: React.ContextType<typeof DeckRuntimeContext>;
+
+  public static defaultProps: Partial<IAzureCloneServerGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private _isUnmounted = false;
+  private applicationRefreshUnsubscribe?: () => void;
+  public static show(props: IAzureCloneServerGroupModalProps, runtimeServices: DeckRuntimeServices): Promise<any> {
+    return ReactModal.show(
+      AzureCloneServerGroupModal,
+      props,
+      { dialogClassName: 'wizard-modal modal-lg' },
+      runtimeServices,
+    );
+  }
+
+  constructor(props: IAzureCloneServerGroupModalProps & IRouterInjectedProps) {
+    super(props);
+    const requiresTemplateSelection = !!props.command.viewState?.requiresTemplateSelection;
+    const workingCommand = cloneDeep(props.command);
+    const alreadyConfigured =
+      !requiresTemplateSelection && workingCommand.backingData?.accounts && workingCommand.backingData?.filtered;
+    const templateSelectionText: ITemplateSelectionText = {
+      copied: [
+        'account, region, subnet, cluster name (stack, details)',
+        'load balancers',
+        FirewallLabels.get('firewalls'),
+        'instance type',
+        'all fields on the Advanced Settings page',
+      ],
+      notCopied: [],
+      additionalCopyText:
+        'If a server group exists in this cluster at the time of deployment, its scaling policies will be copied over to the new server group.',
+    };
+
+    if (!props.command.viewState?.disableStrategySelection) {
+      templateSelectionText.notCopied.push(
+        'the deployment strategy (if any) used to deploy the most recent server group',
+      );
+    }
+
+    this.state = {
+      command: workingCommand,
+      loaded: !!alreadyConfigured,
+      requiresTemplateSelection,
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Creating your server group',
+        onDismiss: () => this.props.dismissModal(),
+        onTaskComplete: this.onTaskComplete,
+      }),
+      templateSelectionText,
+    };
+  }
+
+  public componentDidMount(): void {
+    if (this.state.loaded) {
+      this.completeConfiguration(this.state.command);
+    } else if (!this.state.requiresTemplateSelection) {
+      this.prepareCommand();
+    }
+  }
+
+  private get configurationService(): AzureServerGroupConfigurationService {
+    return this.context.services.providerServiceDelegate.getDelegate('azure', 'serverGroup.configurationService');
+  }
+
+  private templateSelected = (): void => {
+    this.setState({ loaded: false, requiresTemplateSelection: false });
+    this.prepareCommand();
+  };
+
+  public componentWillUnmount(): void {
+    this._isUnmounted = true;
+    this.clearApplicationRefreshSubscription();
+  }
+
+  private onTaskComplete = () => {
+    this.clearApplicationRefreshSubscription();
+    this.applicationRefreshUnsubscribe = this.props.application.serverGroups.onNextRefresh(this.onApplicationRefresh);
+    this.props.application.serverGroups.refresh();
+  };
+
+  private onApplicationRefresh = (): void => {
+    this.clearApplicationRefreshSubscription();
+    if (this._isUnmounted) {
+      return;
+    }
+    const { command } = this.state;
+    const cloneStage = this.state.taskMonitor.task.execution.stages.find(
+      (stage: IStage) => stage.type === 'cloneServerGroup',
+    );
+    if (cloneStage && cloneStage.context['deploy.server.groups']) {
+      const newServerGroupName = cloneStage.context['deploy.server.groups'][command.region];
+      if (newServerGroupName) {
+        let transitionTo = '^.^.^.clusters.serverGroup';
+        if (this.props.stateService.includes('**.clusters.serverGroup')) {
+          transitionTo = '^.serverGroup';
+        }
+        if (this.props.stateService.includes('**.clusters.cluster.serverGroup')) {
+          transitionTo = '^.^.serverGroup';
+        }
+        if (this.props.stateService.includes('**.clusters')) {
+          transitionTo = '.serverGroup';
+        }
+        this.props.stateService.go(transitionTo, {
+          accountId: command.credentials,
+          provider: 'azure',
+          region: command.region,
+          serverGroup: newServerGroupName,
+        });
+      }
+    }
+  };
+
+  private clearApplicationRefreshSubscription = (): void => {
+    this.applicationRefreshUnsubscribe?.();
+    this.applicationRefreshUnsubscribe = undefined;
+  };
+
+  private prepareCommand = () => {
+    const { application } = this.props;
+    const { command } = this.state;
+    command.viewState = command.viewState || {};
+    command.processCommandUpdateResult = this.processCommandUpdateResult;
+
+    const alreadyConfigured = command.backingData?.accounts && command.backingData?.filtered;
+    const configure = alreadyConfigured
+      ? null
+      : (this.configurationService as any).configureCommand(application, command);
+
+    const completeConfiguration = () => {
+      this.completeConfiguration(command);
+      if (!this._isUnmounted) {
+        this.setState({ loaded: true, requiresTemplateSelection: false });
+      }
+    };
+
+    if (configure) {
+      configure.then(completeConfiguration);
+    } else {
+      completeConfiguration();
+    }
+  };
+
+  private completeConfiguration(command: any): void {
+    command.backingData = command.backingData || {};
+    command.backingData.filtered = command.backingData.filtered || {};
+    command.backingData.filtered.regions = command.backingData.filtered.regions || [];
+    command.backingData.packageImages = command.backingData.packageImages || command.images || [];
+    command.processCommandUpdateResult = this.processCommandUpdateResult;
+    this.attachCommandHandlers(command);
+    this.processCommandUpdateResult(command.credentialsChanged?.(command, true));
+    this.processCommandUpdateResult(command.regionChanged?.(command, true));
+  }
+
+  private attachCommandHandlers(command: any): void {
+    if (command.viewState.azureReactHandlersAttached) {
+      return;
+    }
+    const credentialsChanged = command.credentialsChanged;
+    const regionChanged = command.regionChanged;
+    command.credentialsChanged = (cmd: any, isInit = false) =>
+      this.withImageConfiguration(cmd, credentialsChanged?.(cmd, isInit));
+    command.regionChanged = (cmd: any, isInit = false) =>
+      this.withImageConfiguration(cmd, regionChanged?.(cmd, isInit));
+    command.viewState.azureReactHandlersAttached = true;
+  }
+
+  private withImageConfiguration(command: any, result: any = { dirty: {} }): any {
+    const imageResult = (this.configurationService as any).configureImages(command) || { dirty: {} };
+    return { dirty: { ...(result.dirty || {}), ...(imageResult.dirty || {}) } };
+  }
+
+  private processCommandUpdateResult = (result: any = { dirty: {} }) => {
+    const dirty = result.dirty || {};
+    if (!Object.keys(dirty).length) {
+      return;
+    }
+    const viewState = (this.state.command.viewState = this.state.command.viewState || {});
+    viewState.dirty = { ...(viewState.dirty || {}), ...dirty };
+  };
+
+  public submit = (command: any): any => {
+    const mode = command.viewState?.mode;
+    if (mode === 'editPipeline' || mode === 'createPipeline') {
+      return this.props.closeModal(command);
+    }
+    return this.state.taskMonitor.submit(() =>
+      this.context.services.serverGroupWriter.cloneServerGroup(command, this.props.application),
+    );
+  };
+
+  public render() {
+    const { application, dismissModal, title } = this.props;
+    const { command } = this.state;
+    if (this.state.requiresTemplateSelection) {
+      return (
+        <DeployInitializer
+          application={application}
+          cloudProvider="azure"
+          command={command}
+          onDismiss={dismissModal}
+          onTemplateSelected={this.templateSelected}
+          templateSelectionText={this.state.templateSelectionText}
+        />
+      );
+    }
+
+    return (
+      <WizardModal<any>
+        closeModal={this.submit}
+        dismissModal={dismissModal}
+        heading={title}
+        initialValues={command}
+        loading={!this.state.loaded}
+        submitButtonLabel={command.viewState?.submitButtonLabel}
+        taskMonitor={this.state.taskMonitor}
+        render={({ formik, nextIdx, wizard }) => (
+          <>
+            <WizardPage
+              label="Basic Settings"
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupBasicSettings ref={innerRef} app={application} formik={formik} />}
+              wizard={wizard}
+            />
+            <WizardPage
+              label="Image"
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupImageSettings ref={innerRef} formik={formik} />}
+              wizard={wizard}
+            />
+            <WizardPage
+              label="Instance Type"
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupInstanceType ref={innerRef} formik={formik} />}
+              wizard={wizard}
+            />
+            <WizardPage
+              label="Capacity and Zones"
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupCapacityAndZones ref={innerRef} formik={formik} />}
+              wizard={wizard}
+            />
+            <WizardPage
+              label="Load Balancers"
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupLoadBalancers ref={innerRef} formik={formik} />}
+              wizard={wizard}
+            />
+            <WizardPage
+              label="Network Settings"
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupNetworkSettings ref={innerRef} formik={formik} />}
+              wizard={wizard}
+            />
+            <WizardPage
+              label={FirewallLabels.get('Firewalls')}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupSecurityGroups ref={innerRef} formik={formik} />}
+              wizard={wizard}
+            />
+            <WizardPage
+              label="Health"
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupHealthSettings ref={innerRef} formik={formik} />}
+              wizard={wizard}
+            />
+            <WizardPage
+              label="Advanced Settings"
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupAdvancedSettings ref={innerRef} formik={formik} />}
+              wizard={wizard}
+            />
+            <WizardPage
+              label="Tags"
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupTags ref={innerRef} formik={formik} />}
+              wizard={wizard}
+            />
+          </>
+        )}
+      />
+    );
+  }
+}
+
+export const AzureCloneServerGroupModal = Object.assign(
+  withRouter<IAzureCloneServerGroupModalProps & IRouterInjectedProps>(AzureCloneServerGroupModalComponent),
+  { show: AzureCloneServerGroupModalComponent.show },
+);

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

@@ -0,0 +1,208 @@
+import React from 'react';
+
+import { AzureWizardPage } from './common';
+
+export class ServerGroupAdvancedSettings extends AzureWizardPage {
+  public addDataDisk = () => {
+    const dataDisks = [
+      ...(this.props.formik.values.dataDisks || []),
+      {
+        lun: 0,
+        managedDisk: {
+          storageAccountType: 'Standard_LRS',
+        },
+        diskSizeGB: 1,
+        caching: 'None',
+        createOption: 'Empty',
+      },
+    ];
+    this.props.formik.values.dataDisks = dataDisks;
+    this.props.formik.setFieldValue('dataDisks', dataDisks);
+  };
+
+  private removeDataDisk = (index: number) => {
+    const dataDisks = [...(this.props.formik.values.dataDisks || [])];
+    dataDisks.splice(index, 1);
+    this.props.formik.values.dataDisks = dataDisks;
+    this.props.formik.setFieldValue('dataDisks', dataDisks);
+  };
+
+  private updateDataDisk = (index: number, field: string, value: any) => {
+    const dataDisks = [...(this.props.formik.values.dataDisks || [])];
+    const disk = { ...(dataDisks[index] || {}) };
+    if (field === 'storageAccountType') {
+      disk.managedDisk = { ...(disk.managedDisk || {}), storageAccountType: value };
+    } else {
+      disk[field] = value;
+    }
+    dataDisks[index] = disk;
+    this.props.formik.values.dataDisks = dataDisks;
+    this.props.formik.setFieldValue('dataDisks', dataDisks);
+  };
+
+  public render() {
+    const { values } = this.props.formik;
+    values.osConfig = values.osConfig || {};
+    values.customScriptsSettings = values.customScriptsSettings || {};
+    values.dataDisks = values.dataDisks || [];
+    const dataDiskTypes = values.backingData?.dataDiskTypes || ['Standard_LRS', 'StandardSSD_LRS', 'Premium_LRS'];
+    const dataDiskCachingTypes = values.backingData?.dataDiskCachingTypes || ['None', 'ReadOnly', 'ReadWrite'];
+
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-4 sm-label-right">Number of Instances</div>
+          <div className="col-md-2">
+            <input
+              className="form-control input-sm"
+              max="100"
+              min="0"
+              onChange={(event) => this.setField('sku.capacity', Number(event.target.value))}
+              type="number"
+              value={values.sku?.capacity ?? 0}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-4 sm-label-right">Custom Data</div>
+          <div className="col-md-7">
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.setField('osConfig.customData', event.target.value)}
+              value={values.osConfig.customData || ''}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-4 sm-label-right">Custom Script</div>
+          <div className="col-md-7">
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.setField('customScriptsSettings.fileUris', event.target.value)}
+              value={values.customScriptsSettings.fileUris || ''}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-4 sm-label-right">Command To Execute</div>
+          <div className="col-md-7">
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.setField('customScriptsSettings.commandToExecute', event.target.value)}
+              value={values.customScriptsSettings.commandToExecute || ''}
+            />
+          </div>
+        </div>
+        {values.loadBalancerType === 'Azure Application Gateway' && (
+          <div className="form-group">
+            <div className="col-md-4 sm-label-right">
+              <input
+                checked={!!values.enableInboundNAT}
+                disabled={!!values.zonesEnabled}
+                onChange={(event) => this.setField('enableInboundNAT', event.target.checked)}
+                type="checkbox"
+              />
+            </div>
+            <div className="col-md-7">
+              <b>Enable inbound NAT port-forwarding rules to connect to VM instances</b>
+            </div>
+          </div>
+        )}
+        <div className="form-group">
+          <div className="col-md-4 sm-label-right">User-Assigned Identities</div>
+          <div className="col-md-7">
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.setField('userAssignedIdentities', event.target.value)}
+              value={values.userAssignedIdentities || ''}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-4 sm-label-left">Data Disks</div>
+          <div className="col-md-11">
+            <table className="table table-condensed packed tags">
+              <thead>
+                <tr>
+                  <th>LUN</th>
+                  <th>Size (GB)</th>
+                  <th>Type</th>
+                  <th>Caching</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {values.dataDisks.map((disk: any, index: number) => (
+                  <tr key={index}>
+                    <td>
+                      <input
+                        className="form-control input-sm"
+                        min="0"
+                        onChange={(event) => this.updateDataDisk(index, 'lun', Number(event.target.value))}
+                        type="number"
+                        value={disk.lun ?? 0}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        className="form-control input-sm"
+                        min="1"
+                        onChange={(event) => this.updateDataDisk(index, 'diskSizeGB', Number(event.target.value))}
+                        type="number"
+                        value={disk.diskSizeGB ?? 1}
+                      />
+                    </td>
+                    <td>
+                      <select
+                        className="form-control input-sm"
+                        onChange={(event) => this.updateDataDisk(index, 'storageAccountType', event.target.value)}
+                        value={disk.managedDisk?.storageAccountType || ''}
+                      >
+                        {dataDiskTypes.map((type: string) => (
+                          <option key={type} value={type}>
+                            {type}
+                          </option>
+                        ))}
+                      </select>
+                    </td>
+                    <td>
+                      <select
+                        className="form-control input-sm"
+                        onChange={(event) => this.updateDataDisk(index, 'caching', event.target.value)}
+                        value={disk.caching || ''}
+                      >
+                        {dataDiskCachingTypes.map((type: string) => (
+                          <option key={type} value={type}>
+                            {type}
+                          </option>
+                        ))}
+                      </select>
+                    </td>
+                    <td>
+                      <button
+                        className="btn btn-link sm-label"
+                        onClick={() => this.removeDataDisk(index)}
+                        type="button"
+                      >
+                        <span className="glyphicon glyphicon-trash" />
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td colSpan={5}>
+                    <button className="btn btn-block btn-sm add-new" onClick={this.addDataDisk} type="button">
+                      <span className="glyphicon glyphicon-plus-sign" /> Add New Data Disk
+                    </button>
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import { DeploymentStrategySelector, NameUtils } from '@spinnaker/core';
+
+import { AzureWizardPage } from './common';
+
+export class ServerGroupBasicSettings extends AzureWizardPage {
+  public validate(values: any): { [key: string]: any } {
+    const errors: { [key: string]: any } = {};
+    const stackPattern = values.viewState?.templatingEnabled ? /^([a-zA-Z0-9]*(\${.+})*)*$/ : /^[a-zA-Z0-9]*$/;
+    const detailPattern = values.viewState?.templatingEnabled ? /^([a-zA-Z0-9-]*(\${.+})*)*$/ : /^[a-zA-Z0-9-]*$/;
+
+    if (!values.credentials) {
+      errors.credentials = 'Account required.';
+    }
+    if (!values.region) {
+      errors.region = 'Region required.';
+    }
+    if (!values.stack) {
+      errors.stack = 'Stack required.';
+    }
+    if (!values.freeFormDetails) {
+      errors.freeFormDetails = 'Detail required.';
+    }
+    if (!stackPattern.test(values.stack || '')) {
+      errors.stack = 'Stack can only contain letters and numbers.';
+    }
+    if (!detailPattern.test(values.freeFormDetails || '')) {
+      errors.freeFormDetails = 'Detail can only contain letters, numbers, and dashes.';
+    }
+    return errors;
+  }
+
+  private accountChanged = (account: string) => {
+    const { values } = this.props.formik;
+    values.credentials = account;
+    const result = values.credentialsChanged?.(values);
+    this.props.formik.setFieldValue('credentials', account);
+    this.props.formik.setFieldValue('region', values.region);
+    values.processCommandUpdateResult?.(result);
+  };
+
+  private regionChanged = (region: string) => {
+    const { values } = this.props.formik;
+    values.region = region;
+    const result = values.regionChanged?.(values);
+    this.props.formik.setFieldValue('region', region);
+    values.processCommandUpdateResult?.(result);
+  };
+
+  private strategyChanged = (_values: any, strategy: any) => {
+    this.props.formik.setFieldValue('strategy', strategy.key);
+  };
+
+  private onStrategyFieldChange = (key: string, value: any) => {
+    this.props.formik.setFieldValue(key, value);
+  };
+
+  public render() {
+    const { app, formik } = this.props;
+    const { values } = formik;
+    const clusterName = NameUtils.getClusterName(app?.name || values.application, values.stack, values.freeFormDetails);
+    const accounts = values.backingData?.accounts || [];
+    const regions = values.backingData?.filtered?.regions || [];
+
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Account</div>
+          <div className="col-md-7">
+            <select
+              className="form-control input-sm"
+              onChange={(event) => this.accountChanged(event.target.value)}
+              value={values.credentials || ''}
+            >
+              <option value="">Select...</option>
+              {accounts.map((account: string) => (
+                <option key={account} value={account}>
+                  {account}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Region</div>
+          <div className="col-md-7">
+            <select
+              className="form-control input-sm"
+              onChange={(event) => this.regionChanged(event.target.value)}
+              value={values.region || ''}
+            >
+              <option value="">Select...</option>
+              {regions.map((region: any) => {
+                const name = typeof region === 'string' ? region : region.name;
+                return (
+                  <option key={name} value={name}>
+                    {name}
+                  </option>
+                );
+              })}
+            </select>
+          </div>
+        </div>
+        {this.textField('Stack', 'stack')}
+        {this.textField('Detail', 'freeFormDetails')}
+        {!values.viewState?.disableStrategySelection && values.selectedProvider && (
+          <DeploymentStrategySelector
+            command={values}
+            onFieldChange={this.onStrategyFieldChange}
+            onStrategyChange={this.strategyChanged}
+          />
+        )}
+        {!values.viewState?.hideClusterNamePreview && (
+          <div className="well text-center">
+            Your server group will be in the cluster: <strong>{clusterName}</strong>
+          </div>
+        )}
+      </div>
+    );
+  }
+}