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">
<div id="<%=id%>"></div>
<div id="<%=id%>" class="dashboardChart"></div>
</script>

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

@ -44,8 +44,148 @@
],
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 () {
@ -64,8 +204,15 @@
var result = {};
if (this.chartTypeExceptions[figure.type] &&
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]] =
this.getChartStructure(this.chartTypeExceptions[figure.type][figure.identifier]);
this.getChartStructure(d);
if (figure.type === "distribution") {
result[figure.type] = this.getChartStructure(figure);
}
@ -76,9 +223,19 @@
},
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 showGraph = true;
if (type === "lineChartDiffBased") {
options["title"] += " per seconds";
type = "current";
} else if (type === "distribution") {
type = "distribution";
@ -87,13 +244,9 @@
} else if (type === "currentDistribution") {
type = "current";
}
var options = {title: figure.identifier };
if (type === "current") {
options["labels"] = ["datetime" , figure.identifier];
}
if (this.stackedCharts.indexOf(figure.group + "_" + figure.identifier) != -1) {
options["stackedGraph"] = true;
}
return {
type : type,
showGraph: showGraph,
@ -116,10 +269,13 @@
var part = cc.split("_");
var fig = {identifier : part[1], group : part[0], type : "current"};
var label = ["datetime"];
var colors = self.colors.concat([]);
self.combinedCharts[cc].sort().forEach(function(attrib) {
label.push(attrib);
})
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;
});
@ -136,10 +292,14 @@
var val = entry[g.group][figure];
if (valueList === "lineChartDiffBased") {
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]);
self.LastValues[figure] = val;
val = (val - self.LastValues[figure]["value"]) / (time - self.LastValues[figure]["time"]);
valueLists[valueList]["data"].push(
[new Date(time), val]
);
self.LastValues[figure] = {value : val , time: time};
} else if (valueList === "distribution") {
valueLists[valueList]["data"] = val;
} else if (valueList === "accumulated") {
@ -160,7 +320,11 @@
var part = cc.split("_");
var val = [new Date(time)];
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);
})
@ -185,45 +349,43 @@
updateSeries : function(data) {
console.log(data);
this.processSingleStatistic(data);
},
createLineCharts: function() {
var self = this;
console.log(self.series);
Object.keys(self.series).forEach(function(group) {
Object.keys(self.series[group]).forEach(function(figure) {
Object.keys(self.series[group][figure]).forEach(function(valueList) {
var chart = self.series[group][figure][valueList];
if (chart["type"] === "current" && chart["showGraph"] === true) {
if (!chart["graph"]) {
console.log(figure);
console.log(chart["options"]);
self.renderHttpGroup(figure);
self.graphs[figure] = new Dygraph(
document.getElementById(figure),
self.series[group][figure]["current"]["data"],
chart["graph"] = new Dygraph(
document.getElementById(figure+"LineChart"),
chart["data"],
_.extend(
self.series[group][figure]["current"]["options"],
{
highlightSeriesOpts: {
strokeWidth: 3,
strokeBorderWidth: 1,
highlightCircleSize: 5
}
})
chart["options"],
self.figureDependedOptions[figure])
);
var onclick = function(ev) {
if (self.graphs[figure].isSeriesLocked()) {
self.graphs[figure].clearSelection();
if (chart["graph"].isSeriesLocked()) {
chart["graph"].clearSelection();
} 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);
self.graphs[figure].setSelection(false, 'ClusterAverage', true);
chart["graph"].updateOptions({clickCallback: onclick}, true);
chart["graph"].setSelection(false, 'ClusterAverage', true);
} else {
self.graphs[figure].updateOptions( {
'file': self.series[group][figure]["current"]
chart["graph"].updateOptions( {
'file': chart["data"]
} );
}
}
@ -291,7 +453,7 @@
distributionTemplate: templateEngine.createTemplate("dashboardDistribution.ejs"),
renderHttpGroup: function(id) {
$(this.contentEl).append(this.httpTemplate.render({id : id}));
$(this.contentEl).append(this.httpTemplate.render({id : id+"LineChart"}));
},
render: function() {
@ -307,7 +469,15 @@
},
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
var distributionValues = this.series.client[name].distribution.data.counts;
var sum = this.series.client[name].distribution.data.sum;
@ -317,13 +487,13 @@
_.each(distributionValues, function() {
values.push({
"label" : (sum / areaLength) * counter,
//"label" : (sum / areaLength) * counter,
"label" : cuts[counter-1],
"value" : distributionValues[counter-1]
});
counter++;
});
console.log(values);
return values;
return values;
},
createDistributionCharts: function () {
@ -335,7 +505,7 @@
var data = [{
key: v,
color: "#D67777",
color: "#617E2B",
values: valueData
}];
@ -344,10 +514,11 @@
.x(function(d) { return d.label })
.y(function(d) { return d.value })
//.margin({top: 30, right: 20, bottom: 50, left: 175})
.showValues(true) //Show bar value next to each bar.
.tooltips(true) //Show tooltips on hover.
.margin({left: 80})
.showValues(true)
.transitionDuration(350)
.showControls(true); //Allow user to switch between "Grouped" and "Stacked" mode.
.tooltips(false)
.showControls(false);
chart.yAxis
.tickFormat(d3.format(',.2f'));
@ -355,7 +526,7 @@
chart.xAxis
.tickFormat(d3.format(',.2f'));
d3.select('#' + v + ' svg')
d3.select('#' + v + 'Distribution svg')
.datum(data)
.call(chart)
.append("text")
@ -374,7 +545,7 @@
renderDistributionPlaceholder: function () {
var self = this;
_.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 {
width: 300px;
height: 300px;
.dashboardDistribution {
width: 270px;
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;
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;
border: 1px solid black; }
.dashboardChart {
float: left; }
.dashboardDistribution {
width: 270px;
float: left; }
.dashboardDistribution svg {
width: 300px;
height: 300px; }
width: 250px;
height: 220px; }