do page layout with golden-layout

9 files changed, 132 insertions, 37 deletions

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;