@spinnaker/appengine 0.0.0-main-2

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

@@ -0,0 +1,98 @@
+import type { IController } from 'angular';
+import { module } from 'angular';
+import { difference } from 'lodash';
+
+import type { AppengineLoadBalancerUpsertDescription } from '../../transformer';
+
+class AppengineLoadBalancerSettingsController implements IController {
+  public loadBalancer: AppengineLoadBalancerUpsertDescription;
+  public serverGroupOptions: string[];
+  public forPipelineConfig: boolean;
+
+  public $onInit(): void {
+    this.updateServerGroupOptions();
+  }
+
+  public addAllocation(): void {
+    const remainingServerGroups = this.serverGroupsWithoutAllocation();
+    if (remainingServerGroups.length) {
+      this.loadBalancer.splitDescription.allocationDescriptions.push({
+        serverGroupName: remainingServerGroups[0],
+        allocation: 0,
+        locatorType: 'fromExisting',
+      });
+      if (
+        this.loadBalancer.splitDescription.allocationDescriptions.length > 1 &&
+        !this.loadBalancer.splitDescription.shardBy
+      ) {
+        this.loadBalancer.splitDescription.shardBy = 'IP';
+      }
+      this.updateServerGroupOptions();
+    } else if (this.forPipelineConfig) {
+      this.loadBalancer.splitDescription.allocationDescriptions.push({
+        allocation: 0,
+        locatorType: 'text',
+        serverGroupName: '',
+      });
+    }
+  }
+
+  public removeAllocation(index: number): void {
+    this.loadBalancer.splitDescription.allocationDescriptions.splice(index, 1);
+    this.updateServerGroupOptions();
+  }
+
+  public allocationIsInvalid(): boolean {
+    return (
+      this.loadBalancer.splitDescription.allocationDescriptions.reduce(
+        (sum, allocationDescription) => sum + allocationDescription.allocation,
+        0,
+      ) !== 100
+    );
+  }
+
+  public updateServerGroupOptions(): void {
+    this.serverGroupOptions = this.serverGroupsWithoutAllocation();
+  }
+
+  public showAddButton(): boolean {
+    if (this.forPipelineConfig) {
+      return true;
+    } else {
+      return this.serverGroupsWithoutAllocation().length > 0;
+    }
+  }
+
+  public showShardByOptions(): boolean {
+    return this.loadBalancer.splitDescription.allocationDescriptions.length > 1 || this.loadBalancer.migrateTraffic;
+  }
+
+  public initializeAsTextInput(serverGroupName: string): boolean {
+    if (this.forPipelineConfig) {
+      return !this.loadBalancer.serverGroups.map((serverGroup) => serverGroup.name).includes(serverGroupName);
+    } else {
+      return false;
+    }
+  }
+
+  private serverGroupsWithoutAllocation(): string[] {
+    const serverGroupsWithAllocation = this.loadBalancer.splitDescription.allocationDescriptions.map(
+      (description) => description.serverGroupName,
+    );
+    const allServerGroups = this.loadBalancer.serverGroups.map((serverGroup) => serverGroup.name);
+    return difference(allServerGroups, serverGroupsWithAllocation);
+  }
+}
+
+const appengineLoadBalancerSettingsComponent: ng.IComponentOptions = {
+  bindings: { loadBalancer: '=', forPipelineConfig: '<', application: '<' },
+  controller: AppengineLoadBalancerSettingsController,
+  templateUrl: require('./basicSettings.component.html'),
+};
+
+export const APPENGINE_LOAD_BALANCER_BASIC_SETTINGS = 'spinnaker.appengine.loadBalancerSettings.component';
+
+module(APPENGINE_LOAD_BALANCER_BASIC_SETTINGS, []).component(
+  'appengineLoadBalancerBasicSettings',
+  appengineLoadBalancerSettingsComponent,
+);

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

