Dashboard

From 8b8b0d7d05aab3f5b7f9c221987991aac7aa45fa Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Tue, 13 Dec 2016 21:39:29 -0500 Subject: Add jarmon graphing for Proton. --- .gitignore | 3 +- Makefile | 4 +- index.html.gen | 16 ++- jarmon-config.js | 155 ++++++++++++++++++++++ jarmon-dependencies.js | 1 + jarmon-style/jquerytools.tabs.tabs-no-images.scss | 69 ++++++++++ jarmon-style/loading.gif | 1 + jarmon-style/next.gif | 1 + jarmon-style/prev.gif | 1 + jarmon-style/style.scss | 120 +++++++++++++++++ jarmon.html.part | 23 ++++ jarmon.js | 1 + style.scss | 1 + 13 files changed, 388 insertions(+), 8 deletions(-) create mode 100644 jarmon-config.js create mode 120000 jarmon-dependencies.js create mode 100644 jarmon-style/jquerytools.tabs.tabs-no-images.scss create mode 120000 jarmon-style/loading.gif create mode 120000 jarmon-style/next.gif create mode 120000 jarmon-style/prev.gif create mode 100644 jarmon-style/style.scss create mode 100644 jarmon.html.part create mode 120000 jarmon.js 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 ' Dashboard + + + + + + + + - -' -cat tls.html.part crtsh.html.part diff.html.part +' +cat jarmon.html.part tls.html.part crtsh.html.part diff.html.part echo ' - -' +' 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 . + * + * Documentation on tabs: + */ + +$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 @@ +

+ +

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 > * { -- cgit v1.1-4-g5e80