@spinnaker/titus 0.0.0-main-2

package/src/serverGroup/details/disruptionBudget/DisruptionBudgetSection.tsx

@@ -0,0 +1,226 @@
+import { module } from 'angular';
+import { isEqual } from 'lodash';
+import prettyMilliseconds from 'pretty-ms';
+import React from 'react';
+import { react2angular } from 'react2angular';
+
+import type { IServerGroupDetailsSectionProps } from '@spinnaker/core';
+import { HelpField, withErrorBoundary } from '@spinnaker/core';
+
+import { EditDisruptionBudgetModal } from './EditDisruptionBudgetModal';
+import type { ITitusServerGroupCommand } from '../../configure/serverGroupConfiguration.service';
+import { getDefaultJobDisruptionBudgetForApp } from '../../configure/serverGroupConfiguration.service';
+import type { IFieldOption } from '../../configure/wizard/pages/disruptionBudget/JobDisruptionBudget';
+import { DisruptionBudgetDescription } from '../../configure/wizard/pages/disruptionBudget/JobDisruptionBudget';
+import { policyOptions } from '../../configure/wizard/pages/disruptionBudget/PolicyOptions';
+import { rateOptions } from '../../configure/wizard/pages/disruptionBudget/RateOptions';
+import type { IJobDisruptionBudget, ITitusServerGroup } from '../../../domain';
+import { TitusReactInjector } from '../../../reactShims';
+
+interface IDisruptionBudgetSection extends IServerGroupDetailsSectionProps {
+  serverGroup: ITitusServerGroup;
+}
+
+export class DisruptionBudgetSection extends React.Component<IDisruptionBudgetSection> {
+  private SectionHeading = ({
+    budget,
+    options,
+    label,
+  }: {
+    budget: IJobDisruptionBudget;
+    options: IFieldOption[];
+    label: string;
+  }): JSX.Element => {
+    const selected = options.find((o) => !!budget[o.field]);
+    if (!selected) {
+      return null;
+    }
+    return (
+      <div>
+        <div className="bold">{label}</div>
+        {selected.label} <HelpField content={selected.description} />
+      </div>
+    );
+  };
+
+  private Policy = ({ budget }: { budget: IJobDisruptionBudget }): JSX.Element => {
+    const { ParentheticalDuration } = this;
+    if (budget.availabilityPercentageLimit) {
+      return (
+        <div>
+          <div className="bold">Percentage of Healthy Containers</div>
+          {budget.availabilityPercentageLimit.percentageOfHealthyContainers} percent
+        </div>
+      );
+    }
+    if (budget.relocationLimit) {
+      return (
+        <div>
+          <div className="bold">Limit</div>
+          {budget.relocationLimit.limit} task{budget.relocationLimit.limit !== 1 && 's'}
+        </div>
+      );
+    }
+    if (budget.unhealthyTasksLimit) {
+      return (
+        <div>
+          <div className="bold">Limit of Unhealthy Containers</div>
+          {budget.unhealthyTasksLimit.limitOfUnhealthyContainers} container
+          {budget.unhealthyTasksLimit.limitOfUnhealthyContainers !== 1 && 's'}
+        </div>
+      );
+    }
+    if (budget.selfManaged) {
+      return (
+        <div>
+          <div className="bold">Relocation Time</div>
+          {budget.selfManaged.relocationTimeMs > 0 && (
+            <ParentheticalDuration durationMs={budget.selfManaged.relocationTimeMs} />
+          )}
+          {budget.selfManaged.relocationTimeMs === 0 && '0 ms (immediate)'}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  // it's bad enough that we make users enter these values as milliseconds; let's not make them translate it
+  private ParentheticalDuration = ({ durationMs }: { durationMs: number }) => (
+    <span>
+      {durationMs} ms
+      {durationMs > 1000 && ` (${prettyMilliseconds(durationMs)})`}
+    </span>
+  );
+
+  private Rate = ({ budget }: { budget: IJobDisruptionBudget }): JSX.Element => {
+    const { ParentheticalDuration } = this;
+    if (budget.ratePerInterval) {
+      return (
+        <>
+          <div>
+            <div className="bold">Interval</div>
+            <ParentheticalDuration durationMs={budget.ratePerInterval.intervalMs} />
+          </div>
+          <div>
+            <div className="bold">Limit</div>
+            {budget.ratePerInterval.limitPerInterval} task{budget.ratePerInterval.limitPerInterval !== 1 && 's'}
+          </div>
+        </>
+      );
+    }
+    if (budget.ratePercentagePerInterval) {
+      return (
+        <>
+          <div>
+            <div className="bold">Interval</div>
+            <ParentheticalDuration durationMs={budget.ratePercentagePerInterval.intervalMs} />
+          </div>
+          <div>
+            <div className="bold">Percentage per Interval</div>
+            {budget.ratePercentagePerInterval.percentageLimitPerInterval} percent
+          </div>
+        </>
+      );
+    }
+    return null;
+  };
+
+  // given a collection of days, e.g. ['Monday', 'Tuesday', 'Wednesday', 'Saturday'], return 'Mon-Wed, Sat'
+  private groupedDays = (days: string[]): string => {
+    const allDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    const sortedDays = days.sort((d1, d2) => allDays.indexOf(d1) - allDays.indexOf(d2));
+    const groups: string[] = [];
+    const currentGroup: string[] = [];
+    allDays.slice(allDays.indexOf(sortedDays[0])).forEach((d) => {
+      if (sortedDays.includes(d)) {
+        currentGroup.push(d);
+      } else {
+        if (currentGroup.length) {
+          groups.push(this.toDayRangeString(currentGroup));
+          currentGroup.length = 0;
+        }
+      }
+    });
+    if (currentGroup.length) {
+      groups.push(this.toDayRangeString(currentGroup));
+    }
+    return groups.join(', ');
+  };
+
+  private toDayRangeString(days: string[]) {
+    if (!days.length) {
+      return null;
+    }
+    if (days.length === 1) {
+      return days[0].substr(0, 3);
+    }
+    return `${days[0].substr(0, 3)}-${days[days.length - 1].substr(0, 3)}`;
+  }
+
+  private TimeWindows = ({ budget }: { budget: IJobDisruptionBudget }): JSX.Element => {
+    const { groupedDays } = this;
+    const hasWindows = budget.timeWindows && budget.timeWindows.length > 0;
+    return (
+      <>
+        <div className="bold">When can disruption occur?</div>
+        <div>
+          {hasWindows &&
+            budget.timeWindows.map((tw1, i1) => {
+              return tw1.hourlyTimeWindows.map((tw2, i2) => (
+                <div key={`${i1}.${i2}`}>
+                  {groupedDays(tw1.days)}, {tw2.startHour}:00 - {tw2.endHour}:00 {tw1.timeZone}
+                </div>
+              ));
+            })}
+          {!hasWindows && 'Any time'}
+        </div>
+      </>
+    );
+  };
+
+  private editBudget = (): void => {
+    const { app, serverGroup } = this.props;
+    TitusReactInjector.titusServerGroupCommandBuilder
+      .buildServerGroupCommandFromExisting(app, serverGroup)
+      .then((command: ITitusServerGroupCommand) => {
+        EditDisruptionBudgetModal.show({ command, application: app, serverGroup });
+      });
+  };
+
+  public render() {
+    const { Policy, SectionHeading, Rate, TimeWindows } = this;
+    const serverGroup: ITitusServerGroup = this.props.serverGroup;
+    const hasDefaultMigrationPolicy =
+      !serverGroup.migrationPolicy || serverGroup.migrationPolicy.type === 'SystemDefault';
+    const defaultBudget = getDefaultJobDisruptionBudgetForApp(this.props.app);
+    const budget = serverGroup.disruptionBudget || defaultBudget;
+    const usingDefault = !hasDefaultMigrationPolicy && isEqual(budget, defaultBudget);
+    return (
+      <>
+        <DisruptionBudgetDescription />
+        {usingDefault && <div>(default policy)</div>}
+        <div className="bottom-border">
+          <SectionHeading budget={budget} options={policyOptions} label="Policy" />
+          <Policy budget={budget} />
+        </div>
+        <div className="bottom-border">
+          <SectionHeading budget={budget} options={rateOptions} label="Rate" />
+          <Rate budget={budget} />
+        </div>
+        <TimeWindows budget={budget} />
+        <div className="sp-margin-l-top">
+          <a className="clickable" onClick={this.editBudget}>
+            Edit Disruption Budget
+          </a>
+        </div>
+      </>
+    );
+  }
+}
+
+export const DISRUPTION_BUDGET_DETAILS_SECTION = 'spinnaker.titus.disruptionbudget.section';
+
+module(DISRUPTION_BUDGET_DETAILS_SECTION, []).component(
+  'titusDisruptionBudgetSection',
+  react2angular(withErrorBoundary(DisruptionBudgetSection, 'titusDisruptionBudgetSection'), ['serverGroup', 'app']),
+);

package/src/serverGroup/details/disruptionBudget/EditDisruptionBudgetModal.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import type { Application, IJob, IModalComponentProps } from '@spinnaker/core';
+import {
+  ModalClose,
+  ReactModal,
+  SpinFormik,
+  SubmitButton,
+  TaskExecutor,
+  TaskMonitor,
+  TaskMonitorWrapper,
+} from '@spinnaker/core';
+
+import type { ITitusServerGroupCommand } from '../../configure/serverGroupConfiguration.service';
+import { JobDisruptionBudget } from '../../configure/wizard/pages/disruptionBudget/JobDisruptionBudget';
+import type { ITitusServerGroup } from '../../../domain';
+
+export interface IEditDisruptionBudgetModalProps extends IModalComponentProps {
+  application: Application;
+  command: ITitusServerGroupCommand;
+  serverGroup: ITitusServerGroup;
+}
+
+export class EditDisruptionBudgetModal extends React.Component<IEditDisruptionBudgetModalProps> {
+  public static show(props: IEditDisruptionBudgetModalProps): Promise<void> {
+    return ReactModal.show(EditDisruptionBudgetModal, props);
+  }
+
+  private submit(values: ITitusServerGroupCommand, taskMonitor: TaskMonitor): void {
+    const { application, serverGroup } = this.props;
+    const job: IJob = {
+      type: 'upsertDisruptionBudget',
+      cloudProvider: 'titus',
+      credentials: serverGroup.account,
+      region: serverGroup.region,
+      jobId: serverGroup.id,
+      disruptionBudget: values.disruptionBudget,
+    };
+
+    taskMonitor.submit(() =>
+      TaskExecutor.executeTask({
+        job: [job],
+        application,
+        description: `Update Disruption Budget for ${serverGroup.name}`,
+      }),
+    );
+  }
+
+  public render() {
+    const { application, command, dismissModal } = this.props;
+    const taskMonitor = new TaskMonitor({
+      application,
+      title: 'Updating Job Disruption Budget',
+      modalInstance: TaskMonitor.modalInstanceEmulation(() => dismissModal()),
+      onTaskComplete: () => application.serverGroups.refresh(),
+    });
+
+    return (
+      <>
+        <TaskMonitorWrapper monitor={taskMonitor} />
+        <SpinFormik<ITitusServerGroupCommand>
+          initialValues={command}
+          onSubmit={(values: ITitusServerGroupCommand) => this.submit(values, taskMonitor)}
+          render={(formik) => (
+            <>
+              <ModalClose dismiss={dismissModal} />
+              <Modal.Header>
+                <Modal.Title>Update Disruption Budget</Modal.Title>
+              </Modal.Header>
+              <Modal.Body>
+                <JobDisruptionBudget formik={formik} app={application} />
+              </Modal.Body>
+              <Modal.Footer>
+                <button className="btn btn-default" onClick={dismissModal} type="button">
+                  Cancel
+                </button>
+                <SubmitButton
+                  onClick={() => this.submit(formik.values, taskMonitor)}
+                  isDisabled={!formik.isValid}
+                  isFormSubmit={true}
+                  submitting={false}
+                  label="Update Budget"
+                />
+              </Modal.Footer>
+            </>
+          )}
+        />
+      </>
+    );
+  }
+}

package/src/serverGroup/details/index.ts

@@ -0,0 +1,5 @@
+export * from './TitusCapacityDetailsSection';
+export * from './TitusSecurityGroups';
+export * from './resize/TitusResizeServerGroupModal';
+export * from './scalingActivity/TitusScalingActivitiesModal';
+export * from './scalingPolicy';

package/src/serverGroup/details/launchConfigSection.component.ts

@@ -0,0 +1,12 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { TitusLaunchConfigSection } from './TitusLaunchConfigSection';
+
+export const TITUS_SERVERGROUP_DETAILS_LAUNCHCONFIGSECTION = 'titus.servergroup.details.launchConfigSection';
+module(TITUS_SERVERGROUP_DETAILS_LAUNCHCONFIGSECTION, []).component(
+  'titusLaunchConfigSection',
+  react2angular(withErrorBoundary(TitusLaunchConfigSection, 'titusLaunchConfigSection'), ['serverGroup']),
+);

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

@@ -0,0 +1,302 @@
+import type { FormikContext } from 'formik';
+import { Form } from 'formik';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import type { Application, ICapacity, IModalComponentProps } from '@spinnaker/core';
+import {
+  FormikFormField,
+  MinMaxDesiredChanges,
+  ModalClose,
+  NumberInput,
+  PlatformHealthOverride,
+  ReactInjector,
+  SpinFormik,
+  TaskMonitorWrapper,
+  UserVerification,
+  ValidationMessage,
+} from '@spinnaker/core';
+import type { ITitusServerGroup } from '../../../domain';
+
+import { useTaskMonitor } from './useTaskMonitor';
+
+const { useState, useEffect, useMemo } = React;
+
+export interface ITitusResizeServerGroupModalProps extends IModalComponentProps {
+  application: Application;
+  serverGroup: ITitusServerGroup;
+}
+
+interface ITitusResizeServerGroupCommand {
+  capacity: ICapacity;
+  serverGroupName: string;
+  instances: number;
+  interestingHealthProviderNames: string[];
+  region: string;
+}
+
+function surfacedErrorMessage(formik: FormikContext<ITitusResizeServerGroupCommand>) {
+  const capacityErrors = formik.errors.capacity || ({} as any);
+  const { min, max, desired } = capacityErrors;
+  return [min, max, desired].find((x) => !!x);
+}
+
+function SimpleMode({ formik, serverGroup, toggleMode }: IAdvancedModeProps) {
+  useEffect(() => {
+    formik.setFieldValue('capacity.min', formik.values.capacity.desired);
+    formik.setFieldValue('capacity.max', formik.values.capacity.desired);
+  }, [formik.values.capacity.desired]);
+
+  const errorMessage = surfacedErrorMessage(formik);
+
+  return (
+    <div>
+      <p>Sets min, max, and desired instance counts to the same value.</p>
+
+      <p>
+        To allow autoscaling, use the{' '}
+        <a className="clickable" onClick={toggleMode}>
+          Advanced Mode
+        </a>
+        .
+      </p>
+
+      <div className="form-group row">
+        <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={serverGroup.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="capacity.desired"
+              input={(props) => <NumberInput {...props} min={0} />}
+              layout={({ input }) => <>{input}</>}
+              touched={true}
+              onChange={() => {}}
+            />
+            <div className="sp-padding-xs-xaxis">instances</div>
+          </div>
+        </div>
+      </div>
+
+      {!!errorMessage && (
+        <div className="col-md-offset-3 col-md-9">
+          <ValidationMessage message={errorMessage} type="error" />
+        </div>
+      )}
+
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">Changes</div>
+        <div className="col-md-9 sm-control-field">
+          <MinMaxDesiredChanges current={serverGroup.capacity} next={formik.values.capacity} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface IAdvancedModeProps {
+  formik: FormikContext<ITitusResizeServerGroupCommand>;
+  serverGroup: ITitusServerGroup;
+  toggleMode: () => void;
+}
+
+function AdvancedMode({ formik, serverGroup, toggleMode }: IAdvancedModeProps) {
+  const { min, max } = formik.values.capacity || ({} as any);
+
+  const DisabledNumberField = ({ value }: { value: string | number }) => (
+    <div className="col-md-2">
+      <input className="NumberInput form-control" type="number" disabled={true} value={value} />
+    </div>
+  );
+  const errorMessage = surfacedErrorMessage(formik);
+
+  return (
+    <div>
+      <p>Sets up auto-scaling for this server group.</p>
+      <p>
+        To disable auto-scaling, use the{' '}
+        <a className="clickable" onClick={toggleMode}>
+          Simple Mode
+        </a>
+        .
+      </p>
+
+      <div className="form-group bold">
+        <div className="col-md-2 col-md-offset-3">Min</div>
+        <div className="col-md-2">Max</div>
+        <div className="col-md-2">Desired</div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">Current</div>
+        <DisabledNumberField value={serverGroup.capacity.min} />
+        <DisabledNumberField value={serverGroup.capacity.max} />
+        <DisabledNumberField value={serverGroup.capacity.desired} />
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">Resize to</div>
+        <div className="col-md-2">
+          <FormikFormField
+            name="capacity.min"
+            input={(props) => <NumberInput {...props} min={0} max={max} />}
+            layout={({ input }) => <>{input}</>}
+            touched={true}
+          />
+        </div>
+
+        <div className="col-md-2">
+          <FormikFormField
+            name="capacity.max"
+            input={(props) => <NumberInput {...props} min={min} />}
+            layout={({ input }) => <>{input}</>}
+            touched={true}
+          />
+        </div>
+
+        <div className="col-md-2">
+          <FormikFormField
+            name="capacity.desired"
+            input={(props) => <NumberInput {...props} min={min} max={max} />}
+            layout={({ input }) => <>{input}</>}
+            touched={true}
+          />
+        </div>
+      </div>
+
+      {!!errorMessage && (
+        <div className="col-md-offset-3 col-md-9">
+          <ValidationMessage message={errorMessage} type="error" />
+        </div>
+      )}
+
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">Changes</div>
+        <div className="col-md-9 sm-control-field">
+          <MinMaxDesiredChanges current={serverGroup.capacity} next={formik.values.capacity} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function validateResizeCommand(values: ITitusResizeServerGroupCommand) {
+  const { min, max, desired } = values.capacity;
+  const capacityErrors = {} as any;
+
+  // try to only show one error message at a time
+  if (min > max) {
+    capacityErrors.min = capacityErrors.max = 'Min cannot be larger than Max';
+  } else if (desired < min) {
+    capacityErrors.desired = capacityErrors.min = 'Desired cannot be smaller than Min';
+  } else if (desired > max) {
+    capacityErrors.desired = capacityErrors.max = 'Desired cannot be larger than Max';
+  }
+
+  if (Object.keys(capacityErrors).length) {
+    return { capacity: capacityErrors };
+  }
+
+  return {};
+}
+
+export function TitusResizeServerGroupModal(props: ITitusResizeServerGroupModalProps) {
+  const { serverGroup, application, dismissModal } = props;
+
+  const initialAdvancedMode = useMemo(() => {
+    const { min, max, desired } = serverGroup.capacity;
+    return desired !== max || desired !== min;
+  }, []);
+  const [advancedMode, setAdvancedMode] = useState(initialAdvancedMode);
+
+  const platformHealthOnlyShowOverride =
+    application.attributes && application.attributes.platformHealthOnlyShowOverride;
+  const [verified, setVerified] = useState<boolean>();
+
+  const taskMonitor = useTaskMonitor(
+    {
+      application,
+      title: `Resizing ${serverGroup.name}`,
+      onTaskComplete: () => application.getDataSource('serverGroups').refresh(true),
+    },
+    dismissModal,
+  );
+  const submit = (command: ITitusResizeServerGroupCommand) =>
+    taskMonitor.submit(() => ReactInjector.serverGroupWriter.resizeServerGroup(serverGroup, application, command));
+
+  const initialValues = { capacity: serverGroup.capacity } as ITitusResizeServerGroupCommand;
+
+  return (
+    <>
+      <TaskMonitorWrapper monitor={taskMonitor} />
+
+      <SpinFormik<ITitusResizeServerGroupCommand>
+        initialValues={initialValues}
+        validate={validateResizeCommand}
+        onSubmit={submit}
+        render={(formik) => {
+          return (
+            <>
+              <ModalClose dismiss={dismissModal} />
+              <Modal.Header>
+                <Modal.Title>Resize {serverGroup.name}</Modal.Title>
+              </Modal.Header>
+
+              <Modal.Body>
+                <Form className="form-horizontal">
+                  {advancedMode ? (
+                    <AdvancedMode formik={formik} serverGroup={serverGroup} toggleMode={() => setAdvancedMode(false)} />
+                  ) : (
+                    <SimpleMode formik={formik} serverGroup={serverGroup} toggleMode={() => setAdvancedMode(true)} />
+                  )}
+
+                  {platformHealthOnlyShowOverride && (
+                    <PlatformHealthOverride
+                      interestingHealthProviderNames={formik.values.interestingHealthProviderNames}
+                      platformHealthType="Titus"
+                      showHelpDetails={true}
+                      onChange={(names) =>
+                        formik.setFieldValue('interestingHealthProviderNames', names ? names : undefined)
+                      }
+                    />
+                  )}
+                </Form>
+              </Modal.Body>
+
+              <Modal.Footer>
+                <UserVerification account={serverGroup.account} onValidChange={setVerified} />
+
+                <button className="btn btn-default" onClick={dismissModal}>
+                  Cancel
+                </button>
+
+                <button
+                  type="submit"
+                  disabled={!verified || !formik.isValid}
+                  className="btn btn-primary"
+                  onClick={() => submit(formik.values)}
+                >
+                  Submit
+                </button>
+              </Modal.Footer>
+            </>
+          );
+        }}
+      />
+    </>
+  );
+}

package/src/serverGroup/details/resize/useTaskMonitor.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import type { ITaskMonitorConfig } from '@spinnaker/core';
+import { TaskMonitor } from '@spinnaker/core';
+
+/**
+ * React hook that returns a TaskMonitor
+ *
+ * @param config a ITaskMonitorConfig
+ * @param dismissModal a function that closes the modal enclosing the task monitor
+ *
+ * Example:
+ *
+ * function MyComponent(props) {
+ *   const { application, serverGroup } = props;
+ *   const title = `Resize ${serverGroup.name}`;
+ *   const taskMonitor = useTaskMonitor({ application, title });
+ *
+ *   return (
+ *     <>
+ *       <TaskMonitorWrapper taskMonitor={taskMonitor}>
+ *       <form onSubmit={() => taskMonitor.submit(() => API.runSomeTask())}>
+ *     </>
+ *   )
+ * }
+ *
+ */
+export const useTaskMonitor = (config: ITaskMonitorConfig, dismissModal: () => void) => {
+  const modalInstance = TaskMonitor.modalInstanceEmulation(() => dismissModal());
+  return useMemo(() => new TaskMonitor({ modalInstance, ...config }), [config.application, config.title]);
+};