[ceph.git] / ceph / src / pybind / mgr / dashboard / base.html


<!DOCTYPE html>

<html>

<head>
    <title>Ceph</title>

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <link rel="stylesheet"
          href="/static/AdminLTE-2.3.7/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet"
          href="/static/AdminLTE-2.3.7/dist/css/AdminLTE.min.css">
    <link rel="stylesheet"
          href="/static/AdminLTE-2.3.7/dist/css/skins/skin-blue.min.css">
    <link rel="stylesheet"
          href="/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.css">

    <script src="/static/AdminLTE-2.3.7/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/static/AdminLTE-2.3.7/plugins/sparkline/jquery.sparkline.min.js"></script>

    <script src="/static/rivets.bundled.min.js"></script>
    <script src="/static/underscore-min.js"></script>

    <script src="/static/AdminLTE-2.3.7/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/AdminLTE-2.3.7/dist/js/app.min.js"></script>
    <script src="/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>


      <script>
        $(document).ready(function(){
            var toplevel_data = {{ toplevel_data }};
            var refresh_interval = 5000;

            var refresh = function() {
                $.get("/toplevel_data", function(data) {
                    _.extend(toplevel_data, data);
                    setTimeout(refresh, refresh_interval);
                });
            };

            rivets.configure({
                preloadData: true,
                prefix: "rv",
                templateDelimiters: ["{", "}"]
            });

            rivets.formatters.health_color = function(status_str) {
                if (status_str == "HEALTH_OK") {
                    return "color: #00bb00;";
                } else if (status_str == "HEALTH_WARN") {
                    return "color: #FFC200;";
                } else if (status_str == "HEALTH_ERR") {
                    return "color: #ff0000;"
                }
            }

            rivets.formatters.health_ok = function(status_str) {
                if (status_str == "HEALTH_OK") {
                    return true;
                } else {
                    return false;
                }
            }

            var truncate = function(n, max_width) {
                var stringized = n.toString();
                var parts = stringized.split(".");
                if (parts.length == 1) {
                    // Just an int
                    return stringized;
                } else {
                    var fractional_digits = max_width - parts[0].length - 1;
                    if (fractional_digits <= 0) {
                        // No width available for the fractional part, drop
                        // it and the decimal point
                        return parts[0];
                    } else {
                        return stringized.substring(0, max_width);
                    }
                }
            }

            var format_number = function(n, divisor, units) {
                var width=4;
                var unit = 0;

                while (Math.floor(n / (divisor**unit)).toString().length > width - 1) {
                    unit = unit + 1;
                }

                var truncated_float;
                if (unit > 0) {
                    truncated_float = truncate((n / Math.pow(divisor, unit)).toString(), width);
                } else {
                    truncated_float = truncate(n, width);
                }

                return truncated_float + units[unit];
            }

            rivets.formatters.dimless = function(n){
                return format_number(n, 1000, [' ', 'k', 'M', 'G', 'T', 'P'])
            };
            rivets.formatters.dimless_binary = function(n){
                return format_number(n, 1024, ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']);
            };

            rivets.formatters.block_health_color = function(rbd_mirroring) {
                if (rbd_mirroring.errors > 0) {
                    return "color: #ff0000";
                } else if (rbd_mirroring.warnings > 0) {
                    return "color: #ffc200";
                }
                return "";
            };

            rivets.formatters.short_version = function(version) {
                // Expect "ceph version 1.2.3-g9asdasd (as98d7a0s8d7)"
                var result = /ceph version\s+([^ ]+)\s+\(.+\)/.exec(version);
                if (result) {
                    // Return the "1.2.3-g9asdasd" part
                    return result[1];
                } else {
                    // Unexpected format, pass it through
                    return version;
                }
                return
            };

            /* This is useful if you need to display some alternative text
             * when a collection is empty using rv-hide */
            rivets.formatters.length = function(val) {
              return val.length;
            }

            rivets.formatters.hide_count_box = function(value) {
                value = +value
                return (isNaN(value) || value == 0)
            };

            rivets.bind($("#health"), toplevel_data);
            rivets.bind($("section.sidebar"), toplevel_data);
            setTimeout(refresh, refresh_interval);
        });
      </script>

      <link rel="shortcut icon" href="http://ceph.com/wp-content/themes/ceph/favicon.ico">
      <link rel="shortcut icon" href="/static/favicon.ico">

    <style>
        div.box {
            background-color: #222d32;
            color: #fff;
        }

        div.info-box {
            background-color: #222d32;
            color: #fff;
        }

        .box {
            border-top-color: #b8c7ce;
        }

        div.box-header {
            color: #b8c7ce;
        }

        a.logo {
            background-color: #222d32;
        }

        body {
            background-color: #222d32;
        }

        .navbar {
            background-color: #222d32;
            color: #222d32;
        }

        div#content {
            background-color: #424d52;
            color: #ddd;
        }

        div.progress-bar {
            border-width: 1px;
            border-color: #ddd;
        }

        .ceph-log {
            font-family: monospace;
            background-color: #333;
            color: #ddd;
        }

        .nav-tabs>li.active>a {
            background-color: #424d52;
            color: #ddd;
        }

        .navbar a {
            color: #b8c7ce;
        }

        .ceph-none-found {
            color: #8aa4af;
            font-style: italic;
            padding-left: 15px;
            padding-right: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        table.ceph-chartbox {
            margin-left: 40px;
        }

        .ceph-chartbox td {
            padding-left: 35px;
            text-align: center;
            font-weight: bold;
        }

        .chart-container {
            width: 100%;
            height: 100%;
        }

        .dataTables_wrapper .dataTables_filter {
            color: #ddd
        }

        .dataTables_wrapper .dataTables_filter input {
            color: #222d32
        }

        .dataTables_wrapper tbody td {
            background-color: #424d52;
            color: #ddd;
        }

        .dataTables_wrapper .dataTables_paginate .ellipsis {
            color: #ddd !important
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: #ddd !important
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            color: #424d52 !important
        }

        .nav-tabs-custom {
            background-color: #222d32;
            color: #ddd;
        }
        .nav-tabs-custom>.nav-tabs>li{
            margin-right: 0;
        }
        .nav-tabs-custom>.nav-tabs>li>a{
            border-bottom-color: transparent;
            color: #aaa;
        }
        .nav-tabs-custom>.nav-tabs>li.active>a{
            background-color: #424d52;
            color: #eee;
        }
        .nav-tabs-custom>.nav-tabs>li.active:hover>a{
            background-color: #66777f;
            color: #eee;
        }
        .nav-tabs-custom>.tab-content {
            background-color: #424d52;
            color: #eee;
        }

    </style>

</head>

<body class="hold-transition sidebar-mini sidebar-collapse">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">
        <!-- Logo -->
        <a href="/" class="logo">
      <span class="logo-lg">
        <img src="/static/Ceph_Logo_Standard_RGB_White_120411_fa.png"
             width="123px" height="34px"/>
          </span>
      <span class="logo-mini">
        <img src="/static/logo-mini.png"
             width="34px" height="34px"/>
          </span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas"
               role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>

            <div id="health" style="font-size: 18px; padding: 12px 12px;">
                <span rv-hide="health_status | health_ok" >
                    <span rv-style="health_status | health_color">
                        {health_status}
                    </span>
                </span>
            </div>

            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">

                </ul>
            </div>
        </nav>
    </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar skin-blue">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar Menu -->
      <ul class="sidebar-menu">
        <!-- Optionally, you can add icons to the links -->
        <li class="{%if path_info=='/' or path_info.startswith('/health')%}active{%endif%}">
            <a href="/health">
            <i class="fa fa-heartbeat" rv-style="health_status | health_color"></i>
            <span>Cluster health</span></a>
        </li>
        <li class="treeview{%if path_info.startswith(('/server', '/osd'))%} active{%endif%}">
          <a href="#"><i class="fa fa-server"></i> <span>Cluster</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu menu-open">
            <li>
                <a href="/servers">Servers</a>
            </li>
            <li>
                <a href="/osd">OSDs</a>
            </li>
          </ul>
        </li>
        <li class="treeview{%if path_info.startswith('/rbd')%} active{%endif%}">
          <a href="#">
            <i class="fa fa-hdd-o" rv-style="rbd_mirroring | block_health_color"></i> <span>Block</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu menu-open">
            <li>
              <a href="/rbd_mirroring">
                <i class="fa fa-exchange"></i> Mirroring
                <span class="pull-right-container">
                    <small rv-hide="rbd_mirroring.warnings | hide_count_box" class="label pull-right bg-yellow">{rbd_mirroring.warnings}</small>
                    <small rv-hide="rbd_mirroring.errors | hide_count_box" class="label pull-right bg-red">{rbd_mirroring.errors}</small>
                </span>
              </a>
            </li>
            <li>
              <a href="/rbd_iscsi">
                <i class="fa fa-upload"></i> iSCSI
                <span class="pull-right-container" />
              </a>
            </li>
            <li class="treeview{%if path_info.startswith('/rbd_pool')%} active menu-open{%endif%}">
              <a href="#">
                <i class="fa fa-dot-circle-o"></i> <span>Pools</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                <li rv-each-pool="rbd_pools">
                  <a rv-href="pool.url"><i class="fa fa-circle-o"></i> {pool.name}</a>
                </li>
                <li class="ceph-none-found" rv-hide="rbd_pools | length">None found</li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="treeview{%if path_info.startswith(('/filesystem/', '/clients/'))%} active{%endif%}">
          <a href="#"><i class="fa fa-folder"></i> <span>Filesystems</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu menu-open">
            <li rv-each-filesystem="filesystems">
                <a rv-href="filesystem.url">{filesystem.name}</a>
            </li>
            <li class="ceph-none-found" rv-hide="filesystems | length">None found</li>
          </ul>
        </li>
      </ul>
      <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
  </aside>

  <div id="content" class="content-wrapper">

      {% block content %}{% endblock %}

  </div>
  <!-- /.content-wrapper -->

  <!-- Main Footer -->
  <footer class="main-footer">
    <!-- To the right -->
    <div class="pull-right hidden-xs">
      {{ ceph_version }}
    </div>
    <!-- Default to the left -->
    <strong>Copyright &copy; 2016 by Ceph Contributors.</strong> Free software (LGPL 2.1)
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane active" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">Recent Activity</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript::;">
              <i class="menu-icon fa fa-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                <p>Will be 23 on April 24th</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">Tasks Progress</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript::;">
              <h4 class="control-sidebar-subheading">
                Custom Template Design
                <span class="pull-right-container">
                  <span class="label label-danger pull-right">70%</span>
                </span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->
      <!-- Stats tab content -->
      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
      <!-- /.tab-pane -->
      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Report panel usage
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Some information about this general settings option
            </p>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>

</div>

<!--
<pre>
{{ data }}
</pre>
-->

<!-- Bootstrap 3.3.6 -->

<!-- AdminLTE App -->


</body>
</html>
Commit	Line	Data
31f18b77 FG	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">
c07f9fc5 FG	21	<link rel="stylesheet"
c07f9fc5 FG	22	href="/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.css">
31f18b77 FG	23
31f18b77 FG	24	<script src="/static/AdminLTE-2.3.7/plugins/jQuery/jquery-2.2.3.min.js"></script>
c07f9fc5	25	<script src="/static/AdminLTE-2.3.7/plugins/sparkline/jquery.sparkline.min.js"></script>
31f18b77 FG	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>
c07f9fc5	32	<script src="/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.min.js"></script>
31f18b77 FG	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) {
224ce89b	46	_.extend(toplevel_data, data);
31f18b77 FG	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
224ce89b WB	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
31f18b77 FG	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
224ce89b	93	var format_number = function(n, divisor, units) {
31f18b77	94	var width=4;
31f18b77 FG	95	var unit = 0;
31f18b77 FG	96
224ce89b	97	while (Math.floor(n / (divisor**unit)).toString().length > width - 1) {
31f18b77 FG	98	unit = unit + 1;
	99	}
	100
	101	var truncated_float;
	102	if (unit > 0) {
224ce89b	103	truncated_float = truncate((n / Math.pow(divisor, unit)).toString(), width);
31f18b77 FG	104	} else {
	105	truncated_float = truncate(n, width);
	106	}
	107
	108	return truncated_float + units[unit];
224ce89b WB	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']);
31f18b77 FG	116	};
31f18b77 FG	117
c07f9fc5 FG	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
224ce89b WB	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	}
31f18b77	145
c07f9fc5 FG	146	rivets.formatters.hide_count_box = function(value) {
	147	value = +value
	148	return (isNaN(value) \|\| value == 0)
	149	};
	150
