@spinnaker/cloudfoundry 0.0.0-main-2

package/src/serverGroup/details/mapLoadBalancers/CloudFoundryMapLoadBalancersModal.tsx

@@ -0,0 +1,137 @@
+import type { Formik } from 'formik';
+import { Form } from 'formik';
+import React from 'react';
+import { Modal, ModalFooter } from 'react-bootstrap';
+
+import type { Application, IModalComponentProps, IServerGroup, IServerGroupJob } from '@spinnaker/core';
+import {
+  ModalClose,
+  noop,
+  ReactInjector,
+  ReactModal,
+  SpinFormik,
+  TaskMonitor,
+  TaskMonitorWrapper,
+} from '@spinnaker/core';
+import type { ICloudFoundryServerGroup } from '../../../domain';
+import { Routes } from '../../../presentation/forms/serverGroup';
+
+export interface ICloudFoundryLoadBalancerLinksModalProps extends IModalComponentProps {
+  application: Application;
+  serverGroup: ICloudFoundryServerGroup;
+}
+
+export interface ICloudFoundryLoadBalancerLinksModalState {
+  initialValues: ICloudFoundryLoadBalancerLinksModalValues;
+  taskMonitor: TaskMonitor;
+}
+
+export interface ICloudFoundryLoadBalancerLinksModalValues {
+  routes: string[];
+}
+
+export interface ICloudFoundryLoadBalancerLinkJob extends IServerGroupJob {
+  routes: string[];
+  serverGroupName: string;
+}
+
+export class CloudFoundryMapLoadBalancersModal extends React.Component<
+  ICloudFoundryLoadBalancerLinksModalProps,
+  ICloudFoundryLoadBalancerLinksModalState
+> {
+  public static defaultProps: Partial<ICloudFoundryLoadBalancerLinksModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private formikRef = React.createRef<Formik<ICloudFoundryLoadBalancerLinksModalValues>>();
+
+  public static show(props: ICloudFoundryLoadBalancerLinksModalProps): Promise<ICloudFoundryLoadBalancerLinkJob> {
+    return ReactModal.show(CloudFoundryMapLoadBalancersModal, props, {});
+  }
+
+  constructor(props: ICloudFoundryLoadBalancerLinksModalProps) {
+    super(props);
+
+    this.state = {
+      initialValues: {
+        routes: [''],
+      },
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Mapping a route to your server group',
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: () => this.props.application.serverGroups.refresh(),
+      }),
+    };
+  }
+
+  private close = (args?: any): void => {
+    this.props.dismissModal.apply(null, args);
+  };
+
+  private submit = (values: ICloudFoundryLoadBalancerLinksModalValues): void => {
+    const { routes } = values;
+    const { serverGroup } = this.props;
+    const coreServerGroup: IServerGroup = {
+      account: serverGroup.account,
+      cloudProvider: serverGroup.cloudProvider,
+      cluster: serverGroup.cluster,
+      instanceCounts: serverGroup.instanceCounts,
+      instances: serverGroup.instances,
+      loadBalancers: routes,
+      name: serverGroup.name,
+      region: serverGroup.region,
+      type: serverGroup.type,
+    };
+
+    this.state.taskMonitor.submit(() => {
+      return ReactInjector.serverGroupWriter.mapLoadBalancers(coreServerGroup, this.props.application, {
+        serverGroupName: serverGroup.name,
+      });
+    });
+  };
+
+  public render() {
+    const { serverGroup } = this.props;
+    const { initialValues } = this.state;
+    return (
+      <>
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+        <SpinFormik<ICloudFoundryLoadBalancerLinksModalValues>
+          ref={this.formikRef}
+          initialValues={initialValues}
+          onSubmit={this.submit}
+          render={(formik) => {
+            return (
+              <>
+                <ModalClose dismiss={this.close} />
+                <Modal.Header>
+                  <Modal.Title>Map route to {serverGroup.name}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <Form className="form-horizontal">
+                    <Routes fieldName="routes" isRequired={true} singleRouteOnly={true} />
+                  </Form>
+                </Modal.Body>
+                <ModalFooter>
+                  <button className="btn btn-default" onClick={this.close}>
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-primary"
+                    onClick={() => this.submit(formik.values)}
+                    disabled={!formik.isValid}
+                  >
+                    Submit
+                  </button>
+                </ModalFooter>
+              </>
+            );
+          }}
+        />
+      </>
+    );
+  }
+}

