capacity dialogs from aws to titus

serverGroup/configure/serverGroup.configure.titus.module.js

@@ -2,13 +2,14 @@
 
 const angular = require('angular');
 
+import { CAPACITY_SELECTOR } from './wizard/capacity/capacitySelector.component';
+
 module.exports = angular.module('spinnaker.serverGroup.configure.titus', [
   require('./wizard/deployInitializer.controller.js').name,
   require('./serverGroupConfiguration.service.js').name,
   require('./wizard/ServerGroupBasicSettings.controller.js').name,
   require('./wizard/ServerGroupResources.controller.js').name,
-  require('./wizard/ServerGroupCapacity.controller.js').name,
   require('./wizard/ServerGroupParameters.controller.js').name,
   require('./serverGroupBasicSettingsSelector.directive.js').name,
-  require('./serverGroupCapacitySelector.directive.js').name,
+  CAPACITY_SELECTOR,
 ]);

serverGroup/configure/wizard/CloneServerGroup.titus.controller.js

@@ -15,7 +15,7 @@ module.exports = angular.module('spinnaker.serverGroup.configure.titus.cloneServ
       templateSelection: require('./templateSelection.html'),
       basicSettings: require('./basicSettings.html'),
       resources: require('./resources.html'),
-      capacity: require('./capacity.html'),
+      capacity: require('./capacity/capacity.html'),
       securityGroups: require('./securityGroups.html'),
       parameters: require('./parameters.html'),
     };

serverGroup/configure/wizard/capacity/capacity.html

@@ -0,0 +1,7 @@
+<div class="clearfix">
+  <div class="row">
+    <div class="col-md-12">
+      <titus-server-group-capacity-selector command="command"></titus-server-group-capacity-selector>
+    </div>
+  </div>
+</div>

serverGroup/configure/wizard/capacity/capacitySelector.component.html

@@ -0,0 +1,70 @@
+<div ng-if="!$ctrl.command.viewState.useSimpleCapacity">
+  <div class="form-group">
+    <div class="col-md-12">
+      <p>Sets up auto-scaling for this server group.</p>
+      <p>To disable auto-scaling, use the <a href ng-click="$ctrl.setSimpleCapacity(true)">Simple Mode</a>.</p>
+    </div>
+  </div>
+
+  <div class="form-group"
+       ng-if="!$ctrl.command.viewState.readOnlyFields.useSourceCapacity && $ctrl.command.viewState.mode === 'editPipeline'">
+    <div class="col-md-3 sm-label-right">Capacity</div>
+    <div class="col-md-9 radio">
+      <label>
+        <input type="radio"
+               ng-model="$ctrl.command.useSourceCapacity"
+               ng-value="true"
+               id="useSourceCapacityTrue"
+               ng-change="$ctrl.useSourceCapacityUpdated()"/>
+        Copy the capacity from the current server group
+        <help-field key="serverGroupCapacity.useSourceCapacityTrue"></help-field>
+      </label>
+    </div>
+    <div class="col-md-9 col-md-offset-3 radio" ng-if="$ctrl.command.useSourceCapacity" style="padding-left: 35px">
+      <div>
+        If no current server group is found,
+        <select ng-model="$ctrl.command.preferSourceCapacity"
+                ng-options="option.value as option.label for option in $ctrl.preferSourceCapacityOptions"/>
+      </div>
+      <div ng-if="$ctrl.command.preferSourceCapacity">
+        <b>Fallback values</b>
+        <div ng-include="$ctrl.minMaxDesiredTemplate"></div>
+      </div>
+    </div>
+
+    <div class="col-md-9 col-md-offset-3 radio">
+      <label>
+        <input type="radio"
+               ng-model="$ctrl.command.useSourceCapacity"
+               ng-value="false"
+               id="useSourceCapacityFalse"
+               ng-change="$ctrl.useSourceCapacityUpdated()"/>
+        Let me specify the capacity
+        <help-field key="serverGroupCapacity.useSourceCapacityFalse"></help-field>
+      </label>
+    </div>
+  </div>
+  <div ng-if="!$ctrl.command.useSourceCapacity || $ctrl.command.viewState.mode !== 'editPipeline'">
+    <div class="col-md-9 col-md-offset-3">
+      <div ng-include="$ctrl.minMaxDesiredTemplate"></div>
+    </div>
+  </div>
+</div>
+
+<div ng-if="$ctrl.command.viewState.useSimpleCapacity">
+  <div class="form-group">
+    <div class="col-md-12">
+      <p>Sets min, max, and desired instance counts to the same value.</p>
+
+      <p> To allow true auto-scaling, use the <a href ng-click="$ctrl.setSimpleCapacity(false)">Advanced Mode</a>.</p>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right">Number of Instances</div>
+    <div class="col-md-2"><input type="number" ng-change="$ctrl.setMinMax($ctrl.command.capacity.desired)"
+                                 class="form-control input-sm"
+                                 ng-model="$ctrl.command.capacity.desired"
+                                 min="0"
+                                 required/></div>
+  </div>
+</div>

serverGroup/configure/wizard/capacity/capacitySelector.component.ts

@@ -0,0 +1,38 @@
+import { module } from 'angular';
+
+export const CAPACITY_SELECTOR = 'spinnaker.titus.serverGroup.configure.wizard.capacity.selector';
+module(CAPACITY_SELECTOR, [])
+  .component('titusServerGroupCapacitySelector', {
+    bindings: {
+      command: '=',
+    },
+    templateUrl: require('./capacitySelector.component.html'),
+    controller: function () {
+      this.minMaxDesiredTemplate = require('./minMaxDesiredFields.template.html');
+
+      this.preferSourceCapacityOptions = [
+        { label: 'fail the stage', value: undefined },
+        { label: 'use fallback values', value: true },
+      ];
+
+      this.useSourceCapacityUpdated = () => {
+        if (!this.command.useSourceCapacity) {
+          delete this.command.preferSourceCapacity;
+        }
+      };
+
+      this.setSimpleCapacity = (simpleCapacity: boolean) => {
+        this.command.viewState.useSimpleCapacity = simpleCapacity;
+        this.command.useSourceCapacity = false;
+        this.setMinMax(this.command.capacity.desired);
+      };
+
+      this.setMinMax = (newVal: number) => {
+        if (this.command.viewState.useSimpleCapacity) {
+          this.command.capacity.min = newVal;
+          this.command.capacity.max = newVal;
+          this.command.useSourceCapacity = false;
+        }
+      };
+    }
+  });

serverGroup/configure/wizard/capacity/minMaxDesiredFields.template.html

@@ -0,0 +1,32 @@
+<div>
+  <div class="form-group row">
+    <div class="col-md-2">Min</div>
+    <div class="col-md-2">Max</div>
+    <div class="col-md-2">Desired</div>
+  </div>
+  <div class="form-group row">
+    <div class="col-md-2">
+      <input type="number"
+             class="form-control input-sm"
+             ng-model="$ctrl.command.capacity.min"
+             min="0"
+             max="{{$ctrl.command.capacity.max}}"
+             required/>
+    </div>
+    <div class="col-md-2">
+      <input type="number"
+             class="form-control input-sm"
+             ng-model="$ctrl.command.capacity.max"
+             min="{{$ctrl.command.capacity.min}}"
+             required/>
+    </div>
+    <div class="col-md-2">
+      <input type="number"
+             class="form-control input-sm"
+             ng-model="$ctrl.command.capacity.desired"
+             min="{{$ctrl.command.capacity.min}}"
+             max="{{$ctrl.command.capacity.max}}"
+             required/>
+    </div>
+  </div>
+</div>