eole-one-frontend/bugfix/images-tab.js

/* -------------------------------------------------------------------------- */
/* Copyright 2002-2014, OpenNebula Project (OpenNebula.org), C12G Labs        */
/*                                                                            */
/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
/* not use this file except in compliance with the License. You may obtain    */
/* a copy of the License at                                                   */
/*                                                                            */
/* http://www.apache.org/licenses/LICENSE-2.0                                 */
/*                                                                            */
/* Unless required by applicable law or agreed to in writing, software        */
/* distributed under the License is distributed on an "AS IS" BASIS,          */
/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
/* See the License for the specific language governing permissions and        */
/* limitations under the License.                                             */
/* -------------------------------------------------------------------------- */

/*Images tab plugin*/

size_images = 0;

var create_image_tmpl ='<div class="row create_image_header">\
    <div class="large-5 columns">\
      <h3 class="subheader">'+tr("Create Image")+'</h3>'+
    '</div>'+
    '<div class="large-7 columns">'+
      '<dl class="tabs right" data-tab>\
        <dd class="active"><a href="#img_easyTab">'+tr("Wizard")+'</a></dd>\
        <dd><a href="#img_manualTab">'+tr("Advanced mode")+'</a></dd>\
      </dl>\
    </div>\
  </div>\
  <form id="create_image" action="" class="custom creation">\
      <div class="tabs-content">\
        <div id="img_easyTab" class="content active">\
              <div class="row vm_param">\
                <div class="large-12 columns">\
                  <label for="img_name">'+tr("Name")+
                    '<span class="tip">'+tr("Name that the Image will get. Every image must have a unique name.")+'</span>\
                  </label>\
                  <input type="text" name="img_name" id="img_name" />\
                </div>\
              </div>\
              <div class="row">\
                <div class="large-12 columns">\
                  <label for="img_desc">'+tr("Description")+
                    '<span class="tip">'+tr("Human readable description of the image for other users.")+'</span>\
                  </label>\
                  <textarea name="img_desc" id="img_desc" rows="4"></textarea>\
                </div>\
              </div>\
              <div class="row">\
                <div class="large-6 columns">\
                  <label for="img_type">'+tr("Type")+
                    '<span class="tip">'+tr("Type of the image.")+'<br/><br/>'
                      + tr(" OS images contain a working operative system.")+'<br/><br/>'
                      + tr(" CDROM images are readonly data.")+'<br/><br/>'
                      + tr(" DATABLOCK images are a storage for data. They can be created from previous existing data, or as an empty drive.")+
                    '</span>'+
                  '</label>\
                   <select name="img_type" id="img_type">\
                        <option value="OS">'+tr("OS")+'</option>\
                        <option value="CDROM">'+tr("CDROM")+'</option>\
                        <option value="DATABLOCK">'+tr("DATABLOCK")+'</option>\
                   </select>\
                </div>\
                <div class="large-6 columns">\
                  <label for="img_datastore">'+tr("Datastore")+
                    '<span class="tip">'+tr("Select the datastore for this image")+'</span>'+
                  '</label>\
                   <div id="img_datastore" name="img_datastore">\
                   </div>\
                </div>\
                <div class="large-6 columns">\
                  <input type="checkbox" id="img_persistent" name="img_persistent" value="YES" />\
                  <label for="img_persistent">'+tr("Persistent")+
                    '<span class="tip">'+tr("Persistence of the image")+'</span>'+
                  '</label>\
                </div>\
              </div>\
              <br>\
             <fieldset>\
               <legend>'+tr("Image location")+':</legend>\
               <div class="row" id="src_path_select">\
                  <div class="large-12 columns text-center">\
                       <input type="radio" name="src_path" id="path_image" value="path"><label for="path_image">'+ tr("Provide a path")+'</label> \
                       <input type="radio" name="src_path" id="upload_image" value="upload"> <label for="upload_image">'+tr("Upload")+'</label> \
                       <input type="radio" name="src_path" id="datablock_img" value="datablock" disabled> <label for="datablock_img">'+tr("Empty datablock")+'</label> \
                  </div>\
               </div>\
               <br>\
               <div class="img_param row">\
                 <div class="large-12 columns">\
                    <label for="img_path">'+tr("Path")+
                      '<span class="tip">'+tr("Path to the original file that will be copied to the image repository. If not specified for a DATABLOCK type image, an empty image will be created.")+'</span>'+
                    '</label>\
                    <input type="text" name="img_path" id="img_path" />\
                  </div>\
               </div>\
               <div class="row">\
                  <div id="file-uploader" class="large-12 columns text-center">\
                  </div>\
               </div>\
               <div class="img_size row">\
                 <div class="large-6 columns">\
                    <label for="img_size">'+tr("Size")+
                      '<span class="tip">'+tr("Size of the datablock in MB.")+'</span>'+
                    '</label>\
                    <input type="text" name="img_size" id="img_size" />\
                  </div>\
                 <div class="large-6 columns">\
                    <label for="img_fstype">'+tr("FS type")+
                      '<span class="tip">'+tr("Type of file system to be built.")+'<br><br>'
                          + tr(" Plain. When the disk image is used directly by the hypervisor we can format the image, and so it is ready to be used by the guest OS. Values: ext2, ext3, ext4, ntfs, reiserfs, jfs, swap. Any other fs supported by mkfs will work if no special option is needed.")+'<br><br>'
                          + tr(" Formatted. The disk image is stored in a hypervisor specific format VMDK or Qcow2. Then we cannot really make a filesystem on the image, just create the device and let the guest OS format the disk. Use raw to not to format the new image. Values: raw, qcow2, vmdk_*.")+
                      '</span>'+
                    '</label>\
                    <input type="text" name="img_fstype" id="img_fstype" />\
                  </div>\
                </div>\
            </fieldset>\
            <div class="show_hide" id="advanced_image_create">\
                 <h4><small><i class=" fa fa-caret-down"/> '+tr("Advanced options")+'<a id="add_os_boot_opts" class="icon_left" href="#"></a></small></h4>\
            </div>\
            <div class="advanced">\
              <div class="row">\
                <div class="large-6 columns">\
                  <div class="row">\
                    <div class="large-12 columns">\
                      <label for="img_dev_prefix">'+tr("Device prefix")+
                        '<span class="tip">'+tr("Prefix for the emulated device this image will be mounted at. For instance, “hd”, “sd”. If omitted, the default value is the one defined in oned.conf (installation default is “hd”).")+'</span>'+
                      '</label>\
                      <input type="text" name="img_dev_prefix" id="img_dev_prefix" />\
                    </div>\
                  </div>\
                  <div class="row">\
                    <div class="large-12 columns">\
                      <label for="img_driver">'+tr("Driver")+
                        '<span class="tip">'+tr("Specific image mapping driver. KVM: raw, qcow2. XEN: tap:aio, file:")+'</span>'+
                      '</label>\
                      <input type="text" name="img_driver" id="img_driver" />\
                    </div>\
                  </div>\
                </div>\
                <div class="large-6 columns">\
                  <div class="row">\
                    <div class="large-12 columns">\
                      <label for="img_target">'+tr("Target")+
                        '<span class="tip">'+tr("Target on which the image will be mounted at. For example: hda, sdb...")+'</span>'+
                      '</label>\
                      <input type="text" name="img_target" id="img_target" />\
                    </div>\
                  </div>\
                </div>\
              </div>\
              <br>\
              <div class="row">\
                <fieldset>\
                  <legend>' + tr("Custom attributes") + '</legend>\
                   <div class="row">\
                    <div class="large-6 columns">\
                      <div class="row">\
                        <div class="large-12 columns">\
                          <label for="custom_var_image_name">'+tr("Name")+'</label>\
                          <input type="text" id="custom_var_image_name" name="custom_var_image_name" />\
                        </div>\
                      </div>\
                      <div class="row">\
                        <div class="large-12 columns">\
                          <label for="custom_var_image_value">'+tr("Value")+'</label>\
                          <input type="text" id="custom_var_image_value" name="custom_var_image_value" />\
                        </div>\
                      </div>\
                      <div class="row">\
                        <div class="large-12 columns">\
                          <button class="add_remove_button add_button secondary button small radius" id="add_custom_var_image_button" value="add_custom_image_var">\
                           '+tr("Add")+'\
                          </button>\
                          <button class="add_remove_button secondary button small radius" id="remove_custom_var_image_button" value="remove_custom_image_var">\
                           '+tr("Remove selected")+'\
                          </button>\
                        </div>\
                      </div>\
                    </div>\
                    <div class="large-6 columns">\
                      <div class="row">\
                        <div class="eight centered columns">\
                          <select id="custom_var_image_box" name="custom_var_image_box" style="height:180px !important; width:100%" multiple>\
                            <!-- insert leases -->\
                          </select>\
                        </div>\
                      </div>\
                    </div>\
                   </div>\
                </fieldset>\
              </div>\
          </div>\
            <div class="form_buttons">\
              <button class="button success radius right" id="create_image_submit" type="button" value="image/create">'+tr("Create")+'</button>\
              <button id="wizard_image_reset_button"  class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
            </div>\
        </div>\
        <div id="img_manualTab" class="content">\
              <div class="row">\
                 <div class="columns large-12">\
                   <label for="img_datastores_raw">'+tr("Datastore")+':</label>\
                   <div id="img_datastore_raw" name="img_datastore_raw">\
                   </div>\
                 </div>\
              </div>\
              <div class="row">\
                <div class="columns large-12">\
                   <textarea id="template" rows="15" style="height:380px !important; width:100%;"></textarea>\
                </div>\
              </div>\
               <div class="form_buttons">\
                 <button class="button success radius right" id="create_image_submit_manual" value="image/create">'+tr("Create")+'</button>\
                 <button  id="advanced_image_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
               </div>\
          </div>\
        </div>\
        <a class="close-reveal-modal">&#215;</a>\
  </form>\
