@spinnaker/appengine 0.0.0-main-2

package/src/serverGroup/configure/wizard/configFileArtifactList.spec.tsx

@@ -0,0 +1,78 @@
+import { mount } from 'enzyme';
+import React from 'react';
+
+import type { IArtifactAccount, IArtifactAccountPair } from '@spinnaker/core';
+import { StageArtifactSelector } from '@spinnaker/core';
+import { mockDeployStage, mockPipeline } from '@spinnaker/mocks';
+
+import { ConfigFileArtifactList } from './ConfigFileArtifactList';
+// eslint-disable-next-line @spinnaker/import-from-npm-not-relative
+import { mockHttpClient } from '../../../../../core/src/api/mock/jasmine';
+
+describe('<ConfigFileArtifactList/>', () => {
+  it('renders empty children when null/empty artifacts are passed in', () => {
+    const configArtifacts: IArtifactAccountPair[] = [];
+    const wrapper = mount(
+      <ConfigFileArtifactList
+        configArtifacts={configArtifacts}
+        pipeline={mockPipeline}
+        stage={mockDeployStage}
+        updateConfigArtifacts={() => {}}
+      />,
+    );
+    expect(wrapper.find(StageArtifactSelector).length).toBe(0);
+  });
+
+  it('renders 2 children of StageArtifactSelector when 2 artifacts are passed in', async () => {
+    const http = mockHttpClient();
+    const body: IArtifactAccount[] = [{ name: 'http-acc', types: ['http'] }];
+    http.expectGET(`/artifacts/credentials`).respond(200, body);
+    http.expectGET(`/artifacts/credentials`).respond(200, body);
+
+    const configArtifacts = [
+      { account: 'http-acc', id: '123abc', artifact: { id: '123abc' } },
+      { account: 'http-acc', id: '1234abcd', artifact: { id: '1234abcd' } },
+    ];
+
+    const wrapper = mount(
+      <ConfigFileArtifactList
+        configArtifacts={configArtifacts}
+        pipeline={mockPipeline}
+        stage={mockDeployStage}
+        updateConfigArtifacts={() => {}}
+      />,
+    );
+    expect(wrapper.find(StageArtifactSelector).length).toBe(2);
+    await http.flush();
+  });
+
+  it('renders 1 children of StageArtifactSelector when 1 expectedArtifacts are passed in', async () => {
+    const http = mockHttpClient();
+    const body: IArtifactAccount[] = [
+      {
+        name: 'http-acc',
+        types: ['http'],
+      },
+    ];
+    http.expectGET(`/artifacts/credentials`).respond(200, body);
+
+    // artifact intentionally left null indicating an expected artifact
+    const configArtifacts = [
+      {
+        account: 'http-acc',
+        id: '123abc',
+      },
+    ];
+
+    const wrapper = mount(
+      <ConfigFileArtifactList
+        configArtifacts={configArtifacts}
+        pipeline={mockPipeline}
+        stage={mockDeployStage}
+        updateConfigArtifacts={() => {}}
+      />,
+    );
+    expect(wrapper.find(StageArtifactSelector).length).toBe(1);
+    await http.flush();
+  });
+});

package/src/serverGroup/configure/wizard/configFiles.component.html

@@ -0,0 +1,81 @@
+<div class="form-horizontal container-fluid">
+  <div class="form-group" ng-if="!$ctrl.isContainerImageSource()">
+    <div class="col-md-3 sm-label-right">
+      Application Root
+      <help-field class="help-field-absolute" key="appengine.serverGroup.applicationDirectoryRoot"></help-field>
+    </div>
+    <div class="col-md-7">
+      <input
+        type="text"
+        class="form-control input-sm"
+        name="applicationDirectoryRoot"
+        ng-model="$ctrl.command.applicationDirectoryRoot"
+      />
+    </div>
+  </div>
+
+  <div class="form-group" ng-if="!$ctrl.isContainerImageSource()">
+    <div class="col-md-3 sm-label-right">
+      Config Filepaths <help-field key="appengine.serverGroup.configFilepaths"></help-field>
+    </div>
+    <div class="col-md-7">
+      <ui-select
+        multiple
+        tagging
+        tagging-label=""
+        style="width: 380px"
+        name="configFilepaths"
+        ng-model="$ctrl.command.configFilepaths"
+        class="form-control input-sm"
+      >
+        <ui-select-match>{{ $item }}</ui-select-match>
+        <ui-select-choices repeat="filepath in []">
+          <span ng-bind-html="filepath"></span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-3 sm-label-right">
+      Config Files
+      <span ng-if="!$ctrl.isContainerImageSource()">
+        <help-field key="appengine.serverGroup.configFiles"></help-field>
+      </span>
+      <span ng-if="$ctrl.isContainerImageSource()">
+        <help-field key="appengine.serverGroup.configFilesRequired"></help-field>
+      </span>
+    </div>
+    <div ng-repeat="configFile in $ctrl.command.configFiles track by $index">
+      <div class="col-md-7" ng-class="{ 'col-md-offset-3': $index > 0 }" style="margin-top: 5px">
+        <textarea
+          cols="46"
+          rows="10"
+          class="small"
+          spellcheck="false"
+          ng-keydown="$ctrl.mapTabToSpaces($event)"
+          style="font-family: Menlo, Monaco, Consolas, 'Courier New', monospace"
+          ng-model="$ctrl.command.configFiles[$index]"
+        ></textarea>
+      </div>
+      <div class="col-md-1" style="margin-top: 5px">
+        <button type="button" class="btn btn-sm btn-default" ng-click="$ctrl.deleteConfigFile($index)">
+          <span class="glyphicon glyphicon-trash"></span> Delete
+        </button>
+      </div>
+    </div>
+    <div class="col-md-7" ng-class="{ 'col-md-offset-3': $ctrl.command.configFiles.length > 0 }">
+      <button class="btn btn-block btn-add-trigger add-new" ng-click="$ctrl.addConfigFile()">
+        <span class="glyphicon glyphicon-plus-sign"></span> Add Config File
+      </button>
+    </div>
+    <config-file-artifact-list
+      ng-if="$ctrl.command.viewState.pipeline"
+      config-artifacts="$ctrl.command.configArtifacts"
+      pipeline="$ctrl.command.viewState.pipeline"
+      stage="$ctrl.command.viewState.stage"
+      update-config-artifacts="$ctrl.updateConfigArtifacts"
+    >
+    </config-file-artifact-list>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/configFiles.component.ts

