@spinnaker/google 2026.2.2 → 2026.3.0

package/src/loadBalancer/configure/http/GceHttpLoadBalancerListenerEditor.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+
+import type {
+  GceLoadBalancerType,
+  IGceLoadBalancerDataItem,
+  IGceLoadBalancerListener,
+  IGceResourceReference,
+} from '../common';
+
+export interface IGceHttpLoadBalancerListenerEditorProps {
+  addresses: IGceLoadBalancerDataItem[];
+  certificates: IGceLoadBalancerDataItem[];
+  listener: IGceLoadBalancerListener;
+  loadBalancerType: GceLoadBalancerType;
+  onChange: (listener: IGceLoadBalancerListener) => void;
+  onRemove: () => void;
+  subnets: IGceLoadBalancerDataItem[];
+}
+
+function selectedReference(name: string, options: IGceLoadBalancerDataItem[]): IGceResourceReference | undefined {
+  if (!name) {
+    return undefined;
+  }
+  return (options.find((option) => option.name === name) || { name }) as IGceResourceReference;
+}
+
+export function GceHttpLoadBalancerListenerEditor({
+  addresses,
+  certificates,
+  listener,
+  loadBalancerType,
+  onChange,
+  onRemove,
+  subnets,
+}: IGceHttpLoadBalancerListenerEditorProps): JSX.Element {
+  const protocols = ['HTTP', 'HTTPS'];
+
+  return (
+    <fieldset className="gce-http-listener">
+      <legend>Listener</legend>
+      <label>
+        Name
+        <input
+          data-testid="listener-name"
+          required
+          type="text"
+          value={listener.name}
+          onChange={(event) => onChange({ ...listener, name: event.target.value })}
+        />
+      </label>
+      <label>
+        Protocol
+        <select
+          data-testid="listener-protocol"
+          value={listener.protocol}
+          onChange={(event) => {
+            const protocol = event.target.value as IGceLoadBalancerListener['protocol'];
+            onChange({ ...listener, ...(protocol === 'HTTPS' ? { portRange: '443' } : {}), protocol });
+          }}
+        >
+          {protocols.map((protocol) => (
+            <option key={protocol} value={protocol}>
+              {protocol}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        Port
+        <input
+          data-testid="listener-port"
+          disabled={listener.protocol === 'HTTPS'}
+          required
+          type="text"
+          value={listener.portRange}
+          onChange={(event) => onChange({ ...listener, portRange: event.target.value })}
+        />
+      </label>
+      {loadBalancerType === 'INTERNAL_MANAGED' && (
+        <label>
+          Subnet
+          <select
+            data-testid="listener-subnet"
+            required
+            value={listener.subnet?.name || ''}
+            onChange={(event) => onChange({ ...listener, subnet: selectedReference(event.target.value, subnets) })}
+          >
+            <option value="">Select...</option>
+            {subnets.map((subnet) => (
+              <option key={subnet.name} value={subnet.name}>
+                {subnet.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+      <label>
+        {loadBalancerType === 'INTERNAL_MANAGED' ? 'Internal IP' : 'External IP'}
+        <select
+          data-testid="listener-address"
+          value={listener.address?.name || ''}
+          onChange={(event) => onChange({ ...listener, address: selectedReference(event.target.value, addresses) })}
+        >
+          <option value="">Ephemeral</option>
+          {addresses.map((address) => (
+            <option key={address.name} value={address.name}>
+              {address.name}
+            </option>
+          ))}
+        </select>
+      </label>
+      {listener.protocol === 'HTTPS' && (
+        <>
+          <label>
+            Certificate
+            <select
+              data-testid="listener-certificate"
+              value={listener.certificate?.name || ''}
+              onChange={(event) =>
+                onChange({
+                  ...listener,
+                  certificate: selectedReference(event.target.value, certificates),
+                  certificateMap: undefined,
+                })
+              }
+            >
+              <option value="">Select...</option>
+              {certificates.map((certificate) => (
+                <option key={certificate.name} value={certificate.name}>
+                  {certificate.name}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            Certificate map
+            <input
+              data-testid="listener-certificate-map"
+              type="text"
+              value={listener.certificateMap || ''}
+              onChange={(event) =>
+                onChange({ ...listener, certificate: undefined, certificateMap: event.target.value || undefined })
+              }
+            />
+          </label>
+        </>
+      )}
+      <button type="button" className="btn btn-sm btn-default" onClick={onRemove}>
+        Remove listener
+      </button>
+    </fieldset>
+  );
+}

package/src/loadBalancer/configure/http/GceHttpLoadBalancerModal.spec.tsx

@@ -0,0 +1,326 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { TaskExecutor } from '@spinnaker/core';
+
+import { buildGceLoadBalancerJobs } from '../common';
+import { GceHttpLoadBalancerModal, initializeGceHttpLoadBalancerCommand } from './GceHttpLoadBalancerModal';
+
+describe('GceHttpLoadBalancerModal', () => {
+  const application = { name: 'test-app' } as any;
+  const emptyData = {
+    accounts: [],
+    addresses: [],
+    backendServices: [],
+    certificates: [],
+    healthChecks: [],
+    networks: [],
+    regions: [],
+    subnets: [],
+  };
+
+  it('advertises pipeline support after returning exact pipeline commands', () => {
+    expect((GceHttpLoadBalancerModal as any).supportsPipelineConfig).toBe(true);
+  });
+
+  it('initializes persisted composite data as an exact normalized nested command', () => {
+    const command = initializeGceHttpLoadBalancerCommand(
+      {
+        account: 'account-a',
+        backendServices: [{ healthCheck: 'removed-check', name: 'removed-backend', unknownField: 'keep' }],
+        defaultService: 'removed-backend',
+        healthChecks: [{ healthCheckType: 'http', name: 'removed-check', port: '80', requestPath: 'health' }],
+        hostRules: [
+          {
+            hostPatterns: ['api.example.com'],
+            pathMatcher: {
+              defaultService: 'removed-backend',
+              pathRules: [{ backendService: 'removed-backend', paths: ['/v1'] }],
+            },
+          },
+        ],
+        listeners: [
+          {
+            certificate: 'https://compute/sslCertificates/removed-cert',
+            ipAddress: 'https://compute/addresses/removed-address',
+            name: 'frontend',
+            port: 443,
+            protocol: 'https',
+          },
+        ],
+        loadBalancerType: 'http',
+        urlMapName: 'test-app-main',
+      },
+      'edit',
+      application,
+    );
+
+    expect(command.name).toBe('test-app-main');
+    expect(command.listeners[0]).toEqual({
+      address: { name: 'removed-address', selfLink: 'https://compute/addresses/removed-address' },
+      certificate: { name: 'removed-cert', selfLink: 'https://compute/sslCertificates/removed-cert' },
+      name: 'frontend',
+      portRange: '443',
+      protocol: 'HTTPS',
+    });
+    expect(command.backendServices[0]).toEqual({
+      healthCheck: { name: 'removed-check' },
+      name: 'removed-backend',
+      unknownField: 'keep',
+    });
+    expect(command.hostRules[0].pathMatcher.pathRules[0]).toEqual({
+      backendService: { name: 'removed-backend' },
+      paths: ['/v1'],
+    });
+  });
+
+  it('returns exact operations without executing a task in pipeline-edit mode', () => {
+    const closeModal = jasmine.createSpy('closeModal');
+    const executeTask = spyOn(TaskExecutor, 'executeTask');
+    const modal = new GceHttpLoadBalancerModal({
+      app: application,
+      closeModal,
+      dismissModal: jasmine.createSpy('dismissModal'),
+      forPipelineConfig: true,
+      isNew: false,
+      loadBalancer: {
+        account: 'account-a',
+        backendServices: [{ healthCheck: 'check-a', name: 'backend-a', portName: 'http' }],
+        defaultService: 'backend-a',
+        healthChecks: [{ healthCheckType: 'HTTP', name: 'check-a', port: 80, requestPath: '/health' }],
+        hostRules: [
+          {
+            hostPatterns: ['api.example.com'],
+            pathMatcher: {
+              defaultService: 'backend-a',
+              pathRules: [{ backendService: 'backend-a', paths: ['/v1'] }],
+            },
+          },
+        ],
+        listeners: [{ ipAddress: 'address-a', name: 'frontend', port: 80, protocol: 'HTTP' }],
+        loadBalancerType: 'HTTP',
+        name: 'test-app-main',
+      },
+      mode: 'edit',
+    } as any);
+    const expectedOperations = buildGceLoadBalancerJobs((modal as any).state.command);
+
+    (modal as any).submit();
+
+    expect((modal as any).state.command.mode).toBe('pipeline');
+    expect(executeTask).not.toHaveBeenCalled();
+    expect(closeModal).toHaveBeenCalledOnceWith(expectedOperations);
+    expect(expectedOperations.map(({ loadBalancerName }) => loadBalancerName)).toEqual(['frontend']);
+  });
+
+  it('executes an update task instead of returning operations in infrastructure-edit mode', () => {
+    const closeModal = jasmine.createSpy('closeModal');
+    const executeTask = spyOn(TaskExecutor, 'executeTask').and.returnValue(Promise.resolve({ id: 'task' }) as any);
+    const modal = new GceHttpLoadBalancerModal({
+      app: application,
+      closeModal,
+      dismissModal: jasmine.createSpy('dismissModal'),
+      forPipelineConfig: false,
+      isNew: false,
+      loadBalancer: {
+        account: 'account-a',
+        backendServices: [{ healthCheck: 'check-a', name: 'backend-a', portName: 'http' }],
+        defaultService: 'backend-a',
+        healthChecks: [{ healthCheckType: 'HTTP', name: 'check-a', port: 80, requestPath: '/health' }],
+        listeners: [{ ipAddress: 'address-a', name: 'frontend', port: 80, protocol: 'HTTP' }],
+        loadBalancerType: 'HTTP',
+        name: 'test-app-main',
+      },
+      mode: 'edit',
+    } as any);
+    const expectedOperations = buildGceLoadBalancerJobs((modal as any).state.command);
+
+    (modal as any).submit();
+
+    expect((modal as any).state.command.mode).toBe('edit');
+    expect(closeModal).not.toHaveBeenCalled();
+    expect(executeTask).toHaveBeenCalledOnceWith({
+      application,
+      description: 'Update Load Balancer: test-app-main',
+      job: expectedOperations,
+    });
+  });
+
+  it('executes normalized listener jobs in infrastructure mode', () => {
+    const executeTask = jasmine.createSpy('executeTask').and.returnValue(Promise.resolve({ id: 'task' }));
+    const modal = new GceHttpLoadBalancerModal({
+      app: application,
+      closeModal: jasmine.createSpy('closeModal'),
+      dismissModal: jasmine.createSpy('dismissModal'),
+      executeTask,
+      loadBalancer: {
+        account: 'account-a',
+        backendServices: [{ healthCheck: 'check-a', name: 'backend-a', portName: 'http' }],
+        defaultService: 'backend-a',
+        healthChecks: [{ healthCheckType: 'HTTP', name: 'check-a', port: 80, requestPath: '/health' }],
+        listeners: [
+          { ipAddress: 'address-a', name: 'frontend-a', port: 80, protocol: 'HTTP' },
+          { ipAddress: 'address-b', name: 'frontend-b', port: 8080, protocol: 'HTTP' },
+        ],
+        loadBalancerType: 'INTERNAL_MANAGED',
+        name: 'test-app-main',
+        network: 'network-a',
+        region: 'europe-west1',
+        subnet: 'subnet-a',
+      },
+      mode: 'create',
+    } as any);
+
+    (modal as any).submit();
+
+    expect(executeTask).toHaveBeenCalled();
+    const jobs = executeTask.calls.mostRecent().args[0].job;
+    expect(jobs.map(({ name }: any) => name)).toEqual(['frontend-a', 'frontend-b']);
+    expect(jobs[0]).toEqual(
+      jasmine.objectContaining({
+        ipAddress: 'address-a',
+        ipProtocol: 'TCP',
+        loadBalancerName: 'frontend-a',
+        network: 'network-a',
+        region: 'europe-west1',
+        subnet: 'subnet-a',
+      }),
+    );
+  });
+
+  it('serializes INTERNAL_MANAGED HTTPS listeners with certificates', () => {
+    const closeModal = jasmine.createSpy('closeModal');
+    const modal = new GceHttpLoadBalancerModal({
+      app: application,
+      closeModal,
+      dismissModal: jasmine.createSpy('dismissModal'),
+      forPipelineConfig: true,
+      loadBalancer: {
+        account: 'account-a',
+        backendServices: [{ healthCheck: 'check-a', name: 'backend-a', portName: 'http' }],
+        defaultService: 'backend-a',
+        healthChecks: [{ healthCheckType: 'HTTPS', name: 'check-a', port: 443, requestPath: '/health' }],
+        listeners: [
+          {
+            certificate: 'regional-cert',
+            name: 'internal-https',
+            port: 443,
+            protocol: 'HTTPS',
+            subnet: 'subnet-a',
+          },
+        ],
+        loadBalancerType: 'INTERNAL_MANAGED',
+        name: 'test-app-internal',
+        network: 'network-a',
+        region: 'europe-west1',
+        subnet: 'subnet-a',
+      },
+    } as any);
+
+    (modal as any).submit();
+
+    expect(closeModal).toHaveBeenCalledWith([
+      jasmine.objectContaining({
+        certificate: 'regional-cert',
+        loadBalancerName: 'internal-https',
+        portRange: '443',
+      }),
+    ]);
+  });
+
+  (['HTTP', 'INTERNAL_MANAGED'] as const).forEach((loadBalancerType) => {
+    ['pipeline', 'infrastructure'].forEach((submissionMode) => {
+      it(`rejects ${loadBalancerType} ${submissionMode} commands with an unresolved path default and non-443 HTTPS port`, () => {
+        const closeModal = jasmine.createSpy('closeModal');
+        const executeTask = jasmine.createSpy('executeTask');
+        const props = {
+          app: application,
+          closeModal,
+          data: emptyData,
+          dismissModal: jasmine.createSpy('dismissModal'),
+          executeTask,
+          forPipelineConfig: submissionMode === 'pipeline',
+          loadBalancer: {
+            account: 'account-a',
+            backendServices: [{ healthCheck: 'check-a', name: 'backend-a', portName: 'http' }],
+            defaultService: 'backend-a',
+            healthChecks: [{ healthCheckType: 'HTTP', name: 'check-a', port: 80, requestPath: '/health' }],
+            hostRules: [{ hostPatterns: ['api.example.com'], pathMatcher: { pathRules: [] } }],
+            listeners: [{ certificate: 'cert-a', name: 'frontend', port: 443, protocol: 'HTTPS' }],
+            loadBalancerType,
+            name: 'test-app-main',
+            network: loadBalancerType === 'INTERNAL_MANAGED' ? 'network-a' : undefined,
+            region: loadBalancerType === 'INTERNAL_MANAGED' ? 'europe-west1' : 'global',
+            subnet: loadBalancerType === 'INTERNAL_MANAGED' ? 'subnet-a' : undefined,
+          },
+          mode: submissionMode === 'infrastructure' ? 'create' : undefined,
+        } as any;
+        const wrapper = shallow(<GceHttpLoadBalancerModal {...props} />);
+        const modal = wrapper.instance() as any;
+        modal.setState({
+          command: {
+            ...modal.state.command,
+            listeners: [{ ...modal.state.command.listeners[0], portRange: '8443' }],
+          },
+        });
+        wrapper.update();
+
+        modal.submit();
+
+        expect(executeTask).not.toHaveBeenCalled();
+        expect(closeModal).not.toHaveBeenCalled();
+        expect(wrapper.find('.gce-http-validation-errors').text()).toContain(
+          'Path matcher default backend service is required.',
+        );
+        expect(wrapper.find('.gce-http-validation-errors').text()).toContain('HTTPS listeners must use port 443.');
+        expect(wrapper.find('.btn-primary').prop('disabled')).toBe(true);
+      });
+    });
+  });
+
+  ['pipeline', 'infrastructure'].forEach((submissionMode) => {
+    it(`does not submit invalid ${submissionMode} commands`, () => {
+      const closeModal = jasmine.createSpy('closeModal');
+      const executeTask = jasmine.createSpy('executeTask');
+      const props = {
+        app: application,
+        closeModal,
+        data: emptyData,
+        dismissModal: jasmine.createSpy('dismissModal'),
+        executeTask,
+        forPipelineConfig: submissionMode === 'pipeline',
+        loadBalancer: {
+          account: '',
+          listeners: [{ name: '', port: 'not-a-port', protocol: 'HTTPS' }],
+          loadBalancerType: 'HTTP',
+          name: ' ',
+        },
+        mode: submissionMode === 'infrastructure' ? 'create' : undefined,
+      } as any;
+      const modal = new GceHttpLoadBalancerModal(props);
+      const wrapper = shallow(<GceHttpLoadBalancerModal {...props} />);
+
+      (modal as any).submit();
+
+      expect(executeTask).not.toHaveBeenCalled();
+      expect(closeModal).not.toHaveBeenCalled();
+      expect(wrapper.find('.gce-http-validation-errors').exists()).toBe(true);
+      expect(wrapper.find('.btn-primary').prop('disabled')).toBe(true);
+    });
+  });
+
+  it('renders modal controls as non-submit buttons', () => {
+    const wrapper = shallow(
+      <GceHttpLoadBalancerModal
+        app={application}
+        closeModal={jasmine.createSpy('closeModal')}
+        data={emptyData}
+        dismissModal={jasmine.createSpy('dismissModal')}
+        loadBalancer={{ account: 'account-a', loadBalancerType: 'HTTP', name: 'test-app-main' } as any}
+        mode="edit"
+      />,
+    );
+
+    expect(wrapper.find('button').everyWhere((button) => button.prop('type') === 'button')).toBe(true);
+  });
+});

package/src/loadBalancer/configure/http/GceHttpLoadBalancerModal.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+
+import type { Application, IModalComponentProps, ITask, ITaskCommand } from '@spinnaker/core';
+import { ModalClose, ReactModal, TaskMonitor, TaskMonitorWrapper } from '@spinnaker/core';
+
+import {
+  constrainGceHttpLoadBalancerCommand,
+  GceHttpLoadBalancerEditor,
+  validateGceHttpLoadBalancerCommand,
+} from './GceHttpLoadBalancerEditor';
+import type {
+  GceLoadBalancerEditorMode,
+  GceLoadBalancerType,
+  IGceLoadBalancerCommand,
+  IGceLoadBalancerData,
+  IGceLoadBalancerDataReaders,
+  IGceLoadBalancerDataState,
+} from '../common';
+import {
+  GceLoadBalancerDataController,
+  normalizeGceLoadBalancerCommand,
+  submitGceLoadBalancerCommand,
+} from '../common';
+
+const EMPTY_DATA: IGceLoadBalancerData = {
+  accounts: [],
+  addresses: [],
+  backendServices: [],
+  certificates: [],
+  healthChecks: [],
+  networks: [],
+  regions: [],
+  subnets: [],
+};
+
+export interface IGceHttpLoadBalancerModalProps extends IModalComponentProps {
+  app?: Application;
+  application?: Application;
+  credentials?: string;
+  data?: IGceLoadBalancerData;
+  dataReaders?: IGceLoadBalancerDataReaders;
+  executeTask?: (taskCommand: ITaskCommand) => PromiseLike<ITask>;
+  forPipelineConfig?: boolean;
+  isNew?: boolean;
+  loadBalancer?: Record<string, unknown>;
+  loadBalancerType?: Extract<GceLoadBalancerType, 'HTTP' | 'INTERNAL_MANAGED'>;
+  mode?: GceLoadBalancerEditorMode;
+}
+
+interface IGceHttpLoadBalancerModalState extends IGceLoadBalancerDataState {
+  command: IGceLoadBalancerCommand;
+  taskMonitor: TaskMonitor;
+}
+
+export function initializeGceHttpLoadBalancerCommand(
+  source: Record<string, unknown>,
+  mode: GceLoadBalancerEditorMode,
+  application: Application,
+  defaults: Partial<Record<'credentials' | 'loadBalancerType', unknown>> = {},
+): IGceLoadBalancerCommand {
+  const input = {
+    ...defaults,
+    ...source,
+    credentials: source.credentials || source.account || defaults.credentials,
+    loadBalancerType: source.loadBalancerType || defaults.loadBalancerType || 'HTTP',
+    name: source.name || source.loadBalancerName || source.urlMapName || application?.name || '',
+  };
+  const command = normalizeGceLoadBalancerCommand(input, mode);
+  const hasPersistedListener =
+    (Array.isArray(source.listeners) && source.listeners.length > 0) ||
+    source.port !== undefined ||
+    source.portRange !== undefined ||
+    source.ports !== undefined;
+  if (!hasPersistedListener) {
+    command.listeners = [{ name: command.name, portRange: '80', protocol: 'HTTP' }];
+  }
+  return constrainGceHttpLoadBalancerCommand(command);
+}
+
+export class GceHttpLoadBalancerModal extends React.Component<
+  IGceHttpLoadBalancerModalProps,
+  IGceHttpLoadBalancerModalState
+> {
+  public static supportsPipelineConfig = true;
+
+  public static show(props: IGceHttpLoadBalancerModalProps): Promise<unknown> {
+    return ReactModal.show(GceHttpLoadBalancerModal, props, { dialogClassName: 'wizard-modal modal-lg' });
+  }
+
+  private dataController?: GceLoadBalancerDataController;
+  private unsubscribe?: () => void;
+
+  public constructor(props: IGceHttpLoadBalancerModalProps) {
+    super(props);
+    const application = this.application(props);
+    const mode = this.mode(props);
+    const command = initializeGceHttpLoadBalancerCommand(props.loadBalancer || {}, mode, application, {
+      credentials: props.credentials,
+      loadBalancerType: props.loadBalancerType,
+    });
+    this.state = {
+      command,
+      data: props.data || EMPTY_DATA,
+      status: props.data ? 'ready' : 'idle',
+      taskMonitor: new TaskMonitor({
+        application,
+        title: `${mode === 'edit' ? 'Updating' : 'Creating'} your load balancer`,
+        onDismiss: () => props.dismissModal(),
+        onTaskComplete: () => {
+          application.loadBalancers?.refresh?.();
+          props.closeModal();
+        },
+      }),
+    };
+  }
+
+  public componentDidMount(): void {
+    if (this.props.data) {
+      return;
+    }
+    this.dataController = new GceLoadBalancerDataController(this.props.dataReaders);
+    this.unsubscribe = this.dataController.subscribe((state) => this.setState(state));
+    this.dataController.load(this.state.command.credentials);
+  }
+
+  public componentWillUnmount(): void {
+    this.unsubscribe?.();
+    this.dataController?.dispose();
+  }
+
+  private application(props = this.props): Application {
+    return (props.application || props.app) as Application;
+  }
+
+  private mode(props = this.props): GceLoadBalancerEditorMode {
+    if (props.forPipelineConfig) {
+      return 'pipeline';
+    }
+    if (props.mode) {
+      return props.mode;
+    }
+    return props.isNew === false || props.loadBalancer ? 'edit' : 'create';
+  }
+
+  private updateCommand = (command: IGceLoadBalancerCommand): void => {
+    const accountChanged = command.credentials !== this.state.command.credentials;
+    this.setState({ command });
+    if (accountChanged && this.dataController) {
+      this.dataController.load(command.credentials);
+    }
+  };
+
+  private submit = (): void => {
+    if (validateGceHttpLoadBalancerCommand(this.state.command).length) {
+      return;
+    }
+    const command = constrainGceHttpLoadBalancerCommand(this.state.command);
+    const dependencies = {
+      application: this.application(),
+      executeTask: this.props.executeTask,
+    };
+    if (command.mode === 'pipeline') {
+      this.props.closeModal(submitGceLoadBalancerCommand(command, dependencies));
+      return;
+    }
+    this.state.taskMonitor.submit(() => submitGceLoadBalancerCommand(command, dependencies) as PromiseLike<ITask>);
+  };
+
+  public render(): JSX.Element {
+    const { command, data, status, taskMonitor } = this.state;
+    const validationErrors = validateGceHttpLoadBalancerCommand(command);
+    const heading =
+      command.mode === 'create'
+        ? `Create ${command.loadBalancerType === 'HTTP' ? 'HTTP(S)' : 'Internal managed HTTP(S)'} load balancer`
+        : `Edit ${command.name}`;
+
+    return (
+      <form className="form-horizontal gce-http-lb" name="form">
+        <div className="modal-header">
+          <ModalClose dismiss={this.props.dismissModal} />
+          <h3>{heading}</h3>
+        </div>
+        <div className="modal-body">
+          <TaskMonitorWrapper monitor={taskMonitor} />
+          {status === 'loading' && <div className="horizontal center middle">Loading...</div>}
+          {status === 'error' && <div className="alert alert-danger">Unable to load GCE resources.</div>}
+          <GceHttpLoadBalancerEditor command={command} data={data} onChange={this.updateCommand} />
+          {!!validationErrors.length && (
+            <div className="alert alert-danger gce-http-validation-errors">
+              {validationErrors.map((error) => (
+                <div key={error}>{error}</div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="modal-footer">
+          <button
+            type="button"
+            className="btn btn-default"
+            disabled={taskMonitor.submitting}
+            onClick={this.props.dismissModal}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="btn btn-primary"
+            disabled={taskMonitor.submitting || status === 'loading' || !!validationErrors.length}
+            onClick={this.submit}
+          >
+            {command.mode === 'pipeline' ? 'Done' : command.mode === 'edit' ? 'Update' : 'Create'}
+          </button>
+        </div>
+      </form>
+    );
+  }
+}