@spinnaker/google 0.0.0-main-2

package/src/serverGroup/details/autoHealingPolicy/autoHealingPolicy.component.ts

@@ -0,0 +1,73 @@
+import type { IComponentOptions, IController } from 'angular';
+import { module } from 'angular';
+import type { IModalService } from 'angular-ui-bootstrap';
+
+import type { Application } from '@spinnaker/core';
+import { ConfirmationModalService } from '@spinnaker/core';
+import type { IGceServerGroup } from '../../../domain/index';
+
+class GceAutoHealingPolicyDetailsCtrl implements IController {
+  public serverGroup: IGceServerGroup;
+  public application: Application;
+
+  public static $inject = ['$uibModal', 'gceAutoscalingPolicyWriter'];
+  constructor(private $uibModal: IModalService, private gceAutoscalingPolicyWriter: any) {}
+
+  public editPolicy(): void {
+    this.$uibModal.open({
+      templateUrl: require('./modal/upsertAutoHealingPolicy.modal.html'),
+      controller: 'gceUpsertAutoHealingPolicyModalCtrl',
+      controllerAs: 'ctrl',
+      size: 'md',
+      resolve: {
+        application: () => this.application,
+        serverGroup: () => this.serverGroup,
+      },
+    });
+  }
+
+  public deletePolicy(): void {
+    const taskMonitor = {
+      application: this.application,
+      title: `Deleting autohealing policy for ${this.serverGroup.name}`,
+    };
+
+    ConfirmationModalService.confirm({
+      header: `Really delete autohealer for ${this.serverGroup.name}?`,
+      buttonText: 'Delete autohealer',
+      account: this.serverGroup.account,
+      taskMonitorConfig: taskMonitor,
+      submitMethod: () => this.gceAutoscalingPolicyWriter.deleteAutoHealingPolicy(this.application, this.serverGroup),
+    });
+  }
+}
+
+const gceAutoHealingPolicyDetails: IComponentOptions = {
+  bindings: { serverGroup: '<', application: '<' },
+  template: `
+    <dt>
+      Health Check
+      <help-field key="gce.serverGroup.autoHealing"></help-field>
+    </dt>
+    <dd>{{$ctrl.serverGroup.autoHealingPolicyHealthCheck}}</dd>
+    <dt>
+      Initial Delay
+      <help-field key="gce.serverGroup.initialDelaySec"></help-field>
+    </dt>
+    <dd>{{$ctrl.serverGroup.initialDelaySec}} seconds</dd>
+    <dt ng-if="$ctrl.serverGroup.maxUnavailable">
+      Max Unavailable
+      <help-field key="gce.serverGroup.maxUnavailable"></help-field>
+    </dt>
+    <dd ng-if="$ctrl.serverGroup.maxUnavailable">{{$ctrl.serverGroup.maxUnavailable}}</dd>
+    <action-icons class="text-right"
+                  edit="$ctrl.editPolicy()"
+                  edit-info="Edit Policy"
+                  destroy="$ctrl.deletePolicy()"
+                  destroy-info="Delete Policy">
+    </action-icons>`,
+  controller: GceAutoHealingPolicyDetailsCtrl,
+};
+
+export const GCE_AUTOHEALING_POLICY_DETAILS = 'spinnaker.gce.autoHealingPolicyDetails.component';
+module(GCE_AUTOHEALING_POLICY_DETAILS, []).component('gceAutoHealingPolicyDetails', gceAutoHealingPolicyDetails);

package/src/serverGroup/details/autoHealingPolicy/modal/upsertAutoHealingPolicy.modal.controller.ts

@@ -0,0 +1,88 @@
+import type { IController } from 'angular';
+import { module } from 'angular';
+import type { IModalServiceInstance } from 'angular-ui-bootstrap';
+import { cloneDeep } from 'lodash';
+
+import type { Application } from '@spinnaker/core';
+import { TaskMonitor } from '@spinnaker/core';
+import { GOOGLE_AUTOSCALINGPOLICY_AUTOSCALINGPOLICY_WRITE_SERVICE } from '../../../../autoscalingPolicy/autoscalingPolicy.write.service';
+import type { IGceAutoHealingPolicy, IGceServerGroup } from '../../../../domain/index';
+import type { GceHealthCheckReader } from '../../../../healthCheck/healthCheck.read.service';
+import { GCE_HEALTH_CHECK_READER } from '../../../../healthCheck/healthCheck.read.service';
+import type { IGceHealthCheckOption } from '../../../../healthCheck/healthCheckUtils';
+import { getHealthCheckOptions } from '../../../../healthCheck/healthCheckUtils';
+
+import './upsertAutoHealingPolicy.modal.less';
+
+class GceUpsertAutoHealingPolicyModalCtrl implements IController {
+  public autoHealingPolicy: IGceAutoHealingPolicy;
+  public taskMonitor: TaskMonitor;
+  public healthChecks: IGceHealthCheckOption[];
+  public action: 'Edit' | 'New';
+  public isNew: boolean;
+  public submitButtonLabel: string;
+
+  public static $inject = [
+    '$uibModalInstance',
+    'application',
+    'serverGroup',
+    'gceHealthCheckReader',
+    'gceAutoscalingPolicyWriter',
+  ];
+  constructor(
+    private $uibModalInstance: IModalServiceInstance,
+    private application: Application,
+    public serverGroup: IGceServerGroup,
+    private gceHealthCheckReader: GceHealthCheckReader,
+    private gceAutoscalingPolicyWriter: any,
+  ) {
+    this.initialize();
+  }
+
+  public submit(): void {
+    const submitMethod = () => {
+      return this.gceAutoscalingPolicyWriter.upsertAutoHealingPolicy(
+        this.application,
+        this.serverGroup,
+        this.autoHealingPolicy,
+      );
+    };
+    this.taskMonitor.submit(submitMethod);
+  }
+
+  public cancel(): void {
+    this.$uibModalInstance.dismiss();
+  }
+
+  public setAutoHealingPolicy(autoHealingPolicy: IGceAutoHealingPolicy): void {
+    this.autoHealingPolicy = autoHealingPolicy;
+  }
+
+  public onHealthCheckRefresh(): void {
+    this.gceHealthCheckReader.listHealthChecks().then((healthChecks) => {
+      const matchingHealthChecks = healthChecks.filter((hc) => hc.account === this.serverGroup.account);
+      this.healthChecks = getHealthCheckOptions(matchingHealthChecks);
+    });
+  }
+
+  private initialize(): void {
+    this.onHealthCheckRefresh();
+    this.action = this.serverGroup.autoHealingPolicy ? 'Edit' : 'New';
+    this.isNew = !this.serverGroup.autoHealingPolicy;
+    this.submitButtonLabel = this.isNew ? 'Create' : 'Update';
+    if (!this.isNew) {
+      this.autoHealingPolicy = cloneDeep(this.serverGroup.autoHealingPolicy);
+    }
+    this.taskMonitor = new TaskMonitor({
+      application: this.application,
+      title: `${this.action} autohealing policy for ${this.serverGroup.name}`,
+      modalInstance: this.$uibModalInstance,
+    });
+  }
+}
+
+export const GCE_UPSERT_AUTOHEALING_POLICY_MODAL_CTRL = 'spinnaker.gce.upsertAutoHealingPolicy.modal.controller';
+module(GCE_UPSERT_AUTOHEALING_POLICY_MODAL_CTRL, [
+  GCE_HEALTH_CHECK_READER,
+  GOOGLE_AUTOSCALINGPOLICY_AUTOSCALINGPOLICY_WRITE_SERVICE,
+]).controller('gceUpsertAutoHealingPolicyModalCtrl', GceUpsertAutoHealingPolicyModalCtrl);

package/src/serverGroup/details/autoHealingPolicy/modal/upsertAutoHealingPolicy.modal.html

@@ -0,0 +1,29 @@
+<div modal-page class="form-inline gce-auto-healing-policy-modal">
+  <task-monitor monitor="ctrl.taskMonitor"></task-monitor>
+  <modal-close dismiss="$dismiss()"></modal-close>
+  <div class="modal-header">
+    <h4 class="modal-title">{{ctrl.action}} autohealing policy</h4>
+  </div>
+  <ng-form name="autoHealingPolicyUpsertModal">
+    <div class="modal-body clearfix">
+      <gce-auto-healing-policy-selector
+        on-health-check-refresh="ctrl.onHealthCheckRefresh()"
+        set-auto-healing-policy="ctrl.setAutoHealingPolicy(autoHealingPolicy)"
+        health-checks="ctrl.healthChecks"
+        enabled="true"
+        label-columns="4"
+        auto-healing-policy="ctrl.autoHealingPolicy"
+      ></gce-auto-healing-policy-selector>
+    </div>
+  </ng-form>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <submit-button
+      is-disabled="!autoHealingPolicyUpsertModal.$valid"
+      label="$ctrl.submitButtonLabel"
+      submitting="ctrl.taskMonitor.submitting"
+      on-click="ctrl.submit()"
+      is-new="ctrl.isNew"
+    ></submit-button>
+  </div>
+</div>