</div>';

var dataTable_images;
var $create_image_dialog;

var image_actions = {

    "Image.create" : {
        type: "create",
        call: OpenNebula.Image.create,
        callback: function(request, response){
          addImageElement(request, response);
          $create_image_dialog.foundation('reveal', 'close');
          $create_image_dialog.empty();
          setupCreateImageDialog();
          notifyCustom(tr("Image created"), " ID: " + response.IMAGE.ID, false)
        },
        error: onError
    },

    "Image.create_dialog" : {
        type: "custom",
        call: popUpCreateImageDialog
    },

    "Image.list" : {
        type: "list",
        call: OpenNebula.Image.list,
        callback: updateImagesView,
        error: onError
    },

    "Image.show" : {
        type : "single",
        call: OpenNebula.Image.show,
        callback: function(request, response){
            var tab = dataTable_images.parents(".tab");

            if (Sunstone.rightInfoVisible(tab)) {
                // individual view
                updateImageInfo(request, response);
            }

            // datatable row
            updateImageElement(request, response);
        },
        error: onError
    },

    "Image.refresh" : {
        type: "custom",
        call: function () {
          var tab = dataTable_images.parents(".tab");
          if (Sunstone.rightInfoVisible(tab)) {
            Sunstone.runAction("Image.show", Sunstone.rightInfoResourceId(tab))
          } else {
            waitingNodes(dataTable_images);
            Sunstone.runAction("Image.list", {force: true});
          }
        }
    },

    "Image.update_template" : {
        type: "single",
        call: OpenNebula.Image.update,
        callback: function(request) {
            notifyMessage("Template updated correctly");
            Sunstone.runAction('Image.show',request.request.data[0][0]);
        },
        error: onError
    },

    "Image.enable" : {
        type: "multiple",
        call: OpenNebula.Image.enable,
        callback: function (req) {
            Sunstone.runAction("Image.show",req.request.data[0]);
        },
        elements: imageElements,
        error: onError,
        notify: true
    },

    "Image.disable" : {
        type: "multiple",
        call: OpenNebula.Image.disable,
        callback: function (req) {
            Sunstone.runAction("Image.show",req.request.data[0]);
        },
        elements: imageElements,
        error: onError,
        notify: true
    },

    "Image.persistent" : {
        type: "multiple",
        call: OpenNebula.Image.persistent,
        callback: function (req) {
            Sunstone.runAction("Image.show",req.request.data[0]);
        },
        elements: imageElements,
        error: function (req,error_json) {
            Sunstone.runAction("Image.show",req.request.data[0]);
            onError(req,error_json);
        },
        notify: true
    },

    "Image.nonpersistent" : {
        type: "multiple",
        call: OpenNebula.Image.nonpersistent,
        callback: function (req) {
            Sunstone.runAction("Image.show",req.request.data[0]);
        },
        elements: imageElements,
        error: onError,
        notify: true
    },

    "Image.delete" : {
        type: "multiple",
        call: OpenNebula.Image.del,
        callback: deleteImageElement,
        elements: imageElements,
        error: onError,
        notify: true
    },

    "Image.chown" : {
        type: "multiple",
        call: OpenNebula.Image.chown,
        callback:  function (req) {
            Sunstone.runAction("Image.show",req.request.data[0]);
        },
        elements: imageElements,
        error: onError,
        notify: true
    },

    "Image.chgrp" : {
        type: "multiple",
        call: OpenNebula.Image.chgrp,
        callback: function (req) {
            Sunstone.runAction("Image.show",req.request.data[0]);
        },
        elements: imageElements,
        error: onError,
        notify: true
    },

    "Image.chmod" : {
        type: "single",
        call: OpenNebula.Image.chmod,
//        callback
        error: onError,
        notify: true
    },

    "Image.chtype" : {
        type: "single",
        call: OpenNebula.Image.chtype,
        callback: function (req) {
            Sunstone.runAction("Image.show",req.request.data[0][0]);
        },
        elements: imageElements,
        error: onError,
        notify: true
    },
    "Image.clone_dialog" : {
        type: "custom",
        call: popUpImageCloneDialog
    },
    "Image.clone" : {
        type: "single",
        call: OpenNebula.Image.clone,
        error: onError,
        notify: true
    },
    "Image.help" : {
        type: "custom",
        call: function() {
            hideDialog();
            $('div#images_tab div.legend_div').slideToggle();
        }
    },
    "Image.rename" : {
        type: "single",
        call: OpenNebula.Image.rename,
        callback: function(request) {
            notifyMessage(tr("Image renamed correctly"));
            Sunstone.runAction('Image.show',request.request.data[0][0]);
        },
        error: onError,
        notify: true
    },
};


