diff options
Diffstat (limited to 'public-src')
| -rw-r--r-- | public-src/3rd-party/package.json | 1 | ||||
| -rw-r--r-- | public-src/3rd-party/yarn.lock | 8 | ||||
| -rw-r--r-- | public-src/components/gl/html.js | 5 | ||||
| -rw-r--r-- | public-src/components/gl/jarmon-tabbed-chart-ui.js | 44 | ||||
| -rwxr-xr-x | public-src/index.html.gen | 22 | ||||
| -rw-r--r-- | public-src/jarmon-style/style.scss | 6 | ||||
| -rw-r--r-- | public-src/main.js | 59 | ||||
| -rw-r--r-- | public-src/require.config.js | 3 | ||||
| -rw-r--r-- | public-src/style.scss | 21 |
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; |