Synnefo

// Copyright 2011 GRNET S.A. All rights reserved.

// 

// Redistribution and use in source and binary forms, with or

// without modification, are permitted provided that the following

// conditions are met:

// 

//   1. Redistributions of source code must retain the above

//      copyright notice, this list of conditions and the following

//      disclaimer.

// 

//   2. Redistributions in binary form must reproduce the above

//      copyright notice, this list of conditions and the following

//      disclaimer in the documentation and/or other materials

//      provided with the distribution.

// 

// THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS

// OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED

// WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

// PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR

// CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF

// USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

// AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT

// LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN

// ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE

// POSSIBILITY OF SUCH DAMAGE.

// 

// The views and conclusions contained in the software and

// documentation are those of the authors and should not be

// interpreted as representing official policies, either expressed

// or implied, of GRNET S.A.

// 

;(function(root){

    // root

    var root = root;

    // setup namepsaces

    var snf = root.synnefo = root.synnefo || {};

    var models = snf.models = snf.models || {}

    var storage = snf.storage = snf.storage || {};

    var ui = snf.ui = snf.ui || {};

    var util = snf.util = snf.util || {};

    var views = snf.views = snf.views || {}

    // shortcuts

    var bb = root.Backbone;

    views.VMCreationPasswordView = views.Overlay.extend({

        view_id: "creation_password_view",

        content_selector: "#creation-password-overlay",

        css_class: 'overlay-password overlay-info',

        overlay_id: "creation-password-overlay",

        subtitle: "",

        title: "Machine password",

        initialize: function(options) {

            views.FeedbackView.__super__.initialize.apply(this, arguments);

            _.bindAll(this, 'show_password');

            this.password = this.$("#new-machine-password");

            this.copy = this.$(".clipboard");

            this.$(".show-machine").click(_.bind(function(){

                if (this.$(".show-machine").hasClass("in-progress")) {

                    return;

                }

                this.hide();

            }, this));

            _.bindAll(this, "handle_vm_added");

            storage.vms.bind("add", this.handle_vm_added);

            this.password.text("");

        },

        handle_vm_added: function() {

            this.$(".show-machine").removeClass("in-progress");

        },

        show_password: function() {

            this.$(".show-machine").addClass("in-progress");

            this.password.text(this.pass);

            if (storage.vms.get(this.vm_id)) {

                this.$(".show-machine").removeClass("in-progress");

            }

            this.clip = new snf.util.ClipHelper(this.copy, this.pass);

        },

        onClose: function() {

            this.password.text("");

            this.vm_id = undefined;

            try { delete this.clip; } catch (err) {};

        },

        beforeOpen: function() {

            this.copy.empty();

        },

        onOpen: function() {

            this.show_password();

        },

        show: function(pass, vm_id) {

            this.pass = pass;

            this.vm_id = vm_id;

            views.VMCreationPasswordView.__super__.show.apply(this, arguments);

        }

    })

    views.CreateVMStepView = views.View.extend({

        step: "1",

        title: "Image",

        submit: false,

        initialize: function(view) {

            this.parent = view;

            this.el = view.$("div.create-step-cont.step-" + this.step);

            this.header = this.$(".step-header .step-" + this.step);

            this.view_id = "create_step_" + this.step;

            views.CreateVMStepView.__super__.initialize.apply(this);

        },

        show: function() {

            // show current

            this.el.show();

            this.header.addClass("current");

            this.header.show();

            this.update_layout();

        },

        reset: function() {

        }

    })

    views.CreateImageSelectView = views.CreateVMStepView.extend({

        initialize: function() {

            views.CreateImageSelectView.__super__.initialize.apply(this, arguments);

            // elements

            this.images_list_cont = this.$(".images-list-cont");

            this.images_list = this.$(".images-list-cont ul");

            this.image_details = this.$(".images-info-cont");

            this.image_details_desc = this.$(".images-info-cont .description p");

            this.image_details_title = this.$(".images-info-cont h4");

            this.image_details_size = this.$(".images-info-cont .size p");

            this.image_details_os = this.$(".images-info-cont .os p");

            this.image_details_kernel = this.$(".images-info-cont .kernel p");

            this.image_details_gui = this.$(".images-info-cont .gui p");

            this.image_details_vm = this.$(".images-info-cont .vm-name p");

            this.categories_list = this.$(".category-filters");

            // params initialization

            this.type_selections = {"system": "System"};

            this.type_selections_order = ['system'];

            this.images_storage = snf.storage.images;

            // apply image service specific image types

            if (this.images_storage.type_selections) {

                this.type_selections = _.extend(

                    this.images_storage.type_selections,

                    this.type_selections)

                this.type_selections_order = this.images_storage.type_selections_order;

            }

            this.selected_type = undefined;

            this.selected_categories = [];

            this.images = [];

            this.images_ids = [];

            this.custom_images = [];

            // handlers initialization

            this.create_types_selection_options();

            this.init_handlers();

            this.init_position();

        },

        init_position: function() {

            //this.el.css({position: "absolute"});

            //this.el.css({top:"10px"})

        },

        init_handlers: function() {

            var self = this;

            this.types.live("click", function() {

                self.select_type($(this).attr("id").replace("type-select-",""));

            });

            this.image_details.find(".hide").click(_.bind(function(){

                this.hide_image_details();

            }, this));

            this.$(".register-custom-image").live("click", function(){

                var confirm_close = true;

                if (confirm_close) {

                    snf.ui.main.custom_images_view.show(self.parent);

                } else {

                }

            })

            $(".image-warning .confirm").bind('click', function(){

                $(".image-warning").hide();

                $(".create-controls").show();

            })

        },

        update_images: function(images) {

            this.images = images;

            this.images_ids = _.map(this.images, function(img){return img.id});

            return this.images;

        },

        create_types_selection_options: function() {

            var list = this.$("ul.type-filter");

            _.each(this.type_selections_order, _.bind(function(key) {

                list.append('<li id="type-select-{0}">{1}</li>'.format(key, this.type_selections[key]));

            }, this));

            this.types = this.$(".type-filter li");

        },

        update_layout: function() {

            if (!this.selected_type) {

                this.selected_type = _.keys(this.type_selections)[0];

            }

            this.select_type(this.selected_type);

        },

        get_categories: function(images) {

            return [];

            return ["Desktop", "Server", "Linux", "Windows"];

        },

        reset_categories: function() {

            var categories = this.get_categories(this.images);

            this.categories_list.find("li").remove();

            _.each(categories, _.bind(function(cat) {

                var el = $("<li />");

                el.text(cat);

                this.categories_list.append(el);

            }, this));

            if (!categories.length) { 

                this.categories_list.parent().find(".clear").hide();

                this.categories_list.parent().find(".empty").show();

            } else {

                this.categories_list.parent().find(".clear").show();

                this.categories_list.parent().find(".empty").hide();

            }

        },

        show_loading_view: function() {

            this.$(".images-list-cont .empty").hide();

            this.images_list.hide();

            this.$(".images-list-cont .loading").show();

            this.$(".images-list-cont .images-list").hide();

            this.reset_categories();

            this.update_images([]);

            this.reset_images();

            this.hide_list_loading();

        },

        hide_loading_view: function(images) {

            this.$(".images-list-cont .loading").hide();

            this.$(".images-list-cont .images-list").show();

            this.reset_categories();

            this.update_images(images);

            this.reset_images();

            this.select_image(this.selected_image);

            this.hide_list_loading();

            $(".custom-image-help").hide();

            if (this.selected_type == 'personal' && !images.length) {

                $(".custom-image-help").show();

            }

        },

        select_type: function(type) {

            this.selected_type = type;

            this.types.removeClass("selected");

            this.types.filter("#type-select-" + this.selected_type).addClass("selected");

            this.images_storage.update_images_for_type(

                this.selected_type, 

                _.bind(this.show_loading_view, this), 

                _.bind(this.hide_loading_view, this)

            );

            this.update_layout_for_type(type);

        },

        update_layout_for_type: function(type) {

            if (type != "system") {

                this.$(".custom-action").hide();

            } else {

                this.$(".custom-action").hide();

            }

        },

        show_list_loading: function() {

            this.$(".images-list-cont").addClass("loading");

        },

        hide_list_loading: function() {

            this.$(".images-list-cont").removeClass("loading");

        },

        display_warning_for_image: function(image) {

          if (image && !image.is_system_image() && !image.owned_by(synnefo.user)) {

            $(".create-vm .image-warning").show();

            $(".create-controls").hide();

          } else {

            $(".create-vm .image-warning").hide();

            $(".create-controls").show();

          }

        },

        select_image: function(image) {

            if (image && image.get('id') && !_.include(this.images_ids, image.get('id'))) {

                image = undefined;

            }

            if (!image && this.images_ids.length) {

                if (this.selected_image && this.images_ids.indexOf(this.selected_image.id) > -1) {

                    image = this.selected_image;

                } else {

                    image = this.images_storage.get(this.images_ids[0]);

                }

            }

            // no images select null image so that next button gets hidden

            if (!this.images_ids.length) { image = undefined };

            if ((!this.selected_image && image) || (this.selected_image != image))

                this.trigger("change", image);

                this.display_warning_for_image(image);

            this.selected_image = image;

            if (image) {

                this.images_list.find(".image-details").removeClass("selected");

                this.images_list.find(".image-details#create-vm-image-" + this.selected_image.id).addClass("selected");

                this.update_image_details(image);

            } else {

            }

            this.image_details.hide();

            this.validate();

        },

        update_image_details: function(image) {

            this.image_details_desc.hide().parent().hide();

            if (image.get_description()) {

                this.image_details_desc.html(image.get_description(false)).show().parent().show();

            }

            var img = snf.ui.helpers.os_icon_tag(image.escape("OS"))

            if (image.get("name")) {

                this.image_details_title.html(img + image.escape("name")).show().parent().show();

            }

            var extra_details = this.image_details.find(".extra-details");

            // clean prevously added extra details

            extra_details.find(".image-detail").remove();

            var skip_keys = ['description', 'sortorder']

            var meta_keys = ['owner', 'OS', 'kernel', 'GUI'];

            var detail_tpl = ('<div class="clearfix image-detail {2}">' +

                             '<span class="title clearfix">{0}' +

                             '<span class="custom">custom</span></span>' +

                             '<p class="value">{1}</p>' + 

                             '</div>');

            meta_keys = _.union(meta_keys, this.images_storage.display_metadata || []);

            var append_metadata_row = function(key, is_extra) {

                var value;

                var method = 'get_' + key.toLowerCase();

                var display_method = 'display_' + key.toLowerCase();

                if (image[display_method]) {

                    value = image[display_method]();

                } else if (image[method]) {

                    value = image[method]();

                } else {

                    value = image.get(key);

                    if (!value) {

                        value = image.get_meta(key);

                    }

                }

                if (!value) { return; }

                var label = this.images_storage.meta_labels[key];

                if (!label) {

                    var label = _(key.replace(/_/g," ")).capitalize();

                }

                var row_cls = key.toLowerCase();

                if (is_extra) { row_cls += " extra-meta" };

                extra_details.append(detail_tpl.format(_.escape(label), value, row_cls));

            }

            _.each(meta_keys, function(key) {

                append_metadata_row.apply(this, [key]);

            }, this);

            if (synnefo.storage.images.display_extra_metadata) {

                _.each(image.get('metadata'), function(value, key) {

                    if (!_.contains(meta_keys, key) && 

                        !_.contains(meta_keys, key.toLowerCase()) &&

                        !_.contains(meta_keys, key.toUpperCase()) &&

                        !_.contains(skip_keys, key)) {

                            append_metadata_row.apply(this, [key, true]);

                    }

                }, this);

            }

        },

        reset_images: function() {

            this.images_list.find("li").remove();

            _.each(this.images, _.bind(function(img){

                this.add_image(img);

            }, this))

            if (this.images.length) {

                this.images_list.parent().find(".empty").hide();

                this.images_list.show();

            } else {

                this.images_list.parent().find(".empty").show();

                this.images_list.hide();

            }

            var self = this;

            this.images_list.find(".image-details").click(function(){

                self.select_image($(this).data("image"));

            });

        },

        show: function() {

            this.image_details.hide();

            this.parent.$(".create-controls").show();

            views.CreateImageSelectView.__super__.show.apply(this, arguments);

        },

        add_image: function(img) {

            var image = $(('<li id="create-vm-image-{1}"' +

                           'class="image-details clearfix">{2}{0}'+

                           '<span class="show-details">details</span>'+

                           '<span class="size"><span class="prepend">by </span>{5}</span>' + 

                           '<span class="owner">' +

                           '<span class="prepend"></span>' +

                           '{3}</span>' + 

                           '<p>{4}</p>' +

                           '</li>').format(img.escape("name"), 

                                                  img.id, 

                                                  snf.ui.helpers.os_icon_tag(img.escape("OS")),

                                                  _.escape(img.get_readable_size()),

                                                  util.truncate(img.get_description(false), 35),

                                                  _.escape(img.display_owner())));

            image.data("image", img);

            image.data("image_id", img.id);

            this.images_list.append(image);

            image.find(".show-details").click(_.bind(function(e){

                e.preventDefault();

                e.stopPropagation();

                this.show_image_details(img);

            }, this))

        },

        hide_image_details: function() {

            this.image_details.fadeOut(200);

            this.parent.$(".create-controls").show();

        },

        show_image_details: function(img) {

            this.parent.$(".create-controls").hide();

            this.update_image_details(img);

            this.image_details.fadeIn(100);

        },

        reset: function() {

            this.selected_image = false;

            this.select_type("system");

        },

        get: function() {

            return {'image': this.selected_image};

        },

        validate: function() {

            if (!this.selected_image) {

                this.parent.$(".form-action.next").hide();

            } else {

                this.parent.$(".form-action.next").show();

            }

        }

    });

    views.CreateFlavorSelectView = views.CreateVMStepView.extend({

        step: 2,

        initialize: function() {

            views.CreateFlavorSelectView.__super__.initialize.apply(this, arguments);

            this.parent.bind("image:change", _.bind(this.handle_image_change, this));

            this.cpus = this.$(".flavors-cpu-list");

            this.disks = this.$(".flavors-disk-list");

            this.disk_templates = this.$(".flavors-disk-template-list");

            this.mems = this.$(".flavors-mem-list");

            this.predefined_flavors = SUGGESTED_FLAVORS;

            this.predefined_flavors_keys = _.keys(SUGGESTED_FLAVORS);

            this.predefined_flavors_keys = _.sortBy(this.predefined_flavors_keys, _.bind(function(k){

                var flv = this.predefined_flavors[k];

                return (flv.ram * flv.cpu * flv.disk);

            }, this));

            this.predefined = this.$(".predefined-list");

        },

        handle_image_change: function(data) {

            this.current_image = data;

            this.update_valid_predefined();

            this.current_flavor = undefined;

            this.update_flavors_data();

            this.update_predefined_flavors();

            this.reset_flavors();

            this.update_layout();

        },

        validate_selected_flavor: function() {

            if (!this.flavor_is_valid(this.current_flavor)) {

                this.select_valid_flavor();

            }

        },

        reset_flavors: function() {

            this.$(".flavor-opts-list .option").remove();

            this.create_flavors();

        },

        update_predefined_flavors: function() {

            this.predefined.find("li").remove();

            _.each(this.predefined_flavors_keys, _.bind(function(key) {

                var val = this.predefined_flavors[key];

                var el = $(('<li class="predefined-selection" id="predefined-flavor-{0}">' +

                           '{1}</li>').format(key, _.escape(_(key).capitalize())));

                this.predefined.append(el);

                el.data({flavor: storage.flavors.get_flavor(val.cpu, val.ram, val.disk, val.disk_template, this.flavors)});

                el.click(_.bind(function() {

                    this.handle_predefined_click(el);

                }, this))

            }, this));

            this.update_valid_predefined();

        },

        handle_predefined_click: function(el) {

            if (el.hasClass("disabled")) { return };

            this.set_current(el.data("flavor"));

        },

        select_valid_flavor: function() {

            var found = false;

            var self = this;

            _.each(["cpu", "mem", "disk"], function(t) {

              var el = $(".flavor-options."+t);

              var all = el.find(".flavor-opts-list li").length;

              var disabled = el.find(".flavor-opts-list li.disabled").length;

              if (disabled >= all) {

                el.find("h4").addClass("error");

              } else {

                el.find("h4").removeClass("error");

              }

            })

            _.each(this.flavors, function(flv) {

                if (self.flavor_is_valid(flv)) {

                    found = flv;

                    return false;

                }

            });

            if (found) {

                this.set_current(found);

            } else {

                this.current_flavor = undefined;

                this.validate();

                this.$("li.predefined-selection").addClass("disabled");

                this.$(".flavor-opts-list li").removeClass("selected");

            }

        },

        update_valid_predefined: function() {

            this.update_unavailable_values();

            var self = this;

            this.valid_predefined = _.select(_.map(this.predefined_flavors, function(flv, key){

                var existing = storage.flavors.get_flavor(flv.cpu, flv.ram, flv.disk, flv.disk_template, self.flavors);

                // non existing

                if (!existing) {

                    return false;

                }

                // not available for image

                if (self.unavailable_values && self.unavailable_values.disk.indexOf(existing.get_disk_size()) > -1) {

                    return false

                }

                return key;

            }), function(ret) { return ret });

            $("li.predefined-selection").addClass("disabled");

            _.each(this.valid_predefined, function(key) {

                $("#predefined-flavor-" + key).removeClass("disabled");

            })

        },

        update_selected_predefined: function() {

            var self = this;

            this.predefined.find("li").removeClass("selected");

            _.each(this.valid_predefined, function(key){

                var flv = self.predefined_flavors[key];

                var exists = storage.flavors.get_flavor(flv.cpu, flv.ram, flv.disk, flv.disk_template, self.flavors);

                if (exists && (exists.id == self.current_flavor.id)) {

                    $("#predefined-flavor-" + key).addClass("selected");

                }

            })

        },

        update_flavors_data: function() {

            this.flavors = storage.flavors.active();

            this.flavors_data = storage.flavors.get_data(this.flavors);

            var self = this;

            var set = false;

            // FIXME: validate current flavor

            if (!this.current_flavor) {

                _.each(this.valid_predefined, function(key) {

                    var flv = self.predefined_flavors[key];

                    var exists = storage.flavors.get_flavor(flv.cpu, flv.ram, flv.disk, flv.disk_template, self.flavors);

                    if (exists && !set) {

                        self.set_current(exists);

                        set = true;

                    }

                })

            }

            this.update_unavailable_values();

        },

        update_unavailable_values: function() {

            var unavailable = {disk:[], ram:[], cpu:[]}

            var user_excluded = {disk:[], ram:[], cpu:[]}

            var image_excluded = {disk:[], ram:[], cpu:[]}

            if (this.current_image) {

              image_excluded = storage.flavors.unavailable_values_for_image(this.current_image);

            }

            var quotas = synnefo.storage.quotas.get_available_for_vm({active: true});

            var user_excluded = storage.flavors.unavailable_values_for_quotas(quotas);

            unavailable.disk = user_excluded.disk.concat(image_excluded.disk);

            unavailable.ram = user_excluded.ram.concat(image_excluded.ram);

            unavailable.cpu = user_excluded.cpu.concat(image_excluded.cpu);

            this.unavailable_values = unavailable;

        },

        flavor_is_valid: function(flv) {

            if (!flv) { return false };

            var existing = storage.flavors.get_flavor(flv.get("cpu"), flv.get("ram"), flv.get("disk"), flv.get("disk_template"), this.flavors);

            if (!existing) { return false };

            if (this.unavailable_values && (this.unavailable_values.disk.indexOf(parseInt(flv.get("disk")) * 1000) > -1)) {

                return false;

            }

            if (this.unavailable_values && (this.unavailable_values.ram.indexOf(parseInt(flv.get("ram"))) > -1)) {

                return false;

            }

            if (this.unavailable_values && (this.unavailable_values.cpu.indexOf(parseInt(flv.get("cpu"))) > -1)) {

                return false;

            }

            return true;

        },

        set_valid_current_for: function(t, val) {

            var found = this.flavors[0];

            _.each(this.flavors, function(flv) {

                if (flv.get(t) == val) {

                    found = flv;

                }

            });

            this.set_current(found);

            this.validate_selected_flavor();

        },

        set_current: function(flv) {

            if (!flv) {

                // user clicked on invalid combination

                // force the first available choice for the

                // type of option he last clicked

                this.set_valid_current_for.apply(this, this.last_choice);

                return;

            }

            this.current_flavor = flv;

            this.trigger("change");

            if (this.current_flavor) {

                this.update_selected_flavor();

                this.update_selected_predefined();

            }

            this.validate();

        },

        select_default_flavor: function() {

        },

        update_selected_from_ui: function() {

            this.set_current(this.ui_selected());

        },

        update_disabled_flavors: function() {

            this.$(".flavor-options.disk li").removeClass("disabled");

            if (!this.unavailable_values) { return }

            this.$("#create-vm-flavor-options .flavor-options.disk li").each(_.bind(function(i, el){

                var el_value = $(el).data("value") * 1000;

                if (this.unavailable_values.disk.indexOf(el_value) > -1) {

                    $(el).addClass("disabled");

                    $(el).removeClass("selected");

                };

            }, this));

            this.$("#create-vm-flavor-options .flavor-options.mem li").each(_.bind(function(i, el){

                var el_value = $(el).data("value");

                if (this.unavailable_values.ram.indexOf(el_value) > -1) {

                    $(el).addClass("disabled");