Limit number of merics in prometheus UI (#5139)

Signed-off-by: Vishnunarayan K I <appukuttancr@gmail.com>

web/ui/static/css/graph.css

@@ -138,7 +138,7 @@ input[name="end_input"], input[name="range_input"] {
   margin-right: -1px;
 }
 
-.error {
+.error, .warning {
   padding: 5px;
   margin: 2px;
 }
@@ -196,3 +196,8 @@ input[name="end_input"], input[name="range_input"] {
   background-color: #222222;
   border-radius: 0;
 }
+
+ul.typeahead.dropdown-menu {
+  max-height: 400px;
+  overflow: auto;
+}

web/ui/static/js/graph/graph_template.handlebar

@@ -20,6 +20,7 @@
             <div class="row">
               <div class="col-lg-12">
                 <div class="error alert alert-danger"></div>
+                <div class="warning alert alert-warning"></div>
               </div>
             </div>
 

web/ui/static/js/graph/index.js

@@ -107,6 +107,7 @@ Prometheus.Graph.prototype.initialize = function() {
   })
 
   self.error = graphWrapper.find(".error").hide();
+  self.warning = graphWrapper.find(".warning").hide();
   self.graphArea = graphWrapper.find(".graph_area");
   self.graph = self.graphArea.find(".graph");
   self.yAxis = self.graphArea.find(".y_axis");
@@ -151,7 +152,7 @@ Prometheus.Graph.prototype.initialize = function() {
     self.moment.data('DateTimePicker').date(date);
   } else if (self.options.moment_input) {
     self.moment.data('DateTimePicker').date(self.options.moment_input);
-  } 
+  }
   self.moment.on("dp.change", function() { self.submitQuery(); });
 
 
@@ -237,7 +238,7 @@ Prometheus.Graph.prototype.checkTimeDrift = function() {
             var diff = Math.abs(browserTime - serverTime);
 
             if (diff >= 30) {
-              $("#graph_wrapper0").prepend(
+              this.showWarning(
                   "<div class=\"alert alert-warning\"><strong>Warning!</strong> Detected " +
                   diff.toFixed(2) +
                   " seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.</div>"
@@ -286,7 +287,7 @@ Prometheus.Graph.prototype.initTypeahead = function(self) {
   self.expr.typeahead({
     autoSelect: false,
     source: source,
-    items: "all",
+    items: 1000,
     matcher: function (item) {
       // If we have result for current query, skip
       if (self.fuzzyResult.query !== this.query) {
@@ -462,6 +463,7 @@ Prometheus.Graph.prototype.decreaseMoment = function() {
 Prometheus.Graph.prototype.submitQuery = function() {
   var self = this;
   self.clearError();
+  self.clearWarning();
   if (!self.expr.val()) {
     return;
   }
@@ -546,12 +548,24 @@ Prometheus.Graph.prototype.showError = function(msg) {
   self.error.show();
 };
 
-Prometheus.Graph.prototype.clearError = function(msg) {
+Prometheus.Graph.prototype.clearError = function() {
   var self = this;
   self.error.text('');
   self.error.hide();
 };
 
+Prometheus.Graph.prototype.showWarning = function(msg) {
+  var self = this;
+  self.warning.html(msg);
+  self.warning.show();
+};
+
+Prometheus.Graph.prototype.clearWarning = function() {
+  var self = this;
+  self.warning.html('');
+  self.warning.hide();
+};
+
 Prometheus.Graph.prototype.updateRefresh = function() {
   var self = this;
 
@@ -803,6 +817,7 @@ Prometheus.Graph.prototype.handleConsoleResponse = function(data, textStatus) {
       tBody.append("<tr><td colspan='2'><i>no data</i></td></tr>");
       return;
     }
+    data.result = self.limitSeries(data.result);
     for (var i = 0; i < data.result.length; i++) {
       var s = data.result[i];
       var tsName = self.metricToTsName(s.metric);
@@ -814,6 +829,7 @@ Prometheus.Graph.prototype.handleConsoleResponse = function(data, textStatus) {
       tBody.append("<tr><td colspan='2'><i>no data</i></td></tr>");
       return;
     }
+    data.result = self.limitSeries(data.result);
     for (var i = 0; i < data.result.length; i++) {
       var v = data.result[i];
       var tsName = self.metricToTsName(v.metric);
@@ -887,6 +903,20 @@ Prometheus.Graph.prototype.formatKMBT = function(y) {
   }
 }
 
+Prometheus.Graph.prototype.limitSeries = function(result) {
+  var self = this;
+  var MAX_SERIES_NUM = 10000;
+  var message = "<strong>Warning!</strong> Fetched " +
+    result.length + " series, but displaying only first " +
+    MAX_SERIES_NUM + ".";
+
+  if (result.length > MAX_SERIES_NUM) {
+    self.showWarning(message);
+    return result.splice(0, MAX_SERIES_NUM);
+  }
+  return result;
+}
+
 /**
  * Page
 */