From 1d89f306edfbbca1af2773327bf0dac245f4ab65 Mon Sep 17 00:00:00 2001
From: Daniel Molina <dmolina@opennebula.org>
Date: Thu, 18 Jun 2015 19:08:11 +0200
Subject: [PATCH] feature #3748: refactor provision users

---
 .../app/tabs/provision-tab/users/create.hbs   |   2 +-
 .../app/tabs/provision-tab/users/info.hbs     |   6 +-
 .../app/tabs/provision-tab/users/list.hbs     |  18 +-
 .../app/tabs/provision-tab/users/list.js      | 760 ++++++++++++++++++
 .../tabs/provision-tab/users/quota-widget.js  | 136 ++++
 .../provision-tab/users/quota-widget/html.hbs | 114 +++
 6 files changed, 1023 insertions(+), 13 deletions(-)
 create mode 100644 src/sunstone/public/app/tabs/provision-tab/users/list.js
 create mode 100644 src/sunstone/public/app/tabs/provision-tab/users/quota-widget.js
 create mode 100644 src/sunstone/public/app/tabs/provision-tab/users/quota-widget/html.hbs

diff --git a/src/sunstone/public/app/tabs/provision-tab/users/create.hbs b/src/sunstone/public/app/tabs/provision-tab/users/create.hbs
index 5497ff3b04..436edd1133 100644
--- a/src/sunstone/public/app/tabs/provision-tab/users/create.hbs
+++ b/src/sunstone/public/app/tabs/provision-tab/users/create.hbs
@@ -47,7 +47,7 @@
             </div>
           </div>
         </div>
-        <div class="content" id="provision_create_user_manual_quota">{{> ./quota-widget}}</div>
+        <div class="content" id="provision_create_user_manual_quota">{{> tabs/provision-tab/users/quota-widget/html}}</div>
       </div>
     </div>
   </div>
diff --git a/src/sunstone/public/app/tabs/provision-tab/users/info.hbs b/src/sunstone/public/app/tabs/provision-tab/users/info.hbs
index 257072b3d6..958525efa2 100644
--- a/src/sunstone/public/app/tabs/provision-tab/users/info.hbs
+++ b/src/sunstone/public/app/tabs/provision-tab/users/info.hbs
@@ -10,13 +10,13 @@
     <div class="large-12 large-centered columns">
       <ul class="inline-list provision_action_icons">
         <li class="">
-          <a href"#" data-tooltip title="{{tr "Update the User Quotas"}}" class="left button medium secondary radius provision_vdc_user_quota_confirm_button tip-top">
+          <a href"#" data-tooltip title="{{tr "Update the User Quotas"}}" class="left button small secondary radius provision_vdc_user_quota_confirm_button tip-top">
             <i class="fa fa-fw fa-lg fa-align-left"/></a>
-          <a href"#" data-tooltip title="{{tr "Change the password of the User"}}" class="left button medium secondary radius provision_vdc_user_password_confirm_button tip-top">
+          <a href"#" data-tooltip title="{{tr "Change the password of the User"}}" class="left button small secondary radius provision_vdc_user_password_confirm_button tip-top">
             <i class="fa fa-fw fa-lg fa-lock"/></a>
         </li>
         <li class="right">
-          <a href"#" data-tooltip title="{{tr "Delete the User"}}" class="right button medium radius alert provision_vdc_user_delete_confirm_button tip-top">
+          <a href"#" data-tooltip title="{{tr "Delete the User"}}" class="right button small radius alert provision_vdc_user_delete_confirm_button tip-top">
             <i class="fa fa-fw fa-lg fa-trash-o"/>
           </a>
         </li>
diff --git a/src/sunstone/public/app/tabs/provision-tab/users/list.hbs b/src/sunstone/public/app/tabs/provision-tab/users/list.hbs
index 23c5dbfe97..b475bea73a 100644
--- a/src/sunstone/public/app/tabs/provision-tab/users/list.hbs
+++ b/src/sunstone/public/app/tabs/provision-tab/users/list.hbs
@@ -1,22 +1,22 @@
 <dl class="accordion accordion_list provision_list_users" data-accordion>
   <dd class="active accordion-navigation">
     <a href="#provision_list_user_accordion{{accordionId}}" class="provision_back right only-not-active">
-      <span class="button medium radius"> <i class="fa fa-fw fa-lg fa-th"/><i class="fa fa-fw fa-lg fa-chevron-left"/>
+      <span class="button small radius"> <i class="fa fa-fw fa-lg fa-th"/><i class="fa fa-fw fa-lg fa-chevron-left"/>
       </span>
     </a>
-    <h2 class="subheader">
-      {{tr "Users"}}
-      <span class="provision_info_vdc_user_name only-not-active" style="margin-left: 20px; color: #777; font-size: 20px"></span>
-      <span href"#" class="right only-active provision_users_list_refresh_button button medium radius secondary" data-tooltip title="{{tr "Refresh"}}">
+    <h3 class="subheader">
+      {{!tr "Users"}}
+      <span class="provision_info_vdc_user_name only-not-active"></span>
+      <span href"#" class="right only-active provision_users_list_refresh_button button small radius secondary" data-tooltip title="{{tr "Refresh"}}">
         <i class="fa fa-fw fa-lg fa-refresh"/></span>
-      <span href"#" class="right only-not-active provision_refresh_info button medium radius secondary" data-tooltip title="{{tr "Refresh"}}">
+      <span href"#" class="right only-not-active provision_refresh_info button small radius secondary" data-tooltip title="{{tr "Refresh"}}">
         <i class="fa fa-fw fa-lg fa-refresh"/>
       </span>
-      <input type="search" class="provision_list_users_search provision-search-input right only-active" placeholder="Search"/>
-      <span href"#" class="right only-active provision_create_user_button button medium radius success">
+      <input type="search" class="provision_list_users_search provision-search-input only-active" placeholder="Search Users"/>
+      <span href"#" class="right only-active provision_create_user_button button small radius success">
         <i class="fa fa-fw fa-lg fa-plus-square"/>
       </span>
