9 <meta content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
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">
22 <script src=
"/static/AdminLTE-2.3.7/plugins/jQuery/jquery-2.2.3.min.js"></script>
24 <script src=
"/static/rivets.bundled.min.js"></script>
25 <script src=
"/static/underscore-min.js"></script>
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>
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>
36 $(document).ready(function(){
37 var toplevel_data = {{ toplevel_data }};
38 var refresh_interval =
5000;
40 var refresh = function() {
41 $.get(
"/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) {
93 while (Math.floor(n / (divisor**unit)).toString().length
> width -
1) {
99 truncated_float = truncate((n / Math.pow(divisor, unit)).toString(), width);
101 truncated_float = truncate(n, width);
104 return truncated_float + units[unit];
107 rivets.formatters.dimless = function(n){
108 return format_number(n,
1000, [' ', 'k', 'M', 'G', 'T', 'P'])
110 rivets.formatters.dimless_binary = function(n){
111 return format_number(n,
1024, ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']);
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) {
120 rivets.bind($(
"#health"), toplevel_data);
121 rivets.bind($(
"section.sidebar"), toplevel_data);
122 setTimeout(refresh, refresh_interval);
126 <link rel=
"shortcut icon" href=
"http://ceph.com/wp-content/themes/ceph/favicon.ico">
127 <link rel=
"shortcut icon" href=
"/static/favicon.ico">
131 background-color: #
222d32;
136 background-color: #
222d32;
141 border-top-color: #b8c7ce;
149 background-color: #
222d32;
153 background-color: #
222d32;
157 background-color: #
222d32;
162 background-color: #
424d52;
172 font-family: monospace;
173 background-color: #
333;
177 .nav-tabs
>li.active
>a {
178 background-color: #
424d52;
195 table.ceph-chartbox {
209 <body class=
"hold-transition sidebar-mini sidebar-collapse">
210 <div class=
"wrapper">
213 <header class=
"main-header">
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"/>
220 <span class=
"logo-mini">
221 <img src=
"/static/logo-mini.png"
222 width=
"34px" height=
"34px"/>
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"
231 <span class=
"sr-only">Toggle navigation
</span>
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">
242 <!-- Navbar Right Menu -->
243 <div class=
"navbar-custom-menu">
244 <ul class=
"nav navbar-nav">
250 <!-- Left side column. contains the logo and sidebar -->
251 <aside class=
"main-sidebar skin-blue">
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>
262 <li><a href=
"/servers">
263 <i class=
"fa fa-server"></i>
264 <span>Servers
</span></a>
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>
272 <ul class=
"treeview-menu menu-open">
273 <li rv-each-pool=
"rbd_pools">
274 <a rv-href=
"pool.url">{pool.name}
</a>
276 <li class=
"ceph-none-found" rv-hide=
"rbd_pools | length">None found
</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>
285 <ul class=
"treeview-menu menu-open">
286 <li rv-each-filesystem=
"filesystems">
287 <a rv-href=
"filesystem.url">{filesystem.name}
</a>
289 <li class=
"ceph-none-found" rv-hide=
"filesystems | length">None found
</li>
293 <!-- /.sidebar-menu -->
298 <div id=
"content" class=
"content-wrapper">
300 {% block content %}{% endblock %}
303 <!-- /.content-wrapper -->
306 <footer class=
"main-footer">
307 <!-- To the right -->
308 <div class=
"pull-right hidden-xs">
311 <!-- Default to the left -->
312 <strong>Copyright
© 2016 by Ceph Contributors.
</strong> Free software (LGPL
2.1)
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>
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">
329 <a href=
"javascript::;">
330 <i class=
"menu-icon fa fa-birthday-cake bg-red"></i>
332 <div class=
"menu-info">
333 <h4 class=
"control-sidebar-subheading">Langdon's Birthday
</h4>
335 <p>Will be
23 on April
24th
</p>
340 <!-- /.control-sidebar-menu -->
342 <h3 class=
"control-sidebar-heading">Tasks Progress
</h3>
343 <ul class=
"control-sidebar-menu">
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>
353 <div class=
"progress progress-xxs">
354 <div class=
"progress-bar progress-bar-danger" style=
"width: 70%"></div>
359 <!-- /.control-sidebar-menu -->
363 <!-- Stats tab content -->
364 <div class=
"tab-pane" id=
"control-sidebar-stats-tab">Stats Tab Content
</div>
366 <!-- Settings tab content -->
367 <div class=
"tab-pane" id=
"control-sidebar-settings-tab">
369 <h3 class=
"control-sidebar-heading">General Settings
</h3>
371 <div class=
"form-group">
372 <label class=
"control-sidebar-subheading">
374 <input type=
"checkbox" class=
"pull-right" checked
>
378 Some information about this general settings option
381 <!-- /.form-group -->
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>
400 <!-- Bootstrap 3.3.6 -->
402 <!-- AdminLTE App -->