9 <meta content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
11 <link rel=
"stylesheet"
12 href=
"{{ url_prefix }}/static/AdminLTE-2.3.7/bootstrap/css/bootstrap.min.css">
13 <link rel=
"stylesheet"
14 href=
"{{ url_prefix }}/static/libs/font-awesome/4.7.0/css/font-awesome.min.css">
15 <link rel=
"stylesheet"
16 href=
"{{ url_prefix }}/static/AdminLTE-2.3.7/dist/css/AdminLTE.min.css">
17 <link rel=
"stylesheet"
18 href=
"{{ url_prefix }}/static/AdminLTE-2.3.7/dist/css/skins/skin-blue.min.css">
19 <link rel=
"stylesheet"
20 href=
"{{ url_prefix }}/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.min.css">
22 <script src=
"{{ url_prefix }}/static/AdminLTE-2.3.7/plugins/jQuery/jquery-2.2.3.min.js"></script>
23 <script src=
"{{ url_prefix }}/static/AdminLTE-2.3.7/plugins/sparkline/jquery.sparkline.min.js"></script>
25 <script src=
"{{ url_prefix }}/static/libs/rivets/0.9.6/rivets.bundled.min.js"></script>
26 <script src=
"{{ url_prefix }}/static/libs/underscore.js/1.8.3/underscore-min.js"></script>
28 <script src=
"{{ url_prefix }}/static/AdminLTE-2.3.7/bootstrap/js/bootstrap.min.js"></script>
29 <script src=
"{{ url_prefix }}/static/AdminLTE-2.3.7/dist/js/app.min.js"></script>
30 <script src=
"{{ url_prefix }}/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.min.js"></script>
32 <script src=
"{{ url_prefix }}/static/libs/moment.js/2.17.1/moment.min.js"></script>
33 <script src=
"{{ url_prefix }}/static/libs/Chart.js/2.4.0/Chart.min.js"></script>
36 $(document).ready(function(){
37 var toplevel_data = {{ toplevel_data }};
38 var refresh_interval =
5000;
40 var refresh = function() {
41 $.get(
"{{ url_prefix }}/toplevel_data", function(data) {
42 _.extend(toplevel_data, data);
43 setTimeout(refresh, refresh_interval);
50 templateDelimiters: [
"{",
"}"]
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;"
63 rivets.formatters.health_ok = function(status_str) {
64 if (status_str ==
"HEALTH_OK") {
71 var truncate = function(n, max_width) {
72 var stringized = n.toString();
73 var parts = stringized.split(
".");
74 if (parts.length ==
1) {
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
84 return stringized.substring(
0, max_width);
89 var format_number = function(n, divisor, units) {
94 // People shouldn't really be passing null, but let's
95 // do something sensible instead of barfing.
99 while (Math.floor(n / (divisor**unit)).toString().length
> width -
1) {
105 truncated_float = truncate((n / Math.pow(divisor, unit)).toString(), width);
107 truncated_float = truncate(n, width);
110 return truncated_float + units[unit];
113 rivets.formatters.dimless = function(n){
114 return format_number(n,
1000, [' ', 'k', 'M', 'G', 'T', 'P'])
116 rivets.formatters.dimless_binary = function(n){
117 return format_number(n,
1024, ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']);
120 rivets.formatters.block_health_color = function(rbd_mirroring) {
121 if (rbd_mirroring.errors
> 0) {
122 return
"color: #ff0000";
123 } else if (rbd_mirroring.warnings
> 0) {
124 return
"color: #ffc200";
129 rivets.formatters.short_version = function(version) {
130 // Expect
"ceph version 1.2.3-g9asdasd (as98d7a0s8d7)"
131 var result = /ceph version\s+([^ ]+)\s+\(.+\)/.exec(version);
133 // Return the
"1.2.3-g9asdasd" part
136 // Unexpected format, pass it through
142 /* This is useful if you need to display some alternative text
143 * when a collection is empty using rv-hide */
144 rivets.formatters.length = function(val) {
148 rivets.formatters.hide_count_box = function(value) {
150 return (isNaN(value) || value ==
0)
153 rivets.bind($(
"#health"), toplevel_data);
154 rivets.bind($(
"section.sidebar"), toplevel_data);
155 setTimeout(refresh, refresh_interval);
159 <link rel=
"shortcut icon" href=
"https://ceph.com/wp-content/themes/cephTheme/Resources/Favicons/favicon-96x96.png">
160 <link rel=
"shortcut icon" href=
"{{ url_prefix }}/static/favicon.ico">
164 background-color: #
222d32;
169 background-color: #
222d32;
174 border-top-color: #b8c7ce;
182 background-color: #
222d32;
186 background-color: #
222d32;
190 background-color: #
222d32;
195 background-color: #
424d52;
205 font-family: monospace;
206 background-color: #
333;
210 .nav-tabs
>li.active
>a {
211 background-color: #
424d52;
228 table.ceph-chartbox {
243 .dataTables_wrapper .dataTables_filter {
247 .dataTables_wrapper .dataTables_filter input {
251 .dataTables_wrapper tbody td {
252 background-color: #
424d52;
256 .dataTables_wrapper .dataTables_paginate .ellipsis {
257 color: #ddd !important
260 .dataTables_wrapper .dataTables_paginate .paginate_button {
261 color: #ddd !important
264 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
265 color: #
424d52 !important
269 background-color: #
222d32;
272 .nav-tabs-custom
>.nav-tabs
>li{
275 .nav-tabs-custom
>.nav-tabs
>li
>a{
276 border-bottom-color: transparent;
279 .nav-tabs-custom
>.nav-tabs
>li.active
>a{
280 background-color: #
424d52;
283 .nav-tabs-custom
>.nav-tabs
>li.active:hover
>a{
284 background-color: #
66777f;
287 .nav-tabs-custom
>.tab-content {
288 background-color: #
424d52;
296 <body class=
"hold-transition sidebar-mini sidebar-collapse">
297 <div class=
"wrapper">
300 <header class=
"main-header">
302 <a href=
"{{ url_prefix }}/" class=
"logo">
303 <span class=
"logo-lg">
304 <img src=
"{{ url_prefix }}/static/Ceph_Logo_Standard_RGB_White_120411_fa.png"
305 width=
"123px" height=
"34px"/>
307 <span class=
"logo-mini">
308 <img src=
"{{ url_prefix }}/static/logo-mini.png"
309 width=
"34px" height=
"34px"/>
313 <!-- Header Navbar -->
314 <nav class=
"navbar navbar-static-top" role=
"navigation">
315 <!-- Sidebar toggle button-->
316 <a href=
"#" class=
"sidebar-toggle" data-toggle=
"offcanvas"
318 <span class=
"sr-only">Toggle navigation
</span>
321 <div id=
"health" style=
"font-size: 18px; padding: 12px 12px;">
322 <span rv-hide=
"health_status | health_ok" >
323 <span rv-style=
"health_status | health_color">
329 <!-- Navbar Right Menu -->
330 <div class=
"navbar-custom-menu">
331 <ul class=
"nav navbar-nav">
337 <!-- Left side column. contains the logo and sidebar -->
338 <aside class=
"main-sidebar skin-blue">
340 <!-- sidebar: style can be found in sidebar.less -->
341 <section class=
"sidebar">
342 <!-- Sidebar Menu -->
343 <ul class=
"sidebar-menu">
344 <!-- Optionally, you can add icons to the links -->
345 <li class=
"{%if path_info=='/' or path_info.startswith('/health')%}active{%endif%}">
346 <a href=
"{{ url_prefix }}/health">
347 <i class=
"fa fa-heartbeat" rv-style=
"health_status | health_color"></i>
348 <span>Cluster health
</span></a>
350 <li class=
"treeview{%if path_info.startswith(('/server', '/osd'))%} active{%endif%}">
351 <a href=
"#"><i class=
"fa fa-server"></i> <span>Cluster
</span>
352 <span class=
"pull-right-container">
353 <i class=
"fa fa-angle-left pull-right"></i>
356 <ul class=
"treeview-menu menu-open">
358 <a href=
"{{ url_prefix }}/servers">Servers
</a>
361 <a href=
"{{ url_prefix }}/osd">OSDs
</a>
365 <li class=
"treeview{%if path_info.startswith('/rbd')%} active{%endif%}">
367 <i class=
"fa fa-hdd-o" rv-style=
"rbd_mirroring | block_health_color"></i> <span>Block
</span>
368 <span class=
"pull-right-container">
369 <i class=
"fa fa-angle-left pull-right"></i>
372 <ul class=
"treeview-menu menu-open">
374 <a href=
"{{ url_prefix }}/rbd_mirroring">
375 <i class=
"fa fa-exchange"></i> Mirroring
376 <span class=
"pull-right-container">
377 <small rv-hide=
"rbd_mirroring.warnings | hide_count_box" class=
"label pull-right bg-yellow">{rbd_mirroring.warnings}
</small>
378 <small rv-hide=
"rbd_mirroring.errors | hide_count_box" class=
"label pull-right bg-red">{rbd_mirroring.errors}
</small>
383 <a href=
"{{ url_prefix }}/rbd_iscsi">
384 <i class=
"fa fa-upload"></i> iSCSI
385 <span class=
"pull-right-container" />
388 <li class=
"treeview{%if path_info.startswith('/rbd_pool')%} active menu-open{%endif%}">
390 <i class=
"fa fa-dot-circle-o"></i> <span>Pools
</span>
391 <span class=
"pull-right-container">
392 <i class=
"fa fa-angle-left pull-right"></i>
395 <ul class=
"treeview-menu">
396 <li rv-each-pool=
"rbd_pools">
397 <a rv-href=
"pool.url"><i class=
"fa fa-circle-o"></i> {pool.name}
</a>
399 <li class=
"ceph-none-found" rv-hide=
"rbd_pools | length">None found
</li>
404 <li class=
"treeview{%if path_info.startswith(('/filesystem/', '/clients/'))%} active{%endif%}">
405 <a href=
"#"><i class=
"fa fa-folder"></i> <span>Filesystems
</span>
406 <span class=
"pull-right-container">
407 <i class=
"fa fa-angle-left pull-right"></i>
410 <ul class=
"treeview-menu menu-open">
411 <li rv-each-filesystem=
"filesystems">
412 <a rv-href=
"filesystem.url">{filesystem.name}
</a>
414 <li class=
"ceph-none-found" rv-hide=
"filesystems | length">None found
</li>
418 <!-- /.sidebar-menu -->
423 <div id=
"content" class=
"content-wrapper">
425 {% block content %}{% endblock %}
428 <!-- /.content-wrapper -->
431 <footer class=
"main-footer">
432 <!-- To the right -->
433 <div class=
"pull-right hidden-xs">
436 <!-- Default to the left -->
437 <strong>Copyright
© 2016 by Ceph Contributors.
</strong> Free software (LGPL
2.1)
448 <!-- Bootstrap 3.3.6 -->
450 <!-- AdminLTE App -->