bug 13743: New zone wizard step -- configure storage traffic

For an advanced zone, with the storage traffic type assigned to a
network, add a new step to configure the IP ranges of the storage
traffic type.

ui/css/cloudstack3.css

@@ -5346,6 +5346,10 @@ label.error {
   border-radius: 4px 4px 4px 4px;
 }
 
+.multi-wizard.zone-wizard .setup-storage-traffic .info-desc {
+  margin-bottom: 10px;
+}
+
 .multi-wizard.zone-wizard .setup-public-traffic .info-desc,
 .multi-wizard.zone-wizard .setup-guest-traffic .info-desc,
 .multi-wizard.zone-wizard .setup-physical-network .info-desc {
@@ -6008,6 +6012,9 @@ label.error {
 /*** Review / launch*/
 .multi-wizard.zone-wizard .review .launch-container {
   width: 98%;
+  max-height: 438px;
+  overflow: auto;
+  overflow-x: hidden;
   float: left;
   background: #FFFFFF;
   margin: 11px 0 0 7px;

ui/index.jsp

@@ -492,6 +492,7 @@
               <li class="public-network">Public traffic</li>
               <li class="pod">Pod</li>
               <li class="guest-traffic">Guest Traffic</li>
+              <li class="conditional storage-traffic">Storage Traffic</li>
             </ul>
             <div class="info-desc">
               When adding an advanced zone, you need to set up one or more physical networks. Each network corresponds to a NIC on the management server. Each physical network can carry one or more types of traffic, with certain restrictions on how they may be combined.<br/><br/><strong>Drag and drop one or more traffic types</strong> onto each physical network.
@@ -565,6 +566,7 @@
               <li class="public-network">Public traffic</li>
               <li class="pod">Pod</li>
               <li class="guest-traffic">Guest Traffic</li>
+              <li class="conditional storage-traffic">Storage Traffic</li>
             </ul>
 
             <div class="info-desc">Please specify Netscaler info</div>
@@ -581,6 +583,7 @@
               <li class="public-network active">Public traffic</li>
               <li class="pod">Pod</li>
               <li class="guest-traffic">Guest Traffic</li>
+              <li class="conditional storage-traffic">Storage Traffic</li>
             </ul>
 
             <div class="info-desc">
@@ -597,6 +600,7 @@
               <li class="public-network">Public traffic</li>
               <li class="pod active">Pod</li>
               <li class="guest-traffic">Guest Traffic</li>
+              <li class="conditional storage-traffic">Storage Traffic</li>
             </ul>
 
             <div class="info-desc">
@@ -617,6 +621,7 @@
               <li class="public-network">Public traffic</li>
               <li class="pod">Pod</li>
               <li class="guest-traffic active">Guest Traffic</li>
+              <li class="conditional storage-traffic">Storage Traffic</li>
             </ul>
 
             <div class="info-desc">
@@ -627,6 +632,23 @@
             </div>
           </div>
 
+          <!-- Step 3.5: Configure storage traffic -->
+          <div class="setup-storage-traffic" zone-wizard-prefilter="configureStorageTraffic"
+               zone-wizard-step-id="configureStorageTraffic">
+            <ul class="subnav">
+              <li class="conditional elb physical-network">Netscaler</li>
+              <li class="public-network">Public traffic</li>
+              <li class="pod">Pod</li>
+              <li class="guest-traffic">Guest Traffic</li>
+              <li class="storage-traffic active">Storage Traffic</li>
+            </ul>
+
+            <div class="info-desc">
+              Traffic between CloudStack's internal resources, including any components that communicate with the Management Server, such as hosts and CloudStack system VMs. Please configure storage traffic here.
+            </div>
+            <div ui-custom="storageTrafficIPRange"></div>
+          </div>
+
           <!-- Step 4.1: Add cluster -->
           <div class="add-cluster" zone-wizard-form="cluster"
                zone-wizard-step-id="addCluster">

ui/scripts/ui-custom/zoneWizard.js

@@ -13,8 +13,16 @@
     ).filter(':not(.disabled)');
     var $publicTrafficItems = $wizard.find(
       '.steps .setup-public-traffic .data-body .data-item');
+    var $storageTrafficItems = $wizard.find(
+      '.steps .setup-storage-traffic .data-body .data-item');
     var groupedForms = {};
 
+    if ($physicalNetworkItems.find('li.traffic-type-draggable.storage').size()) {
+      $wizard.find('li.conditional.storage-traffic').show();
+    } else {
+      $wizard.find('li.conditional.storage-traffic').hide();
+    }
+
     if (options.all) {
       return cloudStack.serializeForm($forms, { escapeSlashes: true });
     }
@@ -60,7 +68,7 @@
       $publicTrafficItems,
       function(publicTrafficItem) {
         var $publicTrafficItem = $(publicTrafficItem);
-        publicTrafficData = {};
+        var publicTrafficData = {};
         var fields = [
           'gateway',
           'netmask',
@@ -78,6 +86,28 @@
       }
     );
 
+    // Get storage traffic data (multi-edit)
+    groupedForms.storageTraffic = $.map(
+      $storageTrafficItems,
+      function(storageTrafficItem) {
+        var $storageTrafficItem = $(storageTrafficItem);
+        var storageTrafficData = {};
+        var fields = [
+          'netmask',
+          'vlanid',
+          'startip',
+          'endip'
+        ];
+
+        $(fields).each(function() {
+          storageTrafficData[this] =
+            $storageTrafficItem.find('td.' + this + ' span').html();
+        });
+
+        return storageTrafficData;
+      }
+    );
+
     // Hack to fix forward slash JS error
     $.each(groupedForms, function(key1, value1) {
       $.each(value1, function(key2, value2) {
@@ -451,7 +481,7 @@
         });
 
         $physicalNetworkItem.find('li.traffic-type-draggable.clone').remove();
-        physicalNetwork.update($physicalNetworkItem.parent().find('.multi')); 
+        physicalNetwork.update($physicalNetworkItem.parent().find('.multi'));
       });
 
       $physicalNetworkItem.addClass('disabled'); // Since there are no traffic types yet
@@ -648,13 +678,16 @@
               $('<span>').addClass('icon').html('&nbsp;'),
               $('<span>').addClass('text').html(message)
             );
+          var $launchContainer = $launchStep.find('.launch-container');
 
           $launchStep.find('ul').append($li);
           $li.prev().removeClass('loading');
+          $launchContainer.scrollTop($launchContainer.height());
 
           if (isError) {
             $li.prev().addClass('error');
           }
+          
         };
 
         args.action({
@@ -840,7 +873,7 @@
         if ($targetStep.index() == $steps.size() - 1 || options.nextStep) {
           $nextButton.find('span').html(options.nextStep ? 'Save changes' : 'Launch zone');
           $nextButton.addClass('final');
-          
+
           if (options.nextStep) { $nextButton.addClass('post-launch'); }
         }
 
@@ -1015,7 +1048,7 @@
           } else if (!ui.draggable.closest('.traffic-types-drag-area').size()) {
             ui.draggable.remove();
           }
-          
+
           return true;
         }
       });