@spinnaker/google 0.0.0-main-2

package/src/serverGroup/configure/wizard/advancedSettings/diskConfigurer.component.ts

@@ -0,0 +1,199 @@
+import type { IComponentController, IComponentOptions, IScope } from 'angular';
+import { module } from 'angular';
+import { without } from 'lodash';
+
+interface IGceDisk {
+  type: string;
+  sizeGb: number;
+  sourceImage?: string;
+}
+
+class GceDiskConfigurerController implements IComponentController {
+  public localSSDCount: number;
+  public persistentDisks: IGceDisk[];
+  public isDefault: boolean;
+
+  // From component bindings.
+  public command: any;
+  public disks: IGceDisk[];
+  private updateDisks: (arg: { disks: IGceDisk[] }) => void;
+
+  public static $inject = ['$scope'];
+  constructor(public $scope: IScope) {}
+
+  public $onInit(): void {
+    this.setLocalSSDCount();
+    this.setPersistentDisks();
+
+    if (this.getLocalSSDDisks().length && !this.command?.viewState?.instanceTypeDetails?.storage?.localSSDSupported) {
+      this.updateDisks({ disks: this.sortDisks(this.getPersistentDisks()) });
+    }
+
+    this.isDefault = !!this.command?.viewState?.instanceTypeDetails?.storage?.isDefault;
+  }
+
+  public $onChanges(): void {
+    this.$onInit();
+  }
+
+  public handleLocalSSDCountChange(): void {
+    // Handles invalid input.
+    if (this.localSSDCount === undefined) {
+      return;
+    }
+
+    let disks = this.getPersistentDisks();
+    for (let i = 0; i < this.localSSDCount; i++) {
+      disks = disks.concat([{ type: 'local-ssd', sizeGb: 375 }]);
+    }
+
+    disks = this.sortDisks(disks);
+    this.updateDisks({ disks });
+  }
+
+  public handlePersistentDiskChange(): void {
+    let disks = this.persistentDisks.concat(this.getLocalSSDDisks());
+    disks = this.sortDisks(disks);
+    this.updateDisks({ disks });
+  }
+
+  public handleImageChange = (imageName: string, target: IGceDisk) => {
+    // called from a React component
+    this.$scope.$apply(() => {
+      target.sourceImage = imageName;
+      this.handlePersistentDiskChange();
+    });
+  };
+
+  public addPersistentDisk(): void {
+    this.persistentDisks = this.persistentDisks.concat([{ type: 'pd-ssd', sizeGb: 10, sourceImage: null }]);
+    this.handlePersistentDiskChange();
+  }
+
+  public removePersistentDisk(index: number): void {
+    this.persistentDisks.splice(index, 1);
+    this.handlePersistentDiskChange();
+  }
+
+  private setPersistentDisks(): void {
+    this.persistentDisks = this.getPersistentDisks();
+  }
+
+  private setLocalSSDCount(): void {
+    this.localSSDCount = this.getLocalSSDDisks().length;
+  }
+
+  private sortDisks(disks: IGceDisk[]): IGceDisk[] {
+    const diskWithoutImage = disks.find(
+      (disk) => (disk.type.startsWith('pd-') || disk.type.startsWith('hyperdisk-')) && disk.sourceImage === undefined,
+    );
+    return [diskWithoutImage].concat(without(disks, diskWithoutImage));
+  }
+
+  private getLocalSSDDisks(): IGceDisk[] {
+    return (this.command.disks || []).filter((disk: IGceDisk) => disk.type === 'local-ssd');
+  }
+
+  private getPersistentDisks(): IGceDisk[] {
+    return (this.command.disks || []).filter(
+      (disk: IGceDisk) => disk.type.startsWith('pd-') || disk.type.startsWith('hyperdisk-'),
+    );
+  }
+}
+
+const gceDiskConfigurer: IComponentOptions = {
+  controller: GceDiskConfigurerController,
+  bindings: { command: '<', disks: '<', updateDisks: '&' },
+  template: `
+    <ng-form name="diskConfigurer">
+      <div class="form-group">
+        <div class="col-md-5 sm-label-right">
+          <b>Number of Local SSD Disks</b>
+          <help-field key="gce.instance.storage.localSSD"></help-field>
+        </div>
+        <div class="col-md-2">
+          <input type="number"
+                 class="form-control input-sm"
+                 ng-model="$ctrl.localSSDCount"
+                 ng-change="$ctrl.handleLocalSSDCountChange()"
+                 required
+                 min="0"
+                 max="{{$ctrl.command.viewState.instanceTypeDetails.storage.localSSDSupported ? 8 : 0}}"
+                 ng-disabled="!$ctrl.command.viewState.instanceTypeDetails.storage.localSSDSupported"/>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="sm-label-left" style="margin-bottom: 5px;">Persistent Disks
+         <span class="glyphicon glyphicon-warning-sign"
+               style="color: #EEBB3C;"
+               ng-if="$ctrl.isDefault && !diskConfigurer.$dirty"
+               uib-tooltip="This instance type does not have an explicitly configured persistent disk option and is using the
+                            default disk storage specified in settings.js."></span>
+        </div>
+        <table class="table table-condensed packed tags">
+          <thead>
+            <tr>
+              <th style="width: 25%;">Type</th>
+              <th>Size (GB)</th>
+              <th style="width: 50%;">Image</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="disk in $ctrl.persistentDisks">
+              <td>
+                <ui-select ng-model="disk.type" class="form-control input-sm" on-select="$ctrl.handlePersistentDiskChange()" required>
+                  <ui-select-match placeholder="Select...">{{$select.selected}}</ui-select-match>
+                  <ui-select-choices repeat="persistentDiskType in $ctrl.command.backingData.persistentDiskTypes | filter: $select.search">
+                    <span ng-bind-html="persistentDiskType | highlight: $select.search"></span>
+                  </ui-select-choices>
+                </ui-select>
+              </td>
+              <td>
+                <input type="number"
+                       class="form-control input-sm"
+                       ng-model="disk.sizeGb"
+                       ng-change="$ctrl.handlePersistentDiskChange()"
+                       required
+                       min="10"/>
+              </td>
+              <td>
+                <div ng-if="$index === 0">
+                  <p class="small" style="margin: 0;" ng-if="$ctrl.command.viewState.mode === 'create' || $ctrl.command.viewState.mode === 'clone'">
+                    This disk will use the image selected at the top of this dialogue.
+                  </p>
+                  <p class="small" style="margin: 0;" ng-if="$ctrl.command.viewState.mode === 'createPipeline' || $ctrl.command.viewState.mode === 'editPipeline'">
+                    This disk will use the image inferred from this pipeline's execution context.
+                  </p>
+                </div>
+                <gce-image-select
+                  ng-if="$index > 0"
+                  available-images="$ctrl.command.backingData.allImages"
+                  selected-image="disk.sourceImage"
+                  select-image="$ctrl.handleImageChange"
+                  target="disk"
+                ></gce-image-select>
+              </td>
+              <td ng-if="$index > 0">
+                <a class="btn btn-link sm-label" style="margin-top: 0;" ng-click="$ctrl.removePersistentDisk($index)">
+                  <span class="glyphicon glyphicon-trash"></span>
+                </a>
+              </td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td colspan="4">
+                <button class="btn btn-block btn-sm add-new" ng-click="$ctrl.addPersistentDisk()">
+                  <span class="glyphicon glyphicon-plus-sign"></span> Add New Persistent Disk
+                </button>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </ng-form>`,
+};
+
+export const GCE_DISK_CONFIGURER = 'spinnaker.gce.diskConfigurer.component';
+module(GCE_DISK_CONFIGURER, []).component('gceDiskConfigurer', gceDiskConfigurer);

