1
0
Fork 0

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

This commit is contained in:
Michael Hackstein 2014-04-16 08:58:38 +02:00
commit b12b6a1232
9 changed files with 188 additions and 101 deletions

View File

@ -48,18 +48,18 @@
},
mapStatToFigure : {
numberOfThreads : ["times", "numberOfThreadsCurrent"],
numberOfThreads : ["times", "numberOfThreads"],
residentSize : ["times", "residentSizePercent"],
virtualSize : ["times", "virtualSize"],
pageFaults : ["times", "majorPageFaultsPerSecond", "minorPageFaultsPerSecond"],
systemUserTime : ["times", "cpuSystemTime", "cpuUserTime"],
httpConnections : ["times", "clientConnectionsCurrent"],
httpConnections : ["times", "clientConnections"],
totalTime : ["times", "avgQueueTime", "avgRequestTime", "avgIoTime"],
dataTransfer : ["times", "bytesSentPerSecond", "bytesReceivedPerSecond"],
requests : ["times", "getsPerSecond", "putsPerSecond", "postsPerSecond",
"deletesPerSecond", "patchesPerSecond", "headsPerSecond",
"optionsPerSecond", "othersPerSecond"],
requestsAsync : ["times", "asyncsPerSecond"]
requestsAsync : ["times", "asyncPerSecond"]
},
//colors for dygraphs
@ -104,13 +104,13 @@
axes: {
y: {
valueFormatter: function (y) {
return y.toPrecision(3);
return parseFloat(y.toPrecision(3));
},
axisLabelFormatter: function (y) {
if (y === 0) {
return 0;
}
return y.toPrecision(3);
return parseFloat(y.toPrecision(3));
}
}
}
@ -126,13 +126,13 @@
axes: {
y: {
valueFormatter: function (y) {
return y.toPrecision(3);
return parseFloat(y.toPrecision(3));
},
axisLabelFormatter: function (y) {
if (y === 0) {
return 0;
}
return y.toPrecision(3);
return parseFloat(y.toPrecision(3));
}
}
},
@ -229,7 +229,9 @@
showRangeSelector: true,
interactionModel: null,
showLabelsOnHighlight: true,
highlightCircleSize: 3
highlightCircleSize: 3,
legend : "always",
labelsDiv : document.getElementById("detailLegend")
}
);
if (figure === "pageFaults") {

View File

@ -8,6 +8,7 @@
<div class="modal-body">
</div>
<% if (!hideFooter) { %>
<div class="modal-footer">
<%
_.each(buttons, function(value, key){
@ -21,6 +22,7 @@
<button id="modalButton<%=key%>" class="button-<%=type%>" <%=disabled%>><%=title%></button>
<%});%>
</div>
<% } %>
<div class="alert alert-error modal-delete-confirmation" id="modal-delete-confirmation">
<strong>Really delete?</strong>
<button id="modal-confirm-delete" class="button-danger pull-right modal-confirm-delete">Yes</button>

View File

@ -1,3 +1,6 @@
<script id="modalGraph.ejs" type="text/template">
<div id="lineChartDetail" class="modalChartDetail"></div>
<div id="lineChartDetail" class="modalChartDetail"></div>
<div class="dashboard-detailLegend">
<div class="dashboard-legend-inner" id="detailLegend"></div>
</div>
</script>

View File

@ -9,7 +9,7 @@
<% } %>
<% var smallChart = function(name) { %>
<div class="dashboard-small-chart dashboard-chart" id="<%= name %>Container">
<div id="<%= name %>" class="dashboard-interior-chart">
<div id="<%= name %>" class="dashboard-interior-chart">
<svg></svg>
</div>
<div class="dashboard-legend">
@ -24,10 +24,14 @@
<div class="dashboard-subtitle-bar">current</div>
<div class="dashboard-subtitle-bar">15-min-avg</div>
<div class="dashboard-tendency">
<div class="dashboard-figure">
<span id="<%= name %>Current"></span>
</div>
</div>
<div class="dashboard-tendency">
<div class="dashboard-figure">
<span id="<%= name %>Average"></span>
</div>
</div>
</div>
<% } %>
@ -61,12 +65,12 @@
<div class="dashboard-tendency-chart dashboard-half-height-chart">
<% tendency("Number of threads", "numberOfThreads"); %>
</div>
<div class="dashboard-tendency-chart dashboard-half-height-chart">
<div class="dashboard-tendency-chart dashboard-half-height-chart dashboard-chart" id="residentSizeChartContainer">
<div class="dashboard-title-bar">Resident Size</div>
<div id="residentSizeChart">
<svg>
</svg>
<div class="residentSize">
<div class="dashboard-figure residentSize">
<span id="residentSizeTotal"></span>
</div>
</div>
@ -80,13 +84,13 @@
<div class="dashboard-half-title-bar">Major Page Faults</div>
<div class="dashboard-half-title-bar">System User Time in seconds</div>
</div>
<div class="dashboard-medium-chart dashboard-chart" id="<%= name %>Container">
<div class="dashboard-medium-chart dashboard-chart" id="pageFaultsChartContainer">
<div id="pageFaultsChart" class="dashboard-interior-chart"></div>
<div class="dashboard-legend">
<div class="dashboard-legend-inner" id="pageFaultsChartLegend"></div>
</div>
</div>
<div class="dashboard-medium-chart dashboard-chart" id="<%= name %>Container">
<div class="dashboard-medium-chart dashboard-chart" id="systemUserTimeChartContainer">
<div id="systemUserTimeChart" class="dashboard-interior-chart"></div>
<div class="dashboard-legend">
<div class="dashboard-legend-inner" id="systemUserTimeChartLegend"></div>

