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

   1
   2 <!DOCTYPE html>
   3
   4 <html>
   5
   6 <head>
   7     <title>Ceph</title>
   8
   9     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
  10           name="viewport">
  11     <link rel="stylesheet"
  12           href="/static/AdminLTE-2.3.7/bootstrap/css/bootstrap.min.css">
  13     <link rel="stylesheet"
  14           href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  15     <link rel="stylesheet"
  16           href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  17     <link rel="stylesheet"
  18           href="/static/AdminLTE-2.3.7/dist/css/AdminLTE.min.css">
  19     <link rel="stylesheet"
  20           href="/static/AdminLTE-2.3.7/dist/css/skins/skin-blue.min.css">
  21     <link rel="stylesheet"
  22           href="/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.css">
  23
  24     <script src="/static/AdminLTE-2.3.7/plugins/jQuery/jquery-2.2.3.min.js"></script>
  25     <script src="/static/AdminLTE-2.3.7/plugins/sparkline/jquery.sparkline.min.js"></script>
  26
  27     <script src="/static/rivets.bundled.min.js"></script>
  28     <script src="/static/underscore-min.js"></script>
  29
  30     <script src="/static/AdminLTE-2.3.7/bootstrap/js/bootstrap.min.js"></script>
  31     <script src="/static/AdminLTE-2.3.7/dist/js/app.min.js"></script>
  32     <script src="/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.min.js"></script>
  33
  34     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
  35     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  36
  37
  38
  39       <script>
  40         $(document).ready(function(){
  41             var toplevel_data = {{ toplevel_data }};
  42             var refresh_interval = 5000;
  43
  44             var refresh = function() {
  45                 $.get("/toplevel_data", function(data) {
  46                     _.extend(toplevel_data, data);
  47                     setTimeout(refresh, refresh_interval);
  48                 });
  49             };
  50
  51             rivets.configure({
  52                 preloadData: true,
  53                 prefix: "rv",
  54                 templateDelimiters: ["{", "}"]
  55             });
  56
  57             rivets.formatters.health_color = function(status_str) {
  58                 if (status_str == "HEALTH_OK") {
  59                     return "color: #00bb00;";
  60                 } else if (status_str == "HEALTH_WARN") {
  61                     return "color: #FFC200;";
  62                 } else if (status_str == "HEALTH_ERR") {
  63                     return "color: #ff0000;"
  64                 }
  65             }
  66
  67             rivets.formatters.health_ok = function(status_str) {
  68                 if (status_str == "HEALTH_OK") {
  69                     return true;
  70                 } else {
  71                     return false;
  72                 }
  73             }
  74
  75             var truncate = function(n, max_width) {
  76                 var stringized = n.toString();
  77                 var parts = stringized.split(".");
  78                 if (parts.length == 1) {
  79                     // Just an int
  80                     return stringized;
  81                 } else {
  82                     var fractional_digits = max_width - parts[0].length - 1;
  83                     if (fractional_digits <= 0) {
  84                         // No width available for the fractional part, drop
  85                         // it and the decimal point
  86                         return parts[0];
  87                     } else {
  88                         return stringized.substring(0, max_width);
  89                     }
  90                 }
  91             }
  92
  93             var format_number = function(n, divisor, units) {
  94                 var width=4;
  95                 var unit = 0;
  96
  97                 while (Math.floor(n / (divisor**unit)).toString().length > width - 1) {
  98                     unit = unit + 1;
  99                 }
 100
 101                 var truncated_float;
 102                 if (unit > 0) {
 103                     truncated_float = truncate((n / Math.pow(divisor, unit)).toString(), width);
 104                 } else {
 105                     truncated_float = truncate(n, width);
 106                 }
 107
 108                 return truncated_float + units[unit];
 109             }
 110
 111             rivets.formatters.dimless = function(n){
 112                 return format_number(n, 1000, [' ', 'k', 'M', 'G', 'T', 'P'])
 113             };
 114             rivets.formatters.dimless_binary = function(n){
 115                 return format_number(n, 1024, ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']);
 116             };
 117
 118             rivets.formatters.block_health_color = function(rbd_mirroring) {
 119                 if (rbd_mirroring.errors > 0) {
 120                     return "color: #ff0000";
 121                 } else if (rbd_mirroring.warnings > 0) {
 122                     return "color: #ffc200";
 123                 }
 124                 return "";
 125             };
 126
 127             rivets.formatters.short_version = function(version) {
 128                 // Expect "ceph version 1.2.3-g9asdasd (as98d7a0s8d7)"
 129                 var result = /ceph version\s+([^ ]+)\s+\(.+\)/.exec(version);
 130                 if (result) {
 131                     // Return the "1.2.3-g9asdasd" part
 132                     return result[1];
 133                 } else {
 134                     // Unexpected format, pass it through
 135                     return version;
 136                 }
 137                 return
 138             };
 139
 140             /* This is useful if you need to display some alternative text
 141              * when a collection is empty using rv-hide */
 142             rivets.formatters.length = function(val) {
 143               return val.length;
 144             }
 145
 146             rivets.formatters.hide_count_box = function(value) {
 147                 value = +value
 148                 return (isNaN(value) || value == 0)
 149             };
 150
 151             rivets.bind($("#health"), toplevel_data);
 152             rivets.bind($("section.sidebar"), toplevel_data);
 153             setTimeout(refresh, refresh_interval);
 154         });
 155       </script>
 156
 157       <link rel="shortcut icon" href="http://ceph.com/wp-content/themes/ceph/favicon.ico">
 158       <link rel="shortcut icon" href="/static/favicon.ico">
 159
 160     <style>
 161         div.box {
 162             background-color: #222d32;
 163             color: #fff;
 164         }
 165
 166         div.info-box {
 167             background-color: #222d32;
 168             color: #fff;
 169         }
 170
 171         .box {
 172             border-top-color: #b8c7ce;
 173         }
 174
 175         div.box-header {
 176             color: #b8c7ce;
 177         }
 178
 179         a.logo {
 180             background-color: #222d32;
 181         }
 182
 183         body {
 184             background-color: #222d32;
 185         }
 186
 187         .navbar {
 188             background-color: #222d32;
 189             color: #222d32;
 190         }
 191
 192         div#content {
 193             background-color: #424d52;
 194             color: #ddd;
 195         }
 196
 197         div.progress-bar {
 198             border-width: 1px;
 199             border-color: #ddd;
 200         }
 201
 202         .ceph-log {
 203             font-family: monospace;
 204             background-color: #333;
 205             color: #ddd;
 206         }
 207
 208         .nav-tabs>li.active>a {
 209             background-color: #424d52;
 210             color: #ddd;
 211         }
 212
 213         .navbar a {
 214             color: #b8c7ce;
 215         }
 216
 217         .ceph-none-found {
 218             color: #8aa4af;
 219             font-style: italic;
 220             padding-left: 15px;
 221             padding-right: 5px;
 222             padding-top: 5px;
 223             padding-bottom: 5px;
 224         }
 225
 226         table.ceph-chartbox {
 227             margin-left: 40px;
 228         }
 229
 230         .ceph-chartbox td {
 231             padding-left: 35px;
 232             text-align: center;
 233             font-weight: bold;
 234         }
 235
 236         .dataTables_wrapper .dataTables_filter {
 237             color: #ddd
 238         }
 239
 240         .dataTables_wrapper .dataTables_filter input {
 241             color: #222d32
 242         }
 243
 244         .dataTables_wrapper tbody td {
 245             background-color: #424d52;
 246             color: #ddd;
 247         }
 248
 249         .dataTables_wrapper .dataTables_paginate .ellipsis {
 250             color: #ddd !important
 251         }
 252
 253         .dataTables_wrapper .dataTables_paginate .paginate_button {
 254             color: #ddd !important
 255         }
 256
 257         .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
 258             color: #424d52 !important
 259         }
 260
 261         .nav-tabs-custom {
 262             background-color: #222d32;
 263             color: #ddd;
 264         }
 265         .nav-tabs-custom>.nav-tabs>li{
 266             margin-right: 0;
 267         }
 268         .nav-tabs-custom>.nav-tabs>li>a{
 269             border-bottom-color: transparent;
 270             color: #aaa;
 271         }
 272         .nav-tabs-custom>.nav-tabs>li.active>a{
 273             background-color: #424d52;
 274             color: #eee;
 275         }
 276         .nav-tabs-custom>.nav-tabs>li.active:hover>a{
 277             background-color: #66777f;
 278             color: #eee;
 279         }
 280         .nav-tabs-custom>.tab-content {
 281             background-color: #424d52;
 282             color: #eee;
 283         }
 284
 285     </style>
 286
 287 </head>
 288
 289 <body class="hold-transition sidebar-mini sidebar-collapse">
 290 <div class="wrapper">
 291
 292     <!-- Main Header -->
 293     <header class="main-header">
 294         <!-- Logo -->
 295         <a href="/" class="logo">
 296       <span class="logo-lg">
 297         <img src="/static/Ceph_Logo_Standard_RGB_White_120411_fa.png"
 298              width="123px" height="34px"/>
 299           </span>
 300       <span class="logo-mini">
 301         <img src="/static/logo-mini.png"
 302              width="34px" height="34px"/>
 303           </span>
 304         </a>
 305
 306         <!-- Header Navbar -->
 307         <nav class="navbar navbar-static-top" role="navigation">
 308             <!-- Sidebar toggle button-->
 309             <a href="#" class="sidebar-toggle" data-toggle="offcanvas"
 310                role="button">
 311                 <span class="sr-only">Toggle navigation</span>
 312             </a>
 313
 314             <div id="health" style="font-size: 18px; padding: 12px 12px;">
 315                 <span rv-hide="health_status | health_ok" >
 316                     <span rv-style="health_status | health_color">
 317                         {health_status}
 318                     </span>
 319                 </span>
 320             </div>
 321
 322             <!-- Navbar Right Menu -->
 323             <div class="navbar-custom-menu">
 324                 <ul class="nav navbar-nav">
 325
 326                 </ul>
 327             </div>
 328         </nav>
 329     </header>
 330   <!-- Left side column. contains the logo and sidebar -->
 331   <aside class="main-sidebar skin-blue">
 332
 333     <!-- sidebar: style can be found in sidebar.less -->
 334     <section class="sidebar">
 335       <!-- Sidebar Menu -->
 336       <ul class="sidebar-menu">
 337         <!-- Optionally, you can add icons to the links -->
 338         <li class="{%if path_info=='/' or path_info.startswith('/health')%}active{%endif%}">
 339             <a href="/health">
 340             <i class="fa fa-heartbeat" rv-style="health_status | health_color"></i>
 341             <span>Cluster health</span></a>
 342         </li>
 343         <li class="treeview{%if path_info.startswith(('/server', '/osd'))%} active{%endif%}">
 344           <a href="#"><i class="fa fa-server"></i> <span>Cluster</span>
 345             <span class="pull-right-container">
 346               <i class="fa fa-angle-left pull-right"></i>
 347             </span>
 348           </a>
 349           <ul class="treeview-menu menu-open">
 350             <li>
 351                 <a href="/servers">Servers</a>
 352             </li>
 353             <li>
 354                 <a href="/osd">OSDs</a>
 355             </li>
 356           </ul>
 357         </li>
 358         <li class="treeview{%if path_info.startswith('/rbd')%} active{%endif%}">
 359           <a href="#">
 360             <i class="fa fa-hdd-o" rv-style="rbd_mirroring | block_health_color"></i> <span>Block</span>
 361             <span class="pull-right-container">
 362               <i class="fa fa-angle-left pull-right"></i>
 363             </span>
 364           </a>
 365           <ul class="treeview-menu menu-open">
 366             <li>
 367               <a href="/rbd_mirroring">
 368                 <i class="fa fa-exchange"></i> Mirroring
 369                 <span class="pull-right-container">
 370                     <small rv-hide="rbd_mirroring.warnings | hide_count_box" class="label pull-right bg-yellow">{rbd_mirroring.warnings}</small>
 371                     <small rv-hide="rbd_mirroring.errors | hide_count_box" class="label pull-right bg-red">{rbd_mirroring.errors}</small>
 372                 </span>
 373               </a>
 374             </li>
 375             <li>
 376               <a href="/rbd_iscsi">
 377                 <i class="fa fa-upload"></i> iSCSI
 378                 <span class="pull-right-container" />
 379               </a>
 380             </li>
 381             <li class="treeview{%if path_info.startswith('/rbd_pool')%} active menu-open{%endif%}">
 382               <a href="#">
 383                 <i class="fa fa-dot-circle-o"></i> <span>Pools</span>
 384                 <span class="pull-right-container">
 385                   <i class="fa fa-angle-left pull-right"></i>
 386                 </span>
 387               </a>
 388               <ul class="treeview-menu">
 389                 <li rv-each-pool="rbd_pools">
 390                   <a rv-href="pool.url"><i class="fa fa-circle-o"></i> {pool.name}</a>
 391                 </li>
 392               </ul>
 393             </li>
 394             <li class="ceph-none-found" rv-hide="rbd_pools | length">None found</li>
 395           </ul>
 396         </li>
 397         <li class="treeview{%if path_info.startswith(('/filesystem/', '/clients/'))%} active{%endif%}">
 398           <a href="#"><i class="fa fa-folder"></i> <span>Filesystems</span>
 399             <span class="pull-right-container">
 400               <i class="fa fa-angle-left pull-right"></i>
 401             </span>
 402           </a>
 403           <ul class="treeview-menu menu-open">
 404             <li rv-each-filesystem="filesystems">
 405                 <a rv-href="filesystem.url">{filesystem.name}</a>
 406             </li>
 407             <li class="ceph-none-found" rv-hide="filesystems | length">None found</li>
 408           </ul>
 409         </li>
 410       </ul>
 411       <!-- /.sidebar-menu -->
 412     </section>
 413     <!-- /.sidebar -->
 414   </aside>
 415
 416   <div id="content" class="content-wrapper">
 417
 418       {% block content %}{% endblock %}
 419
 420   </div>
 421   <!-- /.content-wrapper -->
 422
 423   <!-- Main Footer -->
 424   <footer class="main-footer">
 425     <!-- To the right -->
 426     <div class="pull-right hidden-xs">
 427       {{ ceph_version }}
 428     </div>
 429     <!-- Default to the left -->
 430     <strong>Copyright &copy; 2016 by Ceph Contributors.</strong> Free software (LGPL 2.1)
 431   </footer>
 432
 433   <!-- Control Sidebar -->
 434   <aside class="control-sidebar control-sidebar-dark">
 435     <!-- Create the tabs -->
 436     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 437       <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 438       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 439     </ul>
 440     <!-- Tab panes -->
 441     <div class="tab-content">
 442       <!-- Home tab content -->
 443       <div class="tab-pane active" id="control-sidebar-home-tab">
 444         <h3 class="control-sidebar-heading">Recent Activity</h3>
 445         <ul class="control-sidebar-menu">
 446           <li>
 447             <a href="javascript::;">
 448               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 449
 450               <div class="menu-info">
 451                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 452
 453                 <p>Will be 23 on April 24th</p>
 454               </div>
 455             </a>
 456           </li>
 457         </ul>
 458         <!-- /.control-sidebar-menu -->
 459
 460         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 461         <ul class="control-sidebar-menu">
 462           <li>
 463             <a href="javascript::;">
 464               <h4 class="control-sidebar-subheading">
 465                 Custom Template Design
 466                 <span class="pull-right-container">
 467                   <span class="label label-danger pull-right">70%</span>
 468                 </span>
 469               </h4>
 470
 471               <div class="progress progress-xxs">
 472                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 473               </div>
 474             </a>
 475           </li>
 476         </ul>
 477         <!-- /.control-sidebar-menu -->
 478
 479       </div>
 480       <!-- /.tab-pane -->
 481       <!-- Stats tab content -->
 482       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 483       <!-- /.tab-pane -->
 484       <!-- Settings tab content -->
 485       <div class="tab-pane" id="control-sidebar-settings-tab">
 486         <form method="post">
 487           <h3 class="control-sidebar-heading">General Settings</h3>
 488
 489           <div class="form-group">
 490             <label class="control-sidebar-subheading">
 491               Report panel usage
 492               <input type="checkbox" class="pull-right" checked>
 493             </label>
 494
 495             <p>
 496               Some information about this general settings option
 497             </p>
 498           </div>
 499           <!-- /.form-group -->
 500         </form>
 501       </div>
 502       <!-- /.tab-pane -->
 503     </div>
 504   </aside>
 505   <!-- /.control-sidebar -->
 506   <!-- Add the sidebar's background. This div must be placed
 507        immediately after the control sidebar -->
 508   <div class="control-sidebar-bg"></div>
 509
 510 </div>
 511
 512 <!--
 513 <pre>
 514 {{ data }}
 515 </pre>
 516 -->
 517
 518 <!-- Bootstrap 3.3.6 -->
 519
 520 <!-- AdminLTE App -->
 521
 522
 523 </body>
 524 </html>