@spinnaker/amazon 0.0.0-main-2

package/src/serverGroup/details/scalingProcesses/modifyScalingProcesses.controller.spec.js

@@ -0,0 +1,106 @@
+'use strict';
+
+import * as angular from 'angular';
+import { TaskExecutor } from '@spinnaker/core';
+
+describe('Controller: modifyScalingProcesses', function () {
+  beforeEach(window.module(require('./modifyScalingProcesses.controller').name));
+
+  beforeEach(
+    window.inject(function ($controller, $rootScope, $q) {
+      this.$uibModalInstance = { close: angular.noop, result: { then: angular.noop } };
+      this.$scope = $rootScope.$new();
+
+      this.initializeController = function (serverGroup, processes) {
+        this.processes = processes;
+        spyOn(TaskExecutor, 'executeTask').and.returnValue($q.when(null));
+
+        this.controller = $controller('ModifyScalingProcessesCtrl', {
+          $scope: this.$scope,
+          serverGroup: serverGroup,
+          processes: this.processes,
+          application: { serverGroups: { refresh: angular.noop } },
+          $uibModalInstance: this.$uibModalInstance,
+        });
+      };
+    }),
+  );
+
+  describe('isDirty', function () {
+    beforeEach(function () {
+      this.serverGroup = { name: 'the-asg' };
+      this.processes = [
+        { name: 'Launch', enabled: true },
+        { name: 'Terminate', enabled: true },
+      ];
+    });
+    it('starts as not dirty', function () {
+      this.initializeController(this.serverGroup, this.processes);
+      expect(this.controller.isDirty()).toBe(false);
+    });
+
+    it('becomes dirty when a process is changed, becomes clean when the process is changed back', function () {
+      this.initializeController(this.serverGroup, this.processes);
+      expect(this.controller.isDirty()).toBe(false);
+
+      this.$scope.command[0].enabled = false;
+      expect(this.controller.isDirty()).toBe(true);
+
+      this.$scope.command[1].enabled = false;
+      expect(this.controller.isDirty()).toBe(true);
+
+      this.$scope.command[0].enabled = true;
+      expect(this.controller.isDirty()).toBe(true);
+
+      this.$scope.command[1].enabled = true;
+      expect(this.controller.isDirty()).toBe(false);
+    });
+  });
+
+  describe('form submission', function () {
+    beforeEach(function () {
+      this.serverGroup = { name: 'the-asg', region: 'us-east-1', account: 'test' };
+      this.processes = [
+        { name: 'Launch', enabled: true },
+        { name: 'Terminate', enabled: true },
+        { name: 'AddToLoadBalancer', enabled: false },
+      ];
+    });
+
+    it('sends a resume job when processes are enabled', function () {
+      this.initializeController(this.serverGroup, this.processes);
+      this.$scope.command[2].enabled = true;
+      this.controller.submit();
+      var job = TaskExecutor.executeTask.calls.mostRecent().args[0].job;
+
+      expect(job.length).toBe(1);
+      expect(job[0].action).toBe('resume');
+      expect(job[0].processes).toEqual(['AddToLoadBalancer']);
+    });
+
+    it('sends a suspend job when processes are enabled', function () {
+      this.initializeController(this.serverGroup, this.processes);
+      this.$scope.command[1].enabled = false;
+      this.controller.submit();
+      var job = TaskExecutor.executeTask.calls.mostRecent().args[0].job;
+
+      expect(job.length).toBe(1);
+      expect(job[0].action).toBe('suspend');
+      expect(job[0].processes).toEqual(['Terminate']);
+    });
+
+    it('sends both a resume and suspend job when processes are enabled', function () {
+      this.initializeController(this.serverGroup, this.processes);
+      this.$scope.command[0].enabled = false;
+      this.$scope.command[2].enabled = true;
+      this.controller.submit();
+      var job = TaskExecutor.executeTask.calls.mostRecent().args[0].job;
+
+      expect(job.length).toBe(2);
+      expect(job[0].action).toBe('resume');
+      expect(job[0].processes).toEqual(['AddToLoadBalancer']);
+      expect(job[1].action).toBe('suspend');
+      expect(job[1].processes).toEqual(['Launch']);
+    });
+  });
+});