package/src/serverGroup/details/mapLoadBalancers/CloudFoundryUnmapLoadBalancersModal.tsx

@@ -0,0 +1,137 @@
+import type { Formik } from 'formik';
+import { Form } from 'formik';
+import React from 'react';
+import { Modal, ModalFooter } from 'react-bootstrap';
+
+import type { Application, IModalComponentProps, IServerGroup, IServerGroupJob } from '@spinnaker/core';
+import {
+  ModalClose,
+  noop,
+  ReactInjector,
+  ReactModal,
+  SpinFormik,
+  TaskMonitor,
+  TaskMonitorWrapper,
+} from '@spinnaker/core';
+import type { ICloudFoundryServerGroup } from '../../../domain';
+import { Routes } from '../../../presentation/forms/serverGroup';
+
+export interface ICloudFoundryLoadBalancerLinksModalProps extends IModalComponentProps {
+  application: Application;
+  serverGroup: ICloudFoundryServerGroup;
+}
+
+export interface ICloudFoundryLoadBalancerLinksModalState {
+  initialValues: ICloudFoundryLoadBalancerLinksModalValues;
+  taskMonitor: TaskMonitor;
+}
+
+export interface ICloudFoundryLoadBalancerLinksModalValues {
+  routes: string[];
+}
+
+export interface ICloudFoundryLoadBalancerLinkJob extends IServerGroupJob {
+  routes: string[];
+  serverGroupName: string;
+}
+
+export class CloudFoundryUnmapLoadBalancersModal extends React.Component<
+  ICloudFoundryLoadBalancerLinksModalProps,
+  ICloudFoundryLoadBalancerLinksModalState
+> {
+  public static defaultProps: Partial<ICloudFoundryLoadBalancerLinksModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private formikRef = React.createRef<Formik<ICloudFoundryLoadBalancerLinksModalValues>>();
+
+  public static show(props: ICloudFoundryLoadBalancerLinksModalProps): Promise<ICloudFoundryLoadBalancerLinkJob> {
+    return ReactModal.show(CloudFoundryUnmapLoadBalancersModal, props, {});
+  }
+
+  constructor(props: ICloudFoundryLoadBalancerLinksModalProps) {
+    super(props);
+
+    this.state = {
+      initialValues: {
+        routes: [''],
+      },
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Unmapping a route from your server group',
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: () => this.props.application.serverGroups.refresh(),
+      }),
+    };
+  }
+
+  private close = (args?: any): void => {
+    this.props.dismissModal.apply(null, args);
+  };
+
+  private submit = (values: ICloudFoundryLoadBalancerLinksModalValues): void => {
+    const { routes } = values;
+    const { serverGroup } = this.props;
+    const coreServerGroup: IServerGroup = {
+      account: serverGroup.account,
+      cloudProvider: serverGroup.cloudProvider,
+      cluster: serverGroup.cluster,
+      instanceCounts: serverGroup.instanceCounts,
+      instances: serverGroup.instances,
+      loadBalancers: routes,
+      name: serverGroup.name,
+      region: serverGroup.region,
+      type: serverGroup.type,
+    };
+
+    this.state.taskMonitor.submit(() => {
+      return ReactInjector.serverGroupWriter.unmapLoadBalancers(coreServerGroup, this.props.application, {
+        serverGroupName: serverGroup.name,
+      });
+    });
+  };
+
+  public render() {
+    const { serverGroup } = this.props;
+    const { initialValues } = this.state;
+    return (
+      <>
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+        <SpinFormik<ICloudFoundryLoadBalancerLinksModalValues>
+          ref={this.formikRef}
+          initialValues={initialValues}
+          onSubmit={this.submit}
+          render={(formik) => {
+            return (
+              <>
+                <ModalClose dismiss={this.close} />
+                <Modal.Header>
+                  <Modal.Title>Unmap route from {serverGroup.name}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <Form className="form-horizontal">
+                    <Routes fieldName="routes" isRequired={true} singleRouteOnly={true} />
+                  </Form>
+                </Modal.Body>
+                <ModalFooter>
+                  <button className="btn btn-default" onClick={this.close}>
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-primary"
+                    onClick={() => this.submit(formik.values)}
+                    disabled={!formik.isValid}
+                  >
+                    Submit
+                  </button>
+                </ModalFooter>
+              </>
+            );
+          }}
+        />
+      </>
+    );
+  }
+}

