]>
Commit | Line | Data |
---|---|---|
c07f9fc5 FG |
1 | {% extends "base.html" %} |
2 | ||
3 | {% block content %} | |
4 | ||
5 | <script> | |
6 | $(document).ready(function(){ | |
7 | // Pre-populated initial data at page load | |
8 | var content_data = {{ content_data }}; | |
9 | ||
10 | var refresh = function() { | |
3efd9988 | 11 | $.get("{{ url_prefix }}/rbd_iscsi_data", function(data) { |
c07f9fc5 | 12 | _.extend(content_data, data); |
b32b8144 FG |
13 | $('.inlinesparkline').sparkline(); |
14 | setTimeout(refresh, 5000); | |
c07f9fc5 FG |
15 | }); |
16 | }; | |
17 | ||
18 | console.log(content_data); | |
19 | ||
b32b8144 FG |
20 | rivets.formatters.relative_date = function(date_str) { |
21 | if (!date_str) { | |
22 | return "unknown"; | |
23 | } | |
24 | return moment(date_str * 1000).fromNow(); | |
25 | } | |
26 | ||
27 | rivets.formatters.sparkline_data = function(time_series) { | |
28 | result = ""; | |
29 | for (var i = 1; i < time_series.length; ++i) { | |
30 | var delta_v = time_series[i][1] - time_series[i - 1][1]; | |
31 | var delta_t = time_series[i][0] - time_series[i - 1][0]; | |
32 | result += (delta_v / delta_t + ","); | |
33 | } | |
34 | return result; | |
35 | }; | |
36 | ||
c07f9fc5 | 37 | rivets.bind($("div#content"), content_data); |
b32b8144 FG |
38 | $('.inlinesparkline').sparkline(); |
39 | setTimeout(refresh, 5000); | |
c07f9fc5 FG |
40 | |
41 | $('#daemons').DataTable({ | |
42 | 'paging' : true, | |
43 | 'pageLength' : 5, | |
44 | 'lengthChange': false, | |
45 | 'info' : false, | |
46 | 'autoWidth' : false, | |
47 | 'searching' : false | |
48 | }); | |
49 | ||
50 | $('#images').DataTable({ | |
51 | 'paging' : true, | |
52 | 'pageLength' : 10, | |
53 | 'lengthChange': false, | |
54 | 'searching' : true, | |
55 | 'ordering' : true, | |
56 | 'info' : false | |
57 | }); | |
58 | }); | |
59 | </script> | |
60 | ||
61 | ||
62 | <section class="content-header"> | |
63 | <h1> | |
64 | Block iSCSI | |
65 | </h1> | |
66 | </section> | |
67 | ||
68 | <section class="content"> | |
69 | <div class="box"> | |
70 | <div class="box-header"> | |
71 | <h3 class="box-title">Daemons</h3> | |
72 | </div> | |
73 | <div class="box-body"> | |
74 | <table id="daemons" class="table table-condensed"> | |
75 | <thead> | |
76 | <tr> | |
77 | <th>Hostname</th> | |
78 | <th># Active/Optimized</th> | |
79 | <th># Active/Non-Optimized</th> | |
80 | <th>Version</th> | |
81 | </tr> | |
82 | </thead> | |
83 | <tbody> | |
84 | <tr rv-each-daemon="daemons"> | |
85 | <td>{daemon.server_hostname}</td> | |
86 | <td>{daemon.optimized_paths}</td> | |
87 | <td>{daemon.non_optimized_paths}</td> | |
88 | <td>{daemon.version | short_version}</td> | |
89 | </tr> | |
90 | </tbody> | |
91 | </table> | |
92 | </div> | |
93 | </div> | |
94 | ||
95 | <div class="box"> | |
96 | <div class="box-header"> | |
97 | <h3 class="box-title">Images</h3> | |
98 | </div> | |
99 | <div class="box-body"> | |
100 | <table id="images" class="table table-condensed"> | |
101 | <thead> | |
102 | <tr> | |
103 | <th>Pool</th> | |
104 | <th>Image</th> | |
105 | <th>Active/Optimized</th> | |
106 | <th>Active/Non-Optimized</th> | |
b32b8144 FG |
107 | <th>Read Bytes</th> |
108 | <th>Write Bytes</th> | |
109 | <th>Read Ops</th> | |
110 | <th>Write Ops</th> | |
111 | <th>A/O Since</th> | |
c07f9fc5 FG |
112 | </tr> |
113 | </thead> | |
114 | <tbody> | |
115 | <tr rv-each-image="images"> | |
116 | <td>{image.pool_name}</td> | |
117 | <td>{image.name}</td> | |
118 | <td>{image.optimized_paths}</td> | |
119 | <td>{image.non_optimized_paths}</td> | |
b32b8144 FG |
120 | <td>{image.stats.rd_bytes | dimless_binary}/s <span class="inlinesparkline" rv-html="image.stats_history.rd_bytes | sparkline_data"></span></td> |
121 | <td>{image.stats.wr_bytes | dimless_binary}/s <span class="inlinesparkline" rv-html="image.stats_history.wr_bytes | sparkline_data"></span></td> | |
122 | <td>{image.stats.rd | dimless}/s</td> | |
123 | <td>{image.stats.wr | dimless}/s</td> | |
124 | <td>{image.optimized_since | relative_date}</td> | |
c07f9fc5 FG |
125 | </tr> |
126 | </tbody> | |
127 | </table> | |
128 | </div> | |
129 | </div> | |
130 | </section> | |
131 | <!-- /.content --> | |
132 | ||
133 | {% endblock %} |