@spinnaker/amazon 0.0.0-main-2

package/src/serverGroup/details/scalingPolicy/upsert/UpsertScalingPolicyModal.tsx

@@ -0,0 +1,213 @@
+import { cloneDeep } from 'lodash';
+import * as React from 'react';
+
+import type { Application, IModalComponentProps } from '@spinnaker/core';
+import { TaskMonitorModal } from '@spinnaker/core';
+
+import { ScalingPolicyAdditionalSettings } from './ScalingPolicyAdditionalSettings';
+import { ScalingPolicyCommandBuilder } from './ScalingPolicyCommandBuilderService';
+import type { IStepPolicyDescription, IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import { AlarmConfigurer } from './alarm/AlarmConfigurer';
+import type { IAmazonServerGroup, IScalingPolicy, IStepAdjustment, ITargetTrackingPolicy } from '../../../../domain';
+import { SimplePolicyAction } from './simple/SimplePolicyAction';
+import type { AdjustmentTypeView, Operator } from './step/StepPolicyAction';
+import { StepPolicyAction } from './step/StepPolicyAction';
+
+export interface IUpsertScalingPolicyModalProps extends IModalComponentProps {
+  app: Application;
+  policy: IScalingPolicy;
+  serverGroup: IAmazonServerGroup;
+}
+
+export const UpsertScalingPolicyModal = ({
+  app,
+  closeModal,
+  dismissModal,
+  policy,
+  serverGroup,
+}: IUpsertScalingPolicyModalProps) => {
+  const modalProps = { closeModal, dismissModal };
+  const [command, setCommand] = React.useState<IUpsertScalingPolicyCommand>({} as IUpsertScalingPolicyCommand);
+  React.useEffect(() => {
+    const baseCommand = ScalingPolicyCommandBuilder.buildNewCommand(
+      'Step',
+      serverGroup,
+      policy as ITargetTrackingPolicy,
+    );
+    setCommand(baseCommand);
+  }, []);
+
+  const adjustmentBasis = policy.stepAdjustments?.length
+    ? policy.stepAdjustments[0].scalingAdjustment
+    : policy.scalingAdjustment;
+  const [action, setAction] = React.useState<Operator>(
+    command.adjustmentType === 'ExactCapacity' ? 'Set to' : adjustmentBasis > 0 ? 'Add' : 'Remove',
+  );
+  const adjustmentTypeView =
+    command.adjustmentType === 'ExactCapacity' || command.adjustmentType === 'ChangeInCapacity'
+      ? 'instances'
+      : 'percent of group';
+
+  const isStep = command.step;
+  const mode = !policy.policyARN ? 'Create' : 'Edit';
+  const comparatorBound = command?.alarm?.comparisonOperator?.indexOf('Greater') === 0 ? 'max' : 'min';
+
+  const boundsChanged = (step: IStepPolicyDescription) => {
+    const source = comparatorBound === 'min' ? 'metricIntervalLowerBound' : 'metricIntervalUpperBound';
+    const target = source === 'metricIntervalLowerBound' ? 'metricIntervalUpperBound' : 'metricIntervalLowerBound';
+
+    const adjustments = step.stepAdjustments;
+    (adjustments || []).forEach((a, index) => {
+      if (adjustments.length > index + 1) {
+        adjustments[index + 1][target] = a[source];
+      }
+    });
+    // Remove the source boundary from the last step
+    delete adjustments[adjustments.length - 1][source];
+  };
+
+  const scalingAdjustmentChanged = (adjustment: number) => {
+    const newCommand = cloneDeep(command);
+    newCommand.simplescalingAdjustment = adjustment;
+    setCommand(newCommand);
+  };
+
+  const stepsChanged = (newSteps: IStepAdjustment[]) => {
+    const newCommand = cloneDeep(command);
+    newCommand.step.stepAdjustments = newSteps;
+    boundsChanged(newCommand.step);
+    setCommand(newCommand);
+  };
+
+  const adjustmentTypeChanged = (action: Operator, type: AdjustmentTypeView) => {
+    setAction(action);
+
+    const newType =
+      type !== 'instances' ? 'PercentChangeInCapacity' : action === 'Set to' ? 'ExactCapacity' : 'ChangeInCapacity';
+    setCommand({
+      ...command,
+      adjustmentType: newType,
+    });
+  };
+
+  const toggleMode = () => {
+    const updatedCommand = cloneDeep(command);
+    const cooldownOrWarmup = command.step ? command.step.estimatedInstanceWarmup : command.simple.cooldown;
+
+    if (command.step) {
+      delete updatedCommand.step;
+      updatedCommand.simple = ScalingPolicyCommandBuilder.buildSimplePolicy({
+        cooldown: cooldownOrWarmup,
+      } as IScalingPolicy);
+    } else {
+      const stepAdjustments = [
+        {
+          scalingAdjustment: command.simple.scalingAdjustment,
+        },
+      ] as IStepAdjustment[];
+      if (comparatorBound === 'min') {
+        stepAdjustments[0].metricIntervalUpperBound = 0;
+      } else {
+        stepAdjustments[0].metricIntervalLowerBound = 0;
+      }
+      const stepPolicy = {
+        estimatedInstanceWarmup: cooldownOrWarmup,
+        stepAdjustments: stepAdjustments,
+      };
+      delete updatedCommand.simple;
+      updatedCommand.step = ScalingPolicyCommandBuilder.buildStepPolicy(
+        stepPolicy as IScalingPolicy,
+        updatedCommand.alarm.threshold,
+        cooldownOrWarmup,
+      );
+
+      boundsChanged(updatedCommand.step);
+    }
+
+    setCommand(updatedCommand);
+  };
+
+  return (
+    <TaskMonitorModal<IUpsertScalingPolicyCommand>
+      {...modalProps}
+      title={`${mode} scaling policy`}
+      application={app}
+      description={`${mode} scaling policy for ${serverGroup.name}`}
+      initialValues={command}
+      mapValuesToTask={() => {
+        const preppedValues = ScalingPolicyCommandBuilder.prepareCommandForUpsert(command, action === 'Remove');
+        return {
+          application: app,
+          job: [
+            {
+              type: preppedValues.type || 'upsertScalingPolicy',
+              ...preppedValues,
+            },
+          ],
+        };
+      }}
+      render={() => (
+        <div>
+          <h4 className="section-heading">Conditions</h4>
+          <div className="section-body">
+            <AlarmConfigurer
+              alarm={command.alarm}
+              multipleAlarms={Boolean(policy?.alarms?.length > 1)}
+              serverGroup={serverGroup}
+              stepAdjustments={command.step.stepAdjustments}
+              stepsChanged={stepsChanged}
+              updateAlarm={(alarm) => setCommand({ ...command, alarm } as IUpsertScalingPolicyCommand)}
+            />
+          </div>
+          <h4 className="section-heading">Actions</h4>
+          <div className="section-body">
+            {!command.alarm?.metricName && <h4 className="text-center">Select a metric</h4>}
+            {command.alarm?.metricName && !isStep && (
+              <div>
+                <div className="row">
+                  <div className="col-md-10 col-md-offset-1">
+                    <p>
+                      This is a simple scaling policy. To declare different actions based on the magnitude of the alarm,
+                      <b>
+                        switch to a
+                        <a className="clickable sp-margin-xs-l" onClick={toggleMode}>
+                          step policy
+                        </a>
+                        .
+                      </b>
+                    </p>
+                  </div>
+                </div>
+                <SimplePolicyAction
+                  adjustmentType={adjustmentTypeView}
+                  adjustmentTypeChanged={adjustmentTypeChanged}
+                  operator={action}
+                  scalingAdjustment={command.simple?.scalingAdjustment}
+                  updateScalingAdjustment={scalingAdjustmentChanged}
+                />
+              </div>
+            )}
+            {command.alarm?.metricName && isStep && (
+              <StepPolicyAction
+                adjustmentType={adjustmentTypeView}
+                adjustmentTypeChanged={adjustmentTypeChanged}
+                alarm={command.alarm}
+                isMin={comparatorBound === 'min'}
+                operator={action}
+                step={command.step}
+                stepsChanged={stepsChanged}
+              />
+            )}
+          </div>
+          <ScalingPolicyAdditionalSettings
+            command={command}
+            isInstanceType={adjustmentTypeView === 'instances'}
+            isNew={Boolean(!policy.policyARN)}
+            operator={action}
+            updateCommand={setCommand}
+          />
+        </div>
+      )}
+    />
+  );
+};

package/src/serverGroup/details/scalingPolicy/upsert/alarm/AlarmConfigurer.less

@@ -0,0 +1,19 @@
+.AlarmConfigurer {
+  font-size: 12px;
+  margin: 0px;
+  .configurer-field-lg {
+    width: 90px;
+  }
+
+  .configurer-field-small {
+    width: 32px;
+  }
+
+  .configurer-field-med {
+    width: 60px;
+  }
+
+  .number-input-field {
+    margin: 0px;
+  }
+}

package/src/serverGroup/details/scalingPolicy/upsert/alarm/AlarmConfigurer.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+
+import type { ICloudMetricStatistics } from '@spinnaker/core';
+import { NumberInput, ReactSelectInput, usePrevious } from '@spinnaker/core';
+
+import { MetricSelector } from './MetricSelector';
+import { MetricAlarmChart } from '../../chart/MetricAlarmChart';
+import type { IAmazonServerGroup, IScalingPolicyAlarm, IStepAdjustment } from '../../../../../domain';
+
+import './AlarmConfigurer.less';
+
+export interface IAlarmConfigurerProps {
+  alarm: IScalingPolicyAlarm;
+  multipleAlarms: boolean;
+  serverGroup: IAmazonServerGroup;
+  stepAdjustments: IStepAdjustment[];
+  stepsChanged: (steps: IStepAdjustment[]) => void;
+  updateAlarm: (alarm: IScalingPolicyAlarm) => void;
+}
+
+const STATISTICS = ['Average', 'Maximum', 'Minimum', 'SampleCount', 'Sum'];
+
+export const COMPARATORS = [
+  { label: '>=', value: 'GreaterThanOrEqualToThreshold' },
+  { label: '>', value: 'GreaterThanThreshold' },
+  { label: '<=', value: 'LessThanOrEqualToThreshold' },
+  { label: '<', value: 'LessThanThreshold' },
+];
+
+const PERIODS = [
+  { label: '1 minute', value: 60 },
+  { label: '5 minutes', value: 60 * 5 },
+  { label: '15 minutes', value: 60 * 15 },
+  { label: '1 hour', value: 60 * 60 },
+  { label: '4 hours', value: 60 * 60 * 4 },
+  { label: '1 day', value: 60 * 60 * 24 },
+];
+
+export const AlarmConfigurer = ({
+  alarm,
+  multipleAlarms,
+  serverGroup,
+  stepAdjustments,
+  stepsChanged,
+  updateAlarm,
+}: IAlarmConfigurerProps) => {
+  const comparatorBound = alarm.comparisonOperator?.indexOf('Greater') === 0 ? 'max' : 'min';
+  const [unit, setUnit] = React.useState<string>(alarm?.unit);
+  const prevComparator = usePrevious(comparatorBound);
+
+  React.useEffect(() => {
+    if (stepAdjustments && prevComparator !== undefined) {
+      const source = comparatorBound === 'max' ? 'metricIntervalLowerBound' : 'metricIntervalUpperBound';
+      const newStep: IStepAdjustment = {
+        scalingAdjustment: 1,
+        [source]: alarm.threshold,
+      };
+      stepsChanged([newStep]);
+    }
+  }, [comparatorBound]);
+
+  React.useEffect(() => {
+    const source = comparatorBound === 'max' ? 'metricIntervalLowerBound' : 'metricIntervalUpperBound';
+    if (stepAdjustments?.length) {
+      const updatedStepAdjustments = [...stepAdjustments];
+      // Always set the first step at the alarm threshold
+      updatedStepAdjustments[0][source] = alarm.threshold;
+      stepsChanged(updatedStepAdjustments);
+    }
+  }, [alarm.threshold]);
+
+  const onChartLoaded = (stats: ICloudMetricStatistics) => setUnit(stats.unit);
+
+  const onAlarmChange = (key: string, value: any) => {
+    const newAlarm = {
+      ...alarm,
+      [key]: value,
+    };
+    updateAlarm(newAlarm);
+  };
+
+  const onMetricChange = (newAlarm: IScalingPolicyAlarm) => {
+    updateAlarm(newAlarm);
+  };
+
+  return (
+    <div className="AlarmConfigurer">
+      {multipleAlarms && (
+        <div className="row">
+          <div className="col-md-12">
+            <div className="alert alert-warning">
+              <p>
+                <i className="fa fa-exclamation-triangle"></i> This scaling policy is configured with multiple alarms.
+                You are only editing the first alarm.
+              </p>
+              <p>To edit or remove the additional alarms, you will need to use the AWS console.</p>
+            </div>
+          </div>
+        </div>
+      )}
+      {alarm.alarmActionArns?.length > 1 && (
+        <div className="row">
+          <div className="col-md-12">
+            <div className="alert alert-warning">
+              <p>
+                <i className="fa fa-exclamation-triangle"></i> This alarm is used in multiple scaling policies. Any
+                changes here will affect those other scaling policies.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="row sp-margin-s-yaxis">
+        <div className="col-md-2 sm-label-right">Whenever</div>
+        <div className="col-md-10 horizontal">
+          <ReactSelectInput
+            value={alarm.statistic}
+            onChange={(e) => onAlarmChange('statistic', e.target.value)}
+            stringOptions={STATISTICS}
+            clearable={false}
+            inputClassName="sp-margin-xs-right configurer-field-lg"
+          />
+          <span className="input-label sp-margin-xs-right sp-margin-s-top"> of </span>
+          <MetricSelector alarm={alarm} serverGroup={serverGroup} updateAlarm={onMetricChange} />
+        </div>
+      </div>
+      <div className="row sp-margin-s-yaxis">
+        <div className="col-md-2 sm-label-right">is</div>
+        <div className="col-md-10 horizontal middle">
+          <ReactSelectInput
+            value={alarm.comparisonOperator}
+            onChange={(e) => onAlarmChange('comparisonOperator', e.target.value)}
+            options={COMPARATORS}
+            clearable={false}
+            inputClassName="sp-margin-s-right configurer-field-small"
+          />
+          <div className="sp-margin-xl-left">
+            <NumberInput
+              value={alarm.threshold}
+              onChange={(e) => onAlarmChange('threshold', Number.parseInt(e.target.value))}
+              inputClassName="sp-margin-xs-right configurer-field-lg"
+            />
+          </div>
+          <span className="input-label">{unit}</span>
+        </div>
+      </div>
+      <div className="row sp-margin-s-yaxis">
+        <div className="col-md-2 sm-label-right">for at least</div>
+        <div className="col-md-10 horizontal middle">
+          <NumberInput
+            value={alarm.evaluationPeriods}
+            onChange={(e) => onAlarmChange('evaluationPeriods', Number.parseInt(e.target.value))}
+            inputClassName="configurer-field-med number-input-field"
+          />
+          <span className="input-label sp-margin-s-xaxis"> consecutive period(s) of </span>
+          <ReactSelectInput
+            value={alarm.period}
+            onChange={(e) => onAlarmChange('period', e.target.value)}
+            options={PERIODS}
+            clearable={false}
+            inputClassName="sp-margin-xs-right configurer-field-lg"
+          />
+        </div>
+      </div>
+      <div className="row sp-margin-s-yaxis">
+        <div className="col-md-10 col-md-offset-1">
+          {alarm && (
+            <div>
+              <MetricAlarmChart alarm={alarm} serverGroup={serverGroup} onChartLoaded={onChartLoaded} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/serverGroup/details/scalingPolicy/upsert/alarm/DimensionsEditor.tsx

@@ -0,0 +1,89 @@
+import { flatMap, uniq } from 'lodash';
+import * as React from 'react';
+import type { Subject } from 'rxjs';
+
+import type { IMetricAlarmDimension, IServerGroup } from '@spinnaker/core';
+import { CloudMetricsReader, ReactSelectInput, TextInput, useData } from '@spinnaker/core';
+
+import type { IScalingPolicyAlarmView } from '../../../../../domain';
+
+import './dimensionsEditor.less';
+
+export interface IDimensionsEditorProps {
+  alarm: IScalingPolicyAlarmView;
+  namespaceUpdated?: Subject<void>;
+  serverGroup: IServerGroup;
+  updateAvailableMetrics: (dimensions: IMetricAlarmDimension[]) => void;
+}
+
+export const DimensionsEditor = ({ alarm, serverGroup, updateAvailableMetrics }: IDimensionsEditorProps) => {
+  const dimensions = alarm.dimensions || [];
+
+  const fetchDimensions = () => {
+    return CloudMetricsReader.listMetrics('aws', serverGroup.account, serverGroup.region, {
+      namespace: alarm.namespace,
+    })
+      .then((results) => {
+        const allDimensions = flatMap(results, (r) => r.dimensions);
+        const sortedDimensions = uniq(allDimensions.filter((d) => d).map((d) => d.name)).sort();
+        return sortedDimensions;
+      })
+      .catch(() => {
+        return [];
+      });
+  };
+  const { result: dimensionOptions } = useData(fetchDimensions, [], [alarm.namespace, serverGroup.name]);
+
+  const addDimension = () => {
+    const newDimensions = [...dimensions, {} as IMetricAlarmDimension];
+    updateAvailableMetrics(newDimensions);
+  };
+  const removeDimension = (index: number) => {
+    const newDimensions = alarm.dimensions.filter((_d, i) => i !== index);
+    updateAvailableMetrics(newDimensions);
+  };
+  const updateDimension = (key: 'name' | 'value', value: string, index: number) => {
+    const newDimensions = [...dimensions];
+    const updatedDimension = newDimensions[index];
+    updatedDimension[key] = value;
+    updateAvailableMetrics(newDimensions);
+  };
+  return (
+    <div>
+      <div className="row">
+        <div className="col-md-12 small">
+          <h5>Dimensions</h5>
+        </div>
+      </div>
+      {dimensions.map((dimension, i) => (
+        <div key={`dimension-${i}`} className="row dimensions-row horizontal middle">
+          <div className="col-md-6">
+            <ReactSelectInput
+              onChange={(e) => updateDimension('name', e.target.value, i)}
+              value={dimension.name}
+              stringOptions={dimensionOptions}
+            />
+          </div>
+          <TextInput onChange={(e) => updateDimension('value', e.target.value, i)} value={dimension.value} />
+          {!alarm.disableEditingDimensions && (
+            <div className="col-md-1" onClick={() => removeDimension(i)}>
+              <a>
+                <i className="glyphicon glyphicon-trash clickable" />
+              </a>
+            </div>
+          )}
+        </div>
+      ))}
+      {!alarm.disableEditingDimensions && (
+        <div className="row">
+          <div>
+            <button type="button" className="btn btn-block btn-xs add-new" onClick={addDimension}>
+              <span className="glyphicon glyphicon-plus-sign sp-margin-xs-left"></span>
+              Add dimension
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/serverGroup/details/scalingPolicy/upsert/alarm/MetricSelector.less

@@ -0,0 +1,15 @@
+.MetricSelector {
+  font-size: 12px;
+
+  .simple-input {
+    width: 216px;
+  }
+
+  .advanced-input-namespace {
+    width: 138px;
+  }
+
+  .advanced-input-metric {
+    width: 300px;
+  }
+}

package/src/serverGroup/details/scalingPolicy/upsert/alarm/MetricSelector.tsx

@@ -0,0 +1,170 @@
+import type { Dictionary } from 'lodash';
+import * as React from 'react';
+
+import type { ICloudMetricDescriptor, IMetricAlarmDimension } from '@spinnaker/core';
+import { CloudMetricsReader, HelpField, ReactSelectInput, useData } from '@spinnaker/core';
+
+import { DimensionsEditor } from './DimensionsEditor';
+import { AWSProviderSettings } from '../../../../../aws.settings';
+import type { IAmazonServerGroup, IScalingPolicyAlarmView } from '../../../../../domain';
+import { NAMESPACES } from './namespaces';
+
+import './MetricSelector.less';
+
+export interface IMetricOption extends ICloudMetricDescriptor {
+  label: string;
+  dimensionValues: string;
+  value: ICloudMetricDescriptor;
+}
+
+export interface IMetricSelectorProps {
+  alarm: IScalingPolicyAlarmView;
+  serverGroup: IAmazonServerGroup;
+  updateAlarm: (alarm: IScalingPolicyAlarmView) => void;
+}
+
+export const MetricSelector = ({ alarm, updateAlarm, serverGroup }: IMetricSelectorProps) => {
+  const namespaces = (AWSProviderSettings?.metrics?.customNamespaces || []).concat(NAMESPACES);
+  const [advancedMode, setAdvancedMode] = React.useState<boolean>(false);
+
+  const dimensionsObject = (alarm?.dimensions || []).reduce(
+    (acc: Dictionary<string>, dimension: IMetricAlarmDimension) => {
+      acc[dimension.name] = dimension.value;
+      return acc;
+    },
+    {} as Dictionary<string>,
+  );
+
+  const buildDimensionValues = (dimensions: IMetricAlarmDimension[]) =>
+    dimensions
+      .sort((a: IMetricAlarmDimension, b: IMetricAlarmDimension) => a.name?.localeCompare(b.name))
+      .map((d: IMetricAlarmDimension) => d.value)
+      .join(', ');
+
+  const fetchCloudMetrics = () => {
+    const account = serverGroup.cloudProvider === 'aws' ? serverGroup.account : serverGroup?.awsAccount;
+    const queryParams = advancedMode ? { namespace: alarm?.namespace } : { AutoScalingGroupName: serverGroup.name };
+    return CloudMetricsReader.listMetrics('aws', account, serverGroup.region, queryParams)
+      .then((results: ICloudMetricDescriptor[]) => {
+        const sortedMetrics: IMetricOption[] = (results || [])
+          .map((m) => ({
+            label: `(${m.namespace}) ${m.name}`,
+            dimensions: [],
+            dimensionValues: buildDimensionValues(m.dimensions || []),
+            value: m,
+            ...m,
+          }))
+          .sort((a, b) => a.label?.localeCompare(b.label));
+        return sortedMetrics;
+      })
+      .catch(() => {
+        return [];
+      });
+  };
+
+  const { result: metrics } = useData(fetchCloudMetrics, [], [serverGroup, alarm?.namespace]);
+  const metricsByNamespace = (metrics || []).filter((m) => m.namespace === alarm?.namespace);
+  const selectedMetric =
+    metricsByNamespace.find((m: IMetricOption) => m.name === alarm?.metricName && m.namespace === alarm?.namespace) ||
+    metricsByNamespace.find((m) => m.name.match('CPUUtilization')) ||
+    metricsByNamespace[0];
+  const { name: metricName, namespace } = selectedMetric || {};
+
+  const toggleMode = () => {
+    const newMode = !advancedMode;
+    if (newMode) {
+      dimensionsObject.namespace = alarm?.namespace;
+    } else {
+      const newAlarm = {
+        ...alarm,
+        dimension: [{ name: 'AutoScalingGroupName', value: serverGroup.name }],
+      };
+      updateAlarm(newAlarm);
+    }
+    setAdvancedMode(newMode);
+  };
+
+  const onMetricChange = (metric: IMetricOption) => {
+    const newAlarm = {
+      ...alarm,
+      metricName: metric.name,
+      namespace: metric.namespace,
+      dimensions: metric.dimensions,
+    };
+    updateAlarm(newAlarm);
+  };
+
+  const onAdvancedChange = (newNamespace: string, newName: string) => {
+    const newAlarm = {
+      ...alarm,
+      metricName: newName,
+      namespace: newNamespace,
+    };
+    updateAlarm(newAlarm);
+  };
+
+  const updateDimensions = (dimensions: IMetricAlarmDimension[]) => {
+    const newAlarm = {
+      ...alarm,
+      dimensions: dimensions,
+    };
+    updateAlarm(newAlarm);
+  };
+
+  React.useEffect(() => {
+    if (selectedMetric) {
+      onMetricChange(selectedMetric);
+    }
+  }, [selectedMetric]);
+
+  if (!advancedMode) {
+    return (
+      <div className="MetricSelector horizontal middle">
+        <ReactSelectInput
+          value={selectedMetric}
+          onChange={(e) => onMetricChange(e.target.value)}
+          options={metrics}
+          clearable={false}
+          inputClassName="sp-margin-s-right simple-input"
+        />
+        <a className="clickable" onClick={toggleMode}>
+          <span className="sp-margin-xs-right">Search all metrics</span>
+          <HelpField id="aws.scalingPolicy.search.all" />
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="MetricSelector">
+      <div className="horizontal middle">
+        <ReactSelectInput
+          value={namespace}
+          onChange={(e) => onAdvancedChange(e.target.value, alarm?.metricName)}
+          stringOptions={namespaces}
+          inputClassName="advanced-input-namespace sp-margin-m-right"
+        />
+        <ReactSelectInput
+          value={metricName}
+          onChange={(e) => onAdvancedChange(alarm?.namespace, e.target.value)}
+          stringOptions={metrics.map((m) => m.name)}
+          placeholder="name"
+          searchable={true}
+          inputClassName="advanced-input-metric"
+        />
+      </div>
+      <div className="vertical">
+        {!Boolean(metrics.length) && (
+          <span className="input-label">
+            <b>Note:</b> no metrics found for selected namespace + dimensions
+          </span>
+        )}
+        <a className="clickable" onClick={toggleMode}>
+          <span className="sp-margin-s-yaxis sp-margin-xs-right">Only show metrics for this auto scaling group</span>
+          <HelpField id="aws.scalingPolicy.search.restricted" />
+        </a>
+      </div>
+      <DimensionsEditor alarm={alarm} serverGroup={serverGroup} updateAvailableMetrics={updateDimensions} />
+    </div>
+  );
+};