This is an automated email from the ASF dual-hosted git repository. ctubbsii pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/accumulo.git
The following commit(s) were added to refs/heads/master by this push: new 5e4968d Monitor 2.0: Minor bug fixes, chart updates (#745) 5e4968d is described below commit 5e4968d72e8729147551eaf464bebe68845b39d3 Author: cleroux <leroux.ced...@gmail.com> AuthorDate: Thu Nov 29 16:33:44 2018 -0800 Monitor 2.0: Minor bug fixes, chart updates (#745) * Fix avatar jumping left/right between small/medium layouts * Overview chart updates --- .../accumulo/monitor/resources/css/screen.css | 14 +-- .../accumulo/monitor/resources/js/functions.js | 57 ----------- .../accumulo/monitor/resources/js/overview.js | 105 ++++++++++++++------- .../apache/accumulo/monitor/templates/navbar.ftl | 6 +- .../apache/accumulo/monitor/templates/overview.ftl | 20 ++-- 5 files changed, 94 insertions(+), 108 deletions(-) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css index f1874e5..ab79875 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css @@ -60,10 +60,6 @@ html,body { } #headertitle { - /*position: absolute; - top: -1.0em; - left: 0.5em; - right: 1.0em;*/ font-size: 20pt; } @@ -363,6 +359,12 @@ pre.logevent { text-align: center; font-size: 1.5em; } + +.plot { + width: 100%; + height: 200px; +} + .nowrap { white-space:nowrap; } @@ -433,7 +435,7 @@ pre.logevent { } #accumulo-avatar { - margin: 8px; + margin: -5px 10px 0 0; border-radius: 5px; width: 32px; height: 32px; @@ -488,4 +490,4 @@ pre.logevent { /* gently lighten the bootstrap text color for the navbar */ .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a { color: #d3d3d3; -} \ No newline at end of file +} diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/functions.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/functions.js index b929eef..021ddfd 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/functions.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/functions.js @@ -253,63 +253,6 @@ function createTableCell(index, sortValue, showValue) { '">' + showValue + '</td>'; } -/** - * Creates a plot on the selected id, with the data - * The type of the plot depends on the type: - * type = 0 -> Single lines plot - * type = 1 -> Single points plot - * type = 2 -> Double lines plot - * - * @param {string} id Canvas ID - * @param {object|array} inData Data to plot - * @param {number} type Type of plot - */ -function makePlot(id, inData, type) { - var d = new Date(); - var n = d.getTimezoneOffset() * 60000; // Converts offset to milliseconds - var tz = new Date().toLocaleTimeString('en-us', - {timeZoneName: 'short'}).split(' ')[2]; // Short version of timezone - var tzFormat = '%H:%M<br>' + tz; - - var dataInfo = []; - - // Select the type of plot - switch (type) { - // Single lines plot - case 0: - dataInfo.push({ data: inData, - lines: { show: true }, - color: '#d9534f' }); - break; - // Single points plot - case 1: - dataInfo.push({ data: inData, - points: { show: true, radius: 1 }, - color: '#d9534f' }); - break; - // Double lines plot - case 2: - dataInfo.push({ label: 'Read', - data: inData.Read, - lines: { show: true }, - color: '#d9534f' }) - dataInfo.push({ label: 'Returned', - data: inData.Returned, - lines: { show: true }, - color: '#337ab7' }); - break; - default: - dataInfo = []; - } - - // Format the plot axis - var plotInfo = {yaxis: {}, xaxis: {mode: 'time', minTickSize: [1, 'minute'], - timeFormat: tzFormat, ticks: 3}}; - - // Plot the data - $.plot($('#' + id), dataInfo, plotInfo); -} - ///// REST Calls ///////////// /** diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js index 9aebb3f..35ea6aa 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js @@ -119,96 +119,135 @@ function refreshZKTable() { function makePlots() { var d = new Date(); var n = d.getTimezoneOffset() * 60000; // Converts offset to milliseconds + var tz = d.toLocaleTimeString('en-us', + {timeZoneName: 'short'}).split(' ')[2]; // Short version of timezone + var tzFormat = '%H:%M<br>' + tz; + + var plotOptions = { + colors: ['#d9534f', '#337ab7'], + grid: { + backgroundColor: {colors: ['#fff', '#eee']}, + }, + lines: { + show: true + }, + points: { + show: false, + radius: 1 + }, + xaxis: { + mode: 'time', + minTickSize: [1, 'minute'], + timeformat: tzFormat, + ticks: 3 + }, + yaxis: { + min: 0 + } + }; + + var cachePlotOptions = $.extend(true, {}, plotOptions, { + lines: { show: false }, + points: { show: true }, + yaxis: { + max: 1.1, + ticks: [0, 0.25, 0.5, 0.75, 1.0] + } + }); // Create Ingest Rate plot - var ingestRate = []; + var ingestRate = [{data:[]}]; var data = sessionStorage.ingestRate === undefined ? [] : JSON.parse(sessionStorage.ingestRate); $.each(data, function(key, val) { - ingestRate.push([val.first - n, val.second]); + ingestRate[0].data.push([val.first - n, val.second]); }); - makePlot('ingest_entries', ingestRate, 0); + $.plot('#ingest_entries', ingestRate, plotOptions); // Create Scan Entries plot - var scanEntries = {'Read': [], 'Returned': []}; + var scanEntries = [ + {label: 'Read', data: []}, + {label: 'Returned', data: []} + ]; var data = sessionStorage.scanEntries === undefined ? [] : JSON.parse(sessionStorage.scanEntries); - $.each(data, function(key, val) { - $.each(val.second, function(key2, val2) { - scanEntries[val.first].push([val2.first - n, val2.second]); - }); + $.each(data[0].second, function(key, val) { + scanEntries[0].data.push([val.first - n, val.second]); + }); + $.each(data[1].second, function(key, val) { + scanEntries[1].data.push([val.first - n, val.second]); }); - makePlot('scan_entries', scanEntries, 2); + $.plot('#scan_entries', scanEntries, plotOptions); // Create Ingest MB plot - var ingestMB = []; + var ingestMB = [{data:[]}]; var data = sessionStorage.ingestMB === undefined ? [] : JSON.parse(sessionStorage.ingestMB); $.each(data, function(key, val) { - ingestMB.push([val.first - n, val.second]); + ingestMB[0].data.push([val.first - n, val.second]); }); - makePlot('ingest_mb', ingestMB, 0); + $.plot('#ingest_mb', ingestMB, plotOptions); // Create Query MB plot - var queryMB = []; + var queryMB = [{data:[]}]; var data = sessionStorage.queryMB === undefined ? [] : JSON.parse(sessionStorage.queryMB); $.each(data, function(key, val) { - queryMB.push([val.first - n, val.second]); + queryMB[0].data.push([val.first - n, val.second]); }); - makePlot('scan_mb', queryMB, 0); + $.plot('#scan_mb', queryMB, plotOptions); // Create Load Average plot - var loadAvg = []; + var loadAvg = [{data:[]}]; var data = sessionStorage.loadAvg === undefined ? [] : JSON.parse(sessionStorage.loadAvg); $.each(data, function(key, val) { - loadAvg.push([val.first - n, val.second]); + loadAvg[0].data.push([val.first - n, val.second]); }); - makePlot('load_avg', loadAvg, 0); + $.plot('#load_avg', loadAvg, plotOptions); // Create Seeks plot - var lookups = []; + var lookups = [{data:[]}]; var data = sessionStorage.lookups === undefined ? [] : JSON.parse(sessionStorage.lookups); $.each(data, function(key, val) { - lookups.push([val.first - n, val.second]); + lookups[0].data.push([val.first - n, val.second]); }); - makePlot('seeks', lookups, 0); + $.plot('#seeks', lookups, plotOptions); // Create Minor Compactions plot - var minor = []; + var minor = [{data:[]}]; var data = sessionStorage.minorCompactions === undefined ? [] : JSON.parse(sessionStorage.minorCompactions); $.each(data, function(key, val) { - minor.push([val.first - n, val.second]); + minor[0].data.push([val.first - n, val.second]); }); - makePlot('minor', minor, 0); + $.plot('#minor', minor, plotOptions); // Create Major Compaction plot - var major = []; + var major = [{data:[]}]; var data = sessionStorage.majorCompactions === undefined ? [] : JSON.parse(sessionStorage.majorCompactions); $.each(data, function(key, val) { - major.push([val.first - n, val.second]); + major[0].data.push([val.first - n, val.second]); }); - makePlot('major', major, 0); + $.plot('#major', major, plotOptions); // Create Index Cache plot - var indexCache = []; + var indexCache = [{data:[]}]; var data = sessionStorage.indexCache === undefined ? [] : JSON.parse(sessionStorage.indexCache); $.each(data, function(key, val) { - indexCache.push([val.first - n, val.second]); + indexCache[0].data.push([val.first - n, val.second]); }); - makePlot('index_cache', indexCache, 1); + $.plot('#index_cache', indexCache, cachePlotOptions); // Create Data Cache plot - var dataCache = []; + var dataCache = [{data:[]}]; var data = sessionStorage.dataCache === undefined ? [] : JSON.parse(sessionStorage.dataCache); $.each(data, function(key, val) { - dataCache.push([val.first - n, val.second]); + dataCache[0].data.push([val.first - n, val.second]); }); - makePlot('data_cache', dataCache, 1); + $.plot('#data_cache', dataCache, cachePlotOptions); } diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl index 035a385..8914f3d 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl @@ -23,8 +23,10 @@ <span class="icon-bar"></span> <span class="icon-bar"></span> </button> - <img id="accumulo-avatar" alt="accumulo" class="navbar-left pull-left" src="/resources/images/accumulo-avatar.png" /> - <a class="navbar-brand" id="headertitle" href="/">${instance_name}</a> + <a class="navbar-brand" id="headertitle" href="/"> + <img id="accumulo-avatar" alt="accumulo" class="navbar-left pull-left" src="/resources/images/accumulo-avatar.png" /> + ${instance_name} + </a> </div> <!-- Nav links --> <div class="collapse navbar-collapse" id="nav-items"> diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl index 55f6a13..bc9e693 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/overview.ftl @@ -52,60 +52,60 @@ <div class="col-md-6"> <br> <div class="plotHeading">Ingest (Entries/s)</div> - <div id="ingest_entries" style="width:100%;height:200px;"></div> + <div id="ingest_entries" class="plot"></div> </div> <div class="col-md-6"> <br> <div class="plotHeading">Scan (Entries/s)</div> - <div id="scan_entries" style="width:100%;height:200px;"></div> + <div id="scan_entries" class="plot"></div> </div> </div> <div class="row"> <div class="col-md-6"> <br> <div class="plotHeading">Ingest (MB/s)</div> - <div id="ingest_mb" style="width:100%;height:200px;"></div> + <div id="ingest_mb" class="plot"></div> </div> <div class="col-md-6"> <br> <div class="plotHeading">Scan (MB/s)</div> - <div id="scan_mb" style="width:100%;height:200px;"></div> + <div id="scan_mb" class="plot"></div> </div> </div> <div class="row"> <div class="col-md-6"> <br> <div class="plotHeading">Load Average</div> - <div id="load_avg" style="width:100%;height:200px;"></div> + <div id="load_avg" class="plot"></div> </div> <div class="col-md-6"> <br> <div class="plotHeading">Seeks</div> - <div id="seeks" style="width:100%;height:200px;"></div> + <div id="seeks" class="plot"></div> </div> </div> <div class="row"> <div class="col-md-6"> <br> <div class="plotHeading">Minor Compactions</div> - <div id="minor" style="width:100%;height:200px;"></div> + <div id="minor" class="plot"></div> </div> <div class="col-md-6"> <br> <div class="plotHeading">Major Compactions</div> - <div id="major" style="width:100%;height:200px;"></div> + <div id="major" class="plot"></div> </div> </div> <div class="row"> <div class="col-md-6"> <br> <div class="plotHeading">Index Cache Hit Rate</div> - <div id="index_cache" style="width:100%;height:200px;"></div> + <div id="index_cache" class="plot"></div> </div> <div class="col-md-6"> <br> <div class="plotHeading">Data Cache Hit Rate</div> - <div id="data_cache" style="width:100%;height:200px;"></div> + <div id="data_cache" class="plot"></div> </div> </div> </div>