package/src/serverGroup/configure/wizard/advancedSettings/gceAccelerator.service.spec.ts

@@ -0,0 +1,108 @@
+import type { IGceAcceleratorCommand, IGceAcceleratorTypeRaw } from './gceAccelerator.service';
+import { GceAcceleratorService } from './gceAccelerator.service';
+
+describe('GceAcceleratorService', () => {
+  const acceleratorA: IGceAcceleratorTypeRaw = {
+    name: 'accelerator-a',
+    description: 'Accelerator A',
+    maximumCardsPerInstance: 8,
+  };
+  const acceleratorB: IGceAcceleratorTypeRaw = {
+    name: 'accelerator-b',
+    description: 'Accelerator B',
+    maximumCardsPerInstance: 4,
+  };
+  const acceleratorC: IGceAcceleratorTypeRaw = {
+    name: 'accelerator-c',
+    description: 'Accelerator C',
+    maximumCardsPerInstance: 1,
+  };
+  let command: IGceAcceleratorCommand;
+  beforeEach(() => {
+    command = {
+      backingData: {
+        credentialsKeyedByAccount: {
+          'my-gce-account': {
+            zoneToAcceleratorTypesMap: {
+              'us-east1-b': {
+                acceleratorTypes: {
+                  acceleratorTypes: [acceleratorA, acceleratorB],
+                },
+              },
+              'us-east1-c': {
+                acceleratorTypes: {
+                  acceleratorTypes: [acceleratorB, acceleratorC],
+                },
+              },
+            },
+          },
+        },
+      },
+      credentials: 'my-gce-account',
+      distributionPolicy: null,
+      regional: false,
+      selectZones: false,
+      zone: 'us-east1-b',
+    };
+  });
+  describe('getAvailableAccelerators', () => {
+    it('Returns empty list for regional server group without explicitly selected zones', () => {
+      command.regional = true;
+      expect(GceAcceleratorService.getAvailableAccelerators(command)).toEqual([]);
+      command.selectZones = true;
+      command.distributionPolicy = {
+        zones: [],
+      };
+      expect(GceAcceleratorService.getAvailableAccelerators(command)).toEqual([]);
+    });
+    it('returns intersection of accelerators of explicitly selected zones for regional server group', () => {
+      command.regional = true;
+      command.selectZones = true;
+      command.distributionPolicy = {
+        zones: ['us-east1-b', 'us-east1-c'],
+      };
+      expect(GceAcceleratorService.getAvailableAccelerators(command)).toEqual([
+        {
+          ...acceleratorB,
+          availableCardCounts: [1, 2, 4],
+        },
+      ]);
+      command.distributionPolicy = {
+        zones: ['us-east1-b'],
+      };
+      expect(GceAcceleratorService.getAvailableAccelerators(command)).toEqual([
+        {
+          ...acceleratorA,
+          availableCardCounts: [1, 2, 4, 8],
+        },
+        {
+          ...acceleratorB,
+          availableCardCounts: [1, 2, 4],
+        },
+      ]);
+    });
+    it('returns accelerators available for selected zone for single-zone server groups', () => {
+      expect(GceAcceleratorService.getAvailableAccelerators(command)).toEqual([
+        {
+          ...acceleratorA,
+          availableCardCounts: [1, 2, 4, 8],
+        },
+        {
+          ...acceleratorB,
+          availableCardCounts: [1, 2, 4],
+        },
+      ]);
+      command.zone = 'us-east1-c';
+      expect(GceAcceleratorService.getAvailableAccelerators(command)).toEqual([
+        {
+          ...acceleratorB,
+          availableCardCounts: [1, 2, 4],
+        },
+        {
+          ...acceleratorC,
+          availableCardCounts: [1],
+        },
+      ]);
+    });
+  });
+});