View File

@ -33,6 +33,7 @@
tableTemplate: templateEngine.createTemplate("modalTable.ejs"),
el: "#modalPlaceholder",
contentEl: "#modalContent",
hideFooter: false,
confirm: {
list: "#modal-delete-confirmation",
yes: "#modal-confirm-delete",
@ -168,7 +169,8 @@
};
},
show: function(templateName, title, buttons, tableContent, advancedContent) {
show: function(templateName, title, buttons, tableContent, advancedContent,
events) {
var self = this, lastBtn, closeButtonFound = false;
buttons = buttons || [];
// Insert close as second from right
@ -188,7 +190,8 @@
}
$(this.el).html(this.baseTemplate.render({
title: title,
buttons: buttons
buttons: buttons,
hideFooter: this.hideFooter
}));
_.each(buttons, function(b, i) {
if (b.disabled || !b.callback) {
@ -231,6 +234,9 @@
});
}
});//handle select2
if (events) {
this.delegateEvents(events);
}
$("#modal-dialog").modal("show");
},

View File

@ -7,7 +7,7 @@
window.newDashboardView = Backbone.View.extend({
el: '#content',
interval: 15000, // in milliseconds
interval: 10000, // in milliseconds
defaultFrame: 20 * 60 * 1000,
defaultDetailFrame: 14 * 24 * 60 * 60 * 1000,
history: {},
@ -44,50 +44,65 @@
"queueTimeDistributionPercent", "requestTimeDistributionPercent"
],
dataTransferDistribution: [
"bytesReceivedDistributionPercent", "bytesSentDistributionPercent"]
"bytesSentDistributionPercent", "bytesReceivedDistributionPercent"]
},
barChartsElementNames: {
queueTimeDistributionPercent: "Queue Time",
requestTimeDistributionPercent: "Request Time",
bytesReceivedDistributionPercent: "Bytes received",
bytesSentDistributionPercent: "Bytes sent"
bytesSentDistributionPercent: "Bytes sent",
bytesReceivedDistributionPercent: "Bytes received"
},
showDetail: function (e) {
var self = this;
console.log(e);
getDetailFigure : function (e) {
var figure = $(e.currentTarget).attr("id").replace(/ChartContainer/g, "");
figure = figure.replace(/DistributionContainer/g, "");
figure = figure.replace(/Container/g, "");
console.log(figure);
this.getStatistics(figure);
var options = this.dygraphConfig.getDetailChartConfig(figure);
if (figure === "asyncRequests") {
figure = "requestsAsync";
} else if (figure === "clientConnections") {
figure = "httpConnections";
}
return figure;
},
showDetail: function (e) {
var self = this,
figure = this.getDetailFigure(e), options;
this.getStatistics(figure);
this.detailGraphFigure = figure;
options = this.dygraphConfig.getDetailChartConfig(figure);
window.modalView.hideFooter = true;
window.modalView.show(
"modalGraph.ejs",
options.header,
[window.modalView.createCloseButton(
this.hidden.bind(this)
)
]
undefined,
undefined,
undefined,
this.events
);
options = this.dygraphConfig.getDetailChartConfig(figure);
window.modalView.hideFooter = false;
$('#modal-dialog').on('hidden', function () {
self.hidden();
});
$('.modal-body').css({"max-height": "90%" });
$('#modal-dialog').toggleClass("modalChartDetail", true);
$('#modal-body').toggleClass("modal-body", true);
var dimensions = self.getCurrentSize("#lineChartDetail");
options.height = dimensions.height;
options.width = dimensions.width;
self.detailGraph = new Dygraph(
options.height = dimensions.height * 0.85;
options.width = dimensions.width * 0.88;
this.detailGraph = new Dygraph(
document.getElementById("lineChartDetail"),
self.history[figure],
this.history[figure],
options
);
},
hidden: function () {
@ -137,7 +152,7 @@
this.prepareResidentSize();
this.updateTendencies();
Object.keys(this.graphs).forEach(function (f) {
self.updateLineChart(f);
self.updateLineChart(f, false);
});
},
@ -153,26 +168,24 @@
updateDateWindow: function (graph, isDetailChart) {
var t = new Date().getTime();
var borderLeft, borderRight;
/* if (isDetailChart) {
} else {
}
*/
return [new Date().getTime() - this.defaultFrame, new Date().getTime()];
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];
},
updateLineChart: function (figure, isDetailChart) {
var opts = {
var g = isDetailChart ? this.detailGraph : this.graphs[figure],
opts = {
file: this.history[figure],
dateWindow: this.updateDateWindow(isDetailChart)
dateWindow: this.updateDateWindow(g, isDetailChart)
};
if (isDetailChart) {
this.detailGraph.updateOptions(opts);
} else {
this.graphs[figure].updateOptions(opts);
}
g.updateOptions(opts);
},
mergeDygraphHistory: function (newData, i) {
@ -305,7 +318,6 @@
{async: false}
).done(
function (d) {
console.log("got result", d);
self.mergeHistory(d, !!figure);
}
);
@ -313,19 +325,26 @@
},
prepareResidentSize: function () {
var dimensions = this.getCurrentSize('#residentSizeChart'),
var dimensions = this.getCurrentSize('#residentSizeChartContainer'),
self = this;
nv.addGraph(function () {
var chart = nv.models.multiBarHorizontalChart()
.width(dimensions.width * 0.3)
.height(dimensions.height)
/*.width(dimensions.width * 0.3)
.height(dimensions.height)*/
.x(function (d) {
return d.label;
})
.y(function (d) {
return d.value;
})
.margin({left: 80})
.width(dimensions.width)
.height(dimensions.height)
.margin({
//top: dimensions.height / 8,
right: dimensions.width / 10
//bottom: dimensions.height / 22,
//left: dimensions.width / 6*/
})
.showValues(true)
.showYAxis(true)
.showXAxis(false)
@ -335,18 +354,13 @@
.stacked(true)
.showControls(false);
chart.yAxis
.tickFormat(function (d) {return d + "%";});
chart.xAxis.showMaxMin(false);
chart.yAxis.showMaxMin(false);
d3.select('#residentSizeChart svg')
.datum(self.history.residentSizeChart)
.call(chart)
.append("text")
.attr("x", 20)
.attr("y", 16)
.style("font-size", "20px")
.style("font-weight", 400)
.style("font-family", "Open Sans");
.call(chart);
nv.utils.windowResize(chart.update);
});
$("#residentSizeTotal").text(
@ -356,17 +370,16 @@
prepareD3Charts: function () {
//distribution bar charts
var v, self = this, barCharts = {
totalTimeDistribution: [
"queueTimeDistributionPercent", "requestTimeDistributionPercent"],
dataTransferDistribution: [
"bytesReceivedDistributionPercent", "bytesSentDistributionPercent"]
"bytesSentDistributionPercent", "bytesReceivedDistributionPercent"]
};
_.each(Object.keys(barCharts), function (k) {
var dimensions = self.getCurrentSize('#' + k + 'Container svg');
nv.addGraph(function () {
console.log('#' + k + ' svg');
var chart = nv.models.multiBarHorizontalChart()
.x(function (d) {
return d.label;
@ -374,8 +387,14 @@
.y(function (d) {
return d.value;
})
//.margin({top: 30, right: 20, bottom: 50, left: 175})
.margin({left: 80})
.width(dimensions.width)
.height(dimensions.height)
.margin({
top: dimensions.height / 8,
right: dimensions.width / 35,
bottom: dimensions.height / 22,
left: dimensions.width / 6
})
.showValues(false)
.showYAxis(true)
.showXAxis(true)
@ -384,27 +403,25 @@
.showLegend(false)
.showControls(false);
/*chart.yAxis
.tickFormat(d3.format(',.2f'));*/
/**/
/**/
chart.xAxis.showMaxMin(false);
chart.yAxis.showMaxMin(false);
/*chart.xAxis
.tickFormat(d3.format(',.2f'));*/
chart.yAxis
.tickFormat(function (d) {return Math.round(d* 100 * 100) / 100 + "%";});
d3.select('#' + k + 'Container svg')
.datum(self.history[k])
.call(chart)
.append("text")
.attr("x", 20)
.attr("y", 16)
.style("font-size", "20px")
.style("font-weight", 400)
.style("font-family", "Open Sans")
.text("Distribution");
.call(chart);
nv.utils.windowResize(chart.update);
if ($('#' + k + "Legend")[0].children.length === 0) {
d3.select('#' + k + 'Container svg')
.append("text")
.attr("x", dimensions.width * 0.6)
.attr("y", dimensions.height / 12)
.style("font-size", dimensions.height / 12 + "px")
.style("font-weight", 400)
.classed("distributionHeader", true)
.style("font-family", "Open Sans")
.text("Distribution");
var v1 = self.history[k][0].key;
var v2 = self.history[k][1].key;
$('#' + k + "Legend").append(
@ -430,6 +447,7 @@
},
stopUpdating: function () {
console.log("stoping any update");
this.isUpdating = false;
},
@ -441,6 +459,11 @@
self.isUpdating = true;
self.timer = window.setInterval(function () {
self.getStatistics();
if (self.isUpdating === false) {
console.log("no chart rendering");
return;
}
console.log("chart rendering");
self.updateCharts();
},
self.interval
@ -455,6 +478,7 @@
dimensions = self.getCurrentSize(g.maindiv_.id);
g.resize(dimensions.width, dimensions.height);
});
this.prepareD3Charts();
},
template: templateEngine.createTemplate("newDashboardView.ejs"),

View File

@ -116,9 +116,10 @@
}
.modalChartDetail {
height: 570px;
margin-left: 0;
width: 70%;
height: 500px;
position: fixed;
padding-left: 10px;
width: 90%;
}
.modal {

View File

@ -5,6 +5,7 @@ $dashboard-padding: 28px;
@extend %pull-left;
border-left: 1px solid $c-black;
margin-left: -1px;
cursor:pointer;
&:first-child {
border-left: 0;
@ -12,6 +13,9 @@ $dashboard-padding: 28px;
}
}
.detailChart {
@extend %pull-left;
}
.dashboard-interior-chart {
@extend %pull-left;
height: $dashboard-height - $dashboard-padding;
@ -51,9 +55,25 @@ $dashboard-padding: 28px;
.dashboard-legend-inner {
padding-top: 20px;
padding-left: 20px;
}
}
.dashboard-detailLegend {
@extend %pull-left;
height: $dashboard-height;
width: $legend-width;
position: fixed;
left: 90%;
top: 40%;
.dashboard-legend-inner {
padding-top: 20px;
padding-left: 20px;
}
}
.dashboard-half-height-legend {
@extend %pull-left;
height: $dashboard-height / 2;
@ -120,9 +140,8 @@ $dashboard-padding: 28px;
@extend %dashboard-chart-box;
font-size: 25px;
height: ($dashboard-height + $dashboard-padding) / 2 - 36px - 36px - 2px;
position: relative;
text-align: center;
top: 15%;
text-align: center;
width: 50%;
}
@ -133,3 +152,11 @@ $dashboard-padding: 28px;
margin-left: -1px;
margin-right: -1px;
}
.dashboard-figure {
@extend %pull-left;
margin-bottom: 10%;
margin-top: 7%;
margin-left: 19%;
text-align: center;
}

View File

@ -1369,7 +1369,7 @@ textarea,
.fa-plus-square-o:before {
content: "\f196"; }
ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency, .dashboard-interior-chart, .dashboard-legend, .dashboard-half-height-legend, .dashboard-title-bar .dashboard-half-title-bar, .dashboardModal, .pagination-line li a {
ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency, .detailChart, .dashboard-interior-chart, .dashboard-legend, .dashboard-detailLegend, .dashboard-half-height-legend, .dashboard-title-bar .dashboard-half-title-bar, .dashboard-figure, .dashboardModal, .pagination-line li a {
float: left; }
div.navmenu, div.footer-right, div.footer-right p, ul.headerButtonList li, div .tile div.iconSet span, div .bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .query-button, .arango-tab li, .show-save-state, div.gv_colour_list, .docsThirdCol {
@ -2733,9 +2733,10 @@ div.breadcrumb a.disabledBread {
opacity: .4; }
.modalChartDetail {
height: 570px;
margin-left: 0;
width: 70%; }
height: 500px;
position: fixed;
padding-left: 10px;
width: 90%; }
.modal {
border-radius: 0 !important; }
@ -3006,7 +3007,8 @@ pre.gv-object-view {
.dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency {
border-left: 1px solid black;
margin-left: -1px; }
margin-left: -1px;
cursor: pointer; }
.dashboard-large-chart:first-child, .dashboard-medium-chart:first-child, .dashboard-small-chart:first-child, .dashboard-tendency-chart:first-child, .dashboard-subtitle-bar:first-child, .dashboard-tendency:first-child {
border-left: 0;
margin-left: 0; }
@ -3033,7 +3035,18 @@ pre.gv-object-view {
height: 250px;
width: 200px; }
.dashboard-legend .dashboard-legend-inner {
padding-top: 20px; }
padding-top: 20px;
padding-left: 20px; }
.dashboard-detailLegend {
height: 250px;
width: 200px;
position: fixed;
left: 90%;
top: 40%; }
.dashboard-detailLegend .dashboard-legend-inner {
padding-top: 20px;
padding-left: 20px; }
.dashboard-half-height-legend {
height: 125px;
@ -3080,12 +3093,11 @@ pre.gv-object-view {
width: 50%; }
.dashboard-tendency {
height: 65px;
width: 50%;
text-align: center;
font-size: 25px;
position: relative;
top: 15%; }
height: 65px;
top: 15%;
text-align: center;
width: 50%; }
.dashboard-row {
border: 1px solid black;
@ -3093,6 +3105,12 @@ pre.gv-object-view {
margin-left: -1px;
margin-right: -1px; }
.dashboard-figure {
margin-bottom: 10%;
margin-top: 7%;
margin-left: 19%;
text-align: center; }
.dashboardModal {
-moz-border-radius: 8px !important;
-webkit-border-radius: 8px !important;