-
-
Save Songmu/6625fe5fff529986be5fb5ccb5600575 to your computer and use it in GitHub Desktop.
save this html as a local file, then open the file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment