enable endtime & timespan tooltip (ce0c23dd) · Commits · github_fork / Clip

fnordmetric-webui/fnordmetric-webui-datepicker.js

+45 −10

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

		FnordMetric.util.DatePicker = function(elem, input) {
		FnordMetric.util.DatePicker = function(elem, dp_input, callback) {
		var dp_widget = document.createElement("div");
		dp_widget.className = "datepicker_widget";
		elem.appendChild(dp_widget);
		var curr_day = new Date().getDay();
		var curr_date = new Date().getDate();
		var curr_month = new Date().getMonth();


		var human_days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];

		@@ -29,27 +33,50 @@ FnordMetric.util.DatePicker = function(elem, input) {
		}

		function setDate(hours, minutes, day, month, year) {
		input.value =
		(month+1) + "/" + day + "/" + year + " " + hours + ":" + minutes;
		dp_input.value =
		FnordMetric.util.appendLeadingZero(month+1) +
		"/" +
		FnordMetric.util.appendLeadingZero(day) +
		"/" + year + " " +
		FnordMetric.util.appendLeadingZero(hours) +
		":" +
		FnordMetric.util.appendLeadingZero(minutes);

		var ts = new Date(year, (month+1), day, hours, minutes).getTime();
		input.setAttribute("timestamp", ts);
		dp_input.setAttribute("timestamp", ts);
		callback(ts);
		}


		function init(month, year) {
		dp_widget.className = "datepicker_widget active";
		isCurrMonth = month == curr_month;

		var input_container = document.createElement("div");
		input_container.className = "input_container";
		var separator = document.createElement("span");
		separator.innerHTML = ":";

		var hour_input = document.createElement("input");
		//FIXME
		hour_input.placeholder = 12;
		hour_input.addEventListener('focus', function() {
		FnordMetric.util.validatedTimeInput(this, "hour");
		}, false);

		var minute_input = document.createElement("input");
		//FIXME
		minute_input.placeholder = 30;
		minute_input.addEventListener('focus', function() {
		FnordMetric.util.validatedTimeInput(this, "minute");
		}, false);

		input_container.appendChild(hour_input);
		input_container.appendChild(separator);
		input_container.appendChild(minute_input);
		dp_widget.appendChild(input_container);


		var first_day = new Date(year + "-" + (month+1) + "-01").getDay();
		/* Mo = 1, ... , Su = 7 */
		first_day = (first_day === 0)? 7 : first_day-1;
		@@ -104,6 +131,10 @@ FnordMetric.util.DatePicker = function(elem, input) {
		if (i < first_day \|\| first_day == 0) {
		cell.innerHTML = "";
		} else {
		if (isCurrMonth && day == curr_date) {
		cell.className = "highlight";
		}

		var link = FnordMetric.createButton(
		"#", undefined, day);
		link.addEventListener('click', function(e) {
		@@ -129,6 +160,10 @@ FnordMetric.util.DatePicker = function(elem, input) {
		rows++;
		for (var i = 0; i < 7 && day <= num_days; i++) {
		var cell = document.createElement("td");
		if (isCurrMonth && day == curr_date) {
		cell.className = "highlight";
		}

		var link = FnordMetric.createButton(
		"#", undefined, day);
		link.addEventListener('click', function(e) {
		@@ -147,13 +182,15 @@ FnordMetric.util.DatePicker = function(elem, input) {
		table.appendChild(row);
		}

		console.log(rows);
		if (rows < 6) {
		console.log("render last row");
		var last_row = document.createElement("tr");
		for (var i = 0; i < 7; i++) {
		var cell = document.createElement("td");
		if (day <= num_days) {
		if (isCurrMonth && day == curr_date) {
		cell.className = "highlight";
		}

		var link = FnordMetric.createButton(
		"#", undefined, day);
		link.addEventListener('click', function(e) {
		@@ -180,9 +217,7 @@ FnordMetric.util.DatePicker = function(elem, input) {




		input.addEventListener('focus', function() {
		console.log("open dateoicker");
		dp_input.addEventListener('focus', function() {
		dp_widget.innerHTML = "";
		var now = new Date();
		var month = now.getMonth();
		@@ -190,7 +225,7 @@ FnordMetric.util.DatePicker = function(elem, input) {
		init(month, year)
		}, false);

		input.addEventListener('blur', function() {
		dp_input.addEventListener('blur', function() {
		//dp_widget.innerHTML = "";
		}, false);

fnordmetric-webui/fnordmetric-webui-metricpreviewwidget.js

+84 −36

Original line number	Diff line number	Diff line
		@@ -22,6 +22,21 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {
		var table_container = document.createElement("div");
		var chart_container = document.createElement("div");

		var inputs = {
		"show" : "Value",
		"aggregation" : {
		"time" : null,
		"step" : null
		},
		"time" : {
		"mseconds_to_end" : null,
		"end" : null
		},
		"group_by" : [],
		"columns" : null
		}


		function renderChart(chart) {
		if (chart != undefined) {
		chart_container.innerHTML = "";
		@@ -86,23 +101,28 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {

		}

		//FIXME works but seems to be ugly
		function updateEventHandler(elems, columns) {
		var inputs = {
		"show" : "Value",
		"aggregation" : {
		"time" : 1000,
		"step" : 1000
		},
		"time" : {
		"time_to_end" : null,
		"end" : null
		},
		"group_by" : [],
		"columns" : columns
		function onDateSubmit(ts) {
		inputs.time.end = ts;
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		}

		function updateDateTimeElems(start, end, title, input) {
		var end_string = FnordMetric.util.getDateTimeString(end);

		if (input != null) {
		input.value = end_string;
		input.setAttribute("id", end);
		}

		title.innerHTML =
		FnordMetric.util.getDateTimeString(start) +
		" — " + end_string;

		}


		//FIXME works but seems to be ugly
		function updateEventHandler(elems, columns) {
		elems.rollup.addEventListener('change', function() {
		inputs.show = this.value;
		handleAggrAvailability(
		@@ -121,8 +141,12 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {
		}, false);

		elems.seconds.addEventListener('change', function() {
		inputs.time.time_to_end =
		var mseconds_to_end =
		FnordMetric.util.toMilliSeconds(this.value);
		var start = inputs.time.end - mseconds_to_end;
		updateDateTimeElems(
		start, inputs.time.end, elems.timespan.title, null);
		inputs.time.mseconds_to_end = mseconds_to_end;
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		}, false);

		@@ -144,12 +168,37 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {
		}, false);
		}

		elems.timespan.next.addEventListener('click', function(e) {
		e.preventDefault();
		var end_time =
		parseInt(inputs.time.end, 10) + parseInt(inputs.time.mseconds_to_end, 10);
		updateDateTimeElems(
		inputs.time.end, end_time, elems.timespan.title, elems.date);
		inputs.time.end = end_time;
		runQuery(FnordMetric.util.createQuery(inputs, metric));

		//update elems.timespan.title

		}, false);

		elems.timespan.prev.addEventListener('click', function(e) {
		e.preventDefault();
		var end_time =
		inputs.time.end - inputs.time.mseconds_to_end;
		updateDateTimeElems(
		end_time, inputs.time.end, elems.timespan.title, elems.date);
		inputs.time.end = end_time;
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		//update elems.timespan.title
		}, false);

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


		function initElems(columns) {
		var elems = {};
		var now = Date.now();
		var initial_timespan;

		var controls = document.createElement("div");
		controls.className = "metric_preview_controls";
		@@ -219,8 +268,9 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {

		var datepicker = document.createElement("input");
		date_group.appendChild(datepicker);
		/* add callback */
		FnordMetric.util.DatePicker(date_group, datepicker);
		FnordMetric.util.DatePicker(date_group, datepicker, onDateSubmit);
		datepicker.value = FnordMetric.util.getDateTimeString(now);
		datepicker.setAttribute("id", now);
		elems.date = datepicker;

		var timespan_group = document.createElement("div");
		@@ -242,6 +292,9 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {
		timespan_select.appendChild(option);
		});

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

		elems.seconds = timespan_select;
		timespan_group.appendChild(timespan_ttl);
		timespan_group.appendChild(timespan_select);
		@@ -295,11 +348,15 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {
		"#", undefined, "<i class='fa fa-chevron-right'></i>");
		var updater_ttl = document.createElement("span");
		updater_ttl.className = "current_date";
		updater_ttl.innerHTML = "2014-11-11 20:15 — now";
		updater_ttl.innerHTML =
		FnordMetric.util.getDateTimeString(
		now - initial_timespan) + " — " +
		FnordMetric.util.getDateTimeString(now);

		elems.timespan = {
		prev : prev_timespan,
		next : next_timespan
		next : next_timespan,
		title: updater_ttl
		}

		secondary_controls.appendChild(timespan_updater);
		@@ -309,25 +366,16 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {

		updateEventHandler(elems, columns);

		var end_time = FnordMetric.util.humanDateToMikroTS(
		datepicker.value);
		inputs.aggregation.time = FnordMetric.util.toMilliSeconds(
		aggregate_options[0]);
		inputs.aggregation.step = inputs.aggregation.time;
		inputs.time.mseconds_to_end = initial_timespan;
		inputs.columns = columns;
		inputs.time.end = datepicker.getAttribute("id");

		handleAggrAvailability("Value", aggr_win, aggr_step, group_buttons);

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


		runQuery(FnordMetric.util.createQuery(inputs, metric));
		}

		function render() {

fnordmetric-webui/fnordmetric-webui-util.js

+58 −17

Original line number	Diff line number	Diff line
		@@ -379,9 +379,8 @@ FnordMetric.util.toMilliSeconds = function(timestr) {
		"m" : 60000,
		"h" : 3600000
		}

		var seconds = time[0] * conversion[time[1]];
		return seconds;
		return parseInt(seconds, 10);
		}


		@@ -394,7 +393,7 @@ FnordMetric.util.toMilliSeconds = function(timestr) {
		"step" : null
		},
		"time" : {
		"start" : null,
		"mseconds_to_end" : null,
		"end" : null
		}
		"group_by" : [],
		@@ -404,7 +403,7 @@ FnordMetric.util.toMilliSeconds = function(timestr) {
		FnordMetric.util.createQuery = function(inputs, metric) {
		var query = "";
		var timewindow = null;
		var where = null;
		var where = "";

		var draw = "DRAW Linechart AXIS BOTTOM AXIS LEFT; ";
		var select = "SELECT time AS x, ";
		@@ -435,21 +434,13 @@ FnordMetric.util.createQuery = function(inputs, metric) {
		query += draw + select + show + from;

		/* check for time --> where clause and add to query */
		if (inputs.time.start != null) {
		if (inputs.time.mseconds_to_end != null && inputs.time.end != null ) {
		var start = inputs.time.end - inputs.time.mseconds_to_end;
		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 +=
		" where time > FROM_TIMESTAMP(" + start + ")" +
		" and time < FROM_TIMESTAMP(" + inputs.time.end +")";
		//console.log(where);
		}
		}

		//query += where;

		if (hasAggr) {
		@@ -493,4 +484,54 @@ FnordMetric.util.getMonthStr = function(index) {
		return months[index];
		}

		FnordMetric.util.isNumKey = function(keycode) {
		return (
		(keycode >= 48 && keycode <= 57) \|\| (keycode >= 96 && keycode <= 105));
		}

		/* tab, arrow-left, arrow-right, deletekeys */
		FnordMetric.util.isNavKey = function(keycode) {
		return (
		keycode == 8 \|\|
		keycode == 9 \|\|
		keycode == 37 \|\|
		keycode == 39 \|\|
		keycode == 46);
		}

		FnordMetric.util.validatedTimeInput = function (time_input, type) {
		var input;
		time_input.addEventListener('keydown', function(e) {
		if (FnordMetric.util.isNumKey(e.keyCode)) {
		var input = this.value;
		//TODO validate input
		return;
		}
		if (!FnordMetric.util.isNavKey(e.keyCode)) {
		e.preventDefault();
		}
		}, false);

		}

		FnordMetric.util.appendLeadingZero = function (num) {
		return (num > 9)? num : "0" + num;
		}


		/* returns mm/dd/yyyy hh:mm */
		FnordMetric.util.getDateTimeString = function(timestamp) {
		var timestamp = timestamp == undefined?
		new Date() : new Date(parseInt(timestamp, 10));

		var month = timestamp.getMonth();
		month = FnordMetric.util.appendLeadingZero(month +1);
		var day = FnordMetric.util.appendLeadingZero(timestamp.getDate());
		var hours = FnordMetric.util.appendLeadingZero(timestamp.getHours());
		var minutes = FnordMetric.util.appendLeadingZero(timestamp.getMinutes());
		return (
		month + "/" + day + "/" +
		timestamp.getFullYear() + " " + hours +
		":" + minutes);
		}

fnordmetric-webui/fnordmetric-webui.css

+5 −0

Original line number	Diff line number	Diff line
		@@ -656,6 +656,7 @@ input {
		width: 200px;
		border: 1px solid rgb(226, 232, 237);
		border-radius: 3px;
		border-collapse: collapse;
		}

		.datepicker_widget table th {
		@@ -674,6 +675,10 @@ input {
		text-align:center;
		}

		.datepicker_widget table td.highlight {
		background-color: rgb(226, 232, 237);
		}

		.datepicker_widget .month_ttp {
		color: #444;
		padding-left: 5px;

Admin message