From aa3a0c289604b9c455439bfb5d0a8622849cd1ea Mon Sep 17 00:00:00 2001 From: Frank Celler Date: Sat, 24 May 2014 00:44:51 +0200 Subject: [PATCH] cleanup cluster dashboard --- js/actions/api-system.js | 1 + .../js/templates/showCluster.ejs | 2 +- .../js/views/showClusterView.js | 495 +++++++---------- .../js/collections/arangoDocuments.js | 35 -- .../frontend/js/config/dygraphConfig.js | 508 +++++++++--------- 5 files changed, 452 insertions(+), 589 deletions(-) diff --git a/js/actions/api-system.js b/js/actions/api-system.js index d1180d081e..949d7bb871 100644 --- a/js/actions/api-system.js +++ b/js/actions/api-system.js @@ -329,6 +329,7 @@ actions.defineHttp({ try { result = {}; + result.time = internal.time(); result.system = internal.processStatistics(); result.client = internal.clientStatistics(); result.http = internal.httpStatistics(); diff --git a/js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs b/js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs index 4d2e61116b..1edae39b5b 100644 --- a/js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs +++ b/js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs @@ -109,7 +109,7 @@
-
Virtual Memory Size
+
Virtual Memory Size in GB
diff --git a/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js b/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js index f8f83b06c8..ee5f420eef 100644 --- a/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js +++ b/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js @@ -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); } } }); - - - - }()); +}()); diff --git a/js/apps/system/aardvark/frontend/js/collections/arangoDocuments.js b/js/apps/system/aardvark/frontend/js/collections/arangoDocuments.js index a237625f5a..1af03e64d4 100644 --- a/js/apps/system/aardvark/frontend/js/collections/arangoDocuments.js +++ b/js/apps/system/aardvark/frontend/js/collections/arangoDocuments.js @@ -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({ diff --git a/js/apps/system/aardvark/frontend/js/config/dygraphConfig.js b/js/apps/system/aardvark/frontend/js/config/dygraphConfig.js index 96a7371400..2f6c0cdd32 100644 --- a/js/apps/system/aardvark/frontend/js/config/dygraphConfig.js +++ b/js/apps/system/aardvark/frontend/js/config/dygraphConfig.js @@ -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); + } + }; }());