@spinnaker/google 0.0.0-main-2

package/src/serverGroup/configure/wizard/securityGroups/tagManager.service.js

@@ -0,0 +1,208 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+
+import { FirewallLabels } from '@spinnaker/core';
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGMANAGER_SERVICE =
+  'spinnaker.deck.gce.tagManager.service';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGMANAGER_SERVICE; // for backwards compatibility
+module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGMANAGER_SERVICE, []).factory('gceTagManager', function () {
+  const resetKeys = ['command', 'securityGroups', 'securityGroupObjectsKeyedByTag', 'securityGroupObjectsKeyedById'];
+
+  this.reset = () => {
+    resetKeys.forEach((key) => delete this[key]);
+  };
+
+  this.register = (command) => {
+    this.command = command;
+    const { credentials, backingData } = command;
+    if (backingData.securityGroups[credentials] !== undefined) {
+      this.securityGroupObjects = _.cloneDeep(backingData.securityGroups[credentials].gce.global);
+
+      initializeSecurityGroupObjects(this.securityGroupObjects, command.tags);
+
+      const { byTag, bySecurityGroupId } = groupSecurityGroupObjects(this.securityGroupObjects);
+      this.securityGroupObjectsKeyedByTag = byTag;
+      this.securityGroupObjectsKeyedById = bySecurityGroupId;
+    }
+
+    if (!command.securityGroups) {
+      command.securityGroups = this.inferSecurityGroupIdsFromTags(command.tags);
+    }
+  };
+
+  this.inferSecurityGroupIdsFromTags = (commandTags = []) => {
+    return _.chain(commandTags)
+      .map((t) => this.securityGroupObjectsKeyedByTag[t.value])
+      .flatten()
+      .compact()
+      .filter((sg) => sg.network === this.command.network)
+      .map('id')
+      .uniq()
+      .value();
+  };
+
+  const initializeSecurityGroupObjects = (securityGroupObjects, commandTags = []) => {
+    securityGroupObjects.forEach((sg) => {
+      // Raw target tags look like '[tag-a, tag-b]'.
+      const rawTags = sg.targetTags;
+      sg.tagsArray = rawTags ? rawTags.substring(1, rawTags.length - 1).split(', ') : [];
+
+      sg.selectedTags = commandTags
+        ? _.intersection(
+            commandTags.map((t) => t.value),
+            sg.tagsArray,
+          )
+        : [];
+    });
+  };
+
+  const groupSecurityGroupObjects = (securityGroupObjects) => {
+    return securityGroupObjects.reduce(
+      (groupings, sg) => {
+        const { bySecurityGroupId } = groupings;
+        bySecurityGroupId[sg.id] = sg;
+
+        return sg.tagsArray.reduce((groupings, tag) => {
+          const { byTag } = groupings;
+          if (!byTag[tag]) {
+            byTag[tag] = [];
+          }
+          byTag[tag].push(sg);
+
+          return groupings;
+        }, groupings);
+      },
+      { byTag: {}, bySecurityGroupId: {} },
+    );
+  };
+
+  this.inferSelectedSecurityGroupFromTag = _.debounce((tagName) => {
+    let securityGroupObjectsWithTag = this.securityGroupObjectsKeyedByTag[tagName];
+    const c = this.command;
+
+    if (securityGroupObjectsWithTag) {
+      securityGroupObjectsWithTag = _.filter(securityGroupObjectsWithTag, (sg) => sg.network === this.command.network);
+    }
+
+    if (securityGroupObjectsWithTag) {
+      updateSelectedTagsOnSecurityGroupObjects(securityGroupObjectsWithTag, tagName);
+      c.securityGroups = _.map(
+        updateSelectedSecurityGroups(getSecurityGroupObjectsFromIds(c.securityGroups), securityGroupObjectsWithTag),
+        'id',
+      );
+    }
+
+    // If you pause while typing "tag-a," but you really want to add "tag-abc,"
+    // make sure you remove "tag-a".
+    this.updateSelectedTags();
+  }, 100);
+
+  this.updateSelectedTags = () => {
+    const c = this.command;
+    const tags = c.tags.map((t) => t.value);
+
+    getSecurityGroupObjectsFromIds(c.securityGroups).forEach((sg) => {
+      if (sg.selectedTags) {
+        sg.selectedTags = _.intersection(sg.selectedTags, tags);
+      }
+
+      if (!_.get(sg, 'selectedTags.length')) {
+        c.securityGroups = _.without(c.securityGroups, sg.id);
+      }
+    });
+  };
+
+  this.addTag = (tagName) => {
+    const c = this.command;
+    const tags = c.tags;
+    let securityGroupObjectsWithTag = this.securityGroupObjectsKeyedByTag[tagName];
+
+    if (securityGroupObjectsWithTag) {
+      securityGroupObjectsWithTag = _.filter(securityGroupObjectsWithTag, (sg) => sg.network === this.command.network);
+    }
+
+    if (
+      !_.includes(
+        tags.map((t) => t.value),
+        tagName,
+      )
+    ) {
+      tags.push({ value: tagName });
+    }
+
+    if (securityGroupObjectsWithTag) {
+      updateSelectedTagsOnSecurityGroupObjects(securityGroupObjectsWithTag, tagName);
+      c.securityGroups = _.map(
+        updateSelectedSecurityGroups(getSecurityGroupObjectsFromIds(c.securityGroups), securityGroupObjectsWithTag),
+        'id',
+      );
+    }
+  };
+
+  const getSecurityGroupObjectsFromIds = (ids) => ids.map((id) => this.securityGroupObjectsKeyedById[id]);
+
+  const updateSelectedTagsOnSecurityGroupObjects = (securityGroupObjects, newTag) => {
+    securityGroupObjects.forEach((sg) => {
+      sg.selectedTags = _.chain(sg.selectedTags || [])
+        .concat([newTag])
+        .uniq()
+        .value();
+    });
+  };
+
+  const updateSelectedSecurityGroups = (oldGroups, newGroups) => {
+    return _.chain(oldGroups).concat(newGroups).uniq().value();
+  };
+
+  this.removeTag = (tagName) => {
+    const c = this.command;
+    const securityGroupIds = c.securityGroups || [];
+    const securityGroupObjects = getSecurityGroupObjectsFromIds(securityGroupIds);
+
+    securityGroupObjects.forEach((sg) => {
+      if (sg.selectedTags) {
+        sg.selectedTags = sg.selectedTags.filter((tag) => tag !== tagName);
+      }
+    });
+
+    c.tags = c.tags.filter((tag) => tag.value !== tagName);
+  };
+
+  this.removeSecurityGroup = (securityGroupId) => {
+    const securityGroupObject = this.securityGroupObjectsKeyedById[securityGroupId];
+    const tagsToRemove = securityGroupObject.selectedTags;
+    const c = this.command;
+
+    getSecurityGroupObjectsFromIds(c.securityGroups).forEach((sg) => {
+      if (sg.selectedTags) {
+        sg.selectedTags = _.difference(sg.selectedTags, tagsToRemove);
+      }
+    });
+
+    securityGroupObject.selectedTags = [];
+    c.tags = _.chain(c.tags)
+      .map((t) => t.value)
+      .difference(tagsToRemove)
+      .map((t) => ({ value: t }))
+      .value();
+  };
+
+  this.getToolTipContent = (tagName) => {
+    const groups = _.get(this, ['securityGroupObjectsKeyedByTag', tagName]);
+    const groupIds = groups ? groups.filter((sg) => sg.network === this.command.network).map((sg) => sg.id) : [];
+
+    return `This tag associates this server group with ${
+      groupIds.length > 1 ? FirewallLabels.get('firewalls') : FirewallLabels.get('firewall')
+    }
+              <em>${groupIds.join(', ')}</em>.`;
+  };
+
+  this.showToolTip = (tagName) => {
+    return !!_.get(this, ['securityGroupObjectsKeyedByTag', tagName]);
+  };
+
+  return this;
+});