package/src/serverGroup/details/scalingProcesses/modifyScalingProcesses.html

@@ -0,0 +1,30 @@
+<div modal-page class="confirmation-modal">
+  <task-monitor monitor="taskMonitor"></task-monitor>
+  <form role="form">
+    <modal-close dismiss="$dismiss()"></modal-close>
+    <div class="modal-header">
+      <h4 class="modal-title">Modify Scaling Processes for {{serverGroup.name}}</h4>
+    </div>
+    <div class="modal-body container-fluid form-horizontal">
+      <div class="form-group">
+        <div class="col-sm-offset-2 col-sm-10">
+          <div class="checkbox" ng-repeat="process in command">
+            <label>
+              <input type="checkbox" ng-model="process.enabled" />
+              {{process.name}}
+            </label>
+            <help-field content="{{process.description}}" placement="right"></help-field>
+          </div>
+        </div>
+      </div>
+    </div>
+    <task-reason command="command"></task-reason>
+    <aws-footer
+      action="ctrl.submit()"
+      cancel="ctrl.cancel()"
+      is-valid="ctrl.isValid()"
+      account="serverGroup.account"
+      verification="verification"
+    ></aws-footer>
+  </form>
+</div>

package/src/serverGroup/details/scheduledAction/ScheduledAction.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import type { IScheduledAction } from '../../../domain';
+
+export interface IScheduledActionProps {
+  action: IScheduledAction;
+}
+
+export class ScheduledAction extends React.Component<IScheduledActionProps> {
+  public render() {
+    const { action } = this.props;
+    return (
+      <dl className="horizontal-when-filters-collapsed" style={{ marginBottom: '20px' }}>
+        <dt>Schedule</dt>
+        <dd>{action.recurrence}</dd>
+        {action.minSize !== undefined && <dt>Min Size</dt>}
+        {action.minSize !== undefined && <dd>{action.minSize}</dd>}
+        {action.maxSize !== undefined && <dt>Max Size</dt>}
+        {action.maxSize !== undefined && <dd>{action.maxSize}</dd>}
+        {action.desiredCapacity !== undefined && <dt>Desired Size</dt>}
+        {action.desiredCapacity !== undefined && <dd>{action.desiredCapacity}</dd>}
+      </dl>
+    );
+  }
+}

package/src/serverGroup/details/scheduledAction/editScheduledActions.modal.controller.js

@@ -0,0 +1,70 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { TaskExecutor, TaskMonitor } from '@spinnaker/core';
+
+export const AMAZON_SERVERGROUP_DETAILS_SCHEDULEDACTION_EDITSCHEDULEDACTIONS_MODAL_CONTROLLER =
+  'spinnaker.amazon.serverGroup.details.scheduledActions.editScheduledActions.modal.controller';
+export const name = AMAZON_SERVERGROUP_DETAILS_SCHEDULEDACTION_EDITSCHEDULEDACTIONS_MODAL_CONTROLLER; // for backwards compatibility
+module(AMAZON_SERVERGROUP_DETAILS_SCHEDULEDACTION_EDITSCHEDULEDACTIONS_MODAL_CONTROLLER, []).controller(
+  'EditScheduledActionsCtrl',
+  [
+    '$scope',
+    '$uibModalInstance',
+    'application',
+    'serverGroup',
+    function ($scope, $uibModalInstance, application, serverGroup) {
+      $scope.command = {
+        scheduledActions: serverGroup.scheduledActions.map((action) => {
+          return {
+            recurrence: action.recurrence,
+            minSize: action.minSize,
+            maxSize: action.maxSize,
+            desiredCapacity: action.desiredCapacity,
+          };
+        }),
+      };
+
+      $scope.serverGroup = serverGroup;
+
+      this.addScheduledAction = () => {
+        $scope.command.scheduledActions.push({});
+      };
+
+      this.removeScheduledAction = (index) => {
+        $scope.command.scheduledActions.splice(index, 1);
+      };
+
+      $scope.taskMonitor = new TaskMonitor({
+        application: application,
+        title: 'Update Scheduled Actions for ' + serverGroup.name,
+        modalInstance: $uibModalInstance,
+        onTaskComplete: () => application.serverGroups.refresh(),
+      });
+
+      this.submit = () => {
+        const job = [
+          {
+            type: 'upsertAsgScheduledActions',
+            asgs: [{ asgName: serverGroup.name, region: serverGroup.region }],
+            scheduledActions: $scope.command.scheduledActions,
+            credentials: serverGroup.account,
+          },
+        ];
+
+        const submitMethod = function () {
+          return TaskExecutor.executeTask({
+            job: job,
+            application: application,
+            description: 'Update Scheduled Actions for ' + serverGroup.name,
+          });
+        };
+
+        $scope.taskMonitor.submit(submitMethod);
+      };
+
+      this.cancel = $uibModalInstance.dismiss;
+    },
+  ],
+);

package/src/serverGroup/details/scheduledAction/editScheduledActions.modal.html

@@ -0,0 +1,89 @@
+<div modal-page>
+  <task-monitor monitor="taskMonitor"></task-monitor>
+  <form role="form" name="form">
+    <modal-close dismiss="$dismiss()"></modal-close>
+    <div class="modal-header">
+      <h4 class="modal-title">Edit Scheduled Actions for {{serverGroup.name}}</h4>
+    </div>
+    <div class="modal-body container-fluid form-horizontal">
+      <div class="form-group">
+        <div class="col-md-12">
+          <p>You must specify at least one of: Min Size, Max Size, Desired Capacity</p>
+          <p><strong>Note:</strong> CRON expressions are evaluated in UTC.</p>
+          <table class="table table-condensed packed">
+            <thead>
+              <tr>
+                <th>Recurrence (CRON)</th>
+                <th>Min Size</th>
+                <th>Max Size</th>
+                <th>Desired Capacity</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-repeat="action in command.scheduledActions">
+                <td>
+                  <input
+                    class="form-control input-sm no-spel"
+                    type="text"
+                    ng-model="action.recurrence"
+                    name="recurrence-{{$index}}"
+                    required
+                  />
+                  <!-- TODO: Add cron-validator when endpoint is fixed -->
+                  <div class="form-group row slide-in" ng-if="form['recurrence-' + $index].$error.cronExpression">
+                    <div class="error-message">{{cronErrors['action.recurrence.cronExpression']}}</div>
+                  </div>
+                </td>
+                <td>
+                  <input
+                    class="form-control input-sm"
+                    type="number"
+                    min="0"
+                    max="{{action.maxSize || Infinity}}"
+                    ng-model="action.minSize"
+                  />
+                </td>
+                <td>
+                  <input
+                    class="form-control input-sm"
+                    type="number"
+                    min="{{action.minSize || 0}}"
+                    ng-model="action.maxSize"
+                  />
+                </td>
+                <td>
+                  <input
+                    class="form-control input-sm"
+                    type="number"
+                    ng-model="action.desiredCapacity"
+                    min="{{command.minSize || 0}}"
+                    max="{{command.maxSize || Infinity}}"
+                  />
+                </td>
+                <td>
+                  <a href class="sm-label" ng-click="ctrl.removeScheduledAction($index)"
+                    ><span class="glyphicon glyphicon-trash"></span
+                  ></a>
+                </td>
+              </tr>
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="5">
+                  <button class="add-new col-md-12" ng-click="ctrl.addScheduledAction()">
+                    <span class="glyphicon glyphicon-plus-sign"></span> Add new Scheduled Action
+                  </button>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+      <button type="submit" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="ctrl.submit()">Submit</button>
+    </div>
+  </form>
+</div>

