Revision 550d9733
b/ui/static/main.css | ||
---|---|---|
1035 | 1035 |
margin: 0; |
1036 | 1036 |
} |
1037 | 1037 |
|
1038 |
div.ip, div.ips {
|
|
1038 |
.icon div.ip, .icon div.ips {
|
|
1039 | 1039 |
font-size: 75%; |
1040 | 1040 |
} |
1041 | 1041 |
|
... | ... | |
4509 | 4509 |
|
4510 | 4510 |
.overlay .header .subtitle img { |
4511 | 4511 |
vertical-align: middle; |
4512 |
margin-left: 5px;
|
|
4512 |
margin-left: 10px;
|
|
4513 | 4513 |
margin-bottom: 2px; |
4514 | 4514 |
} |
4515 | 4515 |
|
4516 |
.overlay-info .content { |
|
4517 |
background-repeat: no-repeat; |
|
4518 |
background-position: 110% 110%; |
|
4519 |
background-color: rgba(255,255,255,0.6) |
|
4520 |
} |
|
4521 |
|
|
4516 | 4522 |
.overlay-info .header { |
4517 | 4523 |
background-color: #4085A5; |
4518 | 4524 |
} |
... | ... | |
4769 | 4775 |
color: #fff; |
4770 | 4776 |
} |
4771 | 4777 |
|
4778 |
#createvm-overlay-content { |
|
4779 |
padding: 0; |
|
4780 |
} |
|
4781 |
|
|
4782 |
.create-vm .header-step.current { |
|
4783 |
font-weight: bold; |
|
4784 |
} |
|
4785 |
|
|
4786 |
.create-vm .create-step-cont { |
|
4787 |
margin: 20px; |
|
4788 |
min-height: 240px; |
|
4789 |
} |
|
4790 |
.create-vm .create-controls { |
|
4791 |
padding: 10px; |
|
4792 |
} |
|
4793 |
|
|
4794 |
.create-vm ul li { |
|
4795 |
cursor: pointer; |
|
4796 |
padding: 4px; |
|
4797 |
} |
|
4798 |
|
|
4799 |
.create-vm ul li.selected { |
|
4800 |
background-color: #aaa; |
|
4801 |
} |
|
4772 | 4802 |
|
4773 | 4803 |
.cont-toggler { |
4774 | 4804 |
background-image: url("./down-arrow.png"); |
... | ... | |
5323 | 5353 |
.create-vm .meta input { |
5324 | 5354 |
font-size: 0.8em; |
5325 | 5355 |
} |
5356 |
|
|
5357 |
.vm-connect .connect-cont { |
|
5358 |
margin-bottom: 20px; |
|
5359 |
border-bottom: 1px solid #A1C8DB; |
|
5360 |
padding-bottom: 20px; |
|
5361 |
} |
b/ui/static/snf/js/ui/web/ui_connect_view.js | ||
---|---|---|
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 |
|
|
19 |
views.VMConnectView = views.VMOverlay.extend({ |
|
20 |
|
|
21 |
view_id: "connect_view", |
|
22 |
content_selector: "#vm-connect-overlay-content", |
|
23 |
css_class: 'overlay-vmconnect overlay-info', |
|
24 |
overlay_id: "vmconnect-overlay", |
|
25 |
|
|
26 |
subtitle: "", |
|
27 |
title: "Connect to machine", |
|
28 |
|
|
29 |
initialize: function(options) { |
|
30 |
views.VMConnectView.__super__.initialize.apply(this); |
|
31 |
}, |
|
32 |
|
|
33 |
handle_vm_change: function(vm) { |
|
34 |
if (this.vm.state() == "DESTROY") { |
|
35 |
this.hide(); |
|
36 |
} |
|
37 |
this._update_vm_details(); |
|
38 |
}, |
|
39 |
|
|
40 |
update_vm_details: function() { |
|
41 |
} |
|
42 |
|
|
43 |
}); |
|
44 |
|
|
45 |
})(this); |
b/ui/static/snf/js/ui/web/ui_icon_view.js | ||
---|---|---|
170 | 170 |
}); |
171 | 171 |
|
172 | 172 |
// VM connect interaction view |
173 |
views.VMConnectView = views.View.extend({ |
|
173 |
views.IconVMConnectView = views.View.extend({
|
|
174 | 174 |
|
175 | 175 |
initialize: function(vm, view) { |
176 | 176 |
// parent view (single, icon, list) |
... | ... | |
178 | 178 |
this.vm = vm; |
179 | 179 |
this.el = view.vm(vm); |
180 | 180 |
this.set_handlers(); |
181 |
views.VMConnectView.__super__.initialize.call(this); |
|
181 |
views.IconVMConnectView.__super__.initialize.call(this);
|
|
182 | 182 |
}, |
183 | 183 |
|
184 | 184 |
// set the appropriate handlers |
... | ... | |
190 | 190 |
// element that triggers the connect handler |
191 | 191 |
var connect = el.find("div.connect-arrow, .logo"); |
192 | 192 |
// connect status handler |
193 |
var handler = _.bind(this.connect_handler, {vm:vm, el:el}); |
|
193 |
var handler = _.bind(this.connect_handler, {vm:vm, el:el, view:this.parent});
|
|
194 | 194 |
$(connect).bind({'mouseover': handler, 'mouseleave': handler, |
195 |
'mousedown': handler, 'mouseup': handler}); |
|
195 |
'mousedown': handler, 'mouseup': handler, |
|
196 |
'click': handler }); |
|
196 | 197 |
|
197 | 198 |
// setup connect arrow display handlers |
198 | 199 |
// while hovering vm container |
... | ... | |
247 | 248 |
logo.addClass('single-image-state2'); |
248 | 249 |
break; |
249 | 250 |
|
250 |
case "mouseclick": |
|
251 |
logo.addCLass('single-image-state4'); |
|
251 |
case "click": |
|
252 |
//logo.addCLass('single-image-state4'); |
|
253 |
this.view.connect_to_console(vm); |
|
254 |
//this.view.connect_overlay.show(this.vm); |
|
252 | 255 |
break; |
253 | 256 |
|
254 | 257 |
default: |
... | ... | |
567 | 570 |
this.action_views[vm.id] = new views.VMActionsView(vm, this, this.vm(vm), this.hide_actions); |
568 | 571 |
this.rename_views[vm.id] = new views.IconRenameView(vm, this); |
569 | 572 |
this.stats_views[vm.id] = new views.VMStatsView(vm, this, {el:'.vm-stats'}); |
570 |
this.connect_views[vm.id] = new views.VMConnectView(vm, this); |
|
573 |
this.connect_views[vm.id] = new views.IconVMConnectView(vm, this);
|
|
571 | 574 |
this.tags_views[vm.id] = new views.VMTagsView(vm, this); |
572 | 575 |
this.details_views[vm.id] = new views.VMDetailsView(vm, this); |
573 | 576 |
this.info_views[vm.id] = new views.IconInfoView(vm, this); |
b/ui/static/snf/js/ui/web/ui_single_view.js | ||
---|---|---|
151 | 151 |
// same as icon view |
152 | 152 |
this.action_views[vm.id] = new views.VMActionsView(vm, this, this.vm(vm), this.hide_actions); |
153 | 153 |
this.stats_views[vm.id] = new views.VMStatsView(vm, this, {stats_type: 'series'}); |
154 |
this.connect_views[vm.id] = new views.VMConnectView(vm, this); |
|
154 |
this.connect_views[vm.id] = new views.IconVMConnectView(vm, this);
|
|
155 | 155 |
this.tags_views[vm.id] = new views.VMTagsView(vm, this, true, 20, 10, 35); |
156 | 156 |
this.details_views[vm.id] = new views.SingleDetailsView(vm, this); |
157 | 157 |
}, |
b/ui/static/snf/js/ui/web/ui_vms_base_view.js | ||
---|---|---|
36 | 36 |
this.set_storage_handlers(); |
37 | 37 |
this.set_handlers(); |
38 | 38 |
this.vms_updated_handler(); |
39 |
|
|
40 |
this.connect_overlay = new views.VMConnectView(); |
|
39 | 41 |
}, |
40 | 42 |
|
41 | 43 |
// Helpers |
b/ui/static/snf/js/views.js | ||
---|---|---|
221 | 221 |
} else { |
222 | 222 |
delay = 0; |
223 | 223 |
} |
224 |
|
|
225 | 224 |
window.setTimeout(_.bind(function(){ this.overlay.load() }, this), delay) |
226 | 225 |
return this; |
227 | 226 |
}, |
228 | 227 |
|
229 | 228 |
hide: function() { |
230 |
this.overlay.close(); |
|
229 |
if (!this.overlay.isOpened()) { |
|
230 |
// if its not opened events wont trigger |
|
231 |
this._onClose() |
|
232 |
} else { |
|
233 |
this.overlay.close(); |
|
234 |
} |
|
231 | 235 |
return this; |
232 | 236 |
} |
233 | 237 |
}); |
234 | 238 |
|
239 |
|
|
240 |
// overlay view helper |
|
241 |
views.VMOverlay = views.Overlay.extend({ |
|
242 |
|
|
243 |
initialize: function() { |
|
244 |
views.VMOverlay.__super__.initialize.apply(this); |
|
245 |
this.vm = undefined; |
|
246 |
this.view_id_tpl = this.view_id; |
|
247 |
|
|
248 |
_.bindAll(this, "handle_vm_change", "handle_vm_remove"); |
|
249 |
}, |
|
250 |
|
|
251 |
set_vm: function(vm) { |
|
252 |
if (this.vm) { this.unbind_vm_handlers }; |
|
253 |
this.vm = vm; |
|
254 |
this.view_id = this.view_id + "_" + vm.id; |
|
255 |
this.bind_vm_handlers(); |
|
256 |
}, |
|
257 |
|
|
258 |
bind_vm_handlers: function() { |
|
259 |
this.log.debug("binding handlers"); |
|
260 |
this.vm.bind("change", this.handle_vm_change); |
|
261 |
storage.vms.bind("remove", this.handle_vm_remove); |
|
262 |
}, |
|
263 |
|
|
264 |
unbind_vm_handlers: function() { |
|
265 |
this.log.debug("unbinding handlers", this.vm); |
|
266 |
if (!this.vm) { return }; |
|
267 |
this.vm.unbind("change", this.handle_vm_change); |
|
268 |
storage.vms.unbind("remove", this.handle_vm_remove); |
|
269 |
}, |
|
270 |
|
|
271 |
_update_vm_details: function() { |
|
272 |
if (!this.vm) { console.error("invalid view state"); return } |
|
273 |
this.set_subtitle(this.vm.get("name") + snf.ui.helpers.vm_icon_tag(this.vm, "small")); |
|
274 |
|
|
275 |
var ico_path = snf.ui.helpers.os_icon_path(this.vm.get("OS"), "oslarge"); |
|
276 |
this.$(".content").css({"background-image":"url(" + ico_path +")"}) |
|
277 |
this.update_vm_details() |
|
278 |
}, |
|
279 |
|
|
280 |
update_vm_details: function() {}, |
|
281 |
|
|
282 |
handle_vm_remove: function(vm, collection) { |
|
283 |
if (this.vm && vm.id == this.vm.id) { |
|
284 |
this.hide(); |
|
285 |
} |
|
286 |
}, |
|
287 |
|
|
288 |
handle_vm_change: function(vm) { |
|
289 |
this._update_vm_details(); |
|
290 |
}, |
|
291 |
|
|
292 |
beforeClose: function() { |
|
293 |
this.unbind_vm_handlers(); |
|
294 |
this.vm = undefined; |
|
295 |
}, |
|
296 |
|
|
297 |
show: function(vm) { |
|
298 |
this.set_vm(vm); |
|
299 |
views.VMOverlay.__super__.show.apply(this, arguments); |
|
300 |
this._update_vm_details(); |
|
301 |
} |
|
302 |
|
|
303 |
}); |
|
304 |
|
|
235 | 305 |
})(this); |
b/ui/templates/home.html | ||
---|---|---|
54 | 54 |
<script src="static/snf/js/ui/web/ui_metadata_view.js"></script> |
55 | 55 |
<script src="static/snf/js/ui/web/ui_feedback_view.js"></script> |
56 | 56 |
<script src="static/snf/js/ui/web/ui_create_view.js"></script> |
57 |
<script src="static/snf/js/ui/web/ui_connect_view.js"></script> |
|
57 | 58 |
|
58 | 59 |
<!-- the following views require refactor --> |
59 | 60 |
<!--<script src="static/snf/js/ui/create_view.js"></script>--> |
b/ui/templates/partials/machines.html | ||
---|---|---|
30 | 30 |
|
31 | 31 |
{% include "partials/create_vm.html" %} |
32 | 32 |
{% include "partials/manage_metadata.html" %} |
33 |
{% include "partials/vm_connect.html" %} |
b/ui/templates/partials/vm_connect.html | ||
---|---|---|
1 |
{% load i18n %} |
|
2 |
<div id="vm-connect-overlay-content" class="hidden vm-connect"> |
|
3 |
<div class="connect-cont"> |
|
4 |
<h4>{% trans "Connection details" %}</h4> |
|
5 |
<div class="desc"> |
|
6 |
<p>{% blocktrans %}Blah blah blha lbha blahb glbh{% endblocktrans %}</p> |
|
7 |
</div> |
|
8 |
<div class="ips"> |
|
9 |
<div class="ip-cont"> |
|
10 |
<span class="title">IP v4</span> |
|
11 |
<span class="value ipv4">195.2.2.12</span> |
|
12 |
</div> |
|
13 |
<div class="ip-cont"> |
|
14 |
<span class="title">IP v4</span> |
|
15 |
<span class="value ipv6">2001:db8::a800:ff:fe4e:ccd2</span> |
|
16 |
</div> |
|
17 |
</div> |
|
18 |
</div> |
|
19 |
<div class="connect-cont"> |
|
20 |
<h4>{% trans "Connect using SSH" %}</h4> |
|
21 |
<div class="desc"> |
|
22 |
<p>{% blocktrans %}Blah blah blha lbha blahb glbh{% endblocktrans %}</p> |
|
23 |
</div> |
|
24 |
<div class="ips"> |
|
25 |
<div class="ip-cont"> |
|
26 |
<span class="title">IP v4</span> |
|
27 |
<span class="value ipv4">195.2.2.12</span> |
|
28 |
</div> |
|
29 |
<div class="ip-cont"> |
|
30 |
<span class="title">IP v4</span> |
|
31 |
<span class="value ipv6">2001:db8::a800:ff:fe4e:ccd2</span> |
|
32 |
</div> |
|
33 |
</div> |
|
34 |
</div> |
|
35 |
<div class="connect-cont"> |
|
36 |
<h4>{% trans "Connect with out of bound console" %}</h4> |
|
37 |
<div class="desc"> |
|
38 |
<p>{% blocktrans %}Blah blah blha lbha blahb glbh{% endblocktrans %}</p> |
|
39 |
</div> |
|
40 |
<div class="ips"> |
|
41 |
<div class="ip-cont"> |
|
42 |
<span class="title">IP v4</span> |
|
43 |
<span class="value ipv4">195.2.2.12</span> |
|
44 |
</div> |
|
45 |
<div class="ip-cont"> |
|
46 |
<span class="title">IP v4</span> |
|
47 |
<span class="value ipv6">2001:db8::a800:ff:fe4e:ccd2</span> |
|
48 |
</div> |
|
49 |
</div> |
|
50 |
</div> |
|
51 |
</div> |
Also available in: Unified diff