@spinnaker/titus 0.0.0-2025.1-0

package/src/serverGroup/configure/serverGroupConfiguration.service.ts

@@ -0,0 +1,410 @@
+import { module } from 'angular';
+import { chain, cloneDeep, flatten, intersection, xor } from 'lodash';
+import { $q } from 'ngimport';
+import { Subject } from 'rxjs';
+
+import type {
+  IAmazonApplicationLoadBalancer,
+  IAmazonLoadBalancer,
+  IAmazonServerGroupCommandDirty,
+} from '@spinnaker/amazon';
+import { VpcReader } from '@spinnaker/amazon';
+import type {
+  Application,
+  CacheInitializerService,
+  IAccountDetails,
+  ICluster,
+  IDeploymentStrategy,
+  ISecurityGroup,
+  IServerGroupCommand,
+  IServerGroupCommandBackingData,
+  IServerGroupCommandViewState,
+  IVpc,
+  LoadBalancerReader,
+  SecurityGroupReader,
+} from '@spinnaker/core';
+import {
+  AccountService,
+  CACHE_INITIALIZER_SERVICE,
+  LOAD_BALANCER_READ_SERVICE,
+  NameUtils,
+  SECURITY_GROUP_READER,
+  setMatchingResourceSummary,
+  SubnetReader,
+} from '@spinnaker/core';
+import type { IJobDisruptionBudget, ITitusResources } from '../../domain';
+import type { ITitusServiceJobProcesses } from '../../domain/ITitusServiceJobProcesses';
+
+export interface ITitusServerGroupCommandBackingData extends IServerGroupCommandBackingData {
+  accounts: string[];
+  vpcs: IVpc[];
+}
+
+export interface ITitusServerGroupCommandViewState extends IServerGroupCommandViewState {
+  accountChangedStream: Subject<{}>;
+  regionChangedStream: Subject<{}>;
+  groupsRemovedStream: Subject<{}>;
+  dirty: IAmazonServerGroupCommandDirty;
+  defaultIamProfile: string;
+}
+
+export const defaultJobDisruptionBudget: IJobDisruptionBudget = {
+  availabilityPercentageLimit: {
+    percentageOfHealthyContainers: 95,
+  },
+  ratePercentagePerInterval: {
+    intervalMs: 600000,
+    percentageLimitPerInterval: 5,
+  },
+  containerHealthProviders: [{ name: 'eureka' }],
+  timeWindows: [
+    {
+      days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
+      hourlyTimeWindows: [{ startHour: 10, endHour: 16 }],
+      timeZone: 'PST',
+    },
+  ],
+};
+
+export const getDefaultJobDisruptionBudgetForApp = (application: Application): IJobDisruptionBudget => {
+  const budget = cloneDeep(defaultJobDisruptionBudget);
+  if (application.attributes && application.attributes.platformHealthOnly) {
+    budget.containerHealthProviders = [];
+  }
+  return budget;
+};
+
+export interface ITitusServerGroupCommand extends IServerGroupCommand {
+  cluster?: ICluster;
+  disruptionBudget?: IJobDisruptionBudget;
+  deferredInitialization?: boolean;
+  registry: string;
+  imageId: string;
+  organization: string;
+  repository: string;
+  tag?: string;
+  digest?: string;
+  image: string;
+  inService: boolean;
+  resources: ITitusResources;
+  efs: {
+    efsId: string;
+    mountPoint: string;
+    mountPerm: string;
+    efsRelativeMountPoint: string;
+  };
+  viewState: ITitusServerGroupCommandViewState;
+  targetGroups: string[];
+  removedTargetGroups: string[];
+  backingData: ITitusServerGroupCommandBackingData;
+  labels: { [key: string]: string };
+  containerAttributes: { [key: string]: string };
+  env: { [key: string]: string };
+  iamProfile: string;
+  migrationPolicy: {
+    type: string;
+  };
+  constraints: {
+    hard: { [key: string]: string };
+    soft: { [key: string]: string };
+  };
+  serviceJobProcesses: ITitusServiceJobProcesses;
+}
+
+export class TitusServerGroupConfigurationService {
+  public static $inject = ['cacheInitializer', 'loadBalancerReader', 'securityGroupReader'];
+  constructor(
+    private cacheInitializer: CacheInitializerService,
+    private loadBalancerReader: LoadBalancerReader,
+    private securityGroupReader: SecurityGroupReader,
+  ) {}
+
+  public configureZones(command: ITitusServerGroupCommand) {
+    command.backingData.filtered.regions = command.backingData.credentialsKeyedByAccount[command.credentials].regions;
+  }
+
+  public configureSubnets(command: ITitusServerGroupCommand) {
+    const result = { dirty: {} };
+    const filteredData = command.backingData.filtered;
+    if (command.region === null) {
+      return result;
+    }
+
+    const accountDetails = this.getCredentials(command);
+    filteredData.subnetPurposes = chain(command.backingData.subnets)
+      .filter({ account: accountDetails.awsAccount, region: command.region })
+      .reject({ target: 'elb' })
+      .reject({ purpose: null })
+      .uniqBy('purpose')
+      .value();
+
+    const subnetType = command.subnetType || 'titus (vpc0)';
+    const subnetIds = chain(command.backingData.subnets)
+      .filter({ account: accountDetails.awsAccount, region: command.region, purpose: subnetType })
+      .map((subnet) => subnet.id)
+      .value();
+    command.containerAttributes['titusParameter.agent.subnets'] = subnetIds.join(',');
+
+    return result;
+  }
+
+  private attachEventHandlers(cmd: ITitusServerGroupCommand) {
+    cmd.credentialsChanged = (command: ITitusServerGroupCommand) => {
+      const result = { dirty: {} };
+      const backingData = command.backingData;
+      this.configureZones(command);
+      if (command.credentials) {
+        command.registry = (backingData.credentialsKeyedByAccount[command.credentials] as any).registry;
+        backingData.filtered.regions = backingData.credentialsKeyedByAccount[command.credentials].regions;
+
+        const accountId = backingData.credentialsKeyedByAccount[command.credentials].accountId;
+        command.containerAttributes['titusParameter.agent.accountId'] = accountId;
+        if (!backingData.filtered.regions.some((r) => r.name === command.region)) {
+          command.region = null;
+          command.regionChanged(command);
+        }
+      } else {
+        command.region = null;
+      }
+      command.viewState.dirty = { ...(command.viewState.dirty || {}), ...result.dirty };
+      this.configureLoadBalancerOptions(command);
+      this.configureSecurityGroupOptions(command);
+      this.configureSubnets(command);
+      setMatchingResourceSummary(command);
+      return result;
+    };
+
+    cmd.regionChanged = (command: ITitusServerGroupCommand) => {
+      this.configureLoadBalancerOptions(command);
+      this.configureSecurityGroupOptions(command);
+      this.configureSubnets(command);
+      setMatchingResourceSummary(command);
+      return {};
+    };
+
+    cmd.clusterChanged = (command: ITitusServerGroupCommand): void => {
+      command.moniker = NameUtils.getMoniker(command.application, command.stack, command.freeFormDetails);
+      setMatchingResourceSummary(command);
+    };
+
+    cmd.subnetChanged = (command: ITitusServerGroupCommand) => {
+      return this.configureSubnets(command);
+    };
+  }
+
+  public configureCommand(cmd: ITitusServerGroupCommand): PromiseLike<void> {
+    cmd.viewState.accountChangedStream = new Subject();
+    cmd.viewState.regionChangedStream = new Subject();
+    cmd.viewState.groupsRemovedStream = new Subject();
+    cmd.viewState.dirty = {};
+    cmd.onStrategyChange = (command: ITitusServerGroupCommand, strategy: IDeploymentStrategy) => {
+      // Any strategy other than None or Custom should force traffic to be enabled
+      if (strategy.key !== '' && strategy.key !== 'custom') {
+        command.inService = true;
+      }
+    };
+    cmd.image = cmd.viewState.imageId;
+    return $q
+      .all([
+        AccountService.getCredentialsKeyedByAccount('titus'),
+        this.securityGroupReader.getAllSecurityGroups(),
+        VpcReader.listVpcs(),
+        SubnetReader.listSubnets(),
+        AccountService.getCredentialsKeyedByAccount('aws'),
+      ])
+      .then(([credentialsKeyedByAccount, securityGroups, vpcs, subnets, awsCredentials]) => {
+        const backingData: any = {
+          credentialsKeyedByAccount,
+          securityGroups,
+          vpcs,
+        };
+
+        // add the AWS accountId to the credentialsKeyedByAccount to easily set container attributes
+        Object.keys(credentialsKeyedByAccount).forEach((acc) => {
+          const awsAccount = credentialsKeyedByAccount[acc].awsAccount;
+          const awsAccountId = awsCredentials[awsAccount].accountId;
+          credentialsKeyedByAccount[acc].accountId = awsAccountId;
+        });
+        backingData.credentialsKeyedByAccount = credentialsKeyedByAccount;
+
+        if (cmd.credentials) {
+          cmd.containerAttributes['titusParameter.agent.accountId'] =
+            backingData.credentialsKeyedByAccount[cmd.credentials].accountId;
+        }
+
+        backingData.images = [];
+        backingData.accounts = Object.keys(credentialsKeyedByAccount);
+        backingData.subnets = subnets;
+        backingData.filtered = {};
+        if (cmd.credentials.includes('${')) {
+          // If our dependency is an expression, the only thing we can really do is to just preserve current selections
+          backingData.filtered.regions = [{ name: cmd.region }];
+        } else {
+          backingData.filtered.regions = credentialsKeyedByAccount[cmd.credentials]?.regions ?? [];
+        }
+        cmd.backingData = backingData;
+        backingData.filtered.securityGroups = this.getRegionalSecurityGroups(cmd);
+
+        let securityGroupRefresher: PromiseLike<any> = $q.when();
+        if (cmd.securityGroups && cmd.securityGroups.length) {
+          const regionalSecurityGroupIds = backingData.filtered.securityGroups.map((g: ISecurityGroup) => g.id);
+          if (intersection(cmd.securityGroups, regionalSecurityGroupIds).length < cmd.securityGroups.length) {
+            securityGroupRefresher = this.refreshSecurityGroups(cmd, false);
+          }
+        }
+
+        return $q.all([this.refreshLoadBalancers(cmd), securityGroupRefresher]).then(() => {
+          this.attachEventHandlers(cmd);
+        });
+      });
+  }
+
+  private getVpcId(command: ITitusServerGroupCommand): string {
+    const credentials = this.getCredentials(command);
+    const match = command.backingData.vpcs.find(
+      (vpc) =>
+        vpc.name === credentials.awsVpc &&
+        vpc.account === credentials.awsAccount &&
+        vpc.region === this.getRegion(command) &&
+        vpc.cloudProvider === 'aws',
+    );
+    return match ? match.id : null;
+  }
+
+  private getRegionalSecurityGroups(command: ITitusServerGroupCommand): ISecurityGroup[] {
+    const newSecurityGroups: any = command.backingData.securityGroups[this.getAwsAccount(command)] || { aws: {} };
+    return chain<ISecurityGroup>(newSecurityGroups.aws[this.getRegion(command)])
+      .filter({ vpcId: this.getVpcId(command) })
+      .sortBy('name')
+      .value();
+  }
+
+  private configureSecurityGroupOptions(command: ITitusServerGroupCommand): void {
+    const currentOptions = command.backingData.filtered.securityGroups;
+    if (command.credentials.includes('${') || (command.region && command.region.includes('${'))) {
+      // If any of our dependencies are expressions, the only thing we can do is preserve current values
+      command.backingData.filtered.securityGroups = command.securityGroups.map((group) => ({ name: group, id: group }));
+    } else {
+      const newRegionalSecurityGroups = this.getRegionalSecurityGroups(command);
+      const isExpression =
+        typeof command.securityGroups === 'string' && (command.securityGroups as string).includes('${');
+      if (currentOptions && command.securityGroups && !isExpression) {
+        // not initializing - we are actually changing groups
+        const currentGroupNames: string[] = command.securityGroups.map((groupId: string) => {
+          const match = currentOptions.find((o) => o.id === groupId);
+          return match ? match.name : groupId;
+        });
+
+        const matchedGroups = command.securityGroups
+          .map((groupId: string) => {
+            const securityGroup: any = currentOptions.find((o) => o.id === groupId || o.name === groupId);
+            return securityGroup ? securityGroup.name : null;
+          })
+          .map((groupName: string) => newRegionalSecurityGroups.find((g) => g.name === groupName))
+          .filter((group: any) => group);
+
+        const matchedGroupNames: string[] = matchedGroups.map((g) => g.name);
+        const removed: string[] = xor(currentGroupNames, matchedGroupNames);
+        command.securityGroups = matchedGroups.map((g) => g.id);
+        if (removed.length) {
+          command.viewState.dirty.securityGroups = removed;
+        }
+      }
+      command.backingData.filtered.securityGroups = newRegionalSecurityGroups.sort((a, b) => {
+        if (command.securityGroups.includes(a.id)) {
+          return -1;
+        }
+        if (command.securityGroups.includes(b.id)) {
+          return 1;
+        }
+        return a.name.localeCompare(b.name);
+      });
+    }
+  }
+
+  public refreshSecurityGroups(
+    command: ITitusServerGroupCommand,
+    skipCommandReconfiguration: boolean,
+  ): PromiseLike<void> {
+    return this.cacheInitializer.refreshCache('securityGroups').then(() => {
+      return this.securityGroupReader.getAllSecurityGroups().then((securityGroups: any) => {
+        command.backingData.securityGroups = securityGroups;
+        if (!skipCommandReconfiguration) {
+          this.configureSecurityGroupOptions(command);
+        }
+      });
+    });
+  }
+
+  private getCredentials(command: ITitusServerGroupCommand): IAccountDetails {
+    return command.backingData.credentialsKeyedByAccount[command.credentials];
+  }
+
+  private getAwsAccount(command: ITitusServerGroupCommand): string {
+    return this.getCredentials(command).awsAccount;
+  }
+
+  private getRegion(command: ITitusServerGroupCommand): string {
+    return command.region || (command.cluster ? command.cluster.region : null);
+  }
+
+  public getTargetGroupNames(command: ITitusServerGroupCommand): string[] {
+    const loadBalancersV2 = this.getLoadBalancerMap(command).filter(
+      (lb) => lb.loadBalancerType !== 'classic',
+    ) as IAmazonApplicationLoadBalancer[];
+    const instanceTargetGroups = flatten(
+      loadBalancersV2.map<any>((lb) => lb.targetGroups.filter((tg) => tg.targetType === 'ip')),
+    );
+    return instanceTargetGroups.map((tg) => tg.name).sort();
+  }
+
+  private getLoadBalancerMap(command: ITitusServerGroupCommand): IAmazonLoadBalancer[] {
+    return chain(command.backingData.loadBalancers)
+      .map('accounts')
+      .flattenDeep()
+      .filter({ name: this.getAwsAccount(command) })
+      .map('regions')
+      .flattenDeep()
+      .filter({ name: this.getRegion(command) })
+      .map<IAmazonLoadBalancer>('loadBalancers')
+      .flattenDeep<IAmazonLoadBalancer>()
+      .value();
+  }
+
+  public configureLoadBalancerOptions(command: ITitusServerGroupCommand) {
+    const currentTargetGroups = command.targetGroups || [];
+    if (command.credentials.includes('${') || (command.region && command.region.includes('${'))) {
+      // If any of our dependencies are expressions, the only thing we can do is preserve current values
+      command.targetGroups = currentTargetGroups;
+      (command.backingData.filtered as any).targetGroups = currentTargetGroups;
+    } else {
+      const allTargetGroups = this.getTargetGroupNames(command);
+
+      if (currentTargetGroups && command.targetGroups) {
+        const matched = intersection(allTargetGroups, currentTargetGroups);
+        const removedTargetGroups = xor(matched, currentTargetGroups);
+        command.targetGroups = intersection(allTargetGroups, matched);
+        if (removedTargetGroups && removedTargetGroups.length > 0) {
+          command.viewState.dirty.targetGroups = removedTargetGroups;
+        } else {
+          delete command.viewState.dirty.targetGroups;
+        }
+      }
+      (command.backingData.filtered as any).targetGroups = allTargetGroups;
+    }
+  }
+
+  public refreshLoadBalancers(command: ITitusServerGroupCommand) {
+    return this.loadBalancerReader.listLoadBalancers('aws').then((loadBalancers) => {
+      command.backingData.loadBalancers = loadBalancers;
+      this.configureLoadBalancerOptions(command);
+    });
+  }
+}
+
+export const TITUS_SERVER_GROUP_CONFIGURATION_SERVICE = 'spinnaker.titus.serverGroup.configure.service';
+module(TITUS_SERVER_GROUP_CONFIGURATION_SERVICE, [
+  CACHE_INITIALIZER_SERVICE,
+  LOAD_BALANCER_READ_SERVICE,
+  SECURITY_GROUP_READER,
+]).service('titusServerGroupConfigurationService', TitusServerGroupConfigurationService);

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

