Merge remote-tracking branch 'github/adminui_singleMetricView' into fnordmetric2 (f5f7fb53) · Commits · github_fork / Clip

fnordmetric-webui/fnordmetric-webui-metricpreviewwidget.js

+79 −14

Original line number	Diff line number	Diff line
		@@ -16,9 +16,50 @@ if (FnordMetric.views === undefined) {
		FnordMetric.views = {};
		}

		FnordMetric.util.MetricPreviewWidget = function() {
		var metric;
		FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {
		var elem = viewport;
		var metric = metric;
		var table_container = document.createElement("div");
		var chart_container = document.createElement("div");

		function renderChart(chart) {
		if (chart != undefined) {
		chart_container.innerHTML = "";
		chart_container.className = "single_metric_ui chart_container";
		chart_container.innerHTML = chart.svg;
		elem.appendChild(chart_container);
		}
		}

		function renderTable(table) {
		table_container.innerHTML = "";
		var table_view = FnordMetric.util.TableView(
		["series", "x", "y"], table_container, 25);
		elem.appendChild(table_container);
		for (i in table.rows) {
		table_view.addRow(table.rows[i]);
		}
		table_view.render();

		}

		function runQuery(querystr) {
		console.log(querystr);
		FnordMetric.httpPost("/query", querystr, function(r) {
		if (r.status == 200) {
		var json = JSON.parse(r.response);
		console.log(json);
		if (json.charts != undefined) {
		renderChart(json.charts[0]);
		}
		if (json.tables != undefined) {
		renderTable(json.tables[0]);
		}
		}
		});
		}

		//FIXME works but seems to be ugly
		function updateEventHandler(elems) {
		var inputs = {
		"show" : null,
		@@ -26,29 +67,32 @@ FnordMetric.util.MetricPreviewWidget = function() {
		"time" : null,
		"step" : null
		},
		"time" : null,
		"time" : {
		"start" : null,
		"end" : null
		},
		"group_by" : []
		}

		elems.rollup.addEventListener('change', function() {
		var value = (this.value == "Value") ? null : this.value;
		inputs.show = value;
		FnordMetric.util.createQuery(inputs, metric);
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		}, false);

		elems.aggregation.time.addEventListener('change', function() {
		inputs.aggregation.time = this.value;
		FnordMetric.util.createQuery(inputs, metric);
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		}, false);

		elems.aggregation.step.addEventListener('change', function() {
		inputs.aggregation.step = this.value;
		FnordMetric.util.createQuery(inputs, metric);
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		}, false);

		elems.seconds.addEventListener('change', function() {
		//inputs.last_seconds = this.value;
		FnordMetric.util.createQuery(inputs, metric);
		inputs.time.start = inputs.time.end - (this.value * 1000);
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		}, false);

		elems.group_by.map(function(column) {
		@@ -61,14 +105,19 @@ FnordMetric.util.MetricPreviewWidget = function() {
		} else {
		inputs.group_by.splice(index, 1);
		}
		FnordMetric.util.createQuery(inputs, metric);
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		});
		}, false);

		elems.date.addEventListener('change', function() {
		//inputs.time.start =
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		}, false);

		//last_ seconds & timespan & datepicker --> date
		}

		function renderElems(elem, columns) {
		function initElems(columns) {
		var elems = {};

		var controls = document.createElement("div");
		@@ -209,12 +258,28 @@ FnordMetric.util.MetricPreviewWidget = function() {
		secondary_controls.appendChild(next_timespan);

		updateEventHandler(elems);
		//createQuery(

		var end_time = FnordMetric.util.humanDateToMikroTS(
		datepicker.value);
		var start_time = end_time - (timespan_select.value * 1000);

		runQuery(FnordMetric.util.createQuery({
		"show" : null,
		"aggregation" : {
		"time" : null,
		"step" : null
		},
		"time" : {
		"start" : start_time,
		"end" : end_time
		},
		"group_by" : []
		}, metric));


		}

		function render(elem, metricname) {
		metric = metricname;
		function render() {
		var columns = [];
		FnordMetric.httpGet("/metrics", function(r) {
		if (r.status == 200) {
		@@ -225,7 +290,7 @@ FnordMetric.util.MetricPreviewWidget = function() {
		columns.push(label);
		});
		});
		renderElems(elem, columns);
		initElems(columns);
		}
		});

fnordmetric-webui/fnordmetric-webui-singlemetricview.js

+2 −1

Original line number	Diff line number	Diff line
		@@ -29,8 +29,9 @@ FnordMetric.util.singleMetricView = function() {
		FnordMetric.util.htmlEscape(query_params.value) +
		"</em>", elem);

		FnordMetric.util.MetricPreviewWidget().render(
		var preview_widget = FnordMetric.util.MetricPreviewWidget(
		elem, query_params.value);
		preview_widget.render();

		}

fnordmetric-webui/fnordmetric-webui-util.js

+33 −2

Original line number	Diff line number	Diff line
		@@ -246,6 +246,16 @@ FnordMetric.util.parseMilliTS = function(ts) {
		}
		}

		FnordMetric.util.humanDateToMikroTS = function(date) {
		/* first version until datepicker is implemented */
		var ts;
		if (date == "NOW") {
		ts = Date.now();
		}
		return ts;
		}


		FnordMetric.util.humanCountRows = function(tables) {
		var num = 0;
		tables.map(function(table) {
		@@ -371,7 +381,10 @@ FnordMetric.util.filterStringArray = function(strings, filter) {
		"time" : null,
		"step" : null
		},
		"time" : null,
		"time" : {
		"start" : null,
		"end" : null
		}
		"group_by" : []
		}
		*/
		@@ -394,9 +407,26 @@ FnordMetric.util.createQuery = function(inputs, metric) {
		show = (inputs.show + "(value) as y");
		}

		query += select + show + from;
		query += draw + select + show + from;

		/* check for time --> where clause and add to query */
		if (inputs.time.start != null) {
		where =
		" where time > FROM_TIMESTAMP(" + inputs.time.start + ")";
		}

		if (inputs.time.end != null) {
		if (where == null) {
		where +=
		"where time < FROM_TIMESTAMP(" + inputs.time.end + ")";
		} else {
		where +=
		" and time < FROM_TIMESTAMP(" + inputs.time.end +")";
		}
		}

		//query += where;


		if (hasAggr) {
		/* group over timewindow needs a time and step info */
		@@ -427,3 +457,4 @@ FnordMetric.util.createQuery = function(inputs, metric) {
		}

fnordmetric-webui/fnordmetric-webui.css

+8 −0

Original line number	Diff line number	Diff line
		@@ -974,6 +974,14 @@ h1.page_header em {
		color: #545758;
		}

		.single_metric_ui.chart_container {
		height: 400px;
		}

		.single_metric_ui.chart_container svg {
		height: 100%;
		}

		/* BASICS */

		.CodeMirror {

Admin message