@spinnaker/amazon 0.0.0-2025.1-0

package/src/serverGroup/details/scalingPolicy/chart/MetricAlarmChart.tsx

@@ -0,0 +1,85 @@
+import { get } from 'lodash';
+import * as React from 'react';
+
+import type { ICloudMetricStatistics } from '@spinnaker/core';
+import { CloudMetricsReader, Spinner, useData } from '@spinnaker/core';
+
+import type { IDateLine } from './DateLineChart';
+import { DateLineChart } from './DateLineChart';
+import type { IAmazonServerGroup, IScalingPolicyAlarm } from '../../../../domain';
+
+interface IMetricAlarmChartProps {
+  serverGroup: IAmazonServerGroup;
+  alarm: IScalingPolicyAlarm;
+  onChartLoaded?: (stats: ICloudMetricStatistics) => void;
+}
+
+export function MetricAlarmChart(props: IMetricAlarmChartProps) {
+  return props.serverGroup && props.alarm ? <MetricAlarmChartImpl {...props} /> : null;
+}
+
+export function MetricAlarmChartImpl(props: IMetricAlarmChartProps) {
+  const alarm = props.alarm ?? ({} as IScalingPolicyAlarm);
+  const serverGroup = props.serverGroup ?? ({} as IAmazonServerGroup);
+  const { account, awsAccount, region, type } = serverGroup;
+  const { metricName, namespace, statistic, period } = alarm;
+
+  const { status, result } = useData<ICloudMetricStatistics>(
+    async () => {
+      const parameters: Record<string, string | number> = { namespace, statistics: statistic, period };
+      alarm.dimensions.forEach((dimension) => (parameters[dimension.name] = dimension.value));
+
+      const metricAccount = type === 'aws' ? account : awsAccount;
+      const result = await CloudMetricsReader.getMetricStatistics('aws', metricAccount, region, metricName, parameters);
+      result.datapoints = result.datapoints || [];
+      props.onChartLoaded?.(result);
+
+      return result;
+    },
+    { datapoints: [], unit: '' },
+    [namespace, statistic, period, type, account, region, metricName, alarm.dimensions],
+  );
+
+  if (status === 'PENDING') {
+    return (
+      <div className="flex-container-v middle center sp-margin-xl">
+        <Spinner />
+      </div>
+    );
+  } else if (status === 'REJECTED') {
+    // Metrics with a "%" in the name such as "EBSIOBalance%" return 500
+    // by spring boot due to a security check.  For now just say "no data" :(
+    return (
+      <>
+        <div>no data</div>
+        <div>something went wrong fetching stats</div>
+      </>
+    );
+  } else if (result.datapoints.length === 0) {
+    return <>no data</>;
+  }
+
+  const now = new Date();
+  const oneDayAgo = new Date(Date.now() - 1000 * 60 * 60 * 24);
+  const line: IDateLine = {
+    label: metricName,
+    fill: 'stack',
+    borderColor: 'green',
+    borderWidth: 2,
+    data: result.datapoints.map((dp) => ({
+      x: new Date(dp.timestamp),
+      y: get(dp, [alarm.statistic.toLowerCase()], undefined),
+    })),
+  };
+
+  const setline: IDateLine = {
+    label: 'threshold',
+    borderWidth: 1,
+    borderColor: 'red',
+    data: [
+      { x: oneDayAgo, y: alarm.threshold },
+      { x: now, y: alarm.threshold },
+    ],
+  };
+  return <DateLineChart lines={[line, setline]} />;
+}

package/src/serverGroup/details/scalingPolicy/createScalingPolicyButton.component.ts

@@ -0,0 +1,15 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { CreateScalingPolicyButton } from './CreateScalingPolicyButton';
+
+export const CREATE_SCALING_POLICY_BUTTON = 'spinnaker.amazon.serverGroup.details.scaling.policy.button';
+module(CREATE_SCALING_POLICY_BUTTON, []).component(
+  'createScalingPolicyButton',
+  react2angular(withErrorBoundary(CreateScalingPolicyButton, 'createScalingPolicyButton'), [
+    'application',
+    'serverGroup',
+  ]),
+);

package/src/serverGroup/details/scalingPolicy/index.ts

@@ -0,0 +1,12 @@
+export { DateLineChart } from './chart/DateLineChart';
+export { MetricAlarmChart } from './chart/MetricAlarmChart';
+export * from './CreateScalingPolicyButton';
+export * from './ScalingPolicyWriter';
+export * from './StepPolicySummary';
+export * from './ScalingPolicySummary';
+export * from './targetTracking/TargetTrackingAdditionalSettings';
+export * from './targetTracking/TargetMetricFields';
+export * from './targetTracking/TargetTrackingChart';
+export { UpsertTargetTrackingModal as AmazonUpsertTargetTrackingModal } from './targetTracking/UpsertTargetTrackingModal';
+export * from './targetTracking/TargetTrackingSummary';
+export * from './upsert';

package/src/serverGroup/details/scalingPolicy/popover/AlarmSummary.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { IScalingPolicyAlarmView } from '../../../../domain';
+
+export interface IAlarmSummaryProps {
+  alarm: IScalingPolicyAlarmView;
+}
+
+export const comparatorMap = {
+  GreaterThanOrEqualToThreshold: '>=',
+  GreaterThanThreshold: '>',
+  LessThanOrEqualToThreshold: '<=',
+  LessThanThreshold: '<',
+};
+
+export const AlarmSummary = ({ alarm }: IAlarmSummaryProps) => (
+  <div>
+    <div>
+      <b>Whenever</b>
+      {` ${alarm.statistic} of ${alarm.metricName}`}
+    </div>
+    <div>
+      <b>for at least</b>
+      {` ${alarm.evaluationPeriods} consecutive periods of ${alarm.period} seconds`}
+    </div>
+  </div>
+);

package/src/serverGroup/details/scalingPolicy/popover/StepPolicyPopoverContent.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+
+import { LabeledValue, LabeledValueList } from '@spinnaker/core';
+
+import { MetricAlarmChart } from '../chart/MetricAlarmChart';
+import type {
+  IAmazonServerGroup,
+  IScalingPolicyAlarmView,
+  IScalingPolicyView,
+  IStepAdjustmentView,
+} from '../../../../domain';
+import { comparatorMap } from '../popover/AlarmSummary';
+
+export interface IStepPolicyPopoverContentProps {
+  policy: IScalingPolicyView;
+  serverGroup: IAmazonServerGroup;
+}
+
+export const StepPolicyPopoverContent = ({ policy, serverGroup }: IStepPolicyPopoverContentProps) => {
+  const { adjustmentType, alarms, cooldown, estimatedInstanceWarmup, minAdjustmentMagnitude, stepAdjustments } = policy;
+  const showWait = cooldown ? true : stepAdjustments?.[0]?.operator === 'decrease';
+  const alarm = alarms[0] || ({} as IScalingPolicyAlarmView);
+  const isGreater = alarm?.comparisonOperator.includes('Greater');
+
+  const getAdjustmentTypeString = (step: IScalingPolicyView | IStepAdjustmentView): string => {
+    if (adjustmentType === 'ExactCapacity') {
+      return `set capacity to ${step.scalingAdjustment} instance${step.scalingAdjustment > 1 ? 's' : ''}`;
+    }
+
+    return `${step.operator} capacity by ${step.absAdjustment}${
+      adjustmentType === 'PercentChangeInCapacity' ? '%' : ' instance'
+    }${adjustmentType === 'ChangeInCapacity' && step.absAdjustment > 1 ? 's' : ''}`;
+  };
+
+  const getBoundaryStr = (step: IStepAdjustmentView) => {
+    const middleBounds =
+      step.metricIntervalLowerBound !== undefined && step.metricIntervalUpperBound !== undefined
+        ? `is between ${alarm.threshold + step.metricIntervalLowerBound} and ${
+            alarm.threshold + step.metricIntervalUpperBound
+          } `
+        : '';
+
+    const sourceBound = isGreater ? step.metricIntervalLowerBound : step.metricIntervalUpperBound;
+    const finalBound = `is ${isGreater ? 'greater' : 'less'} than ${alarm.threshold + sourceBound}`;
+
+    return `if ${alarm.metricName} ${middleBounds}${finalBound}`;
+  };
+
+  return (
+    <div>
+      <LabeledValueList className="dl-horizontal dl-narrow">
+        <LabeledValue
+          label="Whenever"
+          value={`${alarm.statistic} of ${alarm.metricName} is ${comparatorMap[alarm.comparisonOperator]} ${
+            alarm.threshold
+          }`}
+        />
+        <LabeledValue
+          label="for at least"
+          value={`${alarm.evaluationPeriods} consecutive periods of ${alarm.period} seconds`}
+        />
+        {Boolean(stepAdjustments?.length) && (
+          <LabeledValue
+            label="then"
+            value={stepAdjustments.map((sa, index) => (
+              <div key={`step-adjustment-boundary-${index}`}>
+                {stepAdjustments.length > 1 && <span>{getBoundaryStr(sa)}</span>}
+                <span>{getAdjustmentTypeString(sa)}</span>
+              </div>
+            ))}
+          />
+        )}
+        {!Boolean(stepAdjustments?.length) && <LabeledValue label="then" value={getAdjustmentTypeString(policy)} />}
+        {Boolean(minAdjustmentMagnitude) && (
+          <LabeledValue
+            label="in"
+            value={`increments of at least ${minAdjustmentMagnitude} instance${minAdjustmentMagnitude > 1 ? 's' : ''}`}
+          />
+        )}
+        {Boolean(showWait) && (
+          <LabeledValue label="wait" value={`${cooldown} seconds before allowing another scaling activity.`} />
+        )}
+        {Boolean(estimatedInstanceWarmup) && (
+          <LabeledValue label="wait" value={`${estimatedInstanceWarmup} seconds to warm up after each step.`} />
+        )}
+      </LabeledValueList>
+      <MetricAlarmChart alarm={alarm} serverGroup={serverGroup} />
+    </div>
+  );
+};