package/src/serverGroup/details/autoHealingPolicy/modal/upsertAutoHealingPolicy.modal.less

@@ -0,0 +1,13 @@
+.gce-auto-healing-policy-modal {
+  .form-group {
+    width: 100%;
+    margin-top: 10px;
+  }
+
+  .input-group {
+    width: 100%;
+    .input-group-addon {
+      width: 20%;
+    }
+  }
+}

package/src/serverGroup/details/autoscalingPolicy/addAutoscalingPolicyButton.component.js

@@ -0,0 +1,38 @@
+import { module } from 'angular';
+import ANGULAR_UI_BOOTSTRAP from 'angular-ui-bootstrap';
+
+import { GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_MODAL_UPSERTAUTOSCALINGPOLICY_MODAL_CONTROLLER } from './modal/upsertAutoscalingPolicy.modal.controller';
+
+('use strict');
+
+export const GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_ADDAUTOSCALINGPOLICYBUTTON_COMPONENT =
+  'spinnaker.gce.serverGroup.details.scalingPolicy.addButton';
+export const name = GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_ADDAUTOSCALINGPOLICYBUTTON_COMPONENT; // for backwards compatibility
+module(GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_ADDAUTOSCALINGPOLICYBUTTON_COMPONENT, [
+  ANGULAR_UI_BOOTSTRAP,
+  GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_MODAL_UPSERTAUTOSCALINGPOLICY_MODAL_CONTROLLER,
+]).component('gceAddAutoscalingPolicyButton', {
+  bindings: {
+    serverGroup: '=',
+    application: '=',
+  },
+  template: '<a href ng-click="$ctrl.addAutoscalingPolicy()">Create new scaling policy</a>',
+  controller: [
+    '$uibModal',
+    function ($uibModal) {
+      this.addAutoscalingPolicy = () => {
+        $uibModal.open({
+          templateUrl: require('./modal/upsertAutoscalingPolicy.modal.html'),
+          controller: 'gceUpsertAutoscalingPolicyModalCtrl',
+          controllerAs: 'ctrl',
+          size: 'lg',
+          resolve: {
+            policy: () => undefined,
+            serverGroup: () => this.serverGroup,
+            application: () => this.application,
+          },
+        });
+      };
+    },
+  ],
+});

package/src/serverGroup/details/autoscalingPolicy/autoscalingPolicy.directive.html

@@ -0,0 +1,49 @@
+<dl class="horizontal-when-filters-collapsed" style="margin-bottom: 20px">
+  <dt ng-repeat-start="basis in $ctrl.policy.bases">
+    Target {{basis.description}}
+    <help-field key="{{basis.helpKey}}"></help-field>
+  </dt>
+  <dd ng-repeat-end>
+    <div ng-repeat="target in basis.targets">{{target}}</div>
+  </dd>
+  <dt ng-if="$ctrl.predictiveAutoscalingEnabled">Predictive Autoscaling</dt>
+  <dd ng-if="$ctrl.predictiveAutoscalingEnabled">{{$ctrl.policy.cpuUtilization.predictiveMethod}}</dd>
+  <dt>
+    Min # VMs
+    <help-field key="gce.serverGroup.autoscaling.minVMs"></help-field>
+  </dt>
+  <dd>{{$ctrl.policy.minNumReplicas}}</dd>
+  <dt>
+    Max # VMs
+    <help-field key="gce.serverGroup.autoscaling.maxVMs"></help-field>
+  </dt>
+  <dd>{{$ctrl.policy.maxNumReplicas}}</dd>
+  <dt>
+    Cool-down Period
+    <help-field key="gce.serverGroup.autoscaling.cooldown"></help-field>
+  </dt>
+  <dd>{{$ctrl.policy.coolDownPeriodSec}} sec</dd>
+  <dt>
+    Mode
+    <help-field key="gce.serverGroup.autoscaling.mode"></help-field>
+  </dt>
+  <dd>{{$ctrl.policy.mode}}</dd>
+  <dt ng-if="$ctrl.scaleInControlsEnabled">Scale-in Controls</dt>
+  <dd ng-if="$ctrl.scaleInControlsEnabled">{{$ctrl.scaleInControlsConfigured ? 'Enabled' : 'Disabled'}}</dd>
+  <dt ng-if="$ctrl.scaleInControlsConfigured">Max Scaled-in Replicas</dt>
+  <dd ng-if="$ctrl.scaleInControlsConfigured">{{$ctrl.maxScaledInReplicasMessage}}</dd>
+  <dt ng-if="$ctrl.scaleInControlsConfigured">Scale-in Time Window</dt>
+  <dd ng-if="$ctrl.scaleInControlsConfigured">{{$ctrl.timeWindowSecMessage}}</dd>
+  <dt ng-if="$ctrl.serverGroup.autoscalingMessages">Messages</dt>
+  <dd ng-if="$ctrl.serverGroup.autoscalingMessages" ng-repeat="message in $ctrl.serverGroup.autoscalingMessages">
+    {{message}}
+  </dd>
+  <action-icons
+    class="text-right"
+    edit="$ctrl.editPolicy()"
+    edit-info="Edit Policy"
+    destroy="$ctrl.deletePolicy()"
+    destroy-info="Delete Policy"
+  >
+  </action-icons>
+</dl>

