wip (ac33f9f3) · Commits · github_fork / Clip

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

+65 −16

Original line number	Diff line number	Diff line
		@@ -11,6 +11,28 @@

		<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%;
		}
		@@ -28,6 +50,18 @@
		}
		</style>
		<fn-loader data-loading data-loader-type="loader3">
		<fn-message data-state='error'>
		<fn-message-header>
		Server Error
		</fn-message-header>
		<fn-message-text>
		We're sorry. The server encountered an error and was unable to complete
		your request.
		<br />
		<span></span>
		</fn-message-text>
		</fn-message>
		<div class="list ui">
		<div class="navigation">
		<h1 class="page_header"><i>Metrics</i> &rsaquo; </h1>
		<fn-search data-placeholder="Search...">
		@@ -41,6 +75,7 @@
		<fn-table-column data-sortable>Last Insert</fn-table-column>
		<fn-table-column data-sortable>Total Stored Bytes</fn-table-column>
		</fn-table>
		</div>
		</fn-loader>
		</template>

		@@ -68,15 +103,17 @@
		var params = 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.loadMetricList(metric_url);
		this.loadMetricList(metric_url, openPreview);
		this.setHeader(header);
		this.initSearch();
		};
		@@ -120,7 +157,7 @@
		};


		this.loadMetricList = function(url_query) {
		this.loadMetricList = function(url_query, openPreview) {
		var base = this;
		var loader = this.querySelector("fn-loader");
		var table = this.querySelector("fn-table");
		@@ -130,7 +167,7 @@
		if (r.status === 200) {
		var metrics = JSON.parse(r.response).metrics;

		if (metrics.length == 1) {
		if (metrics.length == 1 && openPreview) {
		base.openMetricPreview(metrics[0].key);
		return;
		}
		@@ -153,9 +190,12 @@
		table.appendRow(tr_elem);

		});
		loader.removeAttribute("data-loading")
		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) {
		@@ -186,6 +226,15 @@
		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 + " " + text;
		}
		};

		window.addEventListener('fn-ready', function() {

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

+9 −8

Original line number	Diff line number	Diff line
		@@ -217,6 +217,7 @@
		if (this.getAttribute('data-url') != null) {
		this.onUrlChange(true)
		}

		}

		this.attributeChangedCallback = function(attr, old_val, new_val) {
		@@ -234,8 +235,8 @@
		this.init();
		}

		//this.updateChart();
		//this.updateTable();
		this.updateChart();
		this.updateTable();
		};

		this.init = function() {
		@@ -244,13 +245,13 @@
		baseUrl + "/list?filter=" +
		encodeURIComponent(this.params.query_params.innerViewValue);

		/*Fnord.httpGet(url, function(r) {
		Fnord.httpGet(url, function(r) {
		if (r.status == 200) {
		var json = JSON.parse(r.response);
		json.metrics.map(function(m) {
		base.columns = m.labels.join(",");
		});
		}*/
		}
		base.columns = [];
		base.updateUrlParams(
		base.addRequiredURLParamsForView(
		@@ -260,7 +261,7 @@
		base.handleDateTimeControls();
		base.setHeader();
		base.handleAggregationDisplay();
		/});/
		});
		};


		@@ -273,12 +274,13 @@
		this.updateTable = function() {
		var url = this.buildQueryUrl("json");
		Fnord.httpGet(url, function(r) {
		console.log(r);
		});
		}

		this.buildQueryUrl = function(format) {
		var url =
		baseUrl + "/timeseries" +
		baseUrl + "timeseries" +
		"?metric=" + this.params.query_params.innerViewValue +
		"&from=" + this.getQueryParamOrDefaultValue("start_time") +
		"&until=" + this.getQueryParamOrDefaultValue("end_time") +
		@@ -297,7 +299,7 @@
		"&format=" + format +
		"&min=0" +
		"&height=260" +
		"&width=1200" +
		"&width=" + (document.body.offsetWidth - 20) +
		"&grid=both" +
		"&scale=0.8" +
		"&axis_right=true" +
		@@ -405,7 +407,6 @@
		};

		this.onRefresh = function() {
		console.log("on Refresh");
		var end_time = Date.now();
		var time_range = this.getQueryParamOrDefaultValue('time_range');
		var start_time = end_time - time_range;

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

+2 −0

Original line number	Diff line number	Diff line
		@@ -19,6 +19,7 @@
		<link rel="stylesheet" href="../components/fn-input.css" type="text/css">
		<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">
		</head>
		<body>
		<link rel="import" href="metric-explorer-components/metric-explorer-list.html" data-component="fn-metric-explorer-list">
		@@ -39,6 +40,7 @@
		<link rel="import" href="../components/fn-checkbox.html" data-component="fn-checkbox">
		<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="stylesheet" href="../themes/midnight-blue.css" type="text/css">

Admin message