224ce89b	151	rivets.bind($("#health"), toplevel_data);
31f18b77 FG	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">
224ce89b WB	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
181888fb FG	236	.chart-container {
	237	width: 100%;
	238	height: 100%;
	239	}
	240
c07f9fc5 FG	241	.dataTables_wrapper .dataTables_filter {
	242	color: #ddd
	243	}
	244
	245	.dataTables_wrapper .dataTables_filter input {
	246	color: #222d32
	247	}
	248
	249	.dataTables_wrapper tbody td {
	250	background-color: #424d52;
	251	color: #ddd;
	252	}
	253
	254	.dataTables_wrapper .dataTables_paginate .ellipsis {
	255	color: #ddd !important
	256	}
	257
	258	.dataTables_wrapper .dataTables_paginate .paginate_button {
	259	color: #ddd !important
	260	}
	261
	262	.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	263	color: #424d52 !important
	264	}
	265
	266	.nav-tabs-custom {
	267	background-color: #222d32;
	268	color: #ddd;
	269	}
	270	.nav-tabs-custom>.nav-tabs>li{
	271	margin-right: 0;
	272	}
	273	.nav-tabs-custom>.nav-tabs>li>a{
	274	border-bottom-color: transparent;
	275	color: #aaa;
	276	}
	277	.nav-tabs-custom>.nav-tabs>li.active>a{
	278	background-color: #424d52;
	279	color: #eee;
	280	}
	281	.nav-tabs-custom>.nav-tabs>li.active:hover>a{
	282	background-color: #66777f;
	283	color: #eee;
	284	}
	285	.nav-tabs-custom>.tab-content {
	286	background-color: #424d52;
	287	color: #eee;
	288	}
	289