package/src/serverGroup/details/scalingPolicy/scalingPolicy.module.ts

@@ -0,0 +1,6 @@
+import { module } from 'angular';
+
+import { SCALING_POLICY_SUMMARY_COMPONENT } from './scalingPolicySummary.component';
+
+export const SCALING_POLICY_MODULE = 'spinnaker.amazon.scalingPolicy.module';
+module(SCALING_POLICY_MODULE, [SCALING_POLICY_SUMMARY_COMPONENT]);

package/src/serverGroup/details/scalingPolicy/scalingPolicySummary.component.ts

@@ -0,0 +1,14 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+import { withErrorBoundary } from '@spinnaker/core';
+import { ScalingPolicySummary } from './ScalingPolicySummary';
+
+export const SCALING_POLICY_SUMMARY_COMPONENT = 'spinnaker.amazon.scalingPolicy.scalingPolicySummary.component';
+module(SCALING_POLICY_SUMMARY_COMPONENT, []).component(
+  'scalingPolicySummary',
+  react2angular(withErrorBoundary(ScalingPolicySummary, 'scalingPolicySummary'), [
+    'application',
+    'policy',
+    'serverGroup',
+  ]),
+);

package/src/serverGroup/details/scalingPolicy/targetTracking/TargetMetricFields.less

@@ -0,0 +1,10 @@
+.TargetMetricFields {
+  .metric-select-input {
+    font-size: 12px;
+    width: 180px;
+  }
+
+  .target-input {
+    width: 120px;
+  }
+}

package/src/serverGroup/details/scalingPolicy/targetTracking/TargetMetricFields.tsx