@@ -0,0 +1,293 @@
+import { get, isEqual } from 'lodash';
+import React from 'react';
+
+import { ServerGroupCapacity, ServerGroupLoadBalancers, ServerGroupSecurityGroups } from '@spinnaker/amazon';
+import type { Application, IModalComponentProps, IStage } from '@spinnaker/core';
+import {
+  AccountTag,
+  DeployInitializer,
+  FirewallLabels,
+  noop,
+  ReactInjector,
+  ReactModal,
+  TaskMonitor,
+  WizardModal,
+  WizardPage,
+} from '@spinnaker/core';
+
+import { ServerGroupBasicSettings, ServerGroupParameters, ServerGroupResources } from './pages';
+import { JobDisruptionBudget } from './pages/disruptionBudget/JobDisruptionBudget';
+import { TitusReactInjector } from '../../../reactShims';
+import type { ITitusServerGroupCommand } from '../serverGroupConfiguration.service';
+import { getDefaultJobDisruptionBudgetForApp } from '../serverGroupConfiguration.service';
+
+export interface ITitusCloneServerGroupModalProps extends IModalComponentProps {
+  title: string;
+  application: Application;
+  command: ITitusServerGroupCommand;
+}
+
+export interface ITitusCloneServerGroupModalState {
+  firewallsLabel: string;
+  loaded: boolean;
+  requiresTemplateSelection: boolean;
+  taskMonitor: TaskMonitor;
+}
+
+export class TitusCloneServerGroupModal extends React.Component<
+  ITitusCloneServerGroupModalProps,
+  ITitusCloneServerGroupModalState
+> {
+  public static defaultProps: Partial<ITitusCloneServerGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private _isUnmounted = false;
+  private refreshUnsubscribe: () => void;
+
+  public static show(props: ITitusCloneServerGroupModalProps): Promise<ITitusServerGroupCommand> {
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    return ReactModal.show(TitusCloneServerGroupModal, props, modalProps);
+  }
+
+  constructor(props: ITitusCloneServerGroupModalProps) {
+    super(props);
+
+    const requiresTemplateSelection = get(props, 'command.viewState.requiresTemplateSelection', false);
+    if (!requiresTemplateSelection) {
+      this.configureCommand();
+    }
+
+    this.state = {
+      firewallsLabel: FirewallLabels.get('Firewalls'),
+      loaded: false,
+      requiresTemplateSelection,
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Creating your server group',
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: this.onTaskComplete,
+      }),
+    };
+  }
+
+  private templateSelected = () => {
+    this.setState({ requiresTemplateSelection: false });
+    this.configureCommand();
+  };
+
+  private onTaskComplete = () => {
+    this.props.application.serverGroups.refresh();
+    this.props.application.serverGroups.onNextRefresh(null, this.onApplicationRefresh);
+  };
+
+  protected onApplicationRefresh = (): void => {
+    if (this._isUnmounted) {
+      return;
+    }
+
+    const { command } = this.props;
+    const { taskMonitor } = this.state;
+    const cloneStage = 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) {
+        const newStateParams = {
+          serverGroup: newServerGroupName,
+          accountId: command.credentials,
+          region: command.region,
+          provider: 'titus',
+        };
+        let transitionTo = '^.^.^.clusters.serverGroup';
+        if (ReactInjector.$state.includes('**.clusters.serverGroup')) {
+          // clone via details, all view
+          transitionTo = '^.serverGroup';
+        }
+        if (ReactInjector.$state.includes('**.clusters.cluster.serverGroup')) {
+          // clone or create with details open
+          transitionTo = '^.^.serverGroup';
+        }
+        if (ReactInjector.$state.includes('**.clusters')) {
+          // create new, no details open
+          transitionTo = '.serverGroup';
+        }
+        ReactInjector.$state.go(transitionTo, newStateParams);
+      }
+    }
+  };
+
+  private configureCommand = () => {
+    const { command } = this.props;
+    TitusReactInjector.titusServerGroupConfigurationService.configureCommand(command).then(() => {
+      TitusReactInjector.titusServerGroupConfigurationService.configureSubnets(command);
+      if (!command.credentials.includes('${')) {
+        // so as to not erase registry when account is a spel expression
+        command.registry = ((command.backingData.credentialsKeyedByAccount[command.credentials] as any) || {}).registry;
+      }
+      this.setState({ loaded: true, requiresTemplateSelection: false });
+    });
+  };
+
+  public componentWillUnmount(): void {
+    this._isUnmounted = true;
+    if (this.refreshUnsubscribe) {
+      this.refreshUnsubscribe();
+    }
+  }
+
+  private submit = (command: ITitusServerGroupCommand): void => {
+    const forPipelineConfig = command.viewState.mode === 'editPipeline' || command.viewState.mode === 'createPipeline';
+    // never persist the default budget
+    let toSubmit = command;
+    // TODO: see if this is needed
+    if (command.disruptionBudget.timeWindows && !command.disruptionBudget.timeWindows.length) {
+      delete command.disruptionBudget.timeWindows;
+    }
+    if (isEqual(getDefaultJobDisruptionBudgetForApp(this.props.application), command.disruptionBudget)) {
+      toSubmit = { ...command, disruptionBudget: undefined };
+    }
+    if (forPipelineConfig) {
+      this.props.closeModal && this.props.closeModal(toSubmit);
+    } else {
+      this.state.taskMonitor.submit(() =>
+        ReactInjector.serverGroupWriter.cloneServerGroup(toSubmit, this.props.application),
+      );
+    }
+  };
+
+  private getLoadBalancerNote = (command: ITitusServerGroupCommand) => {
+    return (
+      <div className="form-group small" style={{ marginTop: '20px' }}>
+        <div className="col-md-8 col-md-offset-3">
+          <p>
+            Only target groups with target type <em>ip</em> are supported in Titus. It is not possible to re-use target
+            groups of target type <em>instance</em> used by Amazon instances.{' '}
+          </p>
+          {command.backingData !== undefined &&
+            command.backingData.credentialsKeyedByAccount !== undefined &&
+            command.credentials !== undefined && (
+              <p>
+                Uses target groups from the Amazon account{' '}
+                <AccountTag
+                  account={
+                    command.backingData.credentialsKeyedByAccount[command.credentials] &&
+                    command.backingData.credentialsKeyedByAccount[command.credentials].awsAccount
+                  }
+                />
+              </p>
+            )}
+        </div>
+      </div>
+    );
+  };
+
+  private getSecurityGroupNote = (command: ITitusServerGroupCommand) => {
+    const amazonAccount =
+      command.backingData &&
+      command.backingData.credentialsKeyedByAccount &&
+      command.backingData.credentialsKeyedByAccount[command.credentials] &&
+      command.backingData.credentialsKeyedByAccount[command.credentials].awsAccount;
+    if (!amazonAccount || command.credentials === undefined) {
+      return null;
+    }
+
+    return (
+      <div className="form-group small">
+        <div className="col-md-9 col-md-offset-3">
+          Uses {FirewallLabels.get('firewalls')} from the Amazon account <AccountTag account={amazonAccount} />
+        </div>
+      </div>
+    );
+  };
+
+  public render() {
+    const { application, command, dismissModal, title } = this.props;
+    const { loaded, taskMonitor, requiresTemplateSelection } = this.state;
+
+    if (requiresTemplateSelection) {
+      return (
+        <DeployInitializer
+          application={application}
+          cloudProvider="titus"
+          command={command}
+          onDismiss={dismissModal}
+          onTemplateSelected={this.templateSelected}
+        />
+      );
+    }
+
+    return (
+      <WizardModal<ITitusServerGroupCommand>
+        heading={title}
+        initialValues={command}
+        loading={!loaded}
+        taskMonitor={taskMonitor}
+        dismissModal={dismissModal}
+        closeModal={this.submit}
+        submitButtonLabel={command.viewState.submitButtonLabel}
+        render={({ formik, nextIdx, wizard }) => (
+          <>
+            <WizardPage
+              label="Basic Settings"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupBasicSettings ref={innerRef} formik={formik} app={application} />}
+            />
+
+            <WizardPage
+              label="Resources"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupResources ref={innerRef} formik={formik} />}
+            />
+
+            <WizardPage
+              label="Capacity"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupCapacity ref={innerRef} formik={formik} />}
+            />
+
+            <WizardPage
+              label="Load Balancers"
+              wizard={wizard}
+              order={nextIdx()}
+              note={this.getLoadBalancerNote(formik.values)}
+              render={({ innerRef }) => (
+                <ServerGroupLoadBalancers
+                  ref={innerRef}
+                  formik={formik as any}
+                  hideLoadBalancers={true}
+                  targetGroupTypeHelpText={'ip'}
+                />
+              )}
+            />
+
+            <WizardPage
+              label={FirewallLabels.get('Firewalls')}
+              wizard={wizard}
+              order={nextIdx()}
+              note={this.getSecurityGroupNote(formik.values)}
+              render={({ innerRef }) => <ServerGroupSecurityGroups ref={innerRef} formik={formik as any} />}
+            />
+
+            <WizardPage
+              label="Job Disruption Budget"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <JobDisruptionBudget ref={innerRef} formik={formik} app={application} />}
+            />
+
+            <WizardPage
+              label="Advanced Settings"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupParameters ref={innerRef} formik={formik} app={application} />}
+            />
+          </>
+        )}
+      />
+    );
+  }
+}