ceph/src/pybind/mgr/dashboard/filesystem.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 refresh = function() {
  11                 $.get("/filesystem_data/" + content_data.fs_status.filesystem.id  + "/", function(data) {
  12                     _.extend(content_data.fs_status, data);
  13                     setTimeout(refresh, 5000);
  14                 });
  15             };
  16
  17             // Generate a "width: xx%" style string for use with a progress
  18             // bar element showing a pool's used space.
  19             rivets.formatters.pool_size_bar = function(pool){
  20                 var ratio = pool.used / pool.avail;
  21
  22                 return "width: " + Math.round(ratio * 100).toString() + "%";
  23             };
  24
  25             rivets.bind($("div#content"), content_data.fs_status);
  26             setTimeout(refresh, 5000);
  27
  28             // Convert ceph-mgr's time series format (list of 2-tuples
  29             // with seconds-since-epoch timestamps) into what chart.js
  30             // can handle (list of objects with millisecs-since-epoch
  31             // timestamps)
  32             var convert_timeseries = function(source_series)
  33             {
  34                 var data = [];
  35                 _.each(source_series, function(dp) {
  36                     data.push({
  37                         x: dp[0] * 1000,
  38                         y: dp[1]
  39                     });
  40                 });
  41
  42                 return data;
  43             };
  44
  45             var delta_timeseries = function(source_series)
  46             {
  47                 var i;
  48                 var prev = source_series[0];
  49                 var result = [];
  50                 for (i = 1; i < source_series.length; i++) {
  51                     var cur = source_series[i];
  52                     var tdelta = cur[0] - prev[0];
  53                     var vdelta = cur[1] - prev[1];
  54                     var rate = vdelta / tdelta;
  55
  56                     result.push({
  57                         x: cur[0] * 1000,
  58                         y: rate
  59                     });
  60
  61                     prev = cur;
  62                 }
  63                 return result;
  64             };
  65
  66             var charts = {};
  67
  68             var lhs_counter = 'mds.inodes';
  69             var lhs_transform = convert_timeseries;
  70             var rhs_counter = "mds_server.handle_client_request";
  71             var rhs_transform = delta_timeseries;
  72
  73             var draw_chart = function() {
  74                 $.get("/mds_counters/" + content_data.fs_status.filesystem.id  + "/", function(data) {
  75                     var top_chart = true;
  76
  77                     // Cull any chart elements that correspond to MDSs no
  78                     // longer present in the data
  79                     var existing_mds_names = {};
  80                     _.each(data, function(mds_data, mds_name) {
  81                         existing_mds_names[mds_name] = true;
  82                     });
  83
  84                     $("#mds_charts canvas").each(function(i, e) {
  85                         var el_mds_name = e.id.replace("mds_chart_", "");
  86                         if (existing_mds_names[el_mds_name] != true) {
  87                             e.remove();
  88                         }
  89                     });
  90
  91
  92                     _.each(data, function(mds_data, mds_name) {
  93                         if (! $("#mds_chart_" + mds_name).length) {
  94                             // Construct new chart
  95                             $("#mds_charts").append(
  96                                 $("<canvas height='64' id='mds_chart_" + mds_name + "'></canvas>")
  97                             );
  98
  99                             var ctx = $("#mds_chart_" + mds_name);
 100                             var lhs_data = lhs_transform(mds_data[lhs_counter]);
 101                             var rhs_data = rhs_transform(mds_data[rhs_counter]);
 102
 103                             var chartInstance = new Chart(ctx, {
 104                                 type: 'line',
 105                                 data: {
 106                                     datasets: [
 107                                         {
 108                                             label: lhs_counter,
 109                                             yAxisID: 'LHS',
 110                                             data: lhs_data,
 111                                             tension: 0.1,
 112                                             borderColor: "#dd2222",
 113
 114                                         },
 115                                         {
 116                                             label: rhs_counter,
 117                                             yAxisID: 'RHS',
 118                                             data: rhs_data,
 119                                             tension: 0.1,
 120                                             borderColor: "#2222dd",
 121                                         },
 122                                     ]
 123                                 },
 124                                 options: {
 125                                     legend: {
 126                                         position: 'top',
 127                                         display: top_chart,
 128                                         labels:{fontColor: "#ddd"}
 129                                     },
 130                                     scales: {
 131                                         xAxes: [{
 132                                             position: 'top',
 133                                             type: 'time',
 134                                             display: top_chart,
 135                                             ticks: {fontColor:"#ddd"},
 136                                             time: {
 137                                                 displayFormats: {
 138                                                     quarter: 'MMM YYYY'
 139                                                 }
 140                                             }
 141                                         }],
 142                                         yAxes: [{
 143                                             id: 'LHS',
 144                                             type: 'linear',
 145                                             position: 'left',
 146                                             ticks: {fontColor:"#ddd"},
 147                                             min: 0
 148                                         }, {
 149                                             id: 'RHS',
 150                                             type: 'linear',
 151                                             position: 'right',
 152                                             ticks: {fontColor:"#ddd"},
 153                                             min: 0
 154                                         }]
 155                                     }
 156                                 }
 157                             });
 158                             charts[mds_name] = chartInstance;
 159                         } else {
 160                             // Update existing chart
 161                             var chart = charts[mds_name];
 162                             var lhs_data = lhs_transform(mds_data[lhs_counter]);
 163                             var rhs_data = rhs_transform(mds_data[rhs_counter]);
 164                             chart.data.datasets[0].data = lhs_data;
 165                             chart.data.datasets[1].data = rhs_data;
 166                             chart.update(0);
 167                         };
 168
 169                         // FIXME: update the visibility of axes etc
 170                         // when charts come and go.
 171                         top_chart = false;
 172                     });
 173
 174                     setTimeout(draw_chart, 5000);
 175                 });
 176             };
 177
 178             // TODO periodic refresh
 179             draw_chart();
 180
 181         });
 182 </script>
 183
 184
 185 <section class="content-header">
 186     <h1>
 187         Filesystem {filesystem.name}
 188     </h1>
 189 </section>
 190
 191 <section class="content">
 192     <p style="font-size: 1.3em;">
 193         <i class="fa fa-desktop"></i>&nbsp;&nbsp;Clients: <span style="font-weight:bold;">{filesystem.client_count}</span>
 194         <a rv-href="filesystem.clients_url">Detail...</a>
 195     </p>
 196
 197     <div class="row">
 198         <div class="col-sm-6">
 199             <div class="box">
 200                 <div class="box-header">
 201                     <h3 class="box-title">Ranks</h3>
 202                 </div>
 203                 <div class="box-body">
 204                     <table class="table table-condensed">
 205                         <thead>
 206                         <tr>
 207                             <th>Rank</th>
 208                             <th>State</th>
 209                             <th>Daemon</th>
 210                             <th>Activity</th>
 211                             <th>Dentries</th>
 212                             <th>Inodes</th>
 213                         </tr>
 214                         </thead>
 215                         <tbody>
 216                         <tr rv-each-rank="filesystem.ranks">
 217                             <td>{rank.rank}</td>
 218                             <td>{rank.state}</td>
 219                             <td>{rank.mds}</td>
 220                             <td>{rank.activity}</td>
 221                             <td>{rank.dns | dimless}</td>
 222                             <td>{rank.inos | dimless}</td>
 223                         </tr>
 224                         </tbody>
 225                     </table>
 226                 </div>
 227             </div>
 228         </div>
 229         <div class="col-sm-6">
 230             <div class="box">
 231                 <div class="box-header">
 232                     <h3 class="box-title">Pools</h3>
 233                 </div>
 234                 <div class="box-body">
 235                     <table class="table table-condensed">
 236                         <thead>
 237                         <tr>
 238                             <th>Pool</th>
 239                             <th>Type</th>
 240                             <th>Used</th>
 241                             <th>Avail</th>
 242                             <th></th>
 243                         </tr>
 244                         </thead>
 245                         <tbody>
 246                         <tr rv-each-pool="filesystem.pools">
 247                             <td>{pool.pool}</td>
 248                             <td>{pool.type}</td>
 249                             <td>{pool.used | dimless}</td>
 250                             <td>{pool.avail | dimless}</td>
 251                             <td>
 252                                 <div class="progress"
 253                                      style="width: 100px; height: 20px;">
 254                                     <div class="progress-bar progress-bar-red"
 255                                          rv-style="pool | pool_size_bar"></div>
 256                                 </div>
 257                             </td>
 258                         </tr>
 259                         </tbody>
 260                     </table>
 261                 </div>
 262             </div>
 263         </div>
 264
 265     </div>
 266     <div class="box">
 267         <div class="box-header">
 268             <h3 class="box-title">Standby daemons</h3>
 269         </div>
 270         <div class="box-body">
 271             <table>
 272                 <thead>
 273                 <tr>
 274                     <th>Daemon</th>
 275                 </tr>
 276                 </thead>
 277                 <tbody>
 278                 <tr rv-each-standby="standbys">
 279                     <td>{standby.name}</td>
 280                 </tr>
 281                 </tbody>
 282             </table>
 283         </div>
 284     </div>
 285
 286     <div id="mds_charts" style="color: #ddd;">
 287     </div>
 288
 289 </section>
 290 <!-- /.content -->
 291
 292 {% endblock %}