package/src/serverGroup/configure/wizard/advancedSettings/gceAccelerator.service.ts

@@ -0,0 +1,74 @@
+import { get, intersectionBy, isFinite } from 'lodash';
+
+export interface IGceAcceleratorTypeRaw {
+  name: string;
+  description: string;
+  maximumCardsPerInstance: number;
+}
+
+export interface IGceAcceleratorType extends IGceAcceleratorTypeRaw {
+  availableCardCounts: number[];
+}
+
+interface IZoneToAcceleratorTypesMap {
+  [zone: string]: IGceAcceleratorTypeRaw[];
+}
+
+export interface IGceAcceleratorCommand {
+  backingData: any;
+  credentials: string;
+  distributionPolicy: { zones: string[]; targetShape?: string };
+  regional: boolean;
+  selectZones: boolean;
+  zone: string;
+}
+
+export class GceAcceleratorService {
+  public static getAvailableAccelerators({
+    backingData,
+    credentials,
+    distributionPolicy,
+    regional,
+    selectZones,
+    zone,
+  }: IGceAcceleratorCommand): IGceAcceleratorType[] {
+    const acceleratorMap = this.getZoneToAcceleratorTypesMap(backingData, credentials);
+
+    if (zone && !regional) {
+      return this.getAcceleratorTypesForZone(acceleratorMap, zone);
+    }
+
+    if (regional && selectZones) {
+      const zones = get(distributionPolicy, 'zones', []);
+      const allZonesAcceleratorTypes = zones.map((z) => this.getAcceleratorTypesForZone(acceleratorMap, z));
+      return intersectionBy.apply(null, [...allZonesAcceleratorTypes, 'name']);
+    }
+
+    return [];
+  }
+
+  private static getZoneToAcceleratorTypesMap(backingData: any, credentials: string): IZoneToAcceleratorTypesMap {
+    return get(backingData, ['credentialsKeyedByAccount', credentials, 'zoneToAcceleratorTypesMap'], {});
+  }
+
+  private static getAcceleratorTypesForZone(
+    acceleratorMap: IZoneToAcceleratorTypesMap,
+    zone: string,
+  ): IGceAcceleratorType[] {
+    return get(acceleratorMap, [zone, 'acceleratorTypes', 'acceleratorTypes'], []).map((a) => {
+      return {
+        ...a,
+        availableCardCounts: this.getAvailableCardCounts(a),
+      };
+    });
+  }
+
+  private static getAvailableCardCounts(accelerator: IGceAcceleratorTypeRaw): number[] {
+    const maxCards = isFinite(accelerator.maximumCardsPerInstance) ? accelerator.maximumCardsPerInstance : 4;
+    const availableCardCounts = [];
+    for (let i = 1; i <= maxCards; i *= 2) {
+      availableCardCounts.push(i);
+    }
+    return availableCardCounts;
+  }
+}

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

