F #4506: Adapt instantiate flow form in cloudview (#4565)

src/sunstone/etc/sunstone-views/mixed/cloud.yaml

@@ -150,6 +150,7 @@ tabs:
             - 11        # #VMs
             #- 12       # Target
     vnets-tab:
+        # Allows to instantiate a service with vnets
         table_columns:
             - 0         # Checkbox
             - 1         # ID
@@ -161,6 +162,15 @@ tabs:
             #- 7        # Bridge
             #- 8        # Leases
             #- 9        # VLAN ID
+    vnets-templates-tab:
+        # Allows to instantiate a service with vnets templates
+        table_columns:
+            - 0         # Checkbox
+            - 1         # ID
+            - 2         # Name
+            #- 3        # Owner
+            - 4         # Group
+            #- 6        # Cluster
     secgroups-tab:
         table_columns:
             - 0         # Checkbox

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

@@ -99,12 +99,9 @@ define(function(require) {
 
   function _setup(context) {
     this.networksType = [
-      //Template id the una VN Template
-      {value: 'template_id', text: 'Create', select: 'vntemplates', extra: true },
-      //ID de una vnet que ya existe para reservar de ella
-      {value: 'reserve_from', text: 'Reserve', select: 'networks', extra: true },
-      //ID de una vnet que ya existe para usarla directamente
-      {value: 'id', text: 'Existing', select: 'networks', extra: false },
+      { value: 'template_id', text: 'Create', select: 'vntemplates', extra: true },
+      { value: 'reserve_from', text: 'Reserve', select: 'networks', extra: true },
+      { value: 'id', text: 'Existing', select: 'networks', extra: false },
     ]
     this.roleTabObjects = {};
     this.numberOfNetworks = 0;

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

@@ -31,6 +31,7 @@ define(function(require) {
   var UserInputs = require("utils/user-inputs");
   var Config = require("sunstone-config");
   var TemplateUtils = require("utils/template-utils");
+  var ServiceUtils = require("utils/service-utils");
 
   /*
     TEMPLATES
@@ -202,38 +203,8 @@ define(function(require) {
     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";
-    }
-    
-    var custom_attrs_json = WizardFields.retrieve($(".custom_attr_class", context));
-    var networks_json = WizardFields.retrieve($(".network_attrs_class", context));
-    var typePrefix = "type_";
-    
-    var network_values = Object.keys(networks_json).filter(function(key) {
-      return key.indexOf(typePrefix) == 0; // get all networks names with prefix 'type_'
-    }).reduce(function(newData, typeKey) {
-      var type = networks_json[typeKey];
-      var name = typeKey.replace(typePrefix, '');
-      var id = networks_json[name]
-      var extra = networks_json['extra_' + name];
-  
-      newData.push($.extend(true, {},{
-        [name]: {
-          [type]: id, // type configuration: id network/template
-          extra: (extra && extra !== "") ? extra : undefined,
-        },
-      }));
-      
-      return newData;
-    }, []);
 
-    var extra_info = { "merge_template": {
-      custom_attrs_values: custom_attrs_json,
-      networks_values: network_values,
-      roles: []
-    }};
+    var extra_info = ServiceUtils.getExtraInfo(context);
 
     $.each(that.service_template_json.DOCUMENT.TEMPLATE.BODY.roles, function(index, role){
       var div_id = "user_input_role_"+index;
@@ -249,6 +220,7 @@ define(function(require) {
       }
       extra_info.merge_template.roles.push(role);
     });
+    
     if (!service_name.length){ //empty name
       for (var i=0; i< n_times_int; i++){
         Sunstone.runAction("ServiceTemplate.instantiate", that.templateId, extra_info);

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

@@ -33,6 +33,7 @@ define(function(require) {
     var NicsSection = require("utils/nics-section");
     var VMGroupSection = require("utils/vmgroup-section");
     var TemplateUtils = require("utils/template-utils");
+    var ServiceUtils = require("utils/service-utils");
     var WizardFields = require("utils/wizard-fields");
     var UserInputs = require("utils/user-inputs");
     var CapacityInputs = require("tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs");
@@ -1186,7 +1187,7 @@ define(function(require) {
 
               var context = $("#provision_create_flow");
 
-              if (body.custom_attrs) {
+              if (body.custom_attrs || body.networks) {
                 UserInputs.serviceTemplateInsert(
                   $(".provision_network_selector", context), data);
               } else {
@@ -1261,7 +1262,6 @@ define(function(require) {
 
           $("#provision_create_flow").submit(function(){
             var context = $(this);
-
             var flow_name = $("#flow_name", context).val();
             var template_id = $(".provision_select_flow_template .selected", context).attr("opennebula_id");
 
@@ -1270,9 +1270,7 @@ define(function(require) {
               return false;
             }
 
-            var custom_attrs = WizardFields.retrieve($(".provision_network_selector", context));
-
-            var roles = [];
+            var extra_info = ServiceUtils.getExtraInfo(context);
 
             $(".provision_create_flow_role", context).each(function(){
               var user_inputs_values = WizardFields.retrieve($(".provision_custom_attributes_selector", $(this)));
@@ -1281,19 +1279,12 @@ define(function(require) {
 
               var cardinality = WizardFields.retrieve( $(".provision_cardinality_selector", $(this)) )["cardinality"];
 
-              roles.push($.extend(role_template, {
+              extra_info.merge_template.roles.push($.extend(role_template, {
                 "cardinality": cardinality,
                 "user_inputs_values": user_inputs_values
               }));
             });
 
-            var extra_info = {
-              "merge_template": {
-                "roles" : roles,
-                "custom_attrs_values": custom_attrs
-              }
-            };
-
             if (flow_name){
               extra_info["merge_template"]["name"] = flow_name;
             }

src/sunstone/public/app/utils/service-utils.js

@@ -0,0 +1,53 @@
+/* -------------------------------------------------------------------------- */
+/* 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) {
+  var WizardFields = require("utils/wizard-fields");
+
+  return {
+    "getExtraInfo": _getExtraInfo
+  };
+
+  function _getExtraInfo(context) {
+    var custom_attrs_json = WizardFields.retrieve($(".custom_attr_class", context));
+    var networks_json = WizardFields.retrieve($(".network_attrs_class", context));
+    var typePrefix = "type_";
+    
+    var network_values = Object.keys(networks_json).filter(function(key) {
+      return key.indexOf(typePrefix) == 0; // get all networks names with prefix 'type_'
+    }).reduce(function(networks, typeKey) {
+      var type = networks_json[typeKey];
+      var name = typeKey.replace(typePrefix, '');
+      var id = networks_json[name]
+      var extra = networks_json['extra_' + name];
+  
+      networks.push($.extend(true, {},{
+        [name]: {
+          [type]: id, // type configuration: id network/template
+          extra: (extra && extra !== "") ? extra : undefined,
+        },
+      }));
+      
+      return networks;
+    }, []);
+
+    return { "merge_template": {
+      "custom_attrs_values": custom_attrs_json,
+      "networks_values": network_values,
+      "roles": []
+    }};
+  }
+});

src/sunstone/public/app/utils/user-inputs.js

@@ -18,7 +18,7 @@ define(function(require) {
   var Locale = require("utils/locale");
   var TemplateUtils = require("utils/template-utils");
   var VNetsTable = require("tabs/vnets-tab/datatable");
-  var VNetsTemplateTable = require("../tabs/vnets-templates-tab/datatable");
+  var VNetsTemplateTable = require("tabs/vnets-templates-tab/datatable");
   var RangeSlider = require("utils/range-slider");
   var UniqueId = require("utils/unique-id");
 
@@ -347,15 +347,6 @@ define(function(require) {
     addInVar(networks, network_attrs);
     addInVar(customs, custom_attrs);
 
-    this.networksType = [
-      //Template id the una VN Template
-      {value: 'template_id', text: 'Create', select: 'vntemplates', extra: true },
-      //ID de una vnet que ya existe para reservar de ella
-      {value: 'reserve_from', text: 'Reserve', select: 'networks', extra: true },
-      //ID de una vnet que ya existe para usarla directamente
-      {value: 'id', text: 'Existing', select: 'networks', extra: false },
-    ]
-
     // Render networks
     if (network_attrs.length > 0) {
       html += "<fieldset>";
@@ -471,7 +462,13 @@ define(function(require) {
                 $("<div/>",{class:"row addExtra_"+id}).append(
                   $("<div/>",{class:"columns small-12"}).append(
                     $("<label/>").text(Locale.tr("Extra")).add(
-                      $("<input/>",{wizard_field: "extra_"+nametable ,type:"text", name: "extra", id: "extra", placeholder: Locale.tr("Extra") })
+                      $("<input/>",{
+                        "wizard_field": "extra_"+nametable,
+                        "type": "text",
+                        "name": "extra",
+                        "id": "extra",
+                        "placeholder": Locale.tr("Extra")
+                      })
                     )
                   )
                 )