package/src/serverGroup/configure/wizard/securityGroups/tagSelector.component.html

@@ -0,0 +1,26 @@
+<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"
+      >Target Tags
+      <help-field
+        ng-if="!$ctrl.securityGroup.selectedTags.length"
+        key="gce.serverGroup.securityGroups.targetTags"
+      ></help-field>
+    </b>
+  </div>
+  <div class="col-md-8">
+    <ui-select
+      multiple
+      on-remove="$ctrl.onRemove($item)"
+      on-select="$ctrl.onSelect($item)"
+      nested
+      ng-model="$ctrl.securityGroup.selectedTags"
+      class="form-control input-sm"
+    >
+      <ui-select-match>{{ $item }}</ui-select-match>
+      <ui-select-choices repeat="tag in $ctrl.securityGroup.tagsArray | filter: $select.search">
+        <span ng-bind-html="tag | highlight: $select.search"></span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/securityGroups/tagSelector.component.js

@@ -0,0 +1,31 @@
+import { module } from 'angular';
+
+import { GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGMANAGER_SERVICE } from './tagManager.service';
+
+('use strict');
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGSELECTOR_COMPONENT =
+  'spinnaker.deck.gce.tagSelector.component';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGSELECTOR_COMPONENT; // for backwards compatibility
+module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGSELECTOR_COMPONENT, [
+  GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGMANAGER_SERVICE,
+]).component('gceTagSelector', {
+  bindings: {
+    command: '=',
+    securityGroupId: '=',
+  },
+  templateUrl: require('./tagSelector.component.html'),
+  controller: [
+    '$scope',
+    'gceTagManager',
+    function ($scope, gceTagManager) {
+      this.securityGroup = gceTagManager.securityGroupObjectsKeyedById[this.securityGroupId];
+      this.onSelect = gceTagManager.addTag;
+      this.onRemove = gceTagManager.removeTag;
+
+      $scope.$on('uis:select', function (event) {
+        event.preventDefault();
+      });
+    },
+  ],
+});

