fixed preview (except the tabbar component) (3c2bf675) · Commits · github_fork / Clip

src/fnordmetric/webui/fnordmetric-embed-query-popup.html

+1 −0

Original line number	Diff line number	Diff line
		@@ -69,6 +69,7 @@
		};

		this.show = function(url) {
		console.log("show", url);
		this.initViews(url);
		this.querySelector("fn-modal").show();
		}

src/fnordmetric/webui/fnordmetric-metric-list.html

+1 −1

Original line number	Diff line number	Diff line
		@@ -77,7 +77,7 @@
		var base = this;
		var app = document.querySelector("fnordmetric-app");

		Fnord.httpGet("/metrics", function(r) {
		Fnord.httpGet("/metrics/list", function(r) {
		if (r.status == 200) {
		var json = JSON.parse(r.response);

src/fnordmetric/webui/fnordmetric-metric-preview.html

+123 −68

Original line number	Diff line number	Diff line
		@@ -21,6 +21,15 @@
		color : #009fe9;
		}

		.group.group_by {
		display: none;
		}

		.group.group_by.active {
		display: block;
		}


		.group.group_by fn-button[data-active='active'] {
		background: rgb(226, 232, 237);
		}
		@@ -77,12 +86,17 @@

		.result_pane {
		display:none;
		padding-top: 20px;
		}

		.result_pane.active {
		display:block;
		}

		#table.result_pane {
		padding-top: 30px;
		}

		.result_pane fn-pager.table {
		float:right;
		margin-right: 5px;
		@@ -187,7 +201,7 @@
		</fn-button>
		</fnordmetric-controls-section>
		<fnordmetric-controls-section data-position='right'>
		<fn-daterangepicker data-selectable='past'>
		<fn-daterangepicker data-selectable='past' data-size="small">
		</fn-daterangepicker>
		<fnordmetric-controls-section>
		</fnordmetric-controls>
		@@ -196,13 +210,19 @@
		<div class="result_pane" id="chart">
		</div>
		<div class="result_pane" id="table">
		<fn-pager class='table' data-for data-circling></fn-pager>
		<fn-table data-per-page='25' data-page='0' style="width:100%;"></fn-table>
		<fn-pager class='table' data-first-item='1' data-per-page='25' data-current-page='0' data-for data-circling></fn-pager>
		</div>
		</fn-loader>
		</fn-loader>
		<fnordmetric-embed-query-popup>
		</fnordmetric-embed-query-popup>
		<fn-tooltip name="aggr">
		There's no time-window aggregation for the current rollup
		</fn-tooltip>
		<fn-tooltip data-pointer="right" name="endtime">
		Please select a date in the past
		</fn-tooltip>
		</template>

		<script type="text/javascript">
		@@ -249,7 +269,7 @@
		}

		this.init = function(metric) {
		var url = "/metrics?filter=" + encodeURIComponent(metric);
		var url = "/metrics/list?filter=" + encodeURIComponent(metric);
		var base = this;
		Fnord.httpGet(url, function(r) {
		if (r.status == 200) {
		@@ -261,7 +281,9 @@
		base.updateUrlParams(
		base.addRequiredURLParamsForView(
		base.getQueryParamOrDefaultValue("view")));
		base.initControls();
		base.handleControls();
		base.handleDateTimeControls();
		base.handleGroupBy();
		});
		};

		@@ -338,19 +360,6 @@

		};

		this.updateDateTimeElems = function(end_time) {
		var params = FnordMetric.util.parseQueryString(
		this.getAttribute("data-url"));
		var date_range = this.getQueryParamOrDefaultValue("time_range");
		var start_time = parseInt(end_time, 10) - parseInt(date_range, 10);
		this.updateUrlParams({"end_time" : end_time, "start_time" : start_time});

		var datepicker = this.querySelector("fn-datepicker");
		datepicker.setAttribute("data-timestamp", end_time * 1000);
		var daterangepicker = this.querySelector("fn-daterangepicker");
		daterangepicker.setAttribute("data-endtime", end_time * 1000);
		};

		this.handleAggregationDisplay = function() {
		var view = this.getQueryParamOrDefaultValue("view");
		var time_window = this.querySelector("#time_window");
		@@ -432,11 +441,15 @@
		});
		table_elem.appendChild(tr_elem);
		});

		table_elem.renderTable();
		table_elem.setAttribute('data-page', 0);
		pager.setAttribute('data-last-item', table.rows.length);
		pager.forElement(table_elem);
		};



		this.renderError = function(error) {
		var panes = this.querySelectorAll(".result_pane");
		for (var i = 0; i < panes.length; i++) {
		@@ -467,24 +480,84 @@
		'start_time' : start_time});
		};

		/***************** handle control elements *******************************/
		this.updateDateTimeElems = function(end_time) {
		var params = FnordMetric.util.parseQueryString(
		this.getAttribute("data-url"));
		var date_range = this.getQueryParamOrDefaultValue("time_range");
		var start_time = parseInt(end_time, 10) - parseInt(date_range, 10);
		this.updateUrlParams({"end_time" : end_time, "start_time" : start_time});

		var datepicker = this.querySelector("fn-datepicker");
		datepicker.setAttribute("data-timestamp", end_time * 1000);
		var daterangepicker = this.querySelector("fn-daterangepicker");
		daterangepicker.setAttribute("data-endtime", end_time * 1000);
		};

		this.initControls = function() {
		this.handleDateTimeControls = function() {
		var base = this;
		var rollup = this.querySelector("#rollup");
		var view = this.getQueryParamOrDefaultValue("view");
		rollup.setAttribute('data-preselected', view);
		var time_range_val = parseInt(
		this.getQueryParamOrDefaultValue("time_range"), 10);
		var end_time = parseInt(this.getQueryParamOrDefaultValue("end_time"), 10);

		var time_window = this.querySelector("#time_window");
		var t_window_val = this.getQueryParamOrDefaultValue("t_window");
		time_window.setAttribute('data-preselected', t_window_val);
		var time_range = this.querySelector("#timerange");
		time_range.setAttribute('data-preselected', time_range_val);

		var time_step = this.querySelector("#time_step");
		var t_step_val = this.getQueryParamOrDefaultValue("t_step");
		time_step.setAttribute('data-preselected', t_step_val);
		var datepicker = this.querySelector("fn-datepicker");
		datepicker.setAttribute('data-timestamp', (end_time * 1000));

		var daterangepicker = this.querySelector("fn-daterangepicker");
		daterangepicker.setAttribute('data-daterange', (time_range_val * 1000));
		daterangepicker.setAttribute('data-endtime', (end_time * 1000));

		this.querySelector("fn-tooltip[name='endtime']").initShowIf(
		daterangepicker.shadowRoot.getElementById("right"),
		function() {
		return (!daterangepicker.nextIsSelectable());
		}
		);

		time_range.addEventListener("fn-dropdown-item-click", function(e) {
		var endtime = base.getQueryParamOrDefaultValue("end_time");
		var date_range = parseInt(e.srcElement.getAttribute('data-value'));
		var starttime = parseInt(endtime, 10) - date_range;
		base.updateUrlParams({"start_time": starttime});
		//check
		daterangepicker.setAttribute("data-daterange", (date_range * 1000));
		}, false);

		datepicker.addEventListener('fn-datepicker-select', function() {
		var timestamp = parseInt(this.getAttribute("data-timestamp"), 10);
		timestamp = Math.round(timestamp / 1000);
		base.updateDateTimeElems(timestamp);
		}, false);

		daterangepicker.addEventListener('fn-daterangepicker-select-previous',
		function() {
		var endtime = parseInt(this.getAttribute("data-endtime"), 10);
		endtime = Math.round(endtime / 1000);
		base.updateDateTimeElems(endtime);
		}, false);

		daterangepicker.addEventListener('fn-daterangepicker-select-next',
		function() {
		var endtime = parseInt(this.getAttribute("data-endtime"), 10);
		endtime = Math.round(endtime / 1000);
		base.updateDateTimeElems(endtime);
		}, false);
		}

		this.handleGroupBy = function() {
		var columns = this.getQueryParamOrDefaultValue("columns");
		if (columns.length == 0) {return;}

		var base = this;
		var group_by_field = this.querySelector(".group.group_by");
		var columns = this.getQueryParamOrDefaultValue("columns").split(",");
		columns = columns.split(",");
		var by = this.getQueryParamOrDefaultValue("by").split(",");

		group_by_field.classList.add("active");

		columns.map(function(c) {
		var button = document.createElement("fn-button");
		button.innerHTML = c;
		@@ -506,24 +579,35 @@
		base.updateUrlParams({"by": columns});
		});
		});
		}

		this.handleControls = function() {
		var base = this;
		//init
		var rollup = this.querySelector("#rollup");
		var view = this.getQueryParamOrDefaultValue("view");
		rollup.setAttribute('data-preselected', view);

		var time_range_val = parseInt(
		this.getQueryParamOrDefaultValue("time_range"), 10);
		var end_time = parseInt(this.getQueryParamOrDefaultValue("end_time"), 10);
		var time_window = this.querySelector("#time_window");
		var t_window_val = this.getQueryParamOrDefaultValue("t_window");
		time_window.setAttribute('data-preselected', t_window_val);

		var time_range = this.querySelector("#timerange");
		time_range.setAttribute('data-preselected', time_range_val);
		var time_step = this.querySelector("#time_step");
		var t_step_val = this.getQueryParamOrDefaultValue("t_step");
		time_step.setAttribute('data-preselected', t_step_val);

		var datepicker = this.querySelector("fn-datepicker");
		datepicker.setAttribute('data-timestamp', (end_time * 1000));
		//handle events
		var tooltip = this.querySelector("fn-tooltip[name='aggr']");
		tooltip.initShowIf(time_window, function() {
		return (base.getQueryParamOrDefaultValue("view") == "value");
		});

		var daterangepicker = this.querySelector("fn-daterangepicker");
		daterangepicker.setAttribute('data-daterange', (time_range_val * 1000));
		daterangepicker.setAttribute('data-endtime', (end_time * 1000));
		var tooltip = this.querySelector("fn-tooltip[name='aggr']");
		tooltip.initShowIf(time_step, function() {
		return (base.getQueryParamOrDefaultValue("view") == "value");
		});


		//set controls event listeners
		rollup.addEventListener("fn-dropdown-item-click", function(e) {
		var view = e.srcElement.getAttribute('data-value');
		var new_params = base.addRequiredURLParamsForView(view);
		@@ -542,35 +626,6 @@
		base.updateUrlParams({"t_step": value});
		}, false);

		time_range.addEventListener("fn-dropdown-item-click", function(e) {
		var endtime = base.getQueryParamOrDefaultValue("end_time");
		var date_range = parseInt(e.srcElement.getAttribute('data-value'));
		var starttime = parseInt(endtime, 10) - date_range;
		base.updateUrlParams({"start_time": starttime});
		//check
		daterangepicker.setAttribute("data-daterange", (date_range * 1000));
		}, false);

		datepicker.addEventListener('fn-datepicker-select', function() {
		var timestamp = parseInt(this.getAttribute("data-timestamp"), 10);
		timestamp = Math.round(timestamp / 1000);
		base.updateDateTimeElems(timestamp);
		}, false);

		daterangepicker.addEventListener('fn-daterangepicker-select-previous',
		function() {
		var endtime = parseInt(this.getAttribute("data-endtime"), 10);
		endtime = Math.round(endtime / 1000);
		base.updateDateTimeElems(endtime);
		}, false);

		daterangepicker.addEventListener('fn-daterangepicker-select-next',
		function() {
		var endtime = parseInt(this.getAttribute("data-endtime"), 10);
		endtime = Math.round(endtime / 1000);
		base.updateDateTimeElems(endtime);
		}, false);

		var sql_editor_btn = this.querySelector("#sql_editor");
		sql_editor_btn.addEventListener("fn-button-click", function() {
		var params =

Admin message