@spinnaker/azure 2026.2.2 → 2026.3.0

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

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { AzureWizardPage } from './common';
+
+export class ServerGroupCapacityAndZones extends AzureWizardPage {
+  public validate(values: any): { [key: string]: any } {
+    if (values.zonesEnabled && (!values.zones || values.zones.length === 0)) {
+      return { zones: 'At least one zone is required when zones are enabled.' };
+    }
+    return {};
+  }
+
+  private capacityChanged = (capacity: string) => {
+    const parsed = Number(capacity);
+    this.props.formik.values.sku = { ...(this.props.formik.values.sku || {}), capacity: parsed };
+    this.props.formik.setFieldValue('sku.capacity', parsed);
+  };
+
+  private zoneToggled = (zone: string, enabled: boolean) => {
+    const current = this.props.formik.values.zones || [];
+    const zones = enabled ? current.concat(zone) : current.filter((candidate: string) => candidate !== zone);
+    this.props.formik.values.zones = zones;
+    this.props.formik.setFieldValue('zones', zones);
+  };
+
+  private zonesEnabledChanged = (enabled: boolean) => {
+    this.setField('zonesEnabled', enabled);
+    if (enabled) {
+      this.setField('enableInboundNAT', false);
+    }
+  };
+
+  public render() {
+    const { values } = this.props.formik;
+    const zones = values.backingData?.filtered?.zones || [];
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Capacity</div>
+          <div className="col-md-3">
+            <input
+              className="form-control input-sm"
+              min="0"
+              onChange={(event) => this.capacityChanged(event.target.value)}
+              type="number"
+              value={values.sku?.capacity ?? 0}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Use Zones</div>
+          <div className="col-md-7">
+            <input
+              checked={!!values.zonesEnabled}
+              onChange={(event) => this.zonesEnabledChanged(event.target.checked)}
+              type="checkbox"
+            />
+          </div>
+        </div>
+        {values.zonesEnabled && (
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Zones</div>
+            <div className="col-md-7">
+              {zones.map((zone: string) => (
+                <label className="checkbox-inline" key={zone}>
+                  <input
+                    checked={(values.zones || []).includes(zone)}
+                    onChange={(event) => this.zoneToggled(zone, event.target.checked)}
+                    type="checkbox"
+                  />
+                  {zone}
+                </label>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { AzureWizardPage } from './common';
+
+const healthCheckProtocols = [
+  { displayName: 'N/A', name: '' },
+  { displayName: 'HTTP', name: 'http' },
+  { displayName: 'TCP', name: 'tcp' },
+];
+
+export class ServerGroupHealthSettings extends AzureWizardPage {
+  public validate(values: any): { [key: string]: any } {
+    if (!values.healthSettings?.protocol) {
+      return {};
+    }
+    const errors: { [key: string]: any } = {};
+    if (!values.healthSettings.port) {
+      errors.port = 'Port required.';
+    }
+    if (values.healthSettings.protocol === 'http' && !values.healthSettings.requestPath) {
+      errors.requestPath = 'Path required.';
+    }
+    return errors;
+  }
+
+  private updateHealthSettings = (updates: any) => {
+    const healthSettings = { ...(this.props.formik.values.healthSettings || {}), ...updates };
+    this.props.formik.values.healthSettings = healthSettings;
+    this.props.formik.setFieldValue('healthSettings', healthSettings);
+  };
+
+  private protocolChanged = (protocol: string) => {
+    if (!protocol) {
+      this.updateHealthSettings({ protocol: null, port: null, requestPath: null });
+      return;
+    }
+    this.updateHealthSettings({
+      protocol,
+      requestPath: protocol === 'http' ? this.props.formik.values.healthSettings?.requestPath : null,
+    });
+  };
+
+  public render() {
+    const healthSettings = this.props.formik.values.healthSettings || {};
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Protocol</div>
+          <div className="col-md-7">
+            <select
+              className="form-control input-sm"
+              onChange={(event) => this.protocolChanged(event.target.value)}
+              value={healthSettings.protocol || ''}
+            >
+              {healthCheckProtocols.map((protocol) => (
+                <option key={protocol.displayName} value={protocol.name}>
+                  {protocol.displayName}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        {healthSettings.protocol && (
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Port</div>
+            <div className="col-md-7">
+              <input
+                className="form-control input-sm"
+                onChange={(event) => this.updateHealthSettings({ port: event.target.value })}
+                type="text"
+                value={healthSettings.port || ''}
+              />
+            </div>
+          </div>
+        )}
+        {healthSettings.protocol === 'http' && (
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Path</div>
+            <div className="col-md-7">
+              <input
+                className="form-control input-sm"
+                onChange={(event) => this.updateHealthSettings({ requestPath: event.target.value })}
+                type="text"
+                value={healthSettings.requestPath || ''}
+              />
+            </div>
+          </div>
+        )}
+        <div className="form-group small" style={{ marginTop: '20px' }}>
+          <div className="col-md-9 col-md-offset-3">
+            <p>Health settings here will be applied directly to the VM Scale Set.</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,151 @@
+import React from 'react';
+
+import { AzureWizardPage } from './common';
+
+export class ServerGroupImageSettings extends AzureWizardPage {
+  public validate(values: any): { [key: string]: any } {
+    if (values.viewState?.disableImageSelection) {
+      return {};
+    }
+    if (values.image?.isCustom) {
+      const errors: { [key: string]: any } = {};
+      if (!values.image.imageName) {
+        errors.imageName = 'Image name required.';
+      }
+      if (!values.image.ostype) {
+        errors.ostype = 'OS type required.';
+      }
+      if (!values.image.uri) {
+        errors.uri = 'URI required.';
+      }
+      return errors;
+    }
+    if (!values.selectedImage) {
+      return { selectedImage: 'Image required.' };
+    }
+    return {};
+  }
+
+  private isRegionalImage(image: any, region: string): boolean {
+    if (!region) {
+      return true;
+    }
+    if (image.amis) {
+      return !!image.amis[region];
+    }
+    return image.region === region || image.region == null;
+  }
+
+  private imageChanged = (imageName: string) => {
+    const images = this.props.formik.values.backingData?.filtered?.images || this.props.formik.values.images || [];
+    const image = images.find((candidate: any) => candidate.imageName === imageName) || null;
+    this.props.formik.values.imageName = imageName;
+    this.props.formik.values.selectedImage = image;
+    this.props.formik.setFieldValue('imageName', imageName);
+    this.props.formik.setFieldValue('selectedImage', image);
+  };
+
+  private customImageChanged = (isCustom: boolean) => {
+    const image = isCustom
+      ? { ...(this.props.formik.values.image || {}), isCustom, region: this.props.formik.values.region }
+      : { isCustom };
+    this.props.formik.values.image = image;
+    this.props.formik.setFieldValue('image', image);
+  };
+
+  private customImageFieldChanged = (field: string, value: string) => {
+    const image = {
+      ...(this.props.formik.values.image || {}),
+      isCustom: true,
+      region: this.props.formik.values.region,
+      [field]: value,
+    };
+    this.props.formik.values.image = image;
+    this.props.formik.setFieldValue('image', image);
+  };
+
+  public render() {
+    const { values } = this.props.formik;
+    const imageOptions = values.backingData?.filtered?.images || values.images || [];
+    const images = values.region
+      ? imageOptions.filter((image: any) => this.isRegionalImage(image, values.region))
+      : imageOptions;
+    const image = values.image || {};
+
+    if (values.viewState?.disableImageSelection) {
+      return <div className="container-fluid form-horizontal">Image selection is disabled for this command.</div>;
+    }
+
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Use custom image?</div>
+          <div className="col-md-7">
+            <input
+              checked={!!image.isCustom}
+              onChange={(event) => this.customImageChanged(event.target.checked)}
+              type="checkbox"
+            />
+          </div>
+        </div>
+        {image.isCustom && (
+          <>
+            <div className="form-group">
+              <div className="col-md-3 sm-label-right">Region</div>
+              <div className="col-md-7">{values.region}</div>
+            </div>
+            <div className="form-group">
+              <div className="col-md-3 sm-label-right">Image Name</div>
+              <div className="col-md-7">
+                <input
+                  className="form-control input-sm"
+                  onChange={(event) => this.customImageFieldChanged('imageName', event.target.value)}
+                  value={image.imageName || ''}
+                />
+              </div>
+            </div>
+            <div className="form-group">
+              <div className="col-md-3 sm-label-right">OS Type</div>
+              <div className="col-md-7">
+                <input
+                  className="form-control input-sm"
+                  onChange={(event) => this.customImageFieldChanged('ostype', event.target.value)}
+                  value={image.ostype || ''}
+                />
+              </div>
+            </div>
+            <div className="form-group">
+              <div className="col-md-3 sm-label-right">URI</div>
+              <div className="col-md-7">
+                <input
+                  className="form-control input-sm"
+                  onChange={(event) => this.customImageFieldChanged('uri', event.target.value)}
+                  value={image.uri || ''}
+                />
+              </div>
+            </div>
+          </>
+        )}
+        {!image.isCustom && (
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Image</div>
+            <div className="col-md-7">
+              <select
+                className="form-control input-sm"
+                onChange={(event) => this.imageChanged(event.target.value)}
+                value={values.imageName || values.selectedImage?.imageName || ''}
+              >
+                <option value="">Select...</option>
+                {images.map((image: any) => (
+                  <option key={image.imageName} value={image.imageName}>
+                    {image.imageName}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { AzureWizardPage } from './common';
+
+export class ServerGroupInstanceType extends AzureWizardPage {
+  public validate(values: any): { [key: string]: any } {
+    return values.instanceType ? {} : { instanceType: 'Instance Type required.' };
+  }
+
+  private instanceTypeChanged = (instanceType: string) => {
+    this.props.formik.values.instanceType = instanceType;
+    this.props.formik.setFieldValue('instanceType', instanceType);
+    this.props.formik.setFieldValue('sku.name', instanceType);
+  };
+
+  public render() {
+    const { values } = this.props.formik;
+    const instanceTypes = values.backingData?.filtered?.instanceTypes || [];
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Instance Type</div>
+          <div className="col-md-7">
+            <select
+              className="form-control input-sm"
+              onChange={(event) => this.instanceTypeChanged(event.target.value)}
+              value={values.instanceType || ''}
+            >
+              <option value="">Select...</option>
+              {instanceTypes.map((type: string) => (
+                <option key={type} value={type}>
+                  {type}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,214 @@
+import React from 'react';
+
+import { DeckRuntimeContext, InfrastructureCaches, NetworkReader } from '@spinnaker/core';
+
+import { AzureWizardPage } from './common';
+import Utility from '../../../../utility';
+
+function normalizeLoadBalancerType(loadBalancerType: string): string | null {
+  const normalized = String(loadBalancerType || '')
+    .toLowerCase()
+    .split('_')
+    .join(' ');
+  if (normalized === 'application gateway') {
+    return 'Azure Application Gateway';
+  }
+  if (normalized === 'load balancer') {
+    return 'Azure Load Balancer';
+  }
+  return Utility.getLoadBalancerType(loadBalancerType)?.type || loadBalancerType || null;
+}
+
+function selectableSubnetNames(vnet: any): string[] {
+  return (vnet?.subnets || [])
+    .filter((subnet: any) =>
+      (subnet.devices || []).every((device: any) => !device || device.type !== 'applicationGateways'),
+    )
+    .map((subnet: any) => subnet.name || subnet);
+}
+
+function matchesSelectedVnet(candidate: any, selectedVnet: any): boolean {
+  return (
+    candidate.name === selectedVnet.name &&
+    (!selectedVnet.resourceGroup || candidate.resourceGroup === selectedVnet.resourceGroup)
+  );
+}
+
+export class ServerGroupLoadBalancers extends AzureWizardPage {
+  public static contextType = DeckRuntimeContext;
+  public declare context: React.ContextType<typeof DeckRuntimeContext>;
+
+  private loadVnetSubnetsRequestId = 0;
+
+  private getCommandLoadBalancer(loadBalancerName: string | null): any {
+    const { values } = this.props.formik;
+    const loadBalancers = values.backingData?.loadBalancers || [];
+    return (
+      loadBalancers.find(
+        (candidate: any) =>
+          candidate.name === loadBalancerName &&
+          candidate.account === values.credentials &&
+          candidate.region === values.region,
+      ) || loadBalancers.find((candidate: any) => candidate.name === loadBalancerName)
+    );
+  }
+
+  public componentDidMount(): void {
+    const { values } = this.props.formik;
+    if (values.credentials && values.region) {
+      values.viewState.networkSettingsConfigured = true;
+      values.selectedVnetSubnets = values.selectedVnetSubnets || [];
+      if (values.loadBalancerName) {
+        void this.loadBalancerChanged(values.loadBalancerName);
+      } else {
+        void this.loadVnetSubnets(null, values.loadBalancerType || null, ++this.loadVnetSubnetsRequestId);
+      }
+    }
+  }
+
+  public componentWillUnmount(): void {
+    this.loadVnetSubnetsRequestId += 1;
+  }
+
+  public loadBalancerChanged = async (loadBalancerName: string | null, clearNetworkFields = false): Promise<void> => {
+    const { values } = this.props.formik;
+    const requestId = ++this.loadVnetSubnetsRequestId;
+    const loadBalancer = this.getCommandLoadBalancer(loadBalancerName);
+    const loadBalancerType = normalizeLoadBalancerType(loadBalancer?.loadBalancerType);
+    values.loadBalancerName = loadBalancerName || null;
+    values.loadBalancerType = loadBalancerType;
+    values.selectedVnetSubnets = [];
+    if (clearNetworkFields) {
+      values.selectedVnet = null;
+      values.vnet = null;
+      values.vnetResourceGroup = null;
+      values.selectedSubnet = null;
+      values.subnet = null;
+    }
+    values.viewState = values.viewState || {};
+    values.viewState.networkSettingsConfigured = true;
+    this.props.formik.setFieldValue('loadBalancerName', values.loadBalancerName);
+    this.props.formik.setFieldValue('loadBalancerType', values.loadBalancerType);
+    this.props.formik.setFieldValue('selectedVnetSubnets', []);
+    if (clearNetworkFields) {
+      this.props.formik.setFieldValue('selectedVnet', null);
+      this.props.formik.setFieldValue('vnet', null);
+      this.props.formik.setFieldValue('vnetResourceGroup', null);
+      this.props.formik.setFieldValue('selectedSubnet', null);
+      this.props.formik.setFieldValue('subnet', null);
+    }
+    InfrastructureCaches.clearCache('networks');
+    await this.loadVnetSubnets(values.loadBalancerName, loadBalancerType, requestId);
+  };
+
+  private loadVnetSubnets = async (
+    loadBalancerName: string | null,
+    loadBalancerType: string | null,
+    requestId: number,
+  ): Promise<void> => {
+    const { values } = this.props.formik;
+    const credentials = values.credentials;
+    const region = values.region;
+    if (!credentials || !region) {
+      return;
+    }
+
+    let loadBalancerDetails: any[];
+    let networks: any;
+    try {
+      [loadBalancerDetails, networks] = await Promise.all([
+        loadBalancerName
+          ? this.context.services.loadBalancerReader.getLoadBalancerDetails(
+              'azure',
+              credentials,
+              region,
+              loadBalancerName,
+            )
+          : Promise.resolve([]),
+        NetworkReader.listNetworks(),
+      ]);
+    } catch (_error) {
+      return;
+    }
+    if (
+      requestId !== this.loadVnetSubnetsRequestId ||
+      values.loadBalancerName !== loadBalancerName ||
+      values.credentials !== credentials ||
+      values.region !== region
+    ) {
+      return;
+    }
+    const azureNetworks = Array.isArray(networks) ? networks : (networks as any).azure || [];
+    const allVnets = azureNetworks.filter((vnet: any) => vnet.account === credentials && vnet.region === region);
+    const attachedVnet = values.selectedVnet;
+    const selectedLoadBalancer = loadBalancerDetails?.length === 1 ? loadBalancerDetails[0] : null;
+    let selectedVnet =
+      !selectedLoadBalancer && attachedVnet
+        ? allVnets.find((vnet: any) => matchesSelectedVnet(vnet, attachedVnet)) || null
+        : null;
+
+    if (selectedLoadBalancer) {
+      selectedVnet = allVnets.find((vnet: any) => {
+        if (loadBalancerType === 'Azure Application Gateway') {
+          return vnet.name === selectedLoadBalancer.vnet;
+        }
+        if (loadBalancerType === 'Azure Load Balancer' && attachedVnet) {
+          return matchesSelectedVnet(vnet, attachedVnet);
+        }
+        return false;
+      });
+    }
+
+    const selectedVnetSubnets = selectedVnet
+      ? selectableSubnetNames(selectedVnet)
+      : allVnets.reduce((subnets: string[], vnet: any) => subnets.concat(selectableSubnetNames(vnet)), []);
+
+    values.allVnets = allVnets;
+    values.selectedVnet = selectedVnet || null;
+    values.vnet = selectedVnet?.name || null;
+    values.vnetResourceGroup = selectedVnet?.resourceGroup || null;
+    values.selectedVnetSubnets = selectedVnetSubnets;
+    values.selectedSubnet = selectedVnet && selectedVnetSubnets.includes(values.subnet) ? values.subnet : null;
+    values.subnet = values.selectedSubnet;
+
+    this.props.formik.setFieldValue('allVnets', allVnets);
+    this.props.formik.setFieldValue('selectedVnet', values.selectedVnet);
+    this.props.formik.setFieldValue('vnet', values.vnet);
+    this.props.formik.setFieldValue('vnetResourceGroup', values.vnetResourceGroup);
+    this.props.formik.setFieldValue('selectedVnetSubnets', selectedVnetSubnets);
+    this.props.formik.setFieldValue('selectedSubnet', values.selectedSubnet);
+    this.props.formik.setFieldValue('subnet', values.subnet);
+  };
+
+  public render() {
+    const loadBalancers =
+      this.props.formik.values.loadBalancers || this.props.formik.values.backingData?.filtered?.loadBalancers || [];
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Load Balancer</div>
+          <div className="col-md-7">
+            <select
+              className="form-control input-sm"
+              onChange={(event) => this.loadBalancerChanged(event.target.value, true)}
+              value={this.props.formik.values.loadBalancerName || ''}
+            >
+              <option value="">None</option>
+              {loadBalancers.map((loadBalancer: string) => (
+                <option key={loadBalancer} value={loadBalancer}>
+                  {loadBalancer}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        {this.props.formik.values.loadBalancerName && (
+          <div className="well-compact text-center">
+            The load balancer {this.props.formik.values.loadBalancerName} is an{' '}
+            {this.props.formik.values.loadBalancerType}
+          </div>
+        )}
+      </div>
+    );
+  }
+}