@spinnaker/titus 0.0.0-main-2

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

@@ -0,0 +1,200 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+import { HelpField, SpelNumberInput } from '@spinnaker/core';
+
+import type { ITitusServerGroupCommand } from '../../../configure/serverGroupConfiguration.service';
+
+const mountPermOptions = [
+  { label: 'Read and Write', value: 'RW' },
+  { label: 'Read Only', value: 'RO' },
+  { label: 'Write Only', value: 'WO' },
+];
+
+export interface IServerGroupResourcesProps {
+  formik: FormikProps<ITitusServerGroupCommand>;
+}
+
+export class ServerGroupResources
+  extends React.Component<IServerGroupResourcesProps>
+  implements IWizardPageComponent<ITitusServerGroupCommand> {
+  public validate(values: ITitusServerGroupCommand) {
+    const errors = {} as any;
+
+    if (!values.resources) {
+      errors.resources = 'CPU is required.';
+    }
+    if (!values.resources) {
+      errors.resources = 'Memory is required.';
+    }
+    if (!values.resources) {
+      errors.resources = 'Disk is required.';
+    }
+    if (!values.resources) {
+      errors.resources = 'Network is required.';
+    }
+
+    return errors;
+  }
+
+  public render() {
+    const { setFieldValue, values } = this.props.formik;
+    return (
+      <div className="clearfix">
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>CPU(s)</b>
+          </div>
+          <div className="col-md-8">
+            <SpelNumberInput
+              value={values.resources.cpu}
+              onChange={(value) =>
+                setFieldValue('resources', {
+                  ...values.resources,
+                  ...{ cpu: value },
+                })
+              }
+              required={true}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Memory (MB)</b>
+          </div>
+          <div className="col-md-8">
+            <SpelNumberInput
+              value={values.resources.memory}
+              onChange={(value) =>
+                setFieldValue('resources', {
+                  ...values.resources,
+                  ...{ memory: value },
+                })
+              }
+              required={true}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Disk (MB)</b>
+          </div>
+          <div className="col-md-8">
+            <SpelNumberInput
+              value={values.resources.disk}
+              onChange={(value) =>
+                setFieldValue('resources', {
+                  ...values.resources,
+                  ...{ disk: value },
+                })
+              }
+              required={true}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Network (Mbps)</b>
+            <HelpField id="titus.deploy.network" />
+          </div>
+          <div className="col-md-8">
+            <SpelNumberInput
+              value={values.resources.networkMbps}
+              onChange={(value) =>
+                setFieldValue('resources', {
+                  ...values.resources,
+                  ...{ networkMbps: value },
+                })
+              }
+              required={true}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Gpu</b>
+            <HelpField id="titus.deploy.gpu" />
+          </div>
+          <div className="col-md-8">
+            <SpelNumberInput
+              value={values.resources.gpu}
+              onChange={(value) =>
+                setFieldValue('resources', {
+                  ...values.resources,
+                  ...{ gpu: value },
+                })
+              }
+            />
+          </div>
+        </div>
+        <hr />
+
+        <h4>
+          <b>
+            Elastic File System Options <HelpField id="titus.deploy.efs" />
+          </b>
+        </h4>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Mount Permission </b>
+            <HelpField id="titus.deploy.mountPermissions" />
+          </div>
+          <div className="col-md-8">
+            <Select
+              value={values.efs.mountPerm}
+              clearable={false}
+              options={mountPermOptions}
+              onChange={(option: Option) => setFieldValue('efs', { ...values.efs, ...{ mountPerm: option.value } })}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Mount Point </b>
+            <HelpField id="titus.deploy.mountPoint" />
+          </div>
+          <div className="col-md-8">
+            <input
+              type="text"
+              className="form-control input-sm no-spel"
+              value={values.efs.mountPoint}
+              onChange={(e) => setFieldValue('efs', { ...values.efs, ...{ mountPoint: e.target.value } })}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>EFS ID </b>
+            <HelpField id="titus.deploy.efsId" />
+          </div>
+          <div className="col-md-8">
+            <input
+              type="text"
+              className="form-control input-sm no-spel"
+              value={values.efs.efsId}
+              onChange={(e) => setFieldValue('efs', { ...values.efs, ...{ efsId: e.target.value } })}
+            />
+          </div>
+          <div className="col-md-offset-3 col-md-8" />
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>EFS Relative Mount Point </b>
+            <HelpField id="titus.deploy.efsRelativeMountPoint" />
+          </div>
+          <div className="col-md-8">
+            <input
+              type="text"
+              className="form-control input-sm no-spel"
+              value={values.efs.efsRelativeMountPoint}
+              onChange={(e) => setFieldValue('efs', { ...values.efs, ...{ efsRelativeMountPoint: e.target.value } })}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/TitusMapLayout.less

@@ -0,0 +1,3 @@
+.TitusMapLayout_Contents * {
+  flex: auto;
+}

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

@@ -0,0 +1,29 @@
+import { isUndefined } from 'lodash';
+import React from 'react';
+
+import type { IFormInputValidation } from '@spinnaker/core';
+import { ValidationMessage } from '@spinnaker/core';
+import type { ILayoutProps } from '@spinnaker/core';
+import './TitusMapLayout.less';
+
+export function TitusMapLayout(props: ILayoutProps) {
+  const { label, help, input, actions, validation = {} as IFormInputValidation } = props;
+  const { hidden, messageNode, category } = validation;
+  const showLabel = !isUndefined(label) || !isUndefined(help);
+
+  return (
+    <div className="TitusMapLayout flex-container-v">
+      {showLabel && (
+        <h4>
+          {label} {help}
+        </h4>
+      )}
+
+      <div className="flex-container-h baseline margin-between-lg TitusMapLayout_Contents">
+        {input} {actions}
+      </div>
+
+      {!hidden && <ValidationMessage message={messageNode} type={category} />}
+    </div>
+  );
+}

package/src/serverGroup/configure/wizard/pages/disruptionBudget/JobDisruptionBudget.tsx

@@ -0,0 +1,285 @@
+import type { FormikProps } from 'formik';
+import { get, isEqual } from 'lodash';
+import React from 'react';
+import type { Option } from 'react-select';
+
+import type { Application } from '@spinnaker/core';
+import {
+  CheckboxInput,
+  FormikFormField,
+  HelpField,
+  LayoutProvider,
+  ResponsiveFieldLayout,
+  TetheredSelect,
+} from '@spinnaker/core';
+
+import { policyOptions } from './PolicyOptions';
+import { rateOptions } from './RateOptions';
+import { WindowPicker } from './WindowPicker';
+import type { IJobDisruptionBudget } from '../../../../../domain';
+import type { ITitusServerGroupCommand } from '../../../serverGroupConfiguration.service';
+import {
+  defaultJobDisruptionBudget,
+  getDefaultJobDisruptionBudgetForApp,
+} from '../../../serverGroupConfiguration.service';
+
+export interface IJobDisruptionBudgetProps {
+  formik: FormikProps<ITitusServerGroupCommand>;
+  app: Application;
+  runJobView?: boolean;
+  onStageChange?: (values: IJobDisruptionBudget) => void;
+}
+
+export interface IJobDisruptionBudgetState {
+  usingDefault: boolean;
+}
+
+export interface IFieldOption extends Option {
+  field: keyof IJobDisruptionBudget;
+  description?: string;
+  defaultValues: any;
+  fieldComponent?: (props: IFieldOptionComponentProps) => JSX.Element;
+}
+
+export interface IFieldOptionComponentProps {
+  isDisabled: boolean;
+}
+
+export const DisruptionBudgetDescription = () => (
+  <p>
+    The Job Disruption Budget is part of the job descriptor, and defines the behavior of how containers of the job can
+    be relocated.{' '}
+    <a href="http://manuals.test.netflix.net/view/titus-docs/mkdocs/master/disruption_budget/" target="_blank">
+      Read the full documentation
+    </a>
+  </p>
+);
+
+export class JobDisruptionBudget extends React.Component<IJobDisruptionBudgetProps, IJobDisruptionBudgetState> {
+  private timeWindowOptions: IFieldOption[] = [
+    {
+      field: 'timeWindows',
+      label: 'Anytime',
+      value: 0,
+      defaultValues: undefined,
+    },
+    {
+      field: 'timeWindows',
+      label: 'Specific Time Windows',
+      value: 1,
+      defaultValues: defaultJobDisruptionBudget.timeWindows,
+    },
+  ];
+
+  constructor(props: IJobDisruptionBudgetProps) {
+    super(props);
+    const { disruptionBudget } = props.formik.values;
+    this.state = {
+      usingDefault: !disruptionBudget || isEqual(disruptionBudget, getDefaultJobDisruptionBudgetForApp(props.app)),
+    };
+    if (this.state.usingDefault) {
+      this.setToDefaultBudget();
+    }
+  }
+
+  private setToDefaultBudget(): void {
+    this.props.formik.setFieldValue('disruptionBudget', getDefaultJobDisruptionBudgetForApp(this.props.app));
+  }
+
+  private toggleUseDefault = (): void => {
+    if (!this.state.usingDefault) {
+      this.setToDefaultBudget();
+    }
+    this.setState({ usingDefault: !this.state.usingDefault });
+  };
+
+  private getSelectionFromFields(options: IFieldOption[]): IFieldOption {
+    const { disruptionBudget } = this.props.formik.values;
+    if (!disruptionBudget) {
+      return options[0];
+    }
+    return options.find((o) => !!disruptionBudget[o.field]);
+  }
+
+  componentDidUpdate = (oldProps: IJobDisruptionBudgetProps) => {
+    if (
+      this.props.onStageChange &&
+      !isEqual(oldProps.formik.values.disruptionBudget, this.props.formik.values.disruptionBudget)
+    ) {
+      this.props.onStageChange(this.props.formik.values.disruptionBudget);
+    }
+  };
+
+  private optionTypeChanged = (e: IFieldOption, options: IFieldOption[]) => {
+    const deselected = options.filter((o) => o !== e);
+    deselected.forEach((o) => this.props.formik.setFieldValue('disruptionBudget.' + o.field, undefined));
+    this.props.formik.setFieldValue('disruptionBudget.' + e.field, e.defaultValues);
+  };
+
+  private policyTypeChanged = (e: IFieldOption) => this.optionTypeChanged(e, policyOptions);
+
+  private rateTypeChanged = (e: IFieldOption) => this.optionTypeChanged(e, rateOptions);
+
+  private timeWindowsChanged = (e: IFieldOption) => {
+    this.props.formik.setFieldValue('disruptionBudget.' + e.field, e.defaultValues);
+  };
+
+  private getTimeWindowSelection(): IFieldOption {
+    const windows = get(this.props.formik.values, 'disruptionBudget.timeWindows');
+    if (windows) {
+      return this.timeWindowOptions.find((o) => o.defaultValues);
+    }
+    return this.timeWindowOptions.find((o) => !o.defaultValues);
+  }
+
+  private toggleHealthProvider(provider: string) {
+    const { values, setFieldValue } = this.props.formik;
+    const providers = values.disruptionBudget.containerHealthProviders;
+    const existing = providers.find((p) => p.name === provider);
+    if (existing) {
+      setFieldValue(
+        'disruptionBudget.containerHealthProviders',
+        providers.filter((p) => p !== existing),
+      );
+    } else {
+      setFieldValue('disruptionBudget.containerHealthProviders', providers.concat({ name: provider }));
+    }
+  }
+
+  public render() {
+    const { runJobView } = this.props;
+    const { usingDefault } = this.state;
+    const budget = this.props.formik.values.disruptionBudget || getDefaultJobDisruptionBudgetForApp(this.props.app);
+
+    const policyType = this.getSelectionFromFields(policyOptions);
+    const PolicyFields = policyType.fieldComponent;
+
+    const rateType = this.getSelectionFromFields(rateOptions);
+    const RateFields = rateType?.fieldComponent;
+
+    const windowType = this.getTimeWindowSelection();
+
+    const selectedProviders = (budget.containerHealthProviders ?? []).map((p) => p.name);
+
+    const isSelfManaged = !!budget.selfManaged;
+    const showConfig = !runJobView || (runJobView && !usingDefault);
+
+    return (
+      <LayoutProvider value={ResponsiveFieldLayout}>
+        <div className="form-horizontal sp-margin-l-xaxis">
+          {!runJobView && <DisruptionBudgetDescription />}
+
+          <FormikFormField
+            name="usingDefault"
+            input={() => (
+              <CheckboxInput
+                checked={usingDefault}
+                onChange={this.toggleUseDefault}
+                text={<b>Use Netflix Defaults</b>}
+              />
+            )}
+            layout={runJobView ? ({ input }) => <>{input}</> : undefined}
+          />
+
+          {showConfig && (
+            <div style={{ opacity: usingDefault ? 0.5 : 1 }}>
+              <div className="sp-formGroup">
+                <div className="groupHeader">
+                  <FormikFormField
+                    name="policyType"
+                    label="Policy"
+                    input={(props) => (
+                      <div>
+                        <TetheredSelect
+                          {...props}
+                          menuContainerStyle={{ height: '300px' }}
+                          className="Select-menu-long"
+                          style={{ width: '300px' }}
+                          disabled={usingDefault}
+                          clearable={false}
+                          onChange={this.policyTypeChanged}
+                          value={policyType}
+                          options={policyOptions}
+                        />
+                        <HelpField
+                          expand={true}
+                          content="A job policy defines container relocation rules and constraints"
+                        />
+                      </div>
+                    )}
+                  />
+                </div>
+                <div className="sp-formItem">
+                  <p>{policyType.description}</p>
+                </div>
+                {PolicyFields && <PolicyFields isDisabled={usingDefault} />}
+              </div>
+              {!isSelfManaged && (
+                <div>
+                  <div className={`${budget.rateUnlimited ? '' : 'sp-formGroup'}`}>
+                    <div className={`${budget.rateUnlimited ? '' : 'groupHeader'}`}>
+                      <FormikFormField
+                        name="rates"
+                        label="Rates"
+                        input={(props) => (
+                          <TetheredSelect
+                            {...props}
+                            style={{ width: '300px' }}
+                            disabled={usingDefault}
+                            clearable={false}
+                            onChange={this.rateTypeChanged}
+                            value={rateType}
+                            options={rateOptions}
+                          />
+                        )}
+                      />
+                    </div>
+                    <div className="sp-formItem">
+                      <p>{rateType.description}</p>
+                    </div>
+                    {RateFields && <RateFields isDisabled={usingDefault} />}
+                  </div>
+
+                  <div className={`${budget.timeWindows ? 'sp-formGroup' : ''}`}>
+                    <div className={`${budget.timeWindows ? 'groupHeader' : ''}`}>
+                      <FormikFormField
+                        name="timeWindows"
+                        label="When Can Disruption Occur?"
+                        input={(props) => (
+                          <TetheredSelect
+                            {...props}
+                            style={{ width: '300px' }}
+                            disabled={usingDefault}
+                            clearable={false}
+                            onChange={this.timeWindowsChanged}
+                            value={windowType}
+                            options={this.timeWindowOptions}
+                          />
+                        )}
+                      />
+                    </div>
+                    {budget.timeWindows && <WindowPicker isDisabled={usingDefault} formik={this.props.formik} />}
+                  </div>
+                  <FormikFormField
+                    name="healthProviders"
+                    label="Container Health Provider"
+                    input={() => (
+                      <div>
+                        <CheckboxInput
+                          checked={selectedProviders.includes('eureka')}
+                          onChange={() => this.toggleHealthProvider('eureka')}
+                          text="Discovery"
+                          disabled={usingDefault}
+                        />
+                      </div>
+                    )}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </LayoutProvider>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/disruptionBudget/PolicyOptions.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+
+import { FormikFormField, HelpField, NumberInput } from '@spinnaker/core';
+
+import type { IFieldOption, IFieldOptionComponentProps } from './JobDisruptionBudget';
+import { defaultJobDisruptionBudget } from '../../../serverGroupConfiguration.service';
+
+const SelfManagedField = () => (
+  <FormikFormField
+    name="disruptionBudget.selfManaged.relocationTimeMs"
+    label="Relocation Time"
+    input={(props) => (
+      <div>
+        <NumberInput {...props} />
+        <HelpField expand={true} content="(milliseconds)" />
+      </div>
+    )}
+  />
+);
+
+const UnhealthyTasksLimitsField = () => (
+  <FormikFormField
+    name="disruptionBudget.unhealthyTasksLimit.limitOfUnhealthyContainers"
+    label="Limit of Unhealthy Containers"
+    input={(props) => (
+      <div>
+        <NumberInput {...props} />
+        <HelpField expand={true} content="(integer)" />
+      </div>
+    )}
+  />
+);
+
+const AvailabilityPercentageLimit = (componentProps: IFieldOptionComponentProps) => (
+  <FormikFormField
+    name="disruptionBudget.availabilityPercentageLimit.percentageOfHealthyContainers"
+    label="Percentage of Healthy Containers"
+    input={(props) => (
+      <div>
+        <NumberInput {...props} disabled={componentProps.isDisabled} />
+        <HelpField expand={true} content="0.0-100.0 (double)" />
+      </div>
+    )}
+  />
+);
+
+const RelocationLimit = () => (
+  <FormikFormField
+    name="disruptionBudget.relocationLimit.limit"
+    label="Limit"
+    input={(props) => (
+      <div>
+        <NumberInput {...props} />
+        <HelpField expand={true} content="(tasks)" />
+      </div>
+    )}
+  />
+);
+
+export const policyOptions: IFieldOption[] = [
+  {
+    field: 'availabilityPercentageLimit',
+    label: 'Availability Percentage Limit',
+    value: 0,
+    description: `
+      Lets you specify the required percentage of tasks in a healthy state.
+      Tasks will not be terminated by the eviction service if this limit would be violated.
+    `,
+    defaultValues: defaultJobDisruptionBudget.availabilityPercentageLimit,
+    fieldComponent: AvailabilityPercentageLimit,
+  },
+  {
+    field: 'relocationLimit',
+    label: 'Relocation Limit',
+    value: 1,
+    description: `
+      Lets you specify the maximum number of times a task can be relocated.
+      Should only be used with batch tasks, which have a maximum execution time.
+    `,
+    defaultValues: {
+      limit: 1,
+    },
+    fieldComponent: RelocationLimit,
+  },
+  {
+    field: 'unhealthyTasksLimit',
+    label: 'Unhealthy Tasks Limit',
+    value: 2,
+    description: `
+      Lets you specify the maximum allowed amount of tasks in an unhealthy state.
+      Tasks will not be terminated by the eviction service if this limit would be violated.
+    `,
+    defaultValues: {
+      limitOfUnhealthyContainers: 1,
+    },
+    fieldComponent: UnhealthyTasksLimitsField,
+  },
+  {
+    field: 'selfManaged',
+    label: 'Self Managed',
+    value: 3,
+    description: `
+      Requires that you orchestrate custom termination logic.
+      If the containers are not terminated within the configured amount of time,
+      the system default migration policy is used instead.
+    `,
+    defaultValues: {
+      relocationTimeMs: 24 * 60 * 60 * 1000,
+    },
+    fieldComponent: SelfManagedField,
+  },
+];