merge lauras metric explorer from upstream (1c34ee3b) · Commits · github_fork / Clip

src/libfnord/fnord-metricdb/metric-explorer/fn-metric-explorer.css

0 → 100644

+40 −0

Original line number	Diff line number	Diff line
		/*
		This file is part of the "FnordMetric" project
		Copyright (c) 2014 Laura Schlimmer
		Copyright (c) 2014 Paul Asmuth, Google Inc.

		FnordMetric is free software: you can redistribute it and/or modify it under
		the terms of the GNU General Public License v3.0. You should have received a
		copy of the GNU General Public License along with this program. If not, see
		<http://www.gnu.org/licenses/>.
		*/
		fn-metric-explorer-list,
		fn-metric-explorer-search {
		display: block;
		width: 100%;
		}

		fn-metric-explorer-list fn-table /deep/ table,
		fn-metric-explorer-search fn-table /deep/ table {
		width: 100%;
		}





		fn-metric-explorer-list .navigation fn-search,
		fn-metric-explorer-search .navigation fn-search {
		height: 32px;
		width: 13%;
		min-width: 190px;
		float: right;
		margin: 6px 10px 0 0;
		}

		fn-metric-explorer-list .navigation fn-search /deep/ ul,
		fn-metric-explorer-search .navigation fn-search /deep/ ul {
		width: 100%;
		min-width: 150px;
		overflow: hidden;
		}

src/libfnord/fnord-metricdb/metric-explorer/metric-explorer-list.html

0 → 100644

+263 −0

