Add unpriviledged user dashboard.

This dashboard is the same, except it doesnt contain user/group/hosts references, supposing the default user don't have such rights. To fill in the space left by hosts graphs, I have added Total VM memory and cpu graphs.
2025-03-22 18:50:08 +03:00 · 2011-07-06 17:06:45 +02:00 · 2011-07-06 17:06:45 +02:00 · 404fc4a282
commit 404fc4a282
parent fa9e37558c
2 changed files with 304 additions and 18 deletions
--- a/src/sunstone/public/js/plugins/dashboard-tab.js
+++ b/src/sunstone/public/js/plugins/dashboard-tab.js
@ -15,7 +15,7 @@
 /* -------------------------------------------------------------------------- */

 var HISTORY_LENGTH=40;
-var GRAPH_AUTOREFRESH_INTERVAL=100000; //100 secs
+var GRAPH_AUTOREFRESH_INTERVAL=60000; //60 secs

 var graph1 = {
    title : "graph1",
@ -84,8 +84,8 @@ var dashboard_tab_content =
              <td class="value_td"><span id="total_images"></span><span id="public_images"></span></td>\
            </tr>\
            <tr>\
-              <td class="key_td oneadmin">Users</td>\
-              <td class="value_td oneadmin"><span id="total_users"></span></td>\
+              <td class="key_td">Users</td>\
+              <td class="value_td"><span id="total_users"></span></td>\
            </tr>\
          </table>\
 \
@ -104,10 +104,9 @@ var dashboard_tab_content =
          <input type="radio" name="quickstart" value="Group.create_dialog">Group</input><br />\
          <input type="radio" name="quickstart" value="Template.create_dialog">VM Template</input><br />\
          <input type="radio" name="quickstart" value="VM.create_dialog">VM Instance</input><br />\
+          <input type="radio" name="quickstart" value="Network.create_dialog">Virtual Network</input><br />\
          <input type="radio" name="quickstart" value="Image.create_dialog">Image</input><br />\
          <input type="radio" name="quickstart" value="User.create_dialog">User</input><br />\
-          </td><td>\
-             <button id="quickstart">Go</button></fieldset></form>\
          </td></tr></table>\
      </div>\
    </td>\
@ -117,7 +116,7 @@ var dashboard_tab_content =
      <div class="panel">\
        <h3>Sunstone documentation</h3>\
        <ul style="list-style-type:none;">\
-          <li>Sunstone installation and setup</li>\
+          <li><a href="http://opennebula.org/documentation:rel3.0:sunstone" target="_blank">Sunstone installation and setup</a></li>\
          <li>Sunstone plugin guide</li>\
          <li>Sunstone plugin reference</li>\
        </ul>\
@ -209,23 +208,15 @@ function plot_global_graph(data,info){

 function quickstart_setup(){

-    $('#quickstart').button("disable");
-
    $('#quickstart_form input').click(function(){
-        $('#quickstart').val($(this).val());
-        $('#quickstart').button("enable");
-    });
-
-    $('#quickstart').click(function(){
        Sunstone.runAction($(this).val());
-        return false;
    });
 }

 function graph_autorefresh(){
    setInterval(function(){
        refresh_graphs();
-    },GRAPH_AUTOREFRESH_INTERVAL);
+    },GRAPH_AUTOREFRESH_INTERVAL+someTime();

 }

@ -246,9 +237,6 @@ $(document).ready(function(){
    });

    emptyDashboard();
-    if (uid!=0) {
-        $("td.oneadmin").hide();
-    }

    quickstart_setup();

--- a/src/sunstone/public/js/plugins/dashboard-users-tab.js
+++ b/src/sunstone/public/js/plugins/dashboard-users-tab.js
@ -0,0 +1,298 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2011, OpenNebula Project Leads (OpenNebula.org)             */
+/*                                                                            */
+/* 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.                                             */
+/* -------------------------------------------------------------------------- */
+
+var HISTORY_LENGTH=40;
+var GRAPH_AUTOREFRESH_INTERVAL=60000; //60 secs
+
+var graph1 = {
+    title : "graph1",
+    monitor_resources : "total,active,error",
+    history_length : HISTORY_LENGTH
+};
+
+var graph2 = {
+    title : "graph2",
+    monitor_resources : "cpu",
+    history_length : HISTORY_LENGTH
+};
+
+var graph3 = {
+    title : "graph3",
+    monitor_resources : "memory",
+    history_length : HISTORY_LENGTH
+};
+
+var graph4 = {
+    title : "graph4",
+    monitor_resources : "net_tx,net_rx",
+    history_length : HISTORY_LENGTH
+};
+
+var dashboard_tab_content =
+'<table id="dashboard_table">\
+<tr>\
+<td style="width:40%">\
+<table id="information_table">\
+  <tr>\
+    <td>\
+      <div class="panel">\
+        <h3>Summary of resources</h3>\
+        <div class="panel_info">\
+\
+          <table class="info_table">\
+            <tr>\
+              <td class="key_td">VM Templates (total/public)</td>\
+              <td class="value_td"><span id="total_templates"></span><span id="public_templates"></span></td>\
+            </tr>\
+            <tr>\
+              <td class="key_td">VM Instances (total/<span class="green">running</span>/<span class="red">failed</span>)</td>\
+              <td class="value_td"><span id="total_vms"></span><span id="running_vms" class="green"></span><span id="failed_vms" class="red"></span></td>\
+            </tr>\
+            <tr>\
+              <td class="key_td">Virtual Networks (total/public)</td>\
+              <td class="value_td"><span id="total_vnets"></span><span id="public_vnets"></span></td>\
+            </tr>\
+            <tr>\
+              <td class="key_td">Images (total/public)</td>\
+              <td class="value_td"><span id="total_images"></span><span id="public_images"></span></td>\
+            </tr>\
+          </table>\
+\
+        </div>\
+      </div>\
+    </td>\
+  </tr>\
+  <tr>\
+    <td>\
+      <div class="panel">\
+        <h3>Quickstart</h3>\
+        <form id="quickstart_form"><fieldset>\
+          <table style="width:100%;"><tr style="vertical-align:middle;"><td style="width:70%">\
+          <label style="font-weight:bold;width:40px;height:7em;">New:</label>\
+          <input type="radio" name="quickstart" value="Template.create_dialog">VM Template</input><br />\
+          <input type="radio" name="quickstart" value="VM.create_dialog">VM Instance</input><br />\
+          <input type="radio" name="quickstart" value="Network.create_dialog">Virtual Network</input><br />\
+          <input type="radio" name="quickstart" value="Image.create_dialog">Image</input><br />\
+          </td></tr></table>\
+      </div>\
+    </td>\
+  </tr>\
+  <tr>\
+    <td>\
+      <div class="panel">\
+        <h3>Sunstone documentation</h3>\
+        <ul style="list-style-type:none;">\
+          <li><a href="http://opennebula.org/documentation:rel3.0:sunstone" target="_blank">Sunstone installation and setup</a></li>\
+          <li>Sunstone plugin guide</li>\
+          <li>Sunstone plugin reference</li>\
+        </ul>\
+      </div>\
+    </td>\
+  </tr>\
+</table>\
+</td>\
+<td style="width:60%">\
+<table id="historical_table" style="width:100%">\
+  <tr>\
+    <td>\
+      <div class="panel">\
+        <h3>Historical monitoring information</h3>\
+        <div class="panel_info">\
+          <table class="info_table">\
+            <tr><td class="key_td graph_td">Total VM count</td>\
+                <td class="graph_td" id="graph1_legend"></td></tr>\
+            <tr><td id="graph1" colspan="2">'+spinner+'</td></tr>\
+            <tr><td class="key_td graph_td">Total VM CPU</td>\
+                <td class="graph_td" id="graph2_legend"></td></tr>\
+            <tr><td id="graph2" colspan="2">'+spinner+'</td></tr>\
+            <tr><td class="key_td graph_td">Total VM Memory</td>\
+                <td class="graph_td" id="graph3_legend"></td></tr>\
+            <tr><td id="graph3" colspan="2">'+spinner+'</td></tr>\
+            <tr><td class="key_td graph_td">VM Network stats</td>\
+                <td class="graph_td" id="graph4_legend"></td></tr>\
+            <tr><td id="graph4" colspan="2">'+spinner+'</td></tr>\
+          </table>\
+        </div>\
+      </div>\
+    </td>\
+  </tr>\
+</table>\
+</td>\
+</tr></table>';
+
+var dashboard_tab = {
+    title: 'Dashboard',
+    content: dashboard_tab_content,
+    condition : True
+}
+
+Sunstone.addMainTab('dashboard_tab',dashboard_tab);
+
+function plot_global_graph(data,info){
+    var id = info.title;
+    var labels_arr = info.monitor_resources.split(',');
+    var serie;
+    var series = [];
+    var width = ($(window).width()-129)*45/100;
+
+    $('#'+id).html('<div id="'+id+'_graph" style="height:70px;width:'+width+'px"><div>');
+
+    for (var i = 0; i< labels_arr.length; i++) {
+        serie = {
+            label: labels_arr[i],
+            data: data[i]
+        };
+        series.push(serie);
+    };
+
+    var options = {
+        legend : {
+            show : true,
+            noColumns: labels_arr.length,
+            container: $('#'+id+'_legend')
+        },
+        xaxis : {
+            mode: "time",
+            timeformat: "%h:%M"
+        },
+        yaxis : { labelWidth: 40 }
+    }
+
+    switch (id){
+    case "graph4":
+        options["yaxis"]["tickFormatter"] = function(val,axis) {
+            return humanize_size(val);
+        }
+    }
+
+    $.plot($('#'+id+'_graph'),series,options);
+}
+
+function quickstart_setup(){
+
+    $('#quickstart_form input').click(function(){
+        Sunstone.runAction($(this).val());
+    });
+}
+
+function graph_autorefresh(){
+    setInterval(function(){
+        refresh_graphs();
+    },GRAPH_AUTOREFRESH_INTERVAL+someTime());
+
+}
+
+function refresh_graphs(){
+    Sunstone.runAction("VM.monitor_all", graph1);
+    Sunstone.runAction("VM.monitor_all", graph2);
+    Sunstone.runAction("VM.monitor_all", graph3);
+    Sunstone.runAction("VM.monitor_all", graph4);
+}
+
+$(document).ready(function(){
+    //Dashboard link listener
+    $("#dashboard_table h3 a").live("click", function (){
+        var tab = $(this).attr('href');
+        showTab(tab);
+        return false;
+    });
+
+    emptyDashboard();
+
+    quickstart_setup();
+
+    refresh_graphs();
+    graph_autorefresh();
+
+});
+
+//puts the dashboard values into "retrieving"
+function emptyDashboard(){
+    $("#dashboard_tab .value_td span").html(spinner);
+}
+
+
+function updateDashboard(what,json_info){
+    var db = $('#dashboard_tab');
+    switch (what){
+    case "hosts":
+        var total_hosts=json_info.length;
+        var active_hosts=0;
+        $.each(json_info,function(){
+            if (parseInt(this.HOST.STATE) < 3){
+                active_hosts++;}
+        });
+        $('#total_hosts',db).html(total_hosts+'&nbsp;/&nbsp;');
+        $('#active_hosts',db).html(active_hosts);
+        break;
+    case "groups":
+        var total_groups=json_info.length;
+        $('#total_groups',db).html(total_groups);
+        break;
+    case "vms":
+        var total_vms=json_info.length;
+        var running_vms=0;
+            failed_vms=0;
+        $.each(json_info,function(){
+            vm_state = parseInt(this.VM.STATE);
+            if (vm_state == 3){
+                running_vms++;
+            }
+            else if (vm_state == 7) {
+                failed_vms++;
+            }
+        });
+        $('#total_vms',db).html(total_vms+'&nbsp;/&nbsp;');
+        $('#running_vms',db).html(running_vms+'&nbsp;/&nbsp;');
+        $('#failed_vms',db).html(failed_vms);
+        break;
+    case "vnets":
+        var public_vnets=0;
+        var total_vnets=json_info.length;
+        $.each(json_info,function(){
+            if (parseInt(this.VNET.PUBLIC)){
+                public_vnets++;}
+        });
+        $('#total_vnets',db).html(total_vnets+'&nbsp;/&nbsp;');
+        $('#public_vnets',db).html(public_vnets);
+        break;
+    case "users":
+        var total_users=json_info.length;
+        $('#total_users',db).html(total_users);
+        break;
+    case "images":
+        var total_images=json_info.length;
+        var public_images=0;
+        $.each(json_info,function(){
+            if (parseInt(this.IMAGE.PUBLIC)){
+                public_images++;}
+        });
+        $('#total_images',db).html(total_images+'&nbsp;/&nbsp;');
+        $('#public_images',db).html(public_images);
+        break;
+    case "templates":
+        var total_templates=json_info.length;
+        var public_templates=0;
+        $.each(json_info,function(){
+            if (parseInt(this.VMTEMPLATE.PUBLIC)){
+                public_templates++;
+            }
+        });
+        $('#total_templates',db).html(total_templates+'&nbsp;/&nbsp;');
+        $('#public_templates',db).html(public_templates);
+        break;
+    }
+}