You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@accumulo.apache.org by GitBox <gi...@apache.org> on 2018/11/30 00:33:46 UTC
[GitHub] ctubbsii closed pull request #745: Monitor 2.0: Minor bug fixes,
chart updates
ctubbsii closed pull request #745: Monitor 2.0: Minor bug fixes, chart updates
URL: https://github.com/apache/accumulo/pull/745
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
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 f1874e5cb1..ab79875acf 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 b929eef6fc..021ddfdb24 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 9aebb3f977..35ea6aac72 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 035a385418..8914f3d9a5 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 55f6a130a0..bc9e69366e 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>
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services