var image_buttons = {
    "Image.refresh" : {
        type: "action",
        layout: "refresh",
        alwaysActive: true
    },
//    "Sunstone.toggle_top" : {
//        type: "custom",
//        layout: "top",
//        alwaysActive: true
//    },
    "Image.create_dialog" : {
        type: "create_dialog",
        layout: "create"
    },
    "Image.chown" : {
        type: "confirm_with_select",
        text: tr("Change owner"),
        layout: "user_select",
        select: "User",
        tip: tr("Select the new owner")+":",
        condition: mustBeAdmin
    },
    "Image.chgrp" : {
        type: "confirm_with_select",
        text: tr("Change group"),
        layout: "user_select",
        select: "Group",
        tip: tr("Select the new group")+":",
        condition: mustBeAdmin
    },
    "Image.enable" : {
        type: "action",
        layout: "more_select",
        text: tr("Enable")
    },
    "Image.disable" : {
        type: "action",
        layout: "more_select",
        text: tr("Disable")
    },
    "Image.persistent" : {
        type: "action",
        layout: "more_select",
        text: tr("Make persistent")
    },
    "Image.nonpersistent" : {
        type: "action",
        layout: "more_select",
        text: tr("Make non persistent")
    },
    "Image.clone_dialog" : {
        type: "action",
        layout: "main",
        text: tr("Clone")
    },
    "Image.delete" : {
        type: "confirm",
        layout: "del",
        text: tr("Delete")
    },
}

