|
|
@@ -34,8 +34,9 @@
|
|
|
|
|
|
<script type="text/html" id="performance-graph-template">
|
|
|
<div style="position: relative" data-bind="template: { afterRender: componentRendered }">
|
|
|
- <h3>${ _('Resources') }</h3>
|
|
|
- <div class="performance-graph" data-bind="style: { height: graphHeight + 'px', width: graphWidth + 'px' }"></div>
|
|
|
+ <h3 style="float: left;">${ _('Resources') }</h3>
|
|
|
+ <div style="padding-top: 22px; float: right;" data-bind="foreach: availableGranularities"><a class="margin-right-20" href="javascript: void(0);" data-bind="text: label, click: function () { $parent.selectedGranularity($data); }"></a></div>
|
|
|
+ <div style="clear: both;" class="performance-graph" data-bind="style: { height: graphHeight + 'px', width: graphWidth + 'px' }"></div>
|
|
|
</div>
|
|
|
</script>
|
|
|
|
|
|
@@ -51,13 +52,29 @@
|
|
|
self.data;
|
|
|
self.graphElement;
|
|
|
|
|
|
- // Load the initial data
|
|
|
- self.startTime = Date.now() - 1000 * 60 * 60 * 8; // 7 days
|
|
|
- self.endTime = Date.now();
|
|
|
- self.initialWindow = 1000 * 60 * 60 * 0.5;
|
|
|
- var points = 1000; //Math.round((endTime - startTime) / 36000); // 1 hour precision
|
|
|
- var initialLoadPromise = self.loadData(self.startTime, self.endTime, points);
|
|
|
+ self.availableGranularities = [{
|
|
|
+ label: '${ _("1 hour") }',
|
|
|
+ totalTime: 1000 * 60 * 60,
|
|
|
+ initialWindow: 1000 * 60 * 10,
|
|
|
+ points: 720 // 5 seconds
|
|
|
+ }, {
|
|
|
+ label: '${ _("8 hours") }',
|
|
|
+ totalTime: 1000 * 60 * 60 * 8,
|
|
|
+ initialWindow: 1000 * 60 * 60 * 2,
|
|
|
+ points: 1920 // 15 seconds
|
|
|
+ }, {
|
|
|
+ label: '${ _("1 week") }',
|
|
|
+ totalTime: 1000 * 60 * 60 * 24 * 7,
|
|
|
+ initialWindow: 1000 * 60 * 60 * 24,
|
|
|
+ points: 2016 // Every 5 minutes
|
|
|
+ }];
|
|
|
+
|
|
|
+ self.selectedGranularity = ko.observable(self.availableGranularities[1]);
|
|
|
|
|
|
+ // Load the initial data
|
|
|
+ var now = Date.now();
|
|
|
+ var initialLoadPromise = self.loadData(now - self.selectedGranularity().totalTime, now, self.selectedGranularity().points);
|
|
|
+ self.appendTimeout = -1;
|
|
|
|
|
|
self.componentRendered = function (elements) {
|
|
|
elements.some(function (element) {
|
|
|
@@ -68,6 +85,13 @@
|
|
|
});
|
|
|
initialLoadPromise.done(function () {
|
|
|
self.redrawGraph();
|
|
|
+ self.selectedGranularity.subscribe(function (granularity) {
|
|
|
+ window.clearTimeout(self.appendTimeout);
|
|
|
+ self.data = undefined;
|
|
|
+ self.loadData(now - granularity.totalTime, now, granularity.points).done(function () {
|
|
|
+ self.redrawGraph();
|
|
|
+ });
|
|
|
+ });
|
|
|
})
|
|
|
};
|
|
|
}
|
|
|
@@ -120,6 +144,7 @@
|
|
|
subPercentageYScale.domain(percentageYScale.domain());
|
|
|
subQueryYScale.domain(queryYScale.domain());
|
|
|
|
|
|
+ d3.select(self.graphElement).select('svg').remove();
|
|
|
|
|
|
// Draw the graphs
|
|
|
var svg = d3.select(self.graphElement)
|
|
|
@@ -319,7 +344,6 @@
|
|
|
})
|
|
|
];
|
|
|
|
|
|
-
|
|
|
// Draw the axes
|
|
|
mainGroup.append('g')
|
|
|
.attr('class', 'main-axis main-axis-x')
|
|
|
@@ -358,7 +382,7 @@
|
|
|
subGroup.append('g')
|
|
|
.attr('class', 'brush')
|
|
|
.call(brush)
|
|
|
- .call(brush.move, [mainXScale(self.endTime - self.initialWindow), mainXScale(self.endTime)]);
|
|
|
+ .call(brush.move, [mainXScale(self.data[self.data.length - 1][0] - self.selectedGranularity().initialWindow), mainXScale(self.data[self.data.length - 1][0])]);
|
|
|
|
|
|
// TODO: Custom handles
|
|
|
|
|
|
@@ -462,14 +486,14 @@
|
|
|
});
|
|
|
|
|
|
// Fetch and append data at set interval
|
|
|
-
|
|
|
- var appendInterval = 1000;
|
|
|
- var appendPoints = 1;
|
|
|
var appendData = function () {
|
|
|
var currentDomain = mainXScale.domain();
|
|
|
var currentSubDomain = subXScale.domain();
|
|
|
|
|
|
- self.loadData(self.data[self.data.length - 1][0], Date.now(), appendPoints).done(function () {
|
|
|
+ var timeBetweenPoints = self.data[1][0] - self.data[0][0];
|
|
|
+ var startTime = self.data[self.data.length - 1][0];
|
|
|
+ var endTime = startTime + timeBetweenPoints;
|
|
|
+ self.loadData(startTime, endTime, 1).done(function () {
|
|
|
var mainStart = currentDomain[0].getTime() !== currentSubDomain[0].getTime() ? currentDomain[0] : self.data[0][0];
|
|
|
var mainEnd = currentDomain[1].getTime() !== currentSubDomain[1].getTime() ? currentDomain[1] : self.data[self.data.length - 1][0];
|
|
|
mainXScale.domain([mainStart, mainEnd]);
|
|
|
@@ -488,10 +512,10 @@
|
|
|
mainGroup.select('.main-axis-x').call(mainXAxis);
|
|
|
subGroup.select('.brush').call(brush);
|
|
|
|
|
|
- self.appendTimeout = window.setTimeout(appendData, appendInterval);
|
|
|
+ self.appendTimeout = window.setTimeout(appendData, self.selectedGranularity().totalTime / self.selectedGranularity().points);
|
|
|
});
|
|
|
};
|
|
|
- self.appendTimeout = window.setTimeout(appendData, appendInterval);
|
|
|
+ self.appendTimeout = window.setTimeout(appendData, self.selectedGranularity().totalTime / self.selectedGranularity().points);
|
|
|
};
|
|
|
|
|
|
PerformanceGraph.prototype.loadData = function (startTime, endTime, points) {
|