Revision 198b546d snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_create_view.js
b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_create_view.js | ||
---|---|---|
1 |
// Copyright 2011 GRNET S.A. All rights reserved.
|
|
1 |
// Copyright 2014 GRNET S.A. All rights reserved.
|
|
2 | 2 |
// |
3 | 3 |
// Redistribution and use in source and binary forms, with or |
4 | 4 |
// without modification, are permitted provided that the following |
... | ... | |
49 | 49 |
// shortcuts |
50 | 50 |
var bb = root.Backbone; |
51 | 51 |
|
52 |
var min_vm_quota = { |
|
53 |
'cyclades.vm': 1, |
|
54 |
'cyclades.ram': 1, |
|
55 |
'cyclades.cpu': 1, |
|
56 |
'cyclades.disk': 1 |
|
57 |
}; |
|
58 |
|
|
59 |
views.CreateVMSelectProjectItemView = views.ext.SelectModelView.extend({ |
|
60 |
tpl: '#create-view-select-project-item-tpl', |
|
61 |
can_deselect: false, |
|
62 |
quotas_option_html: function() { |
|
63 |
var data = "("; |
|
64 |
_.each(min_vm_quota, function(val, key) { |
|
65 |
var q = this.model.quotas.get(key); |
|
66 |
if (!q) { return } |
|
67 |
var content = '{0}: {1} '; |
|
68 |
data += content.format(q.get('resource').get('display_name'), |
|
69 |
q.get_readable('available')); |
|
70 |
}, this); |
|
71 |
data = data.substring(0, data.length-2); |
|
72 |
data += ")"; |
|
73 |
return data; |
|
74 |
} |
|
75 |
}); |
|
76 |
|
|
77 |
views.CreateVMSelectProjectView = views.ext.CollectionSelectView.extend({ |
|
78 |
tpl: '#create-view-projects-select-tpl', |
|
79 |
model_view_cls: views.CreateVMSelectProjectItemView, |
|
80 |
|
|
81 |
init: function() { |
|
82 |
this.handle_quota_changed = _.bind(this.handle_quota_changed, this); |
|
83 |
views.CreateVMSelectProjectView.__super__.init.apply(this, arguments); |
|
84 |
}, |
|
85 |
|
|
86 |
handle_quota_changed: function() { |
|
87 |
_.each(this._model_views, function(view) { |
|
88 |
if (!view.model.quotas.can_fit(min_vm_quota)) { |
|
89 |
view.set_disabled(); |
|
90 |
} else { |
|
91 |
view.set_enabled(); |
|
92 |
} |
|
93 |
}, this); |
|
94 |
}, |
|
95 |
|
|
96 |
set_handlers: function() { |
|
97 |
var self = this; |
|
98 |
synnefo.storage.quotas.bind("change", this.handle_quota_changed); |
|
99 |
this.el.bind("change", function() { |
|
100 |
var view = self._model_views[self.list_el.val()]; |
|
101 |
self.deselect_all(); |
|
102 |
view.delegate_checked = false; |
|
103 |
view.select(); |
|
104 |
view.trigger('selected', view); |
|
105 |
}); |
|
106 |
views.CreateVMSelectProjectView.__super__.set_handlers.apply(this, arguments); |
|
107 |
}, |
|
108 |
|
|
109 |
remove_handlers: function() { |
|
110 |
synnefo.storage.quotas.unbind("change", this.handle_quota_changed); |
|
111 |
this.el.unbind("change"); |
|
112 |
views.CreateVMSelectProjectView.__super__.remove_handlers.apply(this, arguments); |
|
113 |
}, |
|
114 |
|
|
115 |
post_show: function() { |
|
116 |
views.CreateVMSelectProjectView.__super__.post_show.apply(this, arguments); |
|
117 |
this.handle_quota_changed(); |
|
118 |
} |
|
119 |
}); |
|
52 | 120 |
|
53 | 121 |
views.VMCreationPasswordView = views.Overlay.extend({ |
54 | 122 |
view_id: "creation_password_view", |
... | ... | |
129 | 197 |
|
130 | 198 |
views.CreateVMStepView.__super__.initialize.apply(this); |
131 | 199 |
}, |
200 |
|
|
201 |
get_project: function() { |
|
202 |
return this.parent.project; |
|
203 |
}, |
|
132 | 204 |
|
133 | 205 |
show: function() { |
134 | 206 |
// show current |
... | ... | |
215 | 287 |
$(".image-warning .confirm").bind('click', function(){ |
216 | 288 |
$(".image-warning").hide(); |
217 | 289 |
$(".create-controls").show(); |
218 |
}) |
|
290 |
if (!self.parent.project) { |
|
291 |
self.parent.set_no_project(); |
|
292 |
} |
|
293 |
}); |
|
219 | 294 |
}, |
220 | 295 |
|
221 | 296 |
update_images: function(images) { |
... | ... | |
479 | 554 |
e.preventDefault(); |
480 | 555 |
e.stopPropagation(); |
481 | 556 |
this.show_image_details(img); |
482 |
}, this)) |
|
557 |
}, this));
|
|
483 | 558 |
}, |
484 | 559 |
|
485 | 560 |
hide_image_details: function() { |
... | ... | |
510 | 585 |
} |
511 | 586 |
} |
512 | 587 |
}); |
513 |
|
|
588 |
|
|
514 | 589 |
views.CreateFlavorSelectView = views.CreateVMStepView.extend({ |
515 | 590 |
step: 2, |
516 | 591 |
initialize: function() { |
517 | 592 |
views.CreateFlavorSelectView.__super__.initialize.apply(this, arguments); |
518 | 593 |
this.parent.bind("image:change", _.bind(this.handle_image_change, this)); |
594 |
this.parent.bind("project:change", _.bind(this.handle_project_change, this)); |
|
519 | 595 |
|
520 | 596 |
this.cpus = this.$(".flavors-cpu-list"); |
521 | 597 |
this.disks = this.$(".flavors-disk-list"); |
... | ... | |
530 | 606 |
}, this)); |
531 | 607 |
|
532 | 608 |
this.predefined = this.$(".predefined-list"); |
609 |
this.projects_list = this.$(".project-select"); |
|
610 |
this.project_select_view = undefined; |
|
611 |
}, |
|
612 |
|
|
613 |
init_subviews: function() { |
|
614 |
if (!this.project_select_view) { |
|
615 |
this.project_select_view = new views.CreateVMSelectProjectView({ |
|
616 |
container: this.projects_list, |
|
617 |
collection: synnefo.storage.projects, |
|
618 |
parent_view: this |
|
619 |
}); |
|
620 |
this.project_select_view.show(true); |
|
621 |
this.project_select_view.bind("change", |
|
622 |
_.bind(this.handle_project_select, |
|
623 |
this)) |
|
624 |
} |
|
625 |
this.project_select_view.set_current(this.parent.project); |
|
626 |
this.handle_project_select(this.parent.project); |
|
627 |
}, |
|
628 |
|
|
629 |
hide_step: function() { |
|
630 |
this.project_select_view && this.project_select_view.hide(true); |
|
631 |
}, |
|
632 |
|
|
633 |
handle_project_select: function(projects) { |
|
634 |
if (!projects.length ) { return } |
|
635 |
var project = projects[0]; |
|
636 |
this.parent.set_project(project); |
|
637 |
}, |
|
638 |
|
|
639 |
handle_project_change: function() { |
|
640 |
if (!this.parent.project) { return } |
|
641 |
this.update_valid_predefined(); |
|
642 |
this.update_flavors_data(); |
|
643 |
this.update_predefined_flavors(); |
|
644 |
this.reset_flavors(); |
|
645 |
this.update_layout(); |
|
646 |
}, |
|
647 |
|
|
648 |
show: function() { |
|
649 |
var args = _.toArray(arguments); |
|
650 |
this.init_subviews(); |
|
651 |
this.project_select_view.show(); |
|
652 |
views.CreateFlavorSelectView.__super__.show.call(this, args); |
|
533 | 653 |
}, |
534 | 654 |
|
535 | 655 |
handle_image_change: function(data) { |
656 |
if (!this.parent.project) { return } |
|
536 | 657 |
this.current_image = data; |
537 | 658 |
this.update_valid_predefined(); |
538 | 659 |
this.current_flavor = undefined; |
... | ... | |
628 | 749 |
} |
629 | 750 |
|
630 | 751 |
// quota check |
631 |
var quotas = synnefo.storage.quotas.get_available_for_vm();
|
|
752 |
var quotas = this.get_project().quotas.get_available_for_vm();
|
|
632 | 753 |
var unavailable_check = |
633 | 754 |
synnefo.storage.flavors.unavailable_values_for_quotas; |
634 | 755 |
var unavailable = unavailable_check(quotas, [existing]); |
... | ... | |
662 | 783 |
}, |
663 | 784 |
|
664 | 785 |
update_flavors_data: function() { |
786 |
if (!this.parent.project) { return } |
|
665 | 787 |
this.flavors = storage.flavors.active(); |
666 | 788 |
this.flavors_data = storage.flavors.get_data(this.flavors); |
667 | 789 |
|
... | ... | |
693 | 815 |
if (this.current_image) { |
694 | 816 |
image_excluded = storage.flavors.unavailable_values_for_image(this.current_image); |
695 | 817 |
} |
696 |
|
|
697 |
var quotas = synnefo.storage.quotas.get_available_for_vm({active: true});
|
|
818 |
|
|
819 |
var quotas = this.get_project().quotas.get_available_for_vm({active: true});
|
|
698 | 820 |
var user_excluded = storage.flavors.unavailable_values_for_quotas(quotas); |
699 | 821 |
|
700 | 822 |
unavailable.disk = user_excluded.disk.concat(image_excluded.disk); |
... | ... | |
947 | 1069 |
|
948 | 1070 |
update_quota_display: function() { |
949 | 1071 |
|
950 |
var quotas = synnefo.storage.quotas;
|
|
1072 |
var quotas = this.get_project().quotas;
|
|
951 | 1073 |
_.each(["disk", "ram", "cpu"], function(type) { |
952 | 1074 |
var active = true; |
953 | 1075 |
var key = 'available'; |
... | ... | |
1204 | 1326 |
var create_view = this.parent; |
1205 | 1327 |
if (!this.networks_view) { |
1206 | 1328 |
this.networks_view = new views.NetworkSelectView({ |
1207 |
container: this.cont |
|
1329 |
container: this.cont, |
|
1330 |
project: this.get_project() |
|
1208 | 1331 |
}); |
1209 | 1332 |
this.networks_view.hide(true); |
1210 | 1333 |
} |
... | ... | |
1612 | 1735 |
|
1613 | 1736 |
this.password_view = new views.VMCreationPasswordView(); |
1614 | 1737 |
|
1738 |
|
|
1615 | 1739 |
this.steps = []; |
1616 | 1740 |
this.steps[1] = new views.CreateImageSelectView(this); |
1617 | 1741 |
this.steps[1].bind("change", _.bind(function(data) {this.trigger("image:change", data)}, this)); |
... | ... | |
1624 | 1748 |
this.cancel_btn = this.$(".create-controls .cancel"); |
1625 | 1749 |
this.next_btn = this.$(".create-controls .next"); |
1626 | 1750 |
this.prev_btn = this.$(".create-controls .prev"); |
1751 |
this.no_project_notice = this.$(".no-project-notice"); |
|
1627 | 1752 |
this.submit_btn = this.$(".create-controls .submit"); |
1628 | 1753 |
|
1629 | 1754 |
this.history = this.$(".steps-history"); |
... | ... | |
1632 | 1757 |
this.init_handlers(); |
1633 | 1758 |
}, |
1634 | 1759 |
|
1760 |
get_available_project: function() { |
|
1761 |
var project = undefined; |
|
1762 |
var user_project = synnefo.storage.projects.get_user_project(); |
|
1763 |
if (user_project && user_project.quotas.can_fit(min_vm_quota)) { |
|
1764 |
project = user_project; |
|
1765 |
} |
|
1766 |
if (!project) { |
|
1767 |
synnefo.storage.projects.each(function(p) { |
|
1768 |
if (p.quotas.can_fit(min_vm_quota)) { |
|
1769 |
project = p; |
|
1770 |
} |
|
1771 |
}, this); |
|
1772 |
} |
|
1773 |
return project; |
|
1774 |
}, |
|
1775 |
|
|
1776 |
set_project: function(project) { |
|
1777 |
var trigger = false; |
|
1778 |
if (project != this.project) { |
|
1779 |
trigger = true; |
|
1780 |
} |
|
1781 |
this.project = project; |
|
1782 |
if (trigger) { this.trigger("project:change", project)} |
|
1783 |
}, |
|
1784 |
|
|
1635 | 1785 |
init_handlers: function() { |
1636 | 1786 |
var self = this; |
1637 | 1787 |
this.next_btn.click(_.bind(function(){ |
... | ... | |
1698 | 1848 |
'fixed_ip': ip.get('floating_ip_address') |
1699 | 1849 |
}); |
1700 | 1850 |
}); |
1701 |
|
|
1851 |
|
|
1702 | 1852 |
_.map(data.networks, function(n) { return n.get('id') }); |
1703 | 1853 |
storage.vms.create(data.name, data.image, data.flavor, |
1704 |
meta, extra, _.bind(function(data){ |
|
1854 |
meta, this.project, extra, |
|
1855 |
_.bind(function(data) { |
|
1705 | 1856 |
_.each(data.addresses, function(ip) { |
1706 | 1857 |
ip.set({'status': 'connecting'}); |
1707 | 1858 |
}); |
... | ... | |
1721 | 1872 |
}, |
1722 | 1873 |
|
1723 | 1874 |
onClose: function() { |
1724 |
this.steps[3].remove(); |
|
1875 |
if (this.steps && this.steps[3]) { |
|
1876 |
this.steps[3].remove(); |
|
1877 |
} |
|
1725 | 1878 |
}, |
1726 | 1879 |
|
1727 | 1880 |
reset: function() { |
... | ... | |
1732 | 1885 |
this.steps[3].reset(); |
1733 | 1886 |
this.steps[4].reset(); |
1734 | 1887 |
|
1735 |
//this.steps[1].show(); |
|
1736 |
//this.steps[2].show(); |
|
1737 |
//this.steps[3].show(); |
|
1738 |
//this.steps[4].show(); |
|
1739 |
|
|
1740 | 1888 |
this.submit_btn.removeClass("in-progress"); |
1741 | 1889 |
}, |
1742 | 1890 |
|
... | ... | |
1744 | 1892 |
}, |
1745 | 1893 |
|
1746 | 1894 |
update_layout: function() { |
1895 |
if (!this.project) { |
|
1896 |
this.set_no_project(); |
|
1897 |
} else { |
|
1898 |
this.unset_no_project(); |
|
1899 |
} |
|
1747 | 1900 |
this.show_step(this.current_step); |
1748 | 1901 |
this.current_view.update_layout(); |
1749 | 1902 |
}, |
1903 |
|
|
1904 |
set_no_project: function() { |
|
1905 |
this.next_btn.hide(); |
|
1906 |
this.no_project_notice.show(); |
|
1907 |
}, |
|
1908 |
|
|
1909 |
unset_no_project: function() { |
|
1910 |
this.next_btn.show(); |
|
1911 |
this.no_project_notice.hide(); |
|
1912 |
}, |
|
1750 | 1913 |
|
1751 | 1914 |
beforeOpen: function() { |
1915 |
this.set_project(this.get_available_project()); |
|
1752 | 1916 |
if (!this.skip_reset_on_next_open) { |
1753 | 1917 |
this.submiting = false; |
1754 | 1918 |
this.reset(); |
Also available in: Unified diff