You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@accumulo.apache.org by ct...@apache.org on 2018/11/30 00:33:48 UTC
[accumulo] branch master updated: Monitor 2.0: Minor bug fixes,
chart updates (#745)
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 <le...@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>