@spinnaker/google 0.0.0-main-2

package/src/serverGroup/configure/wizard/advancedSettings/GceAcceleratorConfigurer.tsx

@@ -0,0 +1,222 @@
+import { module } from 'angular';
+
+import { get, isEmpty } from 'lodash';
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+import { react2angular } from 'react2angular';
+
+import { HelpField, withErrorBoundary } from '@spinnaker/core';
+
+import type { IGceAcceleratorType } from './gceAccelerator.service';
+
+interface IGceAcceleratorConfig {
+  acceleratorType: string;
+  acceleratorCount: number;
+}
+
+export interface IGceAcceleratorConfigurerProps {
+  acceleratorConfigs: IGceAcceleratorConfig[];
+  availableAccelerators: IGceAcceleratorType[];
+  regional: boolean;
+  setAcceleratorConfigs: (configs: IGceAcceleratorConfig[]) => void;
+  zone: string;
+}
+
+export function GceAcceleratorConfigurer({
+  acceleratorConfigs = [],
+  availableAccelerators = [],
+  regional,
+  setAcceleratorConfigs,
+  zone,
+}: IGceAcceleratorConfigurerProps) {
+  const addAccelerator = (): void => {
+    if (isEmpty(availableAccelerators)) {
+      return;
+    }
+    setAcceleratorConfigs(
+      acceleratorConfigs.concat([
+        {
+          acceleratorType: availableAccelerators[0].name,
+          acceleratorCount: 1,
+        },
+      ]),
+    );
+  };
+
+  const removeAccelerator = (indexToRemove: number): void => {
+    setAcceleratorConfigs(
+      acceleratorConfigs.filter((_config, index) => {
+        return indexToRemove !== index;
+      }),
+    );
+  };
+
+  const getTypeOptions = (): Array<Option<string>> => {
+    return availableAccelerators.map(({ description, name }) => {
+      return {
+        label: description,
+        value: name,
+      };
+    });
+  };
+
+  const getAvailableCardCounts = (acceleratorType: string): number[] => {
+    const acceleratorConfig = availableAccelerators.find(({ name }) => name === acceleratorType);
+    return get(acceleratorConfig, 'availableCardCounts', []);
+  };
+
+  const getCountOptions = (acceleratorType: string): Array<Option<number>> => {
+    return getAvailableCardCounts(acceleratorType).map((count) => ({
+      label: count.toString(),
+      value: count,
+    }));
+  };
+
+  const getNearestCount = (type: string, currentCount: number): number => {
+    const availableCounts = getAvailableCardCounts(type);
+    if (availableCounts.includes(currentCount)) {
+      return currentCount;
+    }
+    return availableCounts.reduce((nearest, count) => {
+      if (count > currentCount) {
+        return nearest;
+      }
+      return count;
+    }, 1);
+  };
+
+  const onTypeChange = (indexToUpdate: number, type: string): void => {
+    setAcceleratorConfigs(
+      acceleratorConfigs.map((config, index) => {
+        if (indexToUpdate !== index) {
+          return config;
+        }
+        return {
+          acceleratorType: type,
+          acceleratorCount: getNearestCount(type, config.acceleratorCount),
+        };
+      }),
+    );
+  };
+
+  const onCountChange = (indexToUpdate: number, count: number) => {
+    setAcceleratorConfigs(
+      acceleratorConfigs.map((config, index) => {
+        if (indexToUpdate !== index) {
+          return config;
+        }
+        return {
+          ...config,
+          acceleratorCount: count,
+        };
+      }),
+    );
+  };
+
+  return (
+    <div className="form-group">
+      <div className="sm-label-left">
+        Accelerators <HelpField id="gce.serverGroup.accelerator" />
+      </div>
+      <table className="table table-condensed packed tags">
+        <thead>
+          <tr>
+            <th style={{ width: '75%' }}>Type</th>
+            <th style={{ width: '15%' }}>Count</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {acceleratorConfigs.map(({ acceleratorType, acceleratorCount }, i) => (
+            <tr key={i}>
+              <td>
+                <Select
+                  clearable={false}
+                  onChange={(option: Option<string>) => onTypeChange(i, option.value)}
+                  options={getTypeOptions()}
+                  value={acceleratorType}
+                />
+              </td>
+              <td>
+                <Select
+                  clearable={false}
+                  onChange={(option: Option<number>) => onCountChange(i, option.value)}
+                  options={getCountOptions(acceleratorType)}
+                  value={acceleratorCount}
+                />
+              </td>
+              <td>
+                <button className="btn btn-link" onClick={() => removeAccelerator(i)}>
+                  <span className="glyphicon glyphicon-trash" />
+                </button>
+              </td>
+            </tr>
+          ))}
+          {!isEmpty(acceleratorConfigs) && (
+            <tr>
+              <td colSpan={3}>
+                Adding Accelerators places constraints on the instances that you can deploy. See
+                <a href="https://cloud.google.com/compute/docs/gpus/#restrictions" target="_blank">
+                  {' '}
+                  the complete list of these restrictions
+                </a>{' '}
+                for more information.
+              </td>
+            </tr>
+          )}
+          {!isEmpty(availableAccelerators) && (
+            <tr>
+              <td colSpan={3}>
+                <button className="btn btn-block btn-sm add-new" onClick={addAccelerator}>
+                  <span className="glyphicon glyphicon-plus-sign" /> Add Accelerator
+                </button>
+              </td>
+            </tr>
+          )}
+          {isEmpty(availableAccelerators) && !regional && !zone && (
+            <tr>
+              <td colSpan={3}>
+                A zone must be selected to configure accelerators. Please note: the set of available accelerator types
+                are limited by zone. See{' '}
+                <a href="https://cloud.google.com/compute/docs/gpus/#gpus-list" target="_blank">
+                  the complete list of types in each zone
+                </a>{' '}
+                for more information.
+              </td>
+            </tr>
+          )}
+          {isEmpty(availableAccelerators) && !regional && zone && (
+            <tr>
+              <td colSpan={3}>There are no accelerators available in the currently selected zone.</td>
+            </tr>
+          )}
+          {isEmpty(availableAccelerators) && regional && (
+            <tr>
+              <td colSpan={3}>
+                There are no accelerators available in all of the currently selected zone(s). Please explicitly select
+                only zones that each support the accelerators you would like to configure. See{' '}
+                <a href="https://cloud.google.com/compute/docs/gpus/#gpus-list" target="_blank">
+                  the complete list of types in each zone
+                </a>{' '}
+                for more information.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export const GCE_ACCELERATOR_CONFIGURER = 'spinnaker.gce.accelerator.component';
+module(GCE_ACCELERATOR_CONFIGURER, []).component(
+  'gceAcceleratorConfigurer',
+  react2angular(withErrorBoundary(GceAcceleratorConfigurer, 'gceAcceleratorConfigurer'), [
+    'acceleratorConfigs',
+    'availableAccelerators',
+    'regional',
+    'setAcceleratorConfigs',
+    'zone',
+  ]),
+);

package/src/serverGroup/configure/wizard/advancedSettings/advancedSettings.directive.html

@@ -0,0 +1,277 @@
+<div class="form-group">
+  <div class="col-md-5 sm-label-right">
+    <b>Minimum CPU Platform</b>
+    <help-field key="gce.serverGroup.minCpuPlatform"></help-field>
+  </div>
+  <div class="col-md-6">
+    <ui-select ng-model="vm.command.minCpuPlatform" class="form-control input-sm" required>
+      <ui-select-match placeholder="Select...">{{$select.selected}}</ui-select-match>
+      <ui-select-choices
+        repeat="minCpuPlatform in vm.command.backingData.filtered.cpuPlatforms | filter: $select.search"
+      >
+        <span ng-bind-html="minCpuPlatform | highlight: $select.search"></span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+</div>
+
+<gce-disk-configurer
+  command="vm.command"
+  disks="vm.command.disks"
+  update-disks="vm.setDisks(disks)"
+></gce-disk-configurer>
+
+<gce-accelerator-configurer
+  accelerator-configs="vm.command.acceleratorConfigs"
+  regional="vm.command.regional"
+  set-accelerator-configs="vm.setAcceleratorConfigs"
+  zone="vm.command.zone"
+  available-accelerators="vm.command.viewState.acceleratorTypes"
+></gce-accelerator-configurer>
+
+<div class="form-group">
+  <div class="sm-label-left" style="margin-bottom: 5px">
+    User Data <help-field key="gce.serverGroup.userData"></help-field>
+  </div>
+  <div class="col-md-12">
+    <textarea class="form-control" ng-model="vm.command.userData" rows="3" placeholder="Plaintext custom user data">
+    </textarea>
+  </div>
+</div>
+<div class="form-group">
+  <div class="sm-label-left">
+    <b>Custom Metadata</b>
+    <help-field key="gce.serverGroup.customMetadata"></help-field>
+  </div>
+  <map-editor model="vm.command.instanceMetadata" add-button-label="Add New Metadata" allow-empty="true"></map-editor>
+</div>
+<div class="form-group">
+  <div class="sm-label-left">
+    <table class="table table-condensed packed tags">
+      <b>Tags</b>
+      <tbody>
+        <tr ng-repeat="tag in vm.command.tags">
+          <td>
+            <input
+              class="form-control input-sm"
+              type="text"
+              ng-model="tag.value"
+              ng-change="vm.inferSelectedSecurityGroupFromTag(tag.value)"
+              required
+            />
+          </td>
+          <td>
+            <help-field ng-if="vm.showToolTip(tag.value)" content="{{vm.getToolTipContent(tag.value)}}"></help-field>
+            <a class="btn btn-link sm-label" ng-click="vm.removeTag($index)"
+              ><span class="glyphicon glyphicon-trash"></span
+            ></a>
+          </td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <td colspan="1">
+            <button class="btn btn-block btn-sm add-new" ng-click="vm.addTag()">
+              <span class="glyphicon glyphicon-plus-sign"></span> Add New Tag
+            </button>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</div>
+<div class="form-group">
+  <div class="sm-label-left">
+    <b>Labels</b>
+    <help-field key="gce.serverGroup.labels"></help-field>
+  </div>
+  <map-editor model="vm.command.labels" add-button-label="Add New Label" allow-empty="true"></map-editor>
+</div>
+<div class="form-group">
+  <div class="sm-label-left">
+    <b>Resource Manager Tags</b>
+    <help-field key="gce.serverGroup.resourceManagerTags"></help-field>
+  </div>
+  <map-editor model="vm.command.resourceManagerTags" add-button-label="Add New Tag" allow-empty="false"></map-editor>
+</div>
+<div class="form-group">
+  <div class="sm-label-left">
+    <b>Partner Metadata</b>
+    <help-field key="gce.serverGroup.partnerMetadata"></help-field>
+  </div>
+  <map-object-editor
+    model="vm.command.partnerMetadata"
+    add-button-label="Add New Metadata"
+    allow-empty="false"
+  ></map-object-editor>
+</div>
+<div class="form-group">
+  <div class="sm-label-left">
+    Shielded VMs
+    <help-field key="gce.serverGroup.shieldedVmConfig"></help-field>
+  </div>
+  <div class="col-md-9 checkbox">
+    <label>
+      <input type="checkbox" ng-model="vm.command.enableSecureBoot" />
+      Turn on Secure Boot
+      <help-field key="gce.serverGroup.shieldedVmSecureBoot"></help-field>
+    </label>
+  </div>
+  <div class="col-md-9 checkbox">
+    <label>
+      <input type="checkbox" ng-model="vm.command.enableVtpm" ng-change="vm.setEnableVtpm()" />
+      Turn on vTPM
+      <help-field key="gce.serverGroup.shieldedVmVtpm"></help-field>
+    </label>
+  </div>
+  <div class="col-md-9 checkbox">
+    <label>
+      <input type="checkbox" ng-model="vm.command.enableIntegrityMonitoring" ng-disabled="!vm.command.enableVtpm" />
+      Turn on Integrity Monitoring
+      <help-field key="gce.serverGroup.shieldedVmIntegrityMonitoring"></help-field>
+    </label>
+  </div>
+</div>
+<div class="form-group">
+  <div class="col-md-5 sm-label-right">
+    <b>Preemptibility</b>
+    <help-field key="gce.serverGroup.preemptibility"></help-field>
+  </div>
+  <div class="col-md-2 radio">
+    <label>
+      <input
+        type="radio"
+        ng-model="vm.command.preemptible"
+        ng-value="false"
+        id="preemptibleFalse"
+        ng-change="vm.setPreemptible()"
+      />
+      Off
+    </label>
+  </div>
+  <div class="col-md-2 radio">
+    <label>
+      <input
+        type="radio"
+        ng-model="vm.command.preemptible"
+        ng-value="true"
+        id="preemptibleTrue"
+        ng-change="vm.setPreemptible()"
+      />
+      On
+    </label>
+  </div>
+</div>
+<div class="form-group">
+  <div class="col-md-5 sm-label-right">
+    <b>Automatic Restart</b>
+    <help-field key="gce.serverGroup.automaticRestart"></help-field>
+  </div>
+  <div class="col-md-2 radio">
+    <label>
+      <input type="radio" ng-model="vm.command.automaticRestart" ng-value="false" id="automaticRestartFalse" />
+      Off
+    </label>
+  </div>
+  <div class="col-md-2 radio">
+    <label>
+      <input type="radio" ng-model="vm.command.automaticRestart" ng-value="true" id="automaticRestartTrue" />
+      On
+    </label>
+  </div>
+</div>
+<div class="form-group">
+  <div class="col-md-5 sm-label-right">
+    <b>On Host Maintenance</b>
+    <help-field key="gce.serverGroup.onHostMaintenance"></help-field>
+  </div>
+  <div class="col-md-2 radio">
+    <label>
+      <input type="radio" ng-model="vm.command.onHostMaintenance" ng-value="'MIGRATE'" id="onHostMaintenanceMigrate" />
+      Migrate
+    </label>
+  </div>
+  <div class="col-md-2 radio">
+    <label>
+      <input
+        type="radio"
+        ng-model="vm.command.onHostMaintenance"
+        ng-value="'TERMINATE'"
+        id="onHostMaintenanceTerminate"
+      />
+      Terminate
+    </label>
+  </div>
+</div>
+<div class="form-group">
+  <div class="col-md-5 sm-label-right"><b>Associate Public IP Address</b></div>
+  <div class="col-md-2 radio">
+    <label>
+      <input
+        type="radio"
+        ng-model="vm.command.associatePublicIpAddress"
+        ng-value="true"
+        id="associatePublicIpAddressTrue"
+      />
+      Yes
+    </label>
+  </div>
+  <div class="col-md-2 radio">
+    <label>
+      <input
+        type="radio"
+        ng-model="vm.command.associatePublicIpAddress"
+        ng-value="false"
+        id="associatePublicIpAddressFalse"
+      />
+      No
+    </label>
+  </div>
+</div>
+<div class="form-group">
+  <div class="col-md-5 sm-label-right">
+    <b>Can IP Forward</b>
+    <help-field key="gce.serverGroup.canIpForward"></help-field>
+  </div>
+  <div class="col-md-2 radio">
+    <label>
+      <input type="radio" ng-model="vm.command.canIpForward" ng-value="true" id="canIpForwardTrue" />
+      Yes
+    </label>
+  </div>
+  <div class="col-md-2 radio">
+    <label>
+      <input type="radio" ng-model="vm.command.canIpForward" ng-value="false" id="canIpForwardFalse" />
+      No
+    </label>
+  </div>
+</div>
+<div class="form-group">
+  <div class="col-md-5 sm-label-right">
+    <b>Service Account</b>
+    <help-field key="gce.instance.serviceAccount"></help-field>
+  </div>
+  <div class="col-md-6">
+    <input type="text" class="form-control input-sm" ng-model="vm.command.serviceAccountEmail" />
+  </div>
+</div>
+<div class="form-group">
+  <div class="col-md-5 sm-label-right">
+    <b>Auth Scopes</b>
+    <help-field key="gce.instance.authScopes"></help-field>
+  </div>
+  <div class="col-md-6">
+    <ui-select
+      multiple
+      tagging
+      tagging-label="(custom auth scope)"
+      ng-model="vm.command.authScopes"
+      class="form-control input-sm"
+    >
+      <ui-select-match>{{$item}}</ui-select-match>
+      <ui-select-choices repeat="authScope in vm.command.backingData.authScopes | filter: $select.search">
+        <span ng-bind-html="authScope | highlight: $select.search"></span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+<div class="container-fluid form-horizontal">
+  <gce-server-group-advanced-settings-selector command="command"></gce-server-group-advanced-settings-selector>
+  <div class="form-group" ng-if="application.attributes.platformHealthOnlyShowOverride">
+    <div class="col-md-5 sm-label-right"><b>Task Completion</b></div>
+    <div class="col-md-6">
+      <platform-health-override command="command" platform-health-type="'Google'"> </platform-health-override>
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/advancedSettings/advancedSettingsSelector.directive.js

@@ -0,0 +1,71 @@
+import { module } from 'angular';
+import UI_SELECT from 'ui-select';
+
+import { GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGMANAGER_SERVICE } from '../securityGroups/tagManager.service';
+
+('use strict');
+
+export const GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGSSELECTOR_DIRECTIVE =
+  'spinnaker.google.serverGroup.configure.wizard.advancedSettings.selector.directive';
+export const name = GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGSSELECTOR_DIRECTIVE; // for backwards compatibility
+module(GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGSSELECTOR_DIRECTIVE, [
+  UI_SELECT,
+  GOOGLE_SERVERGROUP_CONFIGURE_WIZARD_SECURITYGROUPS_TAGMANAGER_SERVICE,
+])
+  .directive('gceServerGroupAdvancedSettingsSelector', function () {
+    return {
+      restrict: 'E',
+      templateUrl: require('./advancedSettings.directive.html'),
+      scope: {},
+      bindToController: {
+        command: '=',
+      },
+      controllerAs: 'vm',
+      controller: 'gceServerGroupAdvancedSettingsSelectorCtrl',
+    };
+  })
+  .controller('gceServerGroupAdvancedSettingsSelectorCtrl', [
+    '$scope',
+    'gceTagManager',
+    function ($scope, gceTagManager) {
+      this.addTag = () => {
+        this.command.tags.push({});
+      };
+
+      this.removeTag = (index) => {
+        this.command.tags.splice(index, 1);
+        gceTagManager.updateSelectedTags();
+      };
+
+      this.setDisks = (disks) => {
+        this.command.disks = disks;
+      };
+
+      this.inferSelectedSecurityGroupFromTag = gceTagManager.inferSelectedSecurityGroupFromTag;
+      this.showToolTip = gceTagManager.showToolTip;
+      this.getToolTipContent = gceTagManager.getToolTipContent;
+
+      this.setPreemptible = () => {
+        if (this.command.preemptible) {
+          this.command.automaticRestart = false;
+          this.command.onHostMaintenance = 'TERMINATE';
+        } else {
+          this.command.automaticRestart = true;
+          this.command.onHostMaintenance = 'MIGRATE';
+        }
+      };
+
+      this.setEnableVtpm = () => {
+        if (!this.command.enableVtpm) {
+          // Integrity monitoring requires vTPM to be enabled.
+          this.command.enableIntegrityMonitoring = false;
+        }
+      };
+
+      this.setAcceleratorConfigs = (configs) => {
+        $scope.$apply(() => {
+          this.command.acceleratorConfigs = configs;
+        });
+      };
+    },
+  ]);

package/src/serverGroup/configure/wizard/advancedSettings/advancedSettingsSelector.directive.spec.js

@@ -0,0 +1,58 @@
+'use strict';
+
+import * as angular from 'angular';
+require('./advancedSettings.directive.html');
+
+describe('Directive: GCE Group Advanced Settings Selector', function () {
+  beforeEach(
+    window.module(
+      require('./advancedSettingsSelector.directive').name,
+      require('../securityGroups/tagManager.service').name,
+    ),
+  );
+
+  beforeEach(
+    window.inject(function ($rootScope, $compile, gceTagManager) {
+      ['showToolTip', 'updateSelectedTags', 'getToolTipContent', 'inferSelectedSecurityGroupFromTag'].forEach((prop) =>
+        spyOn(gceTagManager, prop),
+      );
+      this.gceTagManager = gceTagManager;
+      this.scope = $rootScope.$new();
+      this.scope.command = { instanceMetadata: [], tags: [], labels: [], authScopes: [], resourceManagerTags: [] };
+      this.elem = angular.element(
+        '<gce-server-group-advanced-settings-selector command="command"></gce-server-group-advanced-settings-selector>',
+      );
+      this.element = $compile(this.elem)(this.scope);
+      this.scope.$digest();
+    }),
+  );
+
+  it('should correctly add tags to the command', function () {
+    expect(this.scope.command.tags.length).toEqual(0);
+
+    this.elem.find('table.tags button').trigger('click');
+    this.scope.$apply();
+    expect(this.scope.command.tags.length).toEqual(1);
+
+    this.elem.find('table.tags input').val('myTag').trigger('input');
+    this.scope.$apply();
+
+    expect(this.scope.command.tags.length).toEqual(1);
+    expect(this.scope.command.tags[0].value).toEqual('myTag');
+  });
+
+  it('should correctly remove a tag from the command', function () {
+    this.scope.command.tags.push({ value: 'myTag1' }, { value: 'myTag2' });
+    this.scope.$apply();
+
+    const removeLinks = this.elem.find('table.tags a');
+    expect(removeLinks.length).toEqual(2);
+
+    $(removeLinks[0]).trigger('click');
+    this.scope.$apply();
+
+    expect(this.scope.command.tags.length).toEqual(1);
+    expect(this.scope.command.tags[0].value).toEqual('myTag2');
+    expect(this.gceTagManager.updateSelectedTags).toHaveBeenCalled();
+  });
+});