feature #3748: Add create VM form panel

src/sunstone/public/app/tabs/vms-tab.js

@@ -17,9 +17,9 @@ define(function(require) {
   //  require('./vms-tab/panels/template')
   ];
 
-  //var _formPanels = [
-  //  require('./vms-tab/form-panels/create')
-  //]
+  var _formPanels = [
+    require('./vms-tab/form-panels/create')
+  ]
 
   var Tab = {
     tabId: TAB_ID,
@@ -38,7 +38,7 @@ define(function(require) {
     actions: Actions,
     dataTable: new Table(DATATABLE_ID, {actions: true, info: true}),
     panels: _panels,
-    //formPanels: _formPanels,
+    formPanels: _formPanels,
     //dialogs: _dialogs
   };
 

src/sunstone/public/app/tabs/vms-tab/actions.js

@@ -6,7 +6,7 @@ define(function(require) {
   var CommonActions = require('utils/common-actions');
 
   var TAB_ID = require('./tabId');
-  //var CREATE_DIALOG_ID = require('./form-panels/create/formPanelId');
+  var CREATE_DIALOG_ID = require('./form-panels/create/formPanelId');
   //var CLONE_DIALOG_ID = require('./dialogs/clone/dialogId');
   //var INSTANTIATE_DIALOG_ID = require('./dialogs/instantiate/dialogId');
   var XML_ROOT = "VM";
@@ -56,6 +56,12 @@ define(function(require) {
     "VM.snapshot_revert": _commonActions.singleAction('snapshot_revert'),
     "VM.snapshot_delete": _commonActions.singleAction('snapshot_delete'),
     
+    "VM.create_dialog" : {
+      type: "custom",
+      call: function(){
+        Sunstone.showFormPanel(TAB_ID, CREATE_DIALOG_ID, "create");
+      }
+    },
     /*"VM.create" : {
       type: "custom",
       call: function(id, name) {
@@ -69,12 +75,6 @@ define(function(require) {
       },
       error: onError
     },
-    "VM.create_dialog" : {
-      type: "custom",
-      call: function(){
-        //Sunstone.getDialog(CREATE_DIALOG_ID).show();
-      }
-    },
     "VM.deploy" : {
       type: "custom",
       call: function() {

src/sunstone/public/app/tabs/vms-tab/form-panels/create.js

@@ -0,0 +1,176 @@
+define(function(require) {
+  /*
+    DEPENDENCIES
+   */
+  
+  require('foundation.tab');
+  var BaseFormPanel = require('utils/form-panels/form-panel');
+  var Sunstone = require('sunstone');
+  var Locale = require('utils/locale');
+  var Tips = require('utils/tips');
+  var Notifier = require('utils/notifier');
+  var WizardFields = require('utils/wizard-fields');
+  var UserInputs = require('utils/user-inputs');
+  var OpenNebulaTemplate = require('opennebula/template');
+  var TemplatesTable = require('tabs/templates-tab/datatable');
+
+  /*
+    TEMPLATES
+   */
+
+  var TemplateWizardHTML = require('hbs!./create/wizard');
+  
+  /*
+    CONSTANTS
+   */
+
+  var FORM_PANEL_ID = require('./create/formPanelId');
+  var TAB_ID = require('../tabId');
+
+  /*
+    CONSTRUCTOR
+   */
+
+  function FormPanel() {
+    this.formPanelId = FORM_PANEL_ID;
+    this.tabId = TAB_ID;
+    this.actions = {
+      'create': {
+        'title': Locale.tr("Create Virtual Machine"),
+        'buttonText': Locale.tr("Create"),
+        'resetButton': true
+      }
+    };
+
+    this.templatesTable = new TemplatesTable('vm_create', {'select': true});
+
+    BaseFormPanel.call(this);
+  }
+
+  FormPanel.FORM_PANEL_ID = FORM_PANEL_ID;
+  FormPanel.prototype = Object.create(BaseFormPanel.prototype);
+  FormPanel.prototype.constructor = FormPanel;
+  FormPanel.prototype.htmlWizard = _htmlWizard;
+  FormPanel.prototype.setup = _setup;
+  FormPanel.prototype.onShow = _onShow;
+  FormPanel.prototype.submitWizard = _submitWizard;
+
+  return FormPanel;
+  
+  /*
+    FUNCTION DEFINITIONS
+   */
+  
+  function _htmlWizard() {
+
+    return TemplateWizardHTML({
+      'formPanelId': this.formPanelId,
+      'templatesTableHTML': this.templatesTable.dataTableHTML
+    });
+  }
+
+  function _setup(context) {
+    $("#create_vm_template_proceed", context).attr("disabled", "disabled");
+    $("#create_vm_inputs_step", context).hide();
+
+    this.templatesTable.initialize();
+
+    $("#selected_resource_id_vm_create", context).on("change", function(){
+        var template_id = $(this).val();
+
+        $("#create_vm_inputs_step", context).hide();
+        $("#create_vm_user_inputs", context).empty();
+
+        OpenNebulaTemplate.show({
+            data : {
+                id: template_id
+            },
+            timeout: true,
+            success: function (request, template_json){
+                $("#create_vm_inputs_step", context).hide();
+                $("#create_vm_user_inputs", context).empty();
+
+                var has_inputs = UserInputs.vmTemplateInsert(
+                    $("#create_vm_user_inputs", context),
+                    template_json,
+                    {text_header: ""});
+
+                if(has_inputs){
+                    $("#create_vm_inputs_step", context).show();
+                }
+
+                $("#create_vm_template_proceed", context).removeAttr("disabled");
+            },
+            error: function(request,error_json, container){
+                Notifier.onError(request,error_json, container);
+            }
+        });
+    });
+
+    Tips.setup(context);
+  }
+
+  function _onShow(context) {
+    $("input#vm_name", context).focus();
+    this.templatesTable.resetResourceTableSelect();
+  }
+
+  function _submitWizard(context) {
+    var vm_name = $('#create_vm_name', context).val();
+    var template_id = $("#selected_resource_id_vm_create", context).val();
+    var n_times = $('#create_vm_n_times', context).val();
+    var n_times_int = 1;
+    var hold = $('#create_vm_hold', context).prop("checked");
+
+    if (!template_id.length) {
+      Notifier.notifyError(tr("You have not selected a template"));
+      return false;
+    }
+
+    if (n_times.length) {
+      n_times_int = parseInt(n_times, 10);
+    }
+
+    var extra_msg = "";
+    if (n_times_int > 1) {
+      extra_msg = n_times_int + " times";
+    }
+
+    Notifier.notifySubmit("Template.instantiate", template_id, extra_msg);
+
+    var extra_info = {
+      'hold': hold
+    };
+
+    var tmp_json = WizardFields.retrieve(context);
+
+    extra_info['template'] = tmp_json;
+
+    if (!vm_name.length) { //empty name use OpenNebula core default
+      for (var i = 0; i < n_times_int; i++) {
+        extra_info['vm_name'] = "";
+        Sunstone.runAction("Template.instantiate_quiet", template_id, extra_info);
+      }
+    } else {
+      if (vm_name.indexOf("%i") == -1) {//no wildcard, all with the same name
+        for (var i = 0; i < n_times_int; i++) {
+          extra_info['vm_name'] = vm_name;
+          Sunstone.runAction("Template.instantiate_quiet", template_id, extra_info);
+        }
+      } else { //wildcard present: replace wildcard
+        for (var i = 0; i < n_times_int; i++) {
+          extra_info['vm_name'] = vm_name.replace(/%i/gi, i);
+          Sunstone.runAction("Template.instantiate_quiet", template_id, extra_info);
+        }
+      }
+    }
+
+    setTimeout(function() {
+      Sunstone.resetFormPanel(TAB_ID, FORM_PANEL_ID);
+      Sunstone.hideFormPanel(TAB_ID);
+      Sunstone.runAction("VM.list");
+    }, 1500);
+
+    return false;
+  }
+});

src/sunstone/public/app/tabs/vms-tab/form-panels/create/formPanelId.js

@@ -0,0 +1,3 @@
+define(function(require){
+  return 'createVMForm';
+})

src/sunstone/public/app/tabs/vms-tab/form-panels/create/wizard.hbs

@@ -0,0 +1,43 @@
+<form data-abide="ajax" id="{{formPanelId}}Wizard" class="custom creation">
+  <fieldset>
+    <legend>{{tr "Step 1: Specify a name and the number of instances"}}</legend>
+    <div class="row">
+      <div class="large-5 columns">
+        <label for="create_vm_name">
+          {{tr "VM Name"}}
+          <span class="tip">
+            {{tr "Defaults to template name when emtpy. You can use the wildcard &#37;i. When creating several VMs, &#37;i will be replaced with a different number starting from 0 in each of them"}}.
+          </span>
+        </label>
+        <input type="text" name="create_vm_name" id="create_vm_name" />
+      </div>
+      <div class="large-4 columns">
+        <label for="create_vm_n_times">
+          {{tr "Number of instances"}}:
+          <span class="tip">
+            {{tr "Number of Virtual Machines that will be created using this template"}}.
+          </span>
+        </label>
+        <input type="text" name="create_vm_n_times" id="create_vm_n_times" value="1"></div>
+      <div class="large-3 columns">
+        <input type="checkbox" name="create_vm_hold" id="create_vm_hold"/>
+        <label for="create_vm_hold">
+          {{tr "Hold"}}
+          <span class="tip">
+            {{tr "Sets the new VM to hold state, instead of pending. The scheduler will not deploy VMs in this state. It can be released later, or deployed manually."}}
+          </span>
+        </label>
+      </div>
+    </div>
+  </fieldset>
+  <fieldset>
+    <legend>{{tr "Step 2: Select a template"}}</legend>
+    {{{templatesTableHTML}}}
+  </fieldset>
+  <div id="create_vm_inputs_step">
+    <fieldset>
+      <legend>{{tr "Step 3: Fill the required inputs"}}</legend>
+      <div id="create_vm_user_inputs"></div>
+    </fieldset>
+  </div>
+</form>