package/src/serverGroup/details/sections/AdvancedSettingsDetailsSection.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { CollapsibleSection, confirmNotManaged, ModalInjector } from '@spinnaker/core';
+import { HelpField } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import { AWSProviderSettings } from '../../../aws.settings';
+
+export class AdvancedSettingsDetailsSection extends React.Component<IAmazonServerGroupDetailsSectionProps> {
+  private editAdvancedSettings = (): void => {
+    const { app, serverGroup } = this.props;
+    confirmNotManaged(serverGroup, app).then(
+      (notManaged) =>
+        notManaged &&
+        ModalInjector.modalService.open({
+          templateUrl: require('../advancedSettings/editAsgAdvancedSettings.modal.html'),
+          controller: 'EditAsgAdvancedSettingsCtrl as ctrl',
+          resolve: {
+            application: () => app,
+            serverGroup: () => serverGroup,
+          },
+        }),
+    );
+  };
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+
+    const asg = serverGroup.asg;
+
+    return (
+      <CollapsibleSection heading="Advanced Settings">
+        <dl className="horizontal-when-filters-collapsed">
+          <dt>Cooldown</dt>
+          <dd>{asg.defaultCooldown} seconds</dd>
+          {asg.enabledMetrics.length > 0 && [
+            <dt key={'t-metrics'}>Enabled Metrics</dt>,
+            <dd key={'d-metrics'}>{asg.enabledMetrics.map((m) => m.metric).join(', ')}</dd>,
+          ]}
+          <dt>Health Check Type</dt>
+          <dd>{asg.healthCheckType}</dd>
+          <dt>Grace Period</dt>
+          <dd>{asg.healthCheckGracePeriod} seconds</dd>
+          <dt>Termination Policies</dt>
+          <dd>{asg.terminationPolicies.join(', ')}</dd>
+          {asg.capacityRebalance && [
+            <dt>
+              Capacity Rebalance <HelpField id="aws.serverGroup.capacityRebalance" />
+            </dt>,
+            <dd>{`${asg.capacityRebalance}`}</dd>,
+          ]}
+        </dl>
+        {AWSProviderSettings.adHocInfraWritesEnabled && (
+          <a className="clickable" onClick={this.editAdvancedSettings}>
+            Edit Advanced Settings
+          </a>
+        )}
+      </CollapsibleSection>
+    );
+  }
+}

package/src/serverGroup/details/sections/AmazonCapacityDetailsSection.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import type { ICapacity } from '@spinnaker/core';
+import { CapacityDetailsSection, CollapsibleSection, Overridable, ViewScalingActivitiesLink } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import { AWSProviderSettings } from '../../../aws.settings';
+import { AmazonResizeServerGroupModal } from '../resize/AmazonResizeServerGroupModal';
+
+@Overridable('amazon.serverGroup.CapacityDetailsSection')
+export class AmazonCapacityDetailsSection extends React.Component<IAmazonServerGroupDetailsSectionProps> {
+  public render(): JSX.Element {
+    const { serverGroup, app: application } = this.props;
+
+    const capacity: ICapacity = {
+      min: serverGroup.asg.minSize,
+      max: serverGroup.asg.maxSize,
+      desired: serverGroup.asg.desiredCapacity,
+    };
+
+    return (
+      <CollapsibleSection heading="Capacity" defaultExpanded={true}>
+        <CapacityDetailsSection current={serverGroup.instances.length} capacity={capacity} />
+
+        <div>
+          {AWSProviderSettings.adHocInfraWritesEnabled && (
+            <a className="clickable" onClick={() => AmazonResizeServerGroupModal.show({ application, serverGroup })}>
+              Resize Server Group
+            </a>
+          )}
+        </div>
+
+        <div>
+          <ViewScalingActivitiesLink serverGroup={serverGroup} />
+        </div>
+      </CollapsibleSection>
+    );
+  }
+}

package/src/serverGroup/details/sections/AmazonInfoDetailsSection.tsx