@@ -0,0 +1,20 @@
+<ng-form name="autoHealingPolicySubForm">
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right">
+      <b>Enable Autohealing</b>
+    </div>
+    <div class="col-md-6 checkbox">
+      <label>
+        <input type="checkbox" ng-model="command.enableAutoHealing" ng-change="ctrl.onEnableAutoHealingChange()" />
+      </label>
+    </div>
+  </div>
+  <gce-auto-healing-policy-selector
+    ng-if="command.enableAutoHealing"
+    on-health-check-refresh="ctrl.onHealthCheckRefresh()"
+    set-auto-healing-policy="ctrl.setAutoHealingPolicy(autoHealingPolicy)"
+    health-checks="command.backingData.filtered.healthChecks"
+    enabled="command.enableAutoHealing"
+    auto-healing-policy="command.autoHealingPolicy"
+  ></gce-auto-healing-policy-selector>
+</ng-form>

package/src/serverGroup/configure/wizard/autoHealingPolicy/autoHealingPolicySelector.component.html

@@ -0,0 +1,90 @@
+<div class="form-group">
+  <div class="col-md-{{::$ctrl.labelColumns || 3}} sm-label-right">
+    <b>Health Check</b>
+  </div>
+  <div class="col-md-6">
+    <ui-select
+      ng-model="$ctrl.autoHealingPolicy.healthCheckUrl"
+      on-select="$ctrl.onHealthCheckChange($item, $model)"
+      class="form-control input-sm"
+      required
+    >
+      <ui-select-match placeholder="Select...">{{ $select.selected.displayName }}</ui-select-match>
+      <ui-select-choices
+        repeat="healthCheck.selfLink as healthCheck in $ctrl.healthChecks | orderBy: 'displayName' | filter: { displayName: $select.search }"
+      >
+        <span ng-bind-html="healthCheck.displayName | highlight: $select.search"></span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+</div>
+<div class="form-group">
+  <div class="col-md-{{::$ctrl.labelColumns || 3}} sm-label-right">
+    <b>Initial Delay</b>
+  </div>
+  <div class="col-md-6">
+    <div class="input-group">
+      <input
+        type="number"
+        class="form-control input-sm"
+        ng-model="$ctrl.autoHealingPolicy.initialDelaySec"
+        min="0"
+        max="2147483647"
+        required
+      />
+      <span class="input-group-addon">seconds</span>
+    </div>
+  </div>
+</div>
+<div class="form-group" ng-switch on="$ctrl.viewState.maxUnavailableMetric">
+  <div class="col-md-{{::$ctrl.labelColumns || 3}} sm-label-right">
+    <b>Max Unavailable <help-field key="gce.serverGroup.maxUnavailable"></help-field></b>
+  </div>
+  <div class="col-md-3" ng-switch-default>
+    <input type="number" style="width: 130px" readonly class="form-control input-sm" />
+  </div>
+  <div class="col-md-3" ng-switch-when="percent">
+    <div class="input-group" style="width: 130px">
+      <input
+        class="form-control input-sm"
+        ng-model="$ctrl.autoHealingPolicy.maxUnavailable.percent"
+        required
+        type="number"
+        min="0"
+        max="100"
+      />
+      <span class="input-group-addon">%</span>
+    </div>
+  </div>
+  <div class="col-md-3" ng-switch-when="fixed">
+    <input
+      class="form-control input-sm"
+      style="width: 130px"
+      required
+      ng-model="$ctrl.autoHealingPolicy.maxUnavailable.fixed"
+      type="number"
+      min="0"
+      max="2147483647"
+    />
+  </div>
+  <div class="col-md-3">
+    <select
+      ng-model="$ctrl.viewState.maxUnavailableMetric"
+      ng-change="$ctrl.manageMaxUnavailableMetric($ctrl.viewState.maxUnavailableMetric)"
+      ng-options="metric for metric in ['percent', 'fixed']"
+      class="form-control input-sm"
+    >
+      <option value="">-- select metric --</option>
+    </select>
+  </div>
+</div>
+<div class="form-group small" style="margin-top: 20px">
+  <div class="col-md-7 col-md-offset-{{::$ctrl.labelColumns || 3}}">
+    <gce-cache-refresh
+      cache-key="healthChecks"
+      cache-key-alias="Health checks"
+      on-refresh="$ctrl.onHealthCheckRefresh()"
+    >
+    </gce-cache-refresh>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/autoHealingPolicy/autoHealingPolicySelector.component.ts

