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
  22     <script src="/static/AdminLTE-2.3.7/plugins/jQuery/jquery-2.2.3.min.js"></script>
  23
  24     <script src="/static/rivets.bundled.min.js"></script>
  25     <script src="/static/underscore-min.js"></script>
  26
  27     <script src="/static/AdminLTE-2.3.7/bootstrap/js/bootstrap.min.js"></script>
  28     <script src="/static/AdminLTE-2.3.7/dist/js/app.min.js"></script>
  29
  30     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
  31     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  32
  33
  34
  35       <script>
  36         $(document).ready(function(){
  37             var toplevel_data = {{ toplevel_data }};
  38             var refresh_interval = 5000;
  39
  40             var refresh = function() {
  41                 $.get("/toplevel_data", function(data) {
  42                     _.extend(toplevel_data, data);
  43                     setTimeout(refresh, refresh_interval);
  44                 });
  45             };
  46
  47             rivets.configure({
  48                 preloadData: true,
  49                 prefix: "rv",
  50                 templateDelimiters: ["{", "}"]
  51             });
  52
  53             rivets.formatters.health_color = function(status_str) {
  54                 if (status_str == "HEALTH_OK") {
  55                     return "color: #00bb00;";
  56                 } else if (status_str == "HEALTH_WARN") {
  57                     return "color: #FFC200;";
  58                 } else if (status_str == "HEALTH_ERR") {
  59                     return "color: #ff0000;"
  60                 }
  61             }
  62
  63             rivets.formatters.health_ok = function(status_str) {
  64                 if (status_str == "HEALTH_OK") {
  65                     return true;
  66                 } else {
  67                     return false;
  68                 }
  69             }
  70
  71             var truncate = function(n, max_width) {
  72                 var stringized = n.toString();
  73                 var parts = stringized.split(".");
  74                 if (parts.length == 1) {
  75                     // Just an int
  76                     return stringized;
  77                 } else {
  78                     var fractional_digits = max_width - parts[0].length - 1;
  79                     if (fractional_digits <= 0) {
  80                         // No width available for the fractional part, drop
  81                         // it and the decimal point
  82                         return parts[0];
  83                     } else {
  84                         return stringized.substring(0, max_width);
  85                     }
  86                 }
  87             }
  88
  89             var format_number = function(n, divisor, units) {
  90                 var width=4;
  91                 var unit = 0;
  92
  93                 while (Math.floor(n / (divisor**unit)).toString().length > width - 1) {
  94                     unit = unit + 1;
  95                 }
  96
  97                 var truncated_float;
  98                 if (unit > 0) {
  99                     truncated_float = truncate((n / Math.pow(divisor, unit)).toString(), width);
 100                 } else {
 101                     truncated_float = truncate(n, width);
 102                 }
 103
 104                 return truncated_float + units[unit];
 105             }
 106
 107             rivets.formatters.dimless = function(n){
 108                 return format_number(n, 1000, [' ', 'k', 'M', 'G', 'T', 'P'])
 109             };
 110             rivets.formatters.dimless_binary = function(n){
 111                 return format_number(n, 1024, ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']);
 112             };
 113
 114             /* This is useful if you need to display some alternative text
 115              * when a collection is empty using rv-hide */
 116             rivets.formatters.length = function(val) {
 117               return val.length;
 118             }
 119
 120             rivets.bind($("#health"), toplevel_data);
 121             rivets.bind($("section.sidebar"), toplevel_data);
 122             setTimeout(refresh, refresh_interval);
 123         });
 124       </script>
 125
 126       <link rel="shortcut icon" href="http://ceph.com/wp-content/themes/ceph/favicon.ico">
 127       <link rel="shortcut icon" href="/static/favicon.ico">
 128
 129     <style>
 130         div.box {
 131             background-color: #222d32;
 132             color: #fff;
 133         }
 134
 135         div.info-box {
 136             background-color: #222d32;
 137             color: #fff;
 138         }
 139
 140         .box {
 141             border-top-color: #b8c7ce;
 142         }
 143
 144         div.box-header {
 145             color: #b8c7ce;
 146         }
 147
 148         a.logo {
 149             background-color: #222d32;
 150         }
 151
 152         body {
 153             background-color: #222d32;
 154         }
 155
 156         .navbar {
 157             background-color: #222d32;
 158             color: #222d32;
 159         }
 160
 161         div#content {
 162             background-color: #424d52;
 163             color: #ddd;
 164         }
 165
 166         div.progress-bar {
 167             border-width: 1px;
 168             border-color: #ddd;
 169         }
 170
 171         .ceph-log {
 172             font-family: monospace;
 173             background-color: #333;
 174             color: #ddd;
 175         }
 176
 177         .nav-tabs>li.active>a {
 178             background-color: #424d52;
 179             color: #ddd;
 180         }
 181
 182         .navbar a {
 183             color: #b8c7ce;
 184         }
 185
 186         .ceph-none-found {
 187             color: #8aa4af;
 188             font-style: italic;
 189             padding-left: 15px;
 190             padding-right: 5px;
 191             padding-top: 5px;
 192             padding-bottom: 5px;
 193         }
 194
 195         table.ceph-chartbox {
 196             margin-left: 40px;
 197         }
 198
 199         .ceph-chartbox td {
 200             padding-left: 35px;
 201             text-align: center;
 202             font-weight: bold;
 203         }
 204
 205     </style>
 206
 207 </head>
 208
 209 <body class="hold-transition sidebar-mini sidebar-collapse">
 210 <div class="wrapper">
 211
 212     <!-- Main Header -->
 213     <header class="main-header">
 214         <!-- Logo -->
 215         <a href="/" class="logo">
 216       <span class="logo-lg">
 217         <img src="/static/Ceph_Logo_Standard_RGB_White_120411_fa.png"
 218              width="123px" height="34px"/>
 219           </span>
 220       <span class="logo-mini">
 221         <img src="/static/logo-mini.png"
 222              width="34px" height="34px"/>
 223           </span>
 224         </a>
 225
 226         <!-- Header Navbar -->
 227         <nav class="navbar navbar-static-top" role="navigation">
 228             <!-- Sidebar toggle button-->
 229             <a href="#" class="sidebar-toggle" data-toggle="offcanvas"
 230                role="button">
 231                 <span class="sr-only">Toggle navigation</span>
 232             </a>
 233
 234             <div id="health" style="font-size: 18px; padding: 12px 12px;">
 235                 <span rv-hide="health_status | health_ok" >
 236                     <span rv-style="health_status | health_color">
 237                         {health_status}
 238                     </span>
 239                 </span>
 240             </div>
 241
 242             <!-- Navbar Right Menu -->
 243             <div class="navbar-custom-menu">
 244                 <ul class="nav navbar-nav">
 245
 246                 </ul>
 247             </div>
 248         </nav>
 249     </header>
 250   <!-- Left side column. contains the logo and sidebar -->
 251   <aside class="main-sidebar skin-blue">
 252
 253     <!-- sidebar: style can be found in sidebar.less -->
 254     <section class="sidebar">
 255       <!-- Sidebar Menu -->
 256       <ul class="sidebar-menu">
 257         <!-- Optionally, you can add icons to the links -->
 258         <li><a href="/health">
 259             <i class="fa fa-heartbeat" rv-style="health_status | health_color"></i>
 260             <span>Cluster health</span></a>
 261         </li>
 262         <li><a href="/servers">
 263             <i class="fa fa-server"></i>
 264             <span>Servers</span></a>
 265         </li>
 266         <li class="treeview active">
 267           <a href="#"><i class="fa fa-hdd-o"></i> <span>Block</span>
 268             <span class="pull-right-container">
 269               <i class="fa fa-angle-left pull-right"></i>
 270             </span>
 271           </a>
 272           <ul class="treeview-menu menu-open">
 273             <li rv-each-pool="rbd_pools">
 274                 <a rv-href="pool.url">{pool.name}</a>
 275             </li>
 276             <li class="ceph-none-found" rv-hide="rbd_pools | length">None found</li>
 277           </ul>
 278         </li>
 279         <li class="treeview active">
 280           <a href="#"><i class="fa fa-folder"></i> <span>Filesystems</span>
 281             <span class="pull-right-container">
 282               <i class="fa fa-angle-left pull-right"></i>
 283             </span>
 284           </a>
 285           <ul class="treeview-menu menu-open">
 286             <li rv-each-filesystem="filesystems">
 287                 <a rv-href="filesystem.url">{filesystem.name}</a>
 288             </li>
 289             <li class="ceph-none-found" rv-hide="filesystems | length">None found</li>
 290           </ul>
 291         </li>
 292       </ul>
 293       <!-- /.sidebar-menu -->
 294     </section>
 295     <!-- /.sidebar -->
 296   </aside>
 297
 298   <div id="content" class="content-wrapper">
 299
 300       {% block content %}{% endblock %}
 301
 302   </div>
 303   <!-- /.content-wrapper -->
 304
 305   <!-- Main Footer -->
 306   <footer class="main-footer">
 307     <!-- To the right -->
 308     <div class="pull-right hidden-xs">
 309       {{ ceph_version }}
 310     </div>
 311     <!-- Default to the left -->
 312     <strong>Copyright &copy; 2016 by Ceph Contributors.</strong> Free software (LGPL 2.1)
 313   </footer>
 314
 315   <!-- Control Sidebar -->
 316   <aside class="control-sidebar control-sidebar-dark">
 317     <!-- Create the tabs -->
 318     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 319       <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 320       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 321     </ul>
 322     <!-- Tab panes -->
 323     <div class="tab-content">
 324       <!-- Home tab content -->
 325       <div class="tab-pane active" id="control-sidebar-home-tab">
 326         <h3 class="control-sidebar-heading">Recent Activity</h3>
 327         <ul class="control-sidebar-menu">
 328           <li>
 329             <a href="javascript::;">
 330               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 331
 332               <div class="menu-info">
 333                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 334
 335                 <p>Will be 23 on April 24th</p>
 336               </div>
 337             </a>
 338           </li>
 339         </ul>
 340         <!-- /.control-sidebar-menu -->
 341
 342         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 343         <ul class="control-sidebar-menu">
 344           <li>
 345             <a href="javascript::;">
 346               <h4 class="control-sidebar-subheading">
 347                 Custom Template Design
 348                 <span class="pull-right-container">
 349                   <span class="label label-danger pull-right">70%</span>
 350                 </span>
 351               </h4>
 352
 353               <div class="progress progress-xxs">
 354                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 355               </div>
 356             </a>
 357           </li>
 358         </ul>
 359         <!-- /.control-sidebar-menu -->
 360
 361       </div>
 362       <!-- /.tab-pane -->
 363       <!-- Stats tab content -->
 364       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 365       <!-- /.tab-pane -->
 366       <!-- Settings tab content -->
 367       <div class="tab-pane" id="control-sidebar-settings-tab">
 368         <form method="post">
 369           <h3 class="control-sidebar-heading">General Settings</h3>
 370
 371           <div class="form-group">
 372             <label class="control-sidebar-subheading">
 373               Report panel usage
 374               <input type="checkbox" class="pull-right" checked>
 375             </label>
 376
 377             <p>
 378               Some information about this general settings option
 379             </p>
 380           </div>
 381           <!-- /.form-group -->
 382         </form>
 383       </div>
 384       <!-- /.tab-pane -->
 385     </div>
 386   </aside>
 387   <!-- /.control-sidebar -->
 388   <!-- Add the sidebar's background. This div must be placed
 389        immediately after the control sidebar -->
 390   <div class="control-sidebar-bg"></div>
 391
 392 </div>
 393
 394 <!--
 395 <pre>
 396 {{ data }}
 397 </pre>
 398 -->
 399
 400 <!-- Bootstrap 3.3.6 -->
 401
 402 <!-- AdminLTE App -->
 403
 404
 405 </body>
 406 </html>