@@ -0,0 +1,121 @@
+import type { IController, IScope } from 'angular';
+import { module } from 'angular';
+
+import type { IArtifact, IArtifactAccount, IArtifactAccountPair } from '@spinnaker/core';
+import {
+  AccountService,
+  ExpectedArtifactSelectorViewController,
+  NgAppengineConfigArtifactDelegate,
+} from '@spinnaker/core';
+
+import { AppengineSourceType } from '../serverGroupCommandBuilder.service';
+
+import './serverGroupWizard.less';
+
+export interface IAppengineConfigFileConfigurerCtrlCommand {
+  configFiles: string[];
+  configArtifacts: ConfigArtifact[];
+  sourceType: string;
+}
+
+class ConfigArtifact implements IArtifactAccountPair {
+  public $scope: IScope;
+  public controller: ExpectedArtifactSelectorViewController;
+  public delegate: NgAppengineConfigArtifactDelegate;
+  public id: string;
+  public account: string;
+  public artifact?: IArtifact;
+
+  constructor($scope: IScope, pair: IArtifactAccountPair = { id: '', account: '' }) {
+    const unserializable = { configurable: false, enumerable: false, writable: false };
+    this.id = pair?.id;
+    this.account = pair.account || pair?.artifact?.artifactAccount;
+    this.artifact = pair?.artifact;
+    Object.defineProperty(this, '$scope', { ...unserializable, value: $scope });
+    const delegate = new NgAppengineConfigArtifactDelegate(this);
+    const controller = new ExpectedArtifactSelectorViewController(delegate);
+    Object.defineProperty(this, 'delegate', { ...unserializable, value: delegate });
+    Object.defineProperty(this, 'controller', { ...unserializable, value: controller });
+  }
+}
+
+class AppengineConfigFileConfigurerCtrl implements IController {
+  private artifactAccounts: IArtifactAccount[] = [];
+  public command: IAppengineConfigFileConfigurerCtrlCommand;
+
+  public static $inject = ['$scope'];
+  constructor(public $scope: IScope) {}
+
+  public $onInit(): void {
+    if (!this.command.configFiles) {
+      this.command.configFiles = [];
+    }
+    if (!this.command.configArtifacts) {
+      this.command.configArtifacts = [];
+    }
+    if (!this.$scope.command) {
+      this.$scope.command = this.command;
+    }
+    this.command.configArtifacts = this.command.configArtifacts.map((artifactAccountPair) => {
+      return new ConfigArtifact(this.$scope, artifactAccountPair);
+    });
+    AccountService.getArtifactAccounts().then((accounts: IArtifactAccount[]) => {
+      this.artifactAccounts = accounts;
+      this.command.configArtifacts.forEach((a: ConfigArtifact) => {
+        a.delegate.setAccounts(accounts);
+        a.controller.updateAccounts(a.delegate.getSelectedExpectedArtifact());
+      });
+    });
+  }
+
+  public addConfigFile(): void {
+    this.command.configFiles.push('');
+  }
+
+  public addConfigArtifact(): void {
+    const artifact = new ConfigArtifact(this.$scope, { id: '', account: '' });
+    artifact.delegate.setAccounts(this.artifactAccounts);
+    artifact.controller.updateAccounts(artifact.delegate.getSelectedExpectedArtifact());
+    this.command.configArtifacts.push(artifact);
+  }
+
+  public deleteConfigFile(index: number): void {
+    this.command.configFiles.splice(index, 1);
+  }
+
+  public deleteConfigArtifact(index: number): void {
+    this.command.configArtifacts.splice(index, 1);
+  }
+
+  public mapTabToSpaces(event: any) {
+    if (event.which === 9) {
+      event.preventDefault();
+      const cursorPosition = event.target.selectionStart;
+      const inputValue = event.target.value;
+      event.target.value = `${inputValue.substring(0, cursorPosition)}  ${inputValue.substring(cursorPosition)}`;
+      event.target.selectionStart += 2;
+    }
+  }
+
+  public isContainerImageSource(): boolean {
+    return this.command.sourceType === AppengineSourceType.CONTAINER_IMAGE;
+  }
+
+  public updateConfigArtifacts = (configArtifacts: ConfigArtifact[]): void => {
+    this.$scope.$applyAsync(() => {
+      this.command.configArtifacts = configArtifacts;
+    });
+  };
+}
+
+const appengineConfigFileConfigurerComponent: ng.IComponentOptions = {
+  bindings: { command: '=' },
+  controller: AppengineConfigFileConfigurerCtrl,
+  templateUrl: require('./configFiles.component.html'),
+};
+
+export const APPENGINE_CONFIG_FILE_CONFIGURER = 'spinnaker.appengine.configFileConfigurer.component';
+module(APPENGINE_CONFIG_FILE_CONFIGURER, []).component(
+  'appengineConfigFileConfigurer',
+  appengineConfigFileConfigurerComponent,
+);

