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