224ce89b WB	290	</style>
224ce89b WB	291
31f18b77 FG	292	</head>
31f18b77 FG	293
224ce89b	294	<body class="hold-transition sidebar-mini sidebar-collapse">
31f18b77 FG	295	<div class="wrapper">
31f18b77 FG	296
224ce89b	297	<!-- Main Header -->
31f18b77 FG	298	<header class="main-header">
	299	<!-- Logo -->
	300	<a href="/" class="logo">
31f18b77 FG	301	<span class="logo-lg">
	302	<img src="/static/Ceph_Logo_Standard_RGB_White_120411_fa.png"
	303	width="123px" height="34px"/>
	304	</span>
224ce89b WB	305	<span class="logo-mini">
	306	<img src="/static/logo-mini.png"
	307	width="34px" height="34px"/>
	308	</span>
31f18b77 FG	309	</a>
	310
	311	<!-- Header Navbar -->
	312	<nav class="navbar navbar-static-top" role="navigation">
	313	<!-- Sidebar toggle button-->
	314	<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
	315	role="button">
	316	<span class="sr-only">Toggle navigation</span>
	317	</a>
	318
224ce89b WB	319	<div id="health" style="font-size: 18px; padding: 12px 12px;">
	320	<span rv-hide="health_status \| health_ok" >
	321	<span rv-style="health_status \| health_color">
	322	{health_status}
	323	</span>
