metric preview widget css (5adfd100) · Commits · github_fork / Clip

fnordmetric-webui/fnordmetric-webui-metricpreviewwidget.js

+101 −46

Original line number	Diff line number	Diff line
		@@ -30,7 +30,7 @@ FnordMetric.util.MetricPreviewWidget = function() {
		"group_by" : []
		}

		elems.show.addEventListener('change', function() {
		elems.rollup.addEventListener('change', function() {
		var value = (this.value == "Value") ? null : this.value;
		inputs.show = value;
		FnordMetric.util.createQuery(inputs, metric);
		@@ -70,39 +70,92 @@ FnordMetric.util.MetricPreviewWidget = function() {

		function renderElems(elem, columns) {
		var elems = {};
		var show_ttl = document.createElement("div");
		show_ttl.innerHTML = "Show";
		var show_select = document.createElement("select");
		var show_options = ["Value", "Mean", "Count", "Sum"];
		show_options.map(function(show) {
		var option = document.createElement("option");
		option.innerHTML = show;
		show_select.appendChild(option);
		});

		elems.show = show_select;
		var controls = document.createElement("div");
		controls.className = "metric_preview_controls";
		elem.appendChild(controls);

		var rollup_group = document.createElement("div");
		rollup_group.className = "group aggregation_type";
		rollup_group.innerHTML = "<b>Rollup</b>"
		controls.appendChild(rollup_group);

		elem.appendChild(show_ttl);
		elem.appendChild(show_select);
		var rollup_select = document.createElement("select");
		rollup_group.appendChild(rollup_select);
		var rollup_options = ["Value", "Mean", "Count", "Sum"];
		rollup_options.map(function(rollup) {
		var option = document.createElement("option");
		option.innerHTML = rollup;
		rollup_select.appendChild(option);
		});
		elems.rollup = rollup_select;

		var aggregate_options = [
		"1s",
		"5s",
		"10s",
		"20s",
		"30s",
		"1m",
		"5m",
		"15m",
		"30m",
		"1h",
		"2h",
		"6h",
		"12h",
		"24h"];

		var aggr_group = document.createElement("div");
		aggr_group.className = "group aggregation_time_window";
		aggr_group.innerHTML = "<b>Time Window / Step<b>";
		controls.appendChild(aggr_group);

		var aggr_win = document.createElement("select");
		aggr_group.appendChild(aggr_win);
		aggregate_options.map(function(opt) {
		var option = document.createElement("option");
		option.innerHTML = opt;
		aggr_win.appendChild(option);
		});

		var aggr_ttl = document.createElement("div");
		aggr_ttl.innerHTML = "Aggregation";
		var aggr_time = document.createElement("input");
		var aggr_step = document.createElement("input");
		var aggr_step = document.createElement("select");
		aggr_group.appendChild(aggr_step);
		aggregate_options.map(function(opt) {
		var option = document.createElement("option");
		option.innerHTML = opt;
		aggr_step.appendChild(option);
		});

		elems.aggregation = {
		time : aggr_time,
		step: aggr_step
		"window" : aggr_win,
		"step": aggr_step
		};

		elem.appendChild(aggr_ttl);
		elem.appendChild(aggr_time);
		elem.appendChild(aggr_step);
		var date_group = document.createElement("div");
		date_group.className = "group date";
		controls.appendChild(date_group);

		var date_ttl = document.createElement("b");
		date_ttl.innerHTML = "End Date";
		var datepicker = document.createElement("input");
		date_group.appendChild(date_ttl);
		date_group.appendChild(datepicker);
		FnordMetric.util.DatePicker(elem, datepicker);

		var timespan_ttl = document.createElement("div");
		timespan_ttl.innerHTML = "Last Seconds";
		var timespan_group = document.createElement("div");
		timespan_group.className = "group timespan";
		controls.appendChild(timespan_group);

		var timespan_ttl = document.createElement("b");
		timespan_ttl.innerHTML = "Show the last...";
		var timespan_select = document.createElement("select");
		var timespans = [10, 30, 60, 90];
		var timespans = [
		"5 minutes",
		"15 minutes",
		"30 minutes",
		"1 hour"];

		timespans.map(function(timespan) {
		var option = document.createElement("option");
		option.innerHTML = timespan;
		@@ -110,48 +163,50 @@ FnordMetric.util.MetricPreviewWidget = function() {
		});

		elems.seconds = timespan_select;
		timespan_group.appendChild(timespan_ttl);
		timespan_group.appendChild(timespan_select);
		controls.appendChild(timespan_group);

		elem.appendChild(timespan_ttl);
		elem.appendChild(timespan_select);

		var date_ttl = document.createElement("div");
		date_ttl.innerHTML = "End Date";
		var datepicker = document.createElement("input");
		elem.appendChild(date_ttl);
		elem.appendChild(datepicker);
		FnordMetric.util.DatePicker(elem, datepicker);
		var groupby_group = document.createElement("div");
		groupby_group.className = "group groupby";
		groupby_group.innerHTML = "<b>Group By</b>";
		controls.appendChild(groupby_group);

		if (columns.length > 0) {
		var group_buttons = [];
		columns.map(function(column) {
		var btn = FnordMetric.createButton(
		"#", undefined, column);
		"#", undefined, "<i class='fa fa-toggle-off'></i>" + column);
		group_buttons.push(btn);
		elem.appendChild(btn);
		groupby_group.appendChild(btn);
		});
		elems.group_by = group_buttons;
		var group_ttl = document.createElement("div");
		group_ttl.innerHTML = "Group By";
		elem.appendChild(group_ttl);
		}

		var secondary_controls = document.createElement("div");
		elem.appendChild(secondary_controls);
		secondary_controls.className = "metric_preview_secondary_controls";
		secondary_controls.innerHTML = "<div class='btn'><i class='fa fa-database'></i> SQL Editor</div>";
		secondary_controls.innerHTML += "<div class='btn'><i class='fa fa-share'></i> Embed</div>";

		var timespan_updater = document.createElement("div");
		var prev_timespan = FnordMetric.createButton(
		"#", undefined, "←");
		"#", undefined, "<i class='fa fa-chevron-left'></i>");
		var next_timespan = FnordMetric.createButton(
		"#", undefined, "→");
		"#", undefined, "<i class='fa fa-chevron-right'></i>");
		var updater_ttl = document.createElement("span");
		updater_ttl.innerHTML = "DATE";
		updater_ttl.className = "current_date";
		updater_ttl.innerHTML = "2014-11-11 20:15 — now";

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

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

		updateEventHandler(elems);
		//createQuery(

fnordmetric-webui/fnordmetric-webui-singlemetricview.js

+0 −14

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

		var editor_btn = FnordMetric.createButton(
		"#", undefined, "Open in Query Editor");
		elem.appendChild(editor_btn);

		editor_btn.onclick = function(e) {
		e.preventDefault();
		var query =
		"SELECT * FROM `" + query_params.value + "` LIMIT 100;";
		FnordMetric.util.setFragmentURL(
		"query_playground", "sql_query", query, true);
		//FIXME --> openUrl
		location.reload();
		}

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

fnordmetric-webui/fnordmetric-webui.css

+212 −4

Original line number	Diff line number	Diff line
		@@ -72,6 +72,34 @@
		.fa-bolt:before {
		content: "\f0e7";
		}
		.fa-toggle-off:before {
		content: "\f204";
		}
		.fa-toggle-on:before {
		content: "\f205";
		}
		.fa-edit:before,
		.fa-pencil-square-o:before {
		content: "\f044";
		}
		.fa-share:before {
		content: "\f1e0";
		}
		.fa-pencil:before {
		content: "\f040";
		}
		.fa-code-fork:before {
		content: "\f126";
		}
		.fa-sign-out:before {
		content: "\f08b";
		}
		.fa-chevron-left:before {
		content: "\f053";
		}
		.fa-chevron-right:before {
		content: "\f054";
		}

		.fa-spin {
		-webkit-animation: fa-spin 1s infinite linear;
		@@ -102,7 +130,7 @@
		body, html {
		margin: 0;
		padding: 0;
		font-family: Helvetica, Arial, sans-serif;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #545758;
		}
		@@ -207,10 +235,12 @@ input {
		}

		.viewport {
		min-width: 900px;
		margin-top: 49px;
		}

		.headbar {
		min-width: 900px;
		height: 49px;
		top: 0;
		position: absolute;
		@@ -229,7 +259,7 @@ input {
		}

		.headbar a h1 {
		font-weight: 500;
		font-weight: 400;
		font-size: 100%;
		line-height: 50px;
		height: 49px;
		@@ -655,7 +685,7 @@ table.metric_list tr.list_header i.sort {
		table.metric_list th,
		table.metric_list td {
		text-align: left;
		font-weight: 500;
		font-weight: 400;
		border: none;
		height: 38px;
		line-height: 38px;
		@@ -663,6 +693,10 @@ table.metric_list td {
		padding: 0 20px;
		}

		table.metric_list th {
		line-height: 40px;
		}

		table.metric_list th {
		border-right: 1px solid rgb(226, 232, 237);
		}
		@@ -734,7 +768,7 @@ table.metric_list tr:hover td {

		h1.page_header {
		font-size: 140%;
		font-weight: 500;
		font-weight: 400;
		margin: 0 0 0 20px;
		padding: 17px 0 10px 0;
		color: #738694;
		@@ -755,6 +789,7 @@ h1.page_header em {
		}

		.run_query_btn {
		font-weight: 500;
		cursor: pointer;
		height: 29px;
		line-height: 30px;
		@@ -766,6 +801,179 @@ h1.page_header em {
		color: #009fe9;
		}

		.metric_preview_controls {
		margin-top: 5px;
		height: 76px;
		border-top: 2px solid rgb(226, 232, 237);
		border-bottom: 2px solid rgb(226, 232, 237);
		background-color: #f6f8fa;
		color: #60707f;
		overflow: hidden;
		}

		.metric_preview_secondary_controls {
		height: 39px;
		margin: 0px;
		line-height: 39px;
		border-bottom: 1px solid #dbdedf;
		font-size: 90%;
		padding: 0 20px;
		text-align: right;
		}

		.metric_preview_secondary_controls .btn + .btn {
		border-left: 1px solid #ececec;
		padding-left: 20px;
		}

		.metric_preview_secondary_controls .btn:hover {
		text-decoration: underline;
		cursor: pointer;
		}

		.metric_preview_secondary_controls .btn {
		float: left;
		margin-right: 20px;
		height: 22px;
		line-height: 22px;
		margin-top: 10px;
		}

		.metric_preview_secondary_controls .btn:first-child {
		color: #009fe9;
		font-weight:500;
		}

		.metric_preview_secondary_controls .btn .fa-database {
		font-size: 87%;
		position: relative;
		top: -1px;
		}

		.metric_preview_secondary_controls .btn i {
		position: relative;
		margin-right: 4px;
		}

		.metric_preview_secondary_controls .fa-chevron-left {
		color: rgb(84, 87, 88);
		border-right: 1px solid #ececec;
		margin-right: 5px;
		padding-right: 15px;
		height: 22px;
		line-height: 24px;
		font-size: 90%;
		}

		.metric_preview_secondary_controls .fa-chevron-right {
		color: rgb(84, 87, 88);
		border-left: 1px solid #ececec;
		margin-left: 5px;
		padding-left: 15px;
		height: 22px;
		line-height: 24px;
		font-size: 90%;
		}

		.metric_preview_secondary_controls .fa-chevron-left:hover,
		.metric_preview_secondary_controls .fa-chevron-right:hover {
		color: #009fe9;
		}

		.metric_preview_secondary_controls .current_date {
		padding: 0 10px;
		font-weight: 500;
		}

		.metric_preview_controls .group.aggregation_type {
		border-right: 1px solid rgb(226, 232, 237);
		}

		.metric_preview_controls .group.aggregation_type select {
		min-width: 100px;
		}

		.metric_preview_controls .group.aggregation_time_window select {
		margin-right: 15px;
		min-width: 60px;
		}

		.metric_preview_controls .group.aggregation_time_window {
		padding-right: 0;
		border-right: 1px solid rgb(226, 232, 237);
		}

		.metric_preview_controls .group.date {
		float: right;
		}

		.metric_preview_controls .group.timespan {
		float: right;
		border-left: 1px solid rgb(226, 232, 237);
		padding-right: 0;
		}

		.metric_preview_controls .group.timespan select {
		min-width: 110px;
		}

		.metric_preview_controls .group {
		height: 64px;
		float: left;
		padding: 14px 20px 0 20px;
		overflow: hidden;
		}

		.metric_preview_controls .group.groupby i {
		margin-right: 5px;
		}

		.metric_preview_controls .group.groupby a {
		line-height: 28px;
		border: 1px solid #bbb;
		border-radius: 3px;
		padding: 0 8px;
		text-align: center;
		font-size: 12px;
		text-decoration: none;
		background: #fff;
		border: 1px solid #b3c2d0;
		color: #545758;
		height: 28px;
		display: block;
		}

		.metric_preview_controls .group b {
		font-weight: normal;
		font-size: 80%;
		line-height: 12px;
		font-weight: 500;
		display: block;
		margin-bottom: 6px;
		opacity: 0.7;
		}

		.metric_preview_controls .group input {
		height: 28px;
		line-height: 28px;
		padding: 0 8px;
		font-size: 12px;
		border-radius: 4px;
		border: 1px solid #b3c2d0;
		color: #545758;
		}

		.metric_preview_controls .group select {
		-webkit-appearance: menulist-button;
		height: 30px;
		font-size: 12px;
		line-height: 30px;
		min-width: 150px;
		background: #fff;
		border: 1px solid #b3c2d0;
		color: #545758;
		}

		/* BASICS */

		.CodeMirror {

Admin message