summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorLuke Shumaker <lukeshu@lukeshu.com>2018-03-19 22:01:53 -0400
committerLuke Shumaker <lukeshu@lukeshu.com>2018-03-19 22:02:59 -0400
commitde3d574804637c5f99e0993c0d4750c218fde07c (patch)
tree3f5429646ac1b9a7f6f20c86aa55ca593dbef4df
parent51ad09fc770f9eb24a0f143156610dfe850c6e8e (diff)
do page layout with golden-layout
-rw-r--r--cfg/jarmon-proton.js20
-rw-r--r--cfg/jarmon-winston.js22
-rw-r--r--public-src/3rd-party/package.json1
-rw-r--r--public-src/3rd-party/yarn.lock8
-rw-r--r--public-src/components/gl/html.js5
-rw-r--r--public-src/components/gl/jarmon-tabbed-chart-ui.js44
-rwxr-xr-xpublic-src/index.html.gen22
-rw-r--r--public-src/jarmon-style/style.scss6
-rw-r--r--public-src/main.js59
-rw-r--r--public-src/require.config.js3
-rw-r--r--public-src/style.scss21
11 files changed, 141 insertions, 70 deletions
diff --git a/cfg/jarmon-proton.js b/cfg/jarmon-proton.js
index 532f802..28afef2 100644
--- a/cfg/jarmon-proton.js
+++ b/cfg/jarmon-proton.js
@@ -4,15 +4,7 @@
* 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;
- }
- }
-
+define(['jarmon'], function(jarmon) {
var srv = 'https://proton.parabola.nu/collectd/proton.parabola.nu/'
var tabRecipes = [
@@ -143,13 +135,9 @@ $(function() {
}
};
- var chartTemplate = $(".jarmon.proton .chart-container").remove();
-
- jarmon.buildTabbedChartUi(
- chartTemplate,
+ return {
+ name: 'proton',
chartRecipes,
- $('.jarmon.proton .tabbed-chart-interface'),
tabRecipes,
- $('.jarmon.proton .chartRangeControl')
- );
+ };
});
diff --git a/cfg/jarmon-winston.js b/cfg/jarmon-winston.js
index 1349928..8d05999 100644
--- a/cfg/jarmon-winston.js
+++ b/cfg/jarmon-winston.js
@@ -4,15 +4,7 @@
* 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;
- }
- }
-
+define(['jarmon'], function(jarmon) {
var srv = 'https://winston.parabola.nu/collectd/winston.parabola.nu/'
var tabRecipes = [
@@ -142,13 +134,9 @@ $(function() {
*/
};
- var chartTemplate = $(".jarmon.winston .chart-container").remove();
-
- jarmon.buildTabbedChartUi(
- chartTemplate,
+ return {
+ name: 'winston',
chartRecipes,
- $('.jarmon.winston .tabbed-chart-interface'),
- tabRecipes,
- $('.jarmon.winston .chartRangeControl')
- );
+ tabRecipes
+ };
});
diff --git a/public-src/3rd-party/package.json b/public-src/3rd-party/package.json
index b0a1ee0..3393051 100644
--- a/public-src/3rd-party/package.json
+++ b/public-src/3rd-party/package.json
@@ -1,6 +1,7 @@
{
"dependencies": {
"flot": "git://github.com/flot/flot#v0.8.3",
+ "golden-layout": "^1.5.9",
"jarmon": "git://git.lukeshu.com/2git/jarmon#lukeshu/master",
"javascriptrrd": "git://git.lukeshu.com/2git/javascriptrrd#v1.1.1",
"jquery": "^1.11",
diff --git a/public-src/3rd-party/yarn.lock b/public-src/3rd-party/yarn.lock
index 0cce78b..f971b63 100644
--- a/public-src/3rd-party/yarn.lock
+++ b/public-src/3rd-party/yarn.lock
@@ -6,6 +6,12 @@
version "0.8.3"
resolved "git://github.com/flot/flot#453b017cc5acfd75e252b93e8635f57f4196d45d"
+golden-layout@^1.5.9:
+ version "1.5.9"
+ resolved "https://registry.yarnpkg.com/golden-layout/-/golden-layout-1.5.9.tgz#a39bc1f6a67e6f886b797c016dd924e9426ba77f"
+ dependencies:
+ jquery "*"
+
"jarmon@git://git.lukeshu.com/2git/jarmon#lukeshu/master":
version "0.0.0"
resolved "git://git.lukeshu.com/2git/jarmon#2836159a6a67e659e6634cc8d4505829596fc614"
@@ -18,7 +24,7 @@ jquery-migrate@^1.0:
version "1.4.1"
resolved "https://registry.yarnpkg.com/jquery-migrate/-/jquery-migrate-1.4.1.tgz#85152f3ec99a95625f4f7d0bcf62e9b8638f5a76"
-jquery@^1.11:
+jquery@*, jquery@^1.11:
version "1.12.4"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-1.12.4.tgz#01e1dfba290fe73deba77ceeacb0f9ba2fec9e0c"
diff --git a/public-src/components/gl/html.js b/public-src/components/gl/html.js
new file mode 100644
index 0000000..1270818
--- /dev/null
+++ b/public-src/components/gl/html.js
@@ -0,0 +1,5 @@
+define([], function() {
+ return function(container, state) {
+ container.getElement().html(container.getState());
+ }
+});
diff --git a/public-src/components/gl/jarmon-tabbed-chart-ui.js b/public-src/components/gl/jarmon-tabbed-chart-ui.js
new file mode 100644
index 0000000..ac449d8
--- /dev/null
+++ b/public-src/components/gl/jarmon-tabbed-chart-ui.js
@@ -0,0 +1,44 @@
+define([], function() {
+ return function(container, state) {
+ container.getElement().html(''+
+ '<div class="jarmon">'+
+ ' <div class="chart-container">'+
+ ' <h2 class="title"></h2>'+
+ ' <form>'+
+ ' <input name="chart_edit" value="Edit" type="button" />'+
+ ' <input name="chart_delete" value="Delete" type="button" />'+
+ ' </form>'+
+ ' <div class="error"></div>'+
+ ' <div class="chart"></div>'+
+ ' <div class="graph-legend"></div>'+
+ ' </div>'+
+ ' <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>'+
+ '');
+ var chartTemplate = container.getElement().find(".chart-container").remove();
+
+ container.on('open', function() {
+ jarmon.buildTabbedChartUi(
+ chartTemplate,
+ state.chartRecipes,
+ container.getElement().find('.tabbed-chart-interface'),
+ state.tabRecipes,
+ container.getElement().find('.chartRangeControl')
+ )
+ });
+ };
+});
diff --git a/public-src/index.html.gen b/public-src/index.html.gen
index 02d72d5..75ededa 100755
--- a/public-src/index.html.gen
+++ b/public-src/index.html.gen
@@ -2,12 +2,6 @@
set -e
cd "$(dirname -- "$0")"
-col() {
- echo '<div>'
- eval "$*"
- echo '</div>'
-}
-
cat <<EOT
<!DOCTYPE html>
<html lang="en">
@@ -23,15 +17,19 @@ cat <<EOT
<script src="./require.config.js"></script>
<script src="./3rd-party/yarn/requirejs/require.js" data-main="/main.js"></script>
- <!-- CSS -->
- <link rel="stylesheet" href="./style.css">
- <link rel="stylesheet" href="./jarmon-style/style.css" />
+ <!-- CSS (3rd-party first, then ours) -->
+ <link rel="stylesheet" href="./3rd-party/yarn/golden-layout/src/css/goldenlayout-base.css" />
+ <link rel="stylesheet" href="./3rd-party/yarn/golden-layout/src/css/goldenlayout-light-theme.css" />
<link rel="stylesheet" href="./jarmon-style/jquerytools.tabs.tabs-no-images.css" />
+ <link rel="stylesheet" href="./jarmon-style/style.css" />
+ <link rel="stylesheet" href="./style.css">
+
+ <!-- text/template -->
+ <script id="tls" type="text/template">
+ <div class="tls">$(cat tls.html.part crtsh.html.part diff.html.part)</div>
+ </script>
</head>
<body>
- $(col sed 's/@name@/proton/' jarmon.html.in)
- $(col sed 's/@name@/winston/' jarmon.html.in)
- $(col cat tls.html.part crtsh.html.part diff.html.part)
</body>
</html>
EOT
diff --git a/public-src/jarmon-style/style.scss b/public-src/jarmon-style/style.scss
index 11d1fb0..5f8f8f8 100644
--- a/public-src/jarmon-style/style.scss
+++ b/public-src/jarmon-style/style.scss
@@ -1,7 +1,4 @@
.jarmon {
- border: solid 1px black;
- border-radius: 4px;
-
.chartRangeControl {
.range-inputs {
display: flex;
@@ -40,10 +37,7 @@
.tabbed-chart-interface {
.css-panes {
- height: 550px;
& > div {
- height: 100%;
- overflow-y: scroll;
overflow-x: hidden;
}
}
diff --git a/public-src/main.js b/public-src/main.js
index ebb09a9..0979000 100644
--- a/public-src/main.js
+++ b/public-src/main.js
@@ -1,5 +1,56 @@
define([
- //'jquerytools/dateinput',
- 'cfg/jarmon-winston',
- 'cfg/jarmon-proton',
-], {});
+ 'golden-layout',
+ 'jarmon',
+ './cfg/jarmon-proton.js',
+ './cfg/jarmon-winston.js',
+ './components/gl/jarmon-tabbed-chart-ui.js',
+ './components/gl/html.js',
+], function(
+ GoldenLayout,
+ jarmon,
+ cfgProton,
+ cfgWinston,
+ glJarmon,
+ glHTML,
+) {
+ jQuery.migrateMute = true;
+
+ // set the default plot range
+ for (var i = 0; i < jarmon.timeRangeShortcuts.length; i++) {
+ if (jarmon.timeRangeShortcuts[i][0] === 'last day') {
+ jarmon.timeRangeShortcuts[i][2] = true;
+ }
+ }
+
+ var layoutManager = new GoldenLayout({
+ settings: {
+ },
+ content: [{
+ type: 'row',
+ content: [
+ {
+ title: 'proton',
+ type: 'component',
+ componentName: 'jarmon:tabbed-chart-ui',
+ componentState: cfgProton,
+ },
+ {
+ title: 'winston',
+ type: 'component',
+ componentName: 'jarmon:tabbed-chart-ui',
+ componentState: cfgWinston,
+ },
+ {
+ title: 'TLS',
+ type: 'component',
+ componentName: 'html',
+ componentState: document.getElementById("tls").innerHTML,
+ },
+ ],
+ }],
+ }, document.body);
+ layoutManager.registerComponent('jarmon:tabbed-chart-ui', glJarmon);
+ layoutManager.registerComponent('html', glHTML);
+
+ layoutManager.init();
+});
diff --git a/public-src/require.config.js b/public-src/require.config.js
index 50732cf..ca9cca8 100644
--- a/public-src/require.config.js
+++ b/public-src/require.config.js
@@ -29,13 +29,12 @@ var require = {
},
paths: {
"flot" : "/3rd-party/yarn/flot",
+ "golden-layout" : "/3rd-party/yarn/golden-layout/dist/goldenlayout",
"jarmon" : "/3rd-party/yarn/jarmon/jarmon/jarmon",
"javascriptrrd" : "/3rd-party/yarn/javascriptrrd/src/lib",
"jquery" : "/3rd-party/yarn/jquery/dist/jquery",
"jquery-migrate": "/3rd-party/yarn/jquery-migrate/dist/jquery-migrate",
"jquerytools" : "/3rd-party/yarn/jquerytools/src",
"requirejs" : "/3rd-party/yarn/requirejs/require",
-
- "cfg" : "/cfg",
},
};
diff --git a/public-src/style.scss b/public-src/style.scss
index 70747bd..89bd164 100644
--- a/public-src/style.scss
+++ b/public-src/style.scss
@@ -7,22 +7,19 @@ body {
font-family: monospace;
height: 100%;
margin: 0;
-
- display: flex;
- flex-direction: row;
- align-items: center;
+}
+.lm_content{
+ overflow: auto;
+ * {
+ box-sizing: border-box;
+ }
+}
+.tls {
& > * {
- flex-direction: column;
- align-items: center;
margin: auto;
- & > * {
- margin: auto;
- }
}
}
-* {
- box-sizing: border-box;
-}
+
/* diff styling */
table.diff {
border-collapse: collapse;