feat(amazon): clarify naming/description on create load balancer/secu…

…rity group (#4241)
spinnaker · Oct 11, 2017 · 9100dee · 9100dee
1 parent 3bac024
commit 9100dee
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git a/app/scripts/modules/amazon/src/help/amazon.help.ts b/app/scripts/modules/amazon/src/help/amazon.help.ts
@@ -33,6 +33,7 @@ const helpContents: {[key: string]: string} = {
      <p>However, if your stack name needs to be longer (load balancer names are limited to 32 characters), consider changing it to "elb", or omit it altogether.</p>`,
   'aws.loadBalancer.internal': 'Controls the load balancer scheme, <strong>not</strong> the subnet. By default, load balancers are created with a DNS name that resolves to public IP addresses. Specify internal to create a load balancer with a DNS name that resolves to private IP addresses.',
   'aws.loadBalancer.stack': '(Optional) <b>Stack</b> is one of the core naming components of a cluster, used to create vertical stacks of dependent services for integration testing.',
+  'aws.loadBalancer.name': '<p>The load balancer name is formed by combining the application name, the <b>Stack</b> field, and the <b>Detail</b> field.</p>',
   'aws.loadBalancer.targetGroups': 'Add a target group if you want to associate this with an Application Load Balancer (ALB)',
   'aws.loadBalancer.loadBalancers': 'And a load balancer directly if you created a Classic Load Balancer (a classic load balancer does not have target groups)',
   'aws.loadBalancer.ruleCondition.host':
@@ -78,6 +79,7 @@ const helpContents: {[key: string]: string} = {
     <p>The VPC to which this security group will apply.</p>
     <p>If you wish to use VPC but are unsure which VPC to use, the most common one is "Main".</p>
     <p>If you do not wish to use VPC, select "None".</p>`,
+  'aws.securityGroup.name': '<p>The security group name is formed by combining the application name, the <b>Stack</b> field, and the <b>Detail</b> field.</p>',
   'aws.scalingPolicy.search.restricted':
     `<p>Resets dimensions to "AutoScalingGroupName: {name of the ASG}" and provides
         a simpler, combined input for the namespace and metric name fields.</p>`,

diff --git a/app/scripts/modules/amazon/src/loadBalancer/configure/common/createLoadBalancerLocation.html b/app/scripts/modules/amazon/src/loadBalancer/configure/common/createLoadBalancerLocation.html
@@ -7,6 +7,7 @@
       <div class="col-md-12 well" ng-class="{'alert-danger': form.loadBalancerName.$error.validateUnique && ctrl.enforceUniqueName, 'alert-info': !form.loadBalancerName.$error.validateUnique}">
         <strong>Your load balancer will be named:</strong>
         <span>{{ctrl.getName()}}</span>
+        <help-field key="aws.loadBalancer.name"></help-field>
           <!-- Angular does not seem to run length validation on hidden inputs, hence the text + display:none -->
         <input type="text"
                style="display: none"

diff --git a/...cripts/modules/amazon/src/securityGroup/configure/configSecurityGroup.mixin.controller.js b/...cripts/modules/amazon/src/securityGroup/configure/configSecurityGroup.mixin.controller.js
@@ -6,6 +6,7 @@ import { Subject } from 'rxjs';
 
 import {
   ACCOUNT_SERVICE,
+  NAMING_SERVICE,
   SECURITY_GROUP_READER,
   SECURITY_GROUP_WRITER,
   TASK_MONITOR_BUILDER,
@@ -37,6 +38,7 @@ module.exports = angular
                                                        v2modalWizardService,
                                                        cacheInitializer,
                                                        infrastructureCaches,
+                                                       namingService,
                                                        vpcReader) {
 
 
@@ -304,11 +306,8 @@ module.exports = angular
     };
 
     ctrl.updateName = function () {
-      var securityGroup = $scope.securityGroup,
-        name = application.name;
-      if (securityGroup.detail) {
-        name += '-' + securityGroup.detail;
-      }
+      const { securityGroup } = $scope;
+      const name = namingService.getClusterName(application.name, securityGroup.stack, securityGroup.detail);
       securityGroup.name = name;
       $scope.namePreview = name;
     };

diff --git a/app/scripts/modules/amazon/src/securityGroup/configure/createSecurityGroupProperties.html b/app/scripts/modules/amazon/src/securityGroup/configure/createSecurityGroupProperties.html
@@ -4,6 +4,7 @@
         <div class="col-md-12 well" ng-class="{'alert-danger': form.securityGroupName.$error.validateUnique, 'alert-info': !form.securityGroupName.$error.validateUnique}">
           <strong>Your security group will be named:</strong>
           <span ng-bind="namePreview"></span>
+          <help-field key="aws.securityGroup.name"></help-field>
           <input type="hidden" class="form-control input-sm"
                  ng-model="securityGroup.name"
                  validate-unique="existingSecurityGroupNames"
@@ -17,35 +18,45 @@
         </div>
       </div>
       <div class="form-group">
-        <div class="col-md-4 sm-label-right">Detail (optional)</div>
-        <div class="col-md-4">
-          <input type="text" class="form-control input-sm no-spel"
-                 ng-model="securityGroup.detail"
-                 ng-change="ctrl.updateName()"/>
+        <div class="col-md-3 sm-label-right">Account</div>
+        <div class="col-md-8">
+          <account-select-field component="securityGroup" field="credentials" accounts="accounts" provider="'aws'" on-change="ctrl.accountUpdated()"></account-select-field>
         </div>
       </div>
       <div class="form-group">
-        <div class="col-md-4 sm-label-right">Description</div>
+        <div class="col-md-3 sm-label-right">Regions</div>
         <div class="col-md-8">
-          <input type="text" required class="form-control input-sm no-spel" ng-model="securityGroup.description" />
+          <input type="hidden" ng-model="securityGroup.regions[0]" required/>
+          <checklist ng-if="securityGroup.credentials" items="regions" model="securityGroup.regions" inline="true" on-change="ctrl.regionUpdated()"></checklist>
+          <p class="form-control-static" ng-if="!securityGroup.credentials">(Select an account)</p>
         </div>
       </div>
       <div class="form-group">
-        <div class="col-md-4 sm-label-right">Account</div>
-        <div class="col-md-8">
-          <account-select-field component="securityGroup" field="credentials" accounts="accounts" provider="'aws'" on-change="ctrl.accountUpdated()"></account-select-field>
+        <div class="col-md-3 sm-label-right">Stack</div>
+        <div class="col-md-3">
+          <input type="text" class="form-control input-sm no-spel"
+                 ng-model="securityGroup.stack"
+                 ng-change="ctrl.updateName()"/>
+        </div>
+        <div class="col-md-2 sm-label-right">Detail</div>
+        <div class="col-md-3">
+          <input type="text" class="form-control input-sm no-spel"
+                 ng-model="securityGroup.detail"
+                 ng-change="ctrl.updateName()"/>
         </div>
       </div>
       <div class="form-group">
-        <div class="col-md-4 sm-label-right">Regions</div>
+        <div class="col-md-3 sm-label-right">Description (required)</div>
         <div class="col-md-8">
-          <input type="hidden" ng-model="securityGroup.regions[0]" required/>
-          <checklist ng-if="securityGroup.credentials" items="regions" model="securityGroup.regions" inline="true" on-change="ctrl.regionUpdated()"></checklist>
-          <p class="form-control-static" ng-if="!securityGroup.credentials">(Select an account)</p>
+          <textarea required
+                    cols=2
+                    class="form-control input-sm no-spel"
+                    ng-model="securityGroup.description">
+          </textarea>
         </div>
       </div>
       <div class="form-group">
-        <div class="col-md-4 sm-label-right">VPC <help-field key="aws.securityGroup.vpc"></help-field></div>
+        <div class="col-md-3 sm-label-right">VPC <help-field key="aws.securityGroup.vpc"></help-field></div>
         <div class="col-md-8">
           <select class="form-control input-sm" ng-model="securityGroup.vpcId"
                   ng-change="ctrl.vpcUpdated()"