@spinnaker/google 0.0.0-main-2

package/src/autoscalingPolicy/components/metricSettings/metricSettings.component.html

@@ -0,0 +1,208 @@
+<collapsible-section heading="CPU Utilization" expanded="true" subsection="true">
+  <div class="section-body">
+    <ng-form name="cpuUtilization">
+      <div ng-if="$ctrl.showMetric('cpuUtilization')">
+        <div class="row">
+          <div class="col-md-4 sm-label-right">
+            Utilization Target (%)
+            <help-field key="gce.serverGroup.scalingPolicy.cpuUtilization"></help-field>
+          </div>
+          <div class="col-md-2 content-fields">
+            <input
+              type="number"
+              min="1"
+              max="99"
+              name="utilizationTarget"
+              class="form-control input-sm"
+              required
+              ng-model="$ctrl.cpuUtilizationTargetDisplay"
+              ng-init="$ctrl.initializeTargetDisplay('cpuUtilization')"
+              ng-change="$ctrl.setUtilizationTargetFromDisplay('cpuUtilization', $ctrl.cpuUtilizationTargetDisplay)"
+            />
+          </div>
+          <div class="col-md-5 error-message">
+            <span ng-if="cpuUtilization.utilizationTarget.$error.min || cpuUtilization.utilizationTarget.$error.max">
+              Must be between 1 and 99.</span
+            >
+          </div>
+          <div class="col-md-1">
+            <button class="btn btn-sm btn-default" ng-click="$ctrl.deleteMetric('cpuUtilization')">
+              <span class="glyphicon glyphicon-trash visible-lg-inline"></span>
+              <span class="visible-lg-inline">Delete</span>
+            </button>
+          </div>
+        </div>
+        <gce-predictive-autoscaling policy="$ctrl.policy" update-policy="$ctrl.updatePolicy">
+        </gce-predictive-autoscaling>
+      </div>
+      <button
+        ng-hide="$ctrl.showMetric('cpuUtilization')"
+        class="add-new col-md-12"
+        ng-click="$ctrl.addMetric('cpuUtilization')"
+      >
+        <span class="glyphicon glyphicon-plus-sign"></span> Add CPU Utilization metric
+      </button>
+    </ng-form>
+  </div>
+</collapsible-section>
+<collapsible-section heading="Load Balancing Utilization" expanded="true" subsection="true">
+  <div class="section-body">
+    <ng-form name="loadBalancingUtilization">
+      <div ng-if="$ctrl.showMetric('loadBalancingUtilization')" class="row">
+        <div class="col-md-3 sm-label-right">
+          Utilization Target (%)
+          <help-field key="gce.serverGroup.scalingPolicy.loadBalancingUtilization"></help-field>
+        </div>
+        <div class="col-md-2 content-fields">
+          <input
+            type="number"
+            min="1"
+            max="99"
+            class="form-control input-sm"
+            required
+            name="utilizationTarget"
+            ng-model="$ctrl.loadBalancingUtilizationTargetDisplay"
+            ng-init="$ctrl.initializeTargetDisplay('loadBalancingUtilization')"
+            ng-change="$ctrl.setUtilizationTargetFromDisplay('loadBalancingUtilization', $ctrl.loadBalancingUtilizationTargetDisplay)"
+          />
+        </div>
+        <div class="col-md-5 error-message">
+          <span
+            ng-if="
+              loadBalancingUtilization.utilizationTarget.$error.min ||
+              loadBalancingUtilization.utilizationTarget.$error.max
+            "
+          >
+            Must be between 1 and 99.
+          </span>
+        </div>
+        <div class="col-md-1">
+          <button class="btn btn-sm btn-default" ng-click="$ctrl.deleteMetric('loadBalancingUtilization')">
+            <span class="glyphicon glyphicon-trash visible-lg-inline"></span>
+            <span class="visible-lg-inline">Delete</span>
+          </button>
+        </div>
+      </div>
+      <button
+        ng-hide="$ctrl.showMetric('loadBalancingUtilization')"
+        class="add-new col-md-12"
+        ng-click="$ctrl.addMetric('loadBalancingUtilization')"
+      >
+        <span class="glyphicon glyphicon-plus-sign"></span> Add Load Balancing metric
+      </button>
+    </ng-form>
+  </div>
+</collapsible-section>
+
+<collapsible-section heading="Custom Metric Utilizations" expanded="true" subsection="true">
+  <div class="section-body" ng-repeat="custom in $ctrl.policy.customMetricUtilizations track by $index">
+    <hr ng-if="$index > 0" />
+
+    <div class="row">
+      <div class="col-md-3 sm-label-right">Metric Identifier</div>
+      <div class="col-md-3 content-fields">
+        <input class="form-control input-sm" required ng-model="custom.metric" />
+      </div>
+      <div class="col-md-offset-4 col-md-1">
+        <button class="btn btn-sm btn-default" ng-click="$ctrl.deleteMetric('customMetricUtilizations', $index)">
+          <span class="glyphicon glyphicon-trash visible-lg-inline"></span>
+          <span class="visible-lg-inline">Delete</span>
+        </button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-3 sm-label-right">Additional Filter Expression</div>
+      <div class="col-md-3 content-fields">
+        <input class="form-control input-sm" ng-model="custom.filter" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-3 sm-label-right">Metric Export Scope</div>
+      <div class="col-md-3">
+        <select
+          class="form-control input-sm"
+          ng-options="value as displayValue for (value, displayValue) in $ctrl.metricScopeTypesToDisplayMap"
+          ng-model="custom.metricExportScope"
+          required
+        ></select>
+      </div>
+    </div>
+
+    <div ng-if="$ctrl.isSingleTimeSeriesPerGroup('SINGLE_TIME_SERIES_PER_GROUP', $index)">
+      <div class="row">
+        <div class="col-md-3 sm-label-right">Scaling Policy</div>
+        <div class="col-md-3">
+          <select
+            class="form-control input-sm"
+            ng-options="value as displayValue for (value, displayValue) in $ctrl.scalingpolicyTypesToDisplayMap"
+            ng-model="custom.scalingpolicy"
+            required
+          ></select>
+        </div>
+      </div>
+
+      <div ng-if="$ctrl.isScalingPolicySingleInstanceAssignment('SINGLE_INSTANCE_ASSIGNMENT', $index)">
+        <div class="row">
+          <div class="col-md-3 sm-label-right">Single Instance Assignment</div>
+          <div class="col-md-3 content-fields">
+            <input
+              type="number"
+              name="singleInstanceAssignment"
+              class="form-control input-sm"
+              required
+              ng-model="custom.singleInstanceAssignment"
+              min="0"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      ng-if="
+        !$ctrl.isScalingPolicySingleInstanceAssignment('SINGLE_INSTANCE_ASSIGNMENT', $index) ||
+        !$ctrl.isSingleTimeSeriesPerGroup('SINGLE_TIME_SERIES_PER_GROUP', $index)
+      "
+    >
+      <div class="row">
+        <div class="col-md-3 sm-label-right">
+          Utilization Target
+          <help-field key="gce.serverGroup.scalingPolicy.customMetricUtilizations"></help-field>
+        </div>
+        <div class="col-md-3 content-fields">
+          <input
+            type="number"
+            name="utilizationTarget"
+            class="form-control input-sm"
+            required
+            ng-model="custom.utilizationTarget"
+          />
+        </div>
+        <div class="col-md-3">
+          <select
+            class="form-control input-sm"
+            ng-options="value as displayValue for (value, displayValue) in $ctrl.targetTypesToDisplayMap"
+            ng-model="custom.utilizationTargetType"
+            required
+          >
+            <option value="">-- Target Type --</option>
+          </select>
+        </div>
+        <div class="col-md-5 error-message" ng-if="custom.utilizationTarget <= 0">
+          Utilization target must be greater than 0.0.
+        </div>
+      </div>
+    </div>
+  </div>
+  <button class="add-new col-md-12" ng-click="$ctrl.addMetric('customMetricUtilizations')">
+    <span class="glyphicon glyphicon-plus-sign"></span> Add custom metric
+  </button>
+</collapsible-section>
+<div class="row">
+  <div class="col-md-12" ng-if="$ctrl.showNoMetricsWarning()">
+    <div class="alert alert-warning text-center">
+      <i class="fa fa-exclamation-triangle pull-left"></i>
+      <span>At least one metric is required.</span>
+    </div>
+  </div>
+</div>

