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

Merge branch 'sharding' of https://github.com/triAGENS/ArangoDB into sharding

This commit is contained in:
Michael Hackstein 2014-02-22 16:28:44 +01:00
parent 3388e0864e 5fd4c72bef
commit e94faa2949
5 changed files with 232 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/apps/system/aardvark/frontend/js/templates/dashboardHttpGroup.ejs
View File

@ -1,5 +1,5 @@
<script id="dashboardHttpGroup.ejs" type="text/template"> <script id="dashboardHttpGroup.ejs" type="text/template">
<div id="<%=id%>"></div> <div id="<%=id%>" class="dashboardChart"></div>
</script> </script>

249
js/apps/system/aardvark/frontend/js/views/dashboardView.js
View File

@ -44,8 +44,148 @@
], ],
system_systemUserTime: ["systemTime","userTime"] system_systemUserTime: ["systemTime","userTime"]
}, },
colors : ["#617e2b", "#708a40", "#809755", "#90a46a", "#a0b17f", "#b0be95"],
stackedCharts : ["http_requests", "system_systemUserTime"], figureDependedOptions : {
numberOfThreads : {},
residentSize : {
axes: {
y: {
valueFormatter: function(y) {
if (y > 10000000) {
y = y / 100000000;
return y.toPrecision(2) + "GB";
} else if (y > 100000) {
y = y / 100000;
return y.toPrecision(2) + "MB";
} else {
y = y / 1000;
return y.toPrecision(2) + "KB";
}
},
axisLabelFormatter: function(y) {
if (y > 10000000) {
y = y / 100000000;
return y.toPrecision(2) + "GB";
} else if (y > 100000) {
y = y / 100000;
return y.toPrecision(2) + "MB";
} else {
y = y / 1000;
return y.toPrecision(2) + "KB";
}
}
}
}
},
virtualSize : {
axes: {
y: {
valueFormatter: function(y) {
if (y > 10000000) {
y = y / 100000000;
return y.toPrecision(2) + "GB";
} else if (y > 100000) {
y = y / 100000;
return y.toPrecision(2) + "MB";
} else {
y = y / 1000;
return y.toPrecision(2) + "KB";
}
},
axisLabelFormatter: function(y) {
if (y > 10000000) {
y = y / 100000000;
return y.toPrecision(2) + "GB";
} else if (y > 100000) {
y = y / 100000;
return y.toPrecision(2) + "MB";
} else {
y = y / 1000;
return y.toPrecision(2) + "KB";
}
}
}
}
},
minorPageFaults : {},
majorPageFaults : {},
systemUserTime : {
title : "System and User Time",
stacked : true
},
httpConnections : {},
totalTime : {},
requestTime : {},
queueTime : {},
bytesSent : {
axes: {
y: {
valueFormatter: function(y) {
if (y > 10000000) {
y = y / 100000000;
return y.toPrecision(2) + "GB";
} else if (y > 100000) {
y = y / 100000;
return y.toPrecision(2) + "MB";
} else {
y = y / 1000;
return y.toPrecision(2) + "KB";
}
},
axisLabelFormatter: function(y) {
if (y > 10000000) {
y = y / 100000000;
return y.toPrecision(2) + "GB";
} else if (y > 100000) {
y = y / 100000;
return y.toPrecision(2) + "MB";
} else {
y = y / 1000;
return y.toPrecision(2) + "KB";
}
}
}
}
},
bytesReceived : {
axes: {
y: {
valueFormatter: function(y) {
if (y > 10000000) {
y = y / 100000000;
return y.toPrecision(2) + "GB";
} else if (y > 100000) {
y = y / 100000;
return y.toPrecision(2) + "MB";
} else {
y = y / 1000;
return y.toPrecision(2) + "KB";
}
},
axisLabelFormatter: function(y) {
if (y > 10000000) {
y = y / 100000000;
return y.toPrecision(2) + "GB";
} else if (y > 100000) {
y = y / 100000;
return y.toPrecision(2) + "MB";
} else {
y = y / 1000;
return y.toPrecision(2) + "KB";
}
}
}
}
},
requestsTotal : {},
requestsAsync : {},
requests : {
title : "HTTP Requests",
stacked : true
},
uptime : {}
},
initialize: function () { initialize: function () {
@ -64,8 +204,15 @@
var result = {}; var result = {};
if (this.chartTypeExceptions[figure.type] && if (this.chartTypeExceptions[figure.type] &&
this.chartTypeExceptions[figure.type][figure.identifier]) { this.chartTypeExceptions[figure.type][figure.identifier]) {
var d = {
type: this.chartTypeExceptions[figure.type][figure.identifier],
identifier: figure.identifier,
group: figure.group,
name : figure.name
};
result[this.chartTypeExceptions[figure.type][figure.identifier]] = result[this.chartTypeExceptions[figure.type][figure.identifier]] =
this.getChartStructure(this.chartTypeExceptions[figure.type][figure.identifier]); this.getChartStructure(d);
if (figure.type === "distribution") { if (figure.type === "distribution") {
result[figure.type] = this.getChartStructure(figure); result[figure.type] = this.getChartStructure(figure);
} }
@ -76,9 +223,19 @@
}, },
getChartStructure: function (figure) { getChartStructure: function (figure) {
var options = {
labelsDivStyles: { 'backgroundColor': 'transparent','textAlign': 'right' },
labelsSeparateLines: true,
fillGraph : true,
colors: [this.colors[0]]
};
if (figure.name) {
options["title"] = figure.name;
}
var type = figure.type; var type = figure.type;
var showGraph = true; var showGraph = true;
if (type === "lineChartDiffBased") { if (type === "lineChartDiffBased") {
options["title"] += " per seconds";
type = "current"; type = "current";
} else if (type === "distribution") { } else if (type === "distribution") {
type = "distribution"; type = "distribution";
@ -87,13 +244,9 @@
} else if (type === "currentDistribution") { } else if (type === "currentDistribution") {
type = "current"; type = "current";
} }
var options = {title: figure.identifier };
if (type === "current") { if (type === "current") {
options["labels"] = ["datetime" , figure.identifier]; options["labels"] = ["datetime" , figure.identifier];
} }
if (this.stackedCharts.indexOf(figure.group + "_" + figure.identifier) != -1) {
options["stackedGraph"] = true;
}
return { return {
type : type, type : type,
showGraph: showGraph, showGraph: showGraph,
@ -116,10 +269,13 @@
var part = cc.split("_"); var part = cc.split("_");
var fig = {identifier : part[1], group : part[0], type : "current"}; var fig = {identifier : part[1], group : part[0], type : "current"};
var label = ["datetime"]; var label = ["datetime"];
var colors = self.colors.concat([]);
self.combinedCharts[cc].sort().forEach(function(attrib) { self.combinedCharts[cc].sort().forEach(function(attrib) {
label.push(attrib); label.push(attrib);
}) })
self.getChartsForFigure(fig); self.getChartsForFigure(fig);
console.log(colors.slice(0, label.length));
self.series[fig.group][fig.identifier]["current"]["options"]["colors"] = colors.slice(0, label.length);
self.series[fig.group][fig.identifier]["current"]["options"]["labels"] = label; self.series[fig.group][fig.identifier]["current"]["options"]["labels"] = label;
}); });
@ -136,10 +292,14 @@
var val = entry[g.group][figure]; var val = entry[g.group][figure];
if (valueList === "lineChartDiffBased") { if (valueList === "lineChartDiffBased") {
if (!self.LastValues[figure]) { if (!self.LastValues[figure]) {
self.LastValues[figure] = val; self.LastValues[figure] = {value : val , time: 0};
} }
valueLists[valueList]["data"].push([new Date(time), (val - self.LastValues[figure]) / val]); val = (val - self.LastValues[figure]["value"]) / (time - self.LastValues[figure]["time"]);
self.LastValues[figure] = val; valueLists[valueList]["data"].push(
[new Date(time), val]
);
self.LastValues[figure] = {value : val , time: time};
} else if (valueList === "distribution") { } else if (valueList === "distribution") {
valueLists[valueList]["data"] = val; valueLists[valueList]["data"] = val;
} else if (valueList === "accumulated") { } else if (valueList === "accumulated") {
@ -160,7 +320,11 @@
var part = cc.split("_"); var part = cc.split("_");
var val = [new Date(time)]; var val = [new Date(time)];
self.combinedCharts[cc].sort().forEach(function(attrib) { self.combinedCharts[cc].sort().forEach(function(attrib) {
val.push(entry[part[0]][attrib]); if (self.LastValues[attrib]) {
val.push(self.LastValues[attrib]["value"]);
} else {
val.push(entry[part[0]][attrib]);
}
}) })
self.series[part[0]][part[1]]["current"]["data"].push(val); self.series[part[0]][part[1]]["current"]["data"].push(val);
}) })
@ -185,45 +349,43 @@
updateSeries : function(data) { updateSeries : function(data) {
console.log(data);
this.processSingleStatistic(data); this.processSingleStatistic(data);
}, },
createLineCharts: function() { createLineCharts: function() {
var self = this; var self = this;
console.log(self.series);
Object.keys(self.series).forEach(function(group) { Object.keys(self.series).forEach(function(group) {
Object.keys(self.series[group]).forEach(function(figure) { Object.keys(self.series[group]).forEach(function(figure) {
Object.keys(self.series[group][figure]).forEach(function(valueList) { Object.keys(self.series[group][figure]).forEach(function(valueList) {
var chart = self.series[group][figure][valueList]; var chart = self.series[group][figure][valueList];
if (chart["type"] === "current" && chart["showGraph"] === true) { if (chart["type"] === "current" && chart["showGraph"] === true) {
if (!chart["graph"]) { if (!chart["graph"]) {
console.log(figure);
console.log(chart["options"]);
self.renderHttpGroup(figure); self.renderHttpGroup(figure);
self.graphs[figure] = new Dygraph( chart["graph"] = new Dygraph(
document.getElementById(figure), document.getElementById(figure+"LineChart"),
self.series[group][figure]["current"]["data"], chart["data"],
_.extend( _.extend(
self.series[group][figure]["current"]["options"], chart["options"],
{ self.figureDependedOptions[figure])
highlightSeriesOpts: {
strokeWidth: 3,
strokeBorderWidth: 1,
highlightCircleSize: 5
}
})
); );
var onclick = function(ev) { var onclick = function(ev) {
if (self.graphs[figure].isSeriesLocked()) { if (chart["graph"].isSeriesLocked()) {
self.graphs[figure].clearSelection(); chart["graph"].clearSelection();
} else { } else {
self.graphs[figure].setSelection(self.graphs[figure].getSelection(), self.graphs[figure].getHighlightSeries(), true); chart["graph"].setSelection(chart["graph"].getSelection(), chart["graph"].getHighlightSeries(), true);
} }
}; };
self.graphs[figure].updateOptions({clickCallback: onclick}, true); chart["graph"].updateOptions({clickCallback: onclick}, true);
self.graphs[figure].setSelection(false, 'ClusterAverage', true); chart["graph"].setSelection(false, 'ClusterAverage', true);
} else { } else {
self.graphs[figure].updateOptions( { chart["graph"].updateOptions( {
'file': self.series[group][figure]["current"] 'file': chart["data"]
} ); } );
} }
} }
@ -291,7 +453,7 @@
distributionTemplate: templateEngine.createTemplate("dashboardDistribution.ejs"), distributionTemplate: templateEngine.createTemplate("dashboardDistribution.ejs"),
renderHttpGroup: function(id) { renderHttpGroup: function(id) {
$(this.contentEl).append(this.httpTemplate.render({id : id})); $(this.contentEl).append(this.httpTemplate.render({id : id+"LineChart"}));
}, },
render: function() { render: function() {
@ -307,7 +469,15 @@
}, },
createDistributionSeries: function(name) { createDistributionSeries: function(name) {
console.log(name); var cuts = [];
_.each(this.description.attributes.figures, function(k, v) {
if (k.identifier === name) {
cuts = k.cuts;
cuts.unshift(0);
}
});
//value prep for d3 graphs //value prep for d3 graphs
var distributionValues = this.series.client[name].distribution.data.counts; var distributionValues = this.series.client[name].distribution.data.counts;
var sum = this.series.client[name].distribution.data.sum; var sum = this.series.client[name].distribution.data.sum;
@ -317,13 +487,13 @@
_.each(distributionValues, function() { _.each(distributionValues, function() {
values.push({ values.push({
"label" : (sum / areaLength) * counter, //"label" : (sum / areaLength) * counter,
"label" : cuts[counter-1],
"value" : distributionValues[counter-1] "value" : distributionValues[counter-1]
}); });
counter++; counter++;
}); });
console.log(values); return values;
return values;
}, },
createDistributionCharts: function () { createDistributionCharts: function () {
@ -335,7 +505,7 @@
var data = [{ var data = [{
key: v, key: v,
color: "#D67777", color: "#617E2B",
values: valueData values: valueData
}]; }];
@ -344,10 +514,11 @@
.x(function(d) { return d.label }) .x(function(d) { return d.label })
.y(function(d) { return d.value }) .y(function(d) { return d.value })
//.margin({top: 30, right: 20, bottom: 50, left: 175}) //.margin({top: 30, right: 20, bottom: 50, left: 175})
.showValues(true) //Show bar value next to each bar. .margin({left: 80})
.tooltips(true) //Show tooltips on hover. .showValues(true)
.transitionDuration(350) .transitionDuration(350)
.showControls(true); //Allow user to switch between "Grouped" and "Stacked" mode. .tooltips(false)
.showControls(false);
chart.yAxis chart.yAxis
.tickFormat(d3.format(',.2f')); .tickFormat(d3.format(',.2f'));
@ -355,7 +526,7 @@
chart.xAxis chart.xAxis
.tickFormat(d3.format(',.2f')); .tickFormat(d3.format(',.2f'));
d3.select('#' + v + ' svg') d3.select('#' + v + 'Distribution svg')
.datum(data) .datum(data)
.call(chart) .call(chart)
.append("text") .append("text")
@ -374,7 +545,7 @@
renderDistributionPlaceholder: function () { renderDistributionPlaceholder: function () {
var self = this; var self = this;
_.each(this.chartTypeExceptions.distribution, function(k, v) { _.each(this.chartTypeExceptions.distribution, function(k, v) {
$(self.contentEl).append(self.distributionTemplate.render({elementId: v})); $(self.contentEl).append(self.distributionTemplate.render({elementId: v+"Distribution"}));
}); });
} }

11
js/apps/system/aardvark/frontend/scss/_dashboardDistribution.scss
View File

@ -1,4 +1,9 @@
.dashboardDistribution svg { .dashboardDistribution {
width: 300px; width: 270px;
height: 300px; float: left;
}
.dashboardDistribution svg {
width: 250px;
height: 220px;
} }

4
js/apps/system/aardvark/frontend/scss/_dashboardHttpGroup.scss
View File

@ -3,3 +3,7 @@
height: 300px; height: 300px;
border: 1px solid black; border: 1px solid black;
} }
.dashboardChart {
float: left;
}

11
js/apps/system/aardvark/frontend/scss/generated.css
View File

@ -863,6 +863,13 @@ select.filterSelect {
height: 300px; height: 300px;
border: 1px solid black; } border: 1px solid black; }
.dashboardChart {
float: left; }
.dashboardDistribution {
width: 270px;
float: left; }
.dashboardDistribution svg { .dashboardDistribution svg {
width: 300px; width: 250px;
height: 300px; } height: 220px; }