Original line number	Diff line number	Diff line
		<!--
		This file is part of the "FnordMetric" project
		Copyright (c) 2014 Laura Schlimmer
		Copyright (c) 2014 Paul Asmuth, Google Inc.

		FnordMetric is free software: you can redistribute it and/or modify it under
		the terms of the GNU General Public License v3.0. You should have received a
		copy of the GNU General Public License along with this program. If not, see
		<http://www.gnu.org/licenses/>.
		-->

		<template id="fn-metric-explorer-list-base-tpl">
		<style type='text/css'>
		fn-message {
		display: none;
		width: 40%;
		min-width: 550px;
		margin: auto;
		}

		fn-message-text {
		line-height: 1.7;
		}
		fn-loader {
		padding-top: 0;
		}

		fn-message.active {
		display:block;
		}

		fn-message.active + .list.ui {
		display: none;
		}

		fn-table {
		width: 100%;
		border-top: 1px solid #ddd;
		border-radius: 0;
		}

		fn-table /deep/ table {
		border-radius: 0;
		border-top: none;
		margin-bottom: 0;
		}

		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%;
		background: transparent;
		border-radius: 0;
		border-top: none;
		}

		fn-pager {
		float:right;
		margin: 5px 5px 5px 0;
		}
		</style>

		<fn-loader data-transparent data-loading data-loader-type="loader3">
		<fn-message class="overview" data-state='error'>
		<fn-message-header>
		Server Error
		</fn-message-header>
		<fn-message-text>
		Unable to connect to Server
		<br />
		<span></span>
		</fn-message-text>
		</fn-message>
		<div class="list ui">
		<div class="navigation">
		<h1 class="small left">Metrics &rsaquo; </h1>
		<fn-search data-size="small" data-placeholder="Search...">
		<fn-search-icon><i class="fa fa-search"></i></fn-search-icon>
		</fn-search>
		</div>
		<div style="border-top: 1px solid #bbb; background: #fff;">
		<fn-table data-per-page="25" data-page="0" data-clickable>
		<fn-table-column data-sortable data-presort="asc">Metric</fn-table-column>
		<fn-table-column>Labels</fn-table-column>
		<fn-table-column data-sortable>Last Insert</fn-table-column>
		<fn-table-column data-sortable>Total Stored Bytes</fn-table-column>
		<table>
		</table>
		</fn-table>
		</div>
		<fn-pager data-for data-first-item="1" data-per-page="25" data-circling></fn-pager>
		</div>
		</fn-loader>
		</template>

		<script type='text/javascript'>
		var MetricExplorerList = function() {

		this.createdCallback = function() {
		var tpl = Fnord.getTemplate("fn-metric-explorer-list", "base");
		this.appendChild(tpl);

		if (this.hasAttribute('data-url')) {
		this.init();
		}

		};

		this.attributeChangedCallback = function(attr, new_val, old_val) {
		if (attr == 'data-url') {
		this.init();
		}
		};

		this.init = function() {
		var params = Fnord.parseUrlQueryString(this.getAttribute('data-url'));
		var metric_url = "";
		var header = "All Metrics";
		var openPreview = false;

		if (params.path == "search" &&
		params.query_params &&
		params.query_params.innerViewValue) {
		metric_url = "?filter=" + params.query_params.innerViewValue;
		header = "Search " + params.query_params.innerViewValue;
		openPreview = true;
		}

		this.querySelector("fn-loader").style.height = (window.innerHeight - 65) + "px";
		this.loadMetricList(metric_url, openPreview);
		this.setHeader(header);
		this.initSearch();
		};


		this.setHeader = function(title) {
		this.querySelector(".navigation h1").innerHTML += " " + title;
		};


		this.initSearch = function() {
		var base = this;
		var onSearchSubmit = (function(base) {
		return function(e) {
		var url = "search?q=" + encodeURIComponent(e.srcElement.getValue());
		openUrl(url);
		}
		})(this);


		var onSearchAutocomplete = (function(base) {
		return function(e) {
		var term = e.srcElement.getValue();
		var res = [];
		var url = baseUrl + "/list?filter=" + term;
		Fnord.httpGet(url, function(r) {
		if (r.status == 200) {
		var json = JSON.parse(r.response);
		json.metrics.map(function(metric) {
		res.push({query : metric.key});
		});
		e.srcElement.autocomplete(term, res);
		}
		});
		}
		})(this);

		var search = this.querySelector("fn-search");
		search.addEventListener("fn-search-submit", onSearchSubmit);
		search.addEventListener("fn-search-autocomplete", onSearchAutocomplete);
		};


		this.loadMetricList = function(url_query, openPreview) {
		var base = this;
		var loader = this.querySelector("fn-loader");
		var table = this.querySelector("fn-table table");
		var url = baseUrl + "list" + url_query;

		Fnord.httpGet(url, function(r) {
		if (r.status === 200) {
		var metrics = JSON.parse(r.response).metrics;

		if (metrics.length == 1 && openPreview) {
		base.openMetricPreview(metrics[0].key);
		return;
		}

		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);

		});
		base.querySelector("fn-table").renderTable();
		base.querySelector("fn-message").className = "";
		base.initTablePager(metrics.length);
		} else {
		base.renderServerError(r.statusText, r.status);
		}
		loader.removeAttribute("data-loading");
		});

		table.addEventListener('fn-table-row-click', function(e) {
		var metric_key = e.srcElement.getAttribute('metric-key');
		var end = Math.round(Date.now() / 1000);
		var start = end - 3600;
		base.openMetricPreview(metric_key);
		}, false);
		};


		this.initTablePager = function(list_size) {
		var pager = this.querySelector("fn-pager");
		var table = this.querySelector("fn-table");
		pager.setAttribute('data-last-item', list_size);
		pager.forElement(table);

		pager.addEventListener('fn-pager-turn', function() {

		}, false);
		};


		this.openMetricPreview = function(metric_key) {
		var end = Math.round(Date.now() / 1000);
		var start = end - 3600;
		var raw_url =
		"metric?metric="+ encodeURIComponent(metric_key) +
		"&aggr_fn=sum&&aggr_window=5&aggr_step=10&from=" + start +
		"&until=" + end +
		"&scale=0.8";
		openUrl(raw_url, true)

		};

		this.renderServerError = function(text, statusCode) {
		var msg = this.querySelector("fn-message");
		msg.className = "active";
		msg.setAttribute('data-state', 'error');
		this.querySelector("fn-loader").style.paddingTop = "50px";
		msg.querySelector("fn-message-text span").innerHTML =
		"statusCode: "+ statusCode;
		};
		};

		window.addEventListener('fn-ready', function() {
		Fnord.registerComponent('fn-metric-explorer-list', MetricExplorerList);
		}, false);
		</script>

src/libfnord/fnord-metricdb/metric-explorer/metric-explorer-preview.html

0 → 100644

+774 −0

File added.

Preview size limit exceeded, changes collapsed.

src/libfnord/fnord-metricdb/metric-explorer/metric-explorer-search.html

0 → 100644

+168 −0

