@spinnaker/appengine 0.0.0-main-2

package/src/domain/IAppengineLoadBalancer.ts

@@ -0,0 +1,21 @@
+import type { ILoadBalancer } from '@spinnaker/core';
+
+export interface IAppengineLoadBalancer extends ILoadBalancer {
+  credentials?: string;
+  split?: IAppengineTrafficSplit;
+  migrateTraffic: boolean;
+  dispatchRules?: IAppengineDispatchRule[];
+}
+
+export interface IAppengineTrafficSplit {
+  shardBy: ShardBy;
+  allocations: { [serverGroupName: string]: number };
+}
+
+export interface IAppengineDispatchRule {
+  domain: string;
+  path: string;
+  service: string;
+}
+
+export type ShardBy = 'UNSPECIFIED' | 'IP' | 'COOKIE';

package/src/domain/IAppengineServerGroup.ts

@@ -0,0 +1,13 @@
+import type { IServerGroup } from '@spinnaker/core';
+
+export interface IAppengineServerGroup extends IServerGroup {
+  disabled: boolean;
+  env: 'FLEXIBLE' | 'STANDARD';
+  scalingPolicy: IAppengineScalingPolicy;
+  servingStatus: 'SERVING' | 'STOPPED';
+  allowsGradualTrafficMigration: boolean;
+}
+
+export interface IAppengineScalingPolicy {
+  type: 'AUTOMATIC' | 'MANUAL' | 'BASIC';
+}

package/src/domain/IAppengineStageScope.ts

@@ -0,0 +1,22 @@
+import type { IScope } from 'angular';
+
+import type { Application, IStageConstant } from '@spinnaker/core';
+
+import type { IAppengineAccount } from './IAppengineAccount';
+
+export interface IAppengineStage {
+  credentials: string;
+  region: string;
+  target?: string;
+  cloudProvider: string;
+  isNew?: boolean;
+  interestingHealthProviderNames: string[];
+}
+
+export interface IAppengineStageScope extends IScope {
+  accounts: IAppengineAccount[];
+  targets: IStageConstant[];
+  stage: IAppengineStage;
+  application: Application;
+  platformHealth: string;
+}

package/src/domain/IAppengineTriggers.ts

@@ -0,0 +1,12 @@
+export interface IAppengineGitTrigger {
+  source: string;
+  project: string;
+  slug: string;
+  branch: string;
+}
+
+export interface IAppengineJenkinsTrigger {
+  master: string;
+  job: string;
+  matchBranchOnRegex?: string;
+}

package/src/domain/index.ts

@@ -0,0 +1,6 @@
+export * from './IAppengineAccount';
+export * from './IAppengineInstance';
+export * from './IAppengineLoadBalancer';
+export * from './IAppengineServerGroup';
+export * from './IAppengineStageScope';
+export * from './IAppengineTriggers';

package/src/helpContents/appengineHelpContents.ts

