mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-20 10:50:08 +03:00
Merge branch 'feature-1299'
This commit is contained in:
Ruben S. Montero
commit
8f41ce739c
@ -1195,6 +1195,7 @@ SUNSTONE_PUBLIC_JS_FILES="src/sunstone/public/js/layout.js \
|
||||
src/sunstone/public/js/sunstone.js \
|
||||
src/sunstone/public/js/sunstone-util.js \
|
||||
src/sunstone/public/js/opennebula.js \
|
||||
src/sunstone/public/js/monitoring.js \
|
||||
src/sunstone/public/js/locale.js"
|
||||
|
||||
SUNSTONE_PUBLIC_JS_PLUGINS_FILES="\
|
||||
@ -1269,6 +1270,7 @@ SUNSTONE_PUBLIC_VENDOR_JQUERYLAYOUT="\
|
||||
SUNSTONE_PUBLIC_VENDOR_FLOT="\
|
||||
src/sunstone/public/vendor/flot/jquery.flot.min.js \
|
||||
src/sunstone/public/vendor/flot/jquery.flot.navigate.min.js \
|
||||
src/sunstone/public/vendor/flot/jquery.flot.pie.min.js \
|
||||
src/sunstone/public/vendor/flot/LICENSE.txt \
|
||||
src/sunstone/public/vendor/flot/NOTICE \
|
||||
src/sunstone/public/vendor/flot/README.txt"
|
||||
|
||||
@ -644,7 +644,7 @@ ul.action_list li a:hover{
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.legend {
|
||||
.legend_p {
|
||||
color: #636663;
|
||||
margin-left: 10px;
|
||||
margin-top: 3px;
|
||||
@ -653,6 +653,14 @@ ul.action_list li a:hover{
|
||||
/* border-bottom: 1px solid #A3A3A3; */
|
||||
}
|
||||
|
||||
.legend:before {
|
||||
.legend_p:before {
|
||||
content: '⇨ ';
|
||||
}
|
||||
|
||||
.big_text {
|
||||
color: #333333;
|
||||
font-size: 5em;
|
||||
font-family: serif;
|
||||
text-align:center;
|
||||
vertical-align:middle;
|
||||
}
|
||||
392
src/sunstone/public/js/monitoring.js
Normal file
392
src/sunstone/public/js/monitoring.js
Normal file
@ -0,0 +1,392 @@
|
||||
var SunstoneMonitoring = {
|
||||
monitor : function(resource, list){
|
||||
|
||||
if (!SunstoneMonitoringConfig[resource])
|
||||
return false
|
||||
|
||||
var monConfigs = SunstoneMonitoringConfig[resource].monitor
|
||||
var monitoring = {}
|
||||
for (conf in monConfigs){
|
||||
var conf_obj = monConfigs[conf]
|
||||
var plotID = conf
|
||||
var series = conf_obj.operation(resource, list, conf_obj)
|
||||
monitoring[plotID]=series
|
||||
}
|
||||
|
||||
//Call back after monitorization is done
|
||||
SunstoneMonitoringConfig[resource].plot(monitoring)
|
||||
},
|
||||
plot : function(resource,plotID,container,series){
|
||||
var config = SunstoneMonitoringConfig[resource].monitor[plotID]
|
||||
var options = config.plotOptions
|
||||
$.plot(container,series,options)
|
||||
},
|
||||
ops : {
|
||||
partition : function(resource,list,config){
|
||||
var path = config.path
|
||||
var partitionPath = config.partitionPath
|
||||
var dataType = config.dataType
|
||||
var partitions = {}
|
||||
for (var i=0; i< list.length; i++){
|
||||
var elem = list[i][resource]
|
||||
var value = path ? parseInt(explore_path(elem,path),10) : 1
|
||||
var partition = explore_path(elem, partitionPath)
|
||||
|
||||
//Things on cluster none
|
||||
if (partitionPath == "CLUSTER" && !partition.length)
|
||||
partition = "none"
|
||||
|
||||
if (!partitions[partition])
|
||||
partitions[partition] = value
|
||||
else
|
||||
partitions[partition] += value
|
||||
}
|
||||
|
||||
var series = []
|
||||
var i = 0;
|
||||
for (partition in partitions) {
|
||||
var value = partitions[partition]
|
||||
var data;
|
||||
switch (dataType){
|
||||
case "pie":
|
||||
data = value; break
|
||||
case "bars":
|
||||
data = [[i,value]]; break
|
||||
case "horizontal_bars":
|
||||
data = [[value,i]]; break
|
||||
default:
|
||||
data = value;
|
||||
}
|
||||
var color = config.colorize ? config.colorize(partition) : null
|
||||
series.push({ label: partition,
|
||||
data: data,
|
||||
color: color
|
||||
})
|
||||
i++
|
||||
}
|
||||
|
||||
return series
|
||||
},
|
||||
hostCpuUsagePartition : function(resource,list,config){
|
||||
partitions = {
|
||||
"Idle" : 0,
|
||||
"Ok" : 0,
|
||||
"Used" : 0,
|
||||
"Working" : 0,
|
||||
"Overloaded" : 0
|
||||
}
|
||||
|
||||
for (var i=0; i< list.length; i++){
|
||||
var elem = list[i].HOST
|
||||
var value = elem.HOST_SHARE.USED_CPU * 100 /
|
||||
elem.HOST_SHARE.MAX_CPU
|
||||
if (value > 80)
|
||||
partitions["Overloaded"]++
|
||||
else if (value > 60)
|
||||
partitions["Working"]++
|
||||
else if (value > 40)
|
||||
partitions["Used"]++
|
||||
else if (value > 20)
|
||||
partitions["Ok"]++
|
||||
else
|
||||
partitions["Idle"]++
|
||||
}
|
||||
|
||||
series = [];
|
||||
for (partition in partitions) {
|
||||
var data = partitions[partition]
|
||||
var color = config.colorize ? config.colorize(partition) : null
|
||||
series.push({ label: partition,
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
return series
|
||||
},
|
||||
totalize : function(resource,list,config){
|
||||
return list.length
|
||||
},
|
||||
singleBar : function(resource,list,config){
|
||||
var paths = config.paths
|
||||
|
||||
var totals = new Array(paths.length)
|
||||
for (var i=0; i< totals.length; i++) totals[i] = 0
|
||||
|
||||
var series = []
|
||||
|
||||
for (var i=0; i< list.length; i++){
|
||||
var elem = list[i][resource]
|
||||
for (var j=0; j< paths.length; j++)
|
||||
totals[j] += parseInt(explore_path(elem,paths[j]),10)
|
||||
}
|
||||
|
||||
for (var i=0; i< totals.length; i++){
|
||||
series.push({
|
||||
data: [[totals[i],0]],
|
||||
label: paths[i],
|
||||
color: config.colorize? config.colorize(paths[i]) : null
|
||||
})
|
||||
}
|
||||
return series
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var SunstoneMonitoringConfig = {
|
||||
"HOST" : {
|
||||
plot: function(mon){
|
||||
plotHostMonitoring(mon) //not defined at parsing moment
|
||||
},
|
||||
monitor : {
|
||||
"statePie" : {
|
||||
partitionPath: "STATE",
|
||||
operation: SunstoneMonitoring.ops.partition,
|
||||
dataType: "pie",
|
||||
colorize: function(state){
|
||||
switch (state) {
|
||||
case '0': return "rgb(239,201,86)" //yellow
|
||||
case '1': return "rgb(175,216,248)" //blue
|
||||
case '2': return "rgb(108,183,108)" //green
|
||||
case '3': return "rgb(203,75,75)" //red
|
||||
case '4': return "rgb(71,71,71)" //gray
|
||||
case '5': return "rgb(160,160,160)" //light gray
|
||||
}
|
||||
},
|
||||
plotOptions : {
|
||||
series: { pie: { show: true } },
|
||||
legend : {
|
||||
labelFormatter: function(label, series){
|
||||
return OpenNebula.Helper.resource_state("host_simple",label) +
|
||||
' - ' + series.data[0][1] + ' (' +
|
||||
Math.floor(series.percent) + '%' + ')';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cpuPerCluster" : {
|
||||
path: ["HOST_SHARE","CPU_USAGE"],
|
||||
partitionPath: "CLUSTER_ID",
|
||||
operation: SunstoneMonitoring.ops.partition,
|
||||
dataType: "bars",
|
||||
plotOptions: {
|
||||
series: { bars: {show: true, barWidth: 0.5 }},
|
||||
xaxis: { show: false },
|
||||
yaxis: { min: 0 },
|
||||
legend : {
|
||||
noColumns: 2,
|
||||
labelFormatter: function(label){
|
||||
if (label == "-1") return "none"
|
||||
return getClusterName(label)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"memoryPerCluster" : {
|
||||
path: ["HOST_SHARE","MEM_USAGE"],
|
||||
partitionPath: "CLUSTER_ID",
|
||||
operation: SunstoneMonitoring.ops.partition,
|
||||
dataType: "bars",
|
||||
plotOptions: {
|
||||
series: { bars: {show: true, barWidth: 0.5 }},
|
||||
xaxis: { show: false },
|
||||
yaxis: {
|
||||
tickFormatter : function(val,axis) {
|
||||
return humanize_size(val);
|
||||
},
|
||||
min: 0
|
||||
},
|
||||
legend : {
|
||||
noColumns: 2,
|
||||
labelFormatter: function(label){
|
||||
if (label == "-1") return "none"
|
||||
return getClusterName(label)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"globalCpuUsage" : {
|
||||
partitionPath: ["HOST_SHARE", "USED_CPU"],
|
||||
dataType: "pie",
|
||||
operation: SunstoneMonitoring.ops.hostCpuUsagePartition,
|
||||
plotOptions: {
|
||||
series: { pie: { show: true } },
|
||||
}
|
||||
},
|
||||
"totalHosts" : {
|
||||
operation: SunstoneMonitoring.ops.totalize
|
||||
},
|
||||
"cpuUsageBar" : {
|
||||
paths: [
|
||||
["HOST_SHARE","MAX_CPU"],
|
||||
["HOST_SHARE","USED_CPU"],
|
||||
["HOST_SHARE","CPU_USAGE"],
|
||||
],
|
||||
operation: SunstoneMonitoring.ops.singleBar,
|
||||
plotOptions: {
|
||||
series: { bars: { show: true,
|
||||
horizontal: true,
|
||||
barWidth: 0.5 }
|
||||
},
|
||||
yaxis: { show: false },
|
||||
xaxis: { min:0 },
|
||||
legend: {
|
||||
noColumns: 3,
|
||||
container: '#cpuUsageBar_legend',
|
||||
labelFormatter: function(label, series){
|
||||
return label[1].toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"memoryUsageBar" : {
|
||||
paths: [
|
||||
["HOST_SHARE","MAX_MEM"],
|
||||
["HOST_SHARE","USED_MEM"],
|
||||
["HOST_SHARE","MEM_USAGE"],
|
||||
],
|
||||
operation: SunstoneMonitoring.ops.singleBar,
|
||||
plotOptions: {
|
||||
series: { bars: { show: true,
|
||||
horizontal: true,
|
||||
barWidth: 0.5 }
|
||||
},
|
||||
yaxis: { show: false },
|
||||
xaxis: {
|
||||
tickFormatter : function(val,axis) {
|
||||
return humanize_size(val);
|
||||
},
|
||||
min: 0
|
||||
},
|
||||
legend: {
|
||||
noColumns: 3,
|
||||
container: '#memoryUsageBar_legend',
|
||||
labelFormatter: function(label, series){
|
||||
return label[1].toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
"USER" : {
|
||||
plot: function(mon){
|
||||
plotUserMonitoring(mon)
|
||||
},
|
||||
monitor: {
|
||||
"usersPerGroup" : {
|
||||
partitionPath: "GNAME",
|
||||
operation: SunstoneMonitoring.ops.partition,
|
||||
dataType: "bars",
|
||||
plotOptions: {
|
||||
series: { bars: {show: true, barWidth: 0.5 }},
|
||||
xaxis: { show: false },
|
||||
yaxis: { tickDecimals: 0,
|
||||
min: 0 },
|
||||
legend : {
|
||||
noColumns: 2,
|
||||
}
|
||||
}
|
||||
},
|
||||
"totalUsers" : {
|
||||
operation: SunstoneMonitoring.ops.totalize
|
||||
},
|
||||
}
|
||||
},
|
||||
"ACL" : {
|
||||
plot: function(mon){
|
||||
plotAclMonitoring(mon)
|
||||
},
|
||||
monitor: {
|
||||
"totalAcls" : {
|
||||
operation: SunstoneMonitoring.ops.totalize
|
||||
}
|
||||
},
|
||||
},
|
||||
"GROUP" : {
|
||||
plot: function(mon){
|
||||
plotGroupMonitoring(mon)
|
||||
},
|
||||
monitor: {
|
||||
"totalGroups" : {
|
||||
operation: SunstoneMonitoring.ops.totalize
|
||||
}
|
||||
},
|
||||
},
|
||||
"VM" : {
|
||||
plot: function(mon){
|
||||
plotVMMonitoring(mon)
|
||||
},
|
||||
monitor: {
|
||||
"totalVMs" : {
|
||||
operation: SunstoneMonitoring.ops.totalize
|
||||
},
|
||||
"statePie" : {
|
||||
partitionPath: "STATE",
|
||||
operation: SunstoneMonitoring.ops.partition,
|
||||
dataType: "pie",
|
||||
colorize: function(state){
|
||||
switch (state) {
|
||||
case '0': return "rgb(160,160,160)" //light gray - init
|
||||
case '1': return "rgb(239,201,86)" //yellow - pending
|
||||
case '2': return "rgb(237,154,64)" //orange - hold
|
||||
case '3': return "rgb(108,183,108)" //green - active
|
||||
case '4': return "rgb(175,216,248)" //blue - stopped
|
||||
case '5': return "rgb(112,164,205)" //dark blue - suspended
|
||||
case '6': return "rgb(71,71,71)" //gray - done
|
||||
case '7': return "rgb(203,75,75)" //red - failed
|
||||
|
||||
}
|
||||
},
|
||||
plotOptions : {
|
||||
series: { pie: { show: true } },
|
||||
legend : {
|
||||
labelFormatter: function(label, series){
|
||||
return OpenNebula.Helper.resource_state("vm",label) +
|
||||
' - ' + series.data[0][1] + ' (' +
|
||||
Math.floor(series.percent) + '%' + ')';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"netUsageBar" : {
|
||||
paths: [ "NET_RX", "NET_TX" ],
|
||||
operation: SunstoneMonitoring.ops.singleBar,
|
||||
plotOptions: {
|
||||
series: { bars: { show: true,
|
||||
horizontal: true,
|
||||
barWidth: 0.5 }
|
||||
},
|
||||
yaxis: { show: false },
|
||||
xaxis: {
|
||||
min: 0,
|
||||
tickFormatter : function(val,axis) {
|
||||
return humanize_size(val);
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
noColumns: 3,
|
||||
container: '#netUsageBar_legend',
|
||||
labelFormatter: function(label, series){
|
||||
return label + " - " + humanize_size(series.data[0][0])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function explore_path(elem,path){
|
||||
if (!$.isArray(path)) //base case - non array
|
||||
return elem[path]
|
||||
else if (path.length == 1) //base case - array
|
||||
return elem[path[0]]
|
||||
else {//recurse
|
||||
var array = path.slice(0) //clone path
|
||||
var p = array.splice(0,1)
|
||||
return explore_path(elem[p],array)
|
||||
}
|
||||
}
|
||||
@ -249,8 +249,10 @@ var OpenNebula = {
|
||||
data: {timeout: timeout},
|
||||
dataType: "json",
|
||||
success: function(response){
|
||||
var list = OpenNebula.Helper.pool(resource,response)
|
||||
SunstoneMonitoring.monitor(resource, list)
|
||||
return callback ?
|
||||
callback(request, OpenNebula.Helper.pool(resource,response)) : null;
|
||||
callback(request, list) : null;
|
||||
},
|
||||
error: function(response)
|
||||
{
|
||||
|
||||
@ -40,7 +40,7 @@ var acls_tab_content = '\
|
||||
</table>\
|
||||
<div class="legend_div">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("This table shows the ACLs rules broken down to easier the reading and meaning of each one. You can show the ACL original string by clicking on Show/Hide columns.")+'\
|
||||
</p>\
|
||||
</div>\
|
||||
|
||||
@ -51,10 +51,10 @@ var config_tab_content =
|
||||
</table>\
|
||||
<div class="legend_div" style="position:relative;left:13px;bottom:5px;">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("These options are stored in your OpenNebula user template.")+'\
|
||||
</p>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("WSS connection requires additional configuration of Sunstone Server and that the SSL certificate is considered valid by your browser.")+'\
|
||||
</p>\
|
||||
</div>\
|
||||
|
||||
@ -14,90 +14,51 @@
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/** HISTORY_LENGTH currently ignored on server, but it does not harm to have it**/
|
||||
var HISTORY_LENGTH=40;
|
||||
var GRAPH_AUTOREFRESH_INTERVAL=60000; //60 secs
|
||||
|
||||
var graph1 = {
|
||||
title : "graph1",
|
||||
monitor_resources : "HOST_SHARE/CPU_USAGE,HOST_SHARE/USED_CPU,HOST_SHARE/MAX_CPU",
|
||||
history_length : HISTORY_LENGTH
|
||||
};
|
||||
|
||||
var graph2 = {
|
||||
title : "graph2",
|
||||
monitor_resources : "HOST_SHARE/MEM_USAGE,HOST_SHARE/USED_MEM,HOST_SHARE/MAX_MEM",
|
||||
history_length : HISTORY_LENGTH
|
||||
};
|
||||
|
||||
var graph3 = {
|
||||
title : "graph3",
|
||||
monitor_resources : "total,active,error",
|
||||
history_length : HISTORY_LENGTH
|
||||
};
|
||||
|
||||
var graph4 = {
|
||||
title : "graph4",
|
||||
monitor_resources : "NET_TX,NET_RX",
|
||||
history_length : HISTORY_LENGTH
|
||||
};
|
||||
|
||||
var dashboard_tab_content =
|
||||
'<table class="dashboard_table">\
|
||||
<tr>\
|
||||
<td style="width:40%">\
|
||||
<table id="information_table" style="width:100%">\
|
||||
<td>\
|
||||
<table style="width:100%">\
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
<h3>' + tr("Summary of resources") + '</h3>\
|
||||
<h3>' + tr("Hosts") + '<i class="icon-refresh action_button" value="Host.refresh" style="float:right;cursor:pointer"></i></h3>\
|
||||
<div class="panel_info">\
|
||||
\
|
||||
<table class="info_table">\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Hosts (total/active)") + '</td>\
|
||||
<td class="value_td"><span id="total_hosts"></span><span id="active_hosts" class="green"></span></td>\
|
||||
<td class="key_td">' + tr("Total Hosts") + '</td>\
|
||||
<td class="key_td">' + tr("State") + '</td>\
|
||||
<td class="key_td">' + tr("Global CPU Usage") + '</td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Clusters") + '</td>\
|
||||
<td class="value_td"><span id="total_clusters"></span></td>\
|
||||
<td id="totalHosts" class="big_text"></td>\
|
||||
<td colspan="2"><div id="statePie" style="width:45%;display:inline-block;height:100px;"></div>\
|
||||
<div id="globalCpuUsage" style="display:inline-block;width:50%;height:100px;"></div></td>\
|
||||
</tr>\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Used vs. Max CPU") + '</td>\
|
||||
<td></td>\
|
||||
<td><div id="cpuUsageBar_legend"></div></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Groups") + '</td>\
|
||||
<td class="value_td"><span id="total_groups"></span></td>\
|
||||
<td colspan="3">\
|
||||
<div id="cpuUsageBar" style="width:95%;height:50px"></div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Used vs. Max Memory") + '</td>\
|
||||
<td></td>\
|
||||
<td><div id="memoryUsageBar_legend"></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("VM Templates") + '</td>\
|
||||
<td class="value_td"><span id="total_templates"></span></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' +
|
||||
tr("VM Instances")+ ' (' +
|
||||
tr("total") + '/<span class="green">' +
|
||||
tr("running") + '</span>/<span class="red">' +
|
||||
tr("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">' + tr("Virtual Networks") + '</td>\
|
||||
<td class="value_td"><span id="total_vnets"></span></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Datastores") + '</td>\
|
||||
<td class="value_td"><span id="total_datastores"></span></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Images") + '</td>\
|
||||
<td class="value_td"><span id="total_images"></span></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Users")+'</td>\
|
||||
<td class="value_td"><span id="total_users"></span></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("ACL Rules") + '</td>\
|
||||
<td class="value_td"><span id="total_acls"></span></td>\
|
||||
<td colspan="3">\
|
||||
<div id="memoryUsageBar" style="width:95%;height:50px"></div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
\
|
||||
</table>\
|
||||
\
|
||||
</div>\
|
||||
@ -107,49 +68,108 @@ var dashboard_tab_content =
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
<h3>' + tr("Quickstart") + '</h3>\
|
||||
<div class="panel_info">\
|
||||
<p><br/>'+tr("Create new")+':<br/>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#hosts_tab" value="Host.create_dialog">'+tr("Host")+'</a></br>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#clusters_tab" value="Cluster.create_dialog">'+tr("Cluster")+'</a></br>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#vms_tab" value="VM.create_dialog">'+tr("VM Instance")+'</a></br>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#templates_tab" value="Template.create_dialog">'+tr("VM Template")+'</a></br>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#vnets_tab" value="Network.create_dialog">'+tr("Virtual Network")+'</a></br>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#datastores_tab" value="Datastore.create_dialog">'+tr("Datastore")+'</a></br>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#images_tab" value="Image.create_dialog">'+tr("Image")+'</a></br>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#users_tab" value="User.create_dialog">'+tr("User")+'</a></br>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#groups_tab" value="Group.create_dialog">'+tr("Group")+'</a></br>\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e inline-icon" /><a class="action_button" href="#acls_tab" value="Acl.create_dialog">'+tr("ACL")+'</a></br>\
|
||||
</p>\
|
||||
</div>\
|
||||
<h3>' + tr("Clusters") + '<i class="icon-refresh action_button" value="Host.refresh" style="float:right;cursor:pointer"></i></h3>\
|
||||
<div class="panel_info">\
|
||||
\
|
||||
<table class="info_table">\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Allocated CPU per cluster") + '</td>\
|
||||
<td class="value_td"></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td colspan="2"><div id="cpuPerCluster" style="width:97%;height:100px"></div></td>\
|
||||
</tr>\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Allocated Memory per cluster") + '</td>\
|
||||
<td class="value_td"></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td colspan="2"><div id="memoryPerCluster" style="width:97%;height:100px"></div></td>\
|
||||
</tr>\
|
||||
\
|
||||
</table>\
|
||||
\
|
||||
</div>\
|
||||
</div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
</table>\
|
||||
</td>\
|
||||
<td style="width:60%">\
|
||||
<table id="historical_table" style="width:100%">\
|
||||
<td>\
|
||||
<table style="width:100%">\
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
<h3>' + tr("Historical monitoring information") + '</h3>\
|
||||
<h3>' + tr("Virtual Machines") + '<i class="icon-refresh action_button" value="VM.refresh" style="float:right;cursor:pointer"></i></h3>\
|
||||
<div class="panel_info">\
|
||||
<!--\
|
||||
<table class="info_table">\
|
||||
<tr><td class="key_td graph_td">' + tr("Hosts CPU") + '</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">' + tr("Hosts memory") + '</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">' + tr("Total VM count") + '</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">' + tr("VM Network stats") + '</td>\
|
||||
<td class="graph_td" id="graph4_legend"></td></tr>\
|
||||
<tr><td id="graph4" colspan="2">'+spinner+'</td></tr>\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Total VMs") + '</td>\
|
||||
<td class="key_td">' + tr("Bandwidth - Upload") + '</td>\
|
||||
<td class="key_td">' + tr("Bandwidth - Download") + '</td>\
|
||||
</tr>\
|
||||
\
|
||||
<tr>\
|
||||
<td id="totalVMs" class="big_text"></td>\
|
||||
<td id="bandwidth_up" class="big_text"></td>\
|
||||
<td id="bandwidth_down" class="big_text"></td>\
|
||||
</tr>\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("State") + '</td>\
|
||||
<td class="value_td"></td>\
|
||||
<td class="value_td"></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td colspan="3"><div id="vmStatePie" style="width:100%;height:100px"></div></td>\
|
||||
</tr>\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Global transfer rates") + '</td>\
|
||||
<td colspan="2"><div id="netUsageBar_legend" style="float:right;"></div></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td colspan="3">\
|
||||
<div id="netUsageBar" style="float:left;width:92%;height:50px"></div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
</td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
<h3>' + tr("System Information") + '</h3>\
|
||||
<div class="panel_info">\
|
||||
<table class="info_table">\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Total Users") + '</td>\
|
||||
<td class="key_td">' + tr("Total Groups") + '</td>\
|
||||
<td class="key_td">' + tr("Total ACLs") + '</td>\
|
||||
</tr>\
|
||||
\
|
||||
<tr>\
|
||||
<td class="big_text" id="totalUsers"></td>\
|
||||
<td class="big_text" id="totalGroups"></td>\
|
||||
<td class="big_text" id="totalAcls"></td>\
|
||||
</tr>\
|
||||
\
|
||||
<tr>\
|
||||
<td class="key_td" colspan="2">' + tr("Users per group") + '</td>\
|
||||
<td class="value_td"><i class="icon-refresh action_button" value="User.refresh" style="float:right;cursor:pointer"></i></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td colspan="3"><div id="usersPerGroup" style="width:100%;height:100px"></div></td>\
|
||||
</tr>\
|
||||
\
|
||||
</table>\
|
||||
-->\
|
||||
</div>\
|
||||
</div>\
|
||||
</td>\
|
||||
@ -166,6 +186,90 @@ var dashboard_tab = {
|
||||
|
||||
Sunstone.addMainTab('dashboard_tab',dashboard_tab);
|
||||
|
||||
var $dashboard;
|
||||
|
||||
function updateDashboard(){
|
||||
//mock
|
||||
}
|
||||
|
||||
function plotHostMonitoring(monitoring){
|
||||
$('#totalHosts', $dashboard).text(monitoring['totalHosts'])
|
||||
delete monitoring['totalHosts']
|
||||
|
||||
if (!$dashboard.is(':visible')) return;
|
||||
|
||||
for (plotID in monitoring){
|
||||
var container = $('div#'+plotID,$dashboard);
|
||||
SunstoneMonitoring.plot("HOST",
|
||||
plotID,
|
||||
container,
|
||||
monitoring[plotID]);
|
||||
};
|
||||
}
|
||||
|
||||
function plotUserMonitoring(monitoring){
|
||||
$('#totalUsers', $dashboard).text(monitoring['totalUsers'])
|
||||
|
||||
if (!$dashboard.is(':visible')) return;
|
||||
|
||||
var container = $('div#usersPerGroup',$dashboard);
|
||||
SunstoneMonitoring.plot('USER',
|
||||
'usersPerGroup',
|
||||
container,
|
||||
monitoring['usersPerGroup']);
|
||||
}
|
||||
|
||||
function plotAclMonitoring(monitoring){
|
||||
$('#totalAcls', $dashboard).text(monitoring['totalAcls'])
|
||||
}
|
||||
|
||||
function plotGroupMonitoring(monitoring){
|
||||
$('#totalGroups', $dashboard).text(monitoring['totalGroups'])
|
||||
}
|
||||
|
||||
//Permanent storage for last value of aggregated network usage
|
||||
//Used to calculate bandwidth
|
||||
var netUsage = {
|
||||
time : new Date().getTime(),
|
||||
up : 0,
|
||||
down : 0
|
||||
}
|
||||
|
||||
function plotVMMonitoring(monitoring){
|
||||
$('#totalVMs', $dashboard).text(monitoring['totalVMs'])
|
||||
|
||||
var t = ((new Date().getTime()) - netUsage.time) / 1000 //in secs
|
||||
var bandwidth_up = monitoring['netUsageBar'][1].data[0][0] - netUsage.up
|
||||
bandwidth_up /= t
|
||||
var bandwidth_up_str = humanize_size(bandwidth_up) + "/s" //bytes /sec
|
||||
var bandwidth_down = monitoring['netUsageBar'][0].data[0][0] - netUsage.down
|
||||
bandwidth_down /= t
|
||||
var bandwidth_down_str = humanize_size(bandwidth_down) + "/s" //bytes /sec
|
||||
|
||||
if (bandwidth_up >= 0)
|
||||
$('#bandwidth_up', $dashboard).text(bandwidth_up_str)
|
||||
if (bandwidth_down >= 0)
|
||||
$('#bandwidth_down', $dashboard).text(bandwidth_down_str)
|
||||
|
||||
netUsage.time = new Date().getTime()
|
||||
netUsage.up = monitoring['netUsageBar'][1].data[0][0]
|
||||
netUsage.down = monitoring['netUsageBar'][0].data[0][0]
|
||||
|
||||
if (!$dashboard.is(':visible')) return;
|
||||
|
||||
var container = $('div#vmStatePie',$dashboard);
|
||||
SunstoneMonitoring.plot('VM',
|
||||
'statePie',
|
||||
container,
|
||||
monitoring['statePie']);
|
||||
|
||||
container = $('div#netUsageBar',$dashboard);
|
||||
SunstoneMonitoring.plot('VM',
|
||||
'netUsageBar',
|
||||
container,
|
||||
monitoring['netUsageBar']);
|
||||
}
|
||||
|
||||
function plot_global_graph(data,info){
|
||||
var context = $('#historical_table',main_tabs_context);
|
||||
var id = info.title;
|
||||
@ -212,95 +316,7 @@ function plot_global_graph(data,info){
|
||||
$.plot($('#'+id+'_graph',context),series,options);
|
||||
}
|
||||
|
||||
function graph_autorefresh(){
|
||||
setInterval(function(){
|
||||
refresh_graphs();
|
||||
},GRAPH_AUTOREFRESH_INTERVAL+someTime());
|
||||
|
||||
}
|
||||
|
||||
function refresh_graphs(){
|
||||
Sunstone.runAction("Host.monitor_all", graph1);
|
||||
Sunstone.runAction("Host.monitor_all", graph2);
|
||||
Sunstone.runAction("VM.monitor_all", graph3);
|
||||
Sunstone.runAction("VM.monitor_all", graph4);
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
emptyDashboard();
|
||||
|
||||
// refresh_graphs();
|
||||
// graph_autorefresh();
|
||||
|
||||
});
|
||||
|
||||
//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 "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+' / ');
|
||||
$('#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+' / ');
|
||||
$('#running_vms',db).html(running_vms+' / ');
|
||||
$('#failed_vms',db).html(failed_vms);
|
||||
break;
|
||||
case "vnets":
|
||||
var total_vnets=json_info.length;
|
||||
$('#total_vnets',db).html(total_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;
|
||||
$('#total_images',db).html(total_images);
|
||||
break;
|
||||
case "templates":
|
||||
var total_templates=json_info.length;
|
||||
$('#total_templates',db).html(total_templates);
|
||||
break;
|
||||
case "acls":
|
||||
var total_acls=json_info.length;
|
||||
$('#total_acls',db).html(total_acls);
|
||||
break;
|
||||
case "clusters":
|
||||
var total_clusters=json_info.length;
|
||||
$('#total_clusters',db).html(total_clusters);
|
||||
break;
|
||||
case "datastores":
|
||||
var total_datastores=json_info.length;
|
||||
$('#total_datastores',db).html(total_datastores);
|
||||
break;
|
||||
}
|
||||
};
|
||||
$dashboard = $('#dashboard_tab', main_tabs_context);
|
||||
});
|
||||
@ -41,7 +41,7 @@ var datastores_tab_content = '\
|
||||
</table>\
|
||||
<div class="legend_div">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("Datatables are sets of images which share a common transfer driver. i.e. Images in a SSH datastore will be copied to the hosts using SSH when deploying a Virtual Machine.")+'\
|
||||
</p>\
|
||||
</div>\
|
||||
|
||||
@ -37,7 +37,7 @@ var groups_tab_content = '\
|
||||
</table>\
|
||||
<div class="legend_div">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("Tip: Refresh the list if it only shows user ids in the Users column.")+'\
|
||||
</p>\
|
||||
</div>\
|
||||
|
||||
@ -59,13 +59,13 @@ var hosts_tab_content = '\
|
||||
</table>\
|
||||
<div class="legend_div">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("CPU Use is calculated as the minimum between (total CPU - real CPU usage) and (allocated CPU). Real CPU usage is provided by the hosts monitoring driver. Available CPU is calculated using the information from the CPU setting of the VMs running on that host (allocated CPU)")+'\
|
||||
</p>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("Memory use is calculated according to the information provided by the host monitoring driver.")+'\
|
||||
</p>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("You can get monitoring graphs by clicking in the desired host and visiting the monitoring information tab. Note that oneacctd must be running for this information to be updated/available.")+'\
|
||||
</p>\
|
||||
</div>\
|
||||
|
||||
@ -44,7 +44,7 @@ var images_tab_content = '\
|
||||
</table>\
|
||||
<div class="legend_div">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("Size and registration time are hidden colums. Note that persistent images can only be used by 1 VM. To change image datastore, please re-register the image.")+'\
|
||||
</p>\
|
||||
</div>\
|
||||
|
||||
@ -37,10 +37,10 @@ var templates_tab_content = '\
|
||||
</table>\
|
||||
<div class="legend_div">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("Clicking `instantiate` will instantly create new Virtual Machines from the selected templates and name one-id. If you want to assign a specific name to a new VM, or launch several instances at once, use Virtual Machines->New button.")+'\
|
||||
</p>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("You can clone a template to obtain a copy from an existing template. This copy will be owned by you.")+'\
|
||||
</p>\
|
||||
</div>\
|
||||
|
||||
@ -41,12 +41,12 @@ var users_tab_content = '\
|
||||
</table>\
|
||||
<div class="legend_div">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+
|
||||
tr("Tip: You can save any information in the user template, in the form of VAR=VAL.")+
|
||||
'\
|
||||
</p>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+
|
||||
tr("Tip: SSH authentication method is not available for web UI access.")+
|
||||
'\
|
||||
|
||||
@ -74,10 +74,10 @@ var vms_tab_content = '\
|
||||
</table>\
|
||||
<div class="legend_div">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("CPU, Memory and Start time are hidden columns by default. You can get monitoring graphs by clicking on the desired VM and visiting the monitoring information tab.")+'\
|
||||
</p>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("VNC console requires previous install of the noVNC addon. Check Sunstone documentation for more information.")+'\
|
||||
</p>\
|
||||
</div>\
|
||||
|
||||
@ -40,7 +40,7 @@ var vnets_tab_content = '\
|
||||
</table>\
|
||||
<div class="legend_div">\
|
||||
<span>?</span>\
|
||||
<p class="legend">\
|
||||
<p class="legend_p">\
|
||||
'+tr("Tip: edit the leases of a network by clicking on one and going to the lease management tab.")+'\
|
||||
</p>\
|
||||
</div>\
|
||||
|
||||
1
src/sunstone/public/vendor/flot/jquery.flot.pie.min.js
vendored
Normal file
1
src/sunstone/public/vendor/flot/jquery.flot.pie.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -20,6 +20,7 @@
|
||||
<script type="text/javascript" src="vendor/dataTables/ColVis.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="vendor/dataTables/ColReorderWithResize.js"></script>-->
|
||||
<script language="javascript" type="text/javascript" src="vendor/flot/jquery.flot.min.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="vendor/flot/jquery.flot.pie.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/fileuploader/fileuploader.js"></script>
|
||||
|
||||
<!-- End Vendor Libraries -->
|
||||
@ -37,6 +38,7 @@
|
||||
<script type="text/javascript" src="js/layout.js"></script>
|
||||
<script type="text/javascript" src="js/sunstone.js"></script>
|
||||
<script type="text/javascript" src="js/sunstone-util.js"></script>
|
||||
<script type="text/javascript" src="js/monitoring.js"></script>
|
||||
|
||||
<!-- Base Plugins -->
|
||||
<% @plugins["plugins"].each do |plugin| %>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user