lib/visage-app/public/javascripts/graph.js in visage-app-0.9.0.pre2 vs lib/visage-app/public/javascripts/graph.js in visage-app-0.9.0
- old
+ new
@@ -3,83 +3,91 @@
plugin = labels[1],
instance = labels[2],
metric = labels[3],
name;
- // Generic label building
- name = instance
- name = name.replace(plugin, '')
- name = name.replace(plugin.split('-')[0], '')
- name = name.replace('tcp_connections', '')
- name = name.replace('ps_state', '')
- name += metric == "value" ? "" : " (" + metric + ")"
- name = name.replace(/^[-|_]*/, '')
- name = name.trim().replace(/^\((.*)\)$/, '$1')
- name = plugin == "irq" ? name.replace(/^/, 'irq ') : ''
+ if (plugin == "irq") {
+ name = name.replace(/^/, 'irq ')
+ }
// Plugin specific labeling
- if (plugin == "interface") {
- name += instance.replace(/^if_(.*)-(.*)/, '$2 $1') + ' (' + metric + ')'
+ else if (plugin == "interface") {
+ name = instance.replace(/^if_(.*)-(.*)/, '$2 $1') + ' (' + metric + ')'
}
- if (["processes", "memory"].contains(plugin) || plugin.test(/^cpu-\d+/) ) {
- name += instance.split('-')[1]
+ else if (["processes", "memory"].contains(plugin) || plugin.test(/^cpu-\d+/) ) {
+ name = instance.split('-')[1]
}
- if (plugin == "swap") {
+ else if (plugin == "swap") {
if (instance.test(/^swap_io/)) {
- name += instance.replace(/^swap_(\w*)-(.*)$/, '$1 $2')
+ name = instance.replace(/^swap_(\w*)-(.*)$/, '$1 $2')
}
if (instance.test(/^swap-/)) {
- name += instance.split('-')[1]
+ name = instance.split('-')[1]
}
}
- if (plugin == "load") {
- name += metric.replace(/^\((.*)\)$/, '$1')
+ else if (plugin == "load") {
+ name = metric.replace(/^\((.*)\)$/, '$1')
}
- if (plugin.test(/^disk/)) {
- name += instance.replace(/^disk_/, '') + ' (' + metric + ')'
+ else if (plugin.test(/^disk/)) {
+ name = instance.replace(/^disk_/, '') + ' (' + metric + ')'
}
- if (["entropy","users"].contains(plugin)) {
- name += metric
+ else if (["entropy","users"].contains(plugin)) {
+ name = metric
}
- if (plugin == "uptime") {
- name += instance
+ else if (plugin == "uptime") {
+ name = instance
}
- if (plugin == "ping") {
+ else if (plugin == "ping") {
if (instance.test(/^ping_/)) {
- name += instance.replace(/^ping_(.*)-(.*)$/, '$1 $2')
+ name = instance.replace(/^ping_(.*)-(.*)$/, '$1 $2')
} else {
- name += metric + ' ' + instance.split('-')[1]
+ name = metric + ' ' + instance.split('-')[1]
}
}
- if (plugin == "vmem") {
+ else if (plugin.test(/^vmem/)) {
if (instance.test(/^vmpage_number-/)) {
- name += instance.replace(/^vmpage_number-(.*)$/, '$1').replace('_', ' ')
+ name = instance.replace(/^vmpage_number-(.*)$/, '$1').replace('_', ' ')
}
if (instance.test(/^vmpage_io/)) {
- name += instance.replace(/^vmpage_io-(.*)$/, '$1 ') + metric
+ name = instance.replace(/^vmpage_io-(.*)$/, '$1 ') + metric
}
if (instance.test(/^vmpage_faults/)) {
- name += metric.trim() == "minflt" ? 'minor' : 'major'
+ name = metric.trim() == "minflt" ? 'minor' : 'major'
name += ' faults'
}
+ if (instance.test(/^vmpage_action-/)) {
+ name = instance.replace(/^vmpage_action-(.*)$/, '$1').replace('_', ' ')
+ }
}
- if (plugin.test(/^tcpconns/)) {
- name += instance.split('-')[1].replace('_', ' ')
+ else if (plugin.test(/^tcpconns/)) {
+ name = instance.split('-')[1].replace('_', ' ')
}
- if (plugin.test(/^tail/)) {
- name += plugin.split('-').slice(1).join('-') + ' '
- name += instance.split('-').slice(1).join('-')
+ else if (plugin.test(/^tail/)) {
+ name = plugin.split('-').slice(1).join('-') + ' '
+ name = instance.split('-').slice(1).join('-')
}
- if (plugin == "apache") {
+ else if (plugin == "apache") {
var stash = instance.split('_')[1]
if (stash.test(/^scoreboard/)) {
- name += 'connections: ' + stash.split('-')[1]
+ name = 'connections: ' + stash.split('-')[1]
} else {
- name += stash
+ name = stash
}
-
}
+ else if ( plugin.test(/^curl_json/) ) {
+ var stash = instance.split('-')[2];
+ var stash = stash.replace(/[-|_]/, ' ');
+ name = stash
+ }
+ else {
+ // Generic label building
+ name = instance
+ name = name.replace(plugin.split('-')[0], '')
+ name += metric == "value" ? "" : " (" + metric + ")"
+ name = name.replace(/^[-|_]*/, '')
+ name = name.trim().replace(/^\((.*)\)$/, '$1')
+ }
return name.trim()
}
function formatValue(value, places) {
var places = places ? places : 0
@@ -118,38 +126,46 @@
function formatDate(d) {
var datetime = new Date(d * 1000)
return datetime.format("%Y-%m-%d %H:%M:%S UTC%T")
}
+function formatPluginName(name) {
+ if (name.test(/^curl_json/)) {
+ name = name.split('-')[1].replace(/(-|_)/, ' ');
+ }
+ return name
+}
/*
* visageBase()
*
* Base class for fetching data and setting graph options.
* Should be used by other classes to build specialised graphing behaviour.
*
*/
var visageBase = new Class({
- Implements: [Options, Events],
+ Implements: [ Options, Events ],
options: {
secureJSON: false,
httpMethod: 'get',
live: false
},
initialize: function(element, host, plugin, options) {
- this.parentElement = element
- this.setOptions(options)
- this.options.host = host
+ this.parentElement = element
+ this.options.host = host
this.options.plugin = plugin
- data = new Hash()
+ this.setOptions(options)
+
+ var data = new Hash()
if($chk(this.options.start)) {
data.set('start', this.options.start)
}
if($chk(this.options.finish)) {
data.set('finish', this.options.finish)
}
+
this.requestData = data;
this.getData(); // calls graphData
},
dataURL: function() {
var url = ['data', this.options.host, this.options.plugin]
@@ -182,11 +198,17 @@
});
this.request.send();
},
graphName: function() {
- name = $chk(this.options.name) ? this.options.name : this.options.plugin
+ if ($chk(this.options.name)) {
+ var name = this.options.name
+ } else {
+ var name = [ formatPluginName(this.options.plugin),
+ 'on',
+ this.options.host ].join(' ')
+ }
return name
},
});
@@ -207,11 +229,11 @@
this.response = data
this.buildDataStructures()
if ( $defined(this.chart) ) {
this.series.each(function(series, index) {
- this.chart.series[index].setData(series.data)
+ this.chart.series[index].setData(series.data, true)
}, this);
} else {
this.drawChart()
}
},
@@ -221,15 +243,23 @@
var plugin = this.options.plugin
var data = data ? data : this.response
$each(data[host][plugin], function(instance, iname) {
$each(instance, function(metric, mname) {
+ var start = metric.start,
+ finish = metric.finish,
+ interval = (finish - start) / metric.data.length;
+
+ var data = metric.data.map(function(value, index) {
+ var x = start + index * interval,
+ y = value;
+ return [ x, y ];
+ });
+
var set = {
- name: [ host, plugin, iname, mname ],
- data: metric.data,
- pointStart: metric.start,
- pointInterval: (metric.finish - metric.start) / metric.data.length
+ name: [ host, plugin, iname, mname ],
+ data: data,
};
series.push(set)
}, this);
}, this);
@@ -238,11 +268,11 @@
},
drawChart: function() {
var series = this.series,
title = this.graphName(),
element = this.parentElement,
- ytitle = this.options.plugin
+ ytitle = formatPluginName(this.options.plugin),
max = 0
/* Get the maximum value across all sets.
* Used later on to determine the decimal place in the label. */
series.each(function(set) {
@@ -404,10 +434,9 @@
var option = new Element('option', {
html: html,
value: value,
selected: (current ? 'selected' : '')
-
});
select.grab(option)
});
var submit = new Element('input', { 'type': 'submit', 'value': 'show' });