var image_info_panel = {
    "image_info_tab" : {
        title: tr("Information"),
        content: ""
    }
}

var images_tab = {
    title: tr("Images"),
    resource: 'Image',
    buttons: image_buttons,
    tabClass: 'subTab',
    parentTab: 'vresources-tab',
    content: '<div class="large-12 columns">\
      <div id="upload_progress_bars"></div>\
    </div>',
    search_input: '<input id="image_search" type="text" placeholder="'+tr("Search")+'" />',
    list_header: '<i class="fa fa-fw fa-upload"></i>&emsp;'+tr("Images"),
    info_header: '<i class="fa fa-fw fa-upload"></i>&emsp;'+tr("Image"),
    subheader: '<span class="total_images"/> <small>'+tr("TOTAL")+'</small>&emsp;\
        <span class="size_images"/> <small>'+tr("USED")+'</small>',
    table: '<table id="datatable_images" class="datatable twelve">\
        <thead>\
          <tr>\
            <th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
            <th>'+tr("ID")+'</th>\
            <th>'+tr("Owner")+'</th>\
            <th>'+tr("Group")+'</th>\
            <th>'+tr("Name")+'</th>\
            <th>'+tr("Datastore")+'</th>\
            <th>'+tr("Size")+'</th>\
            <th>'+tr("Type")+'</th>\
            <th>'+tr("Registration time")+'</th>\
            <th>'+tr("Persistent")+'</th>\
            <th>'+tr("Status")+'</th>\
            <th>'+tr("#VMS")+'</th>\
            <th>'+tr("Target")+'</th>\
          </tr>\
        </thead>\
        <tbody id="tbodyimages">\
        </tbody>\
      </table>'
}

Sunstone.addActions(image_actions);
Sunstone.addMainTab('images-tab',images_tab);
Sunstone.addInfoPanel('image_info_panel',image_info_panel);


function imageElements() {
    return getSelectedNodes(dataTable_images);
}

// Returns an array containing the values of the image_json and ready
// to be inserted in the dataTable
function imageElementArray(image_json){
    //Changing this? It may affect to the is_persistent() functions.
    var image = image_json.IMAGE;

    // KERNEL || RAMDISK || CONTEXT
    if (image.TYPE == "3" ||  image.TYPE == "4" || image.TYPE == "5") {
      return false;
    }

    size_images = size_images + parseInt(image.SIZE);

    //add also persistent/non-persistent selects, type select.
    return [
        '<input class="check_item" type="checkbox" id="image_'+image.ID+'" name="selected_items" value="'+image.ID+'"/>',
        image.ID,
        image.UNAME,
        image.GNAME,
        image.NAME,
        image.DATASTORE,
        image.SIZE,
        OpenNebula.Helper.image_type(image.TYPE),
        pretty_time(image.REGTIME),
        parseInt(image.PERSISTENT) ? "yes" : "no",
        OpenNebula.Helper.resource_state("image",image.STATE),
        image.RUNNING_VMS,
        image.TEMPLATE.TARGET ? image.TEMPLATE.TARGET : '--'
        ];
}

// Callback to update an element in the dataTable
function updateImageElement(request, image_json){
    var id = image_json.IMAGE.ID;
    var element = imageElementArray(image_json);
    updateSingleElement(element,dataTable_images,'#image_'+id);
}

// Callback to remove an element from the dataTable
function deleteImageElement(req){
    deleteElement(dataTable_images,'#image_'+req.request.data);
}

// Callback to add an image element
function addImageElement(request, image_json){
    var element = imageElementArray(image_json);
    addElement(element,dataTable_images);
}

// Callback to refresh the list of images
function updateImagesView(request, images_list){
    var image_list_array = [];

    size_images = 0;

    $.each(images_list,function(){
      var image = imageElementArray(this);
      if (image)
        image_list_array.push(image);
    });

    updateView(image_list_array,dataTable_images);

    var size = humanize_size_from_mb(size_images)

    $(".total_images").text(image_list_array.length);
    $(".size_images").text(size);
}

