CLOUDSTACK-6342: UI changes for secondary IP on LB rules

This is front-end only; API call changes still need to be done.

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

@@ -14,6 +14,8 @@
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
+message.listView.subselect.multi=(Ctrl/Cmd-click)
+label.use.vm.ips=Use VM IPs
 label.reinstall.vm=Reinstall VM
 message.reinstall.vm=NOTE: Proceed with caution. This will cause the VM to be reinstalled from the template; data on the root disk will be lost. Extra data volumes, if any, will not be touched.
 label.recover.vm=Recover VM

ui/css/cloudstack3.css

@@ -1333,7 +1333,7 @@ div.list-view td.first {
   cursor: pointer;
 }
 
-div.list-view td.first:hover {
+div.list-view tr:not(.multi-edit-selected) td.first:hover {
   color: #3A82CD;
 }
 
@@ -1978,6 +1978,11 @@ div.copypasteicon:hover {
   margin: 4px 0 0 12px;
 }
 
+.list-view .subselect span.info {
+  font-size: 10px;
+  white-space: nowrap;
+}
+
 .list-view .subselect select {
   width: 85%;
   margin: 5px 0 4px;
@@ -7939,23 +7944,37 @@ div.panel.ui-dialog div.list-view div.fixed-header {
 
 /*List-view: subselect dropdown*/
 .list-view .subselect {
-  width: 116px;
+  width: 102px;
+  cursor: default;
   display: block;
   float: left;
-  background: url(../images/bg-gradients.png) 0px -42px;
+  background: #EFEFEF;
   padding: 0;
   margin: 8px 0 1px 7px;
   clear: both;
   border: 1px solid #A8A7A7;
-  /*+border-radius:4px;*/
+  /*+border-radius:2px;*/
-  -moz-border-radius: 4px;
+  -moz-border-radius: 2px;
-  -webkit-border-radius: 4px;
+  -webkit-border-radius: 2px;
-  -khtml-border-radius: 4px;
+  -khtml-border-radius: 2px;
-  border-radius: 4px;
+  border-radius: 2px;
+}
+
+.list-view .subselect:hover span {
+  color: initial;
 }
 
 .list-view .subselect span {
   margin: 4px 0 0 12px;
+  cursor: default;
+}
+
+.list-view .subselect span.info {
+  background: none;
+}
+
+.list-view .subselect span:hover {
+  color: initial;
 }
 
 .list-view .subselect select {

ui/dictionary.jsp

@@ -25,6 +25,8 @@ under the License.
 <% long now = System.currentTimeMillis(); %>
 <script type="text/javascript">
 dictionary = {
+'message.listView.subselect.multi': '<fmt:message key="message.listView.subselect.multi" />',
+'label.use.vm.ips': '<fmt:message key="label.use.vm.ips" />',
 'label.recover.vm': '<fmt:message key="label.recover.vm" />',
 'message.recover.vm': '<fmt:message key="message.recover.vm" />',
 'label.reinstall.vm': '<fmt:message key="label.reinstall.vm" />',

ui/scripts/network.js

@@ -3324,7 +3324,8 @@
                                                 
                                                 //when server-side change of adding new parameter "vmidipmap" to assignToLoadBalancerRule API is in, uncomment the following commented 4 lines. 
                                                 subselect: {
-                                                    label: 'label.use.vm.ip',
+                                                    isMultiple: true,
+                                                    label: 'label.use.vm.ips',
                                                     dataProvider: multipleVmSecondaryIPSubselect                                                     
                                                 },
                                                                                                 
@@ -3617,7 +3618,12 @@
                                                         	if (args.itemData != null) {
                                                         		for (var k = 0; k < args.itemData.length; k++) {                                                          			
                                                         			inputData['vmidipmap[' + k + '].vmid'] = args.itemData[k].id;
-                                                        			inputData['vmidipmap[' + k + '].vmip'] = args.itemData[k]._subselect;  
+
+                                                              // NOTE - multiple IP support not ready for API integration yet
+                                                              // for now, just use the first selected IP
+                                                              //
+                                                              // Please change this to pass multiple IPs
+                                                              inputData['vmidipmap[' + k + '].vmip'] = args.itemData[k]._subselect[0]; 
                                                         		}
                                                         	}                                                        	
                                                         }  

ui/scripts/ui/widgets/listView.js

@@ -1285,11 +1285,19 @@
             if (subselect) {
                 var $td = $tr.find('td.first');
                 var $select = $('<div></div>').addClass('subselect').append(
-                    $('<span>').html(_l(subselect.label)),
+                    $('<span>').html(_l(subselect.label))
-                    $('<select>')
                 ).hide();
                 var $selectionArea = $tr.find('td:last').find('input');
 
+                if (subselect.isMultiple) {
+                    $select.append(
+                        $('<select multiple>'),
+                        $('<span>').addClass('info').html(_l('message.listView.subselect.multi'))
+                    );
+                } else {
+                  $select.append($('<select>'));
+                }
+
                 $td.append($select);
 
                 // Show and populate selection
@@ -1317,6 +1325,7 @@
                                         $select.hide();
                                     }
 
+                                    $select.find('option:first').attr('selected', 'selected'); 
                                     $listView.find('.data-table').dataTable('refresh');
                                 }
                             }