enable different views (dcc4af3d) · Commits · github_fork / Clip

fnordmetric-webui/fnordmetric-webui-datepicker.js

+0 −1

Original line number	Diff line number	Diff line
		@@ -234,7 +234,6 @@ FnordMetric.util.DatePicker = function(elem, dp_input, viewport, callback) {


		document.addEventListener('click', function() {
		console.log("close dateoicker");
		resetDatepicker();
		}, false);

fnordmetric-webui/fnordmetric-webui-metricpreviewwidget.js

+27 −30

Original line number	Diff line number	Diff line
		@@ -29,14 +29,13 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {

		var defaults = {
		view : "value",
		column: null,
		columns: null,
		end_time : now,
		/* 5 minutes */
		time_to_end : 300000,
		/* 1 second */
		t_step : 1000,
		t_window : 1000,
		by : columns.join(", ")
		}


		@@ -49,6 +48,8 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {

		function updateURLParams(key, value) {
		query_params[key] = value;
		FnordMetric.util.setURLQueryString(
		"metric_list", query_params, false, true);
		//update url fragment
		}

		@@ -88,7 +89,7 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {
		}


		function handleAggrAvailability(show, tw_select, step_select, group_btns) {
		function handleAggregationDisplay(show, tw_select, step_select, group_btns) {
		/* show = "value" */
		var group_btns = (group_btns == undefined)? [] : group_btns;
		if (show == "Value" \|\| show == "Rollup") {
		@@ -144,7 +145,7 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {

		function initElems() {
		var initial_timespan;
		var by;
		var group_buttons = [];

		var controls = document.createElement("div");
		controls.className = "metric_preview_controls";
		@@ -157,7 +158,8 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {

		var rollup_select = document.createElement("select");
		rollup_group.appendChild(rollup_select);
		var rollup_options = ["Value", "Mean", "Count", "Sum", "Rollup"];
		var rollup_options =
		["Value", "Mean", "Count", "Sum", "Rollup Sum", "Rollup Count"];
		rollup_options.map(function(rollup) {
		var option = document.createElement("option");
		option.innerHTML = rollup;
		@@ -229,14 +231,10 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {
		timespans.map(function(timespan) {
		var option = document.createElement("option");
		option.innerHTML = timespan;
		time_to_end_ttl.appendChild(option);
		time_to_end.appendChild(option);
		});

		//update
		initial_timespan = FnordMetric.util.toMilliSeconds(
		timespans[0]);

		elems.time_to_end = time_to_end;
		timespan_group.appendChild(time_to_end_ttl);
		timespan_group.appendChild(time_to_end);
		controls.appendChild(timespan_group);
		@@ -247,14 +245,12 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {
		controls.appendChild(groupby_group);

		if (columns.length > 0) {
		var group_buttons = [];
		columns.map(function(column) {
		var btn = FnordMetric.createButton(
		"#", undefined, "<i class='fa fa-toggle-off'></i>" + column);
		group_buttons.push(btn);
		groupby_group.appendChild(btn);
		});
		by = group_buttons;
		}

		var secondary_controls = document.createElement("div");
		@@ -287,21 +283,16 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {
		"#", undefined, "<i class='fa fa-chevron-left'></i>");
		var next_timespan = FnordMetric.createButton(
		"#", undefined, "<i class='fa fa-chevron-right'></i>");
		var updater_ttl = document.createElement("span");
		updater_ttl.className = "current_date";
		updater_ttl.innerHTML =
		var timespan_title = document.createElement("span");
		timespan_title.className = "current_date";
		timespan_title.innerHTML =
		FnordMetric.util.getDateTimeString(
		now - initial_timespan) + " — " +
		FnordMetric.util.getDateTimeString(now);


		elems.timespan_next = next_timespan;
		elems.timespan_prev = prev_timespan;
		elems.timespan_title = updater_ttl;

		secondary_controls.appendChild(timespan_updater);
		secondary_controls.appendChild(prev_timespan);
		secondary_controls.appendChild(updater_ttl);
		secondary_controls.appendChild(timespan_title);
		secondary_controls.appendChild(next_timespan);

		chart_container.className = "single_metric_ui chart_container";
		@@ -310,9 +301,11 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {
		/* set all EventListeners */

		rollup_select.addEventListener('change', function() {
		updateURLParams("show", this.value);
		handleAggrAvailability(
		this.value, elems_timewindow, t_step, elems.by);
		/* queryGenerator assumes this format */
		var view = this.value.toLowerCase().replace(/ /g,"_");
		updateURLParams("view", view);
		handleAggregationDisplay(
		this.value, t_window, t_step, group_buttons);
		runQuery();
		}, false);

		@@ -328,8 +321,8 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {
		runQuery();
		}, false);

		if (by != undefined) {
		by.map(function(column) {
		if (group_buttons.length > 0) {
		group_buttons.map(function(column) {
		column.addEventListener('click', function(e) {
		e.preventDefault();
		var c = this.innerText;
		@@ -351,7 +344,7 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {
		FnordMetric.util.toMilliSeconds(this.value);
		var start = getQueryParamOrDefault("end_time") - mseconds_to_end;
		updateURLParams("start_time", start);
		updateDateTimeElems(elems.timespan_title, null);
		updateDateTimeElems(timespan_title, null);
		runQuery();
		}, false);

		@@ -362,7 +355,7 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {
		parseInt(mseconds_to_end, 10));
		updateURLParams("ent_time", end_time);
		//update start time
		updateDateTimeElems(elems.timespan_title, elems.date);
		updateDateTimeElems(timespan_title, elems.date);
		runQuery();
		}, false);

		@@ -374,12 +367,12 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {

		updateURLParams("end_time", end_time);
		//upfdate start_time
		updateDateTimeElems(elems.timespan_title, elems.date);
		updateDateTimeElems(timespan_title, elems.date);
		runQuery();
		}, false);


		handleAggrAvailability("Value", t_window, t_step, group_buttons);
		handleAggregationDisplay("Value", t_window, t_step, group_buttons);
		runQuery();

		}
		@@ -389,10 +382,14 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, query_params) {
		if (r.status == 200) {
		var json = JSON.parse(r.response);
		json.metrics.map(function(m) {
		//FIXME what's a better way to get the
		//metrics columns without searching through all metrics
		if (m.key != metric) {return;}
		m.labels.map(function(label) {
		columns.push(label);
		});
		query_params.columns = m.labels.join(",");
		defaults.columns = m.labels.join(",");
		});
		initElems();
		}

fnordmetric-webui/fnordmetric-webui-util.js

+36 −20

Original line number	Diff line number	Diff line
		@@ -70,21 +70,18 @@ FnordMetric.util.parseQueryString = function(qstr) {

		FnordMetric.util.setURLQueryString = function(hash, query_params, encode, push_state) {
		var path = "#"+hash+"?";
		var params = query_params;


		path += params.innerView + "=";
		path += query_params.innerView + "=";
		path += (encode)?
		encodeURIComponent(params.innerViewValue) :
		params.innerViewValue;

		delete params.innerView;
		delete params.innerViewValue;
		encodeURIComponent(query_params.innerViewValue) :
		query_params.innerViewValue;

		for (var param in params) {
		for (var param in query_params) {
		if (param != "innerView" && param != "innerViewValue") {
		path +=
		"&" + param +
		"=" + params[param];
		"=" + query_params[param];
		}
		}

		if (push_state) {
		@@ -119,7 +116,6 @@ FnordMetric.util.convertArrayToString = function(array) {

		/* simple loader foreground */
		FnordMetric.util.displayLoader = function(elem) {
		console.log(elem);
		elem.innerHTML = "<div class='load_foreground'><i class='fa fa-refresh fa-spin'></div>";
		}

		@@ -493,6 +489,7 @@ FnordMetric.util.createQuery = function(inputs, metric) {

		/* in singleMetricView */
		FnordMetric.util.generateSQLQueryFromParams = function(params) {
		console.log(params);
		//FIX html escape
		var query;
		var draw_stm = "DRAW LINECHART AXIS BOTTOM AXIS LEFT; ";
		@@ -504,7 +501,8 @@ FnordMetric.util.generateSQLQueryFromParams = function(params) {

		var table_ref = params.innerViewValue
		var view = params.view;
		var column = params.column; //column reference for rollups
		/* column for rollups */
		var columns = params.columns.split(",");;
		var start_time = params.start_time;
		var end_time = params.end_time;
		var t_step = params.t_step;
		@@ -514,15 +512,17 @@ FnordMetric.util.generateSQLQueryFromParams = function(params) {
		/* complete select_expr */
		if (view == "value") {
		select_expr += "value as y ";
		} else if (view == "rollup_sum") {
		} else if (view == "rollup_sum" \|\| view == "rollup_count") {
		draw_stm = "DRAW BARCHART AXIS BOTTOM AXIS LEFT;";
		var func = (view.split("_"))[1];
		//how to choose a column if there are more than one?
		select_expr =
		"SELECT " + column + " AS X, sum(value) AS Y;";
		" SELECT `" + columns[0] + "` AS X, " + func + "(value) AS Y";

		//hasAggregation = true; ??
		} else {
		select_expr +=
		view.toLowerCase() + "(value) AS Y;";
		view.toLowerCase() + "(value) AS Y";
		hasAggregation = true;
		}

		@@ -541,8 +541,12 @@ FnordMetric.util.generateSQLQueryFromParams = function(params) {

		/complete group_expr if an aggregate function is selected /
		if (hasAggregation) {
		group_expr = "GROUP "
		group_expr = " GROUP ";
		var hasGroupStm = false;

		if (t_step != undefined) {
		hasGroupStm = true;

		group_expr +=
		"OVER TIMEWINDOW(time, "+ t_step;

		@@ -550,19 +554,31 @@ FnordMetric.util.generateSQLQueryFromParams = function(params) {
		t_window : t_step;

		group_expr+= ")";

		/* fallback if group_by wasn't selected */
		if (by == undefined && columns != undefined) {
		group_expr += " BY " + columns[0];
		}
		}

		if (by != undefined) {
		hasGroupStm = true;

		//check by format
		group_expr += "BY " + by;
		}

		/* aggregate function without group_by statement */
		if (!hasGroupStm) {
		group_expr = "";
		}
		}

		query =
		draw_stm + select_expr +// where_expr +
		from_expr + group_expr + ";";


		console.log(query);
		return query;
		}

Admin message