]>
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"> | |
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: | |
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 © 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> |