package/src/autoscalingPolicy/components/metricSettings/metricSettings.component.js

@@ -0,0 +1,108 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+
+export const GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_METRICSETTINGS_METRICSETTINGS_COMPONENT =
+  'spinnaker.deck.gce.autoscalingPolicy.metricSettings.component';
+export const name = GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_METRICSETTINGS_METRICSETTINGS_COMPONENT; // for backwards compatibility
+module(GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_METRICSETTINGS_METRICSETTINGS_COMPONENT, []).component(
+  'gceAutoscalingPolicyMetricSettings',
+  {
+    bindings: {
+      policy: '=',
+      showNoMetricsWarning: '=',
+      updatePolicy: '<',
+    },
+    templateUrl: require('./metricSettings.component.html'),
+    controller: function () {
+      this.$onInit = () => {
+        const multipleAllowedFor = {
+          cpuUtilization: false,
+          loadBalancingUtilization: false,
+          customMetricUtilizations: true,
+        };
+
+        const metricTypes = Object.keys(multipleAllowedFor);
+
+        this.targetTypesToDisplayMap = {
+          GAUGE: 'Gauge',
+          DELTA_PER_SECOND: 'Delta / second',
+          DELTA_PER_MINUTE: 'Delta / minute',
+        };
+
+        this.metricScopeTypesToDisplayMap = {
+          TIME_SERIES_PER_INSTANCE: 'Time series per instance',
+          SINGLE_TIME_SERIES_PER_GROUP: 'Single time series per group',
+        };
+
+        this.scalingpolicyTypesToDisplayMap = {
+          UTILIZATION_TARGET: 'Utilization target',
+          SINGLE_INSTANCE_ASSIGNMENT: 'singleInstanceAssignment',
+        };
+
+        this.addMetric = (metricType) => {
+          if (multipleAllowedFor[metricType]) {
+            this.policy[metricType] = this.policy[metricType] || [];
+            this.policy[metricType].push({});
+          } else if (emptyOrUndefined(this.policy[metricType])) {
+            this.policy[metricType] = { utilizationTarget: null };
+          }
+        };
+
+        this.deleteMetric = (metricType, index) => {
+          if (multipleAllowedFor[metricType]) {
+            this.policy[metricType].splice(index, 1);
+          } else {
+            // sending an empty object to the API deletes the policy.
+            this.policy[metricType] = {};
+          }
+        };
+
+        this.showMetric = (metricType) => {
+          const metric = this.policy[metricType];
+          // should not show policy form if the policy is undefined or an empty object.
+          return !emptyOrUndefined(metric);
+        };
+
+        this.isSingleTimeSeriesPerGroup = (scopeType, index) => {
+          if (this.policy.customMetricUtilizations[index].metricExportScope === scopeType) return true;
+        };
+
+        this.isScalingPolicySingleInstanceAssignment = (policyType, index) => {
+          if (this.policy.customMetricUtilizations[index].scalingpolicy === policyType) return true;
+        };
+
+        this.showNoMetricsWarning = () => {
+          return _.every(
+            metricTypes.map((type) => {
+              return _.some([
+                multipleAllowedFor[type] && !_.get(this.policy, [type, 'length']),
+                emptyOrUndefined(this.policy[type]),
+              ]);
+            }),
+          );
+        };
+
+        this.setUtilizationTargetFromDisplay = (metricType, value) => {
+          this.policy[metricType].utilizationTarget = value / 100;
+        };
+
+        this.initializeTargetDisplay = (metricType) => {
+          this[`${metricType}TargetDisplay`] = safeDecimalToPercent(this.policy[metricType].utilizationTarget);
+        };
+
+        function safeDecimalToPercent(value) {
+          if (value === 0) {
+            return 0;
+          }
+          return value ? Math.round(value * 100) : undefined;
+        }
+
+        function emptyOrUndefined(value) {
+          return _.isEqual(value, {}) || _.isUndefined(value);
+        }
+      };
+    },
+  },
+);