package/src/serverGroup/configure/wizard/securityGroups/tagSelectorGenerator.component.js

@@ -0,0 +1,44 @@
+import * as angular from 'angular';
+
+import { GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGMANAGER_SERVICE } from './tagManager.service';
+import { GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGSELECTOR_COMPONENT } from './tagSelector.component';
+
+('use strict');
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGSELECTORGENERATOR_COMPONENT =
+  'spinnaker.deck.gce.tagSelectorGenerator.component';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGSELECTORGENERATOR_COMPONENT; // for backwards compatibility
+angular
+  .module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGSELECTORGENERATOR_COMPONENT, [
+    GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGSELECTOR_COMPONENT,
+    GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGMANAGER_SERVICE,
+  ])
+  .directive('gceTagSelectorGenerator', [
+    '$compile',
+    'gceTagManager',
+    function ($compile, gceTagManager) {
+      const template = `<gce-tag-selector security-group-id="securityGroupId" command="command">
+                    </gce-tag-selector>`;
+
+      return {
+        restrict: 'E',
+        scope: {
+          command: '=',
+          securityGroupId: '=',
+        },
+        link: function (scope, element) {
+          const { securityGroupId } = scope;
+          const securityGroupObject = gceTagManager.securityGroupObjectsKeyedById[securityGroupId];
+
+          if (securityGroupObject && securityGroupObject.tagsArray.length < 2) {
+            securityGroupObject.tagsArray.forEach((tagName) => gceTagManager.addTag(tagName));
+            return;
+          }
+
+          const compiledTemplate = $compile(template)(scope);
+
+          angular.element(element).closest('.ui-select-match-item').after(compiledTemplate);
+        },
+      };
+    },
+  ]);

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

