Bläddra i källkod

HUE-8649 [frontend] Add granularity options to the performance graph

Johan Ahlen 7 år sedan
förälder
incheckning
1084ac8c38

+ 40 - 16
desktop/core/src/desktop/templates/ko_components/ko_performance_graph.mako

@@ -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) {