mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-25 02:50:08 +03:00
Feature 4901 and Zoom in graphs (#167)
* F #4901 Added new security controls for overcommitment inputs * Zoom graphs * activated zoom and pan in graphs * configured zoomRange and panRange for graphs
This commit is contained in:
parent
6d74447055
commit
9b64dfcd17
@ -58,6 +58,8 @@ require.config({
|
||||
/* Flot Graphs */
|
||||
'flot': '../bower_components/flot/jquery.flot',
|
||||
'flot.stack': '../bower_components/flot/jquery.flot.stack',
|
||||
'flot.navigate': '../bower_components/flot/jquery.flot.navigate',
|
||||
'flot.canvas': '../bower_components/flot/jquery.flot.canvas',
|
||||
'flot.resize': '../bower_components/flot/jquery.flot.resize',
|
||||
'flot.time': '../bower_components/flot/jquery.flot.time',
|
||||
'flot.tooltip': '../bower_components/flot.tooltip/js/jquery.flot.tooltip',
|
||||
|
@ -100,11 +100,12 @@ define(function(require) {
|
||||
document.getElementById('textInput_reserved_cpu').style.backgroundColor = 'rgba(111, 220, 111,0.5)';
|
||||
if(parseInt(document.getElementById('change_bar_cpu').value) < 0)
|
||||
document.getElementById('textInput_reserved_cpu').style.backgroundColor = 'rgba(255, 80, 80,0.5)';
|
||||
document.getElementById('textInput_reserved_cpu').value = document.getElementById('change_bar_cpu').value;
|
||||
document.getElementById('textInput_reserved_cpu').value = document.getElementById('change_bar_cpu').value + "%";
|
||||
}
|
||||
|
||||
function changeInputCPU(){
|
||||
document.getElementById('change_bar_cpu').value = document.getElementById('textInput_reserved_cpu').value;
|
||||
document.getElementById('change_bar_cpu').value = parseInt(document.getElementById('textInput_reserved_cpu').value);
|
||||
document.getElementById('textInput_reserved_cpu').value = document.getElementById('change_bar_cpu').value + "%";
|
||||
}
|
||||
|
||||
function changeBarMEM(){
|
||||
@ -112,11 +113,12 @@ define(function(require) {
|
||||
document.getElementById('textInput_reserved_mem').style.backgroundColor = 'rgba(111, 220, 111,0.5)';
|
||||
if(parseInt(document.getElementById('change_bar_mem').value) < 0)
|
||||
document.getElementById('textInput_reserved_mem').style.backgroundColor = 'rgba(255, 80, 80,0.5)';
|
||||
document.getElementById('textInput_reserved_mem').value = document.getElementById('change_bar_mem').value;
|
||||
document.getElementById('textInput_reserved_mem').value = document.getElementById('change_bar_mem').value + "%";
|
||||
}
|
||||
|
||||
function changeInputMEM(){
|
||||
document.getElementById('change_bar_mem').value = document.getElementById('textInput_reserved_mem').value;
|
||||
document.getElementById('change_bar_mem').value = parseInt(document.getElementById('textInput_reserved_mem').value);
|
||||
document.getElementById('textInput_reserved_mem').value = document.getElementById('change_bar_mem').value + "%";
|
||||
}
|
||||
|
||||
function _setup(context) {
|
||||
@ -130,6 +132,8 @@ define(function(require) {
|
||||
document.getElementById("textInput_reserved_cpu").addEventListener("change", changeInputCPU);
|
||||
document.getElementById("change_bar_mem").addEventListener("change", changeBarMEM);
|
||||
document.getElementById("textInput_reserved_mem").addEventListener("change", changeInputMEM);
|
||||
document.getElementById('textInput_reserved_cpu').value = document.getElementById('change_bar_cpu').value + "%";
|
||||
document.getElementById('textInput_reserved_mem').value = document.getElementById('change_bar_mem').value + "%";
|
||||
|
||||
$(document).off('click', '.update_reserved').on("click", '.update_reserved', function(){
|
||||
var reservedCPU = document.getElementById('change_bar_cpu').value+'%';
|
||||
|
@ -120,11 +120,13 @@ define(function(require) {
|
||||
}
|
||||
|
||||
function changeInputCPU(){
|
||||
document.getElementById('change_bar_cpu_hosts').value = document.getElementById('textInput_reserved_cpu_hosts').value;
|
||||
document.getElementById('change_bar_cpu_hosts').value = parseInt(document.getElementById('textInput_reserved_cpu_hosts').value);
|
||||
document.getElementById('textInput_reserved_cpu_hosts').value = document.getElementById('change_bar_cpu_hosts').value;
|
||||
}
|
||||
|
||||
function changeInputMEM(){
|
||||
document.getElementById('change_bar_mem_hosts').value = parseInt(document.getElementById('textInput_reserved_mem_hosts').value);
|
||||
document.getElementById('change_bar_mem_hosts').value = Humanize.sizeToMB(document.getElementById('textInput_reserved_mem_hosts').value);
|
||||
document.getElementById('textInput_reserved_mem_hosts').value = Humanize.size(document.getElementById('change_bar_mem_hosts').value);
|
||||
}
|
||||
|
||||
function _setup(context) {
|
||||
|
@ -25,6 +25,8 @@ define(function(require) {
|
||||
var Humanize = require('utils/humanize');
|
||||
var Notifier = require('utils/notifier');
|
||||
var Graphs = require('utils/graphs');
|
||||
require('flot.navigate');
|
||||
require('flot.canvas');
|
||||
var StateActions = require('../utils/state-actions');
|
||||
var OpenNebulaVM = require('opennebula/vm');
|
||||
var SecGroupsCommon = require('tabs/secgroups-tab/utils/common');
|
||||
@ -474,8 +476,8 @@ define(function(require) {
|
||||
|
||||
for (var i = 0; i < vmGraphs.length; i++) {
|
||||
Graphs.plot(response, vmGraphs[i]);
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
error: Notifier.onError
|
||||
});
|
||||
}
|
||||
|
@ -31,6 +31,8 @@ define(function(require) {
|
||||
var Navigation = require('utils/navigation');
|
||||
var Notifier = require('utils/notifier');
|
||||
var Graphs = require('utils/graphs');
|
||||
require('flot.navigate');
|
||||
require('flot.canvas');
|
||||
|
||||
/*
|
||||
CONSTANTS
|
||||
|
@ -25,7 +25,6 @@ define(function(require) {
|
||||
// TODO Check if necessary require('flot.tooltip');
|
||||
require('flot.time');
|
||||
var Humanize = require('utils/humanize');
|
||||
|
||||
/*
|
||||
CONSTRUCTOR
|
||||
*/
|
||||
@ -42,7 +41,6 @@ define(function(require) {
|
||||
series = [];
|
||||
|
||||
var attributes = info.monitor_resources.split(',');
|
||||
|
||||
if (info.labels) {
|
||||
labels = info.labels.split(',')
|
||||
}
|
||||
@ -67,8 +65,10 @@ define(function(require) {
|
||||
}
|
||||
|
||||
var humanize = info.humanize_figures ?
|
||||
Humanize.size : function(val) { return (val * 100).toFixed() / 100 };
|
||||
|
||||
Humanize.size : function(val) {
|
||||
return (val * 100).toFixed() / 100
|
||||
};
|
||||
//var valueX,valueY;
|
||||
var options = {
|
||||
// colors: [ "#cdebf5", "#2ba6cb", "#6f6f6f" ]
|
||||
colors: ["#2ba6cb", "#707D85", "#AC5A62"],
|
||||
@ -88,6 +88,7 @@ define(function(require) {
|
||||
},
|
||||
yaxis : {
|
||||
tickFormatter: function(val, axis) {
|
||||
this.valueY = val;
|
||||
return humanize(val, info.convert_from_bytes, info.y_sufix);
|
||||
},
|
||||
min: 0,
|
||||
@ -95,19 +96,29 @@ define(function(require) {
|
||||
font: {
|
||||
color: "#999",
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
zoomRange:[1, 10*1024*1024]
|
||||
},
|
||||
series: {
|
||||
lines: {
|
||||
lineWidth: 1
|
||||
}
|
||||
lineWidth: 1,
|
||||
show: true
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#efefef"
|
||||
},
|
||||
zoom: {
|
||||
interactive: true
|
||||
},
|
||||
pan: {
|
||||
interactive: true
|
||||
}
|
||||
};
|
||||
|
||||
//options.xaxis.zoomRange = false;
|
||||
options.yaxis.panRange = false;
|
||||
if (series.length > 0) {
|
||||
$.plot(info.div_graph, series, options);
|
||||
};
|
||||
|
@ -27,6 +27,7 @@ define(function(require) {
|
||||
'sizeFromB': _sizeFromB,
|
||||
'sizeFromKB': _sizeFromKB,
|
||||
'sizeFromMB': _sizeFromMB,
|
||||
'sizeToMB': _sizeToMB,
|
||||
'prettyDuration': _prettyDuration,
|
||||
'prettyTime': _prettyTime,
|
||||
'prettyTimeAxis': _prettyTimeAxis,
|
||||
@ -95,6 +96,20 @@ define(function(require) {
|
||||
return st;
|
||||
}
|
||||
|
||||
|
||||
function _sizeToMB(value){
|
||||
var split = value.split("B");
|
||||
var factor = split[0].slice(-1);
|
||||
var number = parseFloat(split[0]);
|
||||
if(factor=="K")
|
||||
number = number * 1024;
|
||||
else if(factor=="G")
|
||||
number = number * 1024 * 1024;
|
||||
else if(factor=="T")
|
||||
number = number * 1024 * 1024 * 1024;
|
||||
return number;
|
||||
}
|
||||
|
||||
function _prettyDuration(duration) {
|
||||
var days = Math.floor(duration / 86400);
|
||||
duration -= days * 86400;
|
||||
|
Loading…
x
Reference in New Issue
Block a user