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