root / snf-cyclades-app / synnefo / ui / static / snf / js / ui / web / ui_icon_view.js @ 4c69d744
History | View | Annotate | Download (32.8 kB)
1 |
// Copyright 2011 GRNET S.A. All rights reserved.
|
---|---|
2 |
//
|
3 |
// Redistribution and use in source and binary forms, with or
|
4 |
// without modification, are permitted provided that the following
|
5 |
// conditions are met:
|
6 |
//
|
7 |
// 1. Redistributions of source code must retain the above
|
8 |
// copyright notice, this list of conditions and the following
|
9 |
// disclaimer.
|
10 |
//
|
11 |
// 2. Redistributions in binary form must reproduce the above
|
12 |
// copyright notice, this list of conditions and the following
|
13 |
// disclaimer in the documentation and/or other materials
|
14 |
// provided with the distribution.
|
15 |
//
|
16 |
// THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS
|
17 |
// OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
18 |
// WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
19 |
// PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR
|
20 |
// CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
21 |
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
22 |
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
|
23 |
// USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
24 |
// AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
|
25 |
// LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
|
26 |
// ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
27 |
// POSSIBILITY OF SUCH DAMAGE.
|
28 |
//
|
29 |
// The views and conclusions contained in the software and
|
30 |
// documentation are those of the authors and should not be
|
31 |
// interpreted as representing official policies, either expressed
|
32 |
// or implied, of GRNET S.A.
|
33 |
//
|
34 |
|
35 |
;(function(root){
|
36 |
|
37 |
// root
|
38 |
var root = root;
|
39 |
|
40 |
// setup namepsaces
|
41 |
var snf = root.synnefo = root.synnefo || {};
|
42 |
var models = snf.models = snf.models || {}
|
43 |
var storage = snf.storage = snf.storage || {};
|
44 |
var ui = snf.ui = snf.ui || {};
|
45 |
var util = snf.util = snf.util || {};
|
46 |
|
47 |
var views = snf.views = snf.views || {}
|
48 |
|
49 |
// shortcuts
|
50 |
var bb = root.Backbone;
|
51 |
|
52 |
// handle extended info toggler
|
53 |
views.VMActionErrorView = views.View.extend({ |
54 |
|
55 |
initialize: function (vm, view) { |
56 |
this.vm = vm;
|
57 |
this.view = view;
|
58 |
this.vm_view = this.view.vm(vm); |
59 |
|
60 |
this.has_error = false; |
61 |
|
62 |
this.error = this.vm_view.find(".action-error"); |
63 |
this.close = this.vm_view.find(".close-action-error"); |
64 |
this.show_btn = this.vm_view.find(".show-action-error"); |
65 |
|
66 |
this.init_handlers();
|
67 |
this.update_layout();
|
68 |
}, |
69 |
|
70 |
init_handlers: function() { |
71 |
// action call failed notify the user
|
72 |
this.vm.bind("action:fail", _.bind(function(args){ |
73 |
if (this.vm.action_error) { |
74 |
this.has_error = true; |
75 |
var action = "undefined"; |
76 |
try {
|
77 |
action = _.last(args).error_params.extra_details['Action'];
|
78 |
} catch (err) {console.log(err)};
|
79 |
|
80 |
this.error.find(".action").text(action); |
81 |
this.error.show();
|
82 |
} |
83 |
}, this));
|
84 |
|
85 |
// show error overlay
|
86 |
this.show_btn.click(_.bind(function() { |
87 |
if (this.vm.action_error) { |
88 |
this.show_error_overlay(this.vm.action_error); |
89 |
} |
90 |
this.vm.reset_action_error();
|
91 |
}, this));
|
92 |
|
93 |
// user requests to forget about the error
|
94 |
this.close.click(_.bind(_.bind(function() { |
95 |
this.error.hide();
|
96 |
this.vm.reset_action_error();
|
97 |
}, this)));
|
98 |
|
99 |
// hide error message if action fail get reset
|
100 |
this.vm.bind("action:fail:reset", _.bind(function(){ |
101 |
this.error.hide();
|
102 |
}, this));
|
103 |
}, |
104 |
|
105 |
show_error_overlay: function(args) { |
106 |
var args = util.parse_api_error.apply(util, args);
|
107 |
|
108 |
// force logout if UNAUTHORIZED request arrives
|
109 |
if (args.code == 401) { snf.ui.logout(); return }; |
110 |
|
111 |
var error_entry = [args.ns, args.code, args.message, args.type, args.details, args];
|
112 |
ui.main.error_view.show_error.apply(ui.main.error_view, error_entry); |
113 |
}, |
114 |
|
115 |
update_layout: function() { |
116 |
if (this.vm.action_error) { |
117 |
this.error.show();
|
118 |
} |
119 |
} |
120 |
}); |
121 |
|
122 |
// handle extended info toggler
|
123 |
views.IconInfoView = views.View.extend({ |
124 |
|
125 |
initialize: function (vm, view) { |
126 |
this.vm = vm;
|
127 |
this.view = view;
|
128 |
this.vm_view = this.view.vm(vm); |
129 |
|
130 |
this.info_toggle = $(".cont-toggler-wrapper.info .toggler", this.vm_view); |
131 |
this.ips_toggle = $(".cont-toggler-wrapper.ips .toggler", this.vm_view); |
132 |
this.info_el = $("div.info-content.vm-info", this.vm_view); |
133 |
this.ips_el = $("div.info-content.ips", this.vm_view); |
134 |
this.label = $(".label", this.vm_view); |
135 |
|
136 |
this.set_handlers();
|
137 |
}, |
138 |
|
139 |
set_handlers: function() { |
140 |
this.info_toggle.click(_.bind(function(){ |
141 |
this.ips_el.slideUp();
|
142 |
this.ips_toggle.removeClass("open"); |
143 |
|
144 |
this.info_el.slideToggle();
|
145 |
this.view.vm(this.vm).toggleClass("light-background"); |
146 |
|
147 |
if (this.info_toggle.hasClass("open")) { |
148 |
this.info_toggle.removeClass("open"); |
149 |
this.vm.stop_stats_update();
|
150 |
} else {
|
151 |
this.info_toggle.addClass("open"); |
152 |
this.view.details_views[this.vm.id].update_layout(); |
153 |
this.view.tags_views[this.vm.id].update_layout(); |
154 |
this.view.stats_views[this.vm.id].update_layout(); |
155 |
} |
156 |
|
157 |
var self = this; |
158 |
window.setTimeout(function() {$(self.view).trigger("resize")}, 300); |
159 |
}, this));
|
160 |
|
161 |
this.ips_toggle.click(_.bind(function(){ |
162 |
if(this.ips_toggle.parent().hasClass("disabled")) { |
163 |
return;
|
164 |
} |
165 |
this.info_el.slideUp();
|
166 |
this.info_toggle.removeClass("open"); |
167 |
|
168 |
this.ips_el.slideToggle();
|
169 |
this.view.vm(this.vm).toggleClass("light-background"); |
170 |
var self = this; |
171 |
if (this.ips_toggle.hasClass("open")) { |
172 |
this.ips_toggle.removeClass("open"); |
173 |
} else {
|
174 |
this.ips_toggle.addClass("open"); |
175 |
} |
176 |
window.setTimeout(function() {$(self.view).trigger("resize")}, 300); |
177 |
}, this));
|
178 |
|
179 |
this.vm_view.find(".stats-report").click(_.bind(function(e){ |
180 |
e.preventDefault(); |
181 |
snf.ui.main.show_vm_details(this.vm);
|
182 |
}, this)).attr("href", "#machines/single/details/{0}".format(this.vm.id)); |
183 |
} |
184 |
|
185 |
}) |
186 |
|
187 |
// rename handler view
|
188 |
// only icon view contains rename capability
|
189 |
views.IconRenameView = views.View.extend({ |
190 |
|
191 |
initialize: function(vm, view) { |
192 |
this.vm = vm;
|
193 |
this.view = view;
|
194 |
// name container
|
195 |
this.el = $('div#' + this.view.id_tpl + vm.id + " div.name").get(0); |
196 |
// name inline element
|
197 |
this.name = this.$('span.name'); |
198 |
// rename button
|
199 |
this.rename = this.$('span.rename'); |
200 |
// save button
|
201 |
this.save = this.$('.save'); |
202 |
// cancel rename button
|
203 |
this.cancel = this.$('.cancel'); |
204 |
// where to place the input field
|
205 |
this.edit_cont = this.$(".namecontainer"); |
206 |
// buttons container
|
207 |
this.buttons = this.$(".editbuttons"); |
208 |
// current state
|
209 |
this.renaming = false; |
210 |
// init event handlers
|
211 |
this.set_handlers();
|
212 |
// paint
|
213 |
this.update_layout();
|
214 |
views.IconRenameView.__super__.initialize.call(this);
|
215 |
}, |
216 |
|
217 |
// update elements visibility/state
|
218 |
update_layout: function() { |
219 |
// if in renaming state
|
220 |
if (this.renaming) { |
221 |
// if name is hidden we are already in renaming state
|
222 |
// dont do nothing
|
223 |
if (this.name.is(":hidden")){return} |
224 |
|
225 |
// hide name element to make space for the
|
226 |
// text input
|
227 |
this.name.hide();
|
228 |
this.rename.hide();
|
229 |
// show confirm/cancel buttons
|
230 |
this.buttons.show();
|
231 |
// create text element
|
232 |
this.create_input();
|
233 |
} else {
|
234 |
// name is visible not in edit mode
|
235 |
if (this.name.is(":visible")){return} |
236 |
|
237 |
this.name.show();
|
238 |
this.rename.show();
|
239 |
this.buttons.hide();
|
240 |
this.remove_input();
|
241 |
} |
242 |
}, |
243 |
|
244 |
// create rename input field and set appropriate
|
245 |
// event handlers
|
246 |
create_input: function() { |
247 |
var self = this; |
248 |
this.edit_cont.append('<input class="vm-rename nametextbox" type="text" />'); |
249 |
this.$('input').val(this.vm.get('name')); |
250 |
// give edit focus
|
251 |
this.$('input').focus(); |
252 |
// handle enter press
|
253 |
this.$('input').keydown(function(ev){ |
254 |
ev.keyCode = ev.keyCode || ev.which; |
255 |
if (ev.keyCode == 13) { self.submit(); } |
256 |
if (ev.keyCode == 27) { self.renaming = false; self.update_layout(); } |
257 |
}) |
258 |
}, |
259 |
|
260 |
// remove input element
|
261 |
remove_input: function() { |
262 |
this.$('input').remove(); |
263 |
}, |
264 |
|
265 |
// initialize event handlers
|
266 |
set_handlers: function() { |
267 |
var self = this; |
268 |
// start rename when rename button is pressed
|
269 |
this.rename.click(function() { |
270 |
self.renaming = true;
|
271 |
self.update_layout(); |
272 |
}); |
273 |
|
274 |
// double click on name
|
275 |
$(this.el).dblclick(function() { |
276 |
self.renaming = true;
|
277 |
self.update_layout(); |
278 |
}); |
279 |
|
280 |
// cancel rename
|
281 |
this.cancel.click(function() { |
282 |
self.renaming = false;
|
283 |
self.update_layout(); |
284 |
}) |
285 |
|
286 |
// apply the rename
|
287 |
// TODO: check if name is equal than the previous value
|
288 |
this.save.click(function() { |
289 |
self.submit(); |
290 |
}) |
291 |
}, |
292 |
|
293 |
submit: function() { |
294 |
var value = _(self.$('input').val()).trim(); |
295 |
if (value == "") { return }; |
296 |
this.renaming = false; |
297 |
this.vm.rename(self.$('input').val()); |
298 |
this.update_layout();
|
299 |
} |
300 |
}); |
301 |
|
302 |
// VM connect interaction view
|
303 |
views.IconVMConnectView = views.View.extend({ |
304 |
|
305 |
initialize: function(vm, view) { |
306 |
// parent view (single, icon, list)
|
307 |
this.parent = view;
|
308 |
this.vm = vm;
|
309 |
this.el = view.vm(vm);
|
310 |
this.set_handlers();
|
311 |
views.IconVMConnectView.__super__.initialize.call(this);
|
312 |
}, |
313 |
|
314 |
// set the appropriate handlers
|
315 |
set_handlers: function() { |
316 |
// setup connect handler on vm icon interaction
|
317 |
var el = this.el; |
318 |
var vm = this.vm; |
319 |
|
320 |
// element that triggers the connect handler
|
321 |
var connect = el.find("div.connect-arrow, .logo"); |
322 |
// connect status handler
|
323 |
var handler = _.bind(this.connect_handler, {vm:vm, el:el, view:this.parent}); |
324 |
$(connect).bind({'mouseover': handler, 'mouseleave': handler, |
325 |
'mousedown': handler, 'mouseup': handler, |
326 |
'click': handler });
|
327 |
|
328 |
// setup connect arrow display handlers
|
329 |
// while hovering vm container
|
330 |
el.bind("mouseover", function(){ |
331 |
if (vm.is_connectable()) {
|
332 |
el.find(".connect-border").show();
|
333 |
el.find(".connect-arrow").show();
|
334 |
el.find(".logo").css({cursor:"pointer"}); |
335 |
} else {
|
336 |
el.find(".connect-border").hide();
|
337 |
el.find(".connect-arrow").hide();
|
338 |
el.find(".logo").css({cursor: "default"}); |
339 |
} |
340 |
}).bind("mouseleave", function(){ |
341 |
el.find(".connect-border").hide();
|
342 |
el.find(".connect-arrow").hide();
|
343 |
}); |
344 |
}, |
345 |
|
346 |
// connect arrow interaction handlers
|
347 |
// BEWARE, this function has different context
|
348 |
// than the View object itself, see set_vm_handlers
|
349 |
connect_handler: function(event) { |
350 |
// nothing to do if we cannot connect to the vm
|
351 |
if (!this.vm.is_connectable()) {return} |
352 |
|
353 |
var logo = this.el.find(".logo"); |
354 |
var arrow = this.el.find(".connect-arrow"); |
355 |
var border = this.el.find(".connect-border"); |
356 |
|
357 |
// clear icon states
|
358 |
logo.removeClass('single-image-state1 single-image-state2 single-image-state3 single-image-state4');
|
359 |
|
360 |
// append the appropriate state class
|
361 |
switch (event.type) {
|
362 |
case "mouseover": |
363 |
logo.addClass('single-image-state4');
|
364 |
arrow.addClass('border-hover');
|
365 |
break;
|
366 |
|
367 |
case "mouseleave": |
368 |
logo.addClass('single-image-state1');
|
369 |
arrow.removeClass('border-hover');
|
370 |
break;
|
371 |
|
372 |
case "mouseup": |
373 |
logo.addClass('single-image-state4');
|
374 |
//this.view.connect_overlay.show(this.vm);
|
375 |
break;
|
376 |
|
377 |
case "mousedown": |
378 |
logo.addClass('single-image-state2');
|
379 |
break;
|
380 |
|
381 |
case "click": |
382 |
//logo.addCLass('single-image-state4');
|
383 |
//this.view.connect_to_console(vm);
|
384 |
this.view.connect_overlay.show(this.vm); |
385 |
break;
|
386 |
|
387 |
default:
|
388 |
; |
389 |
} |
390 |
}, |
391 |
|
392 |
update_layout: function() { |
393 |
} |
394 |
|
395 |
}); |
396 |
|
397 |
// vm metadata subview for icon and single view
|
398 |
views.VMTagsView = views.View.extend({ |
399 |
view_id: 'vm_tags', |
400 |
// metadata container selector
|
401 |
el_sel: '.vm-metadata', |
402 |
// metadata row template
|
403 |
tag_tpl: '<span class="tag-item"><span class="key">{0}</span><span class="value">{1}</span></span>', |
404 |
// how many tags to show
|
405 |
tag_limit: 4, |
406 |
// truncate options (because container has different size on icon/single views)
|
407 |
tag_key_truncate: 7, |
408 |
tag_value_truncate: 15, |
409 |
|
410 |
initialize: function(vm, view, toggle, limit, tag_key_truncate, tag_value_truncate) { |
411 |
this.tag_limit = limit || this.tag_limit; |
412 |
|
413 |
this.tag_key_truncate = tag_key_truncate || this.tag_key_truncate; |
414 |
this.tag_value_truncate = tag_value_truncate || this.tag_value_truncate; |
415 |
|
416 |
// does the view toggles the metadata container (single view)
|
417 |
this.toggle = toggle || false; |
418 |
// parent view
|
419 |
this.parent = view;
|
420 |
this.vm = vm;
|
421 |
this.el = this.parent.vm(vm); |
422 |
this.view_id = this.view_id + "_" + vm.id; |
423 |
|
424 |
// link to raise the metadata manager overlay
|
425 |
this.link = this.$('a.manage-metadata'); |
426 |
|
427 |
views.VMTagsView.__super__.initialize.call(this);
|
428 |
this.set_handlers();
|
429 |
this.update_layout();
|
430 |
}, |
431 |
|
432 |
// set the appropriate handlers
|
433 |
set_handlers: function() { |
434 |
var self = this; |
435 |
// show the metadata editor overlay
|
436 |
this.link.click(_.bind(function(ev) { |
437 |
ev.preventDefault(); |
438 |
this.parent.metadata_view.show(this.vm); |
439 |
}, this));
|
440 |
|
441 |
// tags/ips have show/hide control ? bind events for them
|
442 |
var self = this; |
443 |
if (this.toggle) { |
444 |
$(this.el).find(".tags-header").click(_.bind(function(){ |
445 |
$(self.el).find(".tags-content").slideToggle(600); |
446 |
var details_toggler = $(this.el).find(".tags-header " + |
447 |
".cont-toggler");
|
448 |
if (details_toggler.hasClass("open")) { |
449 |
details_toggler.removeClass("open");
|
450 |
} else {
|
451 |
details_toggler.addClass("open");
|
452 |
} |
453 |
}, this));
|
454 |
$(this.el).find(".tags-header").find(".toggler").removeClass("open"); |
455 |
$(self.el).find(".tags-content").hide(); |
456 |
} |
457 |
}, |
458 |
|
459 |
// update metadata container and data
|
460 |
update_layout: function() { |
461 |
|
462 |
// api metadata object
|
463 |
var meta = this.vm.get('metadata'); |
464 |
|
465 |
var i = 0; |
466 |
var cont = $(this.el).find(".items"); |
467 |
|
468 |
// clear existing items
|
469 |
cont.find(".tag-item").remove();
|
470 |
|
471 |
// create tag elements
|
472 |
_.each(meta, function(value, key){
|
473 |
// respect the limit
|
474 |
if (i > this.tag_limit) { |
475 |
return;
|
476 |
} |
477 |
|
478 |
// create element
|
479 |
var new_el = $(this.tag_tpl.format(util.truncate(key, this.tag_key_truncate), |
480 |
util.truncate(": " + _.escape(value), this.tag_value_truncate))); |
481 |
|
482 |
// add title attributes, improve accesibility
|
483 |
// truncated values
|
484 |
new_el.find("span.key").attr("title", key); |
485 |
new_el.find("span.value").attr("title", _.escape(value)); |
486 |
|
487 |
cont.append(new_el); |
488 |
}, this);
|
489 |
} |
490 |
}); |
491 |
|
492 |
|
493 |
// stats subview for single/icon views
|
494 |
views.VMStatsView = views.View.extend({ |
495 |
|
496 |
initialize: function(vm, view, options) { |
497 |
if (!options) {options = {}};
|
498 |
this.vm = vm;
|
499 |
this.parent = view;
|
500 |
this.sel = options.el || this.el_sel || ".lower"; |
501 |
this.el = this.parent.vm(vm).find(this.sel); |
502 |
this.selected_stats_period = 'hourly'; |
503 |
|
504 |
// elements shortcuts
|
505 |
this.cpu_loading = this.el.find(".cpu-graph .stat-busy"); |
506 |
this.cpu_error = this.el.find(".cpu-graph .stat-error"); |
507 |
this.cpu_img = this.el.find(".cpu-graph .stat-img"); |
508 |
this.net_loading = this.el.find(".network-graph .stat-busy"); |
509 |
this.net_error = this.el.find(".network-graph .stat-error"); |
510 |
this.net_img = this.el.find(".network-graph .stat-img"); |
511 |
|
512 |
this.loading = this.el.find(".stat-busy"); |
513 |
this.error = this.el.find(".stat-error"); |
514 |
this.img = this.el.find(".stat-img"); |
515 |
this.stats_period_options = this.el.find(".stats-select-option"); |
516 |
|
517 |
|
518 |
// handle stats period option select
|
519 |
var self = this; |
520 |
this.stats_period_options.click(function(){ |
521 |
// skip if current selection is clicked
|
522 |
if ($(this).filter(".stats-" + self.selected_stats_period).length) { |
523 |
return
|
524 |
} else {
|
525 |
// identify class
|
526 |
var cls = $(this).attr("class"); |
527 |
regex = /.*\sstats-(\w+)/;
|
528 |
self.set_stats_period(cls.match(regex)[1]);
|
529 |
} |
530 |
}); |
531 |
|
532 |
// initial state paremeters
|
533 |
this.stats = this.vm.get("stats"); |
534 |
|
535 |
// timeseries or bar images ?
|
536 |
this.stats_type = options.stats_type || "bar"; |
537 |
|
538 |
views.VMStatsView.__super__.initialize.apply(this, arguments); |
539 |
this.set_handlers();
|
540 |
this.update_layout();
|
541 |
|
542 |
this.net_loading.show();
|
543 |
this.net_error.hide();
|
544 |
this.cpu_loading.show();
|
545 |
this.cpu_error.hide();
|
546 |
|
547 |
this.net_img.hide();
|
548 |
this.cpu_img.hide();
|
549 |
|
550 |
if (!window.t) {
|
551 |
window.t = []; |
552 |
} |
553 |
if (this.parent.menu) { |
554 |
window.t[window.t.length] = this;
|
555 |
} |
556 |
}, |
557 |
|
558 |
|
559 |
set_stats_period: function(period) { |
560 |
this.selected_stats_period = period;
|
561 |
this.update_layout();
|
562 |
}, |
563 |
|
564 |
set_handlers: function() { |
565 |
// update view state when vm stats update gets triggered
|
566 |
this.vm.bind("stats:update", _.bind(function(){ |
567 |
// update the layout
|
568 |
this.update_layout();
|
569 |
}, this));
|
570 |
}, |
571 |
|
572 |
get_images: function (type, period) { |
573 |
var period = period || 'hourly'; |
574 |
var images;
|
575 |
|
576 |
if (type == 'bar') { |
577 |
images = {'cpu': this.stats.cpuBar, 'net': this.stats.netBar }; |
578 |
} else {
|
579 |
images = {'cpu': this.stats.cpuTimeSeries, |
580 |
'net': this.stats.netTimeSeries }; |
581 |
} |
582 |
|
583 |
if (period == 'weekly' && type != 'bar') { |
584 |
if (images.cpu)
|
585 |
images.cpu = images.cpu.replace('cpu-ts', 'cpu-ts-w') |
586 |
if (images.net)
|
587 |
images.net = images.net.replace('net-ts', 'net-ts-w') |
588 |
} |
589 |
return images
|
590 |
}, |
591 |
|
592 |
update_layout: function() { |
593 |
if (!this.vm.stats_available) { |
594 |
this.loading.show();
|
595 |
this.img.hide();
|
596 |
this.error.hide();
|
597 |
} else {
|
598 |
this.loading.hide();
|
599 |
this.stats = this.vm.get("stats"); |
600 |
var images = this.get_images(this.stats_type, |
601 |
this.selected_stats_period)
|
602 |
|
603 |
if (images.cpu) {
|
604 |
this.cpu_img.attr({src:images.cpu}).show(); |
605 |
this.cpu_error.hide();
|
606 |
} else {
|
607 |
this.cpu_img.hide();
|
608 |
this.cpu_error.show();
|
609 |
} |
610 |
|
611 |
if (images.net) {
|
612 |
this.net_img.attr({src:images.net}).show(); |
613 |
this.net_error.hide();
|
614 |
} else {
|
615 |
this.net_img.hide();
|
616 |
this.net_error.show();
|
617 |
} |
618 |
} |
619 |
|
620 |
// update selected stats period
|
621 |
this.stats_period_options.removeClass("selected"); |
622 |
this.stats_period_options.filter(".stats-" + this.selected_stats_period).addClass("selected") |
623 |
|
624 |
$(window).trigger("resize"); |
625 |
} |
626 |
}); |
627 |
|
628 |
views.VMDetailsView = views.View.extend({ |
629 |
view_id: "vm_details", |
630 |
el_sel: '.vm-details', |
631 |
|
632 |
|
633 |
selectors: {
|
634 |
'cpu': '.cpu-data', |
635 |
'ram': '.ram-data', |
636 |
'disk': '.disk-data', |
637 |
'image_name': '.image-data', |
638 |
'image_size': '.image-size-data' |
639 |
}, |
640 |
|
641 |
initialize: function(vm, view) { |
642 |
this.parent = view;
|
643 |
this.vm = vm;
|
644 |
this.el = $(this.parent.vm(vm)).find(this.el_sel).get(0); |
645 |
this.view_id = "vm_{0}_details".format(vm.id); |
646 |
|
647 |
views.VMDetailsView.__super__.initialize.call(this);
|
648 |
|
649 |
this.resize_actions = this.$(".trigger-resize"); |
650 |
this.init_handlers();
|
651 |
this.update_layout();
|
652 |
}, |
653 |
|
654 |
init_handlers: function() { |
655 |
this.resize_actions.bind('click', _.bind(function(e){ |
656 |
if (this.vm.in_error_state()) { return } |
657 |
ui.main.vm_resize_view.show(this.vm);
|
658 |
}, this));
|
659 |
}, |
660 |
|
661 |
update_layout: function() { |
662 |
if (!this.visible() && this.parent.details_hidden) { return }; |
663 |
|
664 |
var image = this.vm.get_image(_.bind(function(image){ |
665 |
this.sel('image_name').text( |
666 |
util.truncate(image.get('name'), 17)).attr("title", |
667 |
image.escape('name'));
|
668 |
this.sel('image_size').text( |
669 |
image.get_readable_size()).attr('title',
|
670 |
image.get_readable_size()); |
671 |
}, this));
|
672 |
|
673 |
var flavor = this.vm.get_flavor(); |
674 |
if (!flavor || !image) {
|
675 |
return;
|
676 |
} |
677 |
|
678 |
|
679 |
this.sel('cpu').text(flavor.get('cpu')); |
680 |
this.sel('ram').text(flavor.get('ram')); |
681 |
this.sel('disk').text(flavor.get('disk')); |
682 |
|
683 |
this.parent.tags_views[this.vm.id].update_layout(); |
684 |
this.parent.stats_views[this.vm.id].update_layout(); |
685 |
|
686 |
if (this.parent.details_hidden) { |
687 |
this.vm.start_stats_update(true); |
688 |
} |
689 |
} |
690 |
}); |
691 |
|
692 |
// VMs icon view
|
693 |
views.IconView = views.VMListView.extend({ |
694 |
|
695 |
// view id (this could be used to identify
|
696 |
// the view object from global context
|
697 |
view_id: 'vm_icon', |
698 |
|
699 |
details_hidden: true, |
700 |
|
701 |
el: '#machinesview-icon', |
702 |
id_tpl: 'icon-vm-', |
703 |
|
704 |
selectors: {
|
705 |
'vms': '.machine-container', |
706 |
'vm': '#icon-vm-', |
707 |
'view': '#machinesview-icon', |
708 |
'tpl': '#machinesview-icon.standard #machine-container-template', |
709 |
'spinner': '.large-spinner', |
710 |
'vm_spinner': '#icon-vm-{0} .state .spinner', |
711 |
'vm_wave': '#icon-vm-{0} .wave', |
712 |
'vm_cont_active': '#machinesview-icon.standard .running', |
713 |
'vm_cont_terminated': '#machinesview-icon.standard .terminated' |
714 |
}, |
715 |
|
716 |
reset: function() {}, |
717 |
// overload show function
|
718 |
show_view: function() { |
719 |
$(this.el).show(); |
720 |
this.__update_layout();
|
721 |
}, |
722 |
|
723 |
post_update_vm: function(vm) { |
724 |
}, |
725 |
|
726 |
// identify vm model instance id based on DOM element
|
727 |
vm_id_for_element: function(el) { |
728 |
return el.attr('id').replace("icon-vm-",""); |
729 |
}, |
730 |
|
731 |
// set generic view handlers
|
732 |
set_handlers: function() { |
733 |
}, |
734 |
|
735 |
// stuff to do when a new vm has been created.
|
736 |
// - create vm subviews
|
737 |
post_add: function(vm) { |
738 |
// rename views index
|
739 |
this.rename_views = this.rename_views || {}; |
740 |
this.stats_views = this.stats_views || {}; |
741 |
this.connect_views = this.connect_views || {}; |
742 |
this.tags_views = this.tags_views || {}; |
743 |
this.details_views = this.details_views || {}; |
744 |
this.info_views = this.info_views || {}; |
745 |
this.action_error_views = this.action_error_views || {}; |
746 |
this.action_views = this.action_views || {}; |
747 |
this.ports_views = this.ports_views || {}; |
748 |
|
749 |
this.action_views[vm.id] = new views.VMActionsView(vm, this, this.vm(vm), this.hide_actions); |
750 |
this.rename_views[vm.id] = new views.IconRenameView(vm, this); |
751 |
this.stats_views[vm.id] = new views.VMStatsView(vm, this, {el:'.vm-stats'}); |
752 |
this.connect_views[vm.id] = new views.IconVMConnectView(vm, this); |
753 |
this.tags_views[vm.id] = new views.VMTagsView(vm, this); |
754 |
this.details_views[vm.id] = new views.VMDetailsView(vm, this); |
755 |
this.action_error_views[vm.id] = new views.VMActionErrorView(vm, this); |
756 |
|
757 |
var ports_container = this.vm(vm).find(".machine-data"); |
758 |
var ports_view = new views.VMPortListView({ |
759 |
collection: vm.ports,
|
760 |
container: ports_container,
|
761 |
parent: this |
762 |
}); |
763 |
this.ports_views[vm.id] = ports_view
|
764 |
ports_view.show(); |
765 |
ports_view.el.hide(); |
766 |
|
767 |
this.info_views[vm.id] = new views.IconInfoView(vm, this); |
768 |
}, |
769 |
|
770 |
// vm specific event handlers
|
771 |
set_vm_handlers: function(vm) { |
772 |
}, |
773 |
|
774 |
check_terminated_is_empty: function() { |
775 |
// hide/show terminated container
|
776 |
if (this.$(".terminated .machine-container").length == 0) { |
777 |
this.$(".terminated").hide() |
778 |
} else {
|
779 |
this.$(".terminated").show() |
780 |
} |
781 |
|
782 |
$(window).trigger("resize"); |
783 |
}, |
784 |
|
785 |
// generic stuff to do on each view update
|
786 |
// called once after each vm has been updated
|
787 |
update_layout: function() { |
788 |
// TODO: why do we do this ??
|
789 |
if (storage.vms.models.length > 0) { |
790 |
this.$(".running").removeClass("disabled"); |
791 |
} else {
|
792 |
this.$(".running").addClass("disabled"); |
793 |
} |
794 |
|
795 |
this.check_terminated_is_empty();
|
796 |
|
797 |
// FIXME: code from old js api
|
798 |
this.$("div.separator").show(); |
799 |
this.$("div.machine-container:last-child").find("div.separator").hide(); |
800 |
fix_v6_addresses(); |
801 |
}, |
802 |
|
803 |
update_status_message: function(vm) { |
804 |
var el = this.vm(vm); |
805 |
var message = vm.get_status_message();
|
806 |
if (message) {
|
807 |
// update bulding progress
|
808 |
el.find("div.machine-ips").hide();
|
809 |
el.find("div.build-progress").show();
|
810 |
el.find("div.build-progress .message").text(util.truncate(message, 42)); |
811 |
|
812 |
if (vm.in_error_state()) {
|
813 |
el.find("div.build-progress .btn").show();
|
814 |
} else {
|
815 |
el.find("div.build-progress .btn").hide();
|
816 |
} |
817 |
} else {
|
818 |
// hide building progress
|
819 |
el.find("div.machine-ips").show()
|
820 |
el.find("div.build-progress").hide();
|
821 |
el.find("div.build-progress .btn").hide();
|
822 |
} |
823 |
}, |
824 |
|
825 |
// update vm details
|
826 |
update_details: function(vm) { |
827 |
var el = this.vm(vm); |
828 |
// truncate name
|
829 |
el.find("span.name").text(util.truncate(vm.get("name"), 40)); |
830 |
|
831 |
el.find('.fqdn').text(vm.get('fqdn') || synnefo.config.no_fqdn_message); |
832 |
el.find("div.status").text(STATE_TEXTS[vm.state()]);
|
833 |
// set state class
|
834 |
el.find("div.state").removeClass().addClass(views.IconView.STATE_CLASSES[vm.state()].join(" ")); |
835 |
// os icon
|
836 |
el.find("div.logo").css({'background-image': "url(" + this.get_vm_icon_path(vm, "medium") + ")"}); |
837 |
|
838 |
el.removeClass("connectable");
|
839 |
if (vm.is_connectable()) {
|
840 |
el.addClass("connectable");
|
841 |
} |
842 |
|
843 |
var status = vm.get("status"); |
844 |
var state = vm.get("state"); |
845 |
|
846 |
this.update_status_message(vm);
|
847 |
|
848 |
icon_state = vm.is_active() ? "on" : "off"; |
849 |
set_machine_os_image(el, "icon", icon_state, this.get_vm_icon_os(vm)); |
850 |
|
851 |
// update subviews
|
852 |
this.rename_views[vm.id].update_layout();
|
853 |
this.connect_views[vm.id].update_layout();
|
854 |
this.details_views[vm.id].update_layout();
|
855 |
}, |
856 |
|
857 |
post_remove_vm: function(vm) { |
858 |
this.check_terminated_is_empty();
|
859 |
$(window).trigger("resize"); |
860 |
}, |
861 |
|
862 |
get_vm_icon_os: function(vm) { |
863 |
var os = vm.get_os();
|
864 |
var icons = window.os_icons || views.IconView.VM_OS_ICONS;
|
865 |
|
866 |
if (icons.indexOf(os) == -1) { |
867 |
os = "unknown";
|
868 |
} |
869 |
|
870 |
return os;
|
871 |
}, |
872 |
|
873 |
// TODO: move to views.utils (the method and the VM_OS_ICON vars)
|
874 |
get_vm_icon_path: function(vm, icon_type) { |
875 |
var os = vm.get_os();
|
876 |
var icons = window.os_icons || views.IconView.VM_OS_ICONS;
|
877 |
|
878 |
if (icons.indexOf(os) == -1) { |
879 |
os = "unknown";
|
880 |
} |
881 |
|
882 |
return views.IconView.VM_OS_ICON_TPLS()[icon_type].format(os);
|
883 |
} |
884 |
}) |
885 |
|
886 |
views.IconView.VM_OS_ICON_TPLS = function() { |
887 |
return {
|
888 |
"medium": snf.config.machines_icons_url + "medium/{0}-sprite.png", |
889 |
"medium2": snf.config.machines_icons_url + "medium/{0}-sprite2.png", |
890 |
} |
891 |
} |
892 |
|
893 |
views.IconView.VM_OS_ICONS = window.os_icons || []; |
894 |
|
895 |
views.IconView.STATE_CLASSES = { |
896 |
'UNKNOWN': ['state', 'error-state'], |
897 |
'BUILD': ['state', 'build-state'], |
898 |
'REBOOT': ['state', 'rebooting-state'], |
899 |
'STOPPED': ['state', 'terminated-state'], |
900 |
'ACTIVE': ['state', 'running-state'], |
901 |
'ERROR': ['state', 'error-state'], |
902 |
'DELETED': ['state', 'destroying-state'], |
903 |
'DESTROY': ['state', 'destroying-state'], |
904 |
'SHUTDOWN': ['state', 'shutting-state'], |
905 |
'START': ['state', 'starting-state'], |
906 |
'CONNECT': ['state', 'connecting-state'], |
907 |
'DISCONNECT': ['state', 'disconnecting-state'], |
908 |
'RESIZE': ['state', 'rebooting-state'] |
909 |
}; |
910 |
|
911 |
})(this);
|