www: fix metrics.html

It broke when we added metric entities over four years ago. If you want to see what it looked like, there's a screenshot[1] from commit 6384f42. Fixing it is easy enough, and Andrew thinks it's interesting enough to preserve. 1. http://cloudera-todd.s3.amazonaws.com/charts.png Change-Id: I892febb19638724dcc6d2e278a38c0e8b23930e9 Reviewed-on: http://gerrit.cloudera.org:8080/14570 Tested-by: Kudu Jenkins Reviewed-by: Andrew Wong <[email protected]> Reviewed-by: Alexey Serbin <[email protected]>
prabhav-thali · Oct 31, 2019 · 63412be · 63412be
1 parent 232c5a9
commit 63412be
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 67 deletions.
diff --git a/www/metrics-epoch.js b/www/metrics-epoch.js
@@ -48,9 +48,11 @@ function urlParams() {
 }
 
 function makeMetricsUri(url_params) {
-  var BASE_METRICS_URI = "/jsonmetricz";
+  var BASE_METRICS_URI = "/metrics";
 
-  url_params['detailed_metrics'] = '*';
+  url_params['compact'] = 'true';
+  url_params['include_raw_histograms'] = 'true';
+  url_params['include_schema'] = 'true';
 
   var components = [];
   for (var key in url_params) {
@@ -132,78 +134,82 @@ function updateCharts(json, error) {
   var delta_time = now - last_update;
   var extra = {};
 
-  json['metrics'].forEach(function(m) {
-    var extra = m;
-    var name = m['name'];
-    var type = m['type'];
-    var unit = m['unit'];
-    var label = m['description'];
-
-    var data =  { 'time': now / 1000 };
-
-    var first_run = false;
-    if (!(name in charts)) {
-      first_run = true;
-      last_value[name] = 0;
-    }
-
-    // For counters, we display a rate
-    if (type == "counter") {
-      label += "<br>(shown: rate in " + unit + " / second)";
-      var cur_value = m['value'];
-      if (first_run) {
-        last_value[name] = cur_value;
-        // display value is 0 to start
-      } else {
-        var delta_value = cur_value - last_value[name];
-        last_value[name] = cur_value;
-        var rate = delta_value / delta_time * 1000;
-
-        data['y'] = rate;
+  json.forEach(function(e) {
+    var entity_type = e['type'];
+    var entity_id = e['id'];
+    e["metrics"].forEach(function(m) {
+      var extra = m;
+      var name = entity_type + "_" + entity_id + "_" + m['name'];
+      var type = m['type'];
+      var unit = m['unit'];
+      var label = m['description'];
+
+      var data =  { 'time': now / 1000 };
+
+      var first_run = false;
+      if (!(name in charts)) {
+        first_run = true;
+        last_value[name] = 0;
       }
 
-    // For charts, we simply display the value.
-    } else if (type == "gauge") {
-      data['y'] = m['value'];
+      // For counters, we display a rate
+      if (type == "counter") {
+        label += "<br>(shown: rate in " + unit + " / second)";
+        var cur_value = m['value'];
+        if (first_run) {
+          last_value[name] = cur_value;
+          // display value is 0 to start
+        } else {
+          var delta_value = cur_value - last_value[name];
+          last_value[name] = cur_value;
+          var rate = delta_value / delta_time * 1000;
+
+          data['y'] = rate;
+        }
 
-    } else if (type == "histogram") {
-      // For histograms, we display a heat map
+        // For charts, we simply display the value.
+      } else if (type == "gauge") {
+        data['y'] = m['value'];
 
-      if (first_run) {
-        last_value[name] = {};
-      }
+      } else if (type == "histogram") {
+        // For histograms, we display a heat map
 
-      var values = m['values'];
-      var counts = m['counts'];
-      if (! values) { values = []; }
-      if (! counts) { counts = []; }
-      var hist = {};
-      var prev = last_value[name];
-      for (var i = 0; i < values.length; i++) {
-        var value = values[i];
-        var count = counts[i];
-        hist[value] = count;
-      }
-      last_value[name] = $.extend({}, hist);
+        if (first_run) {
+          last_value[name] = {};
+        }
 
-      for (value in hist) {
-        if (value in prev) {
-          hist[value] -= prev[value];
+        var values = m['values'];
+        var counts = m['counts'];
+        if (! values) { values = []; }
+        if (! counts) { counts = []; }
+        var hist = {};
+        var prev = last_value[name];
+        for (var i = 0; i < values.length; i++) {
+          var value = values[i];
+          var count = counts[i];
+          hist[value] = count;
+        }
+        last_value[name] = $.extend({}, hist);
+
+        for (value in hist) {
+          if (value in prev) {
+            hist[value] -= prev[value];
+          }
+        }
+        data['histogram'] = hist;
+      } else {
+        // For non-special-cased stuff just print the value field as well, if available.
+        if ("value" in m) {
+          data['y'] = m['value'];
         }
       }
-      data['histogram'] = hist;
-    } else {
-      // For non-special-cased stuff just print the value field as well, if available.
-      if ("value" in m) {
-        data['y'] = m['value'];
-      }
-    }
 
-    if (first_run) {
-      createChart(name, label, type, data, extra);
-    } else {
-      charts[name].push([data]);
-    }
+      if (first_run) {
+        createChart(name, label, type, data, extra);
+      } else {
+        charts[name].push([data]);
+      }
+    });
   });
 
   last_update = now;

diff --git a/www/metrics.html b/www/metrics.html
@@ -19,7 +19,7 @@
     <title>Kudu metrics gauges</title>
     <link rel="stylesheet" type="text/css" href="epoch.0.5.2.min.css" />
 
-    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
+    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
     <script type="text/javascript" src="d3.v2.js"></script>
     <script type="text/javascript" src="epoch.0.5.2.min.js"></script>
     <script type="text/javascript" src="metrics-epoch.js"></script>
@@ -29,4 +29,4 @@
     <div id='metrics'>
     </div>
   </body>
-</html>
+</html>