package/src/serverGroup/details/autoscalingPolicy/autoscalingPolicy.directive.js

@@ -0,0 +1,138 @@
+'use strict';
+
+import { module } from 'angular';
+import ANGULAR_UI_BOOTSTRAP from 'angular-ui-bootstrap';
+
+import { ConfirmationModalService, SETTINGS } from '@spinnaker/core';
+
+import { GOOGLE_AUTOSCALINGPOLICY_AUTOSCALINGPOLICY_WRITE_SERVICE } from './../../../autoscalingPolicy/autoscalingPolicy.write.service';
+import { GCE_AUTOSCALING_POLICY_SELECTOR_COMPONENT } from '../../configure/wizard/autoScalingPolicy/autoScalingPolicySelector.component';
+import { GCEProviderSettings } from '../../../gce.settings';
+import { GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_MODAL_UPSERTAUTOSCALINGPOLICY_MODAL_CONTROLLER } from './modal/upsertAutoscalingPolicy.modal.controller';
+export const GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_AUTOSCALINGPOLICY_DIRECTIVE =
+  'spinnaker.gce.instance.details.scalingPolicy.directive';
+export const name = GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_AUTOSCALINGPOLICY_DIRECTIVE; // for backwards compatibility
+module(GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_AUTOSCALINGPOLICY_DIRECTIVE, [
+  ANGULAR_UI_BOOTSTRAP,
+  GOOGLE_AUTOSCALINGPOLICY_AUTOSCALINGPOLICY_WRITE_SERVICE,
+  GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_MODAL_UPSERTAUTOSCALINGPOLICY_MODAL_CONTROLLER,
+  GCE_AUTOSCALING_POLICY_SELECTOR_COMPONENT,
+]).component('gceAutoscalingPolicy', {
+  bindings: {
+    policy: '=',
+    application: '=',
+    serverGroup: '=',
+  },
+  templateUrl: require('./autoscalingPolicy.directive.html'),
+  controller: [
+    '$uibModal',
+    'gceAutoscalingPolicyWriter',
+    function ($uibModal, gceAutoscalingPolicyWriter) {
+      var scope = this;
+      scope.$onInit = function () {
+        const policy = scope.policy;
+
+        policy.bases = [];
+
+        if (policy.cpuUtilization) {
+          const basis = {
+            description: 'CPU Usage',
+            helpKey: 'gce.serverGroup.autoscaling.targetCPUUsage',
+          };
+
+          if (policy.cpuUtilization.utilizationTarget) {
+            basis.targets = [Math.round(policy.cpuUtilization.utilizationTarget * 100) + '%'];
+          }
+
+          policy.bases.push(basis);
+        }
+
+        if (policy.loadBalancingUtilization) {
+          const basis = {
+            description: 'HTTP Load Balancing Usage',
+            helpKey: 'gce.serverGroup.autoscaling.targetHTTPLoadBalancingUsage',
+          };
+
+          if (policy.loadBalancingUtilization.utilizationTarget) {
+            basis.targets = [Math.round(policy.loadBalancingUtilization.utilizationTarget * 100) + '%'];
+          }
+
+          policy.bases.push(basis);
+        }
+
+        if (policy.customMetricUtilizations) {
+          const basis = {
+            description: policy.customMetricUtilizations.length > 1 ? 'Monitoring Metrics' : 'Monitoring Metric',
+            helpKey: 'gce.serverGroup.autoscaling.targetMetric',
+          };
+
+          if (policy.customMetricUtilizations.length > 0) {
+            basis.targets = [];
+            policy.customMetricUtilizations.forEach((metric) => {
+              let target = metric.metric + ': ' + metric.utilizationTarget;
+
+              if (metric.utilizationTargetType === 'DELTA_PER_SECOND') {
+                target += '/sec';
+              } else if (metric.utilizationTargetType === 'DELTA_PER_MINUTE') {
+                target += '/min';
+              }
+
+              basis.targets.push(target);
+            });
+          }
+
+          policy.bases.push(basis);
+        }
+
+        scope.scaleInControlsConfigured =
+          policy.scaleInControl &&
+          policy.scaleInControl.timeWindowSec &&
+          policy.scaleInControl.maxScaledInReplicas &&
+          (policy.scaleInControl.maxScaledInReplicas.percent || policy.scaleInControl.maxScaledInReplicas.fixed);
+
+        if (scope.scaleInControlsConfigured) {
+          scope.maxScaledInReplicasMessage = policy.scaleInControl.maxScaledInReplicas.percent
+            ? `${policy.scaleInControl.maxScaledInReplicas.percent}%`
+            : `${policy.scaleInControl.maxScaledInReplicas.fixed}`;
+
+          scope.timeWindowSecMessage = `${policy.scaleInControl.timeWindowSec} seconds`;
+        }
+
+        scope.predictiveAutoscalingEnabled =
+          GCEProviderSettings.feature.predictiveAutoscaling &&
+          policy.cpuUtilization &&
+          policy.cpuUtilization.predictiveMethod;
+
+        scope.editPolicy = () => {
+          $uibModal.open({
+            templateUrl: require('./modal/upsertAutoscalingPolicy.modal.html'),
+            controller: 'gceUpsertAutoscalingPolicyModalCtrl',
+            controllerAs: 'ctrl',
+            size: 'lg',
+            resolve: {
+              policy: () => scope.policy,
+              application: () => scope.application,
+              serverGroup: () => scope.serverGroup,
+            },
+          });
+        };
+
+        scope.deletePolicy = () => {
+          const taskMonitor = {
+            application: scope.application,
+            title: `Deleting autoscaler for ${scope.serverGroup.name}`,
+          };
+
+          ConfirmationModalService.confirm({
+            header: `Really delete autoscaler for ${scope.serverGroup.name}?`,
+            buttonText: 'Delete autoscaler',
+            account: scope.serverGroup.account,
+            taskMonitorConfig: taskMonitor,
+            submitMethod: () =>
+              gceAutoscalingPolicyWriter.deleteAutoscalingPolicy(scope.application, scope.serverGroup),
+          });
+        };
+      };
+    },
+  ],
+});

package/src/serverGroup/details/autoscalingPolicy/modal/GceScaleInControls.tsx

@@ -0,0 +1,137 @@
+import { module } from 'angular';
+import { isEmpty } from 'lodash';
+import React from 'react';
+import { react2angular } from 'react2angular';
+
+import {
+  CheckboxInput,
+  FormField,
+  LayoutProvider,
+  NumberInput,
+  ReactSelectInput,
+  withErrorBoundary,
+} from '@spinnaker/core';
+
+import type { IGceAutoscalingPolicy, IGceScaleInControl } from '../../../../autoscalingPolicy';
+import { GceAutoScalingFieldLayout } from '../../../../autoscalingPolicy';
+
+enum maxReplicasUnit {
+  fixed = 'fixed',
+  percent = 'percent',
+}
+
+interface IGceScaleInControlsProps {
+  policy: IGceAutoscalingPolicy;
+  updatePolicy: (policy: IGceAutoscalingPolicy) => void;
+}
+
+const defaultScaleInControl: IGceScaleInControl = {
+  maxScaledInReplicas: {
+    fixed: null,
+    percent: 0,
+  },
+  timeWindowSec: 60,
+};
+
+function GceScaleInControls({ policy, updatePolicy }: IGceScaleInControlsProps) {
+  function updateScaleInControl(scaleInControl: IGceScaleInControl) {
+    const scaleInControlExist = Object.keys(scaleInControl).length;
+    if (scaleInControlExist) {
+      updatePolicy({
+        ...policy,
+        scaleInControl,
+      });
+    } else {
+      const updatedPolicy: any = policy;
+      delete updatedPolicy['scaleInControl'];
+      updatePolicy({
+        ...updatedPolicy,
+      });
+    }
+  }
+
+  function getMaxReplicasUnit(): maxReplicasUnit {
+    if (Number.isInteger(policy.scaleInControl.maxScaledInReplicas.percent)) {
+      return maxReplicasUnit.percent;
+    }
+    return maxReplicasUnit.fixed;
+  }
+
+  return (
+    <LayoutProvider value={GceAutoScalingFieldLayout}>
+      <div className="row">
+        <FormField
+          input={(inputProps) => <CheckboxInput {...inputProps} />}
+          label="Enable scale-in controls"
+          onChange={(e: React.ChangeEvent<any>) => {
+            updateScaleInControl(e.target.checked ? defaultScaleInControl : {});
+          }}
+          value={!isEmpty(policy.scaleInControl)}
+        />
+      </div>
+      {!isEmpty(policy.scaleInControl) && (
+        <>
+          <div className="row">
+            <FormField
+              input={(inputProps) => (
+                <NumberInput
+                  {...inputProps}
+                  min={0}
+                  max={getMaxReplicasUnit() === maxReplicasUnit.percent ? 100 : null}
+                />
+              )}
+              label="Max scaled-in replicas"
+              onChange={(e: React.ChangeEvent<any>) => {
+                updateScaleInControl({
+                  ...policy.scaleInControl,
+                  maxScaledInReplicas: {
+                    [getMaxReplicasUnit()]: parseInt(e.target.value, 10),
+                  },
+                });
+              }}
+              value={policy.scaleInControl.maxScaledInReplicas[getMaxReplicasUnit()]}
+            />
+            <FormField
+              input={(inputProps) => (
+                <ReactSelectInput
+                  {...inputProps}
+                  clearable={false}
+                  stringOptions={[maxReplicasUnit.percent, maxReplicasUnit.fixed]}
+                />
+              )}
+              label=""
+              onChange={(e: React.ChangeEvent<any>) => {
+                updateScaleInControl({
+                  ...policy.scaleInControl,
+                  maxScaledInReplicas: {
+                    [e.target.value]: policy.scaleInControl.maxScaledInReplicas[getMaxReplicasUnit()],
+                  },
+                });
+              }}
+              value={getMaxReplicasUnit()}
+            />
+          </div>
+          <div className="row">
+            <FormField
+              input={(inputProps) => <NumberInput {...inputProps} min={60} max={3600} />}
+              label="Time window (seconds)"
+              onChange={(e: React.ChangeEvent<any>) => {
+                updateScaleInControl({
+                  ...policy.scaleInControl,
+                  timeWindowSec: parseInt(e.target.value, 10),
+                });
+              }}
+              value={policy.scaleInControl.timeWindowSec}
+            />
+          </div>
+        </>
+      )}
+    </LayoutProvider>
+  );
+}
+
+export const GCE_SCALE_IN_CONTROLS = 'spinnaker.gce.scaleInControls';
+module(GCE_SCALE_IN_CONTROLS, []).component(
+  'gceScaleInControls',
+  react2angular(withErrorBoundary(GceScaleInControls, 'gceScaleInControls'), ['policy', 'updatePolicy']),
+);