package/src/autoscalingPolicy/components/scalingSchedules/scalingSchedules.component.html

@@ -0,0 +1,84 @@
+<ng-form name="scalingSchedulesForm">
+  <div class="section-body" ng-repeat="schedule in $ctrl.policy.scalingSchedules track by $index">
+    <ng-form name="scalingSchedule">
+      <hr ng-if="$index > 0" />
+
+      <div class="row">
+        <div class="col-md-3 sm-label-right">Name</div>
+        <div class="col-md-3 content-fields">
+          <input class="form-control input-sm" required ng-model="schedule.scheduleName" />
+        </div>
+        <div class="col-md-offset-4 col-md-1">
+          <button class="btn btn-sm btn-default" ng-click="$ctrl.deleteSchedule('scalingSchedules', $index)">
+            <span class="glyphicon glyphicon-trash visible-lg-inline"></span>
+            <span class="visible-lg-inline">Delete</span>
+          </button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-3 sm-label-right">Description</div>
+        <div class="col-md-3 content-fields">
+          <input class="form-control input-sm" ng-model="schedule.scheduleDescription" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-3 sm-label-right">Enabled</div>
+        <input type="checkbox" class="col-md-1" ng-model="schedule.enabled" value="{schedule.enabled}" />
+      </div>
+      <div class="row">
+        <div class="col-md-3 sm-label-right">Minimum required instances</div>
+        <div class="col-md-3 content-fields">
+          <input
+            type="number"
+            name="minimumRequiredInstances"
+            class="form-control input-sm"
+            min="0"
+            required
+            ng-model="schedule.minimumRequiredInstances"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-3 sm-label-right">
+          CRON Expression
+          <help-field key="gce.serverGroup.scalingPolicy.cronExpression"></help-field>
+        </div>
+        <div class="col-md-3 content-fields">
+          <input class="form-control input-sm" required ng-model="schedule.scheduleCron" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-3 sm-label-right">Time Zone</div>
+        <div class="col-md-3">
+          <gce-timezone-select
+            available-timezones="$ctrl.timezones"
+            selected-timezone="$ctrl.policy.scalingSchedules[$index].timezone"
+            select-timezone="$ctrl.selectTimezone"
+            target="$index"
+          ></gce-timezone-select>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-3 sm-label-right">Duration (seconds)</div>
+        <div class="col-md-3 content-fields">
+          <input
+            type="number"
+            name="duration"
+            class="form-control input-sm"
+            required
+            ng-model="schedule.duration"
+            min="301"
+          />
+        </div>
+        <div class="col-md-4 error-message" ng-if="scalingSchedule.duration.$error.min">
+          Must be greater than 300 seconds.
+        </div>
+      </div>
+    </ng-form>
+  </div>
+  <div class="schedule-container">
+    <button class="add-new col-md-12" ng-click="$ctrl.addSchedule('scalingSchedules')">
+      <span class="glyphicon glyphicon-plus-sign"></span> Add Scaling Schedule
+    </button>
+  </div>
+</ng-form>

