added embed popup and table (949c2e1e) · Commits · github_fork / Clip

fnord-webcomponents/metric-explorer/metric-explorer-components/metric-explorer-list.html

+2 −2

Original line number	Diff line number	Diff line
		@@ -161,7 +161,7 @@
		var base = this;
		var loader = this.querySelector("fn-loader");
		var table = this.querySelector("fn-table");
		var url = baseUrl + "/list" + url_query;
		var url = baseUrl + "list" + url_query;

		Fnord.httpGet(url, function(r) {
		if (r.status === 200) {
		@@ -220,7 +220,7 @@
		var end = Math.round(Date.now() / 1000);
		var start = end - 3600;
		var raw_url =
		"metric?key="+ encodeURIComponent(metric_key) +
		"#metric?key="+ encodeURIComponent(metric_key) +
		"&view=value&start_time=" + start +
		"&end_time=" + end;
		openUrl(raw_url, true)

fnord-webcomponents/metric-explorer/metric-explorer-components/metric-explorer-preview.html

+70 −10

Original line number	Diff line number	Diff line
		@@ -84,11 +84,23 @@
		display: block;
		}

		#table.result_pane {
		padding-top: 4%;
		}

		fn-table /deep/ table > thead > tr > td,
		fn-table /deep/ table > thead > tr > th,
		fn-table /deep/ table > tbody > tr > td,
		fn-table /deep/ table > tbody > tr > th {
		font-size: 92%;
		}


		.result_pane fn-pager.table {
		.result_pane fn-pager {
		float:right;
		margin-right: 5px;
		}

		</style>
		<fn-loader>
		<h1 class="page_header">
		@@ -198,13 +210,27 @@
		<fn-loader id="result_pane" data-transparent>
		<fn-message data-state='error'></fn-message>
		<div class="result_pane" id="chart">
		<iframe width="100%" frameborder="0" height="260" scrolling="no"></iframe>
		<iframe width="100%" frameborder="0" height="360" scrolling="no"></iframe>
		</div>
		<div class="result_pane" id="table">
		<fn-pager data-for data-first-item="1" data-per-page="25" data-circling></fn-pager>
		<fn-table data-per-page='25' style="width:100%;">
		</fn-table>
		</div>
		</fn-loader>
		<fn-modal id="embed">
		<fn-modal-header>Embed</fn-modal-header>
		<fn-modal-content>
		<div class="header">Copy this into your HTML Page</div>
		<code>
		<iframe<br />    width="800"<br />
		height="400"<br />
		frameBorder="0"<br />
		src="<span id="src"></span>"
		><br /></iframe>
		</code>
		</fn-modal-content>
		</fn-modal>
		</fn-loader>
		</template>

		@@ -215,7 +241,7 @@
		this.appendChild(tpl);

		if (this.getAttribute('data-url') != null) {
		this.onUrlChange(true)
		this.onUrlChange(true);
		}

		}
		@@ -242,7 +268,7 @@
		this.init = function() {
		var base = this;
		var url =
		baseUrl + "/list?filter=" +
		baseUrl + "list?filter=" +
		encodeURIComponent(this.params.query_params.innerViewValue);

		Fnord.httpGet(url, function(r) {
		@@ -272,10 +298,36 @@
		}

		this.updateTable = function() {
		var url = this.buildQueryUrl("json");
		// var url = this.buildQueryUrl("json");
		var url = baseUrl + "list";
		var table = this.querySelector("#table.result_pane fn-table");
		var base = this;
		table.innerHTML = "";
		Fnord.httpGet(url, function(r) {
		console.log(r);
		if (r.status == 200) {
		JSON.parse(r.response).metrics.forEach(function(m) {

		var tr_elem = document.createElement("tr");
		tr_elem.setAttribute('metric-key', m.key);
		var cells = [
		m.key,
		m.labels.join(", "),
		m.last_insert,
		m.total_bytes];

		cells.map(function(cell) {
		var td_elem = document.createElement("td");
		td_elem.innerHTML = cell;
		tr_elem.appendChild(td_elem);
		});

		table.appendChild(tr_elem);
		});
		table.renderTable();
		base.querySelector("fn-pager").forElement(table);
		}
		});

		}

		this.buildQueryUrl = function(format) {
		@@ -298,7 +350,7 @@
		url +=
		"&format=" + format +
		"&min=0" +
		"&height=260" +
		"&height=360" +
		"&width=" + (document.body.offsetWidth - 20) +
		"&grid=both" +
		"&scale=0.8" +
		@@ -372,7 +424,9 @@
		}

		var path = setUrlFromQueryString("metric", this.params.query_params, true);
		if (this.getAttribute('data-url') != path) {
		this.setAttribute("data-url", path);
		}
		};

		this.getQueryParamOrDefaultValue = function(key) {
		@@ -575,11 +629,11 @@
		}, false);

		log_scale.addEventListener("fn-checkbox-unselect", function(e) {
		base.updateUrlParams({"loagrithmic" : false});
		base.updateUrlParams({"logarithmic" : false});
		}, false);

		inv_scale.addEventListener("fn-checkbox-unselect", function(e) {
		base.updateUrlParams({"inverted" : true});
		base.updateUrlParams({"inverted" : false});
		}, false);

		var interval_id;
		@@ -592,6 +646,12 @@
		this.setAttribute('data-state', 'active');
		}
		}, false);

		var modal = this.querySelector("fn-modal");
		this.querySelector("#embed_btn").addEventListener('fn-button-click', function() {
		modal.querySelector("span").innerHTML = baseUrl + base.getAttribute('data-url');
		modal.show();
		}, false);
		};
		};

fnord-webcomponents/metric-explorer/metric-explorer.html

+7 −1

Original line number	Diff line number	Diff line
		@@ -20,6 +20,7 @@
		<link rel="stylesheet" href="../components/fn-table.css" type="text/css">
		<link rel="stylesheet" href="../components/fn-pager.css" type="text/css">
		<link rel="stylesheet" href="../components/fn-message.css" type="text/css">
		<link rel="stylesheet" href="../components/fn-modal.css" type="text/css">
		</head>
		<body>
		<link rel="import" href="metric-explorer-components/metric-explorer-list.html" data-component="fn-metric-explorer-list">
		@@ -41,6 +42,7 @@
		<link rel="import" href="../components/fn-timeinput.html" data-component="fn-input-time">
		<link rel="import" href="../components/fn-pager.html" data-component="fn-pager">
		<link rel="import" href="../components/fn-message.html" data-component="fn-message">
		<link rel="import" href="../components/fn-modal.html" data-component="fn-modal">
		<link rel="stylesheet" href="../themes/midnight-blue.css" type="text/css">


		@@ -87,7 +89,11 @@

		var viewport = document.querySelector("#metric-explorer-viewport");
		var view = document.createElement(view_name);

		raw_url = "#" + raw_url;
		if (view.getAttribute('data-url') != raw_url) {
		view.setAttribute("data-url", raw_url);
		}
		viewport.innerHTML = "";
		viewport.appendChild(view);

Admin message