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