F #5209: add modal and fix time in vm (#730)

Signed-off-by: Jorge Lobo <jlobo@opennebula.io>

src/sunstone/public/app/app.js

@@ -43,11 +43,12 @@ var Websocket = require("utils/websocket");
 var FireedgeValidator = require("utils/fireedge-validator")
 
 var _commonDialogs = [
-require('utils/dialogs/confirm'),
-require('utils/dialogs/confirm-with-select'),
-require('utils/dialogs/generic-confirm'),
-require('utils/dialogs/clusters'),
-require('utils/dialogs/overcommit')
+  require('utils/dialogs/confirm'),
+  require('utils/dialogs/confirm-with-select'),
+  require('utils/dialogs/generic-confirm'),
+  require('utils/dialogs/clusters'),
+  require('utils/dialogs/overcommit'),
+  require('utils/dialogs/leases')
 ]
 
 

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

@@ -188,7 +188,7 @@ define(function(require) {
     var objLeases = $.extend(true, {}, that);
     objLeases.resource = "template";
     objLeases.__proto__ = FormPanel.prototype;
-    Leases.actions(objLeases,"","", function(){
+    Leases.actions(objLeases, "", "", function(){
       sched_actions_events(context);
     });
 

src/sunstone/public/app/utils/dialogs/leases.js

@@ -0,0 +1,152 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2020, OpenNebula Project, OpenNebula Systems                */
+/*                                                                            */
+/* 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.                                             */
+/* -------------------------------------------------------------------------- */
+
+define(function(require) {
+  /*
+    DEPENDENCIES
+   */
+
+  var BaseDialog = require("utils/dialogs/dialog");
+  var TemplateHTML = require("hbs!./leases/html");
+  var Sunstone = require("sunstone");
+  var Locale = require("utils/locale");
+
+  /*
+    CONSTANTS
+   */
+
+  var DIALOG_ID = require("./leases/dialogId");
+
+  /*
+    CONSTRUCTOR
+   */
+
+  function Dialog() {
+    this.dialogId = DIALOG_ID;
+    BaseDialog.call(this);
+  }
+
+  Dialog.DIALOG_ID = DIALOG_ID;
+  Dialog.prototype = Object.create(BaseDialog.prototype);
+  Dialog.prototype.constructor = Dialog;
+  Dialog.prototype.html = _html;
+  Dialog.prototype.onShow = _onShow;
+  Dialog.prototype.setup = _setup;
+  Dialog.prototype.setParams = _setParams;
+
+  return Dialog;
+
+  /*
+    FUNCTION DEFINITIONS
+   */
+
+  function _html() {
+    return TemplateHTML({dialogId: this.dialogId});
+  }
+
+  /**
+   * @param {object} params.
+   *        - params.header : Optional, html string
+   *        - params.headerTabId : Optional, tabId for the subheader resource ids
+   *        - params.body : Optional, html string
+   *        - params.question : Optional, html string
+   *        - params.buttons : Optional, html string for the button.
+   *                           Can be an array for multiple options
+   *        - params.submit : Mandatory, function to call if user confirms
+   *                          If buttons is an array, it must be an array
+   *                          of the same size
+   */
+  function _setParams(params) {
+    this.params = params;
+
+    if (this.params.buttons != undefined && !$.isArray(this.params.buttons)){
+      this.params.buttons = [this.params.buttons];
+    }
+
+    if (this.params.submit != undefined && !$.isArray(this.params.submit)){
+      this.params.submit = [this.params.submit];
+    }
+  }
+
+  function _setup(context) {
+    var that = this;
+
+    $(context).keypress(function (e) {
+      if (e.which == 13 || e.keyCode == 13) {
+        $("#" + DIALOG_ID + "Form", context).submit();
+        return false;
+      } else {
+        return true;
+      }
+    });
+
+    $("#" + DIALOG_ID + "Form", context).submit(function(e) {
+      // With more than one button, skip
+      if (that.params.buttons != undefined && that.params.buttons.length > 1){
+        e.preventDefault();
+        return false;
+      }
+
+      Sunstone.getDialog(DIALOG_ID).hide();
+
+      if (that.params.submit != undefined){
+        that.params.submit[0](this);
+      }
+
+      return false;
+    });
+
+    $(context).on("click", ".custom_submit", function(){
+      var index = $(this).attr("submit");
+      that.params.submit[index]();
+
+      Sunstone.getDialog(DIALOG_ID).hide();
+      return false;
+    });
+
+    return false;
+  }
+
+  function _onShow(context) {
+    if (this.params.header != undefined){
+      $("#header", context).html(this.params.header);
+    }
+
+    if (this.params.body != undefined){
+      $("#body", context).html(this.params.body);
+    }
+
+    if (this.params.question != undefined){
+      $("#question", context).html(this.params.question);
+    }
+
+    if (this.params.buttons != undefined){
+      var html = "";
+
+      $.each(this.params.buttons, function(i, text){
+        html += "<button class=\"custom_submit radius button right\" submit=\""+i+"\">"+text+"</button>";
+      });
+
+      $(".form_buttons", context).html(html);
+    }
+
+    if (this.params.headerTabId != undefined){
+      this.setNames( {tabId: this.params.headerTabId} );
+    }
+
+    return false;
+  }
+});

src/sunstone/public/app/utils/dialogs/leases/dialogId.js

@@ -0,0 +1,19 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2020, OpenNebula Project, OpenNebula Systems                */
+/*                                                                            */
+/* 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.                                             */
+/* -------------------------------------------------------------------------- */
+
+define(function(require) {
+  return "addLeasesDialog";
+});

src/sunstone/public/app/utils/dialogs/leases/html.hbs

@@ -0,0 +1,37 @@
+{{! -------------------------------------------------------------------------- }}
+{{! Copyright 2002-2020, OpenNebula Project, OpenNebula Systems                }}
+{{!                                                                            }}
+{{! 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.                                             }}
+{{! -------------------------------------------------------------------------- }}
+
+<div id="{{dialogId}}" class="reveal" data-reveal>
+  <div class="row">
+    <h3 class="subheader">
+      <span id="header">{{tr "Confirm"}}</span>
+      <br>
+    </h3>
+  </div>
+  <div class="confirm-resources-header"></div>
+  <form id="{{dialogId}}Form">
+    <div id="body">{{tr "You have to confirm this action."}}</div>
+    <br/>
+    <div id="question">{{tr "Do you want to proceed?"}}</div>
+    <br/>
+    <div class="form_buttons">
+      <button id="generic_confirm_proceed" class="radius button right" data-close value="">{{tr "OK"}}</button>
+    </div>
+    <button class="close-button" data-close aria-label="{{tr "Close modal"}}" type="button">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </form>
+</div>

src/sunstone/public/app/utils/leases.js

@@ -24,6 +24,7 @@ define(function(require) {
   var Sunstone = require("sunstone");
   var ScheduleActions = require("utils/schedule_action");
   var notifier = require("utils/notifier");
+  var CONFIRM_DIALOG_LEASES = require("utils/dialogs/leases/dialogId");
 
   /*
     CONSTANTS
@@ -88,24 +89,116 @@ define(function(require) {
           notifier.notifyCustom(Locale.tr("Added scheduled actions"),"");
         };
 
-        var addInTemplate = function(){
+        var nowEpoch = function(){
+          epochStr = new Date();
+          return parseInt(epochStr.getTime(),10) / 1000;
+        };
+
+        //render leases for modal
+        var renderLeasesForModal = function(template, now) {
+          var rtn = "";
+          var last = 0;
+          if(confLeasesKeys && Array.isArray(confLeasesKeys)){
+            rtn = $("<table/>");
+            confLeasesKeys.forEach(function(schedAction){
+              if(confLeases[schedAction] && confLeases[schedAction].time){
+                var schedActionTime = parseInt(confLeases[schedAction].time,10);
+                var startTime = Math.round(now) + schedActionTime;
+                var time =  "+"+(last === 0? startTime.toString() : startTime+last);
+                console.log(Math.round(now), schedActionTime, startTime, time );
+                var nameAction = schedAction;
+                rtn = rtn.append(
+                  $("<tr/>").append(
+                    $("<td/>").text(nameAction).add(
+                      $("<td/>").text(ScheduleActions.parseTime(time))
+                    )
+                  )
+                );
+                last = schedActionTime;
+              }
+            });
+            rtn = rtn.prop("outerHTML");
+          }
+          return rtn;
+        };
+
+        // confirm modal
+        var displayAlertCreateLeases = function(typeSubmit, template){
+          var now = template && template.STIME? nowEpoch() - parseInt(template.STIME,10) : 0;
+          Sunstone.getDialog(CONFIRM_DIALOG_LEASES).setParams({
+            header: Locale.tr("Scheduled actions to add"),
+            body : renderLeasesForModal(template, now),
+            submit : function(params) {
+              addInTemplate(typeSubmit, template, now);
+              return false;
+            }
+          });
+          Sunstone.getDialog(CONFIRM_DIALOG_LEASES).reset();
+          Sunstone.getDialog(CONFIRM_DIALOG_LEASES).show();
+        };
+
+        var addInTemplate = function(typeSubmit, template, now){
+          var type = typeSubmit? typeSubmit : "add";
           var last = 0;
           var pass = false;
+          var newSchedActions =[];
+          var index = (
+            template && template.SCHED_ACTION ?
+              (Array.isArray(template.SCHED_ACTION)? template.SCHED_ACTION.length : 1)
+            :
+              0
+          );
+
           confLeasesKeys.forEach(function(schedAction){
             if(confLeases[schedAction] && confLeases[schedAction].time){
               var schedActionTime = parseInt(confLeases[schedAction].time,10);
-              var newAction = {
-                TIME: last === 0? confLeases[schedAction].time : "+"+(schedActionTime+last),
-                ACTION: schedAction
-              };
-              last = schedActionTime;
-              $(idElementSchedActions).prepend(ScheduleActions.fromJSONtoActionsTable(newAction));
-              if(typeof callback === "function"){
-                callback();
+              var startTime = Math.round(now) + schedActionTime;
+              switch (type) {
+                case "add":
+                  var newAction = {
+                    TIME: "+"+(last === 0? startTime.toString() : startTime+last),
+                    ACTION: schedAction
+                  };
+                  $(idElementSchedActions).prepend(ScheduleActions.fromJSONtoActionsTable(newAction));
+                break;
+
+                case "submit":
+                  var newAction = {
+                    ACTION: schedAction,
+                    TIME: "+"+(last === 0? startTime.toString() : startTime+last),
+                    ID: (index++).toString()
+                  };
+
+                  newSchedActions.push(
+                    newAction
+                  );
+                break;
+
+                default:
+                break;
               }
+              last = schedActionTime;
               pass = true;
             }
           });
+          if(type==="submit"){
+            template.SCHED_ACTION = (
+              template.SCHED_ACTION?
+                (Array.isArray(template.SCHED_ACTION)?
+                  template.SCHED_ACTION.concat(newSchedActions)
+                :
+                  [template.SCHED_ACTION].concat(newSchedActions))
+              :
+              newSchedActions
+            );
+            template = TemplateUtils.templateToString(template);
+            Sunstone.runAction("VM.update_template", id, template);
+          }
+
+          if(typeof callback === "function"){
+            callback();
+          }
+
           if(pass){
             showLeaseMessage();
           }
@@ -132,6 +225,13 @@ define(function(require) {
             action = act || null;
             template = (form.element && form.element.USER_TEMPLATE? form.element.USER_TEMPLATE : null );
             id = (form.element && form.element.ID? form.element.ID : null);
+            // get history
+            if(form.element &&
+              form.element.HISTORY_RECORDS &&
+              form.element.HISTORY_RECORDS.HISTORY &&
+              form.element.HISTORY_RECORDS.HISTORY.STIME && template){
+              template.STIME = form.element.HISTORY_RECORDS.HISTORY.STIME;
+            }
           break;
           default:
           break;
@@ -140,42 +240,13 @@ define(function(require) {
         if(resource && action && template){
           switch (resource.toLowerCase()) {
             case "template":
-              addInTemplate();
+              displayAlertCreateLeases("add", template);
             break;
             case "vm":
               if(action.toLowerCase() === "update" && id){
-                var newSchedActions = [];
-                var index = (
-                  template && template.SCHED_ACTION ?
-                    (Array.isArray(template.SCHED_ACTION)? template.SCHED_ACTION.length : 1)
-                  :
-                    0
-                );
-                var last = 0;
-                confLeasesKeys.forEach(function(schedAction){
-                  if(confLeases[schedAction] && confLeases[schedAction].time){
-                    var schedActionTime = parseInt(confLeases[schedAction].time,10);
-                    newSchedActions.push(
-                      {
-                        ACTION: schedAction,
-                        TIME: last === 0? confLeases[schedAction].time : "+"+(schedActionTime+last),
-                        ID: (index++).toString()
-                      }
-                    );
-                    last = schedActionTime;
-                  }
-                });
-                template.SCHED_ACTION = (
-                  template.SCHED_ACTION?
-                    (Array.isArray(template.SCHED_ACTION)? template.SCHED_ACTION.concat(newSchedActions) : [template.SCHED_ACTION].concat(newSchedActions))
-                  :
-                  newSchedActions
-                );
-                template = TemplateUtils.templateToString(template);
-                Sunstone.runAction("VM.update_template", id, template);
-                showLeaseMessage();
+                displayAlertCreateLeases("submit", template);
               }else{
-                addInTemplate();
+                displayAlertCreateLeases("add", template);
               }
             break;
             default: