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.health, data.health);
  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             var truncate = function(n, max_width) {
  64                 var stringized = n.toString();
  65                 var parts = stringized.split(".");
  66                 if (parts.length == 1) {
  67                     // Just an int
  68                     return stringized;
  69                 } else {
  70                     var fractional_digits = max_width - parts[0].length - 1;
  71                     if (fractional_digits <= 0) {
  72                         // No width available for the fractional part, drop
  73                         // it and the decimal point
  74                         return parts[0];
  75                     } else {
  76                         return stringized.substring(0, max_width);
  77                     }
  78                 }
  79             }
  80
  81             rivets.formatters.dimless = function(n){
  82                 var width=4;
  83                 var units = [' ', 'k', 'M', 'G', 'T', 'P'];
  84                 var unit = 0;
  85
  86                 while (Math.floor(n / (1000**unit)).toString().length > width - 1) {
  87                     unit = unit + 1;
  88                 }
  89
  90                 var truncated_float;
  91                 if (unit > 0) {
  92                     truncated_float = truncate((n / Math.pow(1000.0, unit)).toString(), width);
  93                 } else {
  94                     truncated_float = truncate(n, width);
  95                 }
  96
  97                 return truncated_float + units[unit];
  98             };
  99
 100             <!--rivet.formatters.mon_summary = function(mon_map) {-->
 101             <!--}-->
 102
 103             rivets.bind($("#health"), toplevel_data.health);
 104             rivets.bind($("section.sidebar"), toplevel_data);
 105             setTimeout(refresh, refresh_interval);
 106         });
 107       </script>
 108
 109       <link rel="shortcut icon" href="http://ceph.com/wp-content/themes/ceph/favicon.ico">
 110       <link rel="shortcut icon" href="/static/favicon.ico">
 111 </head>
 112
 113 <body class="hold-transition skin-blue sidebar-mini">
 114 <div class="wrapper">
 115
 116   <!-- Main Header -->
 117     <header class="main-header">
 118         <!-- Logo -->
 119         <a href="/" class="logo">
 120             <!--
 121           <span class="logo-mini"><b>A</b>LT</span>
 122           <span class="logo-lg"><b>Admin</b>LTE</span> -->
 123       <span class="logo-lg">
 124         <img src="/static/Ceph_Logo_Standard_RGB_White_120411_fa.png"
 125              width="123px" height="34px"/>
 126           </span>
 127         </a>
 128
 129         <!-- Header Navbar -->
 130         <nav class="navbar navbar-static-top" role="navigation">
 131             <!-- Sidebar toggle button-->
 132             <a href="#" class="sidebar-toggle" data-toggle="offcanvas"
 133                role="button">
 134                 <span class="sr-only">Toggle navigation</span>
 135             </a>
 136
 137             <div id="health" style="font-size: 20px; padding: 12px 12px;">
 138                 Health:&nbsp;
 139                 <span rv-style="overall_status | health_color">
 140                     {overall_status}
 141                 </span>
 142             </div>
 143
 144             <!-- Navbar Right Menu -->
 145             <div class="navbar-custom-menu">
 146                 <ul class="nav navbar-nav">
 147
 148                 </ul>
 149             </div>
 150         </nav>
 151     </header>
 152   <!-- Left side column. contains the logo and sidebar -->
 153   <aside class="main-sidebar">
 154
 155     <!-- sidebar: style can be found in sidebar.less -->
 156     <section class="sidebar">
 157       <!-- Sidebar Menu -->
 158       <ul class="sidebar-menu">
 159         <!-- Optionally, you can add icons to the links -->
 160         <li><a href="/health"><i class="fa fa-heart"></i>
 161             <span>Cluster health</span></a>
 162         </li>
 163         <li><a href="/servers"><i class="fa fa-server"></i>
 164             <span>Servers</span></a>
 165         </li>
 166         <li class="treeview active">
 167           <a href="#"><i class="fa fa-folder"></i> <span>Filesystems</span>
 168             <span class="pull-right-container">
 169               <i class="fa fa-angle-left pull-right"></i>
 170             </span>
 171           </a>
 172           <ul class="treeview-menu menu-open">
 173             <li rv-each-filesystem="filesystems">
 174                 <a rv-href="filesystem.url">{filesystem.name}</a>
 175             </li>
 176           </ul>
 177         </li>
 178       </ul>
 179       <!-- /.sidebar-menu -->
 180     </section>
 181     <!-- /.sidebar -->
 182   </aside>
 183
 184   <div id="content" class="content-wrapper">
 185
 186       {% block content %}{% endblock %}
 187
 188   </div>
 189   <!-- /.content-wrapper -->
 190
 191   <!-- Main Footer -->
 192   <footer class="main-footer">
 193     <!-- To the right -->
 194     <div class="pull-right hidden-xs">
 195       {{ ceph_version }}
 196     </div>
 197     <!-- Default to the left -->
 198     <strong>Copyright &copy; 2016 by Ceph Contributors.</strong> Free software (LGPL 2.1)
 199   </footer>
 200
 201   <!-- Control Sidebar -->
 202   <aside class="control-sidebar control-sidebar-dark">
 203     <!-- Create the tabs -->
 204     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 205       <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 206       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 207     </ul>
 208     <!-- Tab panes -->
 209     <div class="tab-content">
 210       <!-- Home tab content -->
 211       <div class="tab-pane active" id="control-sidebar-home-tab">
 212         <h3 class="control-sidebar-heading">Recent Activity</h3>
 213         <ul class="control-sidebar-menu">
 214           <li>
 215             <a href="javascript::;">
 216               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 217
 218               <div class="menu-info">
 219                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 220
 221                 <p>Will be 23 on April 24th</p>
 222               </div>
 223             </a>
 224           </li>
 225         </ul>
 226         <!-- /.control-sidebar-menu -->
 227
 228         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 229         <ul class="control-sidebar-menu">
 230           <li>
 231             <a href="javascript::;">
 232               <h4 class="control-sidebar-subheading">
 233                 Custom Template Design
 234                 <span class="pull-right-container">
 235                   <span class="label label-danger pull-right">70%</span>
 236                 </span>
 237               </h4>
 238
 239               <div class="progress progress-xxs">
 240                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 241               </div>
 242             </a>
 243           </li>
 244         </ul>
 245         <!-- /.control-sidebar-menu -->
 246
 247       </div>
 248       <!-- /.tab-pane -->
 249       <!-- Stats tab content -->
 250       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 251       <!-- /.tab-pane -->
 252       <!-- Settings tab content -->
 253       <div class="tab-pane" id="control-sidebar-settings-tab">
 254         <form method="post">
 255           <h3 class="control-sidebar-heading">General Settings</h3>
 256
 257           <div class="form-group">
 258             <label class="control-sidebar-subheading">
 259               Report panel usage
 260               <input type="checkbox" class="pull-right" checked>
 261             </label>
 262
 263             <p>
 264               Some information about this general settings option
 265             </p>
 266           </div>
 267           <!-- /.form-group -->
 268         </form>
 269       </div>
 270       <!-- /.tab-pane -->
 271     </div>
 272   </aside>
 273   <!-- /.control-sidebar -->
 274   <!-- Add the sidebar's background. This div must be placed
 275        immediately after the control sidebar -->
 276   <div class="control-sidebar-bg"></div>
 277
 278 </div>
 279
 280 <!--
 281 <pre>
 282 {{ data }}
 283 </pre>
 284 -->
 285
 286 <!-- Bootstrap 3.3.6 -->
 287
 288 <!-- AdminLTE App -->
 289
 290
 291 </body>
 292 </html>