OpenNebula

            id = self.allocate(host_hash['name'],

            delete_values = ['name', 'im_mad', 'vm_mad', 'cluster_id']

            template_str = hash_to_str(host_hash, delete_values)

            if !template_str.nil?

                params=Hash.new

                params['template_raw'] = template_str

                params['append'] = true

                self.update(params)

            end

         def hash_to_str(template_hash, delete_values)

            for del in delete_values

                template_hash.delete(del)

            end

            if !template_hash.empty?

                template_str = ""

                template_hash.collect do |key,value|

                    if value.kind_of?(Array)

                        template_str << key.to_s.upcase << " = \["

                        for obj in value

                            if obj.kind_of?(Hash)

                                obj.collect do |key,value|

                                    template_str << key.to_s.upcase << " = \""<< value.to_s << "\"\n"

                                end

                            end

                        end

                        template_str << "\]\n"

                    else

                        template_str << key.to_s.upcase << " = \""<< value.to_s << "\"\n"

                    end

                end

            end

            return template_str

        end

      $(".vcenter_credentials", context).hide();

      $(".ec2_extra", context).hide();

      $(".drivers", context).hide();

      $("#name_container", context).show();

      } else if (this.value == "ec2") {

        $(".ec2_extra", context).show();

        Sunstone.showFormPanelSubmit(TAB_ID);

    context.off("click", ".add_custom_tag");

    context.on("click", ".add_custom_tag", function(){

      $("tbody.capacity_ec2", context).append(

          "<tr class='row_capacity'>\

            <td style='display: flex; justify-content: flex-start'>\

              <input class='capacity_key' type='text' name='key'>\

            </td>\

            <td>\

              <input class='capacity_value' type='number' min='0' name='value'>\

            </td>\

            <td style='width: 150%; display: flex; justify-content: flex-end'>\

              <a href='#''><i class='fa fa-times-circle remove-capacity'></i></a>\

            </td>\

          </tr>");

    });

    context.on("click", "tbody.capacity_ec2 i.remove-capacity", function(){

      var tr = $(this).closest('tr');

      tr.remove();

    });

    if(vmm_mad == "ec2"){

      var capacity = [];

      var key = "";

      var value = "";

      var obj = {};

      var region_name = $('input[name="REGION_NAME"]').val();

      var ec2_access = $('input[name="EC2_ACCESS"]').val();

      var ec2_secret = $('input[name="EC2_SECRET"]').val();

      $('tr.row_capacity',context).each(function() {

        key = $("input[name='key']", this).val();

        value = $("input[name='value']", this).val();

        obj[key] = value;

        capacity.push(obj);

      });

      host_json["host"]["region_name"] = region_name;

      host_json["host"]["ec2_secret"] = ec2_secret;

      host_json["host"]["ec2_access"] = ec2_access;

      host_json["host"]["capacity"] = capacity;

    }

    <div class="ec2_extra">

      <fieldset>

        <legend>{{tr "EC2"}}</legend>

        <div class="row">

          <div class="large-12 columns">

            <label for="REGION_NAME">{{tr "Region name"}}</label>

            <input type="text" name="REGION_NAME" />

          </div>

        </div>

        <div class="row">

          <div class="large-6 columns">

            <label for="EC2_ACCESS">{{tr "Access key ID"}}</label>

            <input type="text" name="EC2_ACCESS" />

          </div>

          <div class="large-6 columns">

            <label for="EC2_SECRET">{{tr "Secret access key"}}</label>

            <input type="text" name="EC2_SECRET" />

          </div>

        </div>

        <div class="row">

          <div class="medium-12 columns">

            <label>{{tr "Capacity"}}</label>

            <div class="row">

              <div class="large-12 columns">

                <table class="dataTable capacity_table">

                  <thead>

                    <tr>

                      <th>{{tr "Key"}}</th>

                      <th>{{tr "Value"}}</th>

                      <th></th>

                    </tr>

                  </thead>

                  <tbody class="capacity_ec2">

                  </tbody>

                  <tfoot>

                    <tr>

                      <td colspan="3">

                        <a type="button" class="add_custom_tag button small small-12 secondary radius">

                          <i class="fa fa-lg fa-plus-circle"></i>

                        </a>

                      </td>

                    </tr>

                  </tfoot>

                </table>

              </div>

            </div>

          </div>

        </div>

      </fieldset>

    </div>

  var CapacityTable = require('utils/custom-tags-table');

  var EC2Tr = require('utils/panel/ec2-tr');

    var unshownKeys = ['HOST', 'VM', 'WILDS', 'ZOMBIES', 'RESERVED_CPU', 'RESERVED_MEM', "EC2_ACCESS", "EC2_SECRET", "CAPACITY", "REGION_NAME"];

      'virtualMEMInput': Humanize.size(this.element.HOST_SHARE.MAX_MEM),

      'ec2_tr': EC2Tr.html(RESOURCE, this.element.TEMPLATE),

      'capacityTableHTML': CapacityTable.html()

    $(".ec2",context).show();

    CapacityTable.setup(context, true, RESOURCE, this.element.TEMPLATE, this.element.ID);

    EC2Tr.setup(RESOURCE, this.element.ID, context);

    CapacityTable.fill(context, this.element.TEMPLATE.CAPACITY);

    $(".change_to_vector_attribute", context).hide();

    $(".custom_tag_value",context).focusout(function(){

        var key = $(".custom_tag_key",this.parentElement.parentElement).val();

        if(!that.element.TEMPLATE.CAPACITY){

          that.element.TEMPLATE.CAPACITY = {};

        }

        that.element.TEMPLATE.CAPACITY[key] = this.value;

        Sunstone.runAction(RESOURCE+".update_template",that.element.ID, TemplateUtils.templateToString(that.element.TEMPLATE));

      });

    if (this.element.TEMPLATE.IM_MAD != "ec2"){

      $(".ec2",context).hide();

    }

<div class="row ec2">

  <div class="large-12 columns">

    <table class="dataTable">

      <thead>

        <tr>

          <th colspan="3">{{tr "EC2"}}</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <div id="host_ec2_div" class="row">

            <div class="row">

              <div class="large12 columns">

                <table class="dataTable">

                  <thead>

                    <tr>

                      <th colspan="3">{{tr "Attributes"}}</th>

                    </tr>

                  </thead>

                  <tbody>

                    {{{ec2_tr}}}

                  </tbody>

                </table>

              </div>

            </div>

            <div class="row ec2">

              <div class="large-12 columns" id="capacity">

                <fieldset class="ec2_capacity">

                  <legend>{{tr "Capacity"}}</legend>

                    {{{capacityTableHTML}}}

                </fieldset>

              </div>

            </div>

          </div>

        </tr>

      </tbody>

    </table>

  </div>

</div>

  var Sunstone = require('sunstone');

  function _setup(context, hide_vector_button = false, resourceType = undefined, element = undefined, elementID = undefined){

      if(hide_vector_button){

        $(".change_to_vector_attribute", context).hide();

        $(".custom_tag_value",context).focusout(function(){

          var key = $(".custom_tag_key",this.parentElement.parentElement).val();

          if(!element.CAPACITY){

            element.CAPACITY = {};

          }

          element.CAPACITY[key] = this.value;

          Sunstone.runAction(resourceType+".update_template",elementID, TemplateUtils.templateToString(element));

        });

      }

      if(hide_vector_button){

        var key = $(".custom_tag_key",this.parentElement.parentElement.parentElement).val()

        if(element.CAPACITY && element.CAPACITY[key]){

          delete element.CAPACITY[key];

          Sunstone.runAction(resourceType+".update_template",elementID, TemplateUtils.templateToString(element));

        }

      }

/* -------------------------------------------------------------------------- */

/* Copyright 2002-2017, 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) {

  /*

    This module insert a row with the name of the resource.

    The row can be edited and a rename action will be sent

   */

  var TemplateEC2Tr = require('hbs!./ec2-tr/html');

  var TemplateUtils = require('utils/template-utils');

  var Sunstone = require('sunstone');

  var Config = require('sunstone-config');

  /*

    Generate the tr HTML with the name of the resource and an edit icon

    @param {String} tabName

    @param {String} resourceType Resource type (i.e: Zone, Host, Image...)

    @param {String} resourceName Name of the resource

    @returns {String} HTML row

   */

  var _html = function(resourceType, ec2_attributes) {

    this.element = ec2_attributes;

    this.valueRegion = ec2_attributes['REGION_NAME']? ec2_attributes['REGION_NAME']: "";

    this.valueSecret = ec2_attributes['EC2_SECRET']? ec2_attributes['EC2_SECRET']: "";

    this.valueAccess = ec2_attributes['EC2_ACCESS']? ec2_attributes['EC2_ACCESS']: "";

    var renameTrHTML = TemplateEC2Tr({

      'region_name': ec2_attributes['REGION_NAME'],

      'ec2_secret': ec2_attributes['EC2_SECRET'],

      'ec2_access': ec2_attributes['EC2_ACCESS']

    });

    return renameTrHTML;

  };

  function _setup(resourceType, resourceId,context) {

    var that = this;

      context.off("click", "#div_edit_region_link");

      context.on("click", "#div_edit_region_link", function() {

        var valueStr = $(".value_td_region", context).text();

        $(".value_td_region", context).html('<input class="input_edit_value_region" id="input_edit_region" type="text" value="' + that.valueRegion + '"/>');

      });

      context.off("click", "#div_edit_access_link");

      context.on("click", "#div_edit_access_link", function() {

        var valueStr = $(".value_td_access", context).text();

        $(".value_td_access", context).html('<input class="input_edit_value_access" id="input_edit_access" type="text" value="' + that.valueAccess + '"/>');

      });

      context.off("click", "#div_edit_secret_link");

      context.on("click", "#div_edit_secret_link", function() {

        var valueStr = $(".input_edit_value_secret", context).text();

        $(".value_td_secret", context).html('<input class="input_edit_value_secret" id="input_edit_secret" type="text" value="' + that.valueSecret + '"/>');

      });

      context.off("change", ".input_edit_value_region");

      context.on("change", ".input_edit_value_region", function() {

        var valueRegion = $(".input_edit_value_region").val();

        that.element["REGION_NAME"] = valueRegion;

        Sunstone.runAction(resourceType+".update_template",resourceId, TemplateUtils.templateToString(that.element));

      });

      context.off("change", ".input_edit_value_access");

      context.on("change", ".input_edit_value_access", function() {

        var valueAccess = $(".input_edit_value_access").val();

        that.element["EC2_ACCESS"] = valueAccess;

        Sunstone.runAction(resourceType+".update_template",resourceId, TemplateUtils.templateToString(that.element));

      });

      context.off("change", ".input_edit_value_secret");

      context.on("change", ".input_edit_value_secret", function() {

        var valueSecret = $(".input_edit_value_secret").val();

        that.element["EC2_SECRET"] = valueSecret;

        Sunstone.runAction(resourceType+".update_template",resourceId, TemplateUtils.templateToString(that.element));

      });

  }

  return {

    'html': _html,

    'setup': _setup

  }

});

<tr class="region_name">

  <td class="key_td">{{tr "Region name"}}</td>

  <td class="value_td_region">{{region_name}}</td>

  <td>

    <div id="div_edit_region">

      <a id="div_edit_region_link" class="edit_e" href="#"> <i class="fa fa-pencil-square-o right"/></a>

    </div>

  </td>

</tr>

<tr class="ec2_access">

  <td class="key_td">{{tr "EC2 Access"}}</td>

  <td class="value_td_access">{{ec2_access}}</td>

  <td>

    <div id="div_edit_access">

      <a id="div_edit_access_link" class="edit_e" href="#"> <i class="fa fa-pencil-square-o right"/></a>

    </div>

  </td>

</tr>

<tr class="ec2_secret">

  <td class="key_td">{{tr "EC2 Secret"}}</td>

  <td class="value_td_secret">{{ec2_secret}}</td>

  <td>

    <div id="div_edit_secret">

      <a id="div_edit_secret_link" class="edit_e" href="#"> <i class="fa fa-pencil-square-o right"/></a>

    </div>

  </td>

</tr>