Affinity UI: Add step to instance wizard

client/WEB-INF/classes/resources/messages.properties

@@ -17,6 +17,12 @@
 
 
 #new labels (begin) **********************************************************************************************
+label.affinity=Affinity
+label.anti.affinity=Anti-affinity
+label.affinity.groups=Affinity Groups
+label.anti.affinity.groups=Anti-affinity Groups
+label.affinity.group=Affinity Group
+label.anti.affinity.group=Anti-affinity Group
 message.redirecting.region=Redirecting to region...
 label.use.vm.ip=Use VM IP:
 label.cpu.limits=CPU limits

ui/css/cloudstack3.css

@@ -5222,6 +5222,10 @@ label.error {
   position: relative;
 }
 
+.multi-wizard.instance-wizard .progress ul li {
+  width: 109px;
+}
+
 .multi-wizard .progress ul li.first {
   /*+border-radius:5px 0 0 5px;*/
   -moz-border-radius: 5px 0 0 5px;
@@ -5263,6 +5267,10 @@ label.error {
   text-align: center;
 }
 
+.multi-wizard.instance-wizard .progress ul li span {
+  left: 36px;
+}
+
 .multi-wizard .progress ul li span.multiline {
   width: 71px;
   top: 12px;
@@ -5279,6 +5287,10 @@ label.error {
   z-index: 1000;
 }
 
+.multi-wizard.instance-wizard .progress ul li span.arrow {
+  left: 27px;
+}
+
 .multi-wizard .progress ul li.active span.arrow {
   background-position: -1px -396px;
 }
@@ -5299,6 +5311,15 @@ label.error {
   background: transparent;
 }
 
+.multi-wizard.instance-wizard .progress ul li span.number {
+  left: 16px;
+}
+
+.multi-wizard.instance-wizard .progress ul li span.multiline {
+  width: 79px;
+  left: 23px;
+}
+
 .multi-wizard .progress ul li.active span {
   /*+text-shadow:0px -1px 1px #004AFF;*/
   -moz-text-shadow: 0px -1px 1px #004AFF;
@@ -11761,12 +11782,11 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
 .updateResourceLimits:hover .icon {
   background-position: -100px -614px;
 }
- 
+
 .addVlanRange .icon {
   background-position: -168px -31px;
 }
 
-
 .addVlanRange:hover .icon {
   background-position: -168px -613px;
 }
@@ -11796,8 +11816,8 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
   background-position: -168px -31px;
 }
 
-.reset .icon ,
-.scaleUp .icon{
+.reset .icon,
+.scaleUp .icon {
   background-position: -168px -31px;
 }
 

ui/dictionary.jsp

@@ -25,6 +25,12 @@ under the License.
 <% long now = System.currentTimeMillis(); %>
 <script language="javascript">
 dictionary = {
+'label.affinity': '<fmt:message key="label.affinity"/>',
+'label.anti.affinity': '<fmt:message key="-affinitylabel.anti.affinity"/>',
+'label.affinity.groups': '<fmt:message key=" Groupslabel.affinity.groups"/>',
+'label.anti.affinity.groups': '<fmt:message key="-affinity Groupslabel.anti.affinity.groups"/>',
+'label.affinity.group': '<fmt:message key=" Grouplabel.affinity.group"/>',
+'label.anti.affinity.group': '<fmt:message key="-affinity Grouplabel.anti.affinity.group"/>',
 'message.redirecting.region': '<fmt:message key="message.redirecting.region"/>',
 'label.use.vm.ip': '<fmt:message key="label.use.vm.ip"/>',
 'label.cpu.limits': '<fmt:message key="label.cpu.limits"/>',

ui/index.jsp

@@ -89,7 +89,8 @@ under the License.
             <li><span class="number">2</span><span class="multiline"><fmt:message key="label.select.a.template"/></span><span class="arrow"></span></li>
             <li><span class="number">3</span><span class="multiline"><fmt:message key="label.compute.offering"/></span><span class="arrow"></span></li>
             <li><span class="number">4</span><span class="multiline"><fmt:message key="label.data.disk.offering"/></span><span class="arrow"></span></li>
-            <li><span class="number">5</span><span><fmt:message key="label.menu.network"/></span><span class="arrow"></span></li>
+            <li><span class="number">5</span><span><fmt:message key="label.affinity"/></span><span class="arrow"></span></li>
+            <li><span class="number">6</span><span><fmt:message key="label.menu.network"/></span><span class="arrow"></span></li>
             <li class="last"><span class="number">6</span><span><fmt:message key="label.review"/></span></li>
           </ul>
         </div>
@@ -220,7 +221,15 @@ under the License.
               </div>
             </div>
 
-            <!-- Step 5: Network -->
+            <!-- Step 5: Affinity groups -->
+            <div class="step affinity" wizard-step-id="affinity">
+              <div class="content">
+                <!-- Existing offerings -->
+                <div class="select-container"></div>
+              </div>
+            </div>
+
+            <!-- Step 6: Network -->
             <div class="step network always-load" wizard-step-id="network">
               <!-- 5a: Network description -->
               <div class="wizard-step-conditional nothing-to-select">     

ui/scripts/instanceWizard.js

@@ -312,6 +312,18 @@
         });
       },
 
+      // Step 5: Affinity
+      function(args) {
+        args.response.success({
+          data: {
+            affinityGroups: [
+              { id: 1, name: 'affinity1', description: 'Dummy Affinity Group 1' },
+              { id: 2, name: 'affinity2', description: 'Dummy Affinity Group 2' },
+            ]
+          }
+        });
+      },
+
       // Step 6: Network
       function(args) {
         if(diskOfferingObjs != null && diskOfferingObjs.length > 0) {

ui/scripts/ui-custom/instanceWizard.js

@@ -482,6 +482,25 @@
             };
           },
 
+          'affinity': function($step, formData) {
+            return {
+              response: {
+                success: function(args) {
+                  $step.find('.select-container').append(
+                    makeSelects('affinity-groups', args.data.affinityGroups, {
+                      name: 'name',
+                      desc: 'description',
+                      id: 'id'
+                    }, {
+                      type: 'checkbox',
+                      'wizard-field': 'affinity-groups'
+                    })
+                  );
+                }
+              }
+            };
+          },
+
           'network': function($step, formData) {
             var showAddNetwork = true;