ceph/src/pybind/mgr/dashboard/rbd_mirroring.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("/rbd_mirroring_data", function(data) {
  12                     _.extend(content_data, data);
  13                     setTimeout(refresh, 30000);
  14                 });
  15             };
  16
  17             console.log(content_data);
  18
  19             rivets.formatters.mirror_health_color = function(status_str) {
  20                 if (status_str == "warning") {
  21                     return "label label-warning";
  22                 } else if (status_str == "error") {
  23                     return "label label-danger";
  24                 } else if (status_str == "success") {
  25                     return "label label-success";
  26                 }
  27                 return "label label-info";
  28             }
  29             rivets.formatters.sync_progress_bar = function(progress){
  30                 var ratio = progress / 100.0;
  31                 return "width: " + Math.round(ratio * 100).toString() + "%";
  32             };
  33
  34             rivets.bind($("div#content"), content_data);
  35             setTimeout(refresh, 30000);
  36
  37             var table_ids = ["daemons", "pools"];
  38             for (var i = 0; i < table_ids.length; ++i) {
  39                 $('#' + table_ids[i]).DataTable({
  40                     'paging'      : true,
  41                     'pageLength'  : 5,
  42                     'lengthChange': false,
  43                     'info'        : false,
  44                     'autoWidth'   : false,
  45                     'searching'   : false
  46                 });
  47             }
  48
  49             var table_ids = ["image_errors", "image_syncing", "image_ready"];
  50             for (var i = 0; i < table_ids.length; ++i) {
  51                 $('#' + table_ids[i]).DataTable({
  52                     'paging'      : true,
  53                     'pageLength'  : 10,
  54                     'lengthChange': false,
  55                     'searching'   : true,
  56                     'ordering'    : true,
  57                     'info'        : false
  58                 });
  59             };
  60         });
  61 </script>
  62
  63
  64 <section class="content-header">
  65     <h1>
  66         Block Mirroring
  67     </h1>
  68 </section>
  69
  70 <section class="content">
  71     <div class="row">
  72         <div class="col-sm-6">
  73             <div class="box">
  74                 <div class="box-header">
  75                     <h3 class="box-title">Daemons</h3>
  76                 </div>
  77                 <div class="box-body">
  78                     <table id="daemons" class="table table-condensed">
  79                         <thead>
  80                         <tr>
  81                             <th>ID</th>
  82                             <th>Instance</th>
  83                             <th>Hostname</th>
  84                             <th>Version</th>
  85                             <th>Health</th>
  86                         </tr>
  87                         </thead>
  88                         <tbody>
  89                             <tr rv-each-daemon="daemons">
  90                                 <td>{daemon.id}</td>
  91                                 <td>{daemon.instance_id}</td>
  92                                 <td>{daemon.server_hostname}</td>
  93                                 <td>{daemon.version | short_version}</td>
  94                                 <td><span rv-class="daemon.health_color | mirror_health_color">{daemon.health}</span></td>
  95                             </tr>
  96                         </tbody>
  97                     </table>
  98                 </div>
  99             </div>
 100         </div>
 101
 102         <div class="col-sm-6">
 103             <div class="box">
 104                 <div class="box-header">
 105                     <h3 class="box-title">Pools</h3>
 106                 </div>
 107                 <div class="box-body">
 108                     <table id="pools" class="table table-condensed">
 109                         <thead>
 110                         <tr>
 111                             <th>Name</th>
 112                             <th>Mode</th>
 113                             <th>Leader</th>
 114                             <th># Local</th>
 115                             <th># Remote</th>
 116                             <th>Health</th>
 117                         </tr>
 118                         </thead>
 119                         <tbody>
 120                             <tr rv-each-pool="pools">
 121                                 <td>{pool.name}</td>
 122                                 <td>{pool.mirror_mode}</td>
 123                                 <td>{pool.leader_id}</td>
 124                                 <td>{pool.image_local_count}</td>
 125                                 <td>{pool.image_remote_count}</td>
 126                                 <td><span rv-class="pool.health_color | mirror_health_color">{pool.health}</span></td>
 127                             </tr>
 128                         </tbody>
 129                     </table>
 130                 </div>
 131             </div>
 132         </div>
 133     </div>
 134
 135     <div class="box">
 136         <div class="box-header">
 137             <h3 class="box-title">Images</h3>
 138         </div>
 139         <div class="box-body">
 140             <div class="nav-tabs-custom">
 141                 <ul class="nav nav-tabs">
 142                     <li class="active"><a href="#tab_1" data-toggle="tab">Issues</a></li>
 143                     <li><a href="#tab_2" data-toggle="tab">Syncing</a></li>
 144                     <li><a href="#tab_3" data-toggle="tab">Ready</a></li>
 145                 </ul>
 146                 <div class="tab-content">
 147                     <div class="tab-pane active" id="tab_1">
 148                         <table id="image_errors" class="table table-condensed">
 149                             <thead>
 150                             <tr>
 151                                 <th>Pool</th>
 152                                 <th>Image</th>
 153                                 <th>Issue</th>
 154                                 <th>State</th>
 155                             </tr>
 156                             </thead>
 157                             <tbody>
 158                                 <tr rv-each-image="image_error">
 159                                     <td>{image.pool_name}</td>
 160                                     <td>{image.name}</td>
 161                                     <td>{image.description}</td>
 162                                     <td><span rv-class="image.state_color | mirror_health_color">{image.state}</span></td>
 163                                 </tr>
 164                             </tbody>
 165                         </table>
 166                     </div>
 167                     <div class="tab-pane" id="tab_2">
 168                         <table id="image_syncing" class="table table-condensed">
 169                             <thead>
 170                             <tr>
 171                                 <th>Pool</th>
 172                                 <th>Image</th>
 173                                 <th>Progress</th>
 174                                 <th>State</th>
 175                             </tr>
 176                             </thead>
 177                             <tbody>
 178                                 <tr rv-each-image="image_syncing">
 179                                     <td>{image.pool_name}</td>
 180                                     <td>{image.name}</td>
 181                                     <td>
 182                                         <div class="progress" style="width: 100px; height: 18px;">
 183                                             <div class="progress-bar progress-bar-aqua" rv-style="image.progress | sync_progress_bar">
 184                                                 {image.progress}
 185                                             </div>
 186                                         </div>
 187                                     </td>
 188                                     <td><span class="label label-info">Syncing</span></td>
 189                                 </tr>
 190                             </tbody>
 191                         </table>
 192                     </div>
 193                     <div class="tab-pane" id="tab_3">
 194                         <table id="image_ready" class="table table-condensed">
 195                             <thead>
 196                             <tr>
 197                                 <th>Pool</th>
 198                                 <th>Image</th>
 199                                 <th>Description</th>
 200                                 <th>State</th>
 201                             </tr>
 202                             </thead>
 203                             <tbody>
 204                                 <tr rv-each-image="image_ready">
 205                                     <td>{image.pool_name}</td>
 206                                     <td>{image.name}</td>
 207                                     <td>{image.description}</td>
 208                                     <td><span rv-class="image.state_color | mirror_health_color">{image.state}</span></td>
 209                                 </tr>
 210                             </tbody>
 211                         </table>
 212                     </div>
 213                 </div>
 214             </div>
 215         </div>
 216     </div>
 217 </section>
 218 <!-- /.content -->
 219
 220 {% endblock %}