root / ui / static / snf / js / ui / web / ui_icon_view.js @ 23a3bb8e
History | View | Annotate | Download (25 kB)
1 |
;(function(root){
|
---|---|
2 |
|
3 |
// root
|
4 |
var root = root;
|
5 |
|
6 |
// setup namepsaces
|
7 |
var snf = root.synnefo = root.synnefo || {};
|
8 |
var models = snf.models = snf.models || {}
|
9 |
var storage = snf.storage = snf.storage || {};
|
10 |
var ui = snf.ui = snf.ui || {};
|
11 |
var util = snf.util = snf.util || {};
|
12 |
|
13 |
var views = snf.views = snf.views || {}
|
14 |
|
15 |
// shortcuts
|
16 |
var bb = root.Backbone;
|
17 |
|
18 |
// handle extended info toggler
|
19 |
views.IconInfoView = views.View.extend({ |
20 |
|
21 |
initialize: function (vm, view) { |
22 |
this.vm = vm;
|
23 |
this.view = view;
|
24 |
this.vm_view = this.view.vm(vm); |
25 |
|
26 |
this.info_link = $(".toggler", this.vm_view); |
27 |
this.el = $("div.info-content", this.vm_view); |
28 |
this.toggler = $(".toggler", this.vm_view); |
29 |
this.label = $(".label", this.vm_view); |
30 |
|
31 |
this.set_handlers();
|
32 |
}, |
33 |
|
34 |
set_handlers: function() { |
35 |
this.info_link.click(_.bind(function(){ |
36 |
this.el.slideToggle();
|
37 |
this.view.vm(this.vm).toggleClass("light-background"); |
38 |
|
39 |
if (this.toggler.hasClass("open")) { |
40 |
this.toggler.removeClass("open"); |
41 |
} else {
|
42 |
this.toggler.addClass("open"); |
43 |
get_server_stats(this.vm.id);
|
44 |
} |
45 |
|
46 |
var self = this; |
47 |
window.setTimeout(function() {$(self.view).trigger("resize")}, 300); |
48 |
}, this));
|
49 |
|
50 |
this.$(".stats-report").click(_.bind(function(){ |
51 |
snf.ui.main.show_vm_details(this.vm);
|
52 |
}, this))
|
53 |
} |
54 |
|
55 |
}) |
56 |
|
57 |
// rename handler view
|
58 |
// only icon view contains rename capability
|
59 |
views.IconRenameView = views.View.extend({ |
60 |
|
61 |
initialize: function(vm, view) { |
62 |
this.vm = vm;
|
63 |
this.view = view;
|
64 |
// name container
|
65 |
this.el = $('div#' + this.view.id_tpl + vm.id + " div.name").get(0); |
66 |
// name inline element
|
67 |
this.name = this.$('span.name'); |
68 |
// rename button
|
69 |
this.rename = this.$('span.rename'); |
70 |
// save button
|
71 |
this.save = this.$('.save'); |
72 |
// cancel rename button
|
73 |
this.cancel = this.$('.cancel'); |
74 |
// where to place the input field
|
75 |
this.edit_cont = this.$(".namecontainer"); |
76 |
// buttons container
|
77 |
this.buttons = this.$(".editbuttons"); |
78 |
// current state
|
79 |
this.renaming = false; |
80 |
// init event handlers
|
81 |
this.set_handlers();
|
82 |
// paint
|
83 |
this.update_layout();
|
84 |
views.IconRenameView.__super__.initialize.call(this);
|
85 |
}, |
86 |
|
87 |
// update elements visibility/state
|
88 |
update_layout: function() { |
89 |
// if in renaming state
|
90 |
if (this.renaming) { |
91 |
// if name is hidden we are already in renaming state
|
92 |
// dont do nothing
|
93 |
if (this.name.is(":hidden")){return} |
94 |
|
95 |
// hide name element to make space for the
|
96 |
// text input
|
97 |
this.name.hide();
|
98 |
this.rename.hide();
|
99 |
// show confirm/cancel buttons
|
100 |
this.buttons.show();
|
101 |
// create text element
|
102 |
this.create_input();
|
103 |
} else {
|
104 |
// name is visible not in edit mode
|
105 |
if (this.name.is(":visible")){return} |
106 |
|
107 |
this.name.show();
|
108 |
this.rename.show();
|
109 |
this.buttons.hide();
|
110 |
this.remove_input();
|
111 |
} |
112 |
}, |
113 |
|
114 |
// create rename input field and set appropriate
|
115 |
// event handlers
|
116 |
create_input: function() { |
117 |
var self = this; |
118 |
this.edit_cont.append('<input class="vm-rename nametextbox" type="text" />'); |
119 |
this.$('input').val(this.vm.get('name')); |
120 |
// give edit focus
|
121 |
this.$('input').focus(); |
122 |
// handle enter press
|
123 |
this.$('input').keypress(function(ev){ |
124 |
if (ev.charCode == 13) { |
125 |
self.submit(); |
126 |
} |
127 |
}) |
128 |
}, |
129 |
|
130 |
// remove input element
|
131 |
remove_input: function() { |
132 |
this.$('input').remove(); |
133 |
}, |
134 |
|
135 |
// initialize event handlers
|
136 |
set_handlers: function() { |
137 |
var self = this; |
138 |
// start rename when rename button is pressed
|
139 |
this.rename.click(function() { |
140 |
self.renaming = true;
|
141 |
self.update_layout(); |
142 |
}); |
143 |
|
144 |
// double click on name
|
145 |
$(this.el).dblclick(function() { |
146 |
self.renaming = true;
|
147 |
self.update_layout(); |
148 |
}); |
149 |
|
150 |
// cancel rename
|
151 |
this.cancel.click(function() { |
152 |
self.renaming = false;
|
153 |
self.update_layout(); |
154 |
}) |
155 |
|
156 |
// apply the rename
|
157 |
// TODO: check if name is equal than the previous value
|
158 |
this.save.click(function() { |
159 |
self.submit(); |
160 |
}) |
161 |
}, |
162 |
|
163 |
submit: function() { |
164 |
var value = _(self.$('input').val()).trim(); |
165 |
if (value == "") { return }; |
166 |
this.renaming = false; |
167 |
this.vm.rename(self.$('input').val()); |
168 |
this.update_layout();
|
169 |
} |
170 |
}); |
171 |
|
172 |
// VM connect interaction view
|
173 |
views.IconVMConnectView = views.View.extend({ |
174 |
|
175 |
initialize: function(vm, view) { |
176 |
// parent view (single, icon, list)
|
177 |
this.parent = view;
|
178 |
this.vm = vm;
|
179 |
this.el = view.vm(vm);
|
180 |
this.set_handlers();
|
181 |
views.IconVMConnectView.__super__.initialize.call(this);
|
182 |
}, |
183 |
|
184 |
// set the appropriate handlers
|
185 |
set_handlers: function() { |
186 |
// setup connect handler on vm icon interaction
|
187 |
var el = this.el; |
188 |
var vm = this.vm; |
189 |
|
190 |
// element that triggers the connect handler
|
191 |
var connect = el.find("div.connect-arrow, .logo"); |
192 |
// connect status handler
|
193 |
var handler = _.bind(this.connect_handler, {vm:vm, el:el, view:this.parent}); |
194 |
$(connect).bind({'mouseover': handler, 'mouseleave': handler, |
195 |
'mousedown': handler, 'mouseup': handler, |
196 |
'click': handler });
|
197 |
|
198 |
// setup connect arrow display handlers
|
199 |
// while hovering vm container
|
200 |
el.bind("mouseover", function(){ |
201 |
if (vm.is_connectable()) {
|
202 |
el.find(".connect-border").show();
|
203 |
el.find(".connect-arrow").show();
|
204 |
el.find(".logo").css({cursor:"pointer"}); |
205 |
} else {
|
206 |
el.find(".connect-border").hide();
|
207 |
el.find(".connect-arrow").hide();
|
208 |
el.find(".logo").css({cursor: "default"}); |
209 |
} |
210 |
}).bind("mouseleave", function(){ |
211 |
el.find(".connect-border").hide();
|
212 |
el.find(".connect-arrow").hide();
|
213 |
}); |
214 |
}, |
215 |
|
216 |
// connect arrow interaction handlers
|
217 |
// BEWARE, this function has different context
|
218 |
// than the View object itself, see set_vm_handlers
|
219 |
connect_handler: function(event) { |
220 |
// nothing to do if we cannot connect to the vm
|
221 |
if (!this.vm.is_connectable()) {return} |
222 |
|
223 |
var logo = this.el.find(".logo"); |
224 |
var arrow = this.el.find(".connect-arrow"); |
225 |
var border = this.el.find(".connect-border"); |
226 |
|
227 |
// clear icon states
|
228 |
logo.removeClass('single-image-state1 single-image-state2 single-image-state3 single-image-state4');
|
229 |
|
230 |
// append the appropriate state class
|
231 |
switch (event.type) {
|
232 |
case "mouseover": |
233 |
logo.addClass('single-image-state4');
|
234 |
arrow.addClass('border-hover');
|
235 |
break;
|
236 |
|
237 |
case "mouseleave": |
238 |
logo.addClass('single-image-state1');
|
239 |
arrow.removeClass('border-hover');
|
240 |
break;
|
241 |
|
242 |
case "mouseup": |
243 |
logo.addClass('single-image-state4');
|
244 |
machine_connect([machine_connect, this.vm.id]);
|
245 |
break;
|
246 |
|
247 |
case "mousedown": |
248 |
logo.addClass('single-image-state2');
|
249 |
break;
|
250 |
|
251 |
case "click": |
252 |
//logo.addCLass('single-image-state4');
|
253 |
//this.view.connect_to_console(vm);
|
254 |
this.view.connect_overlay.show(this.vm); |
255 |
break;
|
256 |
|
257 |
default:
|
258 |
; |
259 |
} |
260 |
}, |
261 |
|
262 |
update_layout: function() { |
263 |
} |
264 |
|
265 |
}); |
266 |
|
267 |
// vm metadata subview for icon and single view
|
268 |
views.VMTagsView = views.View.extend({ |
269 |
view_id: 'vm_tags', |
270 |
// metadata container selector
|
271 |
el_sel: '.vm-metadata', |
272 |
// metadata row template
|
273 |
tag_tpl: '<span class="tag-item"><span class="key">{0}</span><span class="value">{1}</span></span>', |
274 |
// how many tags to show
|
275 |
tag_limit: 4, |
276 |
// truncate options (because container has different size on icon/single views)
|
277 |
tag_key_truncate: 7, |
278 |
tag_value_truncate: 15, |
279 |
|
280 |
initialize: function(vm, view, toggle, limit, tag_key_truncate, tag_value_truncate) { |
281 |
this.tag_limit = limit || this.tag_limit; |
282 |
|
283 |
this.tag_key_truncate = tag_key_truncate || this.tag_key_truncate; |
284 |
this.tag_value_truncate = tag_value_truncate || this.tag_value_truncate; |
285 |
|
286 |
// does the view toggles the metadata container (single view)
|
287 |
this.toggle = toggle || false; |
288 |
// parent view
|
289 |
this.parent = view;
|
290 |
this.vm = vm;
|
291 |
this.el = this.parent.vm(vm); |
292 |
this.view_id = this.view_id + "_" + vm.id; |
293 |
|
294 |
// link to raise the metadata manager overlay
|
295 |
this.link = this.$('a.manage-metadata'); |
296 |
|
297 |
views.VMTagsView.__super__.initialize.call(this);
|
298 |
this.set_handlers();
|
299 |
this.update_layout();
|
300 |
}, |
301 |
|
302 |
// set the appropriate handlers
|
303 |
set_handlers: function() { |
304 |
var self = this; |
305 |
// show the metadata editor overlay
|
306 |
this.link.click(_.bind(function(ev) { |
307 |
ev.preventDefault(); |
308 |
this.parent.metadata_view.show(this.vm); |
309 |
}, this));
|
310 |
|
311 |
// tags have show/hide control ? bind events for them
|
312 |
var self = this; |
313 |
if (this.toggle) { |
314 |
$(this.el).find(".tags-header").click(_.bind(function(){ |
315 |
$(self.el).find(".tags-content").slideToggle(600); |
316 |
var toggler = $(this.el).find(".tags-header .cont-toggler"); |
317 |
|
318 |
if (toggler.hasClass("open")) { |
319 |
toggler.removeClass("open");
|
320 |
} else {
|
321 |
toggler.addClass("open");
|
322 |
} |
323 |
}, this));
|
324 |
$(self.el).find(".tags-content").hide(); |
325 |
} |
326 |
}, |
327 |
|
328 |
// update metadata container and data
|
329 |
update_layout: function() { |
330 |
|
331 |
// api metadata object
|
332 |
var meta = this.vm.get_meta(); |
333 |
|
334 |
var i = 0; |
335 |
var cont = $(this.el).find(".items"); |
336 |
|
337 |
// clear existing items
|
338 |
cont.find(".tag-item").remove();
|
339 |
|
340 |
// create tag elements
|
341 |
_.each(meta, function(value, key){
|
342 |
// respect the limit
|
343 |
if (i > this.tag_limit) { |
344 |
return;
|
345 |
} |
346 |
|
347 |
// create element
|
348 |
var new_el = $(this.tag_tpl.format(util.truncate(key, this.tag_key_truncate), |
349 |
util.truncate(": " + value, this.tag_value_truncate))); |
350 |
|
351 |
// add title attributes, improve accesibility
|
352 |
// truncated values
|
353 |
new_el.find("span.key").attr("title", key); |
354 |
new_el.find("span.value").attr("title", value); |
355 |
|
356 |
cont.append(new_el); |
357 |
}, this);
|
358 |
} |
359 |
}); |
360 |
|
361 |
|
362 |
// stats subview for single/icon views
|
363 |
views.VMStatsView = views.View.extend({ |
364 |
|
365 |
initialize: function(vm, view, options) { |
366 |
if (!options) {options = {}};
|
367 |
this.vm = vm;
|
368 |
this.parent = view;
|
369 |
this.sel = options.el || this.el_sel || ".lower"; |
370 |
this.el = this.parent.vm(vm).find(this.sel); |
371 |
|
372 |
// elements shortcuts
|
373 |
this.cpu_loading = this.el.find(".cpu-graph .stat-busy"); |
374 |
this.cpu_error = this.el.find(".cpu-graph .stat-error"); |
375 |
this.cpu_img = this.el.find(".cpu-graph .stat-img"); |
376 |
this.net_loading = this.el.find(".network-graph .stat-busy"); |
377 |
this.net_error = this.el.find(".network-graph .stat-error"); |
378 |
this.net_img = this.el.find(".network-graph .stat-img"); |
379 |
|
380 |
// initial state paremeters
|
381 |
this.is_building = (this.vm.get("status") == "BUILD"); |
382 |
this.stats_error = false; |
383 |
this.stats = this.vm.get("stats"); |
384 |
this.loading = false; |
385 |
|
386 |
// timeseries or bar images ?
|
387 |
this.stats_type = options.stats_type || "bar"; |
388 |
|
389 |
// stats undefined so probably not loaded yet
|
390 |
if (this.stats === undefined) { |
391 |
this.loading = true; |
392 |
} |
393 |
|
394 |
views.VMStatsView.__super__.initialize.apply(this, arguments); |
395 |
this.set_handlers();
|
396 |
this.update_layout();
|
397 |
}, |
398 |
|
399 |
|
400 |
set_handlers: function() { |
401 |
// update view state when vm stats update gets triggered
|
402 |
this.vm.bind("stats:update", _.bind(function(){ |
403 |
// update building state
|
404 |
if (this.vm.get("status") == "BUILD") { |
405 |
this.is_building = true; |
406 |
} else {
|
407 |
this.is_building = false; |
408 |
} |
409 |
|
410 |
// update loading state
|
411 |
this.stats = this.vm.get("stats"); |
412 |
if (this.stats == undefined) { |
413 |
this.loading = true |
414 |
} else {
|
415 |
this.loading = false; |
416 |
} |
417 |
|
418 |
// update the layout
|
419 |
this.update_layout();
|
420 |
}, this));
|
421 |
|
422 |
this.vm.bind("stats:error", _.bind(function(){ |
423 |
this.stats_error = true; |
424 |
}, this))
|
425 |
|
426 |
this.cpu_img.error(_.bind(function(){ |
427 |
this.stats_error = true; |
428 |
this.update_layout();
|
429 |
}, this));
|
430 |
|
431 |
this.net_img.error(_.bind(function(){ |
432 |
this.stats_error = true; |
433 |
this.update_layout();
|
434 |
}, this));
|
435 |
}, |
436 |
|
437 |
get_images: function (type) { |
438 |
if (type == "bar") { |
439 |
return {'cpu': this.stats.cpuBar, 'net': this.stats.netBar }; |
440 |
} else {
|
441 |
return {'cpu': this.stats.cpuTimeSeries, 'net': this.stats.netTimeSeries }; |
442 |
} |
443 |
}, |
444 |
|
445 |
update_layout: function() { |
446 |
if (this.stats_error) { |
447 |
this.net_loading.hide();
|
448 |
this.cpu_loading.hide();
|
449 |
this.net_img.hide();
|
450 |
this.cpu_img.hide();
|
451 |
this.cpu_error.show();
|
452 |
this.net_error.show();
|
453 |
return;
|
454 |
} |
455 |
|
456 |
if (this.loading) { |
457 |
this.net_loading.show();
|
458 |
this.cpu_loading.show();
|
459 |
this.net_img.hide();
|
460 |
this.cpu_img.hide();
|
461 |
this.cpu_error.hide();
|
462 |
this.net_error.hide();
|
463 |
return;
|
464 |
} |
465 |
|
466 |
this.net_loading.hide();
|
467 |
this.cpu_loading.hide();
|
468 |
this.cpu_error.hide();
|
469 |
this.net_error.hide();
|
470 |
|
471 |
this.net_img.attr("src", this.get_images(this.stats_type).net); |
472 |
this.cpu_img.attr("src", this.get_images(this.stats_type).cpu); |
473 |
this.net_img.show();
|
474 |
this.cpu_img.show();
|
475 |
} |
476 |
}); |
477 |
|
478 |
views.VMDetailsView = views.View.extend({ |
479 |
view_id: "vm_details", |
480 |
el_sel: '.vm-details', |
481 |
|
482 |
|
483 |
selectors: {
|
484 |
'cpu': '.cpu-data', |
485 |
'ram': '.ram-data', |
486 |
'disk': '.disk-data', |
487 |
'image_name': '.image-data', |
488 |
'image_size': '.image-size-data' |
489 |
}, |
490 |
|
491 |
initialize: function(vm, view) { |
492 |
this.parent = view;
|
493 |
this.vm = vm;
|
494 |
this.el = $(this.parent.vm(vm)).find(this.el_sel).get(0); |
495 |
this.view_id = "vm_{0}_details".format(vm.id); |
496 |
|
497 |
views.VMDetailsView.__super__.initialize.call(this);
|
498 |
this.update_layout();
|
499 |
}, |
500 |
|
501 |
update_layout: function() { |
502 |
var image = this.vm.get_image(); |
503 |
var flavor = this.vm.get_flavor(); |
504 |
if (!flavor || !image) {
|
505 |
return;
|
506 |
} |
507 |
|
508 |
this.sel('image_name').text(util.truncate(image.get('name'), 13)).attr("title", image.get('name')); |
509 |
this.sel('image_size').text(image.get('metadata').values.size).attr('title', image.get('metadata').values.size); |
510 |
|
511 |
this.sel('cpu').text(flavor.get('cpu')); |
512 |
this.sel('ram').text(flavor.get('ram')); |
513 |
this.sel('disk').text(flavor.get('disk')); |
514 |
} |
515 |
}); |
516 |
|
517 |
// VMs icon view
|
518 |
views.IconView = views.VMListView.extend({ |
519 |
|
520 |
// view id (this could be used to identify
|
521 |
// the view object from global context
|
522 |
view_id: 'vm_icon', |
523 |
|
524 |
el: '#machinesview-icon', |
525 |
id_tpl: 'icon-vm-', |
526 |
|
527 |
selectors: {
|
528 |
'vms': '.machine-container', |
529 |
'vm': '#icon-vm-{0}', |
530 |
'view': '#machinesview-icon', |
531 |
'tpl': '#machinesview-icon.standard #machine-container-template', |
532 |
'spinner': '.large-spinner', |
533 |
'vm_spinner': '.machine-container#icon-vm-{0} .state .spinner', |
534 |
'vm_wave': '.machine-container#icon-vm-{0} .wave', |
535 |
'vm_cont_active': '#machinesview-icon.standard .running', |
536 |
'vm_cont_terminated': '#machinesview-icon.standard .terminated' |
537 |
}, |
538 |
|
539 |
reset: function() {}, |
540 |
// overload show function
|
541 |
show_view: function() { |
542 |
$(this.el).show(); |
543 |
this.__update_layout();
|
544 |
}, |
545 |
|
546 |
post_update_vm: function(vm) { |
547 |
}, |
548 |
|
549 |
// identify vm model instance id based on DOM element
|
550 |
vm_id_for_element: function(el) { |
551 |
return el.attr('id').replace("icon-vm-",""); |
552 |
}, |
553 |
|
554 |
// set generic view handlers
|
555 |
set_handlers: function() { |
556 |
}, |
557 |
|
558 |
// stuff to do when a new vm has been created.
|
559 |
// - create vm subviews
|
560 |
post_add: function(vm) { |
561 |
// rename views index
|
562 |
this.rename_views = this.rename_views || {}; |
563 |
this.stats_views = this.stats_views || {}; |
564 |
this.connect_views = this.connect_views || {}; |
565 |
this.tags_views = this.tags_views || {}; |
566 |
this.details_views = this.details_views || {}; |
567 |
this.info_views = this.info_views || {}; |
568 |
this.action_views = this.action_views || {}; |
569 |
|
570 |
this.action_views[vm.id] = new views.VMActionsView(vm, this, this.vm(vm), this.hide_actions); |
571 |
this.rename_views[vm.id] = new views.IconRenameView(vm, this); |
572 |
this.stats_views[vm.id] = new views.VMStatsView(vm, this, {el:'.vm-stats'}); |
573 |
this.connect_views[vm.id] = new views.IconVMConnectView(vm, this); |
574 |
this.tags_views[vm.id] = new views.VMTagsView(vm, this); |
575 |
this.details_views[vm.id] = new views.VMDetailsView(vm, this); |
576 |
this.info_views[vm.id] = new views.IconInfoView(vm, this); |
577 |
}, |
578 |
|
579 |
// vm specific event handlers
|
580 |
set_vm_handlers: function(vm) { |
581 |
var el = this.vm(vm); |
582 |
|
583 |
}, |
584 |
|
585 |
check_terminated_is_empty: function() { |
586 |
// hide/show terminated container
|
587 |
if (this.$(".terminated .machine-container").length == 0) { |
588 |
this.$(".terminated").hide() |
589 |
} else {
|
590 |
this.$(".terminated").show() |
591 |
} |
592 |
|
593 |
$(window).trigger("resize"); |
594 |
}, |
595 |
|
596 |
// generic stuff to do on each view update
|
597 |
// called once after each vm has been updated
|
598 |
update_layout: function() { |
599 |
// TODO: why do we do this ??
|
600 |
if (storage.vms.models.length > 0) { |
601 |
this.$(".running").removeClass("disabled"); |
602 |
} else {
|
603 |
this.$(".running").addClass("disabled"); |
604 |
} |
605 |
|
606 |
this.check_terminated_is_empty();
|
607 |
|
608 |
// FIXME: code from old js api
|
609 |
this.$("div.separator").show(); |
610 |
this.$("div.machine-container:last-child").find("div.separator").hide(); |
611 |
fix_v6_addresses(); |
612 |
}, |
613 |
|
614 |
// update vm details
|
615 |
update_details: function(vm) { |
616 |
var el = this.vm(vm); |
617 |
// truncate name
|
618 |
el.find("span.name").text(util.truncate(vm.get("name"), 40)); |
619 |
// set ips
|
620 |
el.find(".ipv4-text").text(vm.get_addresses().ip4 || "undefined"); |
621 |
// TODO: fix ipv6 truncates and tooltip handler
|
622 |
el.find(".ipv6-text").text(vm.get_addresses().ip6 || "undefined"); |
623 |
// set the state (i18n ??)
|
624 |
el.find(".status").text(STATE_TEXTS[vm.state()]);
|
625 |
// set state class
|
626 |
el.find(".state").removeClass().addClass(views.IconView.STATE_CLASSES[vm.state()].join(" ")); |
627 |
// os icon
|
628 |
el.find(".logo").css({'background-image': "url(" + this.get_vm_icon_path(vm, "medium") + ")"}); |
629 |
|
630 |
el.removeClass("connectable");
|
631 |
if (vm.is_connectable()) {
|
632 |
el.addClass("connectable");
|
633 |
} |
634 |
|
635 |
if (vm.get('status') == 'BUILD') { |
636 |
// update bulding progress
|
637 |
el.find(".machine-ips").hide();
|
638 |
el.find(".build-progress").show().text(vm.get('progress_message')); |
639 |
} else {
|
640 |
// hide building progress
|
641 |
el.find(".machine-ips").show()
|
642 |
el.find(".build-progress").hide();
|
643 |
} |
644 |
|
645 |
if (vm.state() == "DESTROY") { |
646 |
el.find(".machine-ips").hide();
|
647 |
el.find(".build-progress").show().text("Terminating..."); |
648 |
} |
649 |
|
650 |
icon_state = vm.is_active() ? "on" : "off"; |
651 |
set_machine_os_image(el, "icon", icon_state, this.get_vm_icon_os(vm)); |
652 |
|
653 |
// update subviews
|
654 |
this.rename_views[vm.id].update_layout();
|
655 |
this.stats_views[vm.id].update_layout();
|
656 |
this.connect_views[vm.id].update_layout();
|
657 |
this.tags_views[vm.id].update_layout();
|
658 |
this.details_views[vm.id].update_layout();
|
659 |
}, |
660 |
|
661 |
post_remove_vm: function(vm) { |
662 |
this.check_terminated_is_empty();
|
663 |
$(window).trigger("resize"); |
664 |
}, |
665 |
|
666 |
get_vm_icon_os: function(vm) { |
667 |
var os = vm.get_os();
|
668 |
var icons = window.os_icons || views.IconView.VM_OS_ICONS;
|
669 |
|
670 |
if (icons.indexOf(os) == -1) { |
671 |
os = "unknown";
|
672 |
} |
673 |
|
674 |
return os;
|
675 |
}, |
676 |
|
677 |
// TODO: move to views.utils (the method and the VM_OS_ICON vars)
|
678 |
get_vm_icon_path: function(vm, icon_type) { |
679 |
var os = vm.get_os();
|
680 |
var icons = window.os_icons || views.IconView.VM_OS_ICONS;
|
681 |
|
682 |
if (icons.indexOf(os) == -1) { |
683 |
os = "unknown";
|
684 |
} |
685 |
|
686 |
return views.IconView.VM_OS_ICON_TPLS[icon_type].format(os);
|
687 |
} |
688 |
}) |
689 |
|
690 |
views.IconView.VM_OS_ICON_TPLS = { |
691 |
"medium": "/static/icons/machines/medium/{0}-sprite.png" |
692 |
} |
693 |
|
694 |
views.IconView.VM_OS_ICONS = window.os_icons || []; |
695 |
|
696 |
views.IconView.STATE_CLASSES = { |
697 |
'UNKNOWN': ['state', 'error-state'], |
698 |
'BUILD': ['state', 'build-state'], |
699 |
'REBOOT': ['state', 'rebooting-state'], |
700 |
'STOPPED': ['state', 'terminated-state'], |
701 |
'ACTIVE': ['state', 'running-state'], |
702 |
'ERROR': ['state', 'error-state'], |
703 |
'DELETE': ['state', 'destroying-state'], |
704 |
'DESTROY': ['state', 'destroying-state'], |
705 |
'BUILD_INIT': ['state', 'build-state'], |
706 |
'BUILD_COPY': ['state', 'build-state'], |
707 |
'BUILD_FINAL': ['state', 'build-state'], |
708 |
'SHUTDOWN': ['state', 'shutting-state'], |
709 |
'START': ['state', 'starting-state'], |
710 |
'CONNECT': ['state', 'connecting-state'], |
711 |
'DISCONNECT': ['state', 'disconnecting-state'] |
712 |
}; |
713 |
|
714 |
})(this);
|