root / ui / static / snf / js / ui / web / ui_single_view.js @ 1f7ea2f5
History | View | Annotate | Download (11.7 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 |
views.SingleDetailsView = views.VMDetailsView.extend({ |
19 |
|
20 |
view_id: "vm_details_single", |
21 |
el_sel: '.machine-details', |
22 |
|
23 |
selectors: {
|
24 |
'cpu': '.machine-detail.cpus', |
25 |
'ram': '.machine-detail.ram', |
26 |
'disk': '.machine-detail.disk', |
27 |
'image_name': '.machine-detail.image-name', |
28 |
'image_size': '.machine-detail.image-size' |
29 |
} |
30 |
|
31 |
}) |
32 |
|
33 |
// VMs single view
|
34 |
views.SingleView = views.VMListView.extend({ |
35 |
|
36 |
// view id (this could be used to identify
|
37 |
// the view object from global context
|
38 |
view_id: 'vm_single', |
39 |
|
40 |
el: '#machinesview-single', |
41 |
id_tpl: 'single-vm-', |
42 |
link_id_tpl: 'single-vm-at-', |
43 |
|
44 |
hide_actions: false, |
45 |
|
46 |
selectors: {
|
47 |
'vms': '.single-container', |
48 |
'vm': 'div#single-vm-', |
49 |
'view': '#machinesview-single', |
50 |
'tpl': 'div.single-container#machine-container-template', |
51 |
'spinner': '.large-spinner', |
52 |
'vm_spinner': 'div.single-container#single-vm-{0} .state .spinner', |
53 |
'vm_wave': 'div.single-container#single-vm-{0} img.wave', |
54 |
'vm_cont_active': '#machinesview-single', |
55 |
'vm_cont_terminated': '#machinesview-single' |
56 |
}, |
57 |
|
58 |
initialize: function() { |
59 |
this.current_vm = 0; |
60 |
|
61 |
// button selectors
|
62 |
this.prev_button = this.$(".controls .previous"); |
63 |
this.next_button = this.$(".controls .next"); |
64 |
this.menu = $("#single-servers-list"); |
65 |
|
66 |
views.SingleView.__super__.initialize.apply(this, arguments); |
67 |
this.update_current_vm();
|
68 |
}, |
69 |
|
70 |
// overload show function
|
71 |
show: function() { |
72 |
views.SingleView.__super__.show.apply(this, arguments); |
73 |
this.log.debug("showing"); |
74 |
this.$(".column3").show(); |
75 |
this.show_vm_menu();
|
76 |
this.show_current();
|
77 |
}, |
78 |
|
79 |
show_vm: function(vm) { |
80 |
console.log("SHOW", vm.id);
|
81 |
this.current_vm_instance = vm;
|
82 |
this.show_vm_menu();
|
83 |
this.show_current();
|
84 |
this.update_layout();
|
85 |
}, |
86 |
|
87 |
// identify vm model instance id based on DOM element
|
88 |
vm_id_for_element: function(el) { |
89 |
return el.attr('id').replace("single-vm-", ""); |
90 |
}, |
91 |
|
92 |
// set generic view handlers
|
93 |
set_handlers: function() { |
94 |
this.prev_button.click(_.bind(function(ev){ |
95 |
storage.vms.reset_pending_actions(); |
96 |
ev.preventDefault(); |
97 |
this.show_prev();
|
98 |
}, this));
|
99 |
|
100 |
this.next_button.click(_.bind(function(ev){ |
101 |
storage.vms.reset_pending_actions(); |
102 |
ev.preventDefault(); |
103 |
this.show_next();
|
104 |
}, this));
|
105 |
}, |
106 |
|
107 |
update_current_vm: function() { |
108 |
try {
|
109 |
this.current_vm_instance = storage.vms.at(this.current_vm); |
110 |
this.current_vm_instance.start_stats_update(true); |
111 |
storage.vms.stop_stats_update([this.current_vm_instance]);
|
112 |
} catch (err) {
|
113 |
this.log.debug("Cannot select current vm instance for: {0}".format(this.current_vm)); |
114 |
this.current_vm_instance = undefined; |
115 |
this.current_vm = 0; |
116 |
} |
117 |
}, |
118 |
|
119 |
show_next: function() { |
120 |
this.current_vm++;
|
121 |
if (this.current_vm >= storage.vms.models.length) { |
122 |
this.current_vm = 0; |
123 |
} |
124 |
|
125 |
this.update_current_vm();
|
126 |
this.show_current();
|
127 |
this.__update_layout();
|
128 |
}, |
129 |
|
130 |
show_prev: function() { |
131 |
this.current_vm--;
|
132 |
if (this.current_vm < 0) { |
133 |
this.current_vm = storage.vms.length - 1; |
134 |
} |
135 |
this.update_current_vm();
|
136 |
this.show_current();
|
137 |
this.__update_layout();
|
138 |
}, |
139 |
|
140 |
post_remove_vm: function(vm) { |
141 |
// current vm removed or does not exist after an update
|
142 |
this.show_vm_menu();
|
143 |
if (!this.current_vm_instance || this.current_vm_instance.id == vm.id) { |
144 |
this.show_next();
|
145 |
} else {
|
146 |
this.show_current();
|
147 |
} |
148 |
}, |
149 |
|
150 |
// stuff to do when a new vm has been created.
|
151 |
// - create vm subviews
|
152 |
post_add: function(vm) { |
153 |
this.show_vm_menu();
|
154 |
this.show_current();
|
155 |
|
156 |
// rename views index
|
157 |
this.stats_views = this.stats_views || {}; |
158 |
this.connect_views = this.connect_views || {}; |
159 |
this.tags_views = this.tags_views || {}; |
160 |
this.details_views = this.details_views || {}; |
161 |
this.action_views = this.action_views || {}; |
162 |
this.action_error_views = this.action_error_views || {}; |
163 |
|
164 |
//this.stats_views[vm.id] = new views.IconStatsView(vm, this);
|
165 |
|
166 |
// same as icon view
|
167 |
this.action_views[vm.id] = new views.VMActionsView(vm, this, this.vm(vm), this.hide_actions); |
168 |
this.stats_views[vm.id] = new views.VMStatsView(vm, this, {stats_type: 'series'}); |
169 |
this.connect_views[vm.id] = new views.IconVMConnectView(vm, this); |
170 |
this.tags_views[vm.id] = new views.VMTagsView(vm, this, true, 20, 10, 35); |
171 |
this.details_views[vm.id] = new views.SingleDetailsView(vm, this); |
172 |
this.action_error_views[vm.id] = new views.VMActionErrorView(vm, this); |
173 |
|
174 |
if (storage.vms.models.length > 1) { this.vm(vm).hide(); }; |
175 |
}, |
176 |
|
177 |
post_update_vm: function(vm) { |
178 |
}, |
179 |
|
180 |
// vm specific event handlers
|
181 |
set_vm_handlers: function(vm) { |
182 |
var el = this.vm(vm); |
183 |
}, |
184 |
|
185 |
// handle selected vm
|
186 |
show_current: function() { |
187 |
var index = this.current_vm; |
188 |
var vm = storage.vms.at(index);
|
189 |
|
190 |
this.$(".server-name").removeClass("column3-selected"); |
191 |
|
192 |
if (vm) {
|
193 |
this.vm(vm).show();
|
194 |
}; |
195 |
|
196 |
_.each(storage.vms.models, function(vmo){
|
197 |
if (vm && (vm.id != vmo.id)) {
|
198 |
this.vm(vmo).hide();
|
199 |
} |
200 |
}, this)
|
201 |
|
202 |
if (!vm) {
|
203 |
// empty list
|
204 |
this.$(".column3").hide(); |
205 |
return;
|
206 |
} |
207 |
this.$(".column3").show(); |
208 |
|
209 |
|
210 |
$("#" + this.link_id_tpl + this.current_vm).addClass("column3-selected"); |
211 |
try {
|
212 |
this.update_details(vm);
|
213 |
} catch (err) {};
|
214 |
}, |
215 |
|
216 |
show_vm_menu: function() { |
217 |
this.menu.find(".server-name").remove(); |
218 |
|
219 |
_.each(storage.vms.models, function(vm, index) {
|
220 |
this.menu.append('<div class="server-name" id="'+this.link_id_tpl + index +'">' + |
221 |
util.truncate(vm.get("name"),16)+'</div>'); |
222 |
if (this.current_vm_instance && vm.id == this.current_vm_instance.id) { |
223 |
this.current_vm = index;
|
224 |
} |
225 |
}, this);
|
226 |
|
227 |
var self = this; |
228 |
this.menu.find(".server-name").click(function(ev) { |
229 |
ev.preventDefault(); |
230 |
var id = $(this).attr("id").replace("single-vm-at-", ""); |
231 |
self.current_vm = id; |
232 |
self.update_current_vm(); |
233 |
self.show_current(); |
234 |
}) |
235 |
}, |
236 |
|
237 |
// generic stuff to do on each view update
|
238 |
// called once after each vm has been updated
|
239 |
update_layout: function() { |
240 |
this.update_current_vm();
|
241 |
fix_v6_addresses(); |
242 |
}, |
243 |
|
244 |
// update vm details
|
245 |
update_details: function(vm) { |
246 |
var el = this.vm(vm); |
247 |
if (vm != this.current_vm_instance) { return }; |
248 |
|
249 |
// truncate name
|
250 |
el.find(".machine-detail.name").text(util.truncate(vm.get("name"), 35)); |
251 |
// set ips
|
252 |
el.find(".machine-detail.ipv4.ipv4-text").text(vm.get_addresses().ip4 || "not set"); |
253 |
// TODO: fix ipv6 truncates and tooltip handler
|
254 |
el.find(".machine-detail.ipv6.ipv6-text").text(vm.get_addresses().ip6 || "not set"); |
255 |
// set the state (i18n ??)
|
256 |
el.find(".state-label").text(STATE_TEXTS[vm.state()]);
|
257 |
// set state class
|
258 |
el.find(".state").removeClass().addClass(views.SingleView.STATE_CLASSES[vm.state()].join(" ")); |
259 |
// os icon
|
260 |
el.find(".single-image").css({'background-image': "url(" + this.get_vm_icon_path(vm, "medium") + ")"}); |
261 |
|
262 |
el.removeClass("connectable");
|
263 |
if (vm.is_connectable()) {
|
264 |
el.addClass("connectable");
|
265 |
} |
266 |
|
267 |
if (vm.get('status') == 'BUILD') { |
268 |
// update bulding progress
|
269 |
el.find("span.build-progress").show().text(vm.get("progress_message")); |
270 |
} else {
|
271 |
// hide building progress
|
272 |
el.find("span.build-progress").hide();
|
273 |
} |
274 |
|
275 |
if (vm.state() == "DESTROY") { |
276 |
el.find("span.build-progress").show().text("Terminating..."); |
277 |
} |
278 |
|
279 |
icon_state = vm.is_active() ? "on" : "off"; |
280 |
set_machine_os_image(el, "single", icon_state, this.get_vm_icon_os(vm)); |
281 |
|
282 |
// update subviews
|
283 |
this.action_views[vm.id].update_layout();
|
284 |
this.stats_views[vm.id].update_layout();
|
285 |
this.connect_views[vm.id].update_layout();
|
286 |
this.tags_views[vm.id].update_layout();
|
287 |
this.details_views[vm.id].update_layout();
|
288 |
}, |
289 |
|
290 |
get_vm_icon_os: function(vm) { |
291 |
var os = vm.get_os();
|
292 |
var icons = window.os_icons || views.SingleView.VM_OS_ICONS;
|
293 |
if (icons.indexOf(os) == -1) { |
294 |
os = "unknown";
|
295 |
} |
296 |
return os;
|
297 |
}, |
298 |
|
299 |
// TODO: move to views.utils (the method and the VM_OS_ICON vars)
|
300 |
get_vm_icon_path: function(vm, icon_type) { |
301 |
var os = vm.get_os();
|
302 |
var icons = window.os_icons || views.SingleView.VM_OS_ICONS;
|
303 |
|
304 |
if (icons.indexOf(os) == -1) { |
305 |
os = "unknown";
|
306 |
} |
307 |
|
308 |
return views.SingleView.VM_OS_ICON_TPLS[icon_type].format(os);
|
309 |
} |
310 |
}) |
311 |
|
312 |
views.SingleView.VM_OS_ICON_TPLS = { |
313 |
"medium": "/static/icons/machines/large/{0}-sprite.png" |
314 |
} |
315 |
|
316 |
views.SingleView.VM_OS_ICONS = window.os_icons || []; |
317 |
|
318 |
views.SingleView.STATE_CLASSES = { |
319 |
'UNKNOWN': ['state', 'error-state'], |
320 |
'BUILD': ['state', 'build-state'], |
321 |
'REBOOT': ['state', 'rebooting-state'], |
322 |
'STOPPED': ['state', 'terminated-state'], |
323 |
'ACTIVE': ['state', 'running-state'], |
324 |
'ERROR': ['state', 'error-state'], |
325 |
'DELETED': ['state', 'destroying-state'], |
326 |
'DESTROY': ['state', 'destroying-state'], |
327 |
'BUILD_INIT': ['state', 'build-state'], |
328 |
'BUILD_COPY': ['state', 'build-state'], |
329 |
'BUILD_FINAL': ['state', 'build-state'], |
330 |
'SHUTDOWN': ['state', 'shutting-state'], |
331 |
'START': ['state', 'starting-state'], |
332 |
'CONNECT': ['state', 'connecting-state'], |
333 |
'DISCONNECT': ['state', 'disconnecting-state'] |
334 |
}; |
335 |
|
336 |
})(this);
|