@@ -0,0 +1,141 @@
+import { HelpContentsRegistry } from '@spinnaker/core';
+
+const helpContents = [
+  {
+    key: 'appengine.serverGroup.gcs.repositoryUrl',
+    value: `The full URL to the GCS bucket or TAR file containing the source files for this deployment,
+              including 'gs://'. For example, <b>gs://my-bucket/my-app</b> or <b>gs://my-bucket/app.tar</b>.`,
+  },
+  {
+    key: 'appengine.serverGroup.git.repositoryUrl',
+    value: `The full URL to the git repository containing the source files for this deployment,
+              including protocol. For example, <b>https://github.com/spinnaker/deck.git</b>`,
+  },
+  {
+    key: 'appengine.serverGroup.gitCredentialType',
+    value: `The credential type that will be used to access the git repository for this deployment.
+              You can configure these credentials alongside your App Engine credentials.`,
+  },
+  {
+    key: 'appengine.serverGroup.branch',
+    value: 'The name of the branch in the above git repository to be used for this deployment.',
+  },
+  {
+    key: 'appengine.serverGroup.applicationDirectoryRoot',
+    value: `(Optional) Path to the directory root of the application to be deployed,
+              starting from the root of the git repository. This is the directory from which
+              <code>gcloud app deploy</code> will be run.`,
+  },
+  {
+    key: 'appengine.serverGroup.configFilepaths',
+    value: `Paths to App Engine application configuration files, starting from the application directory root,
+              specified above. In most cases, this will be <code>app.yaml</code> or <code>cron.yaml</code>,
+              but could be <code>path/to/app.yaml</code> or <code>path/to/cron.yaml</code>.`,
+  },
+  {
+    key: 'appengine.serverGroup.configFiles',
+    value: `<p>(Optional) The contents of an App Engine config file (e.g., an <code>app.yaml</code> or
+              <code>cron.yaml</code> file). These files should not conflict with the config filepaths above:
+              if you include, for example, the contents of an <code>app.yaml</code>
+              file here, you should <b>not</b> specify the file path to an <code>app.yaml</code> above.<br></p>
+              <p>If this is a pipeline stage, you can use Spinnaker Pipeline Expressions here.</p>`,
+  },
+  {
+    key: 'appengine.serverGroup.configFilesRequired',
+    value: `<p>The contents of an App Engine config file (e.g., an <code>app.yaml</code> or
+              <code>cron.yaml</code> file).</p>
+              <p>An <code>app.yaml</code> file is required and must have <code>runtime: custom</code> in
+              order to deploy successfully.</p>
+              <p>If this is a pipeline stage, you can use Spinnaker Pipeline Expressions here.</p>`,
+  },
+  {
+    key: 'appengine.serverGroup.matchBranchOnRegex',
+    value: `(Optional) A Jenkins trigger may produce details from multiple repositories and branches.
+              Spinnaker will use the regex specified here to help resolve a branch for the deployment.
+              If Spinnaker cannot resolve exactly one branch from the trigger, this pipeline will fail.`,
+  },
+  {
+    key: 'appengine.serverGroup.promote',
+    value: 'If selected, the newly deployed server group will receive all traffic.',
+  },
+  {
+    key: 'appengine.serverGroup.stopPreviousVersion',
+    value: `If selected, the previously running server group in this server group's <b>service</b>
+              (Spinnaker load balancer) will be stopped. This option will be respected only if this server group will
+              be receiving all traffic and the previous server group is using manual scaling.`,
+  },
+  {
+    key: 'appengine.serverGroup.containerImageUrl',
+    value: `The full URL to the container image to use for deployment. The URL must be one of the valid GCR hostnames,
+              for example <b>gcr.io/my-project/image:tag</b>`,
+  },
+  {
+    key: 'appengine.serverGroup.suppress-version-string',
+    value: `Spinnaker automatically versions your server groups. This means deployments through Spinnaker receive a
+              short version string at the end of their name, like "v001". In most cases you will want to keep this
+              version as part of the name. Preventing this string from being added to your server group will stop
+              it from being considered when rolling back, promoting new versions or executing deployment strategies.
+              If you are certain that you do not want the version string applied to this server group then check
+              this box.`,
+  },
+  {
+    key: 'appengine.loadBalancer.shardBy.cookie',
+    value:
+      'Diversion based on a specially named cookie, "GOOGAPPUID." The cookie must be set by the application itself or no diversion will occur.',
+  },
+  {
+    key: 'appengine.loadBalancer.shardBy.ip',
+    value: 'Diversion based on applying the modulus operation to a fingerprint of the IP address.',
+  },
+  {
+    key: 'appengine.loadBalancer.migrateTraffic',
+    value: `If selected, traffic will be gradually shifted to a single version. For gradual traffic migration,
+              the target version must be located within instances that are configured for
+              both warmup requests and automatic scaling.
+              Gradual traffic migration is not supported in the App Engine flexible environment.`,
+  },
+  {
+    key: 'appengine.loadBalancer.allocations',
+    value: 'An allocation is the percent of traffic directed to a server group.',
+  },
+  {
+    key: 'appengine.loadBalancer.textLocator',
+    value: `Either the name of a server group, or a Spinnaker Pipeline Expression
+              that resolves to the name of a server group.`,
+  },
+  {
+    key: 'appengine.instance.availability',
+    value: `
+        An instance's <b>availability</b> is determined by its version (Spinnaker server group).
+        <ul>
+          <li>Manual scaling versions use resident instances</li>
+          <li>Basic scaling versions use dynamic instances</li>
+          <li>Auto scaling versions use dynamic instances - but if you specify a number, N,
+              of minimum idle instances, the first N instances will be resident,
+              and additional dynamic instances will be created as necessary.
+          </li>
+        </ul>`,
+  },
+  {
+    key: 'appengine.instance.averageLatency',
+    value: 'Average latency over the last minute in milliseconds.',
+  },
+  {
+    key: 'appengine.instance.vmStatus',
+    value: 'Status of the virtual machine where this instance lives.',
+  },
+  {
+    key: 'appengine.instance.qps',
+    value: 'Average queries per second over the last minute.',
+  },
+  {
+    key: 'appengine.instance.errors',
+    value: 'Number of errors since this instance was started.',
+  },
+  {
+    key: 'appengine.instance.requests',
+    value: 'Number of requests since this instance was started.',
+  },
+];
+
+helpContents.forEach((entry) => HelpContentsRegistry.register(entry.key, entry.value));

package/src/index.ts

@@ -0,0 +1 @@
+export { APPENGINE_MODULE } from './appengine.module';

package/src/instance/details/details.controller.ts

@@ -0,0 +1,116 @@
+import type { IController, IQService } from 'angular';
+import { module } from 'angular';
+import { cloneDeep, flattenDeep } from 'lodash';
+
+import type { Application, ILoadBalancer } from '@spinnaker/core';
+import { ConfirmationModalService, InstanceReader, InstanceWriter, RecentHistoryService } from '@spinnaker/core';
+import type { IAppengineInstance } from '../../domain';
+
+interface InstanceFromStateParams {
+  instanceId: string;
+}
+
+interface InstanceManager {
+  account: string;
+  region: string;
+  category: string; // e.g., serverGroup, loadBalancer.
+  name: string; // Parent resource name, not instance name.
+  instances: IAppengineInstance[];
+}
+
+class AppengineInstanceDetailsController implements IController {
+  public state = { loading: true };
+  public instance: IAppengineInstance;
+  public instanceIdNotFound: string;
+  public upToolTip = "An App Engine instance is 'Up' if a load balancer is directing traffic to its server group.";
+  public outOfServiceToolTip = `
+    An App Engine instance is 'Out Of Service' if no load balancers are directing traffic to its server group.`;
+
+  public static $inject = ['$q', 'app', 'instance'];
+
+  constructor(private $q: IQService, private app: Application, instance: InstanceFromStateParams) {
+    this.app
+      .ready()
+      .then(() => this.retrieveInstance(instance))
+      .then((instanceDetails) => {
+        this.instance = instanceDetails;
+        this.state.loading = false;
+      })
+      .catch(() => {
+        this.instanceIdNotFound = instance.instanceId;
+        this.state.loading = false;
+      });
+  }
+
+  public terminateInstance(): void {
+    const instance = cloneDeep(this.instance) as any;
+    const shortName = `${this.instance.name.substring(0, 10)}...`;
+    instance.placement = {};
+    instance.instanceId = instance.name;
+
+    const taskMonitor = {
+      application: this.app,
+      title: 'Terminating ' + shortName,
+      onTaskComplete() {
+        if (this.$state.includes('**.instanceDetails', { instanceId: instance.name })) {
+          this.$state.go('^');
+        }
+      },
+    };
+
+    const submitMethod = () => {
+      return InstanceWriter.terminateInstance(instance, this.app, { cloudProvider: 'appengine' });
+    };
+
+    ConfirmationModalService.confirm({
+      header: 'Really terminate ' + shortName + '?',
+      buttonText: 'Terminate ' + shortName,
+      account: instance.account,
+      taskMonitorConfig: taskMonitor,
+      submitMethod,
+    });
+  }
+
+  private retrieveInstance(instance: InstanceFromStateParams): PromiseLike<IAppengineInstance> {
+    const instanceLocatorPredicate = (dataSource: InstanceManager) => {
+      return dataSource.instances.some((possibleMatch) => possibleMatch.id === instance.instanceId);
+    };
+
+    const dataSources: InstanceManager[] = flattenDeep([
+      this.app.getDataSource('serverGroups').data,
+      this.app.getDataSource('loadBalancers').data,
+      this.app.getDataSource('loadBalancers').data.map((loadBalancer: ILoadBalancer) => loadBalancer.serverGroups),
+    ]);
+
+    const instanceManager = dataSources.find(instanceLocatorPredicate);
+
+    if (instanceManager) {
+      const recentHistoryExtraData: { [key: string]: string } = {
+        region: instanceManager.region,
+        account: instanceManager.account,
+      };
+      if (instanceManager.category === 'serverGroup') {
+        recentHistoryExtraData.serverGroup = instanceManager.name;
+      }
+      RecentHistoryService.addExtraDataToLatest('instances', recentHistoryExtraData);
+
+      return InstanceReader.getInstanceDetails(
+        instanceManager.account,
+        instanceManager.region,
+        instance.instanceId,
+      ).then((instanceDetails: IAppengineInstance) => {
+        instanceDetails.account = instanceManager.account;
+        instanceDetails.region = instanceManager.region;
+        return instanceDetails;
+      });
+    } else {
+      return this.$q.reject();
+    }
+  }
+}
+
+export const APPENGINE_INSTANCE_DETAILS_CTRL = 'spinnaker.appengine.instanceDetails.controller';
+module(APPENGINE_INSTANCE_DETAILS_CTRL, []).controller(
+  'appengineInstanceDetailsCtrl',
+  AppengineInstanceDetailsController,
+);

