]>
Commit | Line | Data |
---|---|---|
31f18b77 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 | ||
11 | ||
12 | var hexdigits = function(v) { | |
13 | var i = Math.floor(v * 255); | |
14 | if (Math.floor(i) < 0x10) { | |
15 | return "0" + Math.floor(i).toString(16); | |
16 | } else { | |
17 | return Math.floor(i).toString(16); | |
18 | } | |
19 | }; | |
20 | ||
21 | var hexcolor = function(r, g, b) { | |
22 | return "#" + hexdigits(r) + hexdigits(g) + hexdigits(b); | |
23 | }; | |
24 | ||
25 | var last = {}; | |
26 | ||
27 | var render = function(element, counter) { | |
28 | var data = content_data.osd_histogram.osd[counter]; | |
29 | var hist_table = $(element); | |
30 | hist_table.empty(); | |
31 | ||
32 | var sum = 0.0; | |
33 | var max = 0.0; | |
34 | $.each(data.values, function(i, row) { | |
35 | $.each(row, function(j, col) { | |
36 | var val; | |
37 | if (!last[counter]) { | |
38 | val = col; | |
39 | } else { | |
40 | val = col - last[counter][i][j]; | |
41 | } | |
42 | sum += val; | |
43 | max = Math.max(max, val); | |
44 | }); | |
45 | }); | |
46 | ||
47 | ||
48 | $.each(data.values, function(i, row) { | |
49 | var tr = $("<tr style='height: 10px;'></tr>").appendTo(hist_table); | |
50 | $.each(row, function(j, col) { | |
51 | var td = $("<td style='width: 10px; height: 10px;'></td>").appendTo(tr); | |
52 | var val; | |
53 | if (!last[counter]) { | |
54 | val = col; | |
55 | } else { | |
56 | val = col - last[counter][i][j]; | |
57 | } | |
58 | ||
59 | ||
60 | var g; | |
61 | if (max) { | |
62 | g = (val / max); | |
63 | } else { | |
64 | g = 0.0; | |
65 | } | |
66 | var r = 1.0 - g; | |
67 | var b = 0.0; | |
68 | ||
69 | td.css("background-color", hexcolor(r, g, b)); | |
70 | }); | |
71 | }); | |
72 | ||
73 | last[counter] = data.values; | |
74 | }; | |
75 | ||
76 | var post_load = function() { | |
77 | content_data.osd_metadata_list = []; | |
78 | content_data.osd_list = []; | |
79 | _.each(content_data.osd_metadata, function(v, k) { | |
80 | content_data.osd_metadata_list.push({ | |
81 | key: k, | |
82 | value: v | |
83 | }); | |
84 | }); | |
85 | _.each(content_data.osd, function(v, k) { | |
86 | content_data.osd_list.push({ | |
87 | key: k, | |
88 | value: v | |
89 | }); | |
90 | }); | |
91 | render("#heatmap_write", | |
92 | "op_w_latency_in_bytes_histogram"); | |
93 | render("#heatmap_read", | |
94 | "op_r_latency_out_bytes_histogram"); | |
95 | }; | |
96 | ||
97 | rivets.bind($("div#content"), content_data); | |
98 | post_load(); | |
99 | ||
100 | var refresh = function() { | |
101 | $.get("/osd_perf_data/" + content_data.osd.osd + "/", function(data) { | |
102 | _.extend(content_data.osd_histogram, data.osd_histogram); | |
103 | _.extend(content_data.osd, data.osd); | |
104 | _.extend(content_data.osd_metadata, data.osd_metadata); | |
105 | ||
106 | post_load(); | |
107 | setTimeout(refresh, 3000); | |
108 | }); | |
109 | }; | |
110 | ||
111 | // Wait 1s to load irrespective of normal frequency, | |
112 | // to promptly load our first delta | |
113 | setTimeout(refresh, 1000); | |
114 | }); | |
115 | </script> | |
116 | ||
117 | ||
118 | <section class="content-header"> | |
119 | <h1> | |
120 | osd.{osd.osd} | |
121 | </h1> | |
122 | </section> | |
123 | ||
124 | <section class="content"> | |
125 | ||
126 | <table> | |
127 | <tr> | |
128 | <td> | |
129 | <h3>Writes</h3> | |
130 | <table id="heatmap_write"> | |
131 | </table> | |
132 | </td><td> </td><td> | |
133 | <h3>Reads</h3> | |
134 | <table id="heatmap_read"> | |
135 | </table> | |
136 | </td> | |
137 | </tr> | |
138 | </table> | |
139 | ||
140 | <div class="box"> | |
141 | <div class="box-header"> | |
142 | <h3 class="box-title">Attributes (OSD map)</h3> | |
143 | </div> | |
144 | <div class="box-body"> | |
145 | <table> | |
146 | <thead> | |
147 | <tr> | |
148 | <th>Key</th> | |
149 | <th>Value</th> | |
150 | </tr> | |
151 | </thead> | |
152 | <tbody> | |
153 | <tr rv-each-item="osd_list"> | |
154 | <td>{item.key}</td> | |
155 | <td>{item.value}</td> | |
156 | </tr> | |
157 | </tbody> | |
158 | </table> | |
159 | </div> | |
160 | </div> | |
161 | ||
162 | <div class="box"> | |
163 | <div class="box-header"> | |
164 | <h3 class="box-title">Metadata</h3> | |
165 | </div> | |
166 | <div class="box-body"> | |
167 | <table> | |
168 | <thead> | |
169 | <tr> | |
170 | <th>Key</th> | |
171 | <th>Value</th> | |
172 | </tr> | |
173 | </thead> | |
174 | <tbody> | |
175 | <tr rv-each-meta_item="osd_metadata_list"> | |
176 | <td>{meta_item.key}</td> | |
177 | <td>{meta_item.value}</td> | |
178 | </tr> | |
179 | </tbody> | |
180 | </table> | |
181 | </div> | |
182 | </div> | |
183 | ||
184 | ||
185 | </section> | |
186 | <!-- /.content --> | |
187 | ||
188 | {% endblock %} |