@@ -0,0 +1,212 @@
+import { cloneDeep, set } from 'lodash';
+import * as React from 'react';
+
+import { NumberInput, ReactSelectInput } from '@spinnaker/core';
+import type { Application, ILoadBalancer } from '@spinnaker/core';
+
+import type { ITargetTrackingPolicyCommand } from '../ScalingPolicyWriter';
+import { TargetTrackingChart } from './TargetTrackingChart';
+import type {
+  IAmazonApplicationLoadBalancer,
+  IAmazonServerGroup,
+  ICustomizedMetricSpecification,
+  IScalingPolicyAlarmView,
+  ITargetGroup,
+} from '../../../../domain';
+import { MetricSelector } from '../upsert/alarm/MetricSelector';
+
+import './TargetMetricFields.less';
+
+export type MetricType = 'custom' | 'predefined';
+export interface ITargetMetricFieldsProps {
+  allowDualMode?: boolean;
+  cloudwatch?: boolean;
+  command: ITargetTrackingPolicyCommand;
+  isCustomMetric: boolean;
+  app: Application;
+  serverGroup: IAmazonServerGroup;
+  toggleMetricType?: (type: MetricType) => void;
+  updateCommand: (command: ITargetTrackingPolicyCommand) => void;
+}
+
+interface IalbArn {
+  loadBalancerArn: string;
+}
+
+interface ItargetGroupArn {
+  targetGroupArn: string;
+}
+
+export const TargetMetricFields = ({
+  allowDualMode,
+  cloudwatch,
+  command,
+  isCustomMetric,
+  app,
+  serverGroup,
+  toggleMetricType,
+  updateCommand,
+}: ITargetMetricFieldsProps) => {
+  const predefinedMetrics = [
+    'ASGAverageCPUUtilization',
+    'ASGAverageNetworkOut',
+    'ASGAverageNetworkIn',
+    'ALBRequestCountPerTarget',
+  ];
+  const statistics = ['Average', 'Maximum', 'Minimum', 'SampleCount', 'Sum'];
+  const [unit, setUnit] = React.useState<string>(null);
+
+  const setCommandField = (path: string, value: any) => {
+    const newCommand = cloneDeep(command);
+    set(newCommand, path, value);
+    updateCommand(newCommand);
+  };
+
+  const updateAlarm = (newAlarm: ICustomizedMetricSpecification) => {
+    setCommandField('targetTrackingConfiguration.customizedMetricSpecification', newAlarm);
+  };
+
+  const onMetricTypeChange = () => {
+    const newCommand = cloneDeep(command);
+    if (isCustomMetric) {
+      set(newCommand, 'targetTrackingConfiguration.predefinedMetricSpecification', {
+        predefinedMetricType: 'ASGAverageCPUUtilization',
+      });
+      set(newCommand, 'targetTrackingConfiguration.customizedMetricSpecification', null);
+    } else {
+      set(newCommand, 'targetTrackingConfiguration.predefinedMetricSpecification', null);
+      set(newCommand, 'targetTrackingConfiguration.customizedMetricSpecification', {
+        metricName: 'CPUUtilization',
+        namespace: 'AWS/EC2',
+        dimensions: [{ name: 'AutoScalingGroupName', value: serverGroup.name }],
+        statistic: 'Average',
+      });
+    }
+
+    updateCommand(newCommand);
+    toggleMetricType(isCustomMetric ? 'predefined' : 'custom');
+  };
+
+  const targetGroupOptions = () => {
+    const loadBalancers = app.loadBalancers.data as ILoadBalancer[];
+    const albs = loadBalancers.filter(
+      (lb) => lb.account === serverGroup.account && lb.region === serverGroup.region,
+    ) as Array<IAmazonApplicationLoadBalancer & IalbArn>;
+    const targetGroups = albs.flatMap((alb) =>
+      alb.targetGroups
+        .filter((tg) => serverGroup.targetGroups.some((serverGroupTg) => serverGroupTg === tg.name))
+        .map((tg) => ({ ...tg, loadBalancerArn: alb.loadBalancerArn })),
+    ) as Array<ITargetGroup & IalbArn & ItargetGroupArn>;
+    return targetGroups.map((tg) => ({
+      label: tg.name,
+      value: `${tg.loadBalancerArn.substring(tg.loadBalancerArn.indexOf('app'))}/${tg.targetGroupArn.substring(
+        tg.targetGroupArn.indexOf('targetgroup'),
+      )}`,
+    }));
+  };
+
+  return (
+    <div className="TargetMetricFields sp-margin-l-xaxis">
+      <p>
+        With target tracking policies, Amazon will automatically adjust the size of your ASG to keep the selected metric
+        as close as possible to the selected value.
+      </p>
+      {cloudwatch && (
+        <p>
+          <b>Note:</b> metrics must be sent to Amazon CloudWatch before they can be used in auto scaling. If you do not
+          see a metric below, click "Configure available metrics" in the server group details to set up forwarding from
+          Atlas to CloudWatch.
+        </p>
+      )}
+      <div className="row sp-margin-s-yaxis">
+        <div className="col-md-2 sm-label-right">Metric</div>
+        <div className="col-md-10 content-fields">
+          {!isCustomMetric && (
+            <ReactSelectInput
+              value={command.targetTrackingConfiguration.predefinedMetricSpecification?.predefinedMetricType}
+              stringOptions={predefinedMetrics}
+              onChange={(e) =>
+                setCommandField(
+                  'targetTrackingConfiguration.predefinedMetricSpecification.predefinedMetricType',
+                  e.target.value,
+                )
+              }
+              inputClassName="metric-select-input"
+            />
+          )}
+
+          {isCustomMetric && (
+            <MetricSelector
+              alarm={command.targetTrackingConfiguration.customizedMetricSpecification as IScalingPolicyAlarmView}
+              serverGroup={serverGroup}
+              updateAlarm={updateAlarm}
+            />
+          )}
+          {allowDualMode && (
+            <a className="clickable" onClick={onMetricTypeChange}>
+              {isCustomMetric ? 'Use a predefined metric' : 'Select a custom metric'}
+            </a>
+          )}
+        </div>
+      </div>
+      {!isCustomMetric &&
+        command.targetTrackingConfiguration.predefinedMetricSpecification?.predefinedMetricType ===
+          'ALBRequestCountPerTarget' && (
+          <div className="row sp-margin-s-yaxis">
+            <div className="col-md-2 sm-label-right">Target Group</div>
+            <div className="col-md-10 content-fields horizontal">
+              <ReactSelectInput
+                value={command.targetTrackingConfiguration.predefinedMetricSpecification?.resourceLabel}
+                options={targetGroupOptions()}
+                onChange={(e) =>
+                  setCommandField(
+                    'targetTrackingConfiguration.predefinedMetricSpecification.resourceLabel',
+                    e.target.value,
+                  )
+                }
+                inputClassName="metric-select-input"
+              />
+            </div>
+          </div>
+        )}
+      <div className="row sp-margin-s-yaxis">
+        <div className="col-md-2 sm-label-right">Target</div>
+        <div className="col-md-10 content-fields horizontal">
+          {isCustomMetric && (
+            <div className="horizontal middle">
+              <ReactSelectInput
+                value={command.targetTrackingConfiguration.customizedMetricSpecification?.statistic}
+                stringOptions={statistics}
+                onChange={(e) =>
+                  setCommandField('targetTrackingConfiguration.customizedMetricSpecification.statistic', e.target.value)
+                }
+                inputClassName="form-control input-sm target-input"
+              />
+              <span className="sp-margin-xs-xaxis">of</span>
+            </div>
+          )}
+          <div className="horizontal middle">
+            <NumberInput
+              value={command.targetTrackingConfiguration.targetValue}
+              onChange={(e) =>
+                setCommandField('targetTrackingConfiguration.targetValue', Number.parseInt(e.target.value))
+              }
+              inputClassName="form-control input-sm sp-margin-xs-right"
+            />
+            <span>{unit}</span>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-md-10 col-md-offset-1">
+          <TargetTrackingChart
+            config={command.targetTrackingConfiguration}
+            serverGroup={serverGroup}
+            unit={unit}
+            updateUnit={(u) => setUnit(u)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/serverGroup/details/scalingPolicy/targetTracking/TargetTrackingAdditionalSettings.less

@@ -0,0 +1,11 @@
+.TargetTrackingAdditionalSettings {
+  font-size: 14px;
+
+  .row {
+    margin-bottom: 10px;
+  }
+
+  .number-input-sm {
+    width: 120px;
+  }
+}

package/src/serverGroup/details/scalingPolicy/targetTracking/TargetTrackingAdditionalSettings.tsx

@@ -0,0 +1,122 @@
+import { set } from 'lodash';
+import * as React from 'react';
+import { CheckboxInput, HelpField, NumberInput } from '@spinnaker/core';
+import type { IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+
+import './TargetTrackingAdditionalSettings.less';
+
+export interface ITargetTrackingAdditionalSettingsProps {
+  command: IUpsertScalingPolicyCommand;
+  cooldowns?: Boolean;
+  policyName?: string;
+  updateCommand: (command: IUpsertScalingPolicyCommand) => void;
+}
+
+export const TargetTrackingAdditionalSettings = ({
+  command,
+  cooldowns,
+  policyName,
+  updateCommand,
+}: ITargetTrackingAdditionalSettingsProps) => {
+  const setCommandField = (path: string, value: number) => {
+    const newCommand = { ...command };
+    set(newCommand, path, value);
+    updateCommand(newCommand);
+  };
+  const scaleInDisabled = command.targetTrackingConfiguration?.disableScaleIn;
+  return (
+    <div className="section-body TargetTrackingAdditionalSettings">
+      {policyName && (
+        <div className="row">
+          <div className="col-md-2 sm-label-right">Policy Name</div>
+          <div className="col-md-10 horizontal middle">{policyName}</div>
+        </div>
+      )}
+      {Boolean(command.estimatedInstanceWarmup) && (
+        <div className="row">
+          <div className="col-md-2 sm-label-right">Warmup</div>
+          <div className="col-md-10 horizontal middle">
+            <span className="form-control-static">Instances need</span>
+            <NumberInput
+              value={command.estimatedInstanceWarmup}
+              onChange={(e) => setCommandField('estimatedInstanceWarmup', Number.parseInt(e.target.value))}
+              inputClassName="form-control number-input-sm sp-margin-xs-xaxis"
+            />
+            <span className="input-label"> seconds to warm up </span>
+          </div>
+        </div>
+      )}
+      <div className="row">
+        <div className="col-md-2 sm-label-right">Scale In</div>
+        <div className="col-md-9">
+          <div className="checkbox">
+            <CheckboxInput
+              text="Disable Scale-downs"
+              checked={scaleInDisabled}
+              onChange={(e) => setCommandField('targetTrackingConfiguration.disableScaleIn', e.target.checked)}
+            />
+            <div className="small">
+              <p>
+                This option disables scale-downs for the target tracking policy, while keeping the scale-ups. This means
+                that ASG will not scale down unless you explicitly set up a separate step policy to scale it down.
+              </p>
+              <p>This is useful when you have special requirements, such as gradual or delayed scale-down.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-md-10 col-md-offset-1">
+          {scaleInDisabled && (
+            <div className="well">
+              This policy will not scale down. Make sure you have another policy (either TT or Step) that will scale
+              down this ASG.
+            </div>
+          )}
+          {scaleInDisabled === false && (
+            <div className="well">
+              This policy will scale both up and down. Make sure you don't have other scaling policies, as they will
+              likely interfere with each other.
+            </div>
+          )}
+        </div>
+      </div>
+      {cooldowns && !scaleInDisabled && (
+        <div className="row">
+          <div className="col-md-3 sm-label-right">
+            <span className="sp-margin-xs-right">Scale In Cooldown</span>
+            <HelpField id="titus.autoscaling.scaleIn.cooldown" />
+          </div>
+          <div className="col-md-9 horizontal middle">
+            <NumberInput
+              value={command.targetTrackingConfiguration.scaleInCooldown}
+              onChange={(e) =>
+                setCommandField('targetTrackingConfiguration.scaleInCooldown', Number.parseInt(e.target.value))
+              }
+              inputClassName="sp-margin-xs-xaxis number-input-sm"
+            />
+            <span className="input-label"> seconds </span>
+          </div>
+        </div>
+      )}
+      {cooldowns && (
+        <div className="row">
+          <div className="col-md-3 sm-label-right">
+            <span className="sp-margin-xs-right">Scale Out Cooldown</span>
+            <HelpField id="titus.autoscaling.scaleOut.cooldown" />
+          </div>
+          <div className="col-md-9 horizontal middle">
+            <NumberInput
+              value={command.targetTrackingConfiguration.scaleOutCooldown}
+              onChange={(e) =>
+                setCommandField('targetTrackingConfiguration.scaleOutCooldown', Number.parseInt(e.target.value))
+              }
+              inputClassName="sp-margin-xs-xaxis number-input-sm"
+            />
+            <span className="input-label"> seconds </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};