-    </h2>
+    </h3>
     <div id="provision_list_user_accordion{{accordionId}}" class="content active">
       <div class="row">
         <div class="large-12 large-centered columns">
diff --git a/src/sunstone/public/app/tabs/provision-tab/users/list.js b/src/sunstone/public/app/tabs/provision-tab/users/list.js
new file mode 100644
index 0000000000..babaa2fc21
--- /dev/null
+++ b/src/sunstone/public/app/tabs/provision-tab/users/list.js
@@ -0,0 +1,760 @@
+define(function(require) {
+  var OpenNebula = require('opennebula');
+  var Locale = require('utils/locale');
+  var Config = require('sunstone-config');
+  var Notifier = require('utils/notifier');
+  var QuotaWidgets = require('utils/quotas/quota-widgets');
+  var QuotaLimits = require('utils/quotas/quota-limits');
+  var QuotaDefaults = require('utils/quotas/quota-defaults');
+  var Accounting = require('utils/accounting');
+  var Showback = require('utils/showback');
+
+  var ProvisionQuotaWidget = require('./quota-widget');
+  var ProvisionVmsList = require('tabs/provision-tab/vms/list');
+
+  var TemplateProvisionQuotaWidget = require('hbs!./quota-widget/html');
+  var TemplateUsersList = require('hbs!./list');
+
+  var _accordionId = 0;
+
+  return {
+    'generate': generate_provision_users_list,
+    'show': show_provision_user_list
+  };
+
+  function show_provision_user_list(timeout) {
+    $(".section_content").hide();
+    $(".provision_users_list_section").fadeIn();
+
+    $("dd:not(.active) .provision_back", $(".provision_users_list_section")).trigger("click");
+    $(".provision_users_list_refresh_button", $(".provision_users_list_section")).trigger("click");
+  }
+
+  function generate_provision_users_list(context, opts) {
+    context.off();
+    context.html(html(opts));
+    setup_provision_users_list(context);
+    setup_provision_user_info(context);
+  }
+
+  function html(opts_arg) {
+    _accordionId += 1;
+    return TemplateUsersList({'accordionId': _accordionId});
+  }
+
+  function update_provision_users_datatable(datatable, timeout) {
+    datatable.html('<div class="text-center">' +
+      '<span class="fa-stack fa-5x" style="color: #dfdfdf">' +
+        '<i class="fa fa-cloud fa-stack-2x"></i>' +
+        '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>' +
+      '</span>' +
+      '<br>' +
+      '<br>' +
+      '<span style="font-size: 18px; color: #999">' +
+      '</span>' +
+      '</div>');
+
+    setTimeout(function() {
+      OpenNebula.User.list({
+        timeout: true,
+        success: function (request, item_list, quotas_list) {
+          datatable.fnClearTable(true);
+          if (item_list.length == 0) {
+            datatable.html('<div class="text-center">' +
+              '<span class="fa-stack fa-5x" style="color: #dfdfdf">' +
+                '<i class="fa fa-cloud fa-stack-2x"></i>' +
+                '<i class="fa fa-info-circle fa-stack-1x fa-inverse"></i>' +
+              '</span>' +
+              '<br>' +
+              '<br>' +
+              '<span style="font-size: 18px; color: #999">' +
+                Locale.tr("The list of users is empty") +
+              '</span>' +
+              '</div>');
+          } else {
+            provision_quotas_list = quotas_list;
+            datatable.fnAddData(item_list);
+          }
+        },
+        error: Notifier.onError
+      })
+    }, timeout);
+  }
+
+  function setup_provision_users_list(context) {
+    var provision_users_datatable = $('.provision_users_table', context).dataTable({
+      "iDisplayLength": 6,
+      "sDom" : '<"H">t<"F"lp>',
+      "aLengthMenu": [[6, 12, 36, 72], [6, 12, 36, 72]],
+      "aaSorting"  : [[0, "desc"]],
+      "aoColumnDefs": [
+          {"bVisible": false, "aTargets": ["all"]}
+      ],
+      "aoColumns": [
+          {"mDataProp": "USER.ID"},
+          {"mDataProp": "USER.NAME"}
+      ],
+      "fnPreDrawCallback": function (oSettings) {
+        // create a thumbs container if it doesn't exist. put it in the dataTables_scrollbody div
+        if (this.$('tr', {"filter": "applied"}).length == 0) {
+          this.html('<div class="text-center">' +
+            '<span class="fa-stack fa-5x" style="color: #dfdfdf">' +
+              '<i class="fa fa-cloud fa-stack-2x"></i>' +
+              '<i class="fa fa-info-circle fa-stack-1x fa-inverse"></i>' +
+            '</span>' +
+            '<br>' +
+            '<br>' +
+            '<span style="font-size: 18px; color: #999">' +
+              Locale.tr("The list of users is empty") +
+            '</span>' +
+            '</div>');
+        } else {
+          $(".provision_users_table", context).html('<ul class="provision_users_ul large-block-grid-3 medium-block-grid-3 small-block-grid-1 text-center"></ul>');
+        }
+
+        return true;
+      },
+      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+        var data = aData.USER;
+        //var state = get_provision_vm_state(data);
+        var vms = "";
+        var memory = "";
+        var cpu = "";
+
+        // Inject the VM user quota. This info is returned separately in the
+        // pool info call, but the userElementArray expects it inside the USER,
+        // as it is returned by the individual info call
+        var q = provision_quotas_list[data.ID];
+
+        var quotas_html;
+
+        if (q != undefined) {
+          var quota = q.QUOTAS;
+
+          if ($.isEmptyObject(quota.VM_QUOTA)) {
+            var limit = (data.ID != 0 ? QuotaLimits.QUOTA_LIMIT_DEFAULT : QuotaLimits.QUOTA_LIMIT_UNLIMITED);
+
+            quota.VM_QUOTA = {
+                VM: {
+                  VMS         : limit,
+                  VMS_USED    : 0,
+                  CPU         : limit,
+                  CPU_USED    : 0,
+                  MEMORY      : limit,
+                  MEMORY_USED : 0
+                }
+              }
+          }
+
+          if (!$.isEmptyObject(quota.VM_QUOTA)) {
+            var default_user_quotas = QuotaDefaults.getDefaultUserQuotas();
+                
+            quotas = QuotaWidgets.quotaFloatInfo(
+                quota.VM_QUOTA.VM.VMS_USED,
+                quota.VM_QUOTA.VM.VMS,
+                default_user_quotas.VM_QUOTA.VM.VMS,
+                true);
+
+            quotas_html = "";
+            quotas_html += '<li class="provision-bullet-item text-left">' +
+              Locale.tr("VMs") +
+              '<span class="right">' + quotas.str + "</span>" +
+            '</li>' +
+            '<li class="provision-bullet-item text-left">' +
+              '<div class="progress small radius">' +
+              '  <span class="meter" style="width: ' + quotas.percentage + '%;"></span>' +
+              '</div>' +
+            '</li>';
+
+            quotas = QuotaWidgets.quotaFloatInfo(
+                quota.VM_QUOTA.VM.CPU_USED,
+                quota.VM_QUOTA.VM.CPU,
+                default_user_quotas.VM_QUOTA.VM.CPU,
+                true);
+
+            quotas_html += '<li class="provision-bullet-item text-left">' +
+              Locale.tr("CPU") +
+              '<span class="right">' + quotas.str + "</span>" +
+            '</li>' +
+            '<li class="provision-bullet-item text-left">' +
+              '<div class="progress small radius">' +
+              '  <span class="meter" style="width: ' + quotas.percentage + '%;"></span>' +
+              '</div>' +
+            '</li>';
+
+            quotas = QuotaWidgets.quotaMBInfo(
+                quota.VM_QUOTA.VM.MEMORY_USED,
+                quota.VM_QUOTA.VM.MEMORY,
+                default_user_quotas.VM_QUOTA.VM.MEMORY,
+                true);
+
+            quotas_html += '<li class="provision-bullet-item text-left">' +
+              Locale.tr("Memory") +
+              '<span class="right">' + quotas.str + "</span>" +
+            '</li>' +
+            '<li class="provision-bullet-item text-left">' +
+              '<div class="progress small radius">' +
+              '  <span class="meter" style="width: ' + quotas.percentage + '%;"></span>' +
+              '</div>' +
+            '</li>';
+          } else {
+            quotas = QuotaWidgets.quotaFloatInfo(0, 0, null, true);
+
+            quotas_html = "";
+            quotas_html += '<li class="provision-bullet-item text-left">' +
+              Locale.tr("VMs") +
+              '<span class="right">' + quotas.str + "</span>" +
+            '</li>' +
+            '<li class="provision-bullet-item text-left">' +
+              '<div class="progress small radius">' +
+              '  <span class="meter" style="width: ' + quotas.percentage + '%;"></span>' +
+              '</div>' +
+            '</li>';
+
+            quotas = QuotaWidgets.quotaFloatInfo(0, 0, null, true);
+
+            quotas_html += '<li class="provision-bullet-item text-left">' +
+              Locale.tr("CPU") +
+              '<span class="right">' + quotas.str + "</span>" +
+            '</li>' +
+            '<li class="provision-bullet-item text-left">' +
+              '<div class="progress small radius">' +
+              '  <span class="meter" style="width: ' + quotas.percentage + '%;"></span>' +
+              '</div>' +
+            '</li>';
+
+            quotas = QuotaWidgets.quotaMBInfo(0, 0, null, true);
+
+            quotas_html += '<li class="provision-bullet-item text-left">' +
+              Locale.tr("Memory") +
+              '<span class="right">' + quotas.str + "</span>" +
+            '</li>' +
+            '<li class="provision-bullet-item text-left">' +
+              '<div class="progress small radius">' +
+              '  <span class="meter" style="width: ' + quotas.percentage + '%;"></span>' +
+              '</div>' +
+            '</li>';
+          }
+        }
+
+        $(".provision_users_ul", context).append('<li>' +
+            '<ul class="provision-pricing-table" opennebula_id="' + data.ID + '" datatable_index="' + iDisplayIndexFull + '">' +
+              '<li class="provision-title text-left" style="padding-bottom: 10px">' +
+                '<a class="provision_info_user_button" style="color:#555" href="#"><i class="fa fa-fw fa-lg fa-sign-in right only-on-hover"/>' + data.NAME + '</a>' +
+              '</li>' +
+                quotas_html +
+            '</ul>' +
+          '</li>');
+
+        return nRow;
+      }
+    });
+
+    $('.provision_list_users_search', context).keyup(function() {
+      provision_users_datatable.fnFilter($(this).val());
+    })
+
+    $('.provision_list_users_search', context).change(function() {
+      provision_users_datatable.fnFilter($(this).val());
+    })
+
+    context.on("click", ".provision_users_list_refresh_button", function() {
+      OpenNebula.Action.clear_cache("USER");
+      update_provision_users_datatable(provision_users_datatable, 0);
+      return false;
+    });
+
+    $(document).foundation();
+  }
+
+
+  function setup_provision_user_info(context) {
+    function update_provision_vdc_user_info(user_id, context) {
+      $(".provision_info_vdc_user_name", context).text("");
+      $(".provision_vdc_info_container", context).html("");
+      $(".provision_info_vdc_user", context).hide();
+      $(".provision_info_vdc_user_loading", context).fadeIn();
+
+      OpenNebula.User.show({
+        data : {
+          id: user_id
+        },
+        error: Notifier.onError,
+        success: function(request, response){
+          var data = response.USER
+
+          $(".provision_vdc_user_confirm_action",context).html("");
+          $(".provision_info_vdc_user_acct",context).html("");
+
+          $(".provision_info_vdc_user", context).attr("opennebula_id", data.ID);
+          $(".provision_info_vdc_user", context).attr("uname", data.NAME);
+          $(".provision_info_vdc_user", context).attr("quotas", JSON.stringify(data.VM_QUOTA));
+          $(".provision_info_vdc_user_name", context).text(data.NAME);
+
+          $(".provision-pricing-table_user_info", context).html("");
+
+          QuotaWidgets.initEmptyQuotas(data);
+
+          if (!$.isEmptyObject(data.VM_QUOTA)){
+              var default_user_quotas = QuotaDefaults.default_quotas(data.DEFAULT_USER_QUOTAS);
+              quotas = QuotaWidgets.quotaFloatInfo(
+                  data.VM_QUOTA.VM.VMS_USED,
+                  data.VM_QUOTA.VM.VMS,
+                  default_user_quotas.VM_QUOTA.VM.VMS,
+                  true);
+
+              $(".provision-pricing-table_user_info", context).append('<li class="provision-bullet-item text-left">'+
+                Locale.tr("Running VMs")+
+                '<span class="right">'+quotas.str+"</span>"+
+              '</li>'+
+              '<li class="provision-bullet-item text-left">'+
+                '<div class="progress small radius" style="background: #f7f7f7">'+
+                '  <span class="meter" style="width: '+quotas.percentage+'%;"></span>'+
+                '</div>'+
+              '</li>');
+
+              quotas = QuotaWidgets.quotaFloatInfo(
+                  data.VM_QUOTA.VM.CPU_USED,
+                  data.VM_QUOTA.VM.CPU,
+                  default_user_quotas.VM_QUOTA.VM.CPU,
+                  true);
+
+              $(".provision-pricing-table_user_info", context).append('<li class="provision-bullet-item text-left">'+
+                Locale.tr("CPU")+
+                '<span class="right">'+quotas.str+"</span>"+
+              '</li>'+
+              '<li class="provision-bullet-item text-left">'+
+                '<div class="progress small radius" style="background: #f7f7f7">'+
+                '  <span class="meter" style="width: '+quotas.percentage+'%;"></span>'+
+                '</div>'+
+              '</li>');
+
+              quotas = QuotaWidgets.quotaMBInfo(
+                  data.VM_QUOTA.VM.MEMORY_USED,
+                  data.VM_QUOTA.VM.MEMORY,
+                  default_user_quotas.VM_QUOTA.VM.MEMORY,
+                  true);
+
+              $(".provision-pricing-table_user_info", context).append('<li class="provision-bullet-item text-left">'+
+                Locale.tr("Memory")+
+                '<span class="right">'+quotas.str+"</span>"+
+              '</li>'+
+              '<li class="provision-bullet-item text-left">'+
+                '<div class="progress small radius" style="background: #f7f7f7">'+
+                '  <span class="meter" style="width: '+quotas.percentage+'%;"></span>'+
+                '</div>'+
+              '</li>');
+          } else {
+            quotas = QuotaWidgets.quotaFloatInfo(0, 0, null, true);
+
+            $(".provision-pricing-table_user_info", context).append('<li class="provision-bullet-item text-left">'+
+              Locale.tr("Running VMs")+
+              '<span class="right">'+quotas.str+"</span>"+
+            '</li>'+
+            '<li class="provision-bullet-item text-left">'+
+              '<div class="progress small radius" style="background: #f7f7f7">'+
+              '  <span class="meter" style="width: '+quotas.percentage+'%;"></span>'+
+              '</div>'+
+            '</li>');
+
+            quotas = QuotaWidgets.quotaFloatInfo(0, 0, null, true);
+
+            $(".provision-pricing-table_user_info", context).append('<li class="provision-bullet-item text-left">'+
+              Locale.tr("CPU")+
+              '<span class="right">'+quotas.str+"</span>"+
+            '</li>'+
+            '<li class="provision-bullet-item text-left">'+
+              '<div class="progress small radius" style="background: #f7f7f7">'+
+              '  <span class="meter" style="width: '+quotas.percentage+'%;"></span>'+
+              '</div>'+
+            '</li>');
+
+            quotas = QuotaWidgets.quotaMBInfo(0, 0, null, true);
+
+            $(".provision-pricing-table_user_info", context).append('<li class="provision-bullet-item text-left">'+
+              Locale.tr("Memory")+
+              '<span class="right">'+quotas.str+"</span>"+
+            '</li>'+
+            '<li class="provision-bullet-item text-left">'+
+              '<div class="progress small radius" style="background: #f7f7f7">'+
+              '  <span class="meter" style="width: '+quotas.percentage+'%;"></span>'+
+              '</div>'+
+            '</li>');
+          }
+
+          $(".provision-pricing-table_user_info", context).append(
+              '<li class="text-left provision-bullet-item">'+
+                '<hr style="margin: 0px">'+
+              '</li>'+
+              '<li class="provision-bullet-item ">'+
+                '<span class="provision_vdc_user_info_show_vms button medium radius" data-tooltip title="'+Locale.tr("User Virtual Machines")+'" style="margin-right: 10px">'+
+                  '<i class="fa fa-th fa-lg"></i>'+
+                '</span>'+
+                '<span class="provision_vdc_user_info_show_templates button medium radius" data-tooltip title="'+Locale.tr("User Saved Templates")+'" style="margin-right: 10px">'+
+                  '<i class="fa fa-save fa-lg"></i>'+
+                '</span>'+
+                '<span class="provision_vdc_user_info_show_flows button medium radius" data-tooltip title="'+Locale.tr("User Services")+'" style="margin-right: 10px">'+
+                  '<i class="fa fa-cubes fa-lg"></i>'+
+                '</span>'+
+                '<span class="provision_vdc_user_info_show_acct button medium radius" data-tooltip title="'+Locale.tr("User Accounting")+'" style="margin-right: 10px">'+
+                  '<i class="fa fa-bar-chart-o fa-lg"></i>'+
+                '</span>'+
+                (Config.isFeatureEnabled("showback") ? '<span class="provision_vdc_user_info_show_showback button medium radius" data-tooltip title="'+Locale.tr("User Showback")+'" style="margin-right: 10px">'+
+                  '<i class="fa fa-money fa-lg"></i>'+
+                '</span>' : '') +
+              '</li>'+
+              '<li class="provision-bullet-item text-left">'+
+              '</li>')
+
+          var start_time =  Math.floor(new Date().getTime() / 1000);
+          // ms to s
+
+          // 604800 = 7 days = 7*24*60*60
+          start_time = start_time - 604800;
+
+          // today
+          var end_time = -1;
+
+          var options = {
+            "start_time": start_time,
+            "end_time": end_time,
+            "userfilter": user_id
+          }
+
+          var no_table = true;
+
+          OpenNebula.VM.accounting({
+              success: function(req, response){
+                  Accounting.fillAccounting($(".dashboard_vm_accounting", context), req, response, no_table);
+              },
+              error: Notifier.onError,
+              data: options
+          });
+
+          $(".provision_info_vdc_user", context).show();
+          $(".provision_info_vdc_user_loading", context).hide();
+
+          $(document).foundation();
+          //$("#provision_info_vdc_quotas").html(quotas_html);
+        }
+      })
+    }
+    //
+    // Info User
+    //
+
+    $(".provision_list_users", context).on("click", ".provision_info_user_button", function(){
+      $("a.provision_show_user_accordion", context).trigger("click");
+      // TODO loading
+
+      var user_id = $(this).parents(".provision-pricing-table").attr("opennebula_id")
+      update_provision_vdc_user_info(user_id, context);
+    })
+
+    context.on("click", ".provision_vdc_user_info_show_vms", function(){
+      $(".provision_vdc_info_container", context).html('<div class="text-center">'+
+        '<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
+          '<i class="fa fa-cloud fa-stack-2x"></i>'+
+          '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>'+
+        '</span>'+
+        '<br>'+
+        '<br>'+
+        '<span style="font-size: 18px; color: #999">'+
+        '</span>'+
+        '</div>');
+
+      ProvisionVmsList.generate(
+        $(".provision_vdc_info_container", context),
+        {
+          title:  $(".provision_info_vdc_user", context).attr("uname") + ' ' + Locale.tr("VMs"),
+          active: true,
+          refresh: true,
+          create: false,
+          filter: false,
+          filter_expression:  $(".provision_info_vdc_user", context).attr("opennebula_id")
+        });
+    })
+
+    context.on("click", ".provision_vdc_user_info_show_templates", function(){
+      $(".provision_vdc_info_container", context).html('<div class="text-center">'+
+        '<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
+          '<i class="fa fa-cloud fa-stack-2x"></i>'+
+          '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>'+
+        '</span>'+
+        '<br>'+
+        '<br>'+
+        '<span style="font-size: 18px; color: #999">'+
+        '</span>'+
+        '</div>');
+
+      generate_provision_templates_list(
+        $(".provision_vdc_info_container", context),
+        {
+          title:  $(".provision_info_vdc_user", context).attr("uname") + ' ' + Locale.tr("Templates"),
+          active: true,
+          refresh: true,
+          create: false,
+          filter: false,
+          filter_expression:  $(".provision_info_vdc_user", context).attr("opennebula_id")
+        });
+    })
+
+    context.on("click", ".provision_vdc_user_info_show_flows", function(){
+      $(".provision_vdc_info_container", context).html('<div class="text-center">'+
+        '<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
+          '<i class="fa fa-cloud fa-stack-2x"></i>'+
+          '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>'+
+        '</span>'+
+        '<br>'+
+        '<br>'+
+        '<span style="font-size: 18px; color: #999">'+
+        '</span>'+
+        '</div>');
+
+      generate_provision_flows_list(
+        $(".provision_vdc_info_container", context),
+        {
+          title:  $(".provision_info_vdc_user", context).attr("uname") + ' ' + Locale.tr("Services"),
+          active: true,
+          refresh: true,
+          create: false,
+          filter: false,
+          filter_expression:  $(".provision_info_vdc_user", context).attr("opennebula_id")
+        });
+    })
+
+
+    context.on("click", ".provision_vdc_user_info_show_acct", function(){
+      $(".provision_vdc_info_container", context).html("");
+
+      $(".provision_vdc_info_container", context).html(Accounting.html());
+      Accounting.setup(
+        $(".provision_vdc_info_container", context),
+          { fixed_user: $(".provision_info_vdc_user", context).attr("opennebula_id"),
+            init_group_by: "vm" });
+
+      $(".provision_vdc_info_container", context).prepend(
+        '<h2 class="subheader">'+
+          $(".provision_info_vdc_user", context).attr("uname") + ' ' + Locale.tr("Accounting")+
+        '</h2>')
+    })
+
+    if (Config.isFeatureEnabled("showback")) { 
+      context.on("click", ".provision_vdc_user_info_show_showback", function(){
+        $(".provision_vdc_info_container", context).html("");
+
+        $(".provision_vdc_info_container", context).html(Showback.html());
+        Showback.setup(
+          $(".provision_vdc_info_container", context),
+            { fixed_user: $(".provision_info_vdc_user", context).attr("opennebula_id"),
+              fixed_group: "" });
+
+        $(".provision_vdc_info_container", context).prepend(
+          '<h2 class="subheader">'+
+            $(".provision_info_vdc_user", context).attr("uname") + ' ' + Locale.tr("Showback")+
+          '</h2>')
+      })
+    };
+
+    context.on("click", ".provision_vdc_user_delete_confirm_button", function(){
+      $(".provision_vdc_user_confirm_action", context).html(
+        '<div data-alert class="alert-box secondary radius">'+
+          '<div class="row">'+
+            '<div class="large-10 large-centered columns">'+
+              '<span style="font-size: 14px; line-height: 20px">'+
+                Locale.tr("Be careful, this action will inmediately remove the User from OpenNebula")+
+              '</span>'+
+            '</div>'+
+          '</div>'+
+          '<br>'+
+          '<div class="row">'+
+            '<div class="large-10 large-centered columns">'+
+              '<a href"#" class="provision_delete_button alert button large-12 large radius">'+Locale.tr("Delete User")+'</a>'+
+            '</div>'+
+          '</div>'+
+          '<a href="#" class="close" style="top: 20px">&times;</a>'+
+        '</div>');
+    });
+
+    context.on("click", ".provision_vdc_user_password_confirm_button", function(){
+      $(".provision_vdc_user_confirm_action", context).html(
+        '<div data-alert class="alert-box secondary radius">'+
+          '<div class="row">'+
+            '<div class="large-10 large-centered columns">'+
+              '<input type="password" class="provision_vdc_user_new_password provision-input" placeholder="'+Locale.tr("New Password")+'" style="height: 40px !important; font-size: 16px; padding: 0.5rem  !important;"/>'+
+            '</div>'+
+          '</div>'+
+          '<div class="row">'+
+            '<div class="large-10 large-centered columns">'+
+              '<input type="password" class="provision_vdc_user_new_confirm_password provision-input" placeholder="'+Locale.tr("Confirm Password")+'" style="height: 40px !important; font-size: 16px; padding: 0.5rem  !important;"/>'+
+              '<br>'+
+            '</div>'+
+          '</div>'+
+          '<div class="row">'+
+            '<div class="large-10 large-centered columns">'+
+              '<button href"#" type="submit" class="provision_vdc_user_change_password_button button success large radius large-12 small-12">'+Locale.tr("Update Password")+'</button>'+
+            '</div>'+
+          '</div>'+
+          '<a href="#" class="close" style="top: 20px">&times;</a>'+
+        '</div>');
+
+        context.on("click", ".provision_vdc_user_change_password_button", function(){
+          var button = $(this);
+          button.attr("disabled", "disabled");
+          var user_id = $(".provision_info_vdc_user", context).attr("opennebula_id");
+          var pw = $('.provision_vdc_user_new_password', context).val();
+          var confirm_password = $('.provision_vdc_user_new_confirm_password', context).val();
+
+          if (!pw.length){
+              Notifier.notifyError(Locale.tr("Fill in a new password"));
+              return false;
+          }
+
+          if (pw !== confirm_password){
+              Notifier.notifyError(Locale.tr("Passwords do not match"));
+              return false;
+          }
+
+          OpenNebula.User.passwd({
+            data : {
+              id: user_id,
+              extra_param: pw
+            },
+            success: function(request, response){
+              update_provision_vdc_user_info(user_id, context);
+              button.removeAttr("disabled");
+            },
+            error: function(request, response){
+              Notifier.onError(request, response);
+              button.removeAttr("disabled");
+            }
+          })
+          return false;
+        });
+    });
+
+
+
+    context.on("click", ".provision_vdc_user_quota_confirm_button", function(){
+      $(".provision_vdc_user_confirm_action", context).html(
+        '<div data-alert class="alert-box secondary radius">'+
+          TemplateProvisionQuotaWidget() +
+          '<br>'+
+          '<br>'+
+          '<div class="row">'+
+            '<div class="large-10 large-centered columns">'+
+              '<a href"#" class="provision_update_quota_button success large button large-12 radius" style="margin-right: 15px">'+Locale.tr("Update User Quota")+'</a>'+
+            '</div>'+
+          '</div>'+
+          '<a href="#" class="close" style="top: 20px">&times;</a>'+
+        '</div>');
+
+        ProvisionQuotaWidget.setup(context);
+
+        $(document).foundation();
+
+        var quotas_str = $(".provision_info_vdc_user", context).attr("quotas");
+        if (quotas_str) {
+          var quotas = JSON.parse(quotas_str);
+
+          var vms_limit = QuotaLimits.QUOTA_LIMIT_DEFAULT;
+          var cpu_limit = QuotaLimits.QUOTA_LIMIT_DEFAULT;
+          var mem_limit = QuotaLimits.QUOTA_LIMIT_DEFAULT;
+
+          if ( quotas.VM != undefined ){
+            vms_limit = quotas.VM.VMS;
+            cpu_limit = quotas.VM.CPU;
+            mem_limit = quotas.VM.MEMORY;
+
+            if(mem_limit != QuotaLimits.QUOTA_LIMIT_UNLIMITED &&
+               mem_limit != QuotaLimits.QUOTA_LIMIT_DEFAULT){
+
+              mem_limit = quotas.VM.MEMORY/1024;
+            }
+          }
+
+          var fill_limits = function(limit, select, input){
+            switch(limit){
+              case QuotaLimits.QUOTA_LIMIT_DEFAULT:
+                select.val('default').change();
+                input.val('').change();
+                break;
+
+              case QuotaLimits.QUOTA_LIMIT_UNLIMITED:
+                select.val('unlimited').change();
+                input.val('').change();
+                break;
+
+              default:
+                select.val('edit').change();
+                input.val(limit).change();
+            }
+          }
+
+          fill_limits(
+            vms_limit,
+            $("div.provision_rvms_quota select.provision_quota_select", context),
+            $(".provision_rvms_quota_input", context) );
+
+          fill_limits(
+            cpu_limit,
+            $("div.provision_cpu_quota select.provision_quota_select", context),
+            $(".provision_cpu_quota_input", context) );
+
+          fill_limits(
+            mem_limit,
+            $("div.provision_memory_quota select.provision_quota_select", context),
+            $(".provision_memory_quota_tmp_input", context) );
+        }
+    });
+
+    context.on("click", ".provision_delete_button", function(){
+      var button = $(this);
+      button.attr("disabled", "disabled");
+      var user_id = $(".provision_info_vdc_user", context).attr("opennebula_id");
+      OpenNebula.User.del({
+        data : {
+          id: user_id
+        },
+        success: function(request, response){
+          $(".provision_back", context).click();
+          $(".provision_users_list_refresh_button", context).click();
+          button.removeAttr("disabled");
+        },
+        error: function(request, response){
+          Notifier.onError(request, response);
+          button.removeAttr("disabled");
+        }
+      })
+    });
+
+    context.on("click", ".provision_update_quota_button", function(){
+      var button = $(this);
+      button.attr("disabled", "disabled");
+      var user_id = $(".provision_info_vdc_user", context).attr("opennebula_id");
+
+      quota_json = ProvisionQuotaWidget.retrieve(context);
+
+      OpenNebula.User.set_quota({
+        data : {
+          id: user_id,
+          extra_param: quota_json
+        },
+        success: function(request, response){
+          update_provision_vdc_user_info(user_id, context);
+          button.removeAttr("disabled");
+        },
+        error: function(request, response){
+          Notifier.onError(request, response);
+          button.removeAttr("disabled");
+        }
+      })
+    });
+
+    context.on("click", ".provision_refresh_info", function(){
+      var user_id = $(".provision_info_vdc_user", context).attr("opennebula_id");
+      update_provision_vdc_user_info(user_id, context);
+      return false;
+    });
+  }
+});
diff --git a/src/sunstone/public/app/tabs/provision-tab/users/quota-widget.js b/src/sunstone/public/app/tabs/provision-tab/users/quota-widget.js
new file mode 100644
index 0000000000..8311874373
--- /dev/null
+++ b/src/sunstone/public/app/tabs/provision-tab/users/quota-widget.js
@@ -0,0 +1,136 @@
+define(function(require) {
+  var QuotaLimits = require('utils/quotas/quota-limits');
+  
+  return {
+    'setup': setup_provision_quota_widget,
+    'reset': reset_provision_quota_widget,
+    'retrieve': retrieve_provision_quota_widget
+  }
+  
+  function setup_provision_quota_widget(context){
+      // Mode selector, for the 3 sliders
+      $("select.provision_quota_select", context).on('change', function(){
+        var row = $(this).closest(".row");
+
+        switch($(this).val()) {
+          case "edit":
+            $("div.provision_quota_edit", row).show();
+            $("div.provision_quota_default", row).hide();
+            $("div.provision_quota_unlimited", row).hide();
+
+            $("input", row).change();
+
+            break;
+
+          case "default":
+            $("div.provision_quota_edit", row).hide();
+            $("div.provision_quota_default", row).show();
+            $("div.provision_quota_unlimited", row).hide();
+
+            break;
+
+          case "unlimited":
+            $("div.provision_quota_edit", row).hide();
+            $("div.provision_quota_default", row).hide();
+            $("div.provision_quota_unlimited", row).show();
+
+            break;
+        }
+
+        return false;
+      });
+
+      var provision_rvms_quota_input = $(".provision_rvms_quota_input", context);
+
+      $( ".provision_rvms_quota_slider", context).on('change', function(){
+        provision_rvms_quota_input.val($(this).attr('data-slider'))
+      });
+
+      provision_rvms_quota_input.change(function() {
+          $( ".provision_rvms_quota_slider", context).foundation(
+                                              'slider', 'set_value', this.value);
+      });
+
+      var provision_cpu_quota_input = $(".provision_cpu_quota_input", context);
+
+      $( ".provision_cpu_quota_slider", context).on('change', function(){
+        provision_cpu_quota_input.val($(this).attr('data-slider'))
+      });
+
+      provision_cpu_quota_input.change(function() {
+          $( ".provision_cpu_quota_slider", context).foundation(
+                                              'slider', 'set_value', this.value);
+      });
+
+      var provision_memory_quota_input = $(".provision_memory_quota_input", context);
+      var provision_memory_quota_tmp_input = $(".provision_memory_quota_tmp_input", context);
+
+      var update_final_memory_input = function() {
+        var value = provision_memory_quota_tmp_input.val();
+        if (value > 0) {
+         provision_memory_quota_input.val( Math.floor(value * 1024) );
+        } else {
+         provision_memory_quota_input.val(value);
+        }
+      }
+
+      $( ".provision_memory_quota_slider", context).on('change', function(){
+        provision_memory_quota_tmp_input.val($(this).attr('data-slider'));
+        update_final_memory_input();
+      });
+
+      provision_memory_quota_tmp_input.change(function() {
+          update_final_memory_input();
+          $( ".provision_memory_quota_slider", context).foundation(
+                                              'slider', 'set_value', this.value);
+      });
+
+      $(".provision_rvms_quota_input", context).val('').change();
+      $(".provision_memory_quota_input", context).val('').change();
+      $(".provision_memory_quota_tmp_input", context).val('').change();
+      $(".provision_cpu_quota_input", context).val('').change();
+  }
+
+  function reset_provision_quota_widget(context){
+    $("select.provision_quota_select", context).val('edit').change();
+
+    $(".provision_rvms_quota_input", context).val('').change();
+    $(".provision_memory_quota_input", context).val('').change();
+    $(".provision_memory_quota_tmp_input", context).val('').change();
+    $(".provision_cpu_quota_input", context).val('').change();
+  }
+
+  function retrieve_provision_quota_widget(context){
+    var retrieve_quota = function(select, input){
+      switch(select.val()) {
+        case "edit":
+          return input.val();
+        case "default":
+          return QuotaLimits.QUOTA_LIMIT_DEFAULT;
+        case "unlimited":
+          return QuotaLimits.QUOTA_LIMIT_UNLIMITED;
+      }
+    }
+
+    var vms_limit = retrieve_quota(
+          $(".provision_rvms_quota select.provision_quota_select", context),
+          $(".provision_rvms_quota_input", context));
+
+    var cpu_limit = retrieve_quota(
+          $(".provision_cpu_quota select.provision_quota_select", context),
+          $(".provision_cpu_quota_input", context));
+
+    var mem_limit = retrieve_quota(
+          $(".provision_memory_quota select.provision_quota_select", context),
+          $(".provision_memory_quota_input", context));
+
+    return {
+      "VM" : {
+        "VOLATILE_SIZE": QuotaLimits.QUOTA_LIMIT_DEFAULT,
+        "VMS":    vms_limit,
+        "MEMORY": mem_limit,
+        "CPU":    cpu_limit
+      }
+    };
+  }
+});
diff --git a/src/sunstone/public/app/tabs/provision-tab/users/quota-widget/html.hbs b/src/sunstone/public/app/tabs/provision-tab/users/quota-widget/html.hbs
new file mode 100644
index 0000000000..3e11ccaa63
--- /dev/null
+++ b/src/sunstone/public/app/tabs/provision-tab/users/quota-widget/html.hbs
@@ -0,0 +1,114 @@
+<div class="row">
+  <div class="large-12 large-centered columns">
+    <h5 class="subheader text-right">
+      <span class="left" style="margin-bottom: 0.5em">{{tr "Running VMs"}}</span>
+    </h5>
+  </div>
+</div>
+<div class="row provision_rvms_quota">
+  <div class="medium-3 small-12 columns">
+    <select class="provision_quota_select">
+      <option value="edit">{{tr "Manual"}}</option>
+      <option value="unlimited">{{tr "Unlimited"}}</option>
+      <option value="default">{{tr "Default"}}</option>
+    </select>
+  </div>
+  <div class="medium-9 small-12 columns provision_quota_edit">
+    <div class="row collapse">
+      <div class="small-9 columns">
+        <div class="range-slider radius provision_rvms_quota_slider" data-slider data-options="start: 0; end: 50;">
+          <span class="range-slider-handle"></span>
+          <span class="range-slider-active-segment"></span>
+          <input type="hidden"></div>
+      </div>
+      <div class="large-2 small-2 columns">
+        <input type="text"  class="provision-input provision_rvms_quota_input" style="margin-top: -7px; height: 40px !important; font-size: 16px; padding: 0.5rem  !important;"/>
+      </div>
+    </div>
+  </div>
+  <div class="medium-9 small-12 columns provision_quota_unlimited" style="display:none">
+    <span style="font-size: 18px; color: #999">{{tr "Unlimited. Group quotas will still apply"}}</span>
+  </div>
+  <div class="medium-9 small-12 columns provision_quota_default" style="display:none">
+    <span style="font-size: 18px; color: #999">
+      {{tr "Use the default system quotas set by the cloud adminstrator"}}
+    </span>
+  </div>
+</div>
+<div class="row">
+  <div class="large-12 large-centered columns">
+    <h5 class="subheader text-right">
+      <span class="left" style="margin-bottom: 0.5em">{{tr "CPU"}}</span>
+    </h5>
+  </div>
+</div>
+<div class="row provision_cpu_quota">
+  <div class="medium-3 small-12 columns">
+    <select class="provision_quota_select">
+      <option value="edit">{{tr "Manual"}}</option>
+      <option value="unlimited">{{tr "Unlimited"}}</option>
+      <option value="default">{{tr "Default"}}</option>
+    </select>
+  </div>
+  <div class="medium-9 small-12 columns provision_quota_edit">
+    <div class="row collapse">
+      <div class="small-9 columns">
+        <div class="range-slider radius provision_cpu_quota_slider" data-slider data-options="start: 0; end: 50;">
+          <span class="range-slider-handle"></span>
+          <span class="range-slider-active-segment"></span>
+          <input type="hidden"></div>
+      </div>
+      <div class="large-2 small-2 columns">
+        <input type="text"  class="provision-input provision_cpu_quota_input" style="margin-top: -7px; height: 40px !important; font-size: 16px; padding: 0.5rem  !important;"/>
+      </div>
+    </div>
+  </div>
+  <div class="medium-9 small-12 columns provision_quota_unlimited" style="display:none">
+    <span style="font-size: 18px; color: #999">{{tr "Unlimited. Group quotas will still apply"}}</span>
+  </div>
+  <div class="medium-9 small-12 columns provision_quota_default" style="display:none">
+    <span style="font-size: 18px; color: #999">
+      {{tr "Use the default system quotas set by the cloud adminstrator"}}
+    </span>
+  </div>
+</div>
+<div class="row">
+  <div class="large-12 large-centered columns">
+    <h5 class="subheader text-right">
+      <span class="left" style="margin-bottom: 0.5em">{{tr "Memory (GBs)"}}</span>
+    </h5>
+  </div>
+</div>
+<div class="vm_param">
+  <input type="hidden" class="provision_memory_quota_input"/>
+</div>
+<div class="row provision_memory_quota">
+  <div class="medium-3 small-12 columns">
+    <select class="provision_quota_select">
+      <option value="edit">{{tr "Manual"}}</option>
+      <option value="unlimited">{{tr "Unlimited"}}</option>
+      <option value="default">{{tr "Default"}}</option>
+    </select>
+  </div>
+  <div class="medium-9 small-12 columns provision_quota_edit">
+    <div class="row collapse">
+      <div class="small-9 columns">
+        <div class="range-slider radius provision_memory_quota_slider" data-slider data-options="start: 0; end: 50;">
+          <span class="range-slider-handle"></span>
+          <span class="range-slider-active-segment"></span>
+          <input type="hidden"></div>
+      </div>
+      <div class="large-2 small-2 columns">
+        <input type="text"  class="provision-input provision_memory_quota_tmp_input" style="margin-top: -7px; height: 40px !important; font-size: 16px; padding: 0.5rem  !important;"/>
+      </div>
+    </div>
+  </div>
+  <div class="medium-9 small-12 columns provision_quota_unlimited" style="display:none">
+    <span style="font-size: 18px; color: #999">{{tr "Unlimited. Group quotas will still apply"}}</span>
+  </div>
+  <div class="medium-9 small-12 columns provision_quota_default" style="display:none">
+    <span style="font-size: 18px; color: #999">
+      {{tr "Use the default system quotas set by the cloud adminstrator"}}
+    </span>
+  </div>
+</div>
\ No newline at end of file