@@ -0,0 +1,52 @@
+<form name="form" class="form-horizontal" novalidate>
+  <div ng-if="state.requiresTemplateSelection">
+    <ng-include src="pages.templateSelection"></ng-include>
+  </div>
+  <div ng-if="!state.loaded" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <div ng-if="!state.requiresTemplateSelection">
+    <v2-modal-wizard ng-show="state.loaded" heading="{{title}}" task-monitor="taskMonitor" dismiss="$dismiss()">
+      <v2-wizard-page key="location" label="Basic Settings" mark-complete-on-view="false">
+        <ng-include src="pages.basicSettings"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="load-balancers" label="Load Balancers" mark-complete-on-view="false">
+        <ng-include src="pages.loadBalancers"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="security-groups" label="{{firewallsLabel}}" done="true">
+        <ng-include src="pages.securityGroups"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="instance-type" label="Instance Type" mark-complete-on-view="false">
+        <ng-include src="pages.instanceType"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="capacity" label="Capacity" mark-complete-on-view="false">
+        <ng-include src="pages.capacity"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="autoscaling-policy" label="Autoscaling Policy" mark-complete-on-view="false">
+        <ng-include src="pages.autoScalingPolicy"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="autohealing-policy" label="Autohealing Policy" mark-complete-on-view="false">
+        <ng-include src="pages.autoHealingPolicy"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="zones" label="Zones" mark-complete-on-view="false" done="true">
+        <ng-include src="pages.zones"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="advanced" label="Advanced Settings" mandatory="false" done="true">
+        <ng-include src="pages.advancedSettings"></ng-include>
+      </v2-wizard-page>
+    </v2-modal-wizard>
+    <div class="modal-footer" ng-if="state.loaded">
+      <button ng-disabled="taskMonitor.submitting" class="btn btn-default btn-cancel" ng-click="ctrl.cancel()">
+        Cancel
+      </button>
+      <submit-button
+        ng-if="ctrl.showSubmitButton()"
+        is-disabled="!ctrl.isValid() || taskMonitor.submitting"
+        label="command.viewState.submitButtonLabel"
+        submitting="taskMonitor.submitting"
+        on-click="ctrl.submit()"
+        is-new="true"
+      ></submit-button>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,9 @@
+<deploy-initializer
+  cloud-provider="gce"
+  command="command"
+  application="application"
+  parent-state="state"
+  dismiss="ctrl.cancel()"
+  template-selection-text="ctrl.templateSelectionText"
+  on-template-selected="ctrl.templateSelected()"
+></deploy-initializer>

package/src/serverGroup/configure/wizard/zones/regionalSelector.directive.html

@@ -0,0 +1,13 @@
+<div class="form-group">
+  <div class="col-md-3 sm-label-right"><b>Regional</b></div>
+  <div class="col-md-7 checkbox">
+    <label
+      ><input type="checkbox" ng-model="vm.command.regional" />
+      Distribute instances across multiple zones
+    </label>
+    <label ng-if="vm.command.regional"
+      ><input type="checkbox" ng-model="vm.command.selectZones" />
+      Select zones explicitly
+    </label>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/zones/regionalSelector.directive.js

@@ -0,0 +1,21 @@
+'use strict';
+
+import * as angular from 'angular';
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_REGIONALSELECTOR_DIRECTIVE =
+  'spinnaker.google.serverGroup.configure.wizard.capacity.regional.directive';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_REGIONALSELECTOR_DIRECTIVE; // for backwards compatibility
+angular
+  .module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_REGIONALSELECTOR_DIRECTIVE, [])
+  .directive('gceRegionalSelector', function () {
+    return {
+      restrict: 'E',
+      templateUrl: require('./regionalSelector.directive.html'),
+      scope: {},
+      bindToController: {
+        command: '=',
+      },
+      controllerAs: 'vm',
+      controller: angular.noop,
+    };
+  });

package/src/serverGroup/configure/wizard/zones/targetShapeSelector.directive.html

@@ -0,0 +1,13 @@
+<div class="form-group">
+  <div class="col-md-3 sm-label-right"><b>Target Shape</b></div>
+  <div class="col-md-3">
+    <ui-select ng-model="vm.command.distributionPolicy.targetShape" class="form-control input-sm" required>
+      <ui-select-match placeholder="Select...">{{$select.selected}}</ui-select-match>
+      <ui-select-choices
+        repeat="targetShape in vm.command.backingData.distributionPolicyTargetShapes | filter: $select.search"
+      >
+        <span ng-bind-html="targetShape | highlight: $select.search"></span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/zones/targetShapeSelector.directive.ts