package/src/serverGroup/configure/wizard/dynamicBranchLabel.component.ts

@@ -0,0 +1,19 @@
+import { module } from 'angular';
+
+const appengineDynamicBranchLabelComponent: ng.IComponentOptions = {
+  bindings: { trigger: '<' },
+  template: `
+    <span ng-if="$ctrl.trigger.type === 'git'">
+      Resolved at runtime by <b>{{$ctrl.trigger.source}}</b> trigger: {{$ctrl.trigger.project}}/{{$ctrl.trigger.slug}}<span ng-if="$ctrl.trigger.branch">:{{$ctrl.trigger.branch}}</span>
+    </span>
+    <span ng-if="$ctrl.trigger.type === 'jenkins'">
+      Resolved at runtime by <b>Jenkins</b> trigger: {{$ctrl.trigger.master}}/{{$ctrl.trigger.job}}
+    </span>
+  `,
+};
+
+export const APPENGINE_DYNAMIC_BRANCH_LABEL = 'spinnaker.appengine.dynamicBranchLabel.component';
+module(APPENGINE_DYNAMIC_BRANCH_LABEL, []).component(
+  'appengineDynamicBranchLabel',
+  appengineDynamicBranchLabelComponent,
+);

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

@@ -0,0 +1,39 @@
+<form name="form" class="form-horizontal appengine-server-group-wizard" novalidate>
+  <div ng-if="ctrl.state.loading" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <div>
+    <v2-modal-wizard
+      ng-if="!ctrl.state.loading"
+      heading="Create Server Group"
+      task-monitor="ctrl.taskMonitor"
+      dismiss="$dismiss()"
+    >
+      <v2-wizard-page key="basic-settings" label="Basic Settings" mark-complete-on-view="false">
+        <ng-include src="ctrl.pages.basicSettings"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="load-balancer" label="Config Files" mark-complete-on-view="false">
+        <appengine-config-file-configurer command="command"></appengine-config-file-configurer>
+      </v2-wizard-page>
+      <v2-wizard-page key="load-balancer" label="Load Balancer" done="true">
+        <appengine-load-balancer-message show-create-message="false"></appengine-load-balancer-message>
+      </v2-wizard-page>
+      <v2-wizard-page key="advanced-settings" label="Advanced Settings" done="true">
+        <ng-include src="ctrl.pages.advancedSettings"></ng-include>
+      </v2-wizard-page>
+    </v2-modal-wizard>
+    <div class="modal-footer" ng-if="!state.loading">
+      <button ng-disabled="ctrl.taskMonitor.submitting" class="btn btn-default btn-cancel" ng-click="ctrl.cancel()">
+        Cancel
+      </button>
+      <submit-button
+        ng-if="form.$valid"
+        is-disabled="form.$invalid || ctrl.taskMonitor.submitting"
+        label="command.viewState.submitButtonLabel"
+        submitting="ctrl.taskMonitor.submitting"
+        on-click="ctrl.submit()"
+        is-new="true"
+      ></submit-button>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,28 @@
+.appengine-server-group-wizard {
+  input[type='checkbox'] {
+    margin-top: 0.75rem;
+  }
+
+  help-field.help-field-absolute {
+    span {
+      position: absolute;
+      top: 7px;
+      right: 2px;
+    }
+  }
+
+  .artifact-configuration-section {
+    border-bottom: 1px solid #eee;
+    padding: 0 0 4px 0;
+    margin: 0 0 5px 0;
+
+    &.last-entry {
+      border-bottom: none;
+    }
+
+    .Select,
+    input {
+      margin: 0 0 1px;
+    }
+  }
+}