ui: IP addresses subview in icon vms view

snf-cyclades-app/synnefo/ui/static/snf/css/main.css

@@ -829,8 +829,7 @@ div.image-container {
     
 }
 
-.icon .machine-container .info,
-.icon .machine-container .ips {
+.icon .machine-container .info {
     margin-top: 2px;
     height: 17px;
 }
@@ -3228,6 +3227,83 @@ div.reboot-dialog button.details:hover {
     display: none;
 }
 
+.machine .info-content.ips .collection {
+  padding: 0;
+}
+
+.machine .info-content.ips .ips .model-item .subnet {
+  padding-top: 2px;
+  width: 35%;
+  float: left;
+}
+
+.machine .info-content.ips .ips .port-ip-item:last-child {
+  margin-bottom: 0;
+}
+
+.machine .info-content.ips .ips .port-ip-item:hover {
+  background-color: #75A7BF;
+}
+
+.machine .info-content.ips .ips .port-ip-item {
+  padding: 4px;
+  margin-bottom: 2px;
+}
+
+.machine .info-content.ips .ips .model-item .ip {
+  padding-top: 2px;
+  width: 55%;
+  float: left;
+}
+
+.machine .info-content.ips .ips .model-item .type {
+  float: left;
+  margin-right: 10px;
+  vertical-align: middle;
+  color: #fff;
+  background-color: #4085A5;
+  padding: 3px;
+}
+
+.machine .info-content.ips .port {
+  width: 15%;
+  float: left;
+}
+
+.machine .info-content.ips .ips {
+  width: 80%;
+  float: right;
+}
+
+.machine .info-content.ips .port-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.machine .info-content.ips .port-item {
+  border-bottom: 1px solid #6F93A4;
+  padding: 5px 0;
+  margin-bottom: 5px;
+}
+
+.machine .info-content.ips .port-item img {
+  float: left;
+  margin-top: 6px;
+  margin-right: 3%;
+}
+
+.machine .info-content.ips .port-item .port {
+  font-weight: bold;
+  padding-top: 6px;
+}
+
+.machine .info-content.ips {
+    background-color: #84B7D0;
+    padding: 5px 10px;
+    font-size: 0.6em;
+}
+
 .metadata-container {
     line-height: 12px;
     height: 85px;
@@ -3596,7 +3672,7 @@ div.machine a.manage-metadata:hover {
     height: auto;
     padding-bottom: 5px;
     padding-top: 5px;
-    width: 300px;
+    width: 339px;
 }
 
 .single .column3 {

snf-cyclades-app/synnefo/ui/static/snf/js/models.js

@@ -690,11 +690,18 @@
         },
 
         initialize: function(params) {
-            
+            var self = this;
+            this.ports = new Backbone.FilteredCollection(undefined, {
+              collection: synnefo.storage.ports,
+              collectionFilter: function(m) {
+                return self.id == m.get('device_id')
+            }});
+
             this.pending_firewalls = {};
             
             models.VM.__super__.initialize.apply(this, arguments);
 
+
             this.set({state: params.status || "ERROR"});
             this.log = new snf.logging.logger("VM " + this.id);
             this.pending_action = undefined;

snf-cyclades-app/synnefo/ui/static/snf/js/neutron.js

@@ -262,16 +262,47 @@
         return this.api_call(this.path, "create", params, complete, error, success);
       }
     });
