Merge pull request kubernetes-retired#2793 from porridge/split

Automatic merge from submit-queue.

Add a way to trim outliers.

This is important for graphs where outliers are more than an order of
magnitude higher than the baseline, and as a result make the whole graph
useless.

/cc @shyamjvs

perfdash/www/angular-chart.js

@@ -234,7 +234,7 @@
           var activePoints = atEvent.call(chart, evt);
           if (triggerOnlyOnChange === false || angular.equals(lastState, activePoints) === false) {
             lastState = activePoints;
-            scope[action](activePoints, evt);
+            scope[action](activePoints, evt, chart);
             scope.$apply();
           }
         }

perfdash/www/index.html

@@ -35,6 +35,9 @@ <h1 class="md-display-2">Performance Dashboard</h1>
                 chart-series="controller.series" chart-click="controller.onClick">
         </canvas>
       </div>
+      <p style="font-size: x-small; font-style: italic">
+        Click a data point to see build logs. CTRL+click anywhere to trim outliers.
+      </p>
       <!-- Angular Material Dependencies -->
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>

perfdash/www/script.js

@@ -21,10 +21,18 @@ var PerfDashApp = function(http, scope) {
     this.scope = scope;
     this.testNames = [];
     this.onClick = this.onClickInternal_.bind(this);
+    this.cap = 0;
 };
 
-PerfDashApp.prototype.onClickInternal_ = function(data) {
-    console.log(data);
+
+PerfDashApp.prototype.onClickInternal_ = function(data, evt, chart) {
+    console.log(this, data, evt, chart);
+    if (evt.ctrlKey) {
+      this.cap = (chart.scale.min + chart.scale.max) / 2;
+      this.labelChanged();
+      return;
+    }
+
     // Get location
     // TODO(random-liu): Make the URL configurable if we want to support more
     // buckets in the future.
@@ -66,6 +74,7 @@ PerfDashApp.prototype.labelChanged = function() {
         this.seriesData.push(this.getStream(result, name));
         this.series.push(name);
     }, this);
+    this.cap = 0;
 };
 
 // Update the data to graph, using the selected testName
@@ -135,8 +144,12 @@ PerfDashApp.prototype.getData = function(labels) {
 PerfDashApp.prototype.getStream = function(data, stream) {
     var result = [];
     angular.forEach(data, function(value) {
-        result.push(value.data[stream]);
-    });
+        var x = value.data[stream];
+        if (this.cap != 0 && x > this.cap) {
+          x = this.cap;
+        }
+        result.push(x);
+    }, this);
     return result;
 };