package/src/serverGroup/details/autoscalingPolicy/modal/upsertAutoscalingPolicy.modal.controller.js

@@ -0,0 +1,56 @@
+'use strict';
+
+import { module } from 'angular';
+import { cloneDeep } from 'lodash';
+
+import { TaskMonitor } from '@spinnaker/core';
+
+import { GOOGLE_AUTOSCALINGPOLICY_AUTOSCALINGPOLICY_WRITE_SERVICE } from '../../../../autoscalingPolicy/autoscalingPolicy.write.service';
+import { GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_BASICSETTINGS_BASICSETTINGS_COMPONENT } from '../../../../autoscalingPolicy/components/basicSettings/basicSettings.component';
+import { GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_METRICSETTINGS_METRICSETTINGS_COMPONENT } from '../../../../autoscalingPolicy/components/metricSettings/metricSettings.component';
+import { GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_SCALINGSCHEDULES_SCALINGSCHEDULES_COMPONENT } from '../../../../autoscalingPolicy/components/scalingSchedules/scalingSchedules.component';
+import { GOOGLE_SERVERGROUP_CONFIGURE_SERVERGROUP_CONFIGURE_GCE_MODULE } from '../../../configure/serverGroup.configure.gce.module';
+
+import './upsertAutoscalingPolicy.modal.less';
+
+export const GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_MODAL_UPSERTAUTOSCALINGPOLICY_MODAL_CONTROLLER =
+  'spinnaker.deck.gce.upsertAutoscalingPolicy.modal.controller';
+export const name = GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_MODAL_UPSERTAUTOSCALINGPOLICY_MODAL_CONTROLLER; // for backwards compatibility
+module(GOOGLE_SERVERGROUP_DETAILS_AUTOSCALINGPOLICY_MODAL_UPSERTAUTOSCALINGPOLICY_MODAL_CONTROLLER, [
+  GOOGLE_AUTOSCALINGPOLICY_AUTOSCALINGPOLICY_WRITE_SERVICE,
+  GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_BASICSETTINGS_BASICSETTINGS_COMPONENT,
+  GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_METRICSETTINGS_METRICSETTINGS_COMPONENT,
+  GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_SCALINGSCHEDULES_SCALINGSCHEDULES_COMPONENT,
+]).controller('gceUpsertAutoscalingPolicyModalCtrl', [
+  'policy',
+  'application',
+  'serverGroup',
+  '$uibModalInstance',
+  'gceAutoscalingPolicyWriter',
+  '$scope',
+  function (policy, application, serverGroup, $uibModalInstance, gceAutoscalingPolicyWriter, $scope) {
+    [this.action, this.isNew] = policy ? ['Edit', false] : ['New', true];
+    this.policy = cloneDeep(policy || {});
+
+    this.cancel = $uibModalInstance.dismiss;
+
+    this.taskMonitor = new TaskMonitor({
+      application: application,
+      title: `${this.action} scaling policy for ${serverGroup.name}`,
+      modalInstance: $uibModalInstance,
+    });
+
+    this.save = () => {
+      const submitMethod = () =>
+        gceAutoscalingPolicyWriter.upsertAutoscalingPolicy(application, serverGroup, this.policy);
+
+      this.taskMonitor.submit(submitMethod);
+    };
+
+    this.updatePolicy = (updatedPolicy) => {
+      $scope.$applyAsync(() => {
+        this.policy = updatedPolicy;
+      });
+    };
+  },
+]);