package/src/instance/details/details.html

@@ -0,0 +1,99 @@
+<div class="details-panel">
+  <div class="header">
+    <instance-details-header
+      health-state="ctrl.instance.healthState"
+      instance-id="ctrl.instance ? ctrl.instance.name : ctrl.instanceIdNotFound"
+      loading="ctrl.state.loading"
+      standalone="false"
+    ></instance-details-header>
+    <div ng-if="!ctrl.state.loading">
+      <div class="actions">
+        <div class="dropdown" uib-dropdown dropdown-append-to-body>
+          <button type="button" class="btn btn-sm btn-primary dropdown-toggle" uib-dropdown-toggle>
+            Instance Actions <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
+            <li><a href ng-click="ctrl.terminateInstance()">Terminate</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="content" ng-if="!ctrl.state.loading && ctrl.instance">
+    <collapsible-section heading="Instance Information" expanded="true">
+      <dl class="dl-horizontal dl-narrow">
+        <dt>Launched</dt>
+        <dd ng-if="ctrl.instance.launchTime">{{ctrl.instance.launchTime | timestamp}}</dd>
+        <dt>In</dt>
+        <dd><account-tag account="ctrl.instance.account" pad="right"></account-tag>{{}}</dd>
+        <dt ng-if="ctrl.instance.serverGroup">Server Group</dt>
+        <dd ng-if="ctrl.instance.serverGroup">
+          <a
+            ui-sref="^.serverGroup({region: ctrl.instance.region,
+                                     accountId: ctrl.instance.account,
+                                     serverGroup: ctrl.instance.serverGroup,
+                                     provider: 'appengine'})"
+            >{{ctrl.instance.serverGroup}}</a
+          >
+        </dd>
+        <dt>Region</dt>
+        <dd>{{ctrl.instance.region}}</dd>
+        <appengine-conditional-dt-dd
+          component="ctrl.instance"
+          key="vmZoneName"
+          label="Zone"
+        ></appengine-conditional-dt-dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Status" expanded="true">
+      <dl>
+        <dt>Load Balancer</dt>
+        <dd>
+          <span
+            class="pull-left"
+            uib-tooltip="{{ctrl.instance.healthState === 'Up' ? ctrl.upToolTip : ctrl.outOfServiceToolTip}}"
+            tooltip-placement="right"
+          >
+            <span class="glyphicon glyphicon-{{ctrl.instance.healthState}}-triangle"></span>
+            {{ctrl.instance.loadBalancers[0]}}
+          </span>
+        </dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Metrics" expanded="true">
+      <dl>
+        <appengine-conditional-dt-dd component="ctrl.instance" key="instanceStatus" label="Availability">
+          <key-label><help-field key="appengine.instance.availability"></help-field></key-label>
+        </appengine-conditional-dt-dd>
+        <appengine-conditional-dt-dd component="ctrl.instance" key="averageLatency">
+          <key-label><help-field key="appengine.instance.averageLatency"></help-field></key-label>
+          <value-label>ms</value-label>
+        </appengine-conditional-dt-dd>
+        <appengine-conditional-dt-dd component="ctrl.instance" key="errors">
+          <key-label><help-field key="appengine.instance.errors"></help-field></key-label>
+        </appengine-conditional-dt-dd>
+        <appengine-conditional-dt-dd component="ctrl.instance" key="qps" label="QPS">
+          <key-label><help-field key="appengine.instance.qps"></help-field></key-label>
+        </appengine-conditional-dt-dd>
+        <appengine-conditional-dt-dd component="ctrl.instance" key="requests">
+          <key-label><help-field key="appengine.instance.requests"></help-field></key-label>
+        </appengine-conditional-dt-dd>
+        <appengine-conditional-dt-dd component="ctrl.instance" key="vmStatus" label="VM Status">
+          <key-label><help-field key="appengine.instance.vmStatus"></help-field></key-label>
+        </appengine-conditional-dt-dd>
+        <appengine-conditional-dt-dd
+          component="ctrl.instance"
+          key="vmDebugEnabled"
+          label="Debug Enabled"
+        ></appengine-conditional-dt-dd>
+      </dl>
+    </collapsible-section>
+  </div>
+  <div class="content" ng-if="!ctrl.state.loading && !ctrl.instance">
+    <div class="content-section">
+      <div class="content-body text-center">
+        <h3>Instance not found.</h3>
+      </div>
+    </div>
+  </div>
+</div>

