Songmu/mackerel-graph-builder.html

## mackerel-graph-builder.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mackerel Graph Builder</title>
    <script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
    <script type="text/javascript">
    var $ = function(id) {
        return document.getElementById(id)
    };
    var prevTarget = ""
    var update = function() {
      var o = $("org").value;
      localStorage.setItem("orgName", o);

      var obj = {
        unit: $("unit").value,
        period: $("period").value,
        title: $("title").value,
        query: $("query").value.replace(/\n/g, '').replace(/\s+/g, ' ')
      }
      var q = Object.keys(obj).sort().reduce(function(prev, key) {
        prev.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
        return prev;
      }, []).join('&');
      var target = "https://mackerel.io/embed/orgs/" + o + "/advanced-graph?" + q;
      if (prevTarget != target) {
        prevTarget = target
        $("target").innerHTML = '<iframe src="' + target +'" height="400" width="600" frameborder="0"></iframe>';
      }
      return true;
    };
    window.addEventListener("load", function(){
      var o = localStorage.getItem("orgName");
      if (o) {
        $("org").value = o;
      }
      $("query").addEventListener("keypress", _.debounce(update, 1500));
      $("reload").addEventListener("click", update);
    });
    </script>
    <style>
    form, #target {
        float: left;
        padding-left: 1em;
    }
    </style>
  </head>
  <body>
    <h1>Mackerel Graph Builder</h1>
    <form>
      organization: <input type="text" value="" id="org">title: <input type="text" value="formula graph" id="title"><br />
      period: <input type="text" value="1d" id="period">
      unit: <input type="text" value="" id="unit">
      <input type="button" id="reload" value="reload"><br />
      <textarea cols=85 rows=20 id="query">group(
  alias(
    avg(
      timeShift(
        role('foo:app','loadavg5'),
        '1w'
      )
    ),
    'avg-lastweek'
  ),
  alias(
    avg(
      role('foo:app','loadavg5')
    ),
    'avg'
  )
)</textarea><br />
    </form>
    <div id="target"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Mackerel Graph Builder</title>
	<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
	<script type="text/javascript">
	var $ = function(id) {
	return document.getElementById(id)
	};
	var prevTarget = ""
	var update = function() {
	var o = $("org").value;
	localStorage.setItem("orgName", o);

	var obj = {
	unit: $("unit").value,
	period: $("period").value,
	title: $("title").value,
	query: $("query").value.replace(/\n/g, '').replace(/\s+/g, ' ')
	}
	var q = Object.keys(obj).sort().reduce(function(prev, key) {
	prev.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
	return prev;
	}, []).join('&');
	var target = "https://mackerel.io/embed/orgs/" + o + "/advanced-graph?" + q;
	if (prevTarget != target) {
	prevTarget = target
	$("target").innerHTML = '<iframe src="' + target +'" height="400" width="600" frameborder="0"></iframe>';
	}
	return true;
	};
	window.addEventListener("load", function(){
	var o = localStorage.getItem("orgName");
	if (o) {
	$("org").value = o;
	}
	$("query").addEventListener("keypress", _.debounce(update, 1500));
	$("reload").addEventListener("click", update);
	});
	</script>
	<style>
	form, #target {
	float: left;
	padding-left: 1em;
	}
	</style>
	</head>
	<body>
	<h1>Mackerel Graph Builder</h1>
	<form>
	organization: <input type="text" value="" id="org">title: <input type="text" value="formula graph" id="title"><br />
	period: <input type="text" value="1d" id="period">
	unit: <input type="text" value="" id="unit">
	<input type="button" id="reload" value="reload"><br />
	<textarea cols=85 rows=20 id="query">group(
	alias(
	avg(
	timeShift(
	role('foo:app','loadavg5'),
	'1w'
	)
	),
	'avg-lastweek'
	),
	alias(
	avg(
	role('foo:app','loadavg5')
	),
	'avg'
	)
	)</textarea><br />
	</form>
	<div id="target"></div>
	</body>
	</html>