SelfService: Add user quota information to dashboard

(cherry picked from commit cf518f895ce11eb9a805d646565c0954dc46b6eb)

src/cloud/occi/lib/occi-server.rb

@@ -199,6 +199,7 @@ helpers do
 
             session[:ip] = request.ip
             session[:user] = username
+            session[:user_id] = user['ID']
             session[:remember] = params[:remember]
 
             if params[:remember]
@@ -400,6 +401,9 @@ get '/ui' do
     response.set_cookie("occi-user",
                         :value=>"#{session[:user]}",
                         :expires=>time)
+    response.set_cookie("occi-user-id",
+                        :value=>"#{session[:user_id]}",
+                        :expires=>time)
 
     erb :index
 end

src/cloud/occi/lib/ui/public/css/application.css

@@ -592,3 +592,10 @@ ul.action_list li a:hover{
     border:0;
 }
 
+.padding1 {
+    padding-left: 30px!important;
+}
+
+.padding2 {
+    padding-left: 55px!important;
+}

src/cloud/occi/lib/ui/public/js/occi.js

@@ -590,4 +590,15 @@ var OCCI = {
         },
     },
 
+    "User" : {
+        "resource" : "USER",
+        "list" : function(params){
+            OCCI.Action.list(params,OCCI.User.resource);
+        },
+        "show" : function(params){
+            OCCI.Action.show(params,OCCI.User.resource);
+        },
+
+    },
+
 }

src/cloud/occi/lib/ui/public/js/plugins/dashboard.js

@@ -34,38 +34,24 @@ var dashboard_tab_content =
   <tr>\
     <td>\
       <div class="panel">\
-<h3>' + tr("Current resources") + '</h3>\
+<h3>' + tr("Resources and quotas") + '<i class="icon-refresh action_button" value="User.refresh" style="float:right;cursor:pointer"></i></h3>\
         <div class="panel_info">\
 \
-          <table class="info_table">\
-            <tr>\
-              <td class="key_td">'+tr("Compute")+'</td>\
-              <td class="value_td">'+$vm_count+'</span></td>\
-            </tr>\
-            <tr>\
-              <td class="key_td">' + tr("Storage") + '</td>\
-              <td class="value_td">'+$storage_count+'</span></td>\
-            </tr>\
-            <tr>\
-              <td class="key_td">' + tr("Network") + '</td>\
-              <td class="value_td">'+$network_count+'</span></td>\
-            </tr>\
+          <table class="info_table" id="quota_usage_table">\
+             <tr id="vm_quotas"><td class="key_td">'+tr("Compute")+':</td>\
+                 <td class="value_td">'+$vm_count+'</td></tr>\
+             <tr id="ds_quotas"><td class="key_td">'+tr("Storage quotas")+':</td>\
+                 <td class="value_td"></td></tr>\
+             <tr id="image_quotas"><td class="key_td">'+tr("Images")+':</td>\
+                 <td class="value_td">'+$storage_count+'</td></tr>\
+             <tr id="network_quotas"><td class="key_td">'+tr("Networks")+':</td>\
+                 <td class="value_td">'+$network_count+'</td></tr>\
           </table>\
 \
         </div>\
       </div>\
     </td>\
   </tr>\
-  <tr>\
-    <td>\
-      <div class="panel">\
-        <h3>' + tr("Useful links") + '</h3>\
-        <div class="panel_info dashboard_p">'+
-    generateDashboardLinks() +'\
-        </div>\
-      </div>\
-    </td>\
-  </tr>\
 </table>\
 </td>\
 <td style="width:50%">\
@@ -75,8 +61,8 @@ var dashboard_tab_content =
       <div class="panel">\
         <h3>' + compute_box_title + '</h3>\
         <div class="panel_info dashboard_p">\
-<img style="float:right;width:100px;" src="'+ 
-    compute_box_image + '" />'+ 
+<img style="float:right;width:100px;" src="'+
+    compute_box_image + '" />'+
     compute_box_html +
     '<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#vms_tab" action="VM.create_dialog">'+tr("Create new compute resource")+'</a><br />\
 <span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="tab_link" href="#vms_tab">'+tr("See more")+'</a></p>\
@@ -90,7 +76,7 @@ var dashboard_tab_content =
         <h3>' + storage_box_title + '</h3>\
         <div class="panel_info dashboard_p">\
 <img style="float:right;width:100px;" src="'+
-    storage_box_image +'" />' + 
+    storage_box_image +'" />' +
     storage_box_html +
     '<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#images_tab" action="Image.create_dialog">'+tr("Create new storage resource")+'</a><br />\
 <span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="tab_link" href="#images_tab">'+tr("See more")+'</a></p>\
@@ -112,6 +98,16 @@ var dashboard_tab_content =
       </div>\
     </td>\
   </tr>\
