@spinnaker/google 0.0.0-main-2

package/src/serverGroup/configure/wizard/customInstance/CustomInstanceConfigurer.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+
+import { CheckboxInput, HelpField } from '@spinnaker/core';
+import './customInstanceConfigurer.component.less';
+
+export interface ICustomInstanceConfig {
+  vCpuCount: number;
+  memory: number;
+  instanceFamily: string;
+  extendedMemory: boolean;
+}
+
+export interface ICustomInstanceConfigurerProps {
+  vCpuList: number[];
+  memoryList: number[];
+  instanceFamilyList: string[];
+  selectedVCpuCount: number;
+  selectedMemory: number;
+  selectedInstanceFamily: string;
+  selectedExtendedMemory: boolean;
+  onChange: (config: ICustomInstanceConfig) => void;
+}
+
+export class CustomInstanceConfigurer extends React.Component<ICustomInstanceConfigurerProps> {
+  public render() {
+    const instanceFamilyOptions: Option[] = (this.props.instanceFamilyList || []).map((instanceFamily) => ({
+      label: instanceFamily,
+      value: instanceFamily,
+    }));
+    const vCpuOptions: Option[] = (this.props.vCpuList || []).map((vCpu) => ({ label: vCpu + '', value: vCpu }));
+    const memoryOptions: Option[] = (this.props.memoryList || []).map((memory) => ({
+      label: memory + '',
+      value: memory,
+    }));
+    const selectedVCpuCountLabel = this.props.selectedVCpuCount ? this.props.selectedVCpuCount + '' : null;
+    const selectedMemoryLabel = this.props.selectedMemory ? this.props.selectedMemory + '' : null;
+    const selectedInstanceFamilyLabel = this.props.selectedInstanceFamily ? this.props.selectedInstanceFamily : null;
+
+    return (
+      <div>
+        <div className="row">
+          <div className="col-md-5 sm-label-right">
+            <b>Family </b>
+          </div>
+          <div className="col-md-3">
+            <Select
+              options={instanceFamilyOptions}
+              clearable={false}
+              value={{ label: selectedInstanceFamilyLabel, value: this.props.selectedInstanceFamily }}
+              onChange={this.handleInstanceFamilyChange}
+            />
+          </div>
+        </div>
+        <div className="row gce-instance-build-custom-select">
+          <div className="col-md-5 sm-label-right">
+            <b>Cores </b>
+            <HelpField id="gce.instance.customInstance.cores" />
+          </div>
+          <div className="col-md-3">
+            <Select
+              options={vCpuOptions}
+              clearable={false}
+              value={{ label: selectedVCpuCountLabel, value: this.props.selectedVCpuCount }}
+              onChange={this.handleVCpuChange}
+            />
+          </div>
+        </div>
+        <div className="row gce-instance-build-custom-select">
+          <div className="col-md-5 sm-label-right">
+            <b>Memory (Gb) </b>
+            <HelpField id="gce.instance.customInstance.memory" />
+          </div>
+          <div className="col-md-3">
+            {this.props.selectedExtendedMemory ? (
+              <input
+                type="number"
+                name="memory"
+                className="form-control"
+                value={this.props.selectedMemory}
+                onChange={(event) => this.handleMemoryChangeCustom(event.target.value)}
+              />
+            ) : (
+              <Select
+                options={memoryOptions}
+                clearable={false}
+                value={{ label: selectedMemoryLabel, value: this.props.selectedMemory }}
+                onChange={this.handleMemoryChange}
+              />
+            )}
+          </div>
+        </div>
+        {this.props.selectedInstanceFamily !== 'E2' ? (
+          <div className="row gce-instance-build-custom-select">
+            <div className="col-md-5 sm-label-right"></div>
+            <div className="col-md-3">
+              <span className="gce-instance-build-custom-extended-memory-checkbox">
+                <CheckboxInput
+                  name="extendedMemory"
+                  text="Extended Memory"
+                  checked={this.props.selectedExtendedMemory}
+                  onChange={(event: { target: { checked: boolean } }) => {
+                    this.handleExtendedMemory(event.target.checked);
+                  }}
+                />
+                <div className="gce-instance-build-custom-extended-memory-checkbox-helptext">
+                  <HelpField id="gce.instance.customInstance.extendedmemory" />
+                </div>
+              </span>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  private handleVCpuChange = (option: Option) => {
+    const value = (option ? option.value : null) as number;
+    this.props.onChange({
+      instanceFamily: this.props.selectedInstanceFamily,
+      vCpuCount: value,
+      memory: this.props.selectedMemory,
+      extendedMemory: this.props.selectedExtendedMemory,
+    });
+  };
+
+  private handleMemoryChange = (option: Option) => {
+    const value = (option ? option.value : null) as number;
+    this.props.onChange({
+      instanceFamily: this.props.selectedInstanceFamily,
+      vCpuCount: this.props.selectedVCpuCount,
+      memory: value,
+      extendedMemory: this.props.selectedExtendedMemory,
+    });
+  };
+
+  private handleInstanceFamilyChange = (option: Option) => {
+    const value = (option ? option.value : null) as string;
+    this.props.onChange({
+      instanceFamily: value,
+      vCpuCount: this.props.selectedVCpuCount,
+      memory: this.props.selectedMemory,
+      extendedMemory: value === 'E2' ? false : this.props.selectedExtendedMemory,
+    });
+  };
+
+  private handleMemoryChangeCustom = (val: string) => {
+    const value = +val;
+    this.props.onChange({
+      instanceFamily: this.props.selectedInstanceFamily,
+      vCpuCount: this.props.selectedVCpuCount,
+      memory: value,
+      extendedMemory: this.props.selectedExtendedMemory,
+    });
+  };
+
+  private handleExtendedMemory = (checked: boolean) => {
+    this.props.onChange({
+      instanceFamily: this.props.selectedInstanceFamily,
+      vCpuCount: this.props.selectedVCpuCount,
+      memory: this.props.selectedMemory,
+      extendedMemory: checked,
+    });
+  };
+}

package/src/serverGroup/configure/wizard/customInstance/customInstanceBuilder.html

@@ -0,0 +1,13 @@
+<dirty-instance-type-notification command="instanceArchetypeCtrl.command"></dirty-instance-type-notification>
+<div class="form-group">
+  <gce-custom-instance-configurer
+    instance-family-list="instanceArchetypeCtrl.command.backingData.customInstanceTypes.instanceFamilyList"
+    selected-instance-family="instanceArchetypeCtrl.command.viewState.customInstance.instanceFamily"
+    v-cpu-list="instanceArchetypeCtrl.command.backingData.customInstanceTypes.vCpuList"
+    selected-v-cpu-count="instanceArchetypeCtrl.command.viewState.customInstance.vCpuCount"
+    memory-list="instanceArchetypeCtrl.command.backingData.customInstanceTypes.memoryList"
+    selected-memory="instanceArchetypeCtrl.command.viewState.customInstance.memory"
+    selected-extended-memory="instanceArchetypeCtrl.command.viewState.customInstance.extendedMemory"
+    on-change="instanceArchetypeCtrl.command.setCustomInstanceViewState"
+  ></gce-custom-instance-configurer>
+</div>

package/src/serverGroup/configure/wizard/customInstance/customInstanceConfigurer.component.less

@@ -0,0 +1,9 @@
+.gce-instance-build-custom-select {
+  margin-top: 5px;
+  .gce-instance-build-custom-extended-memory-checkbox {
+    display: flex;
+  }
+  .gce-instance-build-custom-extended-memory-checkbox-helptext {
+    margin: 8px 0px 0px 3px;
+  }
+}

package/src/serverGroup/configure/wizard/customInstance/customInstanceConfigurer.component.ts

@@ -0,0 +1,21 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { CustomInstanceConfigurer } from './CustomInstanceConfigurer';
+
+export const GCE_CUSTOM_INSTANCE_CONFIGURER = 'spinnaker.gce.customInstanceConfigurer';
+module(GCE_CUSTOM_INSTANCE_CONFIGURER, []).component(
+  'gceCustomInstanceConfigurer',
+  react2angular(withErrorBoundary(CustomInstanceConfigurer, 'gceCustomInstanceConfigurer'), [
+    'vCpuList',
+    'instanceFamilyList',
+    'memoryList',
+    'selectedVCpuCount',
+    'selectedMemory',
+    'selectedInstanceFamily',
+    'selectedExtendedMemory',
+    'onChange',
+  ]),
+);

package/src/serverGroup/configure/wizard/hiddenMetadataKeys.value.js

@@ -0,0 +1,15 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_HIDDENMETADATAKEYS_VALUE =
+  'spinnaker.deck.gce.serverGroup.hiddenMetadataKeys.value';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_HIDDENMETADATAKEYS_VALUE; // for backwards compatibility
+module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_HIDDENMETADATAKEYS_VALUE, []).value('gceServerGroupHiddenMetadataKeys', [
+  'load-balancer-names',
+  'global-load-balancer-names',
+  'backend-service-names',
+  'load-balancing-policy',
+  'select-zones',
+  'customUserData',
+]);

package/src/serverGroup/configure/wizard/instanceType/instanceType.html

@@ -0,0 +1,11 @@
+<div ng-show="!!((command.viewState.disableImageSelection || command.image) && (command.zone || command.regional))">
+  <v2-instance-archetype-selector command="command"></v2-instance-archetype-selector>
+  <div style="padding: 0 15px">
+    <v2-instance-type-selector
+      ng-if="command.viewState.instanceProfile && !ctrl.specialInstanceProfiles.has(command.viewState.instanceProfile)"
+      command="command"
+    ></v2-instance-type-selector>
+  </div>
+</div>
+<h5 class="text-center" ng-if="!command.image && !command.viewState.disableImageSelection">Please select an image.</h5>
+<h5 class="text-center" ng-if="!(command.zone || command.regional)">Please select a zone.</h5>

package/src/serverGroup/configure/wizard/loadBalancers/elSevenOptions/backendServiceSelector.component.html

@@ -0,0 +1,21 @@
+<div class="row">
+  <div class="col-md-4 sm-label-right">
+    <b style="font-family: 'Source Sans 3', sans-serif; font-size: 14px; color: #333">Backend services</b>
+  </div>
+  <div class="col-md-8">
+    <ui-select
+      multiple
+      nested
+      required
+      ng-model="$ctrl.command.backendServices[$ctrl.loadBalancerName]"
+      class="form-control input-sm"
+    >
+      <ui-select-match>{{ $item }}</ui-select-match>
+      <ui-select-choices
+        repeat="backendService in $ctrl.command.backingData.filtered.loadBalancerIndex[$ctrl.loadBalancerName].backendServices | filter: $select.search"
+      >
+        <span ng-bind-html="backendService | highlight: $select.search"></span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/loadBalancers/elSevenOptions/backendServiceSelector.component.js

@@ -0,0 +1,33 @@
+'use strict';
+
+import { module } from 'angular';
+
+// TODO(dpeach): this approach is unmaintainable because we
+// have to intercept ui-select event emitters to make it work.
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_BACKENDSERVICESELECTOR_COMPONENT =
+  'spinnaker.deck.gce.backendServiceSelector.component';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_BACKENDSERVICESELECTOR_COMPONENT; // for backwards compatibility
+module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_BACKENDSERVICESELECTOR_COMPONENT, []).component(
+  'gceBackendServiceSelector',
+  {
+    bindings: {
+      command: '=',
+      loadBalancerName: '=',
+    },
+    templateUrl: require('./backendServiceSelector.component.html'),
+    controller: [
+      '$scope',
+      function ($scope) {
+        $scope.$on('$destroy', () => {
+          if (this.command.backendServices) {
+            delete this.command.backendServices[this.loadBalancerName];
+          }
+        });
+
+        $scope.$on('uis:select', function (event) {
+          event.preventDefault();
+        });
+      },
+    ],
+  },
+);

package/src/serverGroup/configure/wizard/loadBalancers/elSevenOptions/elSevenOptionsGenerator.component.js

@@ -0,0 +1,42 @@
+import * as angular from 'angular';
+
+import { GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_BACKENDSERVICESELECTOR_COMPONENT } from './backendServiceSelector.component';
+
+('use strict');
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_ELSEVENOPTIONSGENERATOR_COMPONENT =
+  'spinnaker.deck.gce.elSevenOptionsGenerator.component';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_ELSEVENOPTIONSGENERATOR_COMPONENT; // for backwards compatibility
+angular
+  .module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_ELSEVENOPTIONSGENERATOR_COMPONENT, [
+    GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_BACKENDSERVICESELECTOR_COMPONENT,
+  ])
+  .directive('gceElSevenOptionsGenerator', [
+    '$compile',
+    function ($compile) {
+      const template = `<gce-backend-service-selector load-balancer-name="loadBalancerName" command="command">
+                    </gce-backend-service-selector>`;
+
+      return {
+        restrict: 'E',
+        scope: {
+          command: '=',
+          loadBalancerName: '@',
+        },
+        link: function (scope, element) {
+          const compiledTemplate = $compile(template)(scope);
+
+          // Look up DOM to find container for selected load balancer.
+          const listItem = angular.element(element).closest('.ui-select-match-item');
+
+          // Drop service selector in between load balancers.
+          listItem.after(compiledTemplate);
+
+          scope.$on('$destroy', () => {
+            // Remove selector if load balancer is removed.
+            listItem.next().remove();
+          });
+        },
+      };
+    },
+  ]);

package/src/serverGroup/configure/wizard/loadBalancers/loadBalancerSelector.directive.html

@@ -0,0 +1,53 @@
+<div class="row">
+  <div class="col-md-12" ng-if="vm.command.viewState.dirty.loadBalancers">
+    <div class="alert alert-warning">
+      <p>
+        <i class="fa fa-exclamation-triangle"></i>
+        The following load balancers could not be found in the selected account/region and were removed:
+      </p>
+      <ul>
+        <li ng-repeat="loadBalancer in vm.command.viewState.dirty.loadBalancers">{{loadBalancer}}</li>
+      </ul>
+      <p class="text-right">
+        <a
+          class="btn btn-sm btn-default dirty-flag-dismiss"
+          href
+          ng-click="vm.command.viewState.dirty.loadBalancers = null"
+          >Okay</a
+        >
+      </p>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right"><b>Load Balancers</b></div>
+    <div class="col-md-9">
+      <ui-select
+        ng-if="vm.command.backingData.filtered.loadBalancers.length"
+        multiple
+        ng-model="vm.command.loadBalancers"
+        class="form-control input-sm"
+      >
+        <ui-select-match>
+          {{$item}}
+          <gce-el-seven-options-generator
+            ng-if="vm.isHttpLoadBalancer(vm.command.backingData.filtered.loadBalancerIndex[$item])"
+            command="vm.command"
+            load-balancer-name="{{:: $item}}"
+          >
+          </gce-el-seven-options-generator>
+        </ui-select-match>
+        <ui-select-choices
+          repeat="loadBalancer in vm.command.backingData.filtered.loadBalancers | filter: $select.search"
+        >
+          <span ng-bind-html="loadBalancer | highlight: $select.search"></span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+
+  <gce-load-balancing-policy-selector
+    ng-if="vm.showLoadBalancingPolicy()"
+    command="vm.command"
+  ></gce-load-balancing-policy-selector>
+</div>

package/src/serverGroup/configure/wizard/loadBalancers/loadBalancerSelector.directive.js

@@ -0,0 +1,55 @@
+'use strict';
+
+import * as angular from 'angular';
+import _ from 'lodash';
+
+import { GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_ELSEVENOPTIONSGENERATOR_COMPONENT } from './elSevenOptions/elSevenOptionsGenerator.component';
+import { GCE_HTTP_LOAD_BALANCER_UTILS } from '../../../../loadBalancer/httpLoadBalancerUtils.service';
+import { GOOGLE_SERVERGROUP_CONFIGURE_SERVERGROUPCONFIGURATION_SERVICE } from '../../serverGroupConfiguration.service';
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_LOADBALANCERSELECTOR_DIRECTIVE =
+  'spinnaker.google.serverGroup.configure.wizard.loadBalancers.selector.directive';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_LOADBALANCERSELECTOR_DIRECTIVE; // for backwards compatibility
+angular
+  .module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_LOADBALANCERSELECTOR_DIRECTIVE, [
+    GCE_HTTP_LOAD_BALANCER_UTILS,
+    GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_LOADBALANCERS_ELSEVENOPTIONS_ELSEVENOPTIONSGENERATOR_COMPONENT,
+    GOOGLE_SERVERGROUP_CONFIGURE_SERVERGROUPCONFIGURATION_SERVICE,
+  ])
+  .directive('gceServerGroupLoadBalancerSelector', function () {
+    return {
+      restrict: 'E',
+      templateUrl: require('./loadBalancerSelector.directive.html'),
+      scope: {},
+      bindToController: {
+        command: '=',
+      },
+      controllerAs: 'vm',
+      controller: 'gceServerGroupLoadBalancerSelectorCtrl',
+    };
+  })
+  .controller('gceServerGroupLoadBalancerSelectorCtrl', [
+    'gceHttpLoadBalancerUtils',
+    function (gceHttpLoadBalancerUtils) {
+      this.showLoadBalancingPolicy = () => {
+        if (_.has(this, 'command.backingData.filtered.loadBalancerIndex')) {
+          const index = this.command.backingData.filtered.loadBalancerIndex;
+          const selected = this.command.loadBalancers;
+
+          return (
+            angular.isDefined(selected) &&
+            _.some(selected, (s) => {
+              return (
+                index[s].loadBalancerType === 'HTTP' ||
+                index[s].loadBalancerType === 'INTERNAL_MANAGED' ||
+                index[s].loadBalancerType === 'SSL' ||
+                index[s].loadBalancerType === 'TCP'
+              );
+            })
+          );
+        }
+      };
+
+      this.isHttpLoadBalancer = (lb) => gceHttpLoadBalancerUtils.isHttpLoadBalancer(lb);
+    },
+  ]);