@@ -0,0 +1,70 @@
+import type { IComponentOptions, IController } from 'angular';
+import { module } from 'angular';
+import { set } from 'lodash';
+
+import type { IGceAutoHealingPolicy } from '../../../../domain/autoHealingPolicy';
+import type { IGceHealthCheckOption } from '../../../../healthCheck/healthCheckUtils';
+import { parseHealthCheckUrl } from '../../../../healthCheck/healthCheckUtils';
+
+class GceAutoHealingPolicySelector implements IController {
+  public healthChecks: string[];
+  public autoHealingPolicy: IGceAutoHealingPolicy;
+  public enabled: boolean;
+  public viewState: { maxUnavailableMetric: 'percent' | 'fixed' };
+  private setAutoHealingPolicy: Function;
+
+  public $onInit(): void {
+    if (this.autoHealingPolicy && this.autoHealingPolicy.maxUnavailable) {
+      if (typeof this.autoHealingPolicy.maxUnavailable.fixed === 'number') {
+        this.viewState = { maxUnavailableMetric: 'fixed' };
+      } else if (typeof this.autoHealingPolicy.maxUnavailable.percent === 'number') {
+        this.viewState = { maxUnavailableMetric: 'percent' };
+      }
+    }
+
+    if (!this.autoHealingPolicy) {
+      this.setAutoHealingPolicy({ autoHealingPolicy: { initialDelaySec: 300 } });
+    }
+  }
+
+  public $onDestroy(): void {
+    this.setAutoHealingPolicy({ autoHealingPolicy: null });
+  }
+
+  public manageMaxUnavailableMetric(selectedMetric: string): void {
+    if (!selectedMetric) {
+      // Clouddriver deletes maxUnavailable if maxUnavailable is an empty object.
+      this.autoHealingPolicy.maxUnavailable = {};
+    } else {
+      const toDeleteKey = selectedMetric === 'percent' ? 'fixed' : 'percent';
+      set(this.autoHealingPolicy, ['maxUnavailable', toDeleteKey], undefined);
+    }
+  }
+
+  public onHealthCheckChange(_healthCheck: IGceHealthCheckOption, healthCheckUrl: string) {
+    if (healthCheckUrl) {
+      const { healthCheckName, healthCheckKind } = parseHealthCheckUrl(healthCheckUrl);
+      this.autoHealingPolicy.healthCheck = healthCheckName;
+      this.autoHealingPolicy.healthCheckKind = healthCheckKind;
+    }
+  }
+}
+
+const gceAutoHealingPolicySelectorComponent: IComponentOptions = {
+  bindings: {
+    onHealthCheckRefresh: '&',
+    setAutoHealingPolicy: '&',
+    healthChecks: '<',
+    autoHealingPolicy: '<',
+    enabled: '<',
+    labelColumns: '@?',
+  },
+  templateUrl: require('./autoHealingPolicySelector.component.html'),
+  controller: GceAutoHealingPolicySelector,
+};
+
+export const GCE_AUTOHEALING_POLICY_SELECTOR = 'spinnaker.gce.autoHealingPolicy.selector.component';
+module(GCE_AUTOHEALING_POLICY_SELECTOR, []).component(
+  'gceAutoHealingPolicySelector',
+  gceAutoHealingPolicySelectorComponent,
+);

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