@@ -0,0 +1,20 @@
+import { module, noop } from 'angular';
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_TARGETSHAPESELECTOR_DIRECTIVE =
+  'spinnaker.google.serverGroup.configure.wizard.capacity.targetShape.directive';
+
+module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_TARGETSHAPESELECTOR_DIRECTIVE, []).directive(
+  'gceTargetShapeSelector',
+  function () {
+    return {
+      restrict: 'E',
+      templateUrl: require('./targetShapeSelector.directive.html'),
+      scope: {},
+      bindToController: {
+        command: '=',
+      },
+      controllerAs: 'vm',
+      controller: noop,
+    };
+  },
+);

package/src/serverGroup/configure/wizard/zones/zoneSelector.directive.html

@@ -0,0 +1,24 @@
+<div class="form-group" ng-if="!vm.command.regional">
+  <div class="col-md-3 sm-label-right">Zone</div>
+  <div class="col-md-7" ng-if="!vm.command.region">(Select a region)</div>
+  <div class="col-md-7">
+    <select
+      class="form-control input-sm"
+      ng-model="vm.command.zone"
+      ng-options="zone for zone in vm.command.backingData.filtered.zones"
+      ng-required="!vm.command.regional"
+    ></select>
+  </div>
+</div>
+
+<div class="form-group" ng-if="vm.command.regional && vm.command.selectZones">
+  <div class="col-md-3 sm-label-right">Zones</div>
+  <div class="col-md-7">
+    <ui-select multiple ng-model="vm.command.distributionPolicy.zones" class="form-control input-sm">
+      <ui-select-match>{{ $item }}</ui-select-match>
+      <ui-select-choices repeat="zone as zone in vm.command.backingData.filtered.zones">
+        <span>{{ zone }}</span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/zones/zoneSelector.directive.js

@@ -0,0 +1,21 @@
+'use strict';
+
+import * as angular from 'angular';
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_ZONESELECTOR_DIRECTIVE =
+  'spinnaker.google.serverGroup.configure.wizard.capacity.zone.directive';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_ZONESELECTOR_DIRECTIVE; // for backwards compatibility
+angular
+  .module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ZONES_ZONESELECTOR_DIRECTIVE, [])
+  .directive('gceZoneSelector', function () {
+    return {
+      restrict: 'E',
+      templateUrl: require('./zoneSelector.directive.html'),
+      scope: {},
+      bindToController: {
+        command: '=',
+      },
+      controllerAs: 'vm',
+      controller: angular.noop,
+    };
+  });

package/src/serverGroup/details/ServerGroupDiskDescriptions.tsx