package/src/serverGroup/details/autoscalingPolicy/modal/upsertAutoscalingPolicy.modal.html

@@ -0,0 +1,38 @@
+<div modal-page class="scaling-policy-modal gce-scaling-policy-modal form-inline">
+  <task-monitor monitor="ctrl.taskMonitor"></task-monitor>
+  <modal-close dismiss="$dismiss()"></modal-close>
+  <div class="modal-header">
+    <h4 class="modal-title">{{ctrl.action}} scaling policy</h4>
+  </div>
+  <ng-form name="autoscalingPolicyUpsertModal">
+    <div class="modal-body clearfix">
+      <h4 class="section-heading">Basic Settings</h4>
+      <div class="section-body">
+        <gce-autoscaling-policy-basic-settings policy="ctrl.policy" update-policy="ctrl.updatePolicy" />
+      </div>
+      <h4 class="section-heading">Metric Types</h4>
+      <gce-autoscaling-policy-metric-settings
+        show-no-metrics-warning="ctrl.showNoMetricsWarning"
+        policy="ctrl.policy"
+        update-policy="ctrl.updatePolicy"
+      >
+      </gce-autoscaling-policy-metric-settings>
+      <h4 class="section-heading">Scaling Schedules</h4>
+      <div class="section-body">
+        <gce-autoscaling-policy-scaling-schedules
+          policy="ctrl.policy"
+          update-policy="ctrl.updatePolicy"
+        ></gce-autoscaling-policy-scaling-schedules>
+      </div>
+    </div>
+  </ng-form>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <submit-button
+      is-disabled="!autoscalingPolicyUpsertModal.$valid || ctrl.showNoMetricsWarning()"
+      submitting="taskMonitor.submitting"
+      on-click="ctrl.save()"
+      is-new="ctrl.isNew"
+    ></submit-button>
+  </div>
+</div>