Revision 32a58fdf
| b/snf-cyclades-app/synnefo/ui/static/snf/css/main.css | ||
|---|---|---|
| 3265 | 3265 |
padding: 3px; |
| 3266 | 3266 |
} |
| 3267 | 3267 |
|
| 3268 |
.single .machine .info-content.ips .ips .model-item .ip {
|
|
| 3269 |
width: 85%; |
|
| 3270 |
} |
|
| 3271 |
|
|
| 3272 |
.single .machine .info-content.ips .ips .model-item .cidr {
|
|
| 3273 |
padding-left: 27px; |
|
| 3274 |
} |
|
| 3275 |
|
|
| 3276 |
.single .machine .info-content.ips .ips .model-item .type {
|
|
| 3277 |
font-size: 0.9em; |
|
| 3278 |
padding: 1px 4px; |
|
| 3279 |
margin-top: 4px; |
|
| 3280 |
} |
|
| 3281 |
|
|
| 3268 | 3282 |
.machine .info-content.ips .port {
|
| 3269 |
width: 15%;
|
|
| 3283 |
width: 77%;
|
|
| 3270 | 3284 |
float: left; |
| 3271 | 3285 |
margin-top: 9px; |
| 3272 | 3286 |
} |
| ... | ... | |
| 3291 | 3305 |
position: relative; |
| 3292 | 3306 |
left: 4px; |
| 3293 | 3307 |
margin-top: 10px; |
| 3294 |
margin-right: 3%; |
|
| 3308 |
margin-right: 10px; |
|
| 3309 |
} |
|
| 3310 |
|
|
| 3311 |
.single .machine .info-content.ips .port-item img {
|
|
| 3312 |
margin-top: 13px; |
|
| 3313 |
} |
|
| 3314 |
|
|
| 3315 |
.machine .info-content.ips .port-item .network-header {
|
|
| 3316 |
width: 18%; |
|
| 3317 |
float: left; |
|
| 3318 |
} |
|
| 3319 |
|
|
| 3320 |
.single .machine .info-content.ips .port-item .network-header {
|
|
| 3321 |
width: 100%; |
|
| 3322 |
float: none; |
|
| 3323 |
} |
|
| 3324 |
|
|
| 3325 |
.single .machine .info-content.ips .ips {
|
|
| 3326 |
width: 100%; |
|
| 3295 | 3327 |
} |
| 3296 | 3328 |
|
| 3297 | 3329 |
.machine .info-content.ips .port-item .port {
|
| 3298 | 3330 |
font-weight: bold; |
| 3299 | 3331 |
} |
| 3300 | 3332 |
|
| 3333 |
.single .machine .info-content.ips {
|
|
| 3334 |
font-size: 0.8em; |
|
| 3335 |
color: #222; |
|
| 3336 |
} |
|
| 3337 |
|
|
| 3301 | 3338 |
.machine .info-content.ips {
|
| 3302 | 3339 |
background-color: #84B7D0; |
| 3303 | 3340 |
padding: 0px 10px; |
| ... | ... | |
| 3650 | 3687 |
width: 9px; |
| 3651 | 3688 |
} |
| 3652 | 3689 |
|
| 3653 |
.single .tags-header .info-header{
|
|
| 3690 |
.single .toggler-header .info-header{
|
|
| 3654 | 3691 |
padding-top:0; |
| 3655 | 3692 |
padding-bottom:0; |
| 3656 | 3693 |
} |
| 3657 | 3694 |
|
| 3658 |
.single .tags-header {
|
|
| 3695 |
.single .toggler-header {
|
|
| 3659 | 3696 |
font-size: 0.62em; |
| 3660 | 3697 |
cursor: pointer; |
| 3661 | 3698 |
float: left; |
| 3662 | 3699 |
margin-bottom:5px; |
| 3663 | 3700 |
} |
| 3664 | 3701 |
|
| 3665 |
.single .tags-header span.label {
|
|
| 3702 |
.single .toggler-header span.label {
|
|
| 3666 | 3703 |
font-size: 104%; |
| 3667 | 3704 |
} |
| 3668 | 3705 |
|
| 3669 |
.single .tags-content {
|
|
| 3706 |
.single .toggler-content {
|
|
| 3670 | 3707 |
background-color: #84B7D0; |
| 3671 | 3708 |
clear: both; |
| 3672 | 3709 |
height: auto; |
| ... | ... | |
| 7176 | 7213 |
border: 1px solid #aaaaaa; |
| 7177 | 7214 |
font-size: 85%; |
| 7178 | 7215 |
padding: 2px; |
| 7179 |
width: 255px;
|
|
| 7216 |
width: 235px;
|
|
| 7180 | 7217 |
} |
| 7181 | 7218 |
|
| 7182 | 7219 |
.model-rename-view .value {}
|
| ... | ... | |
| 7186 | 7223 |
.model-rename-view .rename-actions {
|
| 7187 | 7224 |
float: right; |
| 7188 | 7225 |
width: 40px; |
| 7226 |
position: relative; |
|
| 7227 |
top: 1px; |
|
| 7228 |
left: -6px; |
|
| 7189 | 7229 |
} |
| 7190 | 7230 |
|
| 7191 | 7231 |
.model-rename-view .rename-actions .btn {
|
| b/snf-cyclades-app/synnefo/ui/static/snf/js/neutron.js | ||
|---|---|---|
| 299 | 299 |
}, |
| 300 | 300 |
|
| 301 | 301 |
update_ips: function() {
|
| 302 |
var ips = _.map(this.get('fixed_ips'), function(ip) {
|
|
| 302 |
var ips = _.map(this.get('fixed_ips'), function(ip_obj) {
|
|
| 303 |
var ip = _.clone(ip_obj); |
|
| 303 | 304 |
var type = "v4"; |
| 304 | 305 |
if (ip.ip_address.indexOf(":") >= 0) {
|
| 305 | 306 |
type = "v6"; |
| ... | ... | |
| 328 | 329 |
|
| 329 | 330 |
storage_attrs: {
|
| 330 | 331 |
'device_id': ['vms', 'vm'], |
| 331 |
'network_id': ['networks', 'network'],
|
|
| 332 |
'network_id': ['networks', 'network'] |
|
| 332 | 333 |
}, |
| 333 | 334 |
|
| 334 | 335 |
proxy_attrs: {
|
| b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_icon_view.js | ||
|---|---|---|
| 441 | 441 |
if (this.toggle) {
|
| 442 | 442 |
$(this.el).find(".tags-header").click(_.bind(function(){
|
| 443 | 443 |
$(self.el).find(".tags-content").slideToggle(600);
|
| 444 |
|
|
| 445 | 444 |
var details_toggler = $(this.el).find(".tags-header " +
|
| 446 |
".cont-toggler.info"); |
|
| 447 |
var ips_toggler = $(this.el).find(".tags-header " +
|
|
| 448 |
".cont-toggler.ips"); |
|
| 449 |
|
|
| 445 |
".cont-toggler"); |
|
| 450 | 446 |
if (details_toggler.hasClass("open")) {
|
| 451 | 447 |
details_toggler.removeClass("open");
|
| 452 | 448 |
} else {
|
| 453 | 449 |
details_toggler.addClass("open");
|
| 454 | 450 |
} |
| 455 |
|
|
| 456 |
if (ips_toggler.hasClass("open")) {
|
|
| 457 |
ips_toggler.removeClass("open");
|
|
| 458 |
} else {
|
|
| 459 |
ips_toggler.addClass("open");
|
|
| 460 |
} |
|
| 461 | 451 |
}, this)); |
| 452 |
$(this.el).find(".tags-header").find(".toggler").removeClass("open");
|
|
| 462 | 453 |
$(self.el).find(".tags-content").hide();
|
| 463 | 454 |
} |
| 464 | 455 |
}, |
| b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_single_view.js | ||
|---|---|---|
| 49 | 49 |
// shortcuts |
| 50 | 50 |
var bb = root.Backbone; |
| 51 | 51 |
var hasKey = Object.prototype.hasOwnProperty; |
| 52 |
|
|
| 53 |
views.VMSinglePortListView = views.VMPortListView.extend({
|
|
| 54 |
|
|
| 55 |
init: function() {
|
|
| 56 |
views.VMSinglePortListView.__super__.init.apply(this); |
|
| 57 |
this.open = false; |
|
| 58 |
this.vm_el = $(this.options.vm_view); |
|
| 59 |
this.tags_toggler = this.vm_el.find(".tags-header");
|
|
| 60 |
this.tags_content = this.vm_el.find(".tags-content");
|
|
| 61 |
this.toggler = this.vm_el.find(".toggler-header.ips");
|
|
| 62 |
this.toggler_content = this.vm_el.find(".ips-content");
|
|
| 63 |
this.toggler_content.hide(); |
|
| 64 |
$(this.el).show(); |
|
| 65 |
|
|
| 66 |
var self = this; |
|
| 67 |
this.toggler.click(function() {
|
|
| 68 |
self.toggle(); |
|
| 69 |
}); |
|
| 70 |
|
|
| 71 |
this.tags_toggler.click(function() {
|
|
| 72 |
self.toggler.find(".toggler").removeClass("open");
|
|
| 73 |
self.toggler_content.slideUp(); |
|
| 74 |
}); |
|
| 75 |
}, |
|
| 76 |
|
|
| 77 |
toggle: function() {
|
|
| 78 |
this.open = !this.open; |
|
| 79 |
|
|
| 80 |
if (this.open) {
|
|
| 81 |
this.show(true); |
|
| 82 |
this.tags_toggler.find(".toggler").removeClass("open");
|
|
| 83 |
this.tags_content.slideUp(); |
|
| 84 |
this.toggler.find(".toggler").addClass("open");
|
|
| 85 |
this.toggler_content.removeClass(".hidden").slideDown();
|
|
| 86 |
} else {
|
|
| 87 |
this.toggler.find(".toggler").removeClass("open");
|
|
| 88 |
this.toggler_content.removeClass(".hidden").slideUp();
|
|
| 89 |
} |
|
| 90 |
} |
|
| 91 |
}); |
|
| 52 | 92 |
|
| 53 | 93 |
views.SingleDetailsView = views.VMDetailsView.extend({
|
| 54 | 94 |
|
| ... | ... | |
| 61 | 101 |
'disk': '.machine-detail.disk', |
| 62 | 102 |
'image_name': '.machine-detail.image-name', |
| 63 | 103 |
'image_size': '.machine-detail.image-size' |
| 64 |
} |
|
| 104 |
},
|
|
| 65 | 105 |
|
| 66 | 106 |
}) |
| 67 | 107 |
|
| ... | ... | |
| 207 | 247 |
this.details_views = this.details_views || {};
|
| 208 | 248 |
this.action_views = this.action_views || {};
|
| 209 | 249 |
this.action_error_views = this.action_error_views || {};
|
| 250 |
this.ports_views = this.ports_views || {};
|
|
| 210 | 251 |
|
| 211 | 252 |
//this.stats_views[vm.id] = new views.IconStatsView(vm, this); |
| 212 | 253 |
|
| ... | ... | |
| 217 | 258 |
this.tags_views[vm.id] = new views.VMTagsView(vm, this, true, 20, 10, 35); |
| 218 | 259 |
this.details_views[vm.id] = new views.SingleDetailsView(vm, this); |
| 219 | 260 |
this.action_error_views[vm.id] = new views.VMActionErrorView(vm, this); |
| 261 |
|
|
| 262 |
var ports_container = this.vm(vm).find(".ips-content");
|
|
| 263 |
var ports_toggler = this.vm(vm).find(".toggler-header.ips");
|
|
| 264 |
|
|
| 265 |
var ports_view = new views.VMSinglePortListView({
|
|
| 266 |
vm_view: this.vm(vm), |
|
| 267 |
collection: vm.ports, |
|
| 268 |
container: ports_container, |
|
| 269 |
parent: this |
|
| 270 |
}); |
|
| 271 |
this.ports_views[vm.id] = ports_view |
|
| 272 |
ports_view.show(); |
|
| 273 |
ports_view.el.hide(); |
|
| 220 | 274 |
|
| 221 | 275 |
if (storage.vms.models.length > 1) { this.vm(vm).hide(); };
|
| 222 | 276 |
}, |
| b/snf-cyclades-app/synnefo/ui/static/snf/js/views_ext.js | ||
|---|---|---|
| 368 | 368 |
model_view.hide(); |
| 369 | 369 |
model_view.el.remove(); |
| 370 | 370 |
this.remove_view(model_view); |
| 371 |
this.post_remove_model_view(model_view, model);
|
|
| 371 |
this.post_remove_model_view(model_view, m); |
|
| 372 | 372 |
delete this._model_views[m.id]; |
| 373 | 373 |
this.check_empty(); |
| 374 | 374 |
}, |
| b/snf-cyclades-app/synnefo/ui/templates/partials/machines.html | ||
|---|---|---|
| 34 | 34 |
|
| 35 | 35 |
<div id="vm-port-ips-tpl" class="hidden"> |
| 36 | 36 |
<div class="collection fixed-ips-list"> |
| 37 |
<div class="empty-list hidden">loading...</div>
|
|
| 37 |
<div class="empty-list hidden">pending ...</div>
|
|
| 38 | 38 |
<div class="items-list clearfix"></div> |
| 39 | 39 |
</div> |
| 40 | 40 |
</div> |
| ... | ... | |
| 46 | 46 |
</div> |
| 47 | 47 |
|
| 48 | 48 |
<div id="vm-port-view-tpl"> |
| 49 |
<img data-rv-src="model.network.is_public|get_network_icon" /> |
|
| 50 |
<div class="port" data-rv-text="model.network.name|get_network_name"></div> |
|
| 49 |
<div class="clearfix network-header"> |
|
| 50 |
<img data-rv-src="model.network.is_public|get_network_icon" /> |
|
| 51 |
<div class="port" data-rv-text="model.network.name|get_network_name"></div> |
|
| 52 |
</div> |
|
| 51 | 53 |
<div class="ips" data-rv-collection-view="model.ips|VMPortIpsView"></div> |
| 52 | 54 |
</div> |
| 53 | 55 |
|
| b/snf-cyclades-app/synnefo/ui/templates/partials/machines_single.html | ||
|---|---|---|
| 44 | 44 |
<div class="machine-detail image-name">windos_XP_blah_blah</div> |
| 45 | 45 |
<div class="machine-detail image-size">2.3</div> |
| 46 | 46 |
</div> |
| 47 |
<div class="tags"> |
|
| 48 |
<div class="tags-header"> |
|
| 47 |
<div class="tags machine"> |
|
| 48 |
<div class="togglers clearfix"> |
|
| 49 |
<div class="tags-header toggler-header"> |
|
| 49 | 50 |
<span class="info-header cont-toggler toggler"> |
| 50 | 51 |
<span class="label">{% trans "tags" %}</span>
|
| 51 | 52 |
</span> |
| 52 | 53 |
</div> |
| 53 |
<div class="tags-content"> |
|
| 54 |
<div class="metadata-keys-container"> |
|
| 55 |
<div class="items"> |
|
| 56 |
</div> |
|
| 54 |
<div class="cont-toggler-wrapper toggler-header ips"> |
|
| 55 |
<span class="info-header cont-toggler toggler"> |
|
| 56 |
<span class="label">{% trans "ip addresses" %}</span>
|
|
| 57 |
</span> |
|
| 58 |
</div> |
|
| 59 |
</div> |
|
| 60 |
<div class="togglers-content"> |
|
| 61 |
<div class="tags-content toggler-content"> |
|
| 62 |
<div class="metadata-keys-container"> |
|
| 63 |
<div class="items"> |
|
| 57 | 64 |
</div> |
| 58 |
<a href="#" class="manage-metadata">{% trans "Manage Tags" %}</a>
|
|
| 65 |
</div> |
|
| 66 |
<a href="#" class="manage-metadata">{% trans "Manage Tags" %}</a>
|
|
| 67 |
</div> |
|
| 68 |
<div class="ips-content toggler-content hidden info-content"> |
|
| 59 | 69 |
</div> |
| 70 |
</div> |
|
| 60 | 71 |
</div> |
| 61 | 72 |
</div> |
| 62 | 73 |
<div class="col3"> |
Also available in: Unified diff