package/src/autoscalingPolicy/components/scalingSchedules/scalingSchedules.component.js

@@ -0,0 +1,61 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+import timezones from './standardTimezone.json';
+
+export const GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_SCALINGSCHEDULES_SCALINGSCHEDULES_COMPONENT =
+  'spinnaker.deck.gce.autoscalingPolicy.scalingSchedules.component';
+export const name = GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_SCALINGSCHEDULES_SCALINGSCHEDULES_COMPONENT; // for backwards compatibility
+module(GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_SCALINGSCHEDULES_SCALINGSCHEDULES_COMPONENT, []).component(
+  'gceAutoscalingPolicyScalingSchedules',
+  {
+    bindings: {
+      policy: '=',
+      updatePolicy: '<',
+    },
+    templateUrl: require('./scalingSchedules.component.html'),
+    controller: function () {
+      this.$onInit = () => {
+        const multipleAllowedFor = {
+          scalingSchedules: true,
+        };
+
+        this.timezones = timezones;
+
+        this.addSchedule = (scheduleType) => {
+          if (multipleAllowedFor[scheduleType]) {
+            this.policy[scheduleType] = this.policy[scheduleType] || [];
+            this.policy[scheduleType].push({});
+          } else if (emptyOrUndefined(this.policy[scheduleType])) {
+            this.policy[scheduleType] = {};
+          }
+        };
+
+        this.deleteSchedule = (scheduleType, index) => {
+          if (multipleAllowedFor[scheduleType]) {
+            this.policy[scheduleType].splice(index, 1);
+          } else {
+            // sending an empty object to the API deletes the policy.
+            this.policy[scheduleType] = {};
+          }
+        };
+
+        this.selectTimezone = (timezone, index) => {
+          const { scalingSchedules } = this.policy;
+          const schedule = scalingSchedules[index];
+          scalingSchedules[index] = { ...schedule, timezone };
+
+          this.updatePolicy({
+            ...this.policy,
+            scalingSchedules: [...scalingSchedules],
+          });
+        };
+
+        function emptyOrUndefined(value) {
+          return _.isEqual(value, {}) || _.isUndefined(value);
+        }
+      };
+    },
+  },
+);