+  <tr>\
+    <td>\
+      <div class="panel">\
+        <h3>' + tr("Useful links") + '</h3>\
+        <div class="panel_info dashboard_p">'+
+    generateDashboardLinks() +'\
+        </div>\
+      </div>\
+    </td>\
+  </tr>\
 </table>\
 </td>\
 </tr></table>';
@@ -121,6 +117,25 @@ var dashboard_tab = {
     content: dashboard_tab_content
 }
 
+
+Sunstone.addAction("User.show", {
+    type: "single",
+    call: OCCI.User.show,
+    callback: dashboardQuotasHTML,
+    error: onError
+});
+
+Sunstone.addAction('User.refresh', {
+    type: "custom",
+    call: function(){
+        emptyDashboard();
+        Sunstone.runAction('User.show', uid);
+        Sunstone.runAction('VM.refresh');
+        Sunstone.runAction('Image.refresh');
+        Sunstone.runAction('Network.refresh');
+    }
+});
+
 Sunstone.addMainTab('dashboard_tab',dashboard_tab);
 
 function quickstart_setup(){
@@ -140,6 +155,156 @@ function generateDashboardLinks(){
 };
 
 
+function dashboardQuotaRow(quota_json){
+    var row = '';
+
+    var label = function(used, max, unit){
+        max = parseInt(max,10) ? max : "unlimited";
+
+        if (unit)
+            return used+'&nbsp;'+unit+'&nbsp;/&nbsp'+max+'&nbsp;'+unit;
+
+        return used + '&nbsp;/&nbsp'+ max
+
+    }
+
+    switch (quota_json.TYPE){
+    case "VM":
+        var vms_used = quota_json.VMS_USED;
+        var vms = quota_json.VMS;
+        var vms_ratio = vms_used * 100 / vms;
+        row += '<tr class="quotas"><td class="padding1">'+tr("Virtual Machines quotas")+'</td>';
+        row += '<td class="value_td">'+
+            progressBar(vms_ratio,
+                        { width: '200px', height: '15px',
+                          label: label(vms_used,vms),
+                          fontSize: '1em', labelVPos: '0px' }) +
+            '</td></tr>';
+        var memory_used = quota_json.MEMORY_USED;
+        var memory = quota_json.MEMORY;
+        var memory_ratio = memory_used * 100 / memory;
+
+        row += '<tr class="quotas"><td class="padding1">'+tr("Memory")+'</td>';
+        row += '<td class="value_td">'+
+            progressBar(memory_ratio,
+                        { width: '200px', height: '15px',
+                          label: label(memory_used, memory, 'MB'),
+                          fontSize: '1em', labelVPos: '0px',
+                          labelHPos: '65px' }) +
+            '</td></tr>';
+
+        var cpu_used = quota_json.CPU_USED;
+        var cpu = quota_json.CPU;
+        var cpu_ratio = cpu_used * 100 / cpu;
+
+        row += '<tr class="quotas"><td class="padding1">'+tr("CPU")+'</td>';
+        row += '<td class="value_td">'+
+            progressBar(cpu_ratio,
+                        { width: '200px', height: '15px',
+                          label: label(cpu_used, cpu),
+                          fontSize: '1em', labelVPos: '0px' }) +
+            '</td></tr>';
+        break;
+    case "DATASTORE":
+        var size_used = quota_json.SIZE_USED;
+        var size = quota_json.SIZE;
+        var size_ratio = parseInt(size,10) ? size_used * 100 / size: 0;
+        row += '<tr class="quotas"><td class="padding1">'+tr("Storage size")+'</td>';
+        row += '<td class="value_td">'+
+            progressBar(size_ratio,
+                        { width: '200px', height: '15px',
+                          label: label(size_used, size, 'MB'),
+                          fontSize: '1em', labelVPos: '0px',
+                          labelHPos: '65px' }) +
+            '</td></tr>';
+
+        var images_used = quota_json.IMAGES_USED;
+        var images = quota_json.IMAGES;
+        var images_ratio = images_used * 100 / images;
+
+        row += '<tr class="quotas"><td class="padding1">'+tr("Number of images")+'</td>';
+        row += '<td class="value_td">'+
+            progressBar(images_ratio,
+                        { width: '200px', height: '15px',
+                          label: label(images_used, images),
+                          fontSize: '1em', labelVPos: '0px' }) +
+            '</td></tr>';
+        break;
+    case "IMAGE":
+        row += '<tr class="quotas"><td class="padding1">'+tr("Image quota")+' (id '+quota_json.ID+'):</td><td></td></tr>';
+
+        var rvms_used = quota_json.RVMS_USED;
+        var rvms = quota_json.RVMS;
+        var rvms_ratio = parseInt(rvms,10) ? rvms_used * 100 / rvms : 0;
+
+        row += '<tr class="quotas"><td class="padding2">'+tr("RVMs")+'</td>';
+        row += '<td class="value_td">'+
+            progressBar(rvms_ratio,
+                        { width: '200px', height: '15px',
+                          label: label(rvms_used, rvms),
+                          fontSize: '1em', labelVPos: '0px' }) +
+            '</td></tr>';
+        break;
+    case "NETWORK":
+        row += '<tr class="quotas"><td class="padding1">'+tr("Network quota")+' (id '+quota_json.ID+'):</td><td></td></tr>';
+
+        var leases_used = quota_json.LEASES_USED
+        var leases = quota_json.LEASES
+        var leases_ratio = leases_used * 100 / leases;
+
+        row += '<tr class="quotas"><td class="padding2">'+tr("Leases")+'</td>';
+
+        row += '<td class="value_td">'+
+            progressBar(leases_ratio,
+                        { width: '200px', height: '15px',
+                          label: label(leases_used, leases),
+                          fontSize: '1em', labelVPos: '0px' }) +
+            '</td></tr>';
+        break;
+    }
+    return row;
+}
+
+function dashboardQuotasHTML(req, response){
+    var user = response.USER;
+    var html = '';
+
+    var context = $('#dashboard_table table#quota_usage_table');
+
+    var results = parseQuotas(user, dashboardQuotaRow);
+
+    $('.quotas', context).remove();
+    $('#vm_quotas', context).after(results.VM);
+    $('#ds_quotas', context).after(results.DATASTORE);
+    $('#image_quotas', context).after(results.IMAGE);
+    $('#network_quotas', context).after(results.NETWORK);
+};
+
+//puts the dashboard values into "retrieving"
+function emptyDashboard(){
+    $("#dashboard_tab .value_td span",main_tabs_context).html(spinner);
+}
+
+
+function updateDashboard(what,json_info){
+    var db = $('#dashboard_tab',main_tabs_context);
+    switch (what){
+    case "vms":
+        var total_vms=json_info.length;
+        $('.vm_count',db).html(total_vms);
+        break;
+    case "vnets":
+        var total_vnets=json_info.length;
+        $('.network_count',db).html(total_vnets);
+        break;
+    case "images":
+        var total_images=json_info.length;
+        $('.storage_count',db).html(total_images);
+        break;
+    }
+}
+
+
 $(document).ready(function(){
     //Dashboard link listener
     $("#dashboard_table h3 a",main_tabs_context).live("click", function (){
@@ -173,28 +338,13 @@ $(document).ready(function(){
         hideDialog();
     });
 
-});
-
-//puts the dashboard values into "retrieving"
-function emptyDashboard(){
-    $("#dashboard_tab .value_td span",main_tabs_context).html(spinner);
-}
-
-
-function updateDashboard(what,json_info){
-    var db = $('#dashboard_tab',main_tabs_context);
-    switch (what){
-    case "vms":
-        var total_vms=json_info.length;
-        $('.vm_count',db).html(total_vms);
-        break;
-    case "vnets":
-        var total_vnets=json_info.length;
-        $('.network_count',db).html(total_vnets);
-        break;
-    case "images":
-        var total_images=json_info.length;
-        $('.storage_count',db).html(total_images);
-        break;
+    //preload
+    dashboardQuotasHTML(null, { USER : {
+        VM_QUOTA: {},
+        DATASTORE_QUOTA: {},
+        IMAGE_QUOTA: {},
+        NETWORK_QUOTA: {}
     }
-}
+                        });
+    Sunstone.runAction("User.show", uid);
+});

src/sunstone/public/js/sunstone-util.js

@@ -1196,4 +1196,30 @@ function quotaListItem(quota_json){
     }
     str += '</td><td><button class="quota_edit_icon"><i class="icon-pencil"></i></button></pre></td></tr>';
     return str;
+}
+
+/* Returns the code of a jquery progress bar
+   Options: object with width, height, label and fontSize as keys
+*/
+function progressBar(value, opts){
+    if (!opts) opts = {};
+
+    if (!opts.width) opts.width = 'auto';
+
+    if (!opts.label) opts.label = "";
+
+    if (!opts.height) opts.height = '10px';
+
+    if (!opts.fontSize) opts.fontSize = '0.6em';
+
+    if (!opts.labelVPos) opts.labelVPos = '-4px';
+
+    if (!opts.labelHPos) opts.labelHPos = '90px';
+
+    return '<div style="height:'+opts.height+';width:'+opts.width+';" class="ratiobar ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="'+value+'">\
+           <div class="ui-progressbar-value ui-widget-header ui-corner-left ui-corner-right" style="width: '+value+'%;">\
+             <span style="position:relative;left:'+opts.labelHPos+';font-weight:normal;top:'+opts.labelVPos+';font-size:'+opts.fontSize+';">'+opts.label+'</span>\
+           </div>\
+           </div>\
+         </div>';
 }

src/sunstone/public/js/sunstone.js

@@ -408,6 +408,7 @@ function setLogin(){
         break;
     case "selfservice":
         username = cookie["occi-user"];
+        uid = cookie["occi-user-id"];
         break;
     };