From 98376cdd3bc5ab72e1a0c8135da9a4903102c6f2 Mon Sep 17 00:00:00 2001
From: Frederick Borges <fborges@opennebula.io>
Date: Tue, 12 May 2020 13:23:25 +0200
Subject: [PATCH] B #1417: Fix VMs IPs (#4710)

---
 src/sunstone/public/app/opennebula/vm.js | 38 ++++++++++++++++++------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/sunstone/public/app/opennebula/vm.js b/src/sunstone/public/app/opennebula/vm.js
index 89816a64c1..f8d81acf43 100644
--- a/src/sunstone/public/app/opennebula/vm.js
+++ b/src/sunstone/public/app/opennebula/vm.js
@@ -820,25 +820,46 @@ define(function(require) {
         : "--";
   };
 
-  // Return a dropdown with all the
+  // Return a dropdown with all the 
   function ipsDropdown(element, divider) {
     var ipsStr = this.ipsStr(element,divider,groupByIpsDropdown);
-    const ips = ipsStr.split('<br>');
-    if ((ips.length < 2) && (!~ipsStr.indexOf("li"))) return ipsStr;
-    var html = '<ul class="dropdown menu ips-dropdown" data-dropdown-menu><li><a>Show IPs</a><ul class="menu" style="max-height: 25em; overflow: scroll;">';
-    if (~ipsStr.indexOf("li")) {
-      html+=ipsStr;
+    var ips = ipsStr.split('<br>');
+    var html = "";
+
+    // If its generated by groupByIpsDropdown
+    if (~ipsStr.indexOf("li")){
+      ips = [] 
+      $.each($.parseHTML(ipsStr), function( index ) {
+        ips.push($( this ).text());
+      });
+      ipsStr = "<ul style='list-style-type:none;'>" + ipsStr + "</ul>";
     }
-    else{
+    
+    // If it has less than "numIPs" IPs
+    var numIPs = 3;
+    if ((ips.length < numIPs)) return ipsStr;
+
+    // Take the first x 
+    insideHtml = "";
+    for (let i = 0; i < numIPs-1; i++) {
+      insideHtml += ips.shift();
+      if (i != numIPs-2){insideHtml+="<br>";}
+    }
+
+    // Format the other IPs inside a dropdown
+    if (ips.length){
+      html += '<ul class="dropdown menu ips-dropdown" data-dropdown-menu><li><a style="padding-top:0em;padding-bottom:0em;color:gray">'+insideHtml+'...</a><ul class="menu" style="max-height: 25em; overflow: scroll;">';
       $.each(ips, function(index, value){
         html+='<li><a style="color:gray">' + value + '</a></li>';
       });
+      html+='</ul></li></ul>';
     }
-    html+='</ul></li></ul>';
+
     return  html;
   };
 
   function groupByIpsDropdown(element = {}, nics = []) {
+
     return nics.reduce(function(column, nic) {
       var nicSection = $("<li/>").append($("<a/>").css("color", "gray").text(nic.IP));
 
@@ -849,7 +870,6 @@ define(function(require) {
           var templateAlias = Array.isArray(element.TEMPLATE.NIC_ALIAS)
             ? element.TEMPLATE.NIC_ALIAS : [element.TEMPLATE.NIC_ALIAS];
           var alias = templateAlias.find(function(alias) { return alias.NIC_ID === aliasId });
-
           if (alias) {
             nicSection.append($("<li/>").append($("<a/>").css({
               "color": "gray",