root / snf-astakos-app / astakos / im / static / im / js / usage.js @ a93f2d64
History | View | Annotate | Download (6.9 kB)
1 |
;(function() {
|
---|---|
2 |
|
3 |
|
4 |
// helper humanize methods
|
5 |
// https://github.com/taijinlee/humanize/blob/master/humanize.js
|
6 |
humanize = {}; |
7 |
humanize.filesize = function(filesize, kilo, decimals, decPoint, thousandsSep) { |
8 |
kilo = (kilo === undefined) ? 1024 : kilo; |
9 |
decimals = isNaN(decimals) ? 2 : Math.abs(decimals);
|
10 |
decPoint = (decPoint === undefined) ? '.' : decPoint; |
11 |
thousandsSep = (thousandsSep === undefined) ? ',' : thousandsSep; |
12 |
if (filesize <= 0) { return '0 bytes'; } |
13 |
|
14 |
var thresholds = [1]; |
15 |
var units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']; |
16 |
if (filesize < kilo) { return humanize.numberFormat(filesize, 0) + ' ' + units[0]; } |
17 |
|
18 |
for (var i = 1; i < units.length; i++) { |
19 |
thresholds[i] = thresholds[i-1] * kilo;
|
20 |
if (filesize < thresholds[i]) {
|
21 |
return humanize.numberFormat(filesize / thresholds[i-1], decimals, decPoint, thousandsSep) + ' ' + units[i-1]; |
22 |
} |
23 |
} |
24 |
|
25 |
// use the last unit if we drop out to here
|
26 |
return humanize.numberFormat(filesize / thresholds[units.length - 1], decimals, decPoint, thousandsSep) + ' ' + units[units.length - 1]; |
27 |
}; |
28 |
humanize.numberFormat = function(number, decimals, decPoint, thousandsSep) { |
29 |
decimals = isNaN(decimals) ? 2 : Math.abs(decimals);
|
30 |
decPoint = (decPoint === undefined) ? '.' : decPoint; |
31 |
thousandsSep = (thousandsSep === undefined) ? ',' : thousandsSep; |
32 |
|
33 |
var sign = number < 0 ? '-' : ''; |
34 |
number = Math.abs(+number || 0);
|
35 |
|
36 |
var intPart = parseInt(number.toFixed(decimals), 10) + ''; |
37 |
var j = intPart.length > 3 ? intPart.length % 3 : 0; |
38 |
|
39 |
return sign + (j ? intPart.substr(0, j) + thousandsSep : '') + intPart.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousandsSep) + (decimals ? decPoint + Math.abs(number - intPart).toFixed(decimals).slice(2) : ''); |
40 |
}; |
41 |
|
42 |
|
43 |
DO_LOG = false
|
44 |
LOG = DO_LOG ? _.bind(console.log, console) : function() {};
|
45 |
WARN = DO_LOG ? _.bind(console.warn, console) : function() {};
|
46 |
|
47 |
var default_usage_cls_map = {
|
48 |
0: 'green', |
49 |
33: 'yellow', |
50 |
66: 'red' |
51 |
} |
52 |
|
53 |
function UsageView(settings) { |
54 |
this.settings = settings;
|
55 |
this.url = this.settings.url; |
56 |
this.container = $(this.settings.container); |
57 |
this.meta = this.settings.meta; |
58 |
this.groups = this.settings.groups; |
59 |
this.el = {};
|
60 |
this.usage_cls_map = this.settings.usage_cls_map || default_usage_cls_map; |
61 |
this.initialize();
|
62 |
} |
63 |
|
64 |
|
65 |
_.extend(UsageView.prototype, { |
66 |
tpls: {
|
67 |
'main': '<div class="stats clearfix"><ul></ul></div>', |
68 |
'quotas': "#quotaTpl" |
69 |
}, |
70 |
|
71 |
initialize: function() { |
72 |
LOG("Initializing UsageView", this.settings); |
73 |
this.initResources();
|
74 |
|
75 |
// initial usage set ????
|
76 |
this.quotas = {};
|
77 |
if (this.settings.quotas && _.keys(this.settings.quotas).length > 0) { |
78 |
this.setQuotas(this.settings.quotas); |
79 |
} |
80 |
this.initLayout();
|
81 |
this.updateQuotas();
|
82 |
}, |
83 |
|
84 |
$: function(selector) { |
85 |
return this.container; |
86 |
}, |
87 |
|
88 |
render: function(tpl, params) { |
89 |
LOG("Rendering", tpl, params);
|
90 |
var tpl = this.tpls[tpl]; |
91 |
if (/^[#\.]/.exec(tpl)) { |
92 |
tpl = $(tpl).html();
|
93 |
} |
94 |
var rendered = Mustache.render(tpl, params);
|
95 |
return $(rendered); |
96 |
}, |
97 |
|
98 |
initLayout: function() { |
99 |
LOG("Initializing layout");
|
100 |
this.el.main = this.render('main'); |
101 |
this.container.append(this.el.main); |
102 |
var ul = this.container.find("ul"); |
103 |
this.el.list = this.render('quotas', { |
104 |
'resources':this.resources_ordered |
105 |
}); |
106 |
ul.append(this.el.list);
|
107 |
}, |
108 |
|
109 |
initResources: function() { |
110 |
var ordered = this.meta.resources_order; |
111 |
var resources = {};
|
112 |
var resources_ordered = [];
|
113 |
|
114 |
_.each(this.meta.resources, function(group, index) { |
115 |
_.each(group[1], function(resource, rindex) { |
116 |
var resource_index = ordered.length;
|
117 |
if (!_.contains(ordered, resource.name)) {
|
118 |
ordered.push(resource.name); |
119 |
} else {
|
120 |
resource_index = ordered.indexOf(resource.name); |
121 |
} |
122 |
resource.index = resource_index; |
123 |
resource.resource_name = resource.name.split(".")[1]; |
124 |
resources[resource.name] = resource; |
125 |
}) |
126 |
}); |
127 |
|
128 |
resources_ordered = _.map(ordered, function(rk) { return resources[rk] }); |
129 |
this.resources = resources;
|
130 |
this.resources_ordered = resources_ordered;
|
131 |
|
132 |
LOG("Resources initialized", this.resources_ordered, this.resources); |
133 |
}, |
134 |
|
135 |
updateLayout: function() { |
136 |
LOG("Updating layout", this.quotas); |
137 |
var self = this; |
138 |
_.each(this.quotas, function(value, key) { |
139 |
var usage = self.getUsage(key);
|
140 |
var el = self.$().find("li[data-resource='"+key+"']"); |
141 |
self.updateResourceElement(el, usage); |
142 |
}) |
143 |
}, |
144 |
|
145 |
updateResourceElement: function(el, usage) { |
146 |
el.find(".currValue").text(usage.curr);
|
147 |
el.find(".maxValue").text(usage.max);
|
148 |
el.find(".bar span").css({width:usage.perc+"%"}); |
149 |
el.find(".bar .value").text(usage.perc+"%"); |
150 |
var left = usage.label_left == 'auto' ? |
151 |
usage.label_left : usage.label_left + "%";
|
152 |
el.find(".bar .value").css({left:left}); |
153 |
el.find(".bar .value").css({color:usage.label_color}); |
154 |
el.removeClass("green yellow red");
|
155 |
el.addClass(usage.cls); |
156 |
}, |
157 |
|
158 |
getUsage: function(resource_name) { |
159 |
var resource = this.quotas[resource_name]; |
160 |
var resource_meta = this.resources[resource_name]; |
161 |
var value, limit, percentage;
|
162 |
|
163 |
limit = resource.limit; |
164 |
value = resource.usage; |
165 |
if (value < 0 ) { value = 0 } |
166 |
|
167 |
percentage = (value/limit) * 100;
|
168 |
if (value == 0) { percentage = 0 } |
169 |
if (value > limit) {
|
170 |
percentage = 100;
|
171 |
} |
172 |
|
173 |
if (resource_meta.unit == 'bytes') { |
174 |
value = humanize.filesize(value); |
175 |
limit = humanize.filesize(limit); |
176 |
} |
177 |
|
178 |
var cls = 'green'; |
179 |
_.each(this.usage_cls_map, function(ucls, u){ |
180 |
if (percentage >= u) {
|
181 |
cls = ucls |
182 |
} |
183 |
}) |
184 |
|
185 |
var label_left = percentage >= 30 ? percentage - 17 : 'auto'; |
186 |
var label_col = label_left == 'auto' ? 'inherit' : '#fff'; |
187 |
percentage = humanize.numberFormat(percentage, 0);
|
188 |
qdata = {'curr': value, 'max': limit, 'perc': percentage, 'cls': cls, |
189 |
'label_left': label_left, 'label_color': label_col} |
190 |
_.extend(qdata, resource); |
191 |
return qdata
|
192 |
}, |
193 |
|
194 |
setQuotas: function(data) { |
195 |
LOG("Set quotas", data);
|
196 |
var self = this; |
197 |
this.quotas = data;
|
198 |
_.each(this.quotas, function(v, k) { |
199 |
var r = self.resources[k];
|
200 |
var usage = self.getUsage(k);
|
201 |
r.usage = usage; |
202 |
self.resources[k].usage = usage; |
203 |
self.resources_ordered[r.index].usage = usage; |
204 |
}); |
205 |
}, |
206 |
|
207 |
_ajaxOptions: function() { |
208 |
var token = $.cookie(this.settings.cookie_name).split("|")[1]; |
209 |
return {
|
210 |
'url': this.url, |
211 |
'headers': {
|
212 |
'X-Auth-Token': token
|
213 |
}, |
214 |
} |
215 |
}, |
216 |
|
217 |
updateQuotas: function() { |
218 |
LOG("Updating quotas");
|
219 |
var self = this; |
220 |
this.getQuotas(function(data){ |
221 |
self.setQuotas(data.system); |
222 |
self.updateLayout(); |
223 |
}) |
224 |
}, |
225 |
|
226 |
getQuotas: function(callback) { |
227 |
var options = this._ajaxOptions(); |
228 |
options.success = callback; |
229 |
LOG("Calling quotas API", options);
|
230 |
$.ajax(options);
|
231 |
} |
232 |
|
233 |
}); |
234 |
|
235 |
window.UsageView = UsageView; |
236 |
})(); |