31f18b77 FG	324	</span>
	325	</div>
	326
	327	<!-- Navbar Right Menu -->
	328	<div class="navbar-custom-menu">
	329	<ul class="nav navbar-nav">
	330
	331	</ul>
	332	</div>
	333	</nav>
	334	</header>
	335	<!-- Left side column. contains the logo and sidebar -->
224ce89b	336	<aside class="main-sidebar skin-blue">
31f18b77 FG	337
	338	<!-- sidebar: style can be found in sidebar.less -->
	339	<section class="sidebar">
	340	<!-- Sidebar Menu -->
	341	<ul class="sidebar-menu">
	342	<!-- Optionally, you can add icons to the links -->
c07f9fc5 FG	343	<li class="{%if path_info=='/' or path_info.startswith('/health')%}active{%endif%}">
c07f9fc5 FG	344	<a href="/health">
224ce89b	345	<i class="fa fa-heartbeat" rv-style="health_status \| health_color"></i>
31f18b77 FG	346	<span>Cluster health</span></a>
31f18b77 FG	347	</li>
c07f9fc5 FG	348	<li class="treeview{%if path_info.startswith(('/server', '/osd'))%} active{%endif%}">
	349	<a href="#"><i class="fa fa-server"></i> <span>Cluster</span>
	350	<span class="pull-right-container">
	351	<i class="fa fa-angle-left pull-right"></i>
	352	</span>
	353	</a>
	354	<ul class="treeview-menu menu-open">
	355	<li>
	356	<a href="/servers">Servers</a>
	357	</li>
	358	<li>
	359	<a href="/osd">OSDs</a>
	360	</li>
	361	</ul>
