src/ceph/src/pybind/mgr/dashboard/osd_perf.html

   1 {% extends "base.html" %}
   2
   3 {% block content %}
   4
   5 <script>
   6         $(document).ready(function(){
   7             // Pre-populated initial data at page load
   8             var content_data = {{ content_data }};
   9
  10             var hexdigits = function(v) {
  11                 var i = Math.floor(v * 255);
  12                 if (Math.floor(i) < 0x10) {
  13                     return "0" + Math.floor(i).toString(16);
  14                 } else {
  15                     return Math.floor(i).toString(16);
  16                 }
  17             };
  18
  19             var hexcolor = function(r, g, b) {
  20                 return "#" + hexdigits(r) + hexdigits(g) + hexdigits(b);
  21             };
  22
  23             var last = {};
  24
  25             var render = function(element, counter) {
  26                 var data = content_data.osd_histogram.osd[counter];
  27                 var hist_table = $(element);
  28                 hist_table.empty();
  29
  30                 var sum = 0.0;
  31                 var max = 0.0;
  32                 $.each(data.values, function(i, row) {
  33                     $.each(row, function(j, col) {
  34                         var val;
  35                         if (!last[counter]) {
  36                             val = col;
  37                         } else {
  38                             val = col - last[counter][i][j];
  39                         }
  40                         sum += val;
  41                         max = Math.max(max, val);
  42                     });
  43                 });
  44
  45
  46                 $.each(data.values, function(i, row) {
  47                     var tr = $("<tr style='height: 10px;'></tr>").appendTo(hist_table);
  48                     $.each(row, function(j, col) {
  49                         var td = $("<td style='width: 10px; height: 10px;'></td>").appendTo(tr);
  50                         var val;
  51                         if (!last[counter]) {
  52                             val = col;
  53                         } else {
  54                             val = col - last[counter][i][j];
  55                         }
  56
  57
  58                         var g;
  59                         if (max) {
  60                             g = (val / max);
  61                         } else {
  62                             g = 0.0;
  63                         }
  64                         var r = 1.0 - g;
  65                         var b = 0.0;
  66
  67                         td.css("background-color", hexcolor(r, g, b));
  68                     });
  69                 });
  70
  71                 last[counter] = data.values;
  72             };
  73
  74             var post_load = function() {
  75                 content_data.osd_metadata_list = [];
  76                 content_data.osd_list = [];
  77                 _.each(content_data.osd_metadata, function(v, k) {
  78                     content_data.osd_metadata_list.push({
  79                         key: k,
  80                         value: v
  81                     });
  82                 });
  83                 _.each(content_data.osd, function(v, k) {
  84                     content_data.osd_list.push({
  85                         key: k,
  86                         value: v
  87                     });
  88                 });
  89                 render("#heatmap_write",
  90                         "op_w_latency_in_bytes_histogram");
  91                 render("#heatmap_read",
  92                         "op_r_latency_out_bytes_histogram");
  93             };
  94
  95             rivets.bind($("div#content"), content_data);
  96             post_load();
  97
  98             var refresh = function() {
  99                 $.get("{{ url_prefix }}/osd/perf_data/" + content_data.osd.osd  + "/", function(data) {
 100                     _.extend(content_data.osd_histogram, data.osd_histogram);
 101                     _.extend(content_data.osd, data.osd);
 102                     _.extend(content_data.osd_metadata, data.osd_metadata);
 103
 104                     post_load();
 105                     setTimeout(refresh, 3000);
 106                 });
 107             };
 108
 109             // Wait 1s to load irrespective of normal frequency,
 110             // to promptly load our first delta
 111             setTimeout(refresh, 1000);
 112         });
 113 </script>
 114
 115
 116 <section class="content-header">
 117     <h1>
 118         osd.{osd.osd}
 119     </h1>
 120 </section>
 121
 122 <section class="content">
 123
 124     <table>
 125         <tr>
 126             <td>
 127                 <h3>Writes</h3>
 128                 <table id="heatmap_write">
 129                 </table>
 130             </td><td>&nbsp;</td><td>
 131                 <h3>Reads</h3>
 132                 <table id="heatmap_read">
 133                 </table>
 134             </td>
 135         </tr>
 136     </table>
 137
 138 <div class="box">
 139     <div class="box-header">
 140         <h3 class="box-title">Attributes (OSD map)</h3>
 141     </div>
 142     <div class="box-body">
 143         <table>
 144             <thead>
 145             <tr>
 146                 <th>Key</th>
 147                 <th>Value</th>
 148             </tr>
 149             </thead>
 150             <tbody>
 151             <tr rv-each-item="osd_list">
 152                 <td>{item.key}</td>
 153                 <td>{item.value}</td>
 154             </tr>
 155             </tbody>
 156         </table>
 157     </div>
 158 </div>
 159
 160 <div class="box">
 161     <div class="box-header">
 162         <h3 class="box-title">Metadata</h3>
 163     </div>
 164     <div class="box-body">
 165         <table>
 166             <thead>
 167             <tr>
 168                 <th>Key</th>
 169                 <th>Value</th>
 170             </tr>
 171             </thead>
 172             <tbody>
 173             <tr rv-each-meta_item="osd_metadata_list">
 174                 <td>{meta_item.key}</td>
 175                 <td>{meta_item.value}</td>
 176             </tr>
 177             </tbody>
 178         </table>
 179     </div>
 180 </div>
 181
 182
 183 </section>
 184 <!-- /.content -->
 185
 186 {% endblock %}