@spinnaker/titus 0.0.0-main-2

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

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import { FormikFormField, HelpField, NumberInput } from '@spinnaker/core';
+
+import type { IFieldOption, IFieldOptionComponentProps } from './JobDisruptionBudget';
+import { defaultJobDisruptionBudget } from '../../../serverGroupConfiguration.service';
+
+const RatePercentagePerInterval = (componentProps: IFieldOptionComponentProps) => (
+  <>
+    <FormikFormField
+      name="disruptionBudget.ratePercentagePerInterval.intervalMs"
+      label="Interval"
+      input={(props) => (
+        <div>
+          <NumberInput {...props} disabled={componentProps.isDisabled} />
+          <HelpField expand={true} content="(milliseconds)" />
+        </div>
+      )}
+    />
+    <FormikFormField
+      name="disruptionBudget.ratePercentagePerInterval.percentageLimitPerInterval"
+      label="Percentage Per Interval"
+      input={(props) => (
+        <div>
+          <NumberInput {...props} disabled={componentProps.isDisabled} />
+          <HelpField expand={true} content="0.0-100.0 (double)" />
+        </div>
+      )}
+    />
+  </>
+);
+
+const RatePerInterval = () => (
+  <>
+    <FormikFormField
+      name="disruptionBudget.ratePerInterval.intervalMs"
+      label="Interval"
+      input={(props) => (
+        <div>
+          <NumberInput {...props} />
+          <HelpField expand={true} content="(milliseconds)" />
+        </div>
+      )}
+    />
+    <FormikFormField
+      name="disruptionBudget.ratePerInterval.limitPerInterval"
+      label="Limit Per Interval"
+      input={(props) => (
+        <div>
+          <NumberInput {...props} />
+          <HelpField expand={true} content="(tasks)" />
+        </div>
+      )}
+    />
+  </>
+);
+
+export const rateOptions: IFieldOption[] = [
+  {
+    field: 'rateUnlimited',
+    label: 'Unlimited',
+    value: 0,
+    description: `
+        No limits on how many containers in a job may be relocated, provided the other disruption budget constraints
+        are not violated.
+      `,
+    defaultValues: true,
+  },
+  {
+    field: 'ratePercentagePerInterval',
+    label: 'Rate Percentage Per Interval',
+    value: 1,
+    description: `
+        Percentage of containers that can be relocated within a time interval.
+      `,
+    defaultValues: defaultJobDisruptionBudget.ratePercentagePerInterval,
+    fieldComponent: RatePercentagePerInterval,
+  },
+  {
+    field: 'ratePerInterval',
+    label: 'Rate Per Interval',
+    value: 2,
+    description: `
+        Limit number of relocations within a given time interval.
+      `,
+    defaultValues: { intervalMs: 60000, limitPerInterval: 2 },
+    fieldComponent: RatePerInterval,
+  },
+];

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

@@ -0,0 +1,202 @@
+import type { FormikProps } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+
+import { ChecklistInput, FormikFormField, HelpField, NumberInput, ReactSelectInput, SpinFormik } from '@spinnaker/core';
+import type { IJobTimeWindow } from '../../../../../domain';
+
+import type { ITitusServerGroupCommand } from '../../../serverGroupConfiguration.service';
+
+export interface IWindowPickerProps {
+  formik: FormikProps<ITitusServerGroupCommand>;
+  isDisabled: boolean;
+}
+
+export interface IWindowPickerState {
+  addingNewWindow?: boolean;
+}
+
+const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+interface IJobTimeWindowForm {
+  days: string[];
+  startHour: number;
+  endHour: number;
+  timeZone: string;
+}
+
+export class WindowPicker extends React.Component<IWindowPickerProps, IWindowPickerState> {
+  constructor(props: IWindowPickerProps) {
+    super(props);
+    this.state = {
+      addingNewWindow: false,
+    };
+  }
+
+  private removeWindow(index: number, subIndex: number) {
+    const { values, setFieldValue } = this.props.formik;
+    const { timeWindows } = values.disruptionBudget;
+    const toRemove = timeWindows[index];
+    if (toRemove.hourlyTimeWindows.length === 1) {
+      setFieldValue(
+        'disruptionBudget.timeWindows',
+        timeWindows.filter((w) => w !== toRemove),
+      );
+    } else {
+      const subWindowToRemove = toRemove.hourlyTimeWindows[subIndex];
+      const newWindows = toRemove.hourlyTimeWindows.filter((w) => w !== subWindowToRemove);
+      setFieldValue(`disruptionBudget.timeWindows[${index}].hourlyTimeWindows`, newWindows);
+    }
+  }
+
+  /**
+   * The Budget API allows multiple hourly windows for a set of days; however, the UI is not really supportive of this,
+   * so we'll add them as a single window for a single set of days. It's fine!
+   */
+  private configureNewWindow = () => {
+    this.setState({ addingNewWindow: true });
+  };
+
+  private addNewWindow = (form: IJobTimeWindowForm) => {
+    const { values, setFieldValue } = this.props.formik;
+    const { days, startHour, endHour, timeZone } = form;
+    const newWindow: IJobTimeWindow = {
+      days,
+      hourlyTimeWindows: [{ startHour, endHour }],
+      timeZone,
+    };
+    setFieldValue('disruptionBudget.timeWindows', values.disruptionBudget.timeWindows.concat(newWindow));
+    this.setState({ addingNewWindow: false });
+  };
+
+  private CurrentWindows = () => {
+    const { disruptionBudget } = this.props.formik.values;
+    const { isDisabled } = this.props;
+    if (!disruptionBudget) {
+      return null;
+    }
+    const { timeWindows } = disruptionBudget;
+    return (
+      <div className="sp-formItem">
+        <div className="sp-formItem__left" />
+        <div className="sp-formItem__right">
+          {timeWindows.map((timeWindow, i) => {
+            return timeWindow.hourlyTimeWindows.map((w, i2) => (
+              <div
+                className="sp-margin-l-yaxis sp-margin-m-right"
+                style={{ display: 'inline-block' }}
+                key={`${i}.${i2}`}
+              >
+                <div
+                  key={`${i}.${i2}`}
+                  className="horizontal center top sp-padding-m-yaxis sp-padding-s-xaxis"
+                  style={{ backgroundColor: 'var(--color-dovegray)', borderRadius: '4px' }}
+                >
+                  <div className="sp-padding-m-right" style={{ color: 'var(--color-text-on-dark)', fontSize: '12px' }}>
+                    <div>
+                      <b>{timeWindow.days.map((d) => d.substr(0, 3)).join(', ')}</b>
+                    </div>
+                    <div>
+                      <em>
+                        {w.startHour}:00 - {w.endHour}:00 {timeWindow.timeZone}
+                      </em>
+                    </div>
+                  </div>
+                  {!isDisabled && (
+                    <a
+                      className="clickable"
+                      style={{ color: 'var(--color-text-on-dark)' }}
+                      onClick={() => this.removeWindow(i, i2)}
+                    >
+                      <span className="glyphicon glyphicon-remove" />
+                    </a>
+                  )}
+                </div>
+              </div>
+            ));
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  private NewWindowComponent = () => {
+    if (!this.state.addingNewWindow) {
+      return (
+        <div className="sp-formItem">
+          <div className="sp-formItem__left" />
+          <div className="sp-formItem__right sp-margin-l-bottom">
+            <a className="button primary" onClick={this.configureNewWindow}>
+              <i className="fas fa-plus-circle" /> Define New Window
+            </a>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <SpinFormik<IJobTimeWindowForm>
+        initialValues={{
+          days: [],
+          startHour: 10,
+          endHour: 16,
+          timeZone: get(this.props.formik.values.disruptionBudget, 'timeWindows[0].timeZone', 'PST'),
+        }}
+        onSubmit={this.addNewWindow}
+        render={(formik) => (
+          <>
+            <FormikFormField
+              name="days"
+              label="Define a New Window"
+              input={(props) => <ChecklistInput {...props} stringOptions={DAYS} />}
+            />
+            <FormikFormField
+              name="startHour"
+              label="Start"
+              input={(props) => (
+                <div>
+                  <NumberInput {...props} min={0} max={formik.values.endHour} />
+                  <HelpField expand={true} content="hour (0-24)" />
+                </div>
+              )}
+            />
+            <FormikFormField
+              name="endHour"
+              label="End"
+              input={(props) => (
+                <div>
+                  <NumberInput {...props} min={formik.values.startHour} max={23} />
+                  <HelpField expand={true} content="hour (0-24)" />
+                </div>
+              )}
+            />
+            <FormikFormField
+              name="timeZone"
+              label="Timezone"
+              input={(props) => <ReactSelectInput {...props} clearable={false} stringOptions={['PST', 'UTC']} />}
+            />
+            <div className="sp-formItem">
+              <div className="sp-formItem__left" />
+              <div className="sp-formItem__right sp-margin-l-bottom">
+                <button className="primary" type="submit" onClick={() => this.addNewWindow(formik.values)}>
+                  {' '}
+                  Add Window
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      />
+    );
+  };
+
+  public render() {
+    const { CurrentWindows, NewWindowComponent } = this;
+    const { isDisabled } = this.props;
+    return (
+      <>
+        <CurrentWindows />
+        {!isDisabled && <NewWindowComponent />}
+      </>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/index.ts

@@ -0,0 +1,4 @@
+export * from './ServerGroupBasicSettings';
+export * from './ServerGroupResources';
+export * from './ServerGroupParameters';
+export * from './disruptionBudget/JobDisruptionBudget';

package/src/serverGroup/details/TitusCapacityDetailsSection.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import type { Application } from '@spinnaker/core';
+import {
+  confirmNotManaged,
+  CurrentCapacity,
+  DesiredCapacity,
+  Overridable,
+  ReactModal,
+  showModal,
+} from '@spinnaker/core';
+
+import type { ITitusServerGroup } from '../../domain';
+import type { ITitusResizeServerGroupModalProps } from './resize/TitusResizeServerGroupModal';
+import { TitusResizeServerGroupModal } from './resize/TitusResizeServerGroupModal';
+import { TitusScalingActivitiesModal } from './scalingActivity/TitusScalingActivitiesModal';
+
+interface ICapacityDetailsSectionProps {
+  app: Application;
+  serverGroup: ITitusServerGroup;
+}
+
+@Overridable('titus.serverGroup.CapacityDetailsSection')
+export class TitusCapacityDetailsSection extends React.Component<ICapacityDetailsSectionProps> {
+  public render(): JSX.Element {
+    const { serverGroup, app: application } = this.props;
+    const { capacity } = serverGroup;
+    const current = serverGroup.instances.length;
+    const simpleMode = capacity.min === capacity.max;
+
+    const resizeServerGroup = () =>
+      confirmNotManaged(serverGroup, application).then((notManaged) => {
+        notManaged &&
+          ReactModal.show<ITitusResizeServerGroupModalProps>(TitusResizeServerGroupModal, { serverGroup, application });
+      });
+
+    return (
+      <>
+        <dl className="dl-horizontal dl-narrow">
+          <DesiredCapacity capacity={capacity} simpleMode={simpleMode} />
+          <CurrentCapacity currentCapacity={current} />
+          {serverGroup.capacityGroup && (
+            <>
+              <dt>Cap. Group</dt>
+              <dd>{serverGroup.capacityGroup}</dd>
+            </>
+          )}
+        </dl>
+
+        <div>
+          <a className="clickable" onClick={resizeServerGroup}>
+            Resize Server Group
+          </a>
+        </div>
+        <div>
+          <a
+            className="clickable"
+            onClick={() => showModal(TitusScalingActivitiesModal, { serverGroup }, { maxWidth: '1000px' })}
+          >
+            View Scaling Activities
+          </a>
+        </div>
+      </>
+    );
+  }
+}

package/src/serverGroup/details/TitusLaunchConfigSection.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { LabeledValue, LabeledValueList, Overridable } from '@spinnaker/core';
+import type { ITitusServerGroup } from '../../domain';
+
+interface ILaunchConfigSectionProps {
+  serverGroup: ITitusServerGroup;
+}
+
+@Overridable('titus.serverGroup.launchConfigSection')
+export class TitusLaunchConfigSection extends React.Component<ILaunchConfigSectionProps> {
+  public render() {
+    if (!this.props.serverGroup || !this.props.serverGroup.image) {
+      return null;
+    }
+
+    const {
+      serverGroup: { image, entryPoint, iamProfile, resources },
+    } = this.props;
+
+    return (
+      <LabeledValueList className="horizontal-when-filters-collapsed">
+        {image.dockerImageName && <LabeledValue label="Image Name" value={image.dockerImageName} />}
+        {image.dockerImageVersion && <LabeledValue label="Image Version" value={image.dockerImageVersion} />}
+        {entryPoint && <LabeledValue label="Entrypoint" value={entryPoint} />}
+        {iamProfile && <LabeledValue label="IAM Profile" value={iamProfile} />}
+        <LabeledValue label="CPU(s)" value={resources.cpu} />
+        <LabeledValue label="Memory" value={`${resources.memory} MB`} />
+        <LabeledValue label="Disk" value={`${resources.disk} MB`} />
+        <LabeledValue label="Network" value={`${resources.networkMbps} Mbps`} />
+        <LabeledValue label="GPU(s)" value={resources.gpu} />
+      </LabeledValueList>
+    );
+  }
+}

package/src/serverGroup/details/TitusPackageDetailsSection.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { CollapsibleSection, LabeledValue, LabeledValueList } from '@spinnaker/core';
+import type { ITitusBuildInfo } from '../../domain';
+
+export interface ITitusPackageDetailsSectionProps {
+  buildInfo: ITitusBuildInfo;
+}
+
+export const TitusPackageDetailsSection = ({ buildInfo }: ITitusPackageDetailsSectionProps) => {
+  const packageInfo = buildInfo.jenkins || {};
+  const hasPackageInfo = Boolean(Object.keys(packageInfo).length);
+
+  const { commitId, host, name, number, version } = packageInfo;
+  const jenkinsLink = `${host}job/${name}/${number}`;
+
+  return (
+    <CollapsibleSection heading="Package">
+      {!hasPackageInfo && <div>No package information available.</div>}
+      {hasPackageInfo && (
+        <LabeledValueList className="horizontal-when-filters-collapsed">
+          {name && <LabeledValue label="Job" value={name} />}
+          {buildInfo.docker?.image && <LabeledValue label="Image Name" value={buildInfo.docker?.image} />}
+          {number && <LabeledValue label="Build" value={number} />}
+          {commitId && <LabeledValue label="Commit" value={commitId.substring(0, 8)} />}
+          {version && <LabeledValue label="Version" value={version} />}
+          {host && (
+            <LabeledValue
+              label="Build Link"
+              value={
+                <a target="_blank" href={jenkinsLink}>
+                  {jenkinsLink}
+                </a>
+              }
+            />
+          )}
+        </LabeledValueList>
+      )}
+    </CollapsibleSection>
+  );
+};

package/src/serverGroup/details/TitusSecurityGroups.tsx

@@ -0,0 +1,107 @@
+import { UISref } from '@uirouter/react';
+import { UIRouterContextComponent } from '@uirouter/react-hybrid';
+import { sortBy } from 'lodash';
+import React from 'react';
+
+import type { Application, ISecurityGroup } from '@spinnaker/core';
+import { AccountService, CollapsibleSection, FirewallLabels, ReactInjector } from '@spinnaker/core';
+import type { ITitusServerGroupView } from '../../domain';
+import { TitusReactInjector } from '../../reactShims';
+
+export interface ITitusServerGroupDetailsSectionProps {
+  app: Application;
+  serverGroup: ITitusServerGroupView;
+}
+
+export interface ISecurityGroupsDetailsSectionState {
+  securityGroups?: ISecurityGroup[];
+}
+
+export class TitusSecurityGroupsDetailsSection extends React.Component<
+  ITitusServerGroupDetailsSectionProps,
+  ISecurityGroupsDetailsSectionState
+> {
+  constructor(props: ITitusServerGroupDetailsSectionProps) {
+    super(props);
+    this.state = {};
+  }
+
+  public componentDidMount() {
+    this.configureSecurityGroups(this.props);
+  }
+
+  private configureSecurityGroups(props: ITitusServerGroupDetailsSectionProps): void {
+    const { app, serverGroup } = props;
+    const { region } = serverGroup;
+    if (app.securityGroupsIndex && serverGroup.accountDetails) {
+      const securityGroups = serverGroup.securityGroups.map((sgId) =>
+        TitusReactInjector.titusSecurityGroupReader.resolveIndexedSecurityGroup(
+          app.securityGroupsIndex,
+          { account: serverGroup.accountDetails.awsAccount, region },
+          sgId,
+        ),
+      );
+      this.setState({ securityGroups });
+    } else {
+      AccountService.listAllAccounts('titus').then((accounts) => {
+        const titusAccount = accounts.find((a) => a.name === serverGroup.account);
+        if (titusAccount && titusAccount.awsAccount) {
+          ReactInjector.securityGroupReader.getAllSecurityGroups().then((allSecurityGroups) => {
+            const regionalGroups = allSecurityGroups[titusAccount.awsAccount]['aws'][region];
+            const securityGroups = serverGroup.securityGroups
+              .map((sgId) => regionalGroups.find((rg) => rg.id === sgId))
+              .filter((g) => g)
+              .map((sg) => ({
+                account: titusAccount.awsAccount,
+                name: sg.name,
+                id: sg.id,
+                vpcId: sg.vpcId,
+              }));
+            this.setState({ securityGroups });
+          });
+        }
+      });
+    }
+  }
+
+  public componentWillReceiveProps(nextProps: ITitusServerGroupDetailsSectionProps): void {
+    this.configureSecurityGroups(nextProps);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    const { securityGroups } = this.state;
+    // prevent a reflow of the details panel when the security groups actually load by rendering a placeholder
+    const initializing = !securityGroups && (serverGroup.securityGroups || []).length;
+
+    return (
+      <CollapsibleSection heading={FirewallLabels.get('Firewalls')} outerDivClassName="">
+        <ul>
+          {initializing && serverGroup.securityGroups.map((sgId) => <li key={sgId}>...</li>)}
+          <UIRouterContextComponent>
+            <>
+              {sortBy(securityGroups, 'name').map((securityGroup) => (
+                <li key={securityGroup.name}>
+                  <UISref
+                    to="^.firewallDetails"
+                    params={{
+                      name: securityGroup.name,
+                      accountId: securityGroup.account,
+                      region: serverGroup.region,
+                      vpcId: securityGroup.vpcId,
+                      provider: 'aws',
+                    }}
+                  >
+                    <a>
+                      {securityGroup.name} ({securityGroup.id})
+                    </a>
+                  </UISref>
+                </li>
+              ))}
+            </>
+          </UIRouterContextComponent>
+        </ul>
+      </CollapsibleSection>
+    );
+  }
+}

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

@@ -0,0 +1,12 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { TitusCapacityDetailsSection } from './TitusCapacityDetailsSection';
+
+export const TITUS_SERVERGROUP_DETAILS_CAPACITYDETAILSSECTION = 'titus.servergroup.details.capacitydetailssection';
+module(TITUS_SERVERGROUP_DETAILS_CAPACITYDETAILSSECTION, []).component(
+  'titusCapacityDetailsSection',
+  react2angular(withErrorBoundary(TitusCapacityDetailsSection, 'titusCapacityDetailsSection'), ['serverGroup', 'app']),
+);