@spinnaker/azure 2026.2.2 → 2026.3.0

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

@@ -0,0 +1,119 @@
+import React from 'react';
+
+import { AzureWizardPage } from './common';
+
+function getVnetSelectValue(vnet: any): string {
+  return `${vnet.name}|${vnet.resourceGroup || ''}`;
+}
+
+function getVnetSelectLabel(vnet: any): string {
+  return vnet.resourceGroup ? `${vnet.name} (${vnet.resourceGroup})` : vnet.name;
+}
+
+export class ServerGroupNetworkSettings extends AzureWizardPage {
+  public validate(values: any): { [key: string]: any } {
+    const errors: { [key: string]: any } = {};
+
+    if (!values.viewState?.networkSettingsConfigured) {
+      return errors;
+    }
+
+    if (!values.selectedVnet) {
+      errors.selectedVnet = 'Virtual network required.';
+    }
+
+    if (!values.subnet) {
+      errors.selectedSubnet = 'Subnet required.';
+    }
+
+    return errors;
+  }
+
+  private selectedVnetChanged = (selected: string) => {
+    const vnets = this.props.formik.values.allVnets || this.props.formik.values.backingData?.filtered?.vnets || [];
+    const vnet = vnets.find((candidate: any) => getVnetSelectValue(candidate) === selected);
+    const selectedVnetSubnets = (vnet?.subnets || [])
+      .filter((subnet: any) =>
+        (subnet.devices || []).every((device: any) => !device || device.type !== 'applicationGateways'),
+      )
+      .map((subnet: any) => subnet.name || subnet);
+    this.props.formik.values.selectedVnet = vnet || null;
+    this.props.formik.values.vnet = vnet?.name || null;
+    this.props.formik.values.vnetResourceGroup = vnet?.resourceGroup || null;
+    this.props.formik.values.selectedSubnet = null;
+    this.props.formik.values.subnet = null;
+    this.props.formik.values.selectedVnetSubnets = selectedVnetSubnets;
+    this.props.formik.setFieldValue('selectedVnet', vnet || null);
+    this.props.formik.setFieldValue('vnet', vnet?.name || null);
+    this.props.formik.setFieldValue('vnetResourceGroup', vnet?.resourceGroup || null);
+    this.props.formik.setFieldValue('selectedSubnet', null);
+    this.props.formik.setFieldValue('subnet', null);
+    this.props.formik.setFieldValue('selectedVnetSubnets', selectedVnetSubnets);
+  };
+
+  private selectedSubnetChanged = (subnet: string) => {
+    this.props.formik.values.selectedSubnet = subnet || null;
+    this.props.formik.values.subnet = subnet || null;
+    this.props.formik.setFieldValue('selectedSubnet', subnet || null);
+    this.props.formik.setFieldValue('subnet', subnet || null);
+  };
+
+  public render() {
+    const { values } = this.props.formik;
+    const vnets = values.allVnets || values.backingData?.filtered?.vnets || [];
+    const subnets =
+      values.selectedVnetSubnets || (values.selectedVnet?.subnets || []).map((subnet: any) => subnet.name || subnet);
+    const showVnetSelect = values.loadBalancerType === 'Azure Load Balancer' || !values.loadBalancerType;
+
+    if (!values.viewState?.networkSettingsConfigured) {
+      return <h5 className="text-center">Please select an account, a region and a load balancer first.</h5>;
+    }
+
+    return (
+      <div className="container-fluid form-horizontal">
+        {showVnetSelect && (
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Virtual Network</div>
+            <div className="col-md-7">
+              <select
+                className="form-control input-sm"
+                onChange={(event) => this.selectedVnetChanged(event.target.value)}
+                value={values.selectedVnet ? getVnetSelectValue(values.selectedVnet) : ''}
+              >
+                <option value="">Select...</option>
+                {vnets.map((vnet: any) => (
+                  <option key={getVnetSelectValue(vnet)} value={getVnetSelectValue(vnet)}>
+                    {getVnetSelectLabel(vnet)}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        )}
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Subnets</div>
+          <div className="col-md-7">
+            <select
+              className="form-control input-sm"
+              onChange={(event) => this.selectedSubnetChanged(event.target.value)}
+              value={values.subnet || ''}
+            >
+              <option value="">Select...</option>
+              {subnets.map((subnet: string) => (
+                <option key={subnet} value={subnet}>
+                  {subnet}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        {!values.viewState?.hideClusterNamePreview && (
+          <div className="well-compact text-center">
+            <p>Your server group will be using a subnet in virtual network:</p>
+            <strong>{values.selectedVnet?.name || 'Virtual network was not selected'}</strong>
+          </div>
+        )}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { AzureWizardPage } from './common';
+
+export class ServerGroupSecurityGroups extends AzureWizardPage {
+  private securityGroupChanged = (securityGroupId: string) => {
+    const securityGroups = this.props.formik.values.backingData?.filtered?.securityGroups || [];
+    const selectedSecurityGroup = securityGroups.find(
+      (securityGroup: any) => (securityGroup.id || securityGroup.name) === securityGroupId,
+    );
+    this.props.formik.values.selectedSecurityGroup = selectedSecurityGroup || null;
+    this.props.formik.values.securityGroupName = securityGroupId || null;
+    this.props.formik.setFieldValue('selectedSecurityGroup', selectedSecurityGroup || null);
+    this.props.formik.setFieldValue('securityGroupName', securityGroupId || null);
+  };
+
+  public render() {
+    const { values } = this.props.formik;
+    const securityGroups = values.backingData?.filtered?.securityGroups || [];
+    if (!values.viewState?.securityGroupsConfigured) {
+      return <h5 className="text-center">Please select an account and region.</h5>;
+    }
+
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Firewall</div>
+          <div className="col-md-7">
+            <select
+              className="form-control input-sm"
+              onChange={(event) => this.securityGroupChanged(event.target.value)}
+              value={values.selectedSecurityGroup?.id || values.securityGroupName || ''}
+            >
+              <option value="">Select...</option>
+              {securityGroups.map((securityGroup: any) => {
+                const securityGroupId = securityGroup.id || securityGroup.name || securityGroup;
+                return (
+                  <option key={securityGroupId} value={securityGroupId}>
+                    {securityGroupId}
+                  </option>
+                );
+              })}
+            </select>
+          </div>
+        </div>
+        <div className="form-group small" style={{ marginTop: '20px' }}>
+          <div className="col-md-9 col-md-offset-3">
+            <p>If you're not finding a firewall that was recently added, refresh the list and reopen this dialog.</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { MapEditor } from '@spinnaker/core';
+
+import { AzureWizardPage } from './common';
+import Utility from '../../../../utility';
+
+export class ServerGroupTags extends AzureWizardPage {
+  public validate(values: any): { [key: string]: any } {
+    const tagResult = Utility.checkTags(values.instanceTags);
+    return tagResult.isValid ? {} : { instanceTags: tagResult.errorMessage };
+  }
+
+  private tagsChanged = (instanceTags: any) => {
+    this.props.formik.values.instanceTags = instanceTags;
+    this.props.formik.setFieldValue('instanceTags', instanceTags);
+  };
+
+  public render() {
+    const tagResult = Utility.checkTags(this.props.formik.values.instanceTags);
+    return (
+      <div className="container-fluid form-horizontal">
+        {!tagResult.isValid && <div className="col-md-12 text-danger">{tagResult.errorMessage}</div>}
+        <div className="form-group">
+          <div className="col-md-4 sm-label-left">
+            <b>Custom Tags</b>
+          </div>
+          <div className="col-md-12">
+            <MapEditor
+              addButtonLabel="Add New Tags"
+              allowEmpty={true}
+              model={this.props.formik.values.instanceTags || {}}
+              onChange={this.tagsChanged}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+
+export interface IAzureWizardPageProps {
+  formik: any;
+  app?: any;
+}
+
+export abstract class AzureWizardPage<P extends IAzureWizardPageProps = IAzureWizardPageProps>
+  extends React.Component<P>
+  implements IWizardPageComponent<any> {
+  public validate(_values: any): { [key: string]: any } {
+    return {};
+  }
+
+  protected setField = (field: string, value: any) => {
+    const path = field.split('.');
+    const leaf = path.pop();
+    const target = path.reduce((acc: any, key) => {
+      acc[key] = acc[key] || {};
+      return acc[key];
+    }, this.props.formik.values);
+    target[leaf] = value;
+    this.props.formik.setFieldValue(field, value);
+  };
+
+  protected textField(label: string, field: string, type = 'text') {
+    const value = this.props.formik.values[field] ?? '';
+    return (
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">{label}</div>
+        <div className="col-md-7">
+          <input
+            className="form-control input-sm"
+            name={field}
+            onChange={(event) => this.setField(field, event.target.value)}
+            type={type}
+            value={value}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  protected selectField(label: string, field: string, options: any[], labeler: (option: any) => string = String) {
+    const value = this.props.formik.values[field] ?? '';
+    return (
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">{label}</div>
+        <div className="col-md-7">
+          <select
+            className="form-control input-sm"
+            name={field}
+            onChange={(event) => this.setField(field, event.target.value)}
+            value={value}
+          >
+            <option value="">Select...</option>
+            {(options || []).map((option) => {
+              const optionValue = typeof option === 'string' ? option : option.name;
+              return (
+                <option key={optionValue} value={optionValue}>
+                  {labeler(option)}
+                </option>
+              );
+            })}
+          </select>
+        </div>
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/index.ts

@@ -0,0 +1,10 @@
+export * from './ServerGroupAdvancedSettings';
+export * from './ServerGroupBasicSettings';
+export * from './ServerGroupCapacityAndZones';
+export * from './ServerGroupHealthSettings';
+export * from './ServerGroupImageSettings';
+export * from './ServerGroupInstanceType';
+export * from './ServerGroupLoadBalancers';
+export * from './ServerGroupNetworkSettings';
+export * from './ServerGroupSecurityGroups';
+export * from './ServerGroupTags';

package/src/serverGroup/details/azureServerGroupDetails.spec.tsx

@@ -0,0 +1,263 @@
+import { mount } from 'enzyme';
+import React from 'react';
+
+import {
+  CloudProviderRegistry,
+  ConfirmationModalService,
+  DeckRuntimeContext,
+  nativePromiseService,
+  ServerGroupReader,
+  ServerGroupWarningMessageService,
+} from '@spinnaker/core';
+
+import { AzureImageReader } from '../../image/image.reader';
+import { registerAzureProvider } from '../../azure.module';
+import { AzureServerGroupCommandBuilder } from '../configure/serverGroupCommandBuilder.service';
+import { AzureCloneServerGroupModal } from '../configure/wizard/AzureCloneServerGroupModal';
+import {
+  AzureServerGroupActions as RoutedAzureServerGroupActions,
+  AzureServerGroupActionsComponent as AzureServerGroupActions,
+  azureServerGroupDetailsGetter,
+  azureServerGroupDetailsSections,
+} from './azureServerGroupDetails';
+
+describe('Azure server group details', () => {
+  let runtimeServices: any;
+  const stateService = { go: jasmine.createSpy('go'), includes: jasmine.createSpy('includes').and.returnValue(true) };
+  const routerProps = { router: {} as any, stateParams: {}, stateService: stateService as any };
+  const serverGroupParams = {
+    name: 'azure-v001',
+    accountId: 'test-account',
+    region: 'westus',
+  };
+
+  function buildApp(overrides: any = {}): any {
+    return {
+      name: 'fnord',
+      serverGroups: { data: [], refresh: jasmine.createSpy('refresh') },
+      loadBalancers: { data: [] },
+      securityGroups: { data: [] },
+      clusters: [],
+      ready: () => Promise.resolve(),
+      ...overrides,
+    };
+  }
+
+  function subscribeToGetter(props: any, autoClose = jasmine.createSpy('autoClose')): Promise<any> {
+    return new Promise((resolve, reject) => {
+      azureServerGroupDetailsGetter(props, autoClose).subscribe({
+        next: resolve,
+        error: reject,
+      });
+    });
+  }
+
+  function mountActions(app: any, serverGroup: any) {
+    runtimeServices = {
+      serverGroupCommandBuilder: new AzureServerGroupCommandBuilder(nativePromiseService),
+      serverGroupWriter: {
+        destroyServerGroup: jasmine.createSpy('destroyServerGroup'),
+        disableServerGroup: jasmine.createSpy('disableServerGroup'),
+        enableServerGroup: jasmine.createSpy('enableServerGroup'),
+      },
+    };
+    return mount(
+      <DeckRuntimeContext.Provider value={{ services: runtimeServices }}>
+        <AzureServerGroupActions {...routerProps} app={app} serverGroup={serverGroup} />
+      </DeckRuntimeContext.Provider>,
+    );
+  }
+
+  beforeEach(() => {
+    spyOn(ServerGroupReader, 'getServerGroup').and.returnValue(
+      Promise.resolve({
+        name: 'azure-v001',
+        account: 'test-account',
+        region: 'westus',
+        image: { imageName: 'ubuntu' },
+        launchConfig: { securityGroups: ['sg-1'] },
+      }) as any,
+    );
+  });
+
+  it('finds summaries in application server groups, fetches details, and merges summary fields', async () => {
+    const summary = {
+      name: 'azure-v001',
+      account: 'test-account',
+      region: 'westus',
+      type: 'azure',
+      cluster: 'azure',
+      createdTime: 123,
+      instanceCounts: { total: 1, up: 1 },
+      instances: [{ id: 'i-1' }],
+    };
+    const app = buildApp({ serverGroups: { data: [summary] } });
+
+    const result = await subscribeToGetter({ app, serverGroup: serverGroupParams });
+
+    expect(ServerGroupReader.getServerGroup).toHaveBeenCalledWith('fnord', 'test-account', 'westus', 'azure-v001');
+    expect(result).toEqual(jasmine.objectContaining(summary));
+    expect(result.account).toBe('test-account');
+    expect(result.image.imageName).toBe('ubuntu');
+  });
+
+  it('falls back to summaries on matching load balancers', async () => {
+    const loadBalancerSummary = {
+      name: 'azure-v001',
+      account: 'test-account',
+      region: 'westus',
+      cluster: 'azure',
+      loadBalancers: ['lb-1'],
+    };
+    const app = buildApp({
+      loadBalancers: {
+        data: [
+          { account: 'other-account', region: 'westus', serverGroups: [{ name: 'azure-v001' }] },
+          { account: 'test-account', region: 'westus', serverGroups: [loadBalancerSummary] },
+        ],
+      },
+    });
+
+    const result = await subscribeToGetter({ app, serverGroup: serverGroupParams });
+
+    expect(result).toEqual(jasmine.objectContaining(loadBalancerSummary));
+  });
+
+  it('auto-closes when the summary is missing', async () => {
+    const autoClose = jasmine.createSpy('autoClose');
+    const app = buildApp();
+
+    await new Promise<void>((resolve) => {
+      azureServerGroupDetailsGetter({ app, serverGroup: serverGroupParams }, autoClose).subscribe({
+        next: () => fail('should not emit a server group'),
+        complete: resolve,
+      });
+    });
+
+    expect(autoClose).toHaveBeenCalled();
+    expect(ServerGroupReader.getServerGroup).not.toHaveBeenCalled();
+  });
+
+  it('auto-closes when server group details are missing', async () => {
+    (ServerGroupReader.getServerGroup as jasmine.Spy).and.returnValue(Promise.resolve(null) as any);
+    const autoClose = jasmine.createSpy('autoClose');
+    const app = buildApp({ serverGroups: { data: [{ ...serverGroupParams, account: 'test-account' }] } });
+
+    await new Promise<void>((resolve) => {
+      azureServerGroupDetailsGetter({ app, serverGroup: serverGroupParams }, autoClose).subscribe({
+        next: () => fail('should not emit a server group'),
+        complete: resolve,
+      });
+    });
+
+    expect(autoClose).toHaveBeenCalled();
+  });
+
+  it('registers React server group details', () => {
+    registerAzureProvider();
+
+    expect(CloudProviderRegistry.getValue('azure', 'serverGroup.detailsGetter')).toBe(azureServerGroupDetailsGetter);
+    expect(CloudProviderRegistry.getValue('azure', 'serverGroup.detailsActions').render).toBe(
+      (RoutedAzureServerGroupActions as any).render,
+    );
+    expect(CloudProviderRegistry.getValue('azure', 'serverGroup.detailsSections')).toEqual(
+      azureServerGroupDetailsSections,
+    );
+  });
+
+  it('wires destroy, disable, and enable actions to confirmation modals', () => {
+    const app = buildApp();
+    const serverGroup = { name: 'azure-v001', account: 'test-account', region: 'westus', isDisabled: false };
+    spyOn(ConfirmationModalService, 'confirm');
+    spyOn(ServerGroupWarningMessageService, 'addDestroyWarningMessage');
+    spyOn(ServerGroupWarningMessageService, 'addDisableWarningMessage');
+
+    const wrapper = mountActions(app, serverGroup);
+    wrapper
+      .find('a')
+      .filterWhere((node) => node.text() === 'Destroy')
+      .simulate('click');
+    wrapper
+      .find('a')
+      .filterWhere((node) => node.text() === 'Disable')
+      .simulate('click');
+    wrapper
+      .find('a')
+      .filterWhere((node) => node.text() === 'Enable')
+      .simulate('click');
+
+    expect(ServerGroupWarningMessageService.addDestroyWarningMessage).toHaveBeenCalled();
+    expect(ServerGroupWarningMessageService.addDisableWarningMessage).toHaveBeenCalled();
+    expect(
+      (ConfirmationModalService.confirm as jasmine.Spy).calls.allArgs().map(([params]) => params.buttonText),
+    ).toEqual(['Destroy azure-v001', 'Disable azure-v001', 'Enable azure-v001']);
+    (ConfirmationModalService.confirm as jasmine.Spy).calls.first().args[0].taskMonitorConfig.onTaskComplete();
+    expect(stateService.go).toHaveBeenCalledWith('^');
+  });
+
+  it('builds a clone command before opening the clone wizard', async () => {
+    registerAzureProvider();
+    const app = buildApp();
+    const serverGroup = { name: 'azure-v001', account: 'test-account', region: 'westus' };
+    const command = { viewState: { mode: 'clone' }, source: { serverGroupName: 'azure-v001' } };
+    spyOn(AzureServerGroupCommandBuilder.prototype as any, 'buildServerGroupCommandFromExisting').and.returnValue(
+      Promise.resolve(command),
+    );
+    spyOn(AzureCloneServerGroupModal, 'show').and.returnValue(Promise.resolve());
+
+    const wrapper = mountActions(app, serverGroup);
+    wrapper
+      .find('a')
+      .filterWhere((node) => node.text() === 'Clone')
+      .simulate('click');
+    await Promise.resolve();
+
+    expect(AzureServerGroupCommandBuilder.prototype.buildServerGroupCommandFromExisting).toHaveBeenCalledWith(
+      app,
+      serverGroup,
+    );
+    expect(AzureCloneServerGroupModal.show).toHaveBeenCalledWith(
+      {
+        application: app,
+        command,
+        title: 'Clone azure-v001',
+      },
+      runtimeServices,
+    );
+  });
+
+  it('opens the clone wizard with image data seeded on the built command', async () => {
+    registerAzureProvider();
+    const images = [{ imageName: 'ubuntu-west', amis: { westus: ['ami-west'] } }];
+    const app = buildApp();
+    const serverGroup = {
+      name: 'azure-v001',
+      account: 'test-account',
+      region: 'westus',
+      image: { imageName: 'ubuntu-west' },
+      loadBalancers: [],
+      selectedVnetSubnets: [],
+      selectedVnet: { name: 'vnet-a' },
+      securityGroups: [],
+      zones: [],
+      dataDisks: [],
+      sku: { name: 'Standard_DS1_v2', capacity: 1 },
+      capacity: { min: 1, max: 1, desired: 1 },
+    };
+    spyOn(AzureImageReader.prototype, 'findImages').and.returnValue(Promise.resolve(images));
+    spyOn(AzureCloneServerGroupModal, 'show').and.returnValue(Promise.resolve());
+
+    const wrapper = mountActions(app, serverGroup);
+    wrapper
+      .find('a')
+      .filterWhere((node) => node.text() === 'Clone')
+      .simulate('click');
+    await Promise.resolve();
+    await Promise.resolve();
+
+    const props = (AzureCloneServerGroupModal.show as jasmine.Spy).calls.mostRecent().args[0];
+    expect(props.command.images).toBe(images);
+    expect(props.command.imageName).toBe('ubuntu-west');
+    expect(props.command.selectedImage).toBe(images[0]);
+  });
+});