@spinnaker/core 0.0.0-main-2

package/src/serverGroup/configure/common/DeployInitializer.tsx

@@ -0,0 +1,254 @@
+import { groupBy, sortBy } from 'lodash';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+import type { Option } from 'react-select';
+
+import { AccountTag } from '../../../account';
+import type { Application } from '../../../application';
+import type { IDeployTemplate, ITemplateSelectionText } from './deployInitializer.component';
+import type { IServerGroup } from '../../../domain';
+import { ModalClose } from '../../../modal';
+import { TetheredSelect } from '../../../presentation/TetheredSelect';
+import { ReactInjector } from '../../../reactShims';
+import type { IServerGroupCommand } from './serverGroupCommandBuilder.service';
+import { ServerGroupReader } from '../../serverGroupReader.service';
+
+export interface IDeployInitializerProps {
+  application: Application;
+  cloudProvider: string;
+  command: IServerGroupCommand;
+  onDismiss: () => void;
+  onTemplateSelected: () => void;
+  templateSelectionText?: ITemplateSelectionText;
+}
+
+export interface IDeployInitializerState {
+  selectedTemplate: IDeployTemplate;
+  templates: IDeployTemplate[];
+}
+
+export class DeployInitializer extends React.Component<IDeployInitializerProps, IDeployInitializerState> {
+  private noTemplate: IDeployTemplate = { label: 'None', serverGroup: null, cluster: null };
+
+  constructor(props: IDeployInitializerProps) {
+    super(props);
+
+    const templates: IDeployTemplate[] = [];
+    let selectedTemplate: IDeployTemplate;
+
+    const { viewState } = props.command;
+    if (!viewState.disableNoTemplateSelection) {
+      templates.push(this.noTemplate);
+    }
+
+    selectedTemplate = this.noTemplate;
+
+    const serverGroups: IServerGroup[] = props.application
+      .getDataSource('serverGroups')
+      .data.filter((s: IServerGroup) => s.cloudProvider === props.cloudProvider && s.category === 'serverGroup');
+
+    const grouped = groupBy(serverGroups, (serverGroup) =>
+      [serverGroup.cluster, serverGroup.account, serverGroup.region].join(':'),
+    );
+
+    Object.keys(grouped).forEach((key) => {
+      const latest = sortBy(grouped[key], 'name').pop();
+      templates.push({
+        cluster: latest.cluster,
+        account: latest.account,
+        region: latest.region,
+        serverGroupName: latest.name,
+        serverGroup: latest,
+        key: [latest.account, latest.region, latest.name].join(':'),
+      });
+    });
+
+    if (viewState.disableNoTemplateSelection && templates.length === 1) {
+      selectedTemplate = templates[0];
+    } else if (!viewState.disableNoTemplateSelection && templates.length === 2) {
+      selectedTemplate = templates[1];
+    }
+
+    this.state = {
+      selectedTemplate,
+      templates,
+    };
+  }
+
+  private applyCommandToScope(command: any) {
+    const { viewState } = command;
+    const baseCommand = this.props.command;
+    viewState.disableImageSelection = true;
+    viewState.showImageSourceSelector = true;
+    viewState.disableStrategySelection = baseCommand.viewState.disableStrategySelection || false;
+    viewState.expectedArtifacts = baseCommand.viewState.expectedArtifacts || [];
+    viewState.imageId = null;
+    viewState.readOnlyFields = baseCommand.viewState.readOnlyFields || {};
+    viewState.submitButtonLabel = 'Add';
+    viewState.hideClusterNamePreview = baseCommand.viewState.hideClusterNamePreview || false;
+    viewState.templatingEnabled = true;
+    viewState.imageSourceText = baseCommand.viewState.imageSourceText;
+    Object.assign(command, baseCommand.viewState.overrides || {});
+    Object.assign(baseCommand, command);
+  }
+
+  private buildCommandFromTemplate(serverGroup: IServerGroup): PromiseLike<any> {
+    const { application, cloudProvider } = this.props;
+
+    const commandBuilder: any = ReactInjector.providerServiceDelegate.getDelegate(
+      cloudProvider,
+      'serverGroup.commandBuilder',
+    );
+    return ServerGroupReader.getServerGroup(
+      application.name,
+      serverGroup.account,
+      serverGroup.region,
+      serverGroup.name,
+    ).then((details) => {
+      details.account = serverGroup.account;
+      return commandBuilder.buildServerGroupCommandFromExisting(application, details, 'editPipeline');
+    });
+  }
+
+  private buildEmptyCommand = (): PromiseLike<any> => {
+    const { application, cloudProvider } = this.props;
+    const commandBuilder: any = ReactInjector.providerServiceDelegate.getDelegate(
+      cloudProvider,
+      'serverGroup.commandBuilder',
+    );
+    return commandBuilder.buildNewServerGroupCommand(application, { mode: 'createPipeline' });
+  };
+
+  private selectTemplate = (): PromiseLike<void> => {
+    const buildCommand =
+      this.state.selectedTemplate === this.noTemplate
+        ? this.buildEmptyCommand()
+        : this.buildCommandFromTemplate(this.state.selectedTemplate.serverGroup);
+    return buildCommand.then((command: any) => this.applyCommandToScope(command));
+  };
+
+  public useTemplate = (): void => {
+    this.selectTemplate().then(() => this.props.onTemplateSelected());
+  };
+
+  public templateChanged = (option: Option) => {
+    this.setState({ selectedTemplate: option as IDeployTemplate });
+  };
+
+  public componentDidMount() {
+    if (this.state.templates.length === 1) {
+      this.useTemplate();
+    }
+  }
+
+  public render() {
+    const { command, onDismiss, templateSelectionText } = this.props;
+    const { selectedTemplate, templates } = this.state;
+
+    return (
+      <div>
+        <ModalClose dismiss={onDismiss} />
+        <div>
+          <Modal.Header>
+            <Modal.Title>Template Selection</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <form className="form-horizontal">
+              <div className="form-group">
+                <div className="col-md-4 col-md-offset-1 sm-label-left">
+                  <b>Copy configuration from</b>
+                </div>
+              </div>
+              <div className="form-group">
+                <div className="col-md-6 col-md-offset-1">
+                  <TetheredSelect
+                    value={selectedTemplate.key}
+                    placeholder="Select..."
+                    valueRenderer={this.templateValueRenderer}
+                    optionRenderer={this.templateOptionRenderer}
+                    options={templates}
+                    valueKey="key"
+                    onChange={this.templateChanged}
+                    clearable={false}
+                  />
+                </div>
+              </div>
+              {command.viewState.customTemplateMessage && (
+                <div className="form-group">
+                  <p className="col-md-10 col-md-offset-1">{command.viewState.customTemplateMessage}</p>
+                </div>
+              )}
+              {selectedTemplate.serverGroup && templateSelectionText && (
+                <div className="form-group" style={{ marginTop: '20px' }}>
+                  <div className="col-md-10 col-md-offset-1 well">
+                    {templateSelectionText.copied.length > 0 && (
+                      <div>
+                        These fields <strong>will be</strong> copied over from the most recent server group:
+                        <ul>
+                          {templateSelectionText.copied.map((text, i) => (
+                            <li key={i}>{text}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                    {templateSelectionText.notCopied.length > 0 && (
+                      <div>
+                        These fields <strong>will NOT</strong> be copied over, and will be reset to defaults:
+                        <ul>
+                          {templateSelectionText.notCopied.map((text, i) => (
+                            <li key={i}>{text}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                    {templateSelectionText.additionalCopyText && <div>{templateSelectionText.additionalCopyText}</div>}
+                  </div>
+                </div>
+              )}
+            </form>
+          </Modal.Body>
+          <div className="modal-footer">
+            {(selectedTemplate.serverGroup || !command.viewState.disableNoTemplateSelection) && (
+              <button className="btn btn-primary" onClick={this.useTemplate}>
+                {selectedTemplate.serverGroup && <span>Use this template</span>}
+                {!selectedTemplate.serverGroup && <span>Continue without a template</span>}
+                <span className="glyphicon glyphicon-chevron-right" />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private templateValueRenderer = (option: Option) => {
+    if (option.label) {
+      return <span>{option.label}</span>;
+    }
+
+    return (
+      <span>
+        <AccountTag account={option.account} />
+        {option.serverGroup && <span> {option.serverGroupName}</span>} ({option.region})
+      </span>
+    );
+  };
+
+  private templateOptionRenderer = (option: Option) => {
+    return (
+      <>
+        {!option.label && (
+          <h5>
+            <AccountTag account={option.account} /> {option.cluster} ({option.region})
+          </h5>
+        )}
+        {option.label && <h5>{option.label}</h5>}
+        {option.serverGroup && (
+          <div>
+            <b>Most recent server group: </b> {option.serverGroupName}
+          </div>
+        )}
+      </>
+    );
+  };
+}

package/src/serverGroup/configure/common/InstanceArchetypeSelector.tsx

@@ -0,0 +1,7 @@
+import type { IServerGroupCommand } from './serverGroupCommandBuilder.service';
+
+export interface IInstanceArchetypeSelectorProps {
+  command: IServerGroupCommand;
+  onProfileChanged: (profile: string) => void;
+  onTypeChanged: (type: string) => void;
+}

package/src/serverGroup/configure/common/InstanceTypeSelector.tsx

@@ -0,0 +1,6 @@
+import type { IServerGroupCommand } from './serverGroupCommandBuilder.service';
+
+export interface IInstanceTypeSelectorProps {
+  command: IServerGroupCommand;
+  onTypeChanged: (type: string) => void;
+}

package/src/serverGroup/configure/common/ServerGroupNamePreview.tsx

@@ -0,0 +1,81 @@
+import { isEmpty } from 'lodash';
+import * as React from 'react';
+
+export interface IServerGroupNamePreviewProps {
+  createsNewCluster: boolean;
+  latestServerGroupName: string;
+  mode: string;
+  namePreview: string;
+  navigateToLatestServerGroup: () => void;
+}
+
+const SPEL_EXPRESSION_REGEX = /\${[^}]+}/g;
+const SPEL_WITH_DEFAULT_AND_ALPHANUMERICAL_REGEX = /^\${\s*#alphanumerical\(.*\)\s*\?:\s*[^\s]+\s*}$/;
+
+export const ServerGroupNamePreview = ({
+  createsNewCluster,
+  latestServerGroupName,
+  mode,
+  namePreview,
+  navigateToLatestServerGroup,
+}: IServerGroupNamePreviewProps) => {
+  const spelMatches = namePreview.match(SPEL_EXPRESSION_REGEX);
+  if (!isEmpty(spelMatches)) {
+    const anyInvalidSpel = [...spelMatches].some((match) => !SPEL_WITH_DEFAULT_AND_ALPHANUMERICAL_REGEX.test(match));
+    return (
+      <div className="form-group">
+        <div className="col-md-12">
+          <div className={`well-compact ${anyInvalidSpel ? 'alert alert-warning' : 'well'}`}>
+            <h5 className="text-center">
+              <p>Your server group cluster will be determined by evaluating the expressions dynamically</p>
+              {anyInvalidSpel && (
+                <div className="text-left">
+                  NOTE: Please wrap your expression with #alphanumerical and provide a default value to make sure only
+                  valid values are used after evaluation. i.e {"${#alphanumerical(yourExpression) ?: 'defaultValue'}"}
+                </div>
+              )}
+            </h5>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const showPreviewAsWarning = (mode === 'create' && !createsNewCluster) || (mode !== 'create' && createsNewCluster);
+
+  return (
+    <div className="form-group">
+      <div className="col-md-12">
+        <div className={`well-compact ${showPreviewAsWarning ? 'alert alert-warning' : 'well'}`}>
+          <h5 className="text-center">
+            <p>Your server group will be in the cluster:</p>
+            <p>
+              <strong>
+                {namePreview}
+                {createsNewCluster && <span> (new cluster)</span>}
+              </strong>
+            </p>
+            {!createsNewCluster && mode === 'create' && latestServerGroupName && (
+              <div className="text-left">
+                <p>There is already a server group in this cluster. Do you want to clone it?</p>
+                <p>
+                  Cloning copies the entire configuration from the selected server group, allowing you to modify
+                  whichever fields (e.g. image) you need to change in the new server group.
+                </p>
+                <p>
+                  To clone a server group, select "Clone" from the "Server Group Actions" menu in the details view of
+                  the server group.
+                </p>
+                <p>
+                  <a className="clickable" onClick={navigateToLatestServerGroup}>
+                    Go to details for {latestServerGroupName}
+                  </a>
+                </p>
+              </div>
+            )}
+          </h5>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/serverGroup/configure/common/basicSettingsMixin.controller.js

@@ -0,0 +1,103 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+import ANGULAR_UI_BOOTSTRAP from 'angular-ui-bootstrap';
+import _ from 'lodash';
+
+import { IMAGE_READER } from '../../../image/image.reader';
+import { NameUtils } from '../../../naming';
+
+export const CORE_SERVERGROUP_CONFIGURE_COMMON_BASICSETTINGSMIXIN_CONTROLLER =
+  'spinnaker.core.serverGroup.basicSettings.controller';
+export const name = CORE_SERVERGROUP_CONFIGURE_COMMON_BASICSETTINGSMIXIN_CONTROLLER; // for backwards compatibility
+module(CORE_SERVERGROUP_CONFIGURE_COMMON_BASICSETTINGSMIXIN_CONTROLLER, [
+  ANGULAR_UI_BOOTSTRAP,
+  UIROUTER_ANGULARJS,
+  IMAGE_READER,
+]).controller('BasicSettingsMixin', [
+  '$scope',
+  'imageReader',
+  '$uibModalStack',
+  '$state',
+  function ($scope, imageReader, $uibModalStack, $state) {
+    this.createsNewCluster = function () {
+      const name = this.getNamePreview();
+      $scope.latestServerGroup = this.getLatestServerGroup();
+      return !_.find($scope.application.clusters, { name: name });
+    };
+
+    this.getNamePreview = function () {
+      const command = $scope.command;
+      if (!command) {
+        return '';
+      }
+      return NameUtils.getClusterName($scope.application.name, command.stack, command.freeFormDetails);
+    };
+
+    this.getLatestServerGroup = function () {
+      const command = $scope.command;
+      const cluster = NameUtils.getClusterName($scope.application.name, command.stack, command.freeFormDetails);
+      const inCluster = $scope.application.serverGroups.data
+        .filter(function (serverGroup) {
+          return (
+            serverGroup.cluster === cluster &&
+            serverGroup.account === command.credentials &&
+            serverGroup.region === command.region
+          );
+        })
+        .sort(function (a, b) {
+          return a.createdTime - b.createdTime;
+        });
+      return inCluster.length ? inCluster.pop() : null;
+    };
+
+    this.showPreviewAsWarning = function () {
+      const mode = $scope.command.viewState.mode;
+      const createsNewCluster = this.createsNewCluster();
+
+      return (mode === 'create' && !createsNewCluster) || (mode !== 'create' && createsNewCluster);
+    };
+
+    this.navigateToLatestServerGroup = function () {
+      const latest = $scope.latestServerGroup;
+      const params = {
+        provider: $scope.command.selectedProvider,
+        accountId: latest.account,
+        region: latest.region,
+        serverGroup: latest.name,
+      };
+
+      $uibModalStack.dismissAll();
+      if ($state.is('home.applications.application.insight.clusters')) {
+        $state.go('.serverGroup', params);
+      } else {
+        $state.go('^.serverGroup', params);
+      }
+    };
+
+    this.stackPattern = {
+      test: function (stack) {
+        const pattern = $scope.command.viewState.templatingEnabled
+          ? /^([a-zA-Z_0-9._${}]*(\${.+})*)*$/
+          : /^[a-zA-Z_0-9._${}]*$/;
+
+        return isNotExpressionLanguage(stack) ? pattern.test(stack) : true;
+      },
+    };
+
+    this.detailPattern = {
+      test: function (detail) {
+        const pattern = $scope.command.viewState.templatingEnabled
+          ? /^([a-zA-Z_0-9._${}-]*(\${.+})*)*$/
+          : /^[a-zA-Z_0-9._${}-]*$/;
+
+        return isNotExpressionLanguage(detail) ? pattern.test(detail) : true;
+      },
+    };
+
+    const isNotExpressionLanguage = (field) => {
+      return field && !field.includes('${');
+    };
+  },
+]);

package/src/serverGroup/configure/common/basicSettingsMixin.controller.spec.js

@@ -0,0 +1,127 @@
+'use strict';
+
+describe('Basic Settings Mixin Controller:', function () {
+  var controller, $scope;
+
+  beforeEach(window.module(require('./basicSettingsMixin.controller').name));
+
+  beforeEach(
+    window.inject(function ($controller, $rootScope) {
+      $scope = $rootScope.$new();
+      $scope.application = { name: 'app', serverGroups: [] };
+      $scope.command = { viewState: {} };
+      controller = $controller('BasicSettingsMixin', {
+        $scope: $scope,
+        $uibModalStack: { dismissAll: angular.noop },
+      });
+    }),
+  );
+
+  describe('pattern testing: templating not enabled', function () {
+    beforeEach(function () {
+      $scope.command.viewState = {};
+    });
+
+    it('stack should accept underscores, letters, numbers, and nothing', function () {
+      var test = controller.stackPattern.test;
+      expect(test('a')).toBe(true);
+      expect(test('ab')).toBe(true);
+      expect(test('a_b')).toBe(true);
+      expect(test('9')).toBe(true);
+      expect(test('9aA')).toBe(true);
+      expect(test(null)).toBe(true);
+      expect(test('')).toBe(true);
+    });
+
+    it('stack should fail on dashes or various other special characters', function () {
+      var test = controller.stackPattern.test;
+      expect(test('-a')).toBe(false);
+      expect(test('a-')).toBe(false);
+      expect(test('-')).toBe(false);
+      expect(test('$')).toBe(true);
+      expect(test('9*')).toBe(false);
+      expect(test('${a}')).toBe(true);
+    });
+
+    it('detail should accept underscores, letters, numbers, dashes, and nothing', function () {
+      var test = controller.detailPattern.test;
+      expect(test('a')).toBe(true);
+      expect(test('ab')).toBe(true);
+      expect(test('a_b')).toBe(true);
+      expect(test('9')).toBe(true);
+      expect(test('9aA')).toBe(true);
+      expect(test(null)).toBe(true);
+      expect(test('')).toBe(true);
+      expect(test('-a')).toBe(true);
+      expect(test('a-')).toBe(true);
+      expect(test('-')).toBe(true);
+    });
+
+    it('detail should fail on various special characters', function () {
+      var test = controller.detailPattern.test;
+      expect(test('$')).toBe(true);
+      expect(test('9*')).toBe(false);
+      expect(test('#9')).toBe(false);
+      expect(test('1@9')).toBe(false);
+      expect(test('${a}')).toBe(true);
+    });
+  });
+
+  describe('pattern testing: templating enabled', function () {
+    beforeEach(function () {
+      $scope.command.viewState = { templatingEnabled: true };
+    });
+
+    it('unfortunately is greedy and accepts invalid placeholders', function () {
+      expect(controller.stackPattern.test('${not valid - trailing closing curly brackets}}}')).toBe(true);
+      expect(controller.detailPattern.test('${not valid - trailing closing curly brackets}}}')).toBe(true);
+    });
+
+    it('stack should accept underscores, letters, numbers, and nothing', function () {
+      var test = controller.stackPattern.test;
+      expect(test('a')).toBe(true);
+      expect(test('ab')).toBe(true);
+      expect(test('a_b')).toBe(true);
+      expect(test('9')).toBe(true);
+      expect(test('9aA')).toBe(true);
+      expect(test(null)).toBe(true);
+      expect(test('')).toBe(true);
+    });
+
+    it('stack should accept template placeholders', function () {
+      var test = controller.stackPattern.test;
+      expect(test('${a}')).toBe(true);
+      expect(test('b${a}')).toBe(true);
+      expect(test('${a}b')).toBe(true);
+      expect(test('c${a}b')).toBe(true);
+      expect(test('c${a}b${d}')).toBe(true);
+      expect(test('c_${a}b${d}')).toBe(true);
+
+      expect(test('c-${a}b${d}')).toBe(true);
+    });
+
+    it('detail should accept underscores, letters, numbers, dashes, and nothing', function () {
+      var test = controller.detailPattern.test;
+      expect(test('a')).toBe(true);
+      expect(test('ab')).toBe(true);
+      expect(test('a_b')).toBe(true);
+      expect(test('9')).toBe(true);
+      expect(test('9aA')).toBe(true);
+      expect(test(null)).toBe(true);
+      expect(test('')).toBe(true);
+      expect(test('-a')).toBe(true);
+      expect(test('a-')).toBe(true);
+      expect(test('-')).toBe(true);
+    });
+
+    it('detail should accept template placeholders', function () {
+      var test = controller.detailPattern.test;
+      expect(test('${a}')).toBe(true);
+      expect(test('b${a}')).toBe(true);
+      expect(test('${a}b')).toBe(true);
+      expect(test('c${a}b')).toBe(true);
+      expect(test('c-${a}b${d}')).toBe(true);
+      expect(test('c_${a}b${d}')).toBe(true);
+    });
+  });
+});

package/src/serverGroup/configure/common/costFactor.html

@@ -0,0 +1,4 @@
+<span class="cost-factor" ng-if="!range"> <span class="cost">{{used}}</span>{{unused}} </span>
+<span class="cost-factor" ng-if="range">
+  <span class="cost">{{min.used}}</span>{{min.unused}} &ndash; <span class="cost">{{max.used}}</span>{{max.unused}}
+</span>

package/src/serverGroup/configure/common/costFactor.js

@@ -0,0 +1,36 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const CORE_SERVERGROUP_CONFIGURE_COMMON_COSTFACTOR = 'spinnaker.core.serverGroup.configure.common.costFactor';
+export const name = CORE_SERVERGROUP_CONFIGURE_COMMON_COSTFACTOR; // for backwards compatibility
+module(CORE_SERVERGROUP_CONFIGURE_COMMON_COSTFACTOR, []).directive('costFactor', function () {
+  return {
+    restrict: 'E',
+    scope: {
+      factor: '=',
+      range: '=',
+    },
+    templateUrl: require('./costFactor.html'),
+    link: function (scope) {
+      function getUsage(factor) {
+        return {
+          used: new Array(factor + 1).join('$'),
+          unused: new Array(5 - factor).join('$'),
+        };
+      }
+      function applyFactors() {
+        if (!scope.range) {
+          const usage = getUsage(scope.factor);
+          scope.used = usage.used;
+          scope.unused = usage.unused;
+        } else {
+          scope.min = getUsage(scope.range.min);
+          scope.max = getUsage(scope.range.max);
+        }
+      }
+      applyFactors();
+      scope.$watch('range', applyFactors);
+    },
+  };
+});