// Callback to update the information panel tabs and pop it up
function updateImageInfo(request,img){
    var img_info = img.IMAGE;
    var info_tab = {
        title : tr("Info"),
        icon: "fa-info-circle",
        content:
        '<div class="row">\
        <div class="large-6 columns">\
        <table id="info_img_table" class="dataTable extended_table">\
           <thead>\
            <tr><th colspan="3">'+tr("Information")+'</th></tr>\
           </thead>\
           <tr>\
              <td class="key_td">'+tr("ID")+'</td>\
              <td class="value_td">'+img_info.ID+'</td>\
              <td></td>\
           </tr>'+
            insert_rename_tr(
                'images-tab',
                "Image",
                img_info.ID,
                img_info.NAME)+
           '<tr>\
              <td class="key_td">'+tr("Datastore")+'</td>\
              <td class="value_td">'+img_info.DATASTORE+'</td>\
              <td></td>\
           </tr>\
           <tr>\
             <td class="key_td">'+tr("Type")+'</td>\
             <td class="value_td_type">'+OpenNebula.Helper.image_type(img_info.TYPE)+'</td>\
             <td><div id="div_edit_chg_type">\
                   <a id="div_edit_chg_type_link" class="edit_e" href="#"><i class="fa fa-pencil-square-o right"/></a>\
                 </div>\
             </td>\
           </tr>\
           <tr>\
             <td class="key_td">'+tr("Register time")+'</td>\
             <td class="value_td">'+pretty_time(img_info.REGTIME)+'</td>\
              <td></td>\
           </tr>\
           <tr>\
             <td class="key_td">'+tr("Persistent")+'</td>\
             <td class="value_td_persistency">'+(parseInt(img_info.PERSISTENT) ? tr("yes") : tr("no"))+'</td>\
             <td><div id="div_edit_persistency">\
                   <a id="div_edit_persistency_link" class="edit_e" href="#"><i class="fa fa-pencil-square-o right"/></a>\
                 </div>\
             </td>\
           </tr>\
           <tr>\
              <td class="key_td">'+tr("Filesystem type")+'</td>\
              <td class="value_td">'+(typeof img_info.FSTYPE === "string" ? img_info.FSTYPE : "--")+'</td>\
              <td></td>\
           </tr>\
           <tr>\
              <td class="key_td">'+tr("Size")+'</td>\
              <td class="value_td">'+humanize_size_from_mb(img_info.SIZE)+'</td>\
              <td></td>\
           </tr>\
           <tr>\
              <td class="key_td">'+tr("State")+'</td>\
              <td class="value_td">'+OpenNebula.Helper.resource_state("image",img_info.STATE)+'</td>\
              <td></td>\
           </tr>\
           <tr>\
              <td class="key_td">'+tr("Running VMS")+'</td>\
              <td class="value_td">'+img_info.RUNNING_VMS+'</td>\
              <td></td>\
           </tr>\
        </table>\
       </div>\
       <div class="large-6 columns">' +
         insert_permissions_table('images-tab',
                                     "Image",
                                     img_info.ID,
                                     img_info.UNAME,
                                     img_info.GNAME,
                                     img_info.UID,
                                     img_info.GID) +
       '</div>\
     </div>\
     <div class="row">\
          <div class="large-9 columns">'+
               insert_extended_template_table(img_info.TEMPLATE,
                                               "Image",
                                               img_info.ID,
                                               "Attributes") +
       '</div>\
     </div>'
    }

    $("#div_edit_chg_type_link").die();
    $("#chg_type_select").die();
    $("#div_edit_persistency").die();
    $("#persistency_select").die();

    // Listener for edit link for type change
    $("#div_edit_chg_type_link").live("click", function() {
        $(".value_td_type").html(
                  '<select id="chg_type_select">\
                      <option value="OS">OS</option>\
                      <option value="CDROM">CDROM</option>\
                      <option value="DATABLOCK">DATABLOCK</option>\
                  </select>');

        $('#chg_type_select').val(OpenNebula.Helper.image_type(img_info.TYPE));
    });

    $("#chg_type_select").live("change", function() {
        var new_value = $(this).val();

        Sunstone.runAction("Image.chtype", img_info.ID, new_value);
    });

    // Listener for edit link for persistency change
    $("#div_edit_persistency").live("click", function() {
        $(".value_td_persistency").html(
                  '<select id="persistency_select">\
                      <option value="yes">'+tr("yes")+'</option>\
                      <option value="no">'+tr("no")+'</option>\
                  </select>');

        $('#persistency_select').val(parseInt(img_info.PERSISTENT) ? "yes" : "no");
    });

    $("#persistency_select").live("change", function() {
        var new_value = $(this).val();

        if (new_value=="yes")
            Sunstone.runAction("Image.persistent",[img_info.ID]);
        else
            Sunstone.runAction("Image.nonpersistent",[img_info.ID]);

    });


    var vms_info_tab = {
        title: tr("VMs"),
        icon: "fa-cloud",
        content : '<div id="datatable_image_vms_info_div" class="row">\
          <div class="large-12 columns">\
            <table id="datatable_image_vms" class="datatable twelve">\
              <thead>\
                <tr>\
                  <th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
                  <th>'+tr("ID")+'</th>\
                  <th>'+tr("Owner")+'</th>\
                  <th>'+tr("Group")+'</th>\
                  <th>'+tr("Name")+'</th>\
                  <th>'+tr("Status")+'</th>\
                  <th>'+tr("Used CPU")+'</th>\
                  <th>'+tr("Used Memory")+'</th>\
                  <th>'+tr("Host")+'</th>\
                  <th>'+tr("IPs")+'</th>\
                  <th>'+tr("Start Time")+'</th>\
                  <th>'+tr("VNC")+'</th>\
                </tr>\
              </thead>\
              <tbody id="tbody_image_vmachines">\
              </tbody>\
            </table>\
          </div>\
          </div>'
      }

    Sunstone.updateInfoPanelTab("image_info_panel","image_info_tab",info_tab);
    Sunstone.updateInfoPanelTab("image_info_panel","image_vms_tab",vms_info_tab);
    Sunstone.popUpInfoPanel("image_info_panel", "images-tab");


    dataTable_image_vMachines = $("#datatable_image_vms", $("#image_info_panel")).dataTable({
        "bSortClasses" : false,
        "bDeferRender": true,
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": ["check",6,7,11] },
            { "sWidth": "35px", "aTargets": [0] },
            { "bVisible": false, "aTargets": [0]},
            { "bVisible": true, "aTargets": Config.tabTableColumns("vms-tab")},
            { "bVisible": false, "aTargets": ['_all']},
        ]
    });

    infoListener(dataTable_image_vMachines,'VM.show','vms-tab');

    if (img_info.VMS) {
        var vm_ids = img_info.VMS.ID;
        var vm_ids_map = {};

        if (!(vm_ids instanceof Array)) {
            vm_ids = [vm_ids];
        }

        $.each(vm_ids,function(){
            vm_ids_map[this] = true;
        });

        OpenNebula.VM.list({
            timeout: true,
            success: function (request, vm_list){
                var vm_list_array = [];

                $.each(vm_list,function(){
                    if (vm_ids_map[this.VM.ID]){
                        //Grab table data from the vm_list
                        vm_list_array.push(vMachineElementArray(this));
                    }
                });

                updateView(vm_list_array, dataTable_image_vMachines);
            },
            error: onError
        });
    }

    setPermissionsTable(img_info,'');
}