@@ -0,0 +1,117 @@
+<div class="form-group">
+  <div class="row">
+    <div class="col-md-7">
+      <appengine-stage-allocation-label allocation-description="$ctrl.allocationDescription">
+      </appengine-stage-allocation-label>
+    </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>
+<div class="form-group">
+  <div class="well col-md-11" style="padding-top: 5px; padding-bottom: 10px">
+    <div class="row">
+      <div class="form-group">
+        <div class="col-md-3 sm-label-right">Locator</div>
+        <div class="col-md-7">
+          <form>
+            <div class="form-group">
+              <label class="small" style="font-weight: normal">
+                <input
+                  type="radio"
+                  ng-change="$ctrl.onLocatorTypeChange()"
+                  ng-model="$ctrl.allocationDescription.locatorType"
+                  value="fromExisting"
+                />
+                Existing server group
+              </label>
+              <br />
+              <label class="small" style="font-weight: normal">
+                <input
+                  type="radio"
+                  ng-change="$ctrl.onLocatorTypeChange()"
+                  ng-model="$ctrl.allocationDescription.locatorType"
+                  value="targetCoordinate"
+                />
+                Coordinates
+              </label>
+              <br />
+              <label class="small" style="font-weight: normal">
+                <input
+                  type="radio"
+                  ng-change="$ctrl.onLocatorTypeChange()"
+                  ng-model="$ctrl.allocationDescription.locatorType"
+                  value="text"
+                />
+                Text input
+              </label>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="form-group" ng-switch on="$ctrl.allocationDescription.locatorType">
+        <div ng-switch-when="fromExisting">
+          <div class="col-md-3 sm-label-right" style="padding-left: 0px">Server group</div>
+          <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>
+        <div ng-switch-when="targetCoordinate">
+          <div class="col-md-3 sm-label-right">Cluster</div>
+          <div class="col-md-7">
+            <cluster-selector
+              class="small"
+              clusters="$ctrl.clusterList"
+              model="$ctrl.allocationDescription.cluster"
+            ></cluster-selector>
+          </div>
+          <div class="col-md-3 sm-label-right">Target</div>
+          <div class="col-md-7">
+            <target-select model="$ctrl.allocationDescription" options="$ctrl.targets"></target-select>
+          </div>
+        </div>
+        <div ng-switch-when="text">
+          <div class="col-md-3 sm-label-right">
+            Text
+            <help-field key="appengine.loadBalancer.textLocator"></help-field>
+          </div>
+          <div class="col-md-7">
+            <input class="form-control input-sm" type="text" ng-model="$ctrl.allocationDescription.serverGroupName" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,108 @@
+import type { IComponentOptions, IController } from 'angular';
+import { module } from 'angular';
+import { uniq } from 'lodash';
+
+import type { Application } from '@spinnaker/core';
+import { AppListExtractor, StageConstants } from '@spinnaker/core';
+
+import type { IAppengineAllocationDescription } from '../../transformer';
+
+class AppengineStageAllocationLabelCtrl implements IController {
+  public inputViewValue: string;
+  private allocationDescription: IAppengineAllocationDescription;
+
+  private static mapTargetCoordinateToLabel(targetCoordinate: string): string {
+    const target = StageConstants.TARGET_LIST.find((t) => t.val === targetCoordinate);
+    if (target) {
+      return target.label;
+    } else {
+      return null;
+    }
+  }
+
+  public $doCheck(): void {
+    this.setInputViewValue();
+  }
+
+  private setInputViewValue(): void {
+    switch (this.allocationDescription.locatorType) {
+      case 'text':
+        this.inputViewValue = this.allocationDescription.serverGroupName;
+        break;
+      case 'fromExisting':
+        this.inputViewValue = this.allocationDescription.serverGroupName;
+        break;
+      case 'targetCoordinate':
+        if (this.allocationDescription.cluster && this.allocationDescription.target) {
+          const targetLabel = AppengineStageAllocationLabelCtrl.mapTargetCoordinateToLabel(
+            this.allocationDescription.target,
+          );
+          this.inputViewValue = `${targetLabel} (${this.allocationDescription.cluster})`;
+        } else {
+          this.inputViewValue = null;
+        }
+        break;
+      default:
+        this.inputViewValue = null;
+        break;
+    }
+  }
+}
+
+const appengineStageAllocationLabel: IComponentOptions = {
+  bindings: { allocationDescription: '<' },
+  controller: AppengineStageAllocationLabelCtrl,
+  template: `<input ng-model="$ctrl.inputViewValue" type="text" class="form-control input-sm" readonly/>`,
+};
+
+class AppengineStageAllocationConfigurationRowCtrl implements IController {
+  public allocationDescription: IAppengineAllocationDescription;
+  public serverGroupOptions: string[];
+  public targets = StageConstants.TARGET_LIST;
+  public clusterList: string[];
+  public onAllocationChange: Function;
+  private application: Application;
+  private region: string;
+  private account: string;
+
+  public $onInit() {
+    const clusterFilter = AppListExtractor.clusterFilterForCredentialsAndRegion(this.account, this.region);
+    this.clusterList = AppListExtractor.getClusters([this.application], clusterFilter);
+  }
+
+  public getServerGroupOptions(): string[] {
+    if (this.allocationDescription.serverGroupName) {
+      return uniq(this.serverGroupOptions.concat(this.allocationDescription.serverGroupName));
+    } else {
+      return this.serverGroupOptions;
+    }
+  }
+
+  public onLocatorTypeChange(): void {
+    // Prevents pipeline expressions (or non-existent server groups) from entering the dropdown.
+    if (!this.serverGroupOptions.includes(this.allocationDescription.serverGroupName)) {
+      delete this.allocationDescription.serverGroupName;
+    }
+    this.onAllocationChange();
+  }
+}
+
+const appengineStageAllocationConfigurationRow: IComponentOptions = {
+  bindings: {
+    application: '<',
+    region: '@',
+    account: '@',
+    allocationDescription: '<',
+    removeAllocation: '&',
+    serverGroupOptions: '<',
+    onAllocationChange: '&',
+  },
+  controller: AppengineStageAllocationConfigurationRowCtrl,
+  templateUrl: require('./stageAllocationConfigurationRow.component.html'),
+};
+
+export const APPENGINE_STAGE_ALLOCATION_CONFIGURATION_ROW =
+  'spinnaker.appengine.stageAllocationConfigurationRow.component';
+module(APPENGINE_STAGE_ALLOCATION_CONFIGURATION_ROW, [])
+  .component('appengineStageAllocationConfigurationRow', appengineStageAllocationConfigurationRow)
+  .component('appengineStageAllocationLabel', appengineStageAllocationLabel);