@@ -0,0 +1,20 @@
+<ng-form name="autoScalingPolicySubForm">
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right">
+      <b>Enable Autoscaling</b>
+    </div>
+    <div class="col-md-6 checkbox">
+      <label>
+        <input type="checkbox" ng-model="command.enableAutoScaling" ng-change="ctrl.onEnableAutoScalingChange()" />
+      </label>
+    </div>
+  </div>
+  <div>
+    <gce-auto-scaling-policy-Selector-Component
+      ng-if="command.enableAutoScaling"
+      enabled="command.enableAutoScaling"
+      auto-scaling-policy="command.autoscalingPolicy"
+      set-auto-scaling-policy="ctrl.setAutoScalingPolicy(autoscalingPolicy)"
+    ></gce-auto-scaling-policy-Selector-Component>
+  </div>
+</ng-form>

package/src/serverGroup/configure/wizard/autoScalingPolicy/autoScalingPolicySelector.component.html

@@ -0,0 +1,21 @@
+<div class="gce-scaling-policy-wizard">
+  <h5 class="section-heading">Basic Settings</h5>
+  <div class="section-body">
+    <gce-autoscaling-policy-basic-settings policy="$ctrl.policy" update-policy="$ctrl.updatePolicy">
+    </gce-autoscaling-policy-basic-settings>
+  </div>
+  <h5 class="section-heading">Metric Types</h5>
+  <gce-autoscaling-policy-metric-settings
+    show-no-metrics-warning="$ctrl.showNoMetricsWarning"
+    policy="$ctrl.policy"
+    update-policy="$ctrl.updatePolicy"
+  >
+  </gce-autoscaling-policy-metric-settings>
+  <h5 class="section-heading">Scaling Schedules</h5>
+  <div class="section-body">
+    <gce-autoscaling-policy-scaling-schedules
+      policy="$ctrl.policy"
+      update-policy="$ctrl.updatePolicy"
+    ></gce-autoscaling-policy-scaling-schedules>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/autoScalingPolicy/autoScalingPolicySelector.component.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-debugger */
+import { IComponentOptions, module } from 'angular';
+import { cloneDeep } from 'lodash';
+
+import { TaskMonitor } from '@spinnaker/core';
+
+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 './autoScalingPolicySelector.less';
+
+const gceAutoScalingPolicySelectorComponent = {
+  bindings: {
+    policy: '<',
+    enabled: '<',
+    setAutoScalingPolicy: '&',
+    autoscalingPolicy: '<',
+  },
+  templateUrl: require('./autoScalingPolicySelector.component.html'),
+  controller: 'gceUpsertAutoscalingPolicyCtrl',
+};
+
+export const GCE_AUTOSCALING_POLICY_SELECTOR_COMPONENT = 'spinnaker.gce.autoScalingPolicy.selector.component';
+module(GCE_AUTOSCALING_POLICY_SELECTOR_COMPONENT, [
+  GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_BASICSETTINGS_BASICSETTINGS_COMPONENT,
+  GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_METRICSETTINGS_METRICSETTINGS_COMPONENT,
+  GOOGLE_AUTOSCALINGPOLICY_COMPONENTS_SCALINGSCHEDULES_SCALINGSCHEDULES_COMPONENT,
+])
+  .controller('gceUpsertAutoscalingPolicyCtrl', [
+    '$scope',
+    function ($scope) {
+      var vm = this;
+      this.$onInit = function () {
+        this.policy = cloneDeep({});
+        this.setAutoScalingPolicy({ autoscalingPolicy: this.policy });
+
+        this.updatePolicy = (updatedPolicy) => {
+          $scope.$applyAsync(() => {
+            this.policy = updatedPolicy;
+            this.setAutoScalingPolicy({ autoscalingPolicy: this.policy });
+          });
+        };
+      };
+    },
+  ])
+  .component('gceAutoScalingPolicySelectorComponent', gceAutoScalingPolicySelectorComponent);

package/src/serverGroup/configure/wizard/autoScalingPolicy/autoScalingPolicySelector.less

@@ -0,0 +1,15 @@
+.gce-scaling-policy-wizard {
+  .error-message {
+    margin-top: 4px;
+  }
+
+  input.form-control,
+  select.form-control {
+    margin-bottom: 2px;
+    width: 100%;
+  }
+
+  .schedule-container {
+    overflow: hidden;
+  }
+}