Commit e9458c38 authored by Kostas Papadimitriou's avatar Kostas Papadimitriou
Browse files

ui: IP addresses subview in icon vms view

parent e27d193f
......@@ -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 {
......
......@@ -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;
......
......@@ -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');
......
......@@ -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
......
......@@ -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);
......
......@@ -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);
......@@ -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');
......
......@@ -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>
......@@ -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">
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment