sysvitals/web/static/js/stats.js

window.addEvent('domready', function() {
	'use strict';

	Rickshaw.Graph.Axis.Y.Base1024KMGTP = Rickshaw.Class.create(Rickshaw.Graph.Axis.Y, {
		'_drawAxis': function($super, scale) {
			var axis = d3.svg.axis().scale(scale).orient(this.orientation);
			var domain = axis.scale().domain();
			var tickSpacing = 1;
			while (tickSpacing * 1024 < domain[1])
				tickSpacing *= 1024;
			while (tickSpacing * 20 < domain[1])
				tickSpacing *= 10;
			while (tickSpacing * 5 < domain[1])
				tickSpacing *= 2;
			var min = Math.ceil(domain[0] / tickSpacing);
			var max = Math.floor(domain[1] / tickSpacing) + 1;
			var tickValues = [];
			for (var i = min * tickSpacing; i < max; i += 1)
				tickValues.push(i * tickSpacing);
			axis.tickValues(tickValues);
			axis.tickFormat(this.tickFormat);

			if (this.orientation == 'left') {
				var berth = this.height * berthRate;
				var transform = 'translate(' + this.width + ', ' + berth + ')';
			}

			if (this.element)
				this.vis.selectAll('*').remove();

			this.vis
				.append('svg:g')
				.attr('class', ['y_ticks', this.ticksTreatment].join(' '))
				.attr('transform', transform)
				.call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));

			return axis;
		},
	});

	var split = document.location.pathname.split('/');
	var url = 'http://localhost:8892/v1/' + split[2] + '/stats/' + split[3];
	function get_stats(start, end, interval) {
		new Request.JSON({
			'url': url + '?start=' + start + '&end=' + end + '&interval=' + interval,
			'onSuccess': function(data) {
				Object.each(data, function(subfields, field) {
					if (field == 'disk')
						return;
					graph_stat(field, subfields, interval);
				});
			},
		}).get();
	}

	var intervals = {
		1: 15,
		7: 60,
		30: 360,
		90: 1440,
	}
	function change_res() {
		var days = $('resolution').get('value');
		var start = moment.utc().subtract('days', days - 1).format('YYYY-MM-DD');
		var end = moment.utc().format('YYYY-MM-DD');
		get_stats(start, end, intervals[days]);
	}
	$('resolution').addEvent('change', change_res);
	change_res();

	var colors = {
		'cpu': [
			['user', '#33a'],
			['nice', '#55c'],
			['iowait', '#a33'],
			['system', '#aa3'],
			['irq', '#711'],
			['softirq', '#771'],
			['guest', '#555'],
			['guest_nice', '#777'],
			['steal', '#a71'],
			['idle', '#3aa'],
		],
		'mem': [
			['used', '#a33'],
			['buffers', '#3aa'],
			['cached', '#33a'],
			['free', '#3a3'],
		],
		'net': [
			['bit/s_in', '#33a', 'area'],
			['bit/s_out', '#3a3', 'area'],
			['err_in', '#a33', 'line'],
			['err_out', '#aa3', 'line'],
			['drop_in', '#a33', 'line'],
			['drop_out', '#aa3', 'line'],
		],
	};
	function graph_stat(field, subfields, interval) {
		var series = [];
		colors[field].each(function(subfield_meta) {
			var subfield = subfield_meta[0];
			var color = subfield_meta[1];
			var days = Object.keys(subfields[subfield]).sort();
			var array = [];
			var index_start = 0;
			days.each(function(day) {
				var day_array = subfields[subfield][day];
				if (day_array != null) {
					array = array.append(day_array.map(function(val, i) {
						return {'x': index_start + i * interval, 'y': val};
					}));
				}
				index_start += 1440;
			});
			series.push({
				'name': field + '.' + subfield,
				'data': array,
				'color': color,
				'renderer': subfield_meta[2],
			});
		});
		var graph_div = new Element('div');
		var legend_div = new Element('div');
		var graph = new Rickshaw.Graph({
			'element': graph_div,
			'width': 400,
			'height': 200,
			'renderer': field == 'net' ? 'multi' : 'area',
			'stroke': true,
			'series': series,
			'interpolation': 'step-after',
		});
		new Rickshaw.Graph.Legend({
			'graph': graph,
			'element': legend_div,
		});
		new Rickshaw.Graph.HoverDetail({
			'graph': graph,
		});
		new Rickshaw.Graph.Axis.Time({
			'graph': graph,
			//'timeUnit': new Rickshaw.Fixtures.Time().unit('minute'),
		});
		new Rickshaw.Graph.Axis.Y.Base1024KMGTP({
			'graph': graph,
			'tickFormat': Rickshaw.Fixtures.Number.formatBase1024KMGTP,
		});
		graph.render();
		$(field).empty().adopt(graph_div, legend_div);
	}
});