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