package/src/serverGroup/details/resize/CloudFoundryResizeServerGroupModal.tsx

@@ -0,0 +1,232 @@
+import type { Formik, FormikProps } from 'formik';
+import { Form } from 'formik';
+import React from 'react';
+import { Modal, ModalFooter } from 'react-bootstrap';
+
+import type { Application, ICapacity, IModalComponentProps, IServerGroupJob } from '@spinnaker/core';
+import {
+  FormikFormField,
+  ModalClose,
+  noop,
+  NumberInput,
+  ReactInjector,
+  ReactModal,
+  SpinFormik,
+  TaskMonitor,
+  TaskMonitorWrapper,
+  TaskReason,
+} from '@spinnaker/core';
+import type { ICloudFoundryServerGroup } from '../../../domain';
+
+export interface ICloudFoundryResizeServerGroupModalProps extends IModalComponentProps {
+  application: Application;
+  serverGroup: ICloudFoundryServerGroup;
+}
+
+export interface ICloudFoundryResizeServerGroupModalState {
+  initialValues: ICloudFoundryResizeServerGroupValues;
+  taskMonitor: TaskMonitor;
+}
+
+export interface ICloudFoundryResizeServerGroupValues {
+  desired: number | string;
+  diskQuota?: number;
+  memory?: number;
+  reason?: string;
+}
+
+export interface ICloudFoundryResizeJob extends IServerGroupJob {
+  capacity?: Partial<ICapacity>;
+  diskQuota?: number;
+  instanceCount?: number;
+  memory?: number;
+  serverGroupName: string;
+  reason?: string;
+}
+
+export class CloudFoundryResizeServerGroupModal extends React.Component<
+  ICloudFoundryResizeServerGroupModalProps,
+  ICloudFoundryResizeServerGroupModalState
+> {
+  public static defaultProps: Partial<ICloudFoundryResizeServerGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private formikRef = React.createRef<Formik<ICloudFoundryResizeServerGroupValues>>();
+
+  public static show(props: ICloudFoundryResizeServerGroupModalProps): Promise<ICloudFoundryResizeJob> {
+    const modalProps = {};
+    return ReactModal.show(CloudFoundryResizeServerGroupModal, props, modalProps);
+  }
+
+  constructor(props: ICloudFoundryResizeServerGroupModalProps) {
+    super(props);
+
+    const { capacity, diskQuota, memory } = props.serverGroup;
+    const { desired } = capacity;
+    this.state = {
+      initialValues: {
+        desired,
+        diskQuota: diskQuota,
+        memory: memory,
+      },
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Resizing your server group',
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: () => this.props.application.serverGroups.refresh(),
+      }),
+    };
+  }
+
+  private close = (args?: any): void => {
+    this.props.dismissModal.apply(null, args);
+  };
+
+  private submit = (values: ICloudFoundryResizeServerGroupValues): void => {
+    const { desired, diskQuota, memory, reason } = values;
+    const { serverGroup, application } = this.props;
+    const capacity = {
+      min: desired,
+      max: desired,
+      desired,
+    };
+
+    const command: ICloudFoundryResizeJob = {
+      capacity,
+      diskQuota,
+      memory,
+      reason,
+      serverGroupName: serverGroup.name,
+    };
+
+    this.state.taskMonitor.submit(() => {
+      return ReactInjector.serverGroupWriter.resizeServerGroup(serverGroup, application, command);
+    });
+  };
+
+  private renderDesired(formik: FormikProps<ICloudFoundryResizeServerGroupValues>): JSX.Element {
+    const { serverGroup } = this.props;
+    const { capacity } = serverGroup;
+    return (
+      <div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Current size</div>
+          <div className="col-md-4">
+            <div className="horizontal middle">
+              <input type="number" className="NumberInput form-control" value={capacity.desired} disabled={true} />
+              <div className="sp-padding-xs-xaxis">instances</div>
+            </div>
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Resize to</div>
+          <div className="col-md-4">
+            <div className="horizontal middle">
+              <FormikFormField
+                name="desired"
+                input={(props) => <NumberInput {...props} min={0} />}
+                touched={true}
+                required={true}
+                onChange={(value) => {
+                  formik.setFieldValue('min', value);
+                  formik.setFieldValue('max', value);
+                }}
+              />
+              <div className="sp-padding-xs-xaxis">instances</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private renderQuota(
+    formik: FormikProps<ICloudFoundryResizeServerGroupValues>,
+    field: string,
+    fieldLabel: string,
+    initialValue: number,
+  ): JSX.Element {
+    return (
+      <div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Current size</div>
+          <div className="col-md-5">
+            <div className="horizontal middle">
+              <div className="StandardFieldLayout flex-container-h baseline margin-between-lg">
+                <input type="number" className="NumberInput form-control" value={initialValue} disabled={true} />
+              </div>
+              <div className="sp-padding-xs-xaxis">{fieldLabel}</div>
+            </div>
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Resize to</div>
+          <div className="col-md-5">
+            <div className="horizontal middle">
+              <FormikFormField
+                name={field}
+                input={(props) => <NumberInput {...props} min={64} />}
+                touched={true}
+                required={true}
+                onChange={(value) => {
+                  formik.setFieldValue('min', value);
+                  formik.setFieldValue('max', value);
+                }}
+              />
+              <div className="sp-padding-xs-xaxis">{fieldLabel}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  public render() {
+    const { serverGroup } = this.props;
+    const { diskQuota, memory } = serverGroup;
+    const { initialValues } = this.state;
+    return (
+      <>
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+        <SpinFormik<ICloudFoundryResizeServerGroupValues>
+          ref={this.formikRef}
+          initialValues={initialValues}
+          onSubmit={this.submit}
+          render={(formik) => {
+            return (
+              <>
+                <ModalClose dismiss={this.close} />
+                <Modal.Header>
+                  <Modal.Title>Resize {serverGroup.name}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <Form className="form-horizontal">
+                    {this.renderDesired(formik)}
+                    {this.renderQuota(formik, 'diskQuota', 'Disk (MB)', diskQuota)}
+                    {this.renderQuota(formik, 'memory', 'Mem (MB)', memory)}
+                    <TaskReason reason={formik.values.reason} onChange={(val) => formik.setFieldValue('reason', val)} />
+                  </Form>
+                </Modal.Body>
+                <ModalFooter>
+                  <button className="btn btn-default" onClick={this.close}>
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-primary"
+                    onClick={() => this.submit(formik.values)}
+                    disabled={!formik.isValid}
+                  >
+                    Submit
+                  </button>
+                </ModalFooter>
+              </>
+            );
+          }}
+        />
+      </>
+    );
+  }
+}

package/src/serverGroup/details/rollback/CloudFoundryRollbackServerGroupModal.tsx

@@ -0,0 +1,179 @@
+import type { Formik } from 'formik';
+import { Form } from 'formik';
+import React from 'react';
+import { Modal, ModalFooter } from 'react-bootstrap';
+
+import type { Application, IModalComponentProps, IServerGroupJob } from '@spinnaker/core';
+import {
+  FormikFormField,
+  ModalClose,
+  noop,
+  ReactInjector,
+  ReactModal,
+  ReactSelectInput,
+  SpinFormik,
+  TaskMonitor,
+  TaskMonitorWrapper,
+  TaskReason,
+} from '@spinnaker/core';
+import type { ICloudFoundryServerGroup } from '../../../domain';
+
+export interface ICloudFoundryRollbackServerGroupModalProps extends IModalComponentProps {
+  application: Application;
+  serverGroup: ICloudFoundryServerGroup;
+  previousServerGroup: ICloudFoundryServerGroup;
+  allServerGroups: ICloudFoundryServerGroup[];
+  disabledServerGroups: ICloudFoundryServerGroup[];
+}
+
+export interface ICloudFoundryRollbackServerGroupModalState {
+  initialValues: ICloudFoundryRollbackServerGroupValues;
+  taskMonitor: TaskMonitor;
+}
+
+export interface ICloudFoundryRollbackServerGroupValues {
+  restoreServerGroupName: string;
+  reason?: string;
+}
+
+export interface ICloudFoundryRollbackJob extends IServerGroupJob {
+  rollbackType: string;
+  rollbackContext: {
+    rollbackServerGroupName: string;
+    restoreServerGroupName: string;
+    targetHealthyRollbackPercentage: number;
+  };
+}
+
+export class CloudFoundryRollbackServerGroupModal extends React.Component<
+  ICloudFoundryRollbackServerGroupModalProps,
+  ICloudFoundryRollbackServerGroupModalState
+> {
+  public static defaultProps: Partial<ICloudFoundryRollbackServerGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private formikRef = React.createRef<Formik<ICloudFoundryRollbackServerGroupValues>>();
+
+  public static show(props: ICloudFoundryRollbackServerGroupModalProps): Promise<ICloudFoundryRollbackJob> {
+    const modalProps = {};
+    return ReactModal.show(CloudFoundryRollbackServerGroupModal, props, modalProps);
+  }
+
+  constructor(props: ICloudFoundryRollbackServerGroupModalProps) {
+    super(props);
+
+    const { previousServerGroup, serverGroup } = props;
+    const { name } = serverGroup;
+    this.state = {
+      initialValues: {
+        restoreServerGroupName: previousServerGroup ? previousServerGroup.name : undefined,
+      },
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Rollback ' + name,
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: () => this.props.application.serverGroups.refresh(),
+      }),
+    };
+  }
+
+  private close = (args?: any): void => {
+    this.props.dismissModal.apply(null, args);
+  };
+
+  private submit = (values: ICloudFoundryRollbackServerGroupValues): void => {
+    const { reason, restoreServerGroupName } = values;
+    const { serverGroup, application } = this.props;
+
+    const command: ICloudFoundryRollbackJob = {
+      rollbackType: 'EXPLICIT',
+      rollbackContext: {
+        rollbackServerGroupName: serverGroup.name,
+        restoreServerGroupName,
+        targetHealthyRollbackPercentage: 100,
+      },
+      reason,
+    };
+
+    this.state.taskMonitor.submit(() => {
+      return ReactInjector.serverGroupWriter.rollbackServerGroup(serverGroup, application, command);
+    });
+  };
+
+  public render() {
+    const { allServerGroups, serverGroup } = this.props;
+    const { initialValues } = this.state;
+    return (
+      <>
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+        <SpinFormik<ICloudFoundryRollbackServerGroupValues>
+          ref={this.formikRef}
+          initialValues={initialValues}
+          onSubmit={this.submit}
+          render={(formik) => {
+            return (
+              <>
+                <ModalClose dismiss={this.close} />
+                <Modal.Header>
+                  <Modal.Title>Rollback {serverGroup.name}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <Form className="form-horizontal">
+                    <div className="row" style={{ marginTop: '10px', marginBottom: '10px' }}>
+                      <div className="col-md-3 sm-label-right">Restore to</div>
+                      <div className="col-md-7">
+                        <FormikFormField
+                          name="restoreServerGroupName"
+                          fastField={true}
+                          input={(props) => (
+                            <ReactSelectInput
+                              inputClassName="cloudfoundry-react-select"
+                              {...props}
+                              stringOptions={
+                                allServerGroups && allServerGroups.map((sg: ICloudFoundryServerGroup) => sg.name)
+                              }
+                              clearable={false}
+                            />
+                          )}
+                          required={true}
+                        />
+                      </div>
+                    </div>
+                    <TaskReason reason={formik.values.reason} onChange={(val) => formik.setFieldValue('reason', val)} />
+                  </Form>
+                  <div className="row">
+                    <div className="col-sm-4 sm-label-right">Rollback Operations</div>
+                  </div>
+                  <div className="row">
+                    <div className="col-sm-11 col-sm-offset-1">
+                      <ol>
+                        <li>
+                          Enable <em>{formik.values.restoreServerGroupName || 'previous server group'}</em>
+                        </li>
+                        <li>Disable {serverGroup.name}</li>
+                      </ol>
+                      <p>
+                        This rollback will affect server groups in {serverGroup.account} ({serverGroup.region}
+                        ).
+                      </p>
+                    </div>
+                  </div>
+                </Modal.Body>
+                <ModalFooter>
+                  <button className="btn btn-default" onClick={this.close}>
+                    Cancel
+                  </button>
+                  <button type="submit" className="btn btn-primary" onClick={() => this.submit(formik.values)}>
+                    Submit
+                  </button>
+                </ModalFooter>
+              </>
+            );
+          }}
+        />
+      </>
+    );
+  }
+}