package/src/loadBalancer/configure/wizard/advancedSettings.component.ts

@@ -0,0 +1,56 @@
+import type { IComponentOptions, IController } from 'angular';
+import { module } from 'angular';
+
+import type { AppengineLoadBalancerUpsertDescription } from '../../transformer';
+
+class AppengineLoadBalancerAdvancedSettingsCtrl implements IController {
+  public state = { error: false };
+  public loadBalancer: AppengineLoadBalancerUpsertDescription;
+
+  public disableMigrateTraffic(): boolean {
+    if (this.loadBalancer.splitDescription.allocationDescriptions.length !== 1) {
+      return true;
+    } else {
+      const targetServerGroupName = this.loadBalancer.splitDescription.allocationDescriptions[0].serverGroupName;
+      const targetServerGroup = this.loadBalancer.serverGroups.find(
+        (candidate) => candidate.name === targetServerGroupName,
+      );
+
+      if (targetServerGroup) {
+        return !targetServerGroup.allowsGradualTrafficMigration;
+      } else {
+        // If the target server group name is not in the load balancer's server groups, then hopefully we are in
+        // a pipeline stage - we'll leave it up to the user to make smart decisions.
+        return false;
+      }
+    }
+  }
+}
+
+const appengineLoadBalancerAdvancedSettingsComponent: IComponentOptions = {
+  bindings: { loadBalancer: '=', application: '<' },
+  template: `
+    <ng-form name="advancedSettingsForm">
+      <div class="row">
+        <div class="form-group">
+          <div class="col-md-3 sm-label-right">
+            Migrate Traffic <help-field key="appengine.loadBalancer.migrateTraffic"></help-field>
+          </div>
+          <div class="col-md-9">
+            <div class="checkbox">
+              <input type="checkbox" ng-disabled="$ctrl.disableMigrateTraffic() && !($ctrl.loadBalancer.migrateTraffic = false)" ng-model="$ctrl.loadBalancer.migrateTraffic">
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-form>
+  `,
+  controller: AppengineLoadBalancerAdvancedSettingsCtrl,
+};
+
+export const APPENGINE_LOAD_BALANCER_ADVANCED_SETTINGS = 'spinnaker.appengine.loadBalancer.advancedSettings.component';
+
+module(APPENGINE_LOAD_BALANCER_ADVANCED_SETTINGS, []).component(
+  'appengineLoadBalancerAdvancedSettings',
+  appengineLoadBalancerAdvancedSettingsComponent,
+);

package/src/loadBalancer/configure/wizard/allocationConfigurationRow.component.ts