package/src/serverGroup/configure/wizard/loadBalancers/loadBalancers.html

@@ -0,0 +1,5 @@
+<ng-form name="loadBalancerSubForm">
+  <div>
+    <gce-server-group-load-balancer-selector command="command"></gce-server-group-load-balancer-selector>
+  </div>
+</ng-form>

package/src/serverGroup/configure/wizard/loadBalancingPolicy/loadBalancingPolicySelector.component.html

@@ -0,0 +1,182 @@
+<ng-form name="loadBalancingPolicySubForm">
+  <collapsible-section heading="Port Name Mapping" expanded="true" subsection="true">
+    <div class="form-group">
+      <div class="form-group row" ng-repeat="namedPort in $ctrl.command.loadBalancingPolicy.namedPorts">
+        <div class="col-md-12">
+          <div class="col-md-2 sm-label-right">
+            <b>Name</b>
+            <help-field key="gce.serverGroup.loadBalancingPolicy.portName"></help-field>
+          </div>
+          <div class="col-md-3">
+            <ui-select ng-model="namedPort.name" class="form-control input-sm">
+              <ui-select-match>{{ namedPort.name }}</ui-select-match>
+              <ui-select-choices repeat="portName in $ctrl.getPortNames()">
+                <span ng-bind-html="portName"></span>
+              </ui-select-choices>
+            </ui-select>
+          </div>
+          <div class="col-md-2 sm-label-right">
+            <b>Port</b>
+            <help-field key="gce.serverGroup.loadBalancingPolicy.listeningPort"></help-field>
+          </div>
+          <div class="col-md-3">
+            <input
+              type="number"
+              name="listeningPort"
+              required
+              class="form-control input-sm"
+              ng-model="namedPort.port"
+              max="{{ $ctrl.maxPort }}"
+              min="1"
+            />
+          </div>
+          <div class="col-md-2 sm-label-left">
+            <span
+              class="glyphicon glyphicon-trash"
+              uib-tooltip="Remove Named Port"
+              ng-click="$ctrl.removeNamedPort($index)"
+            ></span>
+          </div>
+          <div
+            class="col-md-4 error-message"
+            ng-if="
+              loadBalancingPolicySubForm.listeningPort.$error.min || loadBalancingPolicySubForm.listeningPort.$error.max
+            "
+          >
+            Must be between 1 and {{ $ctrl.maxPort }}.
+          </div>
+        </div>
+      </div>
+      <div class="col-md-11">
+        <button class="btn btn-block add-new" ng-click="$ctrl.addNamedPort()">
+          <span class="glyphicon glyphicon-plus-sign"></span> Add Port Name Mapping
+        </button>
+      </div>
+    </div>
+  </collapsible-section>
+  <collapsible-section heading="Capacity Metrics" expanded="true" subsection="true">
+    <div class="form-group">
+      <div class="col-md-5 sm-label-right">
+        <b>Balancing Mode</b>
+        <help-field key="gce.serverGroup.loadBalancingPolicy.balancingMode"></help-field>
+      </div>
+      <div class="col-md-3">
+        <ui-select
+          ng-model="$ctrl.command.loadBalancingPolicy.balancingMode"
+          on-select="$ctrl.onBalancingModeChange($item)"
+          class="form-control input-sm"
+          required
+        >
+          <ui-select-match placeholder="Select...">{{ $select.selected }}</ui-select-match>
+          <ui-select-choices repeat="balancingMode in $ctrl.getBalancingModes() | filter: $select.search">
+            <span ng-bind-html="balancingMode"></span>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+    <div ng-switch on="$ctrl.command.loadBalancingPolicy.balancingMode">
+      <div class="form-group" ng-switch-when="UTILIZATION">
+        <div class="col-md-5 sm-label-right">
+          <b>Max CPU utilization</b>
+          <help-field key="gce.serverGroup.loadBalancingPolicy.maxUtilization"></help-field>
+        </div>
+        <div class="col-md-3">
+          <div class="input-group">
+            <input
+              type="number"
+              name="maxUtilization"
+              required
+              class="form-control input-sm"
+              ng-model="$ctrl.maxUtilizationView"
+              ng-init="$ctrl.setView('maxUtilizationView', $ctrl.command.loadBalancingPolicy.maxUtilization)"
+              ng-change="$ctrl.setModel('command.loadBalancingPolicy.maxUtilization', $ctrl.maxUtilizationView)"
+              min="0"
+              max="100"
+            />
+            <span class="input-group-addon">%</span>
+          </div>
+        </div>
+        <div
+          class="col-md-4 error-message"
+          ng-if="
+            loadBalancingPolicySubForm.maxUtilization.$error.min || loadBalancingPolicySubForm.maxUtilization.$error.max
+          "
+        >
+          Must be between 0 and 100%.
+        </div>
+      </div>
+      <div class="form-group" ng-switch-when="RATE">
+        <div class="col-md-5 sm-label-right">
+          <b>Max RPS per instance</b>
+          <help-field key="gce.serverGroup.loadBalancingPolicy.maxRatePerInstance"></help-field>
+        </div>
+        <div class="col-md-3">
+          <div class="input-group">
+            <input
+              type="number"
+              name="maxRatePerInstance"
+              required
+              class="form-control input-sm"
+              ng-model="$ctrl.command.loadBalancingPolicy.maxRatePerInstance"
+              min="0"
+            />
+          </div>
+        </div>
+        <div class="col-md-4 error-message" ng-if="loadBalancingPolicySubForm.maxRatePerInstance.$error.min">
+          Cannot be less than zero.
+        </div>
+      </div>
+      <div class="form-group" ng-switch-when="CONNECTION">
+        <div class="col-md-5 sm-label-right">
+          <b>Max connections per instance</b>
+          <help-field key="gce.serverGroup.loadBalancingPolicy.maxConnectionsPerInstance"></help-field>
+        </div>
+        <div class="col-md-3">
+          <div class="input-group">
+            <input
+              type="number"
+              name="maxConnectionsPerInstance"
+              required
+              class="form-control input-sm"
+              ng-model="$ctrl.command.loadBalancingPolicy.maxConnectionsPerInstance"
+              min="0"
+            />
+          </div>
+        </div>
+        <div class="col-md-4 error-message" ng-if="loadBalancingPolicySubForm.maxConnectionsPerInstance.$error.min">
+          Cannot be less than zero.
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-5 sm-label-right">
+        <b>Capacity</b>
+        <help-field key="gce.serverGroup.loadBalancingPolicy.capacityScaler"></help-field>
+      </div>
+      <div class="col-md-3">
+        <div class="input-group">
+          <input
+            type="number"
+            name="capacityScaler"
+            required
+            class="form-control input-sm"
+            ng-model="$ctrl.capacityScalerView"
+            ng-init="$ctrl.setView('capacityScalerView', $ctrl.command.loadBalancingPolicy.capacityScaler)"
+            ng-change="$ctrl.setModel('command.loadBalancingPolicy.capacityScaler', $ctrl.capacityScalerView)"
+            min="0"
+            max="100"
+          />
+          <span class="input-group-addon">%</span>
+        </div>
+      </div>
+      <div
+        class="col-md-4 error-message"
+        ng-if="
+          loadBalancingPolicySubForm.capacityScaler.$error.min || loadBalancingPolicySubForm.capacityScaler.$error.max
+        "
+      >
+        Must be between 0 and 100%.
+      </div>
+    </div>
+  </collapsible-section>
+</ng-form>

package/src/serverGroup/configure/wizard/loadBalancingPolicy/loadBalancingPolicySelector.component.less

@@ -0,0 +1,11 @@
+gce-load-balancing-policy-selector {
+  .collapsible-subsection {
+    .collapsible-subheading {
+      padding-left: 4%;
+    }
+
+    .ng-invalid {
+      border: 1px solid var(--color-danger);
+    }
+  }
+}