Original line number	Diff line number	Diff line
		<!--
		This file is part of the "FnordMetric" project
		Copyright (c) 2014 Laura Schlimmer
		Copyright (c) 2014 Paul Asmuth, Google Inc.

		FnordMetric is free software: you can redistribute it and/or modify it under
		the terms of the GNU General Public License v3.0. You should have received a
		copy of the GNU General Public License along with this program. If not, see
		<http://www.gnu.org/licenses/>.
		-->

		<template id="fn-metric-explorer-search-base-tpl">
		<style type='text/css'>
		fn-table {
		width: 100%;
		}

		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%;
		}

		fn-pager {
		float:right;
		margin: 5px 5px 5px 0;
		}
		</style>
		<fn-loader data-loading data-loader-type="loader3">
		<div class="navigation">
		<h1 class="page_header"><i>Metrics</i> &rsaquo; Search</h1>
		<fn-search data-placeholder="Search...">
		<fn-search-icon><i class="fa fa-search"></i></fn-search-icon>
		</fn-search>
		</div>
		<fn-table data-per-page="25" data-clickable style="width: 100%;">
		<fn-table-column>Metric</fn-table-column>
		<fn-table-column>Labels</fn-table-column>
		<fn-table-column>Last Insert</fn-table-column>
		<fn-table-column>Total Stored Bytes</fn-table-column>
		</fn-table>
		</fn-loader>
		</template>

		<script type='text/javascript'>
		var MetricExplorerSearch = function() {
		this.createdCallback = function() {
		var tpl = Fnord.getTemplate("fn-metric-explorer-search", "base");
		this.appendChild(tpl);

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

		var base = this;

		var onSearchSubmit = (function(base) {
		return function(e) {
		var url = "q=" + encodeURIComponent(e.srcElement.getValue());
		open("search", url);
		}
		})(this);


		var onSearchAutocomplete = (function(base) {
		return function(e) {
		var term = e.srcElement.getValue();
		var res = [];
		var url = baseUrl + "/list?filter=" + term;
		Fnord.httpGet(url, function(r) {
		if (r.status == 200) {
		var json = JSON.parse(r.response);
		json.metrics.map(function(metric) {
		res.push({query : metric.key});
		});
		e.srcElement.autocomplete(term, res);
		}
		});
		}
		})(this);

		var search = this.querySelector("fn-search");
		search.addEventListener("fn-search-submit", onSearchSubmit);
		search.addEventListener("fn-search-autocomplete", onSearchAutocomplete);
		};

		this.attributeChangedCallback = function(attr, old_val, new_val) {
		if (attr == 'data-url') {
		this.parseUrlAndLoad();
		}
		};

		this.parseUrlAndLoad = function() {
		var q_params =
		parseUrlQueryString(this.getAttribute("data-url")).query_params;

		if (q_params && q_params.innerViewValue) {
		this.loadMetricList(q_params.innerViewValue);

		this.querySelector(".navigation h1").innerHTML += " " + q_params.innerViewValue;

		} else {
		this.loadMetricList("");
		}
		}

		this.loadMetricList = function(key) {
		var loader = this.querySelector("fn-loader");
		var table = this.querySelector("fn-table");
		var url = baseUrl + "/list?filter=" + key;
		var base = this;

		Fnord.httpGet(url, function(r) {
		if (r.status === 200) {
		var metrics = JSON.parse(r.response).metrics;

		if (metrics.length === 1) {
		base.openMetricPreview(key);
		return;
		}

		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.appendRow(tr_elem);

		});
		loader.removeAttribute("data-loading")
		}
		});


		table.addEventListener('fn-table-row-click', function(e) {
		var metric_key = e.srcElement.getAttribute('metric-key');
		base.openMetricPreview(metric_key);
		}, false);
		}

		this.openMetricPreview = function(metric_key) {
		var end = Math.round(Date.now() / 1000);
		var start = end - 3600;
		var raw_url =
		"metric?key="+ encodeURIComponent(metric_key) +
		"&view=value&start_time=" + start +
		"&end_time=" + end;
		openUrl(raw_url, true)

		}

		}

		window.addEventListener('fn-ready', function() {
		Fnord.registerComponent('fn-metric-explorer-search', MetricExplorerSearch);
		}, false);
		</script>

src/libfnord/fnord-webcomponents/components/fn-calendar-demo.html

0 → 100644

+21 −0

Original line number	Diff line number	Diff line
		<!--
		This file is part of the "FnordMetric" project
		Copyright (c) 2014 Laura Schlimmer
		Copyright (c) 2014 Paul Asmuth, Google Inc.

		FnordMetric is free software: you can redistribute it and/or modify it under
		the terms of the GNU General Public License v3.0. You should have received a
		copy of the GNU General Public License along with this program. If not, see
		<http://www.gnu.org/licenses/>.
		-->
		<template id="fn-calendar-demo-base-tpl">
		<section>
		<h1><i>Example 1 »</i> Basic</h1>
		<fn-calendar></fn-calendar>
		</section>
		<section>
		<h1><i>Example 2 »</i> Small Calendar</h1>
		<fn-calendar data-style='small'></fn-calendar>
		</section>

		</template>

Admin message