@@ -0,0 +1,70 @@
+import type { IComponentOptions, IController } from 'angular';
+import { module } from 'angular';
+import { uniq } from 'lodash';
+
+import type { IAppengineAllocationDescription } from '../../transformer';
+
+class AppengineAllocationConfigurationRowCtrl implements IController {
+  public allocationDescription: IAppengineAllocationDescription;
+  public serverGroupOptions: string[];
+
+  public getServerGroupOptions(): string[] {
+    if (this.allocationDescription.serverGroupName) {
+      return uniq(this.serverGroupOptions.concat(this.allocationDescription.serverGroupName));
+    } else {
+      return this.serverGroupOptions;
+    }
+  }
+}
+
+const appengineAllocationConfigurationRowComponent: IComponentOptions = {
+  bindings: {
+    allocationDescription: '<',
+    removeAllocation: '&',
+    serverGroupOptions: '<',
+    onAllocationChange: '&',
+  },
+  template: `
+    <div class="form-group">
+      <div class="row">
+        <div class="col-md-7">
+          <ui-select ng-model="$ctrl.allocationDescription.serverGroupName"
+                     on-select="$ctrl.onAllocationChange()"
+                     class="form-control input-sm">
+            <ui-select-match placeholder="Select...">
+              {{$select.selected}}
+            </ui-select-match>
+            <ui-select-choices repeat="serverGroup as serverGroup in $ctrl.getServerGroupOptions() | filter: $select.search">
+              <div ng-bind-html="serverGroup | highlight: $select.search"></div>
+            </ui-select-choices>
+          </ui-select>
+        </div>
+        <div class="col-md-3">
+          <div class="input-group input-group-sm">
+            <input type="number"
+                   ng-model="$ctrl.allocationDescription.allocation"
+                   required
+                   class="form-control input-sm"
+                   min="0"
+                   ng-change="$ctrl.onAllocationChange()"
+                   max="100"/>
+            <span class="input-group-addon">%</span>
+          </div>
+        </div>
+        <div class="col-md-2">
+          <a class="btn btn-link sm-label" ng-click="$ctrl.removeAllocation()">
+            <span class="glyphicon glyphicon-trash"></span>
+          </a>
+        </div>
+      </div>
+    </div>
+  `,
+  controller: AppengineAllocationConfigurationRowCtrl,
+};
+
+export const APPENGINE_ALLOCATION_CONFIGURATION_ROW = 'spinnaker.appengine.allocationConfigurationRow.component';
+
+module(APPENGINE_ALLOCATION_CONFIGURATION_ROW, []).component(
+  'appengineAllocationConfigurationRow',
+  appengineAllocationConfigurationRowComponent,
+);

package/src/loadBalancer/configure/wizard/basicSettings.component.html

@@ -0,0 +1,65 @@
+<ng-form name="basicSettingsForm">
+  <div class="row">
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">
+        Allocations
+        <help-field key="appengine.loadBalancer.allocations"></help-field>
+      </div>
+      <div class="col-md-9">
+        <div ng-if="!$ctrl.forPipelineConfig">
+          <appengine-allocation-configuration-row
+            ng-repeat="description in $ctrl.loadBalancer.splitDescription.allocationDescriptions"
+            allocation-description="description"
+            server-group-options="$ctrl.serverGroupOptions"
+            on-allocation-change="$ctrl.updateServerGroupOptions()"
+            remove-allocation="$ctrl.removeAllocation($index)"
+          >
+          </appengine-allocation-configuration-row>
+        </div>
+        <div ng-if="$ctrl.forPipelineConfig">
+          <appengine-stage-allocation-configuration-row
+            ng-repeat="description in $ctrl.loadBalancer.splitDescription.allocationDescriptions"
+            allocation-description="description"
+            application="$ctrl.application"
+            region="{{ $ctrl.loadBalancer.region }}"
+            account="{{ $ctrl.loadBalancer.account || $ctrl.loadBalancer.credentials }}"
+            server-group-options="$ctrl.serverGroupOptions"
+            on-allocation-change="$ctrl.updateServerGroupOptions()"
+            remove-allocation="$ctrl.removeAllocation($index)"
+          >
+          </appengine-stage-allocation-configuration-row>
+        </div>
+        <button class="add-new col-md-11" ng-if="$ctrl.showAddButton()" ng-click="$ctrl.addAllocation()">
+          <span class="glyphicon glyphicon-plus-sign"></span> Add allocation
+        </button>
+      </div>
+    </div>
+    <div class="form-group" ng-if="$ctrl.allocationIsInvalid()">
+      <div class="col-md-12 text-center">
+        <p class="alert alert-warning">Allocations must sum to 100%.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="row" ng-if="$ctrl.showShardByOptions()">
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Shard By</div>
+      <div class="col-md-9">
+        <form class="form-inline">
+          <div class="form-group">
+            <label class="radio-inline">
+              <input type="radio" ng-model="$ctrl.loadBalancer.splitDescription.shardBy" value="IP" />
+              IP
+              <help-field key="appengine.loadBalancer.shardBy.ip"></help-field>
+            </label>
+            <label class="radio-inline">
+              <input type="radio" ng-model="$ctrl.loadBalancer.splitDescription.shardBy" value="COOKIE" />
+              Cookie
+              <help-field key="appengine.loadBalancer.shardBy.cookie"></help-field>
+            </label>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</ng-form>