1
0
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:
juanmont 2016-12-14 14:33:27 +01:00 committed by Tino Vázquez
parent 6d74447055
commit 9b64dfcd17
7 changed files with 54 additions and 16 deletions

View File

@ -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',

View File

@ -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+'%';

View File

@ -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) {

View File

@ -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
});
}

View File

@ -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

View File

@ -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);
};

View File

@ -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;