31f18b77	362	</li>
c07f9fc5 FG	363	<li class="treeview{%if path_info.startswith('/rbd')%} active{%endif%}">
	364	<a href="#">
	365	<i class="fa fa-hdd-o" rv-style="rbd_mirroring \| block_health_color"></i> <span>Block</span>
224ce89b WB	366	<span class="pull-right-container">
	367	<i class="fa fa-angle-left pull-right"></i>
	368	</span>
	369	</a>
	370	<ul class="treeview-menu menu-open">
c07f9fc5 FG	371	<li>
	372	<a href="/rbd_mirroring">
	373	<i class="fa fa-exchange"></i> Mirroring
	374	<span class="pull-right-container">
	375	<small rv-hide="rbd_mirroring.warnings \| hide_count_box" class="label pull-right bg-yellow">{rbd_mirroring.warnings}</small>
	376	<small rv-hide="rbd_mirroring.errors \| hide_count_box" class="label pull-right bg-red">{rbd_mirroring.errors}</small>
	377	</span>
	378	</a>
	379	</li>
	380	<li>
	381	<a href="/rbd_iscsi">
	382	<i class="fa fa-upload"></i> iSCSI
	383	<span class="pull-right-container" />
	384	</a>
	385	</li>
	386	<li class="treeview{%if path_info.startswith('/rbd_pool')%} active menu-open{%endif%}">
	387	<a href="#">
	388	<i class="fa fa-dot-circle-o"></i> <span>Pools</span>
	389	<span class="pull-right-container">
	390	<i class="fa fa-angle-left pull-right"></i>
	391	</span>
	392	</a>
	393	<ul class="treeview-menu">
	394	<li rv-each-pool="rbd_pools">
	395	<a rv-href="pool.url"><i class="fa fa-circle-o"></i> {pool.name}</a>
	396	</li>
181888fb	397	<li class="ceph-none-found" rv-hide="rbd_pools \| length">None found</li>
c07f9fc5	398	</ul>
224ce89b	399	</li>
224ce89b WB	400	</ul>
224ce89b WB	401	</li>
c07f9fc5	402	<li class="treeview{%if path_info.startswith(('/filesystem/', '/clients/'))%} active{%endif%}">
31f18b77 FG	403	<a href="#"><i class="fa fa-folder"></i> <span>Filesystems</span>
	404	<span class="pull-right-container">
	405	<i class="fa fa-angle-left pull-right"></i>
	406	</span>
	407	</a>
	408	<ul class="treeview-menu menu-open">
	409	<li rv-each-filesystem="filesystems">
	410	<a rv-href="filesystem.url">{filesystem.name}</a>
	411	</li>
224ce89b	412	<li class="ceph-none-found" rv-hide="filesystems \| length">None found</li>
31f18b77 FG	413	</ul>
	414	</li>
	415	</ul>
	416	<!-- /.sidebar-menu -->
	417	</section>
	418	<!-- /.sidebar -->
	419	</aside>
	420
	421	<div id="content" class="content-wrapper">
	422
	423	{% block content %}{% endblock %}
	424
	425	</div>
	426	<!-- /.content-wrapper -->
	427
	428	<!-- Main Footer -->
	429	<footer class="main-footer">
	430	<!-- To the right -->
	431	<div class="pull-right hidden-xs">
	432	{{ ceph_version }}
	433	</div>
	434	<!-- Default to the left -->
	435	<strong>Copyright © 2016 by Ceph Contributors.</strong> Free software (LGPL 2.1)
	436	</footer>
	437
	438	<!-- Control Sidebar -->
	439	<aside class="control-sidebar control-sidebar-dark">
	440	<!-- Create the tabs -->
	441	<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
	442	<li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
	443	<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
	444	</ul>
	445	<!-- Tab panes -->
	446	<div class="tab-content">
	447	<!-- Home tab content -->
	448	<div class="tab-pane active" id="control-sidebar-home-tab">
	449	<h3 class="control-sidebar-heading">Recent Activity</h3>
	450	<ul class="control-sidebar-menu">
	451	<li>
	452	<a href="javascript::;">
	453	<i class="menu-icon fa fa-birthday-cake bg-red"></i>
	454
	455	<div class="menu-info">
	456	<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
	457
	458	<p>Will be 23 on April 24th</p>
	459	</div>
	460	</a>
	461	</li>
	462	</ul>
	463	<!-- /.control-sidebar-menu -->
	464
	465	<h3 class="control-sidebar-heading">Tasks Progress</h3>
	466	<ul class="control-sidebar-menu">
	467	<li>
	468	<a href="javascript::;">
	469	<h4 class="control-sidebar-subheading">
	470	Custom Template Design
	471	<span class="pull-right-container">
	472	<span class="label label-danger pull-right">70%</span>
	473	</span>
	474	</h4>
	475
	476	<div class="progress progress-xxs">
477	<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
478	</div>
479	</a>
480	</li>
481	</ul>
482	<!-- /.control-sidebar-menu -->
483
484	</div>
485	<!-- /.tab-pane -->
486	<!-- Stats tab content -->
487	<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
488	<!-- /.tab-pane -->
489	<!-- Settings tab content -->
490	<div class="tab-pane" id="control-sidebar-settings-tab">
491	<form method="post">
492	<h3 class="control-sidebar-heading">General Settings</h3>
493
494	<div class="form-group">
495	<label class="control-sidebar-subheading">
496	Report panel usage
497	<input type="checkbox" class="pull-right" checked>
498	</label>
499
500	<p>
501	Some information about this general settings option
502	</p>
503	</div>
504	<!-- /.form-group -->
505	</form>
506	</div>
507	<!-- /.tab-pane -->
508	</div>
509	</aside>
510	<!-- /.control-sidebar -->
511	<!-- Add the sidebar's background. This div must be placed
512	immediately after the control sidebar -->
513	<div class="control-sidebar-bg"></div>
514
515	</div>
516
517	<!--
518	<pre>
519	{{ data }}
520	</pre>
521	-->
522
523	<!-- Bootstrap 3.3.6 -->
524
525	<!-- AdminLTE App -->
526
527
528	</body>
529	</html>