+    
+    // dummy model/collection
+    models.FixedIP = models.NetworkModel.extend({
+      storage_attrs: {
+        'subnet_id': ['subnets', 'subnet']
+      }
+    });
+    models.FixedIPs = models.NetworkCollection.extend({
+      model: models.FixedIP
+    });
 
     models.Port = models.NetworkModel.extend({
-      
       path: 'ports',
-
       initialize: function() {
         models.Port.__super__.initialize.apply(this, arguments);
+        var ips = new models.FixedIPs();
+        this.set({'ips': ips});
+        this.bind('change:fixed_ips', function() {
+          var ips = this.get('ips');
+          //var ips = _.map(ips, function(ip) { ip.id = ip.a})
+          this.update_ips()
+        }, this);
+        this.update_ips();
         this.set({'pending_firewall': null});
       },
       
+      update_ips: function() {
+        var ips = _.map(this.get('fixed_ips'), function(ip) {
+          var type = "v4";
+          if (ip.ip_address.indexOf(":") >= 0) {
+            type = "v6";
+          }
+          ip.id = ip.ip_address;
+          ip.type = type;
+          ip.subnet_id = ip.subnet;
+          delete ip.subnet;
+          return ip;
+        });
+        this.get('ips').update(ips, {removeMissing: true});
+      },
+
       model_actions: {
         'disconnect': [['status', 'network', 'vm'], function() {
           var network = this.get('network');
@@ -298,7 +329,7 @@
             return attachment.firewallProfile
           } 
         ],
-
+        
         'firewall_running': [
           ['firewall_status', 'pending_firewall'], function(status, pending) {
               var pending = this.get('pending_firewall');

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_icon_view.js

@@ -127,24 +127,28 @@
             this.view = view;
             this.vm_view = this.view.vm(vm);
             
-            this.info_link = $(".toggler", this.vm_view);
-            this.info_el = $("div.info-content", this.vm_view);
-            this.details_toggler = $(".toggler", this.vm_view);
+            this.info_toggle = $(".cont-toggler-wrapper.info .toggler", this.vm_view);
+            this.ips_toggle = $(".cont-toggler-wrapper.ips .toggler", this.vm_view);
+            this.info_el = $("div.info-content.vm-info", this.vm_view);
+            this.ips_el = $("div.info-content.ips", this.vm_view);
             this.label = $(".label", this.vm_view);
 
             this.set_handlers();
         },
 
         set_handlers: function() {
-            this.info_link.click(_.bind(function(){
+            this.info_toggle.click(_.bind(function(){
+                this.ips_el.slideUp();
+                this.ips_toggle.removeClass("open");
+
                 this.info_el.slideToggle();
                 this.view.vm(this.vm).toggleClass("light-background");
 
-                if (this.details_toggler.hasClass("open")) {
-                    this.details_toggler.removeClass("open");
+                if (this.info_toggle.hasClass("open")) {
+                    this.info_toggle.removeClass("open");
                     this.vm.stop_stats_update();
                 } else {
-                    this.details_toggler.addClass("open");
+                    this.info_toggle.addClass("open");
                     this.view.details_views[this.vm.id].update_layout();
                     this.view.tags_views[this.vm.id].update_layout();
                     this.view.stats_views[this.vm.id].update_layout();
@@ -154,6 +158,22 @@
                 window.setTimeout(function() {$(self.view).trigger("resize")}, 300);
             }, this));
 
+            this.ips_toggle.click(_.bind(function(){
+                this.info_el.slideUp();
+                this.info_toggle.removeClass("open");
+
+                this.ips_el.slideToggle();
+                this.view.vm(this.vm).toggleClass("light-background");
+                var self = this;
+                if (this.ips_toggle.hasClass("open")) {
+                    this.ips_toggle.removeClass("open");
+                } else {
+                    this.ips_toggle.addClass("open");
+                }
+                window.setTimeout(function() {$(self.view).trigger("resize")}, 300);
+            }, this));
+
+
             this.$(".stats-report").click(_.bind(function(e){
                 e.preventDefault();
                 snf.ui.main.show_vm_details(this.vm);
@@ -416,18 +436,28 @@
                 this.parent.metadata_view.show(this.vm);
             }, this));
 
-            // tags have show/hide control ? bind events for them
+            // tags/ips have show/hide control ? bind events for them
             var self = this;
             if (this.toggle) {
                 $(this.el).find(".tags-header").click(_.bind(function(){
                     $(self.el).find(".tags-content").slideToggle(600);
-                    var details_toggler = $(this.el).find(".tags-header .cont-toggler");
+
+                    var details_toggler = $(this.el).find(".tags-header " +
+                                                          ".cont-toggler.info");
+                    var ips_toggler = $(this.el).find(".tags-header " +
+                                                      ".cont-toggler.ips");
                     
                     if (details_toggler.hasClass("open")) {
                         details_toggler.removeClass("open");
                     } else {
                         details_toggler.addClass("open");
                     }
+
+                    if (ips_toggler.hasClass("open")) {
+                        ips_toggler.removeClass("open");
+                    } else {
+                        ips_toggler.addClass("open");
+                    }
                 }, this));
                 $(self.el).find(".tags-content").hide();
             }
@@ -716,6 +746,7 @@
             this.info_views = this.info_views || {};
             this.action_error_views = this.action_error_views || {};
             this.action_views = this.action_views || {};
+            this.ports_views = this.ports_views || {};
 
             this.action_views[vm.id] = new views.VMActionsView(vm, this, this.vm(vm), this.hide_actions);
             this.rename_views[vm.id] = new views.IconRenameView(vm, this);
@@ -723,8 +754,19 @@
             this.connect_views[vm.id] = new views.IconVMConnectView(vm, this);
             this.tags_views[vm.id] = new views.VMTagsView(vm, this);
             this.details_views[vm.id] = new views.VMDetailsView(vm, this);
-            this.info_views[vm.id] = new views.IconInfoView(vm, this);
             this.action_error_views[vm.id] = new views.VMActionErrorView(vm, this);
+            
+            var ports_container = this.vm(vm).find(".machine-data");
+            var ports_view = new views.VMPortListView({
+              collection: vm.ports, 
+              container: ports_container,
+              parent: this
+            });
+            this.ports_views[vm.id] = ports_view
+            ports_view.show();
+            ports_view.el.hide();
+
+            this.info_views[vm.id] = new views.IconInfoView(vm, this);
         },
         
         // vm specific event handlers

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_networks_view.js

@@ -382,7 +382,6 @@
       resolve_storage_object: function() {
         return this.collection
       },
-
       show_connect_vms_overlay: function() {
         this.parent_view.show_connect_vms_overlay();
       }
@@ -409,6 +408,11 @@
         this.ports_toggler.find(".cont-toggler").toggleClass("open");
         this.ports_visible = this.ports_toggler.find(".cont-toggler").hasClass("open");
       },
+      
+      get_network_icon: function() {
+        var ico = this.model.get('is_public') ? 'internet.png' : 'network.png';
+        return synnefo.config.media_url + 'images/' + ico;
+      },
 
       post_hide: function() {
         views.NetworkView.__super__.post_hide.apply(this);

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_vms_base_view.js

@@ -734,5 +734,44 @@
         }
         snf.ui.trigger("error", { code:code, msg:msg, error:error, extra:extra || {} });
     };
+    
+    views.VMPortView = views.ext.ModelView.extend({
+      tpl: '#vm-port-view-tpl',
+      classes: 'port-item clearfix',
+      get_network_name: function() {
+        var network = this.model.get('network');
+        var name = network && network.get('name');
+        if (!name) {
+          name = 'Internet'
+        }
+        name = synnefo.util.truncate(name, 18, '...');
+        return name || 'Loading...';
+      },
+
+      get_network_icon: function() {
+        var ico;
+        var network = this.model.get('network');
+        if (network) {
+          ico = network.get('is_public') ? 'internet-small.png' : 'network-small.png';
+        } else {
+          ico = 'network-small.png';
+        }
+        return synnefo.config.media_url + 'images/' + ico;
+      },
+    });
+    
+    views.VMPortListView = views.ext.CollectionView.extend({
+      tpl: '#vm-port-list-view-tpl',
+      model_view_cls: views.VMPortView
+    });
+
+    views.VMPortIpView = views.ext.ModelView.extend({
+      tpl: '#vm-port-ip-tpl'
+    });
+
+    views.VMPortIpsView = views.ext.CollectionView.extend({
+      tpl: '#vm-port-ips-tpl',
+      model_view_cls: views.VMPortIpView
+    });
 
 })(this);

snf-cyclades-app/synnefo/ui/static/snf/js/views_ext.js

@@ -26,21 +26,32 @@
     views.ext.View = views.View.extend({
       rivets_view: false,
       rivets: undefined,
+      container: undefined,
+      classes:'',
 
       storage_handlers: {},
 
       init: function() {},
       post_init: function() {},
 
-      initialize: function() {
+      initialize: function(options) {
+        this.container = options && options.container;
         this._subviews = [];
         if (this.tpl) {
           this.el = $(this.tpl).clone().removeClass("hidden").removeAttr('id');
         }
         this.init.apply(this, arguments);
         this.post_init.apply(this, arguments);
+        this.append_to_container();
+        $(this.el).addClass(this.classes);
         _.bindAll(this);
       },
+      
+      append_to_container: function() {
+        if (!this.container) { return }
+        var cont = $(this.container);
+        cont.append(this.el);
+      },
 
       create_view: function(view_cls, options) {
         var options = _.extend({}, options);
@@ -384,7 +395,7 @@
 
     views.ext.ModelView = views.ext.View.extend({
       rivets_view: true,
-
+      
       initialize: function() {
         views.ext.ModelView.__super__.initialize.apply(this, arguments);
         var actions = this.model.get('actions');

snf-cyclades-app/synnefo/ui/templates/partials/machines.html

@@ -31,3 +31,32 @@
 {% include "partials/create_vm.html" %}
 {% include "partials/manage_metadata.html" %}
 {% include "partials/vm_connect.html" %}
+
+<div id="vm-port-ips-tpl" class="hidden">
+  <div class="collection fixed-ips-list">
+    <div class="empty-list hidden">loading...</div>
+    <div class="items-list clearfix"></div>
+  </div>
+</div>
+
+<div id="vm-port-ip-tpl" class="hidden clearfix port-ip-item">
+  <div class="type" data-rv-text="model.type"></div>
+  <div class="ip" data-rv-text="model.ip_address"></div>
+  <div class="cidr" data-rv-text="model.subnet.cidr"></div>
+</div>
+
+<div id="vm-port-view-tpl">
+  <img data-rv-src="model.network.is_public|get_network_icon" />
+  <div class="port" data-rv-text="model.network.name|get_network_name"></div>
+  <div class="ips" data-rv-collection-view="model.ips|VMPortIpsView"></div>
+</div>
+
+<div id="vm-port-list-view-tpl" class="collection-list-view hidden info-content ips">
+  <div class="collection">
+    <div class="empty-list hidden">
+      <p>{% trans "No IP addresses" %}</p>
+    </div>
+    <div class="items-list ports-list clearfix">
+    </div>
+  </div>
+</div>

snf-cyclades-app/synnefo/ui/templates/partials/machines_icon.html

@@ -35,6 +35,11 @@
                                 <span class="label">{% trans "info" %}</span>
                             </span>
                         </div>
+                        <div class="cont-toggler-wrapper ips">
+                          <span class="info-header cont-toggler toggler">
+                            <span class="label">{% trans "ip addresses" %}</span>
+                          </span>
+                        </div>
                 </div>
                 <div class="state">
                     <div class="status">{% trans "Running" %}</div>
@@ -49,7 +54,7 @@
                     <img class="wave" style="display:none" src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/medium/wave.gif" />
                 </div>
                 </div>
-                <div class="info-content">
+                <div class="info-content vm-info">
                     <div class="metadata-container">
                         <div class="vm-details metadata-column">
                                 <div class="flavor-details">

snf-cyclades-app/synnefo/ui/templates/partials/networks.html

@@ -161,7 +161,7 @@
   <div class="clearfix">
     <div class="main-content clearfix">
       <div class="main-content-inner clearfix">
-        <img class="logo" src="{{ SYNNEFO_IMAGES_URL }}internet.png" />
+        <img class="logo" data-rv-src="model.is_public|get_network_icon" />
         <div class="entry">
           <div data-rv-show="model" 
                data-rv-model-view="model|ModelRenameView"></div>