@@ -0,0 +1,89 @@
+import { get, has } from 'lodash';
+import React from 'react';
+
+import type { IEntityTags, IViewChangesConfig } from '@spinnaker/core';
+import { AccountTag, CollapsibleSection, EntitySource, SETTINGS, timestamp, ViewChangesLink } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import type { IAmazonServerGroupView } from '../../../domain';
+import { VpcTag } from '../../../vpc/VpcTag';
+
+export interface IAmazonInfoDetailsSectionState {
+  changeConfig: IViewChangesConfig;
+}
+
+export class AmazonInfoDetailsSection extends React.Component<
+  IAmazonServerGroupDetailsSectionProps,
+  IAmazonInfoDetailsSectionState
+> {
+  constructor(props: IAmazonServerGroupDetailsSectionProps) {
+    super(props);
+    this.state = { changeConfig: this.getChangeConfig(props.serverGroup) };
+  }
+
+  private getChangeConfig(serverGroup: IAmazonServerGroupView): IViewChangesConfig {
+    const changeConfig: IViewChangesConfig = {
+      metadata: get(serverGroup.entityTags, 'creationMetadata'),
+    };
+    if (has(serverGroup, 'buildInfo.jenkins')) {
+      changeConfig.buildInfo = {
+        ancestor: undefined,
+        jenkins: serverGroup.buildInfo.jenkins,
+        target: undefined,
+      };
+    }
+
+    return changeConfig;
+  }
+
+  public componentWillReceiveProps(nextProps: IAmazonServerGroupDetailsSectionProps) {
+    this.setState({ changeConfig: this.getChangeConfig(nextProps.serverGroup) });
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    const { changeConfig } = this.state;
+
+    const showEntityTags = SETTINGS.feature && SETTINGS.feature.entityTags;
+    const entityTags = serverGroup.entityTags || ({} as IEntityTags);
+
+    return (
+      <CollapsibleSection heading="Server Group Information" defaultExpanded={true}>
+        <dl className="dl-horizontal dl-narrow">
+          <dt>Created</dt>
+          <dd>{timestamp(serverGroup.createdTime)}</dd>
+          {showEntityTags && <EntitySource metadata={entityTags.creationMetadata} />}
+          {showEntityTags && (
+            <ViewChangesLink
+              changeConfig={changeConfig}
+              linkText="view changes"
+              nameItem={serverGroup}
+              viewType="description"
+            />
+          )}
+          <dt>In</dt>
+          <dd>
+            <AccountTag account={serverGroup.account} />
+            {serverGroup.region}
+          </dd>
+          <dt>VPC</dt>
+          <dd>
+            <VpcTag vpcId={serverGroup.vpcId} />
+          </dd>
+          {serverGroup.vpcId && serverGroup.subnetType && <dt>Subnet</dt>}
+          {serverGroup.vpcId && serverGroup.subnetType && <dd>{serverGroup.subnetType}</dd>}
+          {serverGroup.asg && <dt>Zones</dt>}
+          {serverGroup.asg && (
+            <dd>
+              <ul>
+                {serverGroup.asg.availabilityZones.map((zone) => (
+                  <li key={zone}>{zone}</li>
+                ))}
+              </ul>
+            </dd>
+          )}
+        </dl>
+      </CollapsibleSection>
+    );
+  }
+}

package/src/serverGroup/details/sections/HealthDetailsSection.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { CollapsibleSection, HealthCounts } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+
+export class HealthDetailsSection extends React.Component<IAmazonServerGroupDetailsSectionProps> {
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+
+    if (serverGroup.instanceCounts.total > 0) {
+      return (
+        <CollapsibleSection heading="Health" defaultExpanded={true}>
+          <dl className="dl-horizontal dl-narrow">
+            <dt>Instances</dt>
+            <dd>
+              <HealthCounts container={serverGroup.instanceCounts} className="pull-left" />
+            </dd>
+          </dl>
+        </CollapsibleSection>
+      );
+    }
+    return null;
+  }
+}

package/src/serverGroup/details/sections/IAmazonServerGroupDetailsSectionProps.ts

@@ -0,0 +1,6 @@
+import type { IServerGroupDetailsSectionProps } from '@spinnaker/core';
+import type { IAmazonServerGroupView } from '../../../domain';
+
+export interface IAmazonServerGroupDetailsSectionProps extends IServerGroupDetailsSectionProps {
+  serverGroup: IAmazonServerGroupView;
+}

package/src/serverGroup/details/sections/InstancesDistributionDetailsSection.spec.tsx