package/src/loadBalancer/configure/wizard/wizard.controller.ts

@@ -0,0 +1,163 @@
+import type { StateService } from '@uirouter/angularjs';
+import type { IController } from 'angular';
+import { module } from 'angular';
+import type { IModalServiceInstance } from 'angular-ui-bootstrap';
+import { cloneDeep } from 'lodash';
+
+import type { Application } from '@spinnaker/core';
+import { LoadBalancerWriter, TaskMonitor } from '@spinnaker/core';
+
+import type { AppengineLoadBalancerTransformer, IAppengineTrafficSplitDescription } from '../../transformer';
+import { AppengineLoadBalancerUpsertDescription } from '../../transformer';
+
+import './wizard.less';
+
+class AppengineLoadBalancerWizardController implements IController {
+  public state = { loading: true };
+  public loadBalancer: AppengineLoadBalancerUpsertDescription;
+  public heading: string;
+  public submitButtonLabel: string;
+  public taskMonitor: TaskMonitor;
+
+  public static $inject = [
+    '$scope',
+    '$state',
+    '$uibModalInstance',
+    'application',
+    'loadBalancer',
+    'isNew',
+    'forPipelineConfig',
+    'appengineLoadBalancerTransformer',
+    'wizardSubFormValidation',
+  ];
+  constructor(
+    public $scope: ng.IScope,
+    private $state: StateService,
+    private $uibModalInstance: IModalServiceInstance,
+    private application: Application,
+    loadBalancer: AppengineLoadBalancerUpsertDescription,
+    public isNew: boolean,
+    private forPipelineConfig: boolean,
+    private appengineLoadBalancerTransformer: AppengineLoadBalancerTransformer,
+    private wizardSubFormValidation: any,
+  ) {
+    this.submitButtonLabel = this.forPipelineConfig ? 'Done' : 'Update';
+
+    if (this.isNew) {
+      this.heading = 'Create New Load Balancer';
+    } else {
+      this.heading = `Edit ${[
+        loadBalancer.name,
+        loadBalancer.region,
+        loadBalancer.account || loadBalancer.credentials,
+      ].join(':')}`;
+      this.appengineLoadBalancerTransformer
+        .convertLoadBalancerForEditing(loadBalancer, application)
+        .then((convertedLoadBalancer) => {
+          this.loadBalancer = this.appengineLoadBalancerTransformer.convertLoadBalancerToUpsertDescription(
+            convertedLoadBalancer,
+          );
+          if (loadBalancer.split && !this.loadBalancer.splitDescription) {
+            this.loadBalancer.splitDescription = AppengineLoadBalancerUpsertDescription.convertTrafficSplitToTrafficSplitDescription(
+              loadBalancer.split,
+            );
+          } else {
+            this.loadBalancer.splitDescription = loadBalancer.splitDescription;
+          }
+          this.loadBalancer.mapAllocationsToPercentages();
+          this.setTaskMonitor();
+          this.initializeFormValidation();
+          this.state.loading = false;
+        });
+    }
+  }
+
+  public submit(): any {
+    const description = cloneDeep(this.loadBalancer);
+    description.mapAllocationsToDecimals();
+    delete description.serverGroups;
+
+    if (this.forPipelineConfig) {
+      return this.$uibModalInstance.close(description);
+    } else {
+      return this.taskMonitor.submit(() => {
+        return LoadBalancerWriter.upsertLoadBalancer(description, this.application, 'Update');
+      });
+    }
+  }
+
+  public cancel(): void {
+    this.$uibModalInstance.dismiss();
+  }
+
+  public showSubmitButton(): boolean {
+    return this.wizardSubFormValidation.subFormsAreValid();
+  }
+
+  private setTaskMonitor(): void {
+    this.taskMonitor = new TaskMonitor({
+      application: this.application,
+      title: 'Updating your load balancer',
+      modalInstance: this.$uibModalInstance,
+      onTaskComplete: () => this.onTaskComplete(),
+    });
+  }
+
+  private initializeFormValidation(): void {
+    this.wizardSubFormValidation
+      .config({ form: 'form', scope: this.$scope })
+      .register({
+        page: 'basic-settings',
+        subForm: 'basicSettingsForm',
+        validators: [
+          {
+            watchString: 'ctrl.loadBalancer.splitDescription',
+            validator: (splitDescription: IAppengineTrafficSplitDescription): boolean => {
+              return (
+                splitDescription.allocationDescriptions.reduce(
+                  (sum, description) => sum + description.allocation,
+                  0,
+                ) === 100
+              );
+            },
+            watchDeep: true,
+          },
+        ],
+      })
+      .register({ page: 'advanced-settings', subForm: 'advancedSettingsForm' });
+  }
+
+  private onTaskComplete(): void {
+    this.application.getDataSource('loadBalancers').refresh();
+    this.application.getDataSource('loadBalancers').onNextRefresh(this.$scope, () => this.onApplicationRefresh());
+  }
+
+  private onApplicationRefresh(): void {
+    // If the user has already closed the modal, do not navigate to the new details view
+    if ((this.$scope as any).$$destroyed) {
+      // $$destroyed is not in the ng.IScope interface
+      return;
+    }
+
+    this.$uibModalInstance.dismiss();
+    const newStateParams = {
+      name: this.loadBalancer.name,
+      accountId: this.loadBalancer.credentials,
+      region: this.loadBalancer.region,
+      provider: 'appengine',
+    };
+
+    if (!this.$state.includes('**.loadBalancerDetails')) {
+      this.$state.go('.loadBalancerDetails', newStateParams);
+    } else {
+      this.$state.go('^.loadBalancerDetails', newStateParams);
+    }
+  }
+}
+
+export const APPENGINE_LOAD_BALANCER_WIZARD_CTRL = 'spinnaker.appengine.loadBalancer.wizard.controller';
+
+module(APPENGINE_LOAD_BALANCER_WIZARD_CTRL, []).controller(
+  'appengineLoadBalancerWizardCtrl',
+  AppengineLoadBalancerWizardController,
+);

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

