Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

cleanup cluster dashboard

This commit is contained in:
Frank Celler 2014-05-24 00:44:51 +02:00
parent db2a843252
commit aa3a0c2896
5 changed files with 452 additions and 589 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/actions/api-system.js
View File

@ -329,6 +329,7 @@ actions.defineHttp({
try {
result = {};
result.time = internal.time();
result.system = internal.processStatistics();
result.client = internal.clientStatistics();
result.http = internal.httpStatistics();

2
js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs
View File

@ -109,7 +109,7 @@
<div class="resizecontainer">
<div class="dashboardChart">
<div id="clusterGraphs" class="innerDashboardChart">
<div>Virtual Memory Size</div>
<div>Virtual Memory Size in GB</div>
</div>
</div>
<div class="dashboardChart">

495
js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
View File

@ -17,9 +17,6 @@
"change #selectCol" : "updateShards",
"click .dbserver" : "dashboard",
"click .coordinator" : "dashboard",
"click #lineGraph" : "showDetail"
//"mouseover #lineGraph" : "setShowAll",
//"mouseout #lineGraph" : "resetShowAll"
},
replaceSVGs: function() {
@ -106,7 +103,6 @@
updateServerStatus: function() {
this.dbservers.getStatuses(function(stat, serv) {
// var id = serv.replace(":", "\\:"),
var id = serv,
type;
id = id.replace(/\./g,'-');
@ -136,7 +132,8 @@
var dbToSel = $("#" + dbName, selDB);
if (!dbToSel.length) {
dbName = $("#selectDB").find(":selected").attr("id");
} else {
}
else {
dbToSel.prop("selected", true);
}
@ -167,7 +164,8 @@
var byAddress = this.listByAddress();
if (Object.keys(byAddress).length === 1) {
this.type = "testPlan";
} else {
}
else {
this.type = "other";
}
$(this.el).html(this.template.render({
@ -177,7 +175,7 @@
}));
$(this.el).append(this.modal.render({}));
this.replaceSVGs();
this.loadHistory();
/* this.loadHistory(); */
this.getServerStatistics();
this.data = this.generatePieData();
this.renderPieChart(this.data);
@ -188,150 +186,170 @@
generatePieData: function() {
var pieData = [];
var self = this;
this.data.forEach(function(m) {
pieData.push({key: m.get("name"), value :m.get("system").residentSize,
time: self.serverTime});
});
return pieData;
},
/*
loadHistory : function() {
this.hist = {};
var self = this;
var coord = this.coordinators.findWhere({
status: "ok"
});
var endpoint = coord.get("protocol")
+ "://"
+ coord.get("address");
this.dbservers.forEach(function (dbserver) {
if (dbserver.get("status") !== "ok") {return;}
if (self.knownServers.indexOf(dbserver.id) === -1) {
self.knownServers.push(dbserver.id);
}
var server = {
raw: dbserver.get("address"),
isDBServer: true,
target: encodeURIComponent(dbserver.get("name")),
endpoint: endpoint,
addAuth: window.App.addAuth.bind(window.App)
};
self.documentStore.getStatisticsHistory({
server: server,
figures: ["client.totalTime"]
});
self.history = self.documentStore.history;
self.hist[dbserver.id] = {};
self.history.forEach(function(e) {
var date = new Date(e.time * 1000);
date.setMilliseconds(0);
date.setSeconds(Math.round(date.getSeconds() / 10) * 10);
var uptime = e.server.uptime * 1000;
var time = date.getTime();
if (self.hist[dbserver.id].lastTime
&& (time - self.hist[dbserver.id].lastTime) > uptime) {
self.hist[dbserver.id][
self.hist[dbserver.id].lastTime +
(time-self.hist[dbserver.id].lastTime) / 2] = null;
}
self.hist[dbserver.id].lastTime = time;
if (e.client.totalTime.count === 0) {
self.hist[dbserver.id][time] = 0;
} else {
self.hist[dbserver.id][time] = e.client.totalTime.sum
/ e.client.totalTime.count;
}
});
if (dbserver.get("status") !== "ok") {return;}
if (self.knownServers.indexOf(dbserver.id) === -1) {
self.knownServers.push(dbserver.id);
}
var server = {
raw: dbserver.get("address"),
isDBServer: true,
target: encodeURIComponent(dbserver.get("name")),
endpoint: endpoint,
addAuth: window.App.addAuth.bind(window.App)
};
});
this.coordinators.forEach(function (coordinator) {
if (coordinator.get("status") !== "ok") {return;}
if (self.knownServers.indexOf(coordinator.id) === -1) {
self.knownServers.push(coordinator.id);
}
var server = {
raw: coordinator.get("address"),
isDBServer: false,
target: encodeURIComponent(coordinator.get("name")),
endpoint: coordinator.get("protocol") + "://" + coordinator.get("address"),
addAuth: window.App.addAuth.bind(window.App)
};
self.documentStore.getStatisticsHistory({
server: server,
figures: ["client.totalTime"]
});
self.history = self.documentStore.history;
self.hist[coordinator.id] = {};
self.history.forEach(function(e) {
var date = new Date(e.time * 1000);
date.setMilliseconds(0);
date.setSeconds(Math.round(date.getSeconds() / 10) * 10);
var uptime = e.server.uptime * 1000;
var time = date.getTime();
if (self.hist[coordinator.id].lastTime
&& (time - self.hist[coordinator.id].lastTime) > uptime) {
self.hist[coordinator.id][
self.hist[coordinator.id].lastTime +
(time-self.hist[coordinator.id].lastTime) / 2] = null;
}
self.hist[coordinator.id].lastTime = time;
if (e.client.totalTime.count === 0) {
self.hist[coordinator.id][time] = 0;
} else {
self.hist[coordinator.id][time] = e.client.totalTime.sum
/ e.client.totalTime.count;
}
});
if (coordinator.get("status") !== "ok") {return;}
if (self.knownServers.indexOf(coordinator.id) === -1) {
self.knownServers.push(coordinator.id);
}
var server = {
raw: coordinator.get("address"),
isDBServer: false,
target: encodeURIComponent(coordinator.get("name")),
endpoint: coordinator.get("protocol") + "://" + coordinator.get("address"),
addAuth: window.App.addAuth.bind(window.App)
};
});
},
*/
addStatisticsItem: function(name, time, requests, snap) {
var self = this;
if (! self.hasOwnProperty('hist')) {
self.hist = {};
}
if (! self.hist.hasOwnProperty(name)) {
self.hist[name] = [];
}
var h = self.hist[name];
var l = h.length;
if (0 === l) {
h.push({
time: time,
snap: snap,
requests: requests,
requestsPerSecond: 0
});
}
else {
var lt = h[l - 1].time;
var tt = h[l - 1].requests;
if (tt >= requests) {
h.times.push({
time: time,
snap: snap,
requests: requests,
requestsPerSecond: 0
});
}
else {
var dt = time - lt;
var ps = 0;
if (dt > 0) {
ps = (requests - tt) / dt;
}
h.push({
time: time,
snap: snap,
requests: requests,
requestsPerSecond: ps
});
}
}
},
getServerStatistics: function() {
var self = this;
this.data = undefined;
var statCollect = new window.ClusterStatisticsCollection();
var coord = this.coordinators.first();
this.dbservers.forEach(function (dbserver) {
if (dbserver.get("status") !== "ok") {return;}
if (self.knownServers.indexOf(dbserver.id) === -1) {
self.knownServers.push(dbserver.id);
}
var stat = new window.Statistics({name: dbserver.id});
stat.url = coord.get("protocol") + "://"
+ coord.get("address")
+ "/_admin/clusterStatistics?DBserver="
+ dbserver.get("name");
statCollect.add(stat);
});
this.coordinators.forEach(function (coordinator) {
if (coordinator.get("status") !== "ok") {return;}
if (self.knownServers.indexOf(coordinator.id) === -1) {
self.knownServers.push(coordinator.id);
}
var stat = new window.Statistics({name: coordinator.id});
stat.url = coordinator.get("protocol") + "://"
+ coordinator.get("address")
+ "/_admin/statistics";
statCollect.add(stat);
});
statCollect.fetch();
statCollect.forEach(function(m) {
var uptime = m.get("server").uptime * 1000;
var time = self.serverTime;
var name = m.get("name");
var totalTime = m.get("client").totalTime;
if (self.hist[name].lastTime
&& (time - self.hist[name].lastTime) > uptime) {
self.hist[name][
self.hist[name].lastTime +
(time-self.hist[name].lastTime) / 2] = null;
}
self.hist[name].lastTime = time;
if (totalTime.count === 0) {
self.hist[name][time] = 0;
} else {
self.hist[name][time] = totalTime.sum / totalTime.count;
}
});
this.data = statCollect;
var self = this;
var snap = Math.round(self.serverTime / 1000);
this.data = undefined;
var statCollect = new window.ClusterStatisticsCollection();
var coord = this.coordinators.first();
// create statistics collector for DB servers
this.dbservers.forEach(function (dbserver) {
if (dbserver.get("status") !== "ok") {return;}
if (self.knownServers.indexOf(dbserver.id) === -1) {
self.knownServers.push(dbserver.id);
}
var stat = new window.Statistics({name: dbserver.id});
stat.url = coord.get("protocol") + "://"
+ coord.get("address")
+ "/_admin/clusterStatistics?DBserver="
+ dbserver.get("name");
statCollect.add(stat);
});
// create statistics collector for coordinator
this.coordinators.forEach(function (coordinator) {
if (coordinator.get("status") !== "ok") {return;}
if (self.knownServers.indexOf(coordinator.id) === -1) {
self.knownServers.push(coordinator.id);
}
var stat = new window.Statistics({name: coordinator.id});
stat.url = coordinator.get("protocol") + "://"
+ coordinator.get("address")
+ "/_admin/statistics";
statCollect.add(stat);
});
// now fetch the statistics
statCollect.fetch();
statCollect.forEach(function(m) {
var time = m.get("time");
var name = m.get("name");
var requests = m.get("http").requestsTotal;
self.addStatisticsItem(name, time, requests, snap);
});
this.data = statCollect;
},
renderPieChart: function(dataset) {
@ -377,8 +395,8 @@
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) {
var v = d.data.value / 1000000000;
return v.toFixed(2) + "GB"; });
var v = d.data.value / 1024 / 1024 / 1024;
return v.toFixed(2); });
slices.append("text")
.attr("transform", function(d) { return "translate(" + arc2.centroid(d) + ")"; })
@ -387,146 +405,50 @@
.text(function(d) { return d.data.key; });
},
renderLineChart: function(remake) {
var self = this;
self.chartData = {
labelsNormal : ['datetime'],
labelsShowAll : ['datetime'],
data : [],
visibilityNormal : [],
visibilityShowAll : []
};
var getData = function() {
var data = {};
Object.keys(self.hist).forEach(function(server) {
Object.keys(self.hist[server]).forEach(function(date) {
if (date === "lastTime") {
return;
}
if (!data[date]) {
data[date] = {};
Object.keys(self.hist).forEach(function(s) {
data[date][s] = null;
});
}
data[date][server] = self.hist[server][date];
});
});
Object.keys(data).forEach(function(d) {
var i = 0;
var sum = 0;
Object.keys(data[d]).forEach(function(server) {
if (data[d][server] !== null) {
i++;
sum = sum + data[d][server];
}
data[d].ClusterAverage = sum / i;
});
});
Object.keys(data).sort().forEach(function (time) {
var dataList = [new Date(parseFloat(time))];
self.max = Number.NEGATIVE_INFINITY;
self.chartData.visibilityShowAll = [];
self.chartData.labelsShowAll = [ "Date"];
Object.keys(data[time]).sort().forEach(function (server) {
self.chartData.visibilityShowAll.push(true);
self.chartData.labelsShowAll.push(server);
dataList.push(data[time][server]);
});
self.chartData.data.push(dataList);
});
var latestEntry = self.chartData.data[self.chartData.data.length -1];
latestEntry.forEach(function (e) {
if (latestEntry.indexOf(e) > 0) {
if (e !== null) {
if (self.max < e) {
self.max = e;
}
}
}
});
self.chartData.visibilityNormal = [];
self.chartData.labelsNormal = [ "Date"];
var i = 0;
latestEntry.forEach(function (e) {
if (i > 0) {
if ("ClusterAverage" === self.chartData.labelsShowAll[i]) {
self.chartData.visibilityNormal.push(true);
self.chartData.labelsNormal.push(
self.chartData.labelsShowAll[i] + " (avg)"
);
} else if (e === self.max ) {
self.chartData.visibilityNormal.push(true);
self.chartData.labelsNormal.push(
self.chartData.labelsShowAll[i] + " (max)"
);
} else {
self.chartData.visibilityNormal.push(false);
self.chartData.labelsNormal.push(self.chartData.labelsShowAll[i]);
}
}
i++;
});
};
if (this.graph !== undefined && !remake) {
getData();
var opts = {file : this.chartData.data};
if (this.graphShowAll ) {
opts.labels = this.chartData.labelsShowAll;
opts.visibility = this.chartData.visibilityShowAll;
} else {
opts.labels = this.chartData.labelsNormal;
opts.visibility = this.chartData.visibilityNormal;
renderLineChart: function() {
var self = this;
var intervall = 60 * 20;
var data = [];
var hash = [];
var t = Math.round(new Date().getTime() / 1000) - intervall;
var ks = self.knownServers;
var i;
var f = function(x) {return null;};
for (i = 0; i < intervall; ++i) {
var dt = t + i;
var tt = new Date(dt * 1000);
var d = [ tt ].concat(ks.map(f));
data.push(d);
hash[dt] = d;
}
var j;
for (i = 0; i < ks.length; ++i) {
var h = self.hist[ks[i]];
if (h) {
for (j = 0; j < h.length; ++j) {
var snap = h[j].snap;
if (hash.hasOwnProperty(snap)) {
var dd = hash[snap];
dd[i + 1] = h[j].requestsPerSecond;
}
opts.dateWindow = this.updateDateWindow( this.graph.graph, this.graphShowAll);
this.graph.graph.updateOptions(opts);
return;
}
var makeGraph = function(remake) {
self.graph = {data : null, options :
self.dygraphConfig.getDefaultConfig("clusterAverageRequestTime")
};
getData();
self.graph.data = self.chartData.data;
self.graph.options.visibility = self.chartData.visibilityNormal;
self.graph.options.labels = self.chartData.labelsNormal;
self.graph.options.colors =
self.dygraphConfig.getColors(self.chartData.labelsNormal);
if (remake) {
self.graph.options =
self.dygraphConfig.getDetailChartConfig("clusterAverageRequestTime");
self.graph.options.labels = self.chartData.labelsShowAll;
self.graph.options.colors =
self.dygraphConfig.getColors(self.chartData.labelsShowAll);
self.graph.options.visibility = self.chartData.visibilityShowAll;
self.graph.options.height = $('.modal-chart-detail').height() * 0.7;
self.graph.options.width = $('.modal-chart-detail').width() * 0.84;
self.graph.options.title = "";
}
self.graph.graph = new Dygraph(
document.getElementById(remake ? 'lineChartDetail' : 'lineGraph'),
self.graph.data,
self.graph.options
);
self.graph.graph.setSelection(false, 'ClusterAverage', true);
};
makeGraph(remake);
},
updateDateWindow: function (graph, isDetailChart) {
var t = new Date().getTime();
var borderLeft, borderRight;
if (isDetailChart && graph.dateWindow_) {
borderLeft = graph.dateWindow_[0];
borderRight = t - graph.dateWindow_[1] - this.interval * 5 > 0 ?
graph.dateWindow_[1] : t;
return [borderLeft, borderRight];
}
return [t - this.defaultFrame, t];
}
self.graph = new Dygraph(
document.getElementById('lineGraph'),
data,
{}
);
},
stopUpdating: function () {
@ -539,8 +461,11 @@
if (this.isUpdating) {
return;
}
this.isUpdating = true;
var self = this;
this.timer = window.setInterval(function() {
self.rerender();
}, this.interval);
@ -573,7 +498,8 @@
serv.endpoint = coord.get("protocol")
+ "://"
+ coord.get("address");
} else {
}
else {
cur = this.coordinators.findWhere({
address: serv.raw
});
@ -587,32 +513,6 @@
window.App.dashboard();
},
showDetail : function() {
var self = this;
delete self.graph;
window.modalView.hideFooter = true;
window.modalView.hide();
window.modalView.show(
"modalGraph.ejs",
"Average request time in milliseconds",
undefined,
undefined,
undefined
);
window.modalView.hideFooter = false;
$('#modal-dialog').on('hidden', function () {
delete self.graph;
self.resetShowAll();
});
//$('.modal-body').css({"max-height": "100%" });
$('#modal-dialog').toggleClass("modal-chart-detail", true);
self.setShowAll();
self.renderLineChart(true);
return self;
},
getCurrentSize: function (div) {
if (div.substr(0,1) !== "#") {
div = "#" + div;
@ -630,12 +530,9 @@
resize: function () {
var dimensions;
if (this.graph) {
dimensions = this.getCurrentSize(this.graph.graph.maindiv_.id);
this.graph.graph.resize(dimensions.width, dimensions.height);
dimensions = this.getCurrentSize(this.graph.maindiv_.id);
this.graph.resize(dimensions.width, dimensions.height);
}
}
});
}());
}());

35
js/apps/system/aardvark/frontend/js/collections/arangoDocuments.js
View File

@ -118,41 +118,6 @@
this.reset();
},
getStatisticsHistory: function(params) {
var self = this,
body = {
figures: params.figures
},
server = params.server,
addAuth = function(){},
url = "";
if (server) {
url = server.endpoint;
url += "/_admin/history";
if (server.isDBServer) {
url += "?DBserver=" + server.target;
}
addAuth = server.addAuth;
} else {
url = "/_admin/history";
}
$.ajax({
cache: false,
type: 'POST',
async: false,
url: url,
data: JSON.stringify(body),
contentType: "application/json",
beforeSend: addAuth,
success: function(data) {
self.history = data.result;
},
error: function() {
}
});
},
updloadDocuments : function (file) {
var result;
$.ajax({

508
js/apps/system/aardvark/frontend/js/config/dygraphConfig.js
View File

@ -2,262 +2,262 @@
/*global require, _, Dygraph, window, document */
(function () {
"use strict";
window.dygraphConfig = {
"use strict";
window.dygraphConfig = {
defaultFrame : 20 * 60 * 1000,
defaultFrame : 20 * 60 * 1000,
zeropad: function (x) {
if (x < 10) {
return "0" + x;
}
return x;
},
zeropad: function (x) {
if (x < 10) {
return "0" + x;
}
return x;
},
xAxisFormat: function (d) {
if (d === -1) {
return "";
}
var date = new Date(d);
return this.zeropad(date.getHours()) + ":"
+ this.zeropad(date.getMinutes()) + ":"
+ this.zeropad(date.getSeconds());
},
xAxisFormat: function (d) {
if (d === -1) {
return "";
}
var date = new Date(d);
return this.zeropad(date.getHours()) + ":"
+ this.zeropad(date.getMinutes()) + ":"
+ this.zeropad(date.getSeconds());
},
mergeObjects: function (o1, o2, mergeAttribList) {
if (!mergeAttribList) {
mergeAttribList = [];
}
var vals = {}, res;
mergeAttribList.forEach(function (a) {
var valO1 = o1[a],
valO2 = o2[a];
if (valO1 === undefined) {
valO1 = {};
}
if (valO2 === undefined) {
valO2 = {};
}
vals[a] = _.extend(valO1, valO2);
});
res = _.extend(o1, o2);
Object.keys(vals).forEach(function (k) {
res[k] = vals[k];
});
return res;
},
mapStatToFigure : {
residentSize : ["times", "residentSizePercent"],
pageFaults : ["times", "majorPageFaultsPerSecond", "minorPageFaultsPerSecond"],
systemUserTime : ["times", "systemTimePerSecond", "userTimePerSecond"],
totalTime : ["times", "avgQueueTime", "avgRequestTime", "avgIoTime"],
dataTransfer : ["times", "bytesSentPerSecond", "bytesReceivedPerSecond"],
requests : ["times", "getsPerSecond", "putsPerSecond", "postsPerSecond",
"deletesPerSecond", "patchesPerSecond", "headsPerSecond",
"optionsPerSecond", "othersPerSecond"]
},
//colors for dygraphs
colors: ["#617e2b", "#296e9c", "#81ccd8", "#7ca530", "#3c3c3c",
"#aa90bd", "#e1811d", "#c7d4b2", "#d0b2d4"],
// figure dependend options
figureDependedOptions: {
clusterAverageRequestTime : {
showLabelsOnHighlight : true,
title : 'Average request time in milliseconds',
axes: {
y: {
valueFormatter: function (y) {
return parseFloat(y.toPrecision(3));
},
axisLabelFormatter: function (y) {
if (y === 0) {
return 0;
}
return parseFloat(y.toPrecision(3));
}
}
}
},
residentSize: {
header: "Resident Size",
axes: {
y: {
labelsKMG2: false,
axisLabelFormatter: function (y) {
return parseFloat(y.toPrecision(3) * 100) + "%";
},
valueFormatter: function (y) {
return parseFloat(y.toPrecision(3) * 100) + "%";
}
}
}
},
pageFaults: {
header : "Page Faults",
visibility: [true, false],
labels: ["datetime", "Major Page Faults", "Minor Page Faults"],
div: "pageFaultsChart",
labelsKMG2: false
},
systemUserTime: {
div: "systemUserTimeChart",
header: "System and User Time",
labels: ["datetime", "System Time", "User Time"],
stackedGraph: true,
labelsKMG2: false,
axes: {
y: {
valueFormatter: function (y) {
return parseFloat(y.toPrecision(3));
},
axisLabelFormatter: function (y) {
if (y === 0) {
return 0;
}
return parseFloat(y.toPrecision(3));
}
}
}
},
totalTime: {
div: "totalTimeChart",
header: "Total Time",
labels: ["datetime", "Queue", "Computation", "I/O"],
labelsKMG2: false,
axes: {
y: {
valueFormatter: function (y) {
return parseFloat(y.toPrecision(3));
},
axisLabelFormatter: function (y) {
if (y === 0) {
return 0;
}
return parseFloat(y.toPrecision(3));
}
}
},
stackedGraph: true
},
dataTransfer: {
header: "Data Transfer",
labels: ["datetime", "Bytes sent", "Bytes received"],
stackedGraph: true,
div: "dataTransferChart"
},
requests: {
header: "Requests",
labels: ["datetime", "GET", "PUT", "POST", "DELETE", "PATCH", "HEAD", "OPTIONS", "OTHER"],
stackedGraph: true,
div: "requestsChart"
}
},
getDashBoardFigures : function (all) {
var result = [], self = this;
Object.keys(this.figureDependedOptions).forEach(function (k) {
if (self.figureDependedOptions[k].div || all) {
result.push(k);
}
});
return result;
},
//configuration for chart overview
getDefaultConfig: function (figure) {
var self = this;
var result = {
digitsAfterDecimal: 1,
drawGapPoints: true,
fillGraph: true,
showLabelsOnHighlight: false,
strokeWidth: 2,
strokeBorderWidth: 0.5,
includeZero: true,
highlightCircleSize: 0,
labelsSeparateLines : true,
strokeBorderColor: '#ffffff',
interactionModel: {},
maxNumberWidth : 10,
colors: [this.colors[0]],
xAxisLabelWidth: "50",
rightGap: 15,
showRangeSelector: false,
rangeSelectorHeight: 50,
rangeSelectorPlotStrokeColor: '#365300',
rangeSelectorPlotFillColor: '',
// rangeSelectorPlotFillColor: '#414a4c',
pixelsPerLabel: 50,
labelsKMG2: true,
dateWindow: [
new Date().getTime() -
this.defaultFrame,
new Date().getTime()
],
axes: {
x: {
valueFormatter: function (d) {
return self.xAxisFormat(d);
}
},
y: {
ticker: Dygraph.numericLinearTicks
}
}
};
if (this.figureDependedOptions[figure]) {
result = this.mergeObjects(
result, this.figureDependedOptions[figure], ["axes"]
);
if (result.div && result.labels) {
result.colors = this.getColors(result.labels);
result.labelsDiv = document.getElementById(result.div + "Legend");
result.legend = "always";
result.showLabelsOnHighlight = true;
}
}
return result;
},
getDetailChartConfig: function (figure) {
var result = _.extend(
this.getDefaultConfig(figure),
{
showRangeSelector: true,
interactionModel: null,
showLabelsOnHighlight: true,
highlightCircleSize: 3,
legend: "always",
labelsDiv: "div#detailLegend.dashboard-legend-inner"
// labelsDiv: document.getElementById("detailLegend")
}
);
if (figure === "pageFaults") {
result.visibility = [true, true];
}
if (!result.labels) {
result.labels = ["datetime", result.header];
result.colors = this.getColors(result.labels);
}
return result;
},
getColors: function (labels) {
var colorList;
colorList = this.colors.concat([]);
return colorList.slice(0, labels.length - 1);
mergeObjects: function (o1, o2, mergeAttribList) {
if (!mergeAttribList) {
mergeAttribList = [];
}
var vals = {}, res;
mergeAttribList.forEach(function (a) {
var valO1 = o1[a],
valO2 = o2[a];
if (valO1 === undefined) {
valO1 = {};
}
};
if (valO2 === undefined) {
valO2 = {};
}
vals[a] = _.extend(valO1, valO2);
});
res = _.extend(o1, o2);
Object.keys(vals).forEach(function (k) {
res[k] = vals[k];
});
return res;
},
mapStatToFigure : {
residentSize : ["times", "residentSizePercent"],
pageFaults : ["times", "majorPageFaultsPerSecond", "minorPageFaultsPerSecond"],
systemUserTime : ["times", "systemTimePerSecond", "userTimePerSecond"],
totalTime : ["times", "avgQueueTime", "avgRequestTime", "avgIoTime"],
dataTransfer : ["times", "bytesSentPerSecond", "bytesReceivedPerSecond"],
requests : ["times", "getsPerSecond", "putsPerSecond", "postsPerSecond",
"deletesPerSecond", "patchesPerSecond", "headsPerSecond",
"optionsPerSecond", "othersPerSecond"]
},
//colors for dygraphs
colors: ["#617e2b", "#296e9c", "#81ccd8", "#7ca530", "#3c3c3c",
"#aa90bd", "#e1811d", "#c7d4b2", "#d0b2d4"],
// figure dependend options
figureDependedOptions: {
clusterRequestsPerSecond: {
showLabelsOnHighlight: true,
title: 'Requests per second',
axes: {
y: {
valueFormatter: function (y) {
return parseFloat(y.toPrecision(3));
},
axisLabelFormatter: function (y) {
if (y === 0) {
return 0;
}
return parseFloat(y.toPrecision(3));
}
}
}
},
residentSize: {
header: "Resident Size",
axes: {
y: {
labelsKMG2: false,
axisLabelFormatter: function (y) {
return parseFloat(y.toPrecision(3) * 100) + "%";
},
valueFormatter: function (y) {
return parseFloat(y.toPrecision(3) * 100) + "%";
}
}
}
},
pageFaults: {
header : "Page Faults",
visibility: [true, false],
labels: ["datetime", "Major Page Faults", "Minor Page Faults"],
div: "pageFaultsChart",
labelsKMG2: false
},
systemUserTime: {
div: "systemUserTimeChart",
header: "System and User Time",
labels: ["datetime", "System Time", "User Time"],
stackedGraph: true,
labelsKMG2: false,
axes: {
y: {
valueFormatter: function (y) {
return parseFloat(y.toPrecision(3));
},
axisLabelFormatter: function (y) {
if (y === 0) {
return 0;
}
return parseFloat(y.toPrecision(3));
}
}
}
},
totalTime: {
div: "totalTimeChart",
header: "Total Time",
labels: ["datetime", "Queue", "Computation", "I/O"],
labelsKMG2: false,
axes: {
y: {
valueFormatter: function (y) {
return parseFloat(y.toPrecision(3));
},
axisLabelFormatter: function (y) {
if (y === 0) {
return 0;
}
return parseFloat(y.toPrecision(3));
}
}
},
stackedGraph: true
},
dataTransfer: {
header: "Data Transfer",
labels: ["datetime", "Bytes sent", "Bytes received"],
stackedGraph: true,
div: "dataTransferChart"
},
requests: {
header: "Requests",
labels: ["datetime", "GET", "PUT", "POST", "DELETE", "PATCH", "HEAD", "OPTIONS", "OTHER"],
stackedGraph: true,
div: "requestsChart"
}
},
getDashBoardFigures : function (all) {
var result = [], self = this;
Object.keys(this.figureDependedOptions).forEach(function (k) {
if (self.figureDependedOptions[k].div || all) {
result.push(k);
}
});
return result;
},
//configuration for chart overview
getDefaultConfig: function (figure) {
var self = this;
var result = {
digitsAfterDecimal: 1,
drawGapPoints: true,
fillGraph: true,
showLabelsOnHighlight: false,
strokeWidth: 2,
strokeBorderWidth: 0.5,
includeZero: true,
highlightCircleSize: 0,
labelsSeparateLines : true,
strokeBorderColor: '#ffffff',
interactionModel: {},
maxNumberWidth : 10,
colors: [this.colors[0]],
xAxisLabelWidth: "50",
rightGap: 15,
showRangeSelector: false,
rangeSelectorHeight: 50,
rangeSelectorPlotStrokeColor: '#365300',
rangeSelectorPlotFillColor: '',
// rangeSelectorPlotFillColor: '#414a4c',
pixelsPerLabel: 50,
labelsKMG2: true,
dateWindow: [
new Date().getTime() -
this.defaultFrame,
new Date().getTime()
],
axes: {
x: {
valueFormatter: function (d) {
return self.xAxisFormat(d);
}
},
y: {
ticker: Dygraph.numericLinearTicks
}
}
};
if (this.figureDependedOptions[figure]) {
result = this.mergeObjects(
result, this.figureDependedOptions[figure], ["axes"]
);
if (result.div && result.labels) {
result.colors = this.getColors(result.labels);
result.labelsDiv = document.getElementById(result.div + "Legend");
result.legend = "always";
result.showLabelsOnHighlight = true;
}
}
return result;
},
getDetailChartConfig: function (figure) {
var result = _.extend(
this.getDefaultConfig(figure),
{
showRangeSelector: true,
interactionModel: null,
showLabelsOnHighlight: true,
highlightCircleSize: 3,
legend: "always",
labelsDiv: "div#detailLegend.dashboard-legend-inner"
// labelsDiv: document.getElementById("detailLegend")
}
);
if (figure === "pageFaults") {
result.visibility = [true, true];
}
if (!result.labels) {
result.labels = ["datetime", result.header];
result.colors = this.getColors(result.labels);
}
return result;
},
getColors: function (labels) {
var colorList;
colorList = this.colors.concat([]);
return colorList.slice(0, labels.length - 1);
}
};
}());