@@ -0,0 +1,88 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import type { Application } from '@spinnaker/core';
+import { ApplicationModelBuilder } from '@spinnaker/core';
+import { mockLaunchTemplate, mockServerGroup } from '@spinnaker/mocks';
+
+import type { IAmazonMixedInstancesPolicy, IAmazonServerGroupView, IScalingPolicy } from '../../../domain';
+import { InstancesDistributionDetailsSection } from '../../../index';
+
+describe('InstancesDistribution', () => {
+  let app: Application;
+  beforeEach(() => {
+    app = ApplicationModelBuilder.createApplicationForTests('testapp');
+  });
+
+  const serverGroupWithMip = {
+    ...mockServerGroup,
+    mixedInstancesPolicy: {
+      instancesDistribution: {
+        onDemandAllocationStrategy: 'prioritized',
+        onDemandBaseCapacity: 1,
+        onDemandPercentageAboveBaseCapacity: 50,
+        spotAllocationStrategy: 'capacity-optimized',
+        spotMaxPrice: '1.5',
+      },
+      launchTemplates: [mockLaunchTemplate],
+    } as IAmazonMixedInstancesPolicy,
+    scalingPolicies: [] as IScalingPolicy[],
+  } as IAmazonServerGroupView;
+
+  it('should NOT render for server group without mixed instances policy ', () => {
+    const serverGroupWithLt = {
+      ...mockServerGroup,
+      launchTemplate: mockLaunchTemplate,
+    } as IAmazonServerGroupView;
+    const wrapper = shallow(<InstancesDistributionDetailsSection serverGroup={serverGroupWithLt} app={app} />);
+
+    expect(wrapper.isEmptyRender()).toEqual(true);
+  });
+
+  it('should render for server group with mixed instances policy', () => {
+    const wrapper = shallow(<InstancesDistributionDetailsSection serverGroup={serverGroupWithMip} app={app} />);
+    expect(wrapper.isEmptyRender()).toEqual(false);
+
+    const actualLabeledValues = wrapper.find('LabeledValue');
+    expect(actualLabeledValues.length).toEqual(5);
+    const expectedLabels = new Map<string, any>([
+      ['On-Demand Allocation Strategy', 'prioritized'],
+      ['On-Demand Base Capacity', 1],
+      ['On-Demand Percentage Above Base Capacity', 50],
+      ['Spot Allocation Strategy', 'capacity-optimized'],
+    ]);
+    let index = 0;
+    expectedLabels.forEach((value, key) => {
+      const labeledValue = actualLabeledValues.at(index++);
+      expect(labeledValue.prop('label')).toEqual(key);
+      expect(labeledValue.prop('value')).toEqual(value);
+    });
+  });
+
+  it('should render for spotInstancePools conditionally', () => {
+    const newServerGroup = {
+      ...serverGroupWithMip,
+    };
+    newServerGroup.mixedInstancesPolicy.instancesDistribution.spotAllocationStrategy = 'lowest-price';
+    newServerGroup.mixedInstancesPolicy.instancesDistribution.spotInstancePools = 5;
+
+    const wrapper = shallow(<InstancesDistributionDetailsSection serverGroup={newServerGroup} app={app} />);
+    expect(wrapper.isEmptyRender()).toEqual(false);
+
+    const actualLabeledValues = wrapper.find('LabeledValue');
+    expect(actualLabeledValues.length).toEqual(6);
+    const expectedLabels = new Map<string, any>([
+      ['On-Demand Allocation Strategy', 'prioritized'],
+      ['On-Demand Base Capacity', 1],
+      ['On-Demand Percentage Above Base Capacity', 50],
+      ['Spot Allocation Strategy', 'lowest-price'],
+      ['Spot Instance Pools', 5],
+    ]);
+    let index = 0;
+    expectedLabels.forEach((value, key) => {
+      const labeledValue = actualLabeledValues.at(index++);
+      expect(labeledValue.prop('label')).toEqual(key);
+      expect(labeledValue.prop('value')).toEqual(value);
+    });
+  });
+});