1 {% extends
"base.html" %}
6 $(document).ready(function(){
7 // Pre-populated initial data at page load
8 var content_data = {{ content_data }};
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);
15 return Math.floor(i).toString(
16);
19 var hexcolor = function(r, g, b) {
20 return
"#" + hexdigits(r) + hexdigits(g) + hexdigits(b);
25 var render = function(element, counter) {
26 var data = content_data.osd_histogram.osd[counter];
27 var hist_table = $(element);
32 $.each(data.values, function(i, row) {
33 $.each(row, function(j, col) {
38 val = col - last[counter][i][j];
41 max = Math.max(max, val);
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);
54 val = col - last[counter][i][j];
67 td.css(
"background-color", hexcolor(r, g, b));
71 last[counter] = data.values;
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({
83 _.each(content_data.osd, function(v, k) {
84 content_data.osd_list.push({
89 render(
"#heatmap_write",
90 "op_w_latency_in_bytes_histogram");
91 render(
"#heatmap_read",
92 "op_r_latency_out_bytes_histogram");
95 rivets.bind($(
"div#content"), content_data);
98 var refresh = function() {
99 $.get(
"{{ url_prefix }}/osd/perf_data/" + content_data.osd.osd +
"/", function(data) {
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);
105 setTimeout(refresh,
3000);
109 // Wait
1s to load irrespective of normal frequency,
110 // to promptly load our first delta
111 setTimeout(refresh,
1000);
116 <section class=
"content-header">
122 <section class=
"content">
128 <table id=
"heatmap_write">
130 </td><td> </td><td>
132 <table id=
"heatmap_read">
139 <div class=
"box-header">
140 <h3 class=
"box-title">Attributes (OSD map)
</h3>
142 <div class=
"box-body">
151 <tr rv-each-item=
"osd_list">
153 <td>{item.value}
</td>
161 <div class=
"box-header">
162 <h3 class=
"box-title">Metadata
</h3>
164 <div class=
"box-body">
173 <tr rv-each-meta_item=
"osd_metadata_list">
174 <td>{meta_item.key}
</td>
175 <td>{meta_item.value}
</td>