@@ -0,0 +1,97 @@
+import { module } from 'angular';
+import { get, last } from 'lodash';
+import React from 'react';
+import { react2angular } from 'react2angular';
+
+import type { Application } from '@spinnaker/core';
+import { withErrorBoundary } from '@spinnaker/core';
+
+import type { IGceDisk, IGceServerGroup } from '../../domain';
+import { MarkDiskStatefulButton } from './stateful/MarkDiskStatefulButton';
+import { StatefulMIGService } from './stateful/StatefulMIGService';
+import { UpdateBootImageButton } from './stateful/UpdateBootImageButton';
+
+interface IServerGroupDiskDescriptionProps {
+  application: Application;
+  serverGroup: IGceServerGroup;
+}
+
+class ServerGroupDiskDescriptions extends React.Component<IServerGroupDiskDescriptionProps> {
+  public render() {
+    const { application, serverGroup } = this.props;
+    const disks: IGceDisk[] = get(serverGroup, 'launchConfig.instanceTemplate.properties.disks', []);
+    const statefulOperationsEnabled: boolean = StatefulMIGService.statefulMigsEnabled();
+    const canUpdateBootImage =
+      statefulOperationsEnabled &&
+      disks.some((disk) => StatefulMIGService.isDiskStateful(disk.deviceName, serverGroup));
+
+    return disks.map((disk) => {
+      if (disk.boot) {
+        return (
+          <React.Fragment key={disk.deviceName}>
+            <dt>
+              Boot Disk
+              {canUpdateBootImage && (
+                <UpdateBootImageButton
+                  application={application}
+                  bootImage={ServerGroupDiskDescriptions.getDiskImageName(disk)}
+                  serverGroup={serverGroup}
+                />
+              )}
+            </dt>
+            <dd>{ServerGroupDiskDescriptions.getDiskTypeLabel(disk)}</dd>
+            <dd>{ServerGroupDiskDescriptions.getDiskImageLabel(disk)}</dd>
+          </React.Fragment>
+        );
+      }
+      return (
+        <React.Fragment key={disk.deviceName}>
+          <dt>
+            Disk
+            {statefulOperationsEnabled && (
+              <MarkDiskStatefulButton
+                application={application}
+                deviceName={disk.deviceName}
+                serverGroup={serverGroup}
+              />
+            )}
+          </dt>
+          <dd>{ServerGroupDiskDescriptions.getDiskTypeLabel(disk)}</dd>
+          <dd>{ServerGroupDiskDescriptions.getDiskImageLabel(disk)}</dd>
+        </React.Fragment>
+      );
+    });
+  }
+
+  private static translateDiskType = (disk: IGceDisk): string => {
+    const diskType = disk.initializeParams.diskType;
+    if (diskType === 'pd-ssd') {
+      return 'Persistent SSD';
+    } else if (diskType === 'local-ssd') {
+      return 'Local SSD';
+    } else {
+      return 'Persistent Std';
+    }
+  };
+
+  private static getDiskTypeLabel = (disk: IGceDisk): string => {
+    return `${ServerGroupDiskDescriptions.translateDiskType(disk)}: ${disk.initializeParams.diskSizeGb}GB`;
+  };
+
+  private static getDiskImageLabel = (disk: IGceDisk): string => {
+    return `Image: ${ServerGroupDiskDescriptions.getDiskImageName(disk)}`;
+  };
+
+  private static getDiskImageName = (disk: IGceDisk): string => {
+    return last(get(disk, 'initializeParams.sourceImage', '').split('/'));
+  };
+}
+
+export const GCE_SERVER_GROUP_DISK_DESCRIPTIONS = 'spinnaker.gce.serverGroupDiskDescriptions';
+module(GCE_SERVER_GROUP_DISK_DESCRIPTIONS, []).component(
+  'gceServerGroupDiskDescriptions',
+  react2angular(withErrorBoundary(ServerGroupDiskDescriptions, 'gceServerGroupDiskDescriptions'), [
+    'application',
+    'serverGroup',
+  ]),
+);

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

@@ -0,0 +1,38 @@
+import type { IComponentOptions, IController } from 'angular';
+import { module } from 'angular';
+import type { IModalService } from 'angular-ui-bootstrap';
+
+import type { Application, IServerGroup } from '@spinnaker/core';
+
+class GceAddAutoHealingPolicyButtonCtrl implements IController {
+  public application: Application;
+  public serverGroup: IServerGroup;
+
+  public static $inject = ['$uibModal'];
+  constructor(private $uibModal: IModalService) {}
+
+  public addAutoHealingPolicy(): void {
+    this.$uibModal.open({
+      templateUrl: require('./modal/upsertAutoHealingPolicy.modal.html'),
+      controller: 'gceUpsertAutoHealingPolicyModalCtrl',
+      controllerAs: 'ctrl',
+      size: 'md',
+      resolve: {
+        serverGroup: () => this.serverGroup,
+        application: () => this.application,
+      },
+    });
+  }
+}
+
+const gceAddAutoHealingPolicyButton: IComponentOptions = {
+  bindings: {
+    application: '<',
+    serverGroup: '<',
+  },
+  template: '<a href ng-click="$ctrl.addAutoHealingPolicy()">Create new autohealing policy</a>',
+  controller: GceAddAutoHealingPolicyButtonCtrl,
+};
+
+export const GCE_ADD_AUTOHEALING_POLICY_BUTTON = 'spinnaker.gce.addAutoHealingPolicyButton.component';
+module(GCE_ADD_AUTOHEALING_POLICY_BUTTON, []).component('gceAddAutoHealingPolicyButton', gceAddAutoHealingPolicyButton);