@@ -0,0 +1,44 @@
+<form name="form">
+  <div ng-if="ctrl.state.loading && !ctrl.isNew" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <v2-modal-wizard
+    heading="{{::ctrl.heading}}"
+    task-monitor="ctrl.taskMonitor"
+    dismiss="$dismiss()"
+    ng-if="!ctrl.state.loading || ctrl.isNew"
+  >
+    <div ng-if="!ctrl.isNew">
+      <v2-wizard-page key="basic-settings" label="Basic Settings" mark-complete-on-view="false">
+        <appengine-load-balancer-basic-settings
+          load-balancer="ctrl.loadBalancer"
+          application="ctrl.application"
+          for-pipeline-config="ctrl.forPipelineConfig"
+        ></appengine-load-balancer-basic-settings>
+      </v2-wizard-page>
+      <v2-wizard-page key="advanced-settings" label="Advanced Settings" mark-complete-on-view="false">
+        <appengine-load-balancer-advanced-settings
+          load-balancer="ctrl.loadBalancer"
+        ></appengine-load-balancer-advanced-settings>
+      </v2-wizard-page>
+    </div>
+  </v2-modal-wizard>
+  <appengine-load-balancer-message
+    ng-if="ctrl.isNew"
+    column-offset="1"
+    columns="10"
+    show-create-message="true"
+  ></appengine-load-balancer-message>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <submit-button
+      ng-if="!ctrl.isNew && ctrl.showSubmitButton()"
+      label="ctrl.submitButtonLabel"
+      is-disabled="appengineLoadBalancerForm.$invalid || ctrl.taskMonitor.submitting || ctrl.state.loading"
+      submitting="ctrl.taskMonitor.submitting"
+      on-click="ctrl.submit()"
+      is-new="ctrl.isNew"
+    >
+    </submit-button>
+  </div>
+</form>

package/src/loadBalancer/configure/wizard/wizard.less

@@ -0,0 +1,17 @@
+appengine-load-balancer-basic-settings {
+  a.btn.btn-link {
+    padding: 0;
+  }
+
+  .form-group {
+    margin-top: 0.4rem;
+  }
+}
+
+appengine-load-balancer-advanced-settings {
+  .checkbox {
+    input[type='checkbox'] {
+      margin: 0 0 0.1rem 0;
+    }
+  }
+}