function enable_all_datastores()
{

    $('select#disk_type').children('option').each(function() {
      $(this).removeAttr('disabled');
    });
}

// Prepare the image creation dialog
function setupCreateImageDialog(dialog) {
    if ($('#create_image_dialog').length == 0) {
      dialogs_context.append('<div id="create_image_dialog"></div>');
    }

    $create_image_dialog =  $('#create_image_dialog');

    var dialog = $create_image_dialog;
    dialog.html(create_image_tmpl);

    dialog.addClass("reveal-modal medium").attr("data-reveal", "");

    initialize_create_image_dialog(dialog);
}

function initialize_create_image_dialog(dialog) {
    setupTips(dialog);
    $('.advanced',dialog).hide();

    $('#advanced_image_create',dialog).click(function(){
        $('.advanced',dialog).toggle();
        return false;
    });

    $('select#img_type',dialog).change(function(){
        var value = $(this).val();
        var context = dialog;
        switch (value){
        case "DATABLOCK":
            $('#datablock_img',context).removeAttr("disabled");
            break;
        default:
            $('#datablock_img',context).attr('disabled','disabled');
            $('#path_image',context).click();

        }
    });

    $('#img_path,#img_fstype,#img_size,#file-uploader',dialog).closest('.row').hide();

    $("input[name='src_path']", dialog).change(function(){
        var context = dialog;
        var value = $(this).val();
        switch (value){
        case "path":
            $('#img_fstype,#img_size,#file-uploader',context).closest('.row').hide();
            $('#img_path',context).closest('.row').show();
            break;
        case "datablock":
            $('#img_path,#file-uploader',context).closest('.row').hide();
            $('#img_fstype,#img_size',context).closest('.row').show();
            break;
        case "upload":
            $('#img_path,#img_fstype,#img_size',context).closest('.row').hide();
            $('#file-uploader',context).closest('.row').show();
            break;
        };
    });


    $('#path_image',dialog).click();


    $('#add_custom_var_image_button', dialog).click(
        function(){
            var name = $('#custom_var_image_name',dialog).val();
            var value = $('#custom_var_image_value',dialog).val();
            if (!name.length || !value.length) {
                notifyError(tr("Custom attribute name and value must be filled in"));
                return false;
            }
            option= '<option value=\''+value+'\' name=\''+name+'\'>'+
                name+'='+value+
                '</option>';
            $('select#custom_var_image_box',dialog).append(option);
            return false;
        }
    );

    $('#remove_custom_var_image_button', dialog).click(
        function(){
            $('select#custom_var_image_box :selected',dialog).remove();
            return false;
        }
    );

    $('#upload-progress',dialog).css({
        border: "1px solid #AAAAAA",
        position: "relative",
        width: "258px",
        height: "15px",
        display: "inline-block"
    });
    $('#upload-progress div',dialog).css("border","1px solid #AAAAAA");

    var img_obj;

    // Upload is handled by FileUploader vendor plugin
    var uploader = new qq.FileUploaderBasic({
        button: $('#file-uploader',dialog)[0],
        action: 'upload',
        multiple: false,
        params: {},
        sizeLimit: 0,
        showMessage: function(message){
            //notifyMessage(message);
        },
        onSubmit: function(id, fileName){
            uploader.setParams({
                csrftoken: csrftoken,
                img : JSON.stringify(img_obj),
                file: fileName
            });

            $('#upload_progress_bars').append('<div id="'+id+'progressBar" class="row" style="margin-bottom:10px">\
              <div class="large-2 columns dataTables_info">\
                '+tr("Uploading...")+'\
              </div>\
              <div class="large-10 columns">\
                <div id="upload_progress_container" class="progress nine radius" style="height:25px !important">\
                  <span class="meter" style="width:0%"></span>\
                </div>\
                <div class="progress-text" style="margin-left:15px">'+id+' '+fileName+'</div>\
              </div>\
            </div>');
        },
        onProgress: function(id, fileName, loaded, total){
            $('span.meter', $('#'+id+'progressBar')).css('width', Math.floor(loaded*100/total)+'%')
        },
        onComplete: function(id, fileName, responseJSON){

            if (uploader._handler._xhrs[id] &&
                uploader._handler._xhrs[id].status == 500) {

                onError({}, JSON.parse(uploader._handler._xhrs[id].response) )
                $('#'+id+'progressBar').remove();
            } else {
                notifyMessage("Image uploaded correctly");
                $('#'+id+'progressBar').remove();
                Sunstone.runAction("Image.list");
            }

            return false;
        },
        onCancel: function(id, fileName){
        }
    });

    var file_input = false;
    uploader._button._options.onChange = function(input) {
        file_input = input;  return false;
    };

    $('#create_image_submit',dialog).click(function(){
        $create_image_dialog = dialog;

        var exit = false;
        var upload = false;
        $('.img_man',this).each(function(){
            if (!$('input',this).val().length){
                notifyError(tr("There are mandatory parameters missing"));
                exit = true;
                return false;
            }
        });
        if (exit) { return false; }

        var ds_id = $('#img_datastore .resource_list_select',dialog).val();
        if (!ds_id){
            notifyError(tr("Please select a datastore for this image"));
            return false;
        };

        var img_json = {};

        var name = $('#img_name',dialog).val();
        img_json["NAME"] = name;

        var desc = $('#img_desc',dialog).val();
        if (desc.length){
            img_json["DESCRIPTION"] = desc;
        }

        var type = $('#img_type',dialog).val();
        img_json["TYPE"]= type;

        img_json["PERSISTENT"] = $('#img_persistent:checked',dialog).length ? "YES" : "NO";

        var dev_prefix = $('#img_dev_prefix',dialog).val();
        if (dev_prefix.length){
            img_json["DEV_PREFIX"] = dev_prefix;
        }

        var driver = $('#img_driver',dialog).val();
        if (driver.length)
            img_json["DRIVER"] = driver;

        var target = $('#img_target',dialog).val();
        if (target)
            img_json["TARGET"] = target;

        switch ($('#src_path_select input:checked',dialog).val()){
        case "path":
            path = $('#img_path',dialog).val();
            if (path) img_json["PATH"] = path;
            break;
        case "datablock":
            size = $('#img_size',dialog).val();
            fstype = $('#img_fstype',dialog).val();
            if (size) img_json["SIZE"] = size;
            if (fstype) img_json["FSTYPE"] = fstype;
            break;
        case "upload":
            upload=true;
            break;
        }

        //Time to add custom attributes
        $('#custom_var_image_box option',dialog).each(function(){
            var attr_name = $(this).attr('name');
            var attr_value = $(this).val();
            img_json[attr_name] = attr_value;
        });

        img_obj = { "image" : img_json,
                    "ds_id" : ds_id};


        //we this is an image upload we trigger FileUploader
        //to start the upload
        if (upload){
            dialog.foundation('reveal', 'close');
            dialog.empty();
            setupCreateImageDialog();

            uploader._onInputChange(file_input);
        } else {
            Sunstone.runAction("Image.create", img_obj);
        };

        return false;
    });


    $('#create_image_submit_manual',dialog).click(function(){
        var template=$('#template',dialog).val();
        var ds_id = $('#img_datastore_raw .resource_list_select',dialog).val();

        if (!ds_id){
            notifyError(tr("Please select a datastore for this image"));
            return false;
        };

        var img_obj = {
            "image" : {
                "image_raw" : template
            },
            "ds_id" : ds_id
        };
        Sunstone.runAction("Image.create",img_obj);

        return false;
    });

    $('#wizard_image_reset_button', dialog).click(function(){
        $('#create_image_dialog').html("");
        setupCreateImageDialog();

        popUpCreateImageDialog();
    });

    $('#advanced_image_reset_button', dialog).click(function(){
        $('#create_image_dialog').html("");
        setupCreateImageDialog();

        popUpCreateImageDialog();
        $("a[href='#img_manual']").click();
    });
}

function initialize_datastore_info_create_image_dialog(dialog) {
    var ds_id = $('#img_datastore .resource_list_select',dialog).val();
    var ds_id_raw = $('#img_datastore_raw .resource_list_select',dialog).val();

    // Filter out DS with type system (1) or file (2)
    var filter_att = ["TYPE", "TYPE"];
    var filter_val = ["1", "2"];

    insertSelectOptions('div#img_datastore', dialog, "Datastore",
                        ds_id, false, null, filter_att, filter_val);

    insertSelectOptions('div#img_datastore_raw', dialog, "Datastore",
                        ds_id_raw, false, null, filter_att, filter_val);

    $('#file-uploader input',dialog).removeAttr("style");
    $('#file-uploader input',dialog).attr('style','margin:0;width:256px!important');
}

function popUpCreateImageDialog(){
    $create_image_dialog =  $('#create_image_dialog');
    initialize_datastore_info_create_image_dialog($create_image_dialog);
    $create_image_dialog.foundation().foundation('reveal', 'open');
    $("input#img_name",$create_image_dialog).focus();
}

function is_persistent_image(id){
    var data = getElementData(id,"#image",dataTable_images)[8];
    return $(data).is(':checked');
};

function setupImageCloneDialog(){
    //Append to DOM
    dialogs_context.append('<div id="image_clone_dialog"></div>');
    var dialog = $('#image_clone_dialog',dialogs_context);

    //Put HTML in place

    var html = '<div class="row">\
  <h3 id="create_vnet_header" class="subheader">'+tr("Clone Image")+'</h3>\
</div>\
<form>\
  <div class="row">\
    <div class="large-12 columns">\
      <div class="clone_one"></div>\
      <div class="clone_several">'+tr("Several image are selected, please choose prefix to name the new copies")+':</div>\
      <br>\
    </div>\
  </div>\
  <div class="row">\
    <div class="columns large-12">\
      <label class="clone_one">'+tr("Name")+':</label>\
      <label class="clone_several">'+tr("Prefix")+':</label>\
      <input type="text" name="name"></input>\
    </div>\
  </div>\
  <div class="form_buttons row">\
    <button class="button radius right" id="image_clone_button" value="Image.clone">'+tr("Clone")+'</button>\
  </div>\
  <a class="close-reveal-modal">&#215;</a>\
</form>\
';

    dialog.html(html);
    dialog.addClass("reveal-modal").attr("data-reveal", "");

    $('form',dialog).submit(function(){
        var name = $('input', this).val();
        var sel_elems = imageElements();
        if (!name || !sel_elems.length)
            notifyError('A name or prefix is needed!');
        if (sel_elems.length > 1){
            for (var i=0; i< sel_elems.length; i++)
                //If we are cloning several images we
                //use the name as prefix
                Sunstone.runAction('Image.clone',
                                   sel_elems[i],
                                   name+getImageName(sel_elems[i]));
        } else {
            Sunstone.runAction('Image.clone',sel_elems[0],name)
        };
        dialog.foundation('reveal', 'close')
        setTimeout(function(){
            Sunstone.runAction('Image.refresh');
        }, 1500);
        return false;
    });
}

function popUpImageCloneDialog(){
    var dialog = $('#image_clone_dialog');
    var sel_elems = imageElements();
    //show different text depending on how many elements are selected
    if (sel_elems.length > 1){
        $('.clone_one',dialog).hide();
        $('.clone_several',dialog).show();
        $('input',dialog).val('Copy of ');
    }
    else {
        $('.clone_one',dialog).show();
        $('.clone_several',dialog).hide();
        $('input',dialog).val('Copy of '+getImageName(sel_elems[0]));
    };

    $(dialog).foundation().foundation('reveal', 'open');
    $("input[name='name']",dialog).focus();
}

//The DOM is ready at this point
$(document).ready(function(){
    var tab_name = 'images-tab';

    if (Config.isTabEnabled(tab_name)) {
      dataTable_images = $("#datatable_images",main_tabs_context).dataTable({
            "bSortClasses" : false,
            "bDeferRender": true,
            "aoColumnDefs": [
              { "bSortable": false, "aTargets": ["check"] },
              { "sWidth": "35px", "aTargets": [0] },
              { "bVisible": true, "aTargets": Config.tabTableColumns(tab_name)},
              { "bVisible": false, "aTargets": ['_all']}
          ]
      });

      $('#image_search').keyup(function(){
        dataTable_images.fnFilter( $(this).val() );
      })

      dataTable_images.on('draw', function(){
        recountCheckboxes(dataTable_images);
      })

      Sunstone.runAction("Image.list");

      setupCreateImageDialog();
      setupImageCloneDialog();

      initCheckAllBoxes(dataTable_images);
      tableCheckboxesListener(dataTable_images);
      infoListener(dataTable_images,'Image.show');

      $('div#images_tab div.legend_div').hide();

      dataTable_images.fnSort( [ [1,config['user_config']['table_order']] ] );
    }
});