summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.gitignore3
-rw-r--r--Makefile4
-rwxr-xr-xindex.html.gen16
-rw-r--r--jarmon-config.js155
l---------jarmon-dependencies.js1
-rw-r--r--jarmon-style/jquerytools.tabs.tabs-no-images.scss69
l---------jarmon-style/loading.gif1
l---------jarmon-style/next.gif1
l---------jarmon-style/prev.gif1
-rw-r--r--jarmon-style/style.scss120
-rw-r--r--jarmon.html.part23
l---------jarmon.js1
-rw-r--r--style.scss1
13 files changed, 388 insertions, 8 deletions
diff --git a/.gitignore b/.gitignore
index 2356362..9eb8838 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+*.css
*.html
*.html.part
*.map
@@ -6,7 +7,7 @@
NET-*
!config-*.txt
-style.css
+!jarmon.html.part
# programs
crtsh-pem2html
diff --git a/Makefile b/Makefile
index 1ef54d9..bbc6d67 100644
--- a/Makefile
+++ b/Makefile
@@ -1,9 +1,9 @@
-all: index.html style.css
+all: index.html style.css jarmon-style/jquerytools.tabs.tabs-no-images.css jarmon-style/style.css
%: %.go
go build $<
-index.html: tls.html.part crtsh.html.part diff.html.part
+index.html: tls.html.part crtsh.html.part diff.html.part jarmon.html.part
crtsh.pem: crtsh-getcerts config-domains.txt NET-crtsh
./crtsh-getcerts $$(cat config-domains.txt) > $@
diff --git a/index.html.gen b/index.html.gen
index 326d63c..58be895 100755
--- a/index.html.gen
+++ b/index.html.gen
@@ -7,10 +7,16 @@ echo '<!DOCTYPE html>
<title>Dashboard</title>
<link rel=stylesheet href=style.css>
<script src="sorttable.js"></script>
+
+ <link rel="stylesheet" type="text/css" href="jarmon-style/style.css" />
+ <link rel="stylesheet" type="text/css" href="jarmon-style/jquerytools.tabs.tabs-no-images.css" />
+ <link rel="stylesheet" type="text/css" href="jarmon-style/jquerytools.dateinput.skin1.css" />
+
+ <script type="text/javascript" src="jarmon-dependencies.js"></script>
+ <script type="text/javascript" src="jarmon.js"></script>
+ <script type="text/javascript" src="jarmon-config.js"></script>
</head>
-<body>
-'
-cat tls.html.part crtsh.html.part diff.html.part
+<body>'
+cat jarmon.html.part tls.html.part crtsh.html.part diff.html.part
echo '</body>
-</html>
-'
+</html>'
diff --git a/jarmon-config.js b/jarmon-config.js
new file mode 100644
index 0000000..bbf452a
--- /dev/null
+++ b/jarmon-config.js
@@ -0,0 +1,155 @@
+/* Copyright (c) Richard Wall
+ * See LICENSE for details.
+ *
+ * Some example recipes for Collectd RRD data - you *will* need to modify this
+ * based on the RRD data available on your system.
+ */
+
+$(function() {
+
+ for (var i = 0; i < jarmon.timeRangeShortcuts.length; i++) {
+ if (jarmon.timeRangeShortcuts[i][0] === 'last day') {
+ jarmon.timeRangeShortcuts[i][2] = true;
+ }
+ }
+
+ var proton = 'https://proton.parabola.nu/collectd/proton.parabola.nu/'
+ var winston = 'https://winston.parabola.nu/collectd/winston.parabola.nu/'
+
+ var tabRecipes = [
+ ['Overview', ['cpu', 'memory', 'swap-use']],
+ ['Iface', ['interface-inet', 'interface-lvpn', 'interface-lo']],
+ ['Other', ['load', 'swap-use', 'swap-io', 'users', 'entropy', 'uptime']]
+ ];
+
+ var chartRecipes = {
+ 'cpu': {
+ title: 'CPU Usage',
+ data: [
+ [proton+'cpu-0/cpu-steal.rrd', 0, 'Steal', 'jiffy'],
+ [proton+'cpu-0/cpu-interrupt.rrd', 0, 'IRQ', 'jiffy'],
+ [proton+'cpu-0/cpu-softirq.rrd', 0, 'SoftIRQ', 'jiffy'],
+ [proton+'cpu-0/cpu-system.rrd', 0, 'System', 'jiffy'],
+ [proton+'cpu-0/cpu-wait.rrd', 0, 'IO', 'jiffy'],
+ [proton+'cpu-0/cpu-user.rrd', 0, 'User', 'jiffy'],
+ //[proton+'cpu-0/cpu-nice.rrd', 0, 'Nice', 'jiffy'],
+ [proton+'cpu-0/cpu-idle.rrd', 0, 'Idle', 'jiffy'],
+ ],
+ options: jQuery.extend(true, {},
+ jarmon.Chart.BASE_OPTIONS,
+ jarmon.Chart.STACKED_OPTIONS,
+ {yaxis: {min: 0, max: 110}})
+ },
+
+ 'memory': {
+ title: 'Memory',
+ data: [
+ [proton+'memory/memory-used.rrd', 0, 'Used', 'B'],
+ [proton+'memory/memory-slab_unrecl.rrd', 0, 'Slab', 'B'],
+ [proton+'memory/memory-slab_recl.rrd', 0, 'Slab (Recl)', 'B'],
+ [proton+'memory/memory-cached.rrd', 0, 'Cached', 'B'],
+ [proton+'memory/memory-buffered.rrd', 0, 'Buffered', 'B'],
+ [proton+'memory/memory-free.rrd', 0, 'Free', 'B']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
+ jarmon.Chart.STACKED_OPTIONS)
+ },
+
+ 'load': {
+ title: 'Load Average',
+ data: [
+ [proton+'load/load.rrd', 'shortterm', 'Short Term', ''],
+ [proton+'load/load.rrd', 'midterm', 'Medium Term', ''],
+ [proton+'load/load.rrd', 'longterm', 'Long Term', '']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+ },
+
+ 'interface-inet': {
+ title: 'ens18 Throughput',
+ data: [
+ [proton+'interface-ens18/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }],
+ [proton+'interface-ens18/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }]
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+ },
+
+ 'interface-lvpn': {
+ title: 'lvpn Throughput',
+ data: [
+ [proton+'interface-lvpn/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }],
+ [proton+'interface-lvpn/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }]
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+ },
+
+ 'interface-lo': {
+ title: 'lo Throughput',
+ data: [
+ [proton+'interface-lo/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }],
+ [proton+'interface-lo/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }]
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+ },
+
+ 'entropy': {
+ title: 'Entropy',
+ data: [
+ [proton+'entropy/entropy.rrd', 0, 'Entropy', 'b']
+ ],
+ options: jQuery.extend(true, {},
+ jarmon.Chart.BASE_OPTIONS,
+ {series: {lines: {fill: 0.5}}})
+ },
+
+ 'users': {
+ title: 'Users',
+ data: [
+ [proton+'users/users.rrd', 0, 'Users', 'users']
+ ],
+ options: jQuery.extend(true, {},
+ jarmon.Chart.BASE_OPTIONS,
+ {series: {lines: {fill: 0.5}}})
+ },
+
+ 'uptime': {
+ title: 'Uptime',
+ data: [
+ [proton+'uptime/uptime.rrd', 0, 'Uptime', 'days', function(v) { return v/(60*60*24); }]
+ ],
+ options: jQuery.extend(true, {},
+ jarmon.Chart.BASE_OPTIONS,
+ {series: {lines: {fill: 0.5}}})
+ },
+
+ 'swap-use': {
+ title: 'Swap Usage',
+ data: [
+ [proton+'swap/swap-used.rrd', 0, 'Used', 'B'],
+ [proton+'swap/swap-cached.rrd', 0, 'Cached', 'B'],
+ [proton+'swap/swap-free.rrd', 0, 'Free', 'B']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
+ jarmon.Chart.STACKED_OPTIONS)
+ },
+
+ 'swap-io': {
+ title: 'Swap IO',
+ data: [
+ [proton+'swap/swap_io-in.rrd', 0, 'In', 'B'],
+ [proton+'swap/swap_io-out.rrd', 0, 'Out', 'B']
+ ],
+ options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+ }
+ };
+
+ var chartTemplate = $('.chart-container').remove();
+
+ jarmon.buildTabbedChartUi(
+ chartTemplate,
+ chartRecipes,
+ $('.tabbed-chart-interface'),
+ tabRecipes,
+ $('.chartRangeControl')
+ );
+});
diff --git a/jarmon-dependencies.js b/jarmon-dependencies.js
new file mode 120000
index 0000000..9874026
--- /dev/null
+++ b/jarmon-dependencies.js
@@ -0,0 +1 @@
+../graph/jarmon-git/docs/examples/assets/js/dependencies.js \ No newline at end of file
diff --git a/jarmon-style/jquerytools.tabs.tabs-no-images.scss b/jarmon-style/jquerytools.tabs.tabs-no-images.scss
new file mode 100644
index 0000000..d97f579
--- /dev/null
+++ b/jarmon-style/jquerytools.tabs.tabs-no-images.scss
@@ -0,0 +1,69 @@
+/* Skin for jQuery Tools tabs.
+ *
+ * Based on <https://github.com/jquerytools/jquerytools.github.com/blob/master/media/css/tabs-no-images.css>.
+ *
+ * Documentation on tabs: <http://jquerytools.github.io/documentation/tabs/index.html>
+ */
+
+$tabs-tab-height: 15px;
+$tabs-tab-vpad: 2px;
+$tabs-tab-hpad: 10px;
+$tabs-border-width: 1px;
+$tabs-border-style: solid #666;
+$tabs-background-primary: #ddd;
+$tabs-background-secondary: #efefef;
+
+/* root element for tab bar */
+ul.css-tabs {
+ margin: 0;
+ padding: 0;
+ height: $tabs-tab-height;
+ border-bottom: $tabs-border-width $tabs-border-style;
+
+ /* single tab */
+ li {
+ float: left;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+
+ /* link inside the tab */
+ a {
+ display:block;
+ height: $tabs-tab-height; /* $tabs-tab-height - 2*($tabs-tab-vpad+$tabs-border-width) */
+ padding: $tabs-tab-vpad $tabs-tab-hpad;
+ border: $tabs-border-width $tabs-border-style;
+ border-bottom: 0;
+
+ margin-right: 2px;
+ border-radius: 4px 4px 0 0;
+ text-decoration: none;
+
+ background: $tabs-background-secondary;
+ color: #777;
+
+ &:hover {
+ background-color: #F7F7F7;
+ color: #333;
+ }
+
+ /* selected tab */
+ &.current {
+ background: $tabs-background-primary;
+ border-bottom: $tabs-border-width solid $tabs-background-primary;
+ color: #000;
+ cursor:default;
+ }
+ }
+ }
+}
+
+/* tab pane */
+.css-panes > div {
+ display: none;
+ border: $tabs-border-width $tabs-border-style;
+ border-top: 0;
+ background: $tabs-background-primary;
+
+ padding: 15px 20px;
+}
diff --git a/jarmon-style/loading.gif b/jarmon-style/loading.gif
new file mode 120000
index 0000000..03b9781
--- /dev/null
+++ b/jarmon-style/loading.gif
@@ -0,0 +1 @@
+../../graph/jarmon-git/docs/examples/assets/icons/loading.gif \ No newline at end of file
diff --git a/jarmon-style/next.gif b/jarmon-style/next.gif
new file mode 120000
index 0000000..16a6d9d
--- /dev/null
+++ b/jarmon-style/next.gif
@@ -0,0 +1 @@
+../../graph/jarmon-git/docs/examples/assets/icons/next.gif \ No newline at end of file
diff --git a/jarmon-style/prev.gif b/jarmon-style/prev.gif
new file mode 120000
index 0000000..72199f2
--- /dev/null
+++ b/jarmon-style/prev.gif
@@ -0,0 +1 @@
+../../graph/jarmon-git/docs/examples/assets/icons/prev.gif \ No newline at end of file
diff --git a/jarmon-style/style.scss b/jarmon-style/style.scss
new file mode 100644
index 0000000..6e12541
--- /dev/null
+++ b/jarmon-style/style.scss
@@ -0,0 +1,120 @@
+.jarmon-proton {
+ width: 50%;
+ border: solid 1px black;
+ padding: -1px;
+ border-radius: 4px;
+
+ .chartRangeControl {
+ .range-inputs {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ & > * {
+ width: 20%;
+ margin: 1px;
+ padding: 0;
+ border: solid 1px #666;
+ border-radius: 2px;
+ &[type="button"] {
+ width: auto;
+ }
+ &[type="datetime-local"] {
+ width: 25%;
+ }
+ }
+ }
+ .range-preview {
+ display: none;
+ height: 32px;
+ width: 100%;
+ }
+ }
+
+ .css-panes > div {
+ padding: 0;
+ padding-left: 15px;
+ }
+
+ h2 {
+ margin: 0;
+ font-size: 100%;
+ text-align: center;
+ }
+
+ .tabbed-chart-interface {
+ .css-panes {
+ height: 550px;
+ & > div {
+ height: 100%;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ }
+ }
+ .chart-container {
+ &.loading .title {
+ background-repeat: no-repeat;
+ background-position: 0 50%;
+ background-image: url(loading.gif);
+ }
+
+ .chart {
+ height: 125px;
+ width: 100%;
+ margin: 0 auto 0 auto;
+ clear: both;
+
+ .tickLabel {
+ overflow:hidden;
+ }
+
+ .yaxisUnitLabel {
+ /* Y */
+ position: absolute;
+ top: 50%;
+ /* In this translateY, the 75% is: 50% for the `top:50%` overshooting
+ * by our `height/2`; the additional 25% accounts
+ * for 1 line-height being chopped off the bottom
+ * of the graph for the x-axis labels. */
+ transform: translateY(-75%);
+
+ /* X */
+ width: 100px;
+ margin-left: -100px;
+ text-align: right;
+
+ /* styling */
+ padding: 2px;
+
+ /* rotate */
+ transform: rotate(-90deg);
+ width: 0;
+ margin-left: -10px;
+ }
+ }
+
+ .graph-legend {
+ width: 100%;
+ padding: 2px 0;
+ margin: 2px auto 0;
+ background-color: #f7f7f7;
+
+ .legendItem {
+ float: left;
+ cursor: pointer;
+ margin-right: 20px;
+ margin-top: 5px;
+ margin-left: 5px;
+
+ .legendColorBox {
+ float: left;
+ margin-right: 5px;
+ }
+
+ &.disabled {
+ text-decoration: line-through;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/jarmon.html.part b/jarmon.html.part
new file mode 100644
index 0000000..afec6f4
--- /dev/null
+++ b/jarmon.html.part
@@ -0,0 +1,23 @@
+<div class="jarmon-proton">
+ <div class="chartRangeControl">
+ <form>
+ <div class="range-inputs">
+ <input name="from" type="datetime-local" step="1" />
+ <input name="to" type="datetime-local" step="1" />
+ <select name="shortcuts" title="Time range shortcuts - click to select an alternative time range" ></select>
+ <select name="tzoffset" title="Timezone offset - click to choose a custom timezone offset" ></select>
+ <input name="action" value="Update" type="button"
+ title="Graph update - click to update all graphs" />
+ </div>
+ <div class="range-preview"
+ title="Time range preview - click and drag to select a custom timerange" ></div>
+ </form>
+ </div>
+ <div class="tabbed-chart-interface"></div>
+</div>
+<div class="chart-container">
+ <h2 class="title"></h2>
+ <div class="error"></div>
+ <div class="chart"></div>
+ <div class="graph-legend"></div>
+</div>
diff --git a/jarmon.js b/jarmon.js
new file mode 120000
index 0000000..1c0e4a9
--- /dev/null
+++ b/jarmon.js
@@ -0,0 +1 @@
+../graph/jarmon-git/jarmon/jarmon.js \ No newline at end of file
diff --git a/style.scss b/style.scss
index fad9c85..b380815 100644
--- a/style.scss
+++ b/style.scss
@@ -10,6 +10,7 @@ body {
display: flex;
flex-direction: column;
+ flex-wrap: wrap;
align-items: center;
}
body > * {