@spinnaker/titus 0.0.0-2025.1-0

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

@@ -0,0 +1,339 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import { Field } from 'formik';
+import React from 'react';
+
+import { AWSProviderSettings, SubnetSelectField } from '@spinnaker/amazon';
+import type { Application, IServerGroup, IWizardPageComponent } from '@spinnaker/core';
+import {
+  AccountSelectInput,
+  AccountTag,
+  DeployingIntoManagedClusterWarning,
+  DeploymentStrategySelector,
+  HelpField,
+  NameUtils,
+  ReactInjector,
+  RegionSelectField,
+  ServerGroupDetailsField,
+  ServerGroupNamePreview,
+} from '@spinnaker/core';
+import { DockerImageAndTagSelector, DockerImageUtils } from '@spinnaker/docker';
+
+import type { ITitusServerGroupCommand } from '../../../configure/serverGroupConfiguration.service';
+import { TitusProviderSettings } from '../../../../titus.settings';
+
+const isNotExpressionLanguage = (field: string) => field && !field.includes('${');
+
+// Allow dot, underscore, and spel
+const isStackPattern = (stack: string) => (isNotExpressionLanguage(stack) ? /^([\w.]+|\${[^}]+})*$/.test(stack) : true);
+
+// Allow dot, underscore, caret, tilde, dash and spel
+const isDetailPattern = (detail: string) =>
+  isNotExpressionLanguage(detail) ? /^([\w.^~-]+|\${[^}]+})*$/.test(detail) : true;
+
+export interface IServerGroupBasicSettingsProps {
+  app: Application;
+  formik: FormikProps<ITitusServerGroupCommand>;
+}
+
+export interface IServerGroupBasicSettingsState {
+  namePreview: string;
+  createsNewCluster: boolean;
+  latestServerGroup: IServerGroup;
+}
+
+export class ServerGroupBasicSettings
+  extends React.Component<IServerGroupBasicSettingsProps, IServerGroupBasicSettingsState>
+  implements IWizardPageComponent<ITitusServerGroupCommand> {
+  constructor(props: IServerGroupBasicSettingsProps) {
+    super(props);
+
+    const { values, setFieldValue } = this.props.formik;
+    if (values.imageId && !values.imageId.includes('${')) {
+      const { digest, organization, repository, tag } = DockerImageUtils.splitImageId(values.imageId);
+      setFieldValue('digest', digest);
+      setFieldValue('organization', organization);
+      setFieldValue('repository', repository);
+      setFieldValue('tag', tag);
+    }
+
+    this.state = {
+      ...this.getStateFromProps(props),
+    };
+  }
+
+  private getStateFromProps(props: IServerGroupBasicSettingsProps) {
+    const { app } = props;
+    const { values } = props.formik;
+    const namePreview = NameUtils.getClusterName(app.name, values.stack, values.freeFormDetails);
+    const createsNewCluster = !app.clusters.find((c) => c.name === namePreview);
+
+    const inCluster = (app.serverGroups.data as IServerGroup[])
+      .filter((serverGroup) => {
+        return (
+          serverGroup.cluster === namePreview &&
+          serverGroup.account === values.credentials &&
+          serverGroup.region === values.region
+        );
+      })
+      .sort((a, b) => a.createdTime - b.createdTime);
+    const latestServerGroup = inCluster.length ? inCluster.pop() : null;
+
+    return { namePreview, createsNewCluster, latestServerGroup };
+  }
+
+  private accountUpdated = (account: string): void => {
+    const { setFieldValue, values } = this.props.formik;
+    values.credentials = account;
+    values.credentialsChanged(values);
+    setFieldValue('account', account);
+    setFieldValue('credentials', account);
+
+    const accountDetails = values.backingData.credentialsKeyedByAccount[account];
+
+    const newAttr = {
+      ...values.containerAttributes,
+      'titusParameter.agent.assignIPv6Address': accountDetails.environment === 'test' ? 'true' : 'false',
+    };
+    setFieldValue('containerAttributes', newAttr);
+  };
+
+  private regionUpdated = (region: string): void => {
+    const { values, setFieldValue } = this.props.formik;
+    values.region = region;
+    values.regionChanged(values);
+    setFieldValue('region', region);
+  };
+
+  public validate(values: ITitusServerGroupCommand) {
+    const errors: FormikErrors<ITitusServerGroupCommand> = {};
+
+    if (!isStackPattern(values.stack)) {
+      errors.stack = 'Only dot(.) and underscore(_) special characters are allowed in the Stack field.';
+    }
+
+    if (!isDetailPattern(values.freeFormDetails)) {
+      errors.freeFormDetails =
+        'Only dot(.), underscore(_), caret (^), tilde (~), and dash(-) special characters are allowed in the Detail field.';
+    }
+
+    if (!values.viewState.disableImageSelection) {
+      if (!values.imageId) {
+        errors.imageId = 'Image is required.';
+      }
+    }
+
+    // this error is added exclusively to disable the "create/clone" button - it is not visible aside from the warning
+    // rendered by the DeployingIntoManagedClusterWarning component
+    if (values.resourceSummary) {
+      errors.resourceSummary = { id: 'Cluster is managed' };
+    }
+
+    return errors;
+  }
+
+  private navigateToLatestServerGroup = () => {
+    const { values } = this.props.formik;
+    const { latestServerGroup } = this.state;
+
+    const params = {
+      provider: values.selectedProvider,
+      accountId: latestServerGroup.account,
+      region: latestServerGroup.region,
+      serverGroup: latestServerGroup.name,
+    };
+
+    const { $state } = ReactInjector;
+    if ($state.is('home.applications.application.insight.clusters')) {
+      $state.go('.serverGroup', params);
+    } else {
+      $state.go('^.serverGroup', params);
+    }
+  };
+
+  private stackChanged = (stack: string) => {
+    const { formik } = this.props;
+    formik.setFieldValue('stack', stack);
+    formik.values.clusterChanged(formik.values);
+  };
+
+  public componentWillReceiveProps(nextProps: IServerGroupBasicSettingsProps) {
+    this.setState(this.getStateFromProps(nextProps));
+  }
+
+  private strategyChanged = (values: ITitusServerGroupCommand, strategy: any) => {
+    values.onStrategyChange(values, strategy);
+    this.props.formik.setFieldValue('strategy', strategy.key);
+  };
+
+  private dockerValuesChanged = (dockerValues: any) => {
+    Object.keys(dockerValues).forEach((key) => {
+      this.props.formik.setFieldValue(key, dockerValues[key]);
+    });
+  };
+
+  private onStrategyFieldChange = (key: string, value: any) => {
+    this.props.formik.setFieldValue(key, value);
+  };
+
+  private onSubnetChange = () => {
+    const { setFieldValue, values } = this.props.formik;
+    values.subnetChanged(values);
+    setFieldValue('subnetType', values.subnetType);
+  };
+
+  public render() {
+    const { app, formik } = this.props;
+    const { errors, setFieldValue, values } = formik;
+    const { createsNewCluster, latestServerGroup, namePreview } = this.state;
+
+    const accounts = values.backingData.accounts;
+    const readOnlyFields = values.viewState.readOnlyFields || {};
+
+    const customImage = values.imageId && values.imageId !== '${trigger.properties.imageName}';
+
+    const defaultSubnetTypes = []
+      .concat(TitusProviderSettings.defaults?.subnetType)
+      .concat(AWSProviderSettings.defaults?.subnetType)
+      .filter((x) => !!x);
+
+    return (
+      <div className="container-fluid form-horizontal">
+        <DeployingIntoManagedClusterWarning app={app} formik={formik} />
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Account</div>
+          <div className="col-md-7">
+            <AccountSelectInput
+              value={values.credentials}
+              onChange={(evt: any) => this.accountUpdated(evt.target.value)}
+              readOnly={readOnlyFields.credentials}
+              accounts={accounts}
+              provider="titus"
+            />
+            {values.credentials !== undefined && (
+              <div className="small">
+                Uses resources from the Amazon account{' '}
+                <AccountTag
+                  account={
+                    values.backingData.credentialsKeyedByAccount[values.credentials] &&
+                    values.backingData.credentialsKeyedByAccount[values.credentials].awsAccount
+                  }
+                />
+              </div>
+            )}
+          </div>
+        </div>
+        <RegionSelectField
+          readOnly={readOnlyFields.region}
+          labelColumns={3}
+          component={values}
+          field="region"
+          account={values.credentials}
+          regions={values.backingData.filtered.regions}
+          onChange={this.regionUpdated}
+        />
+        <SubnetSelectField
+          application={app}
+          component={values}
+          field="subnetType"
+          helpKey="titus.serverGroup.subnet"
+          labelColumns={3}
+          onChange={this.onSubnetChange}
+          region={values.region}
+          subnets={values.backingData.filtered.subnetPurposes}
+          defaultSubnetTypes={defaultSubnetTypes}
+          recommendedSubnetTypes={TitusProviderSettings.serverGroups?.recommendedSubnets}
+          showSubnetWarning={true}
+        />
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            Stack <HelpField id="aws.serverGroup.stack" />
+          </div>
+          <div className="col-md-7">
+            <input
+              type="text"
+              className="form-control input-sm no-spel"
+              value={values.stack || ''}
+              onChange={(e) => this.stackChanged(e.target.value)}
+            />
+          </div>
+        </div>
+        {errors.stack && (
+          <div className="form-group row slide-in">
+            <div className="col-sm-9 col-sm-offset-2 error-message">
+              <span>{errors.stack}</span>
+            </div>
+          </div>
+        )}
+
+        <ServerGroupDetailsField app={app} formik={formik} />
+
+        {!values.viewState.disableImageSelection && (
+          <DockerImageAndTagSelector
+            specifyTagByRegex={false}
+            account={values.credentials}
+            digest={values.digest}
+            imageId={values.imageId}
+            organization={values.organization}
+            registry={values.registry}
+            repository={values.repository}
+            tag={values.tag}
+            showRegistry={false}
+            deferInitialization={values.deferredInitialization}
+            onChange={this.dockerValuesChanged}
+          />
+        )}
+        {values.viewState.disableImageSelection && customImage && (
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">
+              <b>Image</b> <HelpField id="titus.deploy.imageId" />
+            </div>
+            <div className="col-md-7 sp-padding-xs-yaxis">{values.imageId}</div>
+          </div>
+        )}
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Entrypoint</b>
+          </div>
+          <div className="col-md-7">
+            <Field type="text" className="form-control input-sm no-spel" name="entryPoint" />
+          </div>
+        </div>
+
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            Traffic <HelpField id="titus.serverGroup.traffic" />
+          </div>
+          <div className="col-md-7">
+            <div className="checkbox">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={values.inService}
+                  onChange={(e) => setFieldValue('inService', e.target.checked)}
+                  disabled={values.strategy !== '' && values.strategy !== 'custom'}
+                />{' '}
+                Send client requests to new instances
+              </label>
+            </div>
+          </div>
+        </div>
+        {!values.viewState.disableStrategySelection && values.selectedProvider && (
+          <DeploymentStrategySelector
+            command={values}
+            onFieldChange={this.onStrategyFieldChange}
+            onStrategyChange={this.strategyChanged}
+          />
+        )}
+        {!values.viewState.hideClusterNamePreview && (
+          <ServerGroupNamePreview
+            createsNewCluster={createsNewCluster}
+            latestServerGroupName={latestServerGroup?.name}
+            mode={values.viewState.mode}
+            namePreview={namePreview}
+            navigateToLatestServerGroup={this.navigateToLatestServerGroup}
+          />
+        )}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,5 @@
+.ServerGroupParameters {
+  .StandardFieldLayout_Label {
+    min-width: 160px;
+  }
+}

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

@@ -0,0 +1,217 @@
+import type { FormikProps } from 'formik';
+import { intersection, set, union } from 'lodash';
+import React from 'react';
+
+import type { Application, IFormInputProps, IWizardPageComponent } from '@spinnaker/core';
+import {
+  AccountTag,
+  CheckboxInput,
+  ChecklistInput,
+  FormikFormField,
+  FormValidator,
+  HelpField,
+  LayoutProvider,
+  MapEditorInput,
+  PlatformHealthOverrideInput,
+  robotToHuman,
+  SelectInput,
+  TextInput,
+  useFormInputValueMapper,
+} from '@spinnaker/core';
+
+import { TitusMapLayout } from './TitusMapLayout';
+import type { ITitusServerGroupCommand } from '../../../configure/serverGroupConfiguration.service';
+import { processesList } from '../../../details/serviceJobProcesses/ServiceJobProcesses';
+
+import './ServerGroupParameters.less';
+
+export interface IServerGroupParametersProps {
+  app: Application;
+  formik: FormikProps<ITitusServerGroupCommand>;
+}
+
+const migrationPolicyOptions = [
+  { label: 'System Default', value: 'systemDefault' },
+  { label: 'Self Managed', value: 'selfManaged' },
+];
+
+function ServiceJobProcessesInput(props: IFormInputProps) {
+  const allProcesses = union(processesList, Object.keys(props.value));
+  // Map to a list of strings (formik -> input)
+  const mapToInputValue = (value: Record<string, boolean>) =>
+    Object.entries(value)
+      .filter(([_key, val]) => val === true)
+      .map(([key, _val]) => key);
+
+  // Map to an Object, but include all known processes (input -> formik)
+  const mapFromInputValue = (value: string[]): Record<string, boolean> =>
+    allProcesses.reduce((acc, process) => {
+      acc[process] = value.includes(process);
+      return acc;
+    }, {} as Record<string, boolean>);
+
+  const mappedProps = useFormInputValueMapper(props, mapToInputValue, mapFromInputValue);
+
+  const options = allProcesses.map((process) => {
+    return { label: robotToHuman(process), value: process };
+  });
+
+  return <ChecklistInput {...mappedProps} options={options} />;
+}
+
+export function IPv6CheckboxInput(props: IFormInputProps) {
+  const mappedProps = useFormInputValueMapper(
+    props,
+    (val: string) => val === 'true', // formik -> checkbox
+    (_val, e) => (e.target.checked ? 'true' : 'false'), // checkbox -> formik
+  );
+  return <CheckboxInput {...mappedProps} />;
+}
+
+const IamInstanceProfileInput = (props: IFormInputProps & { awsAccount: string; setDefaultIamProfile: () => void }) => {
+  const { awsAccount, setDefaultIamProfile, ...inputProps } = props;
+  return (
+    <div className="flex-container-h baseline margin-between-md">
+      <TextInput {...inputProps} />
+      {props.value ? (
+        <>
+          <span>in</span>
+          <AccountTag account={awsAccount} />
+        </>
+      ) : (
+        <button className="link" style={{ whiteSpace: 'nowrap' }} onClick={setDefaultIamProfile}>
+          Apply default value
+        </button>
+      )}
+    </div>
+  );
+};
+
+export class ServerGroupParameters
+  extends React.Component<IServerGroupParametersProps>
+  implements IWizardPageComponent<ITitusServerGroupCommand> {
+  constructor(props: IServerGroupParametersProps) {
+    super(props);
+  }
+
+  public validate(_values: ITitusServerGroupCommand) {
+    const validator = new FormValidator(_values);
+    validator.field('iamProfile', 'IAM Instance Profile').required();
+
+    const errors = validator.validateForm();
+
+    const duplicates = intersection(Object.keys(_values.constraints.soft), Object.keys(_values.constraints.hard));
+    duplicates.forEach((key) => {
+      set(errors, `constraints.soft.${key}`, `Constraint '${key}' must be either soft or hard, not both.`);
+      set(errors, `constraints.hard.${key}`, `Constraint '${key}' must be either soft or hard, not both.`);
+    });
+
+    Object.keys(_values.env || {})
+      .filter((key) => !key.startsWith('__MapEditorDuplicateKey'))
+      .forEach((key) => {
+        if (!key.match(/^[A-Za-z_].*/)) {
+          set(errors, `env.${key}`, 'Environment variable names must start with a letter or underscore');
+        } else if (!key.match(/[A-Za-z_][a-zA-Z0-9_]*$/)) {
+          set(errors, `env.${key}`, 'Environment variable names must contain only letter, numbers, or underscores');
+        }
+      });
+
+    return errors;
+  }
+
+  public render() {
+    const { app } = this.props;
+    const { setFieldValue, values } = this.props.formik;
+
+    const setDefaultIamProfile = () => setFieldValue('iamProfile', values.viewState.defaultIamProfile);
+    return (
+      <div className="ServerGroupParameters">
+        <FormikFormField
+          name="iamProfile"
+          label="IAM Instance Profile"
+          help={<HelpField id="titus.deploy.iamProfile" />}
+          input={(props) => (
+            <IamInstanceProfileInput
+              {...props}
+              awsAccount={values.backingData.credentialsKeyedByAccount[values.credentials]?.awsAccount}
+              setDefaultIamProfile={setDefaultIamProfile}
+            />
+          )}
+        />
+
+        <FormikFormField
+          name="capacityGroup"
+          label="Capacity Group"
+          help={<HelpField id="titus.deploy.capacityGroup" />}
+          input={(props) => <TextInput {...props} />}
+        />
+
+        <FormikFormField
+          name="migrationPolicy.type"
+          label="Migration Policy"
+          help={<HelpField id="titus.deploy.migrationPolicy" />}
+          input={(props) => <SelectInput options={migrationPolicyOptions} {...props} />}
+        />
+
+        <FormikFormField
+          name="serviceJobProcesses"
+          label="Service Job Processes"
+          input={(props) => <ServiceJobProcessesInput {...props} />}
+        />
+
+        <FormikFormField
+          name="containerAttributes['titusParameter.agent.assignIPv6Address']"
+          label="Associate IPv6 Address (Recommended)"
+          help={<HelpField id="serverGroup.ipv6" />}
+          input={(props) => <IPv6CheckboxInput {...props} />}
+        />
+
+        <hr />
+
+        <LayoutProvider value={TitusMapLayout}>
+          <FormikFormField
+            name="constraints.soft"
+            label="Soft Constraints "
+            help={<HelpField id="titus.deploy.softConstraints" />}
+            input={(props) => <MapEditorInput allowEmptyValues={true} {...props} />}
+          />
+
+          <FormikFormField
+            name="constraints.hard"
+            label="Hard Constraints"
+            help={<HelpField id="titus.deploy.hardConstraints" />}
+            input={(props) => <MapEditorInput allowEmptyValues={true} {...props} />}
+          />
+
+          <hr />
+
+          <FormikFormField
+            name="labels"
+            label="Job Attributes"
+            input={(props) => <MapEditorInput allowEmptyValues={true} {...props} />}
+          />
+
+          <FormikFormField
+            name="containerAttributes"
+            label="Container Attributes"
+            input={(props) => <MapEditorInput allowEmptyValues={true} {...props} />}
+          />
+
+          <FormikFormField
+            name="env"
+            label="Environment Variables"
+            input={(props) => <MapEditorInput allowEmptyValues={true} {...props} />}
+          />
+        </LayoutProvider>
+
+        {app.attributes.platformHealthOnlyShowOverride && (
+          <FormikFormField
+            name="interestingHealthProviderNames"
+            label="Task Completion"
+            input={(props) => <PlatformHealthOverrideInput {...props} platformHealthType="Titus" />}
+          />
+        )}
+      </div>
+    );
+  }
+}