Revision 4df9dfc9 snf-astakos-app/astakos/im/static/im/js/usage.js
b/snf-astakos-app/astakos/im/static/im/js/usage.js | ||
---|---|---|
40 | 40 |
}; |
41 | 41 |
|
42 | 42 |
|
43 |
DO_LOG = false |
|
43 |
DO_LOG = false;
|
|
44 | 44 |
LOG = DO_LOG ? _.bind(console.log, console) : function() {}; |
45 | 45 |
WARN = DO_LOG ? _.bind(console.warn, console) : function() {}; |
46 | 46 |
|
... | ... | |
53 | 53 |
function UsageView(settings) { |
54 | 54 |
this.settings = settings; |
55 | 55 |
this.url = this.settings.url; |
56 |
this.projects_url = this.settings.projects_url; |
|
56 | 57 |
this.container = $(this.settings.container); |
57 | 58 |
this.meta = this.settings.meta; |
58 | 59 |
this.groups = this.settings.groups; |
60 |
this.projects = {}; |
|
59 | 61 |
this.el = {}; |
62 |
this.updating_projects = false; |
|
60 | 63 |
this.usage_cls_map = this.settings.usage_cls_map || default_usage_cls_map; |
61 | 64 |
this.initialize(); |
62 | 65 |
} |
... | ... | |
65 | 68 |
_.extend(UsageView.prototype, { |
66 | 69 |
tpls: { |
67 | 70 |
'main': '<div class="stats clearfix"><ul></ul></div>', |
68 |
'quotas': "#quotaTpl" |
|
71 |
'quotas': "#quotaTpl", |
|
72 |
'projectQuota': "#projectQuotaTpl" |
|
69 | 73 |
}, |
70 | 74 |
|
71 | 75 |
initialize: function() { |
72 | 76 |
LOG("Initializing UsageView", this.settings); |
77 |
this.updateProjects(this.meta.projects_details); |
|
73 | 78 |
this.initResources(); |
74 | 79 |
|
75 | 80 |
// initial usage set ???? |
... | ... | |
78 | 83 |
this.setQuotas(this.settings.quotas); |
79 | 84 |
} |
80 | 85 |
this.initLayout(); |
81 |
this.updateQuotas(); |
|
82 | 86 |
}, |
83 | 87 |
|
84 | 88 |
$: function(selector) { |
... | ... | |
101 | 105 |
this.container.append(this.el.main); |
102 | 106 |
var ul = this.container.find("ul"); |
103 | 107 |
this.el.list = this.render('quotas', { |
104 |
'resources': this.resources_ordered |
|
108 |
'resources': this.resources_ordered,
|
|
105 | 109 |
}); |
106 |
ul.append(this.el.list); |
|
110 |
ul.append(this.el.list).hide(); |
|
111 |
_.each(this.resources_ordered, function(resource) { |
|
112 |
this.renderResourceProjects(this.container, resource); |
|
113 |
}, this); |
|
114 |
this.updateQuotas(); |
|
115 |
ul.show(); |
|
107 | 116 |
}, |
108 | 117 |
|
118 |
renderResourceProjects: function(list, resource) { |
|
119 |
var resource_el = list.find("li[data-resource='"+resource.name+"']"); |
|
120 |
var projects_el = resource_el.find(".projects"); |
|
121 |
projects_el.empty(); |
|
122 |
_.each(resource.projects_list, function(project) { |
|
123 |
_.extend(project, {report_desc: resource.report_desc}); |
|
124 |
projects_el.append(this.render('projectQuota', project)); |
|
125 |
}, this); |
|
126 |
}, |
|
127 |
|
|
109 | 128 |
initResources: function() { |
110 | 129 |
var ordered = this.meta.resources_order; |
111 | 130 |
var resources = {}; |
112 | 131 |
var resources_ordered = []; |
132 |
var projects = this.projects; |
|
113 | 133 |
|
114 | 134 |
_.each(this.meta.resources, function(group, index) { |
115 | 135 |
_.each(group[1], function(resource, rindex) { |
116 | 136 |
resource.resource_name = resource.name.split(".")[1]; |
117 | 137 |
resources[resource.name] = resource; |
118 |
})
|
|
119 |
}); |
|
138 |
}, this);
|
|
139 |
}, this);
|
|
120 | 140 |
|
121 |
resources_ordered = _.filter(_.map(ordered,
|
|
122 |
function(rk, index) {
|
|
123 |
rk.index = index;
|
|
124 |
return resources[rk]
|
|
125 |
}),
|
|
126 |
function(i) { return i}); |
|
141 |
resources_ordered = _.filter( |
|
142 |
_.map(ordered, function(rk, index) {
|
|
143 |
rk.index = index; |
|
144 |
return resources[rk] |
|
145 |
}), function(i) { return i });
|
|
146 |
|
|
127 | 147 |
this.resources = resources; |
128 | 148 |
this.resources_ordered = resources_ordered; |
129 | 149 |
|
130 | 150 |
LOG("Resources initialized", this.resources_ordered, this.resources); |
131 | 151 |
}, |
152 |
|
|
153 |
updateProject: function(uuid, details) { |
|
154 |
LOG("Update project", uuid, details); |
|
155 |
this.projects[uuid] = details; |
|
156 |
}, |
|
157 |
|
|
158 |
addProject: function(uuid, details) { |
|
159 |
LOG("New project", uuid, details); |
|
160 |
this.projects[uuid] = details; |
|
161 |
}, |
|
162 |
|
|
163 |
updateProjects: function(projects, uuids) { |
|
164 |
this.projects = {}; |
|
165 |
_.each(projects, function(details) { |
|
166 |
if (this.projects[details.id]) { |
|
167 |
this.updateProject(details.id, details); |
|
168 |
} else { |
|
169 |
this.addProject(details.id, details); |
|
170 |
} |
|
171 |
}, this); |
|
172 |
LOG("Projects updated", this.projects); |
|
173 |
}, |
|
132 | 174 |
|
133 | 175 |
updateLayout: function() { |
134 | 176 |
LOG("Updating layout", this.quotas); |
... | ... | |
137 | 179 |
var usage = self.getUsage(key); |
138 | 180 |
if (!usage) { return } |
139 | 181 |
var el = self.$().find("li[data-resource='"+key+"']"); |
140 |
self.updateResourceElement(el, usage); |
|
182 |
self.updateResourceElement(el.find(".summary.resource-bar"), usage); |
|
183 |
_.each(self.resources[key].projects_list, function(project){ |
|
184 |
var project_el = el.find(".project-" + project.id); |
|
185 |
if (project_el.length === 0) { |
|
186 |
self.renderResourceProjects(self.container, self.resources[key]); |
|
187 |
} else { |
|
188 |
self.updateResourceElement(project_el, project.usage); |
|
189 |
} |
|
190 |
}); |
|
191 |
var project_ids = _.keys(self.project_quotas); |
|
192 |
_.each(el.find(".resource-bar.project"), function(el) { |
|
193 |
if (project_ids.indexOf($(el).data("project")) == -1) { |
|
194 |
self.renderResourceProjects(self.container, self.resources[key]); |
|
195 |
} |
|
196 |
}) |
|
141 | 197 |
}) |
142 | 198 |
}, |
143 | 199 |
|
144 | 200 |
updateResourceElement: function(el, usage) { |
201 |
var bar_el = el.find(".bar span"); |
|
202 |
var bar_value = el.find(".bar .value"); |
|
203 |
|
|
145 | 204 |
el.find(".currValue").text(usage.curr); |
146 | 205 |
el.find(".maxValue").text(usage.max); |
147 |
el.find(".bar span").css({width:usage.perc+"%"});
|
|
148 |
el.find(".bar .value").text(usage.perc+"%");
|
|
206 |
bar_el.css({width:usage.perc+"%"});
|
|
207 |
bar_value.text(usage.perc+"%");
|
|
149 | 208 |
var left = usage.label_left == 'auto' ? |
150 | 209 |
usage.label_left : usage.label_left + "%"; |
151 |
el.find(".bar .value").css({left:left});
|
|
152 |
el.find(".bar .value").css({color:usage.label_color});
|
|
210 |
bar_value.css({left:left});
|
|
211 |
bar_value.css({color:usage.label_color});
|
|
153 | 212 |
el.removeClass("green yellow red"); |
154 | 213 |
el.addClass(usage.cls); |
214 |
if (el.hasClass("summary")) { |
|
215 |
el.parent().removeClass("green yellow red"); |
|
216 |
el.parent().addClass(usage.cls); |
|
217 |
}; |
|
155 | 218 |
}, |
156 | 219 |
|
157 |
getUsage: function(resource_name) { |
|
158 |
var resource = this.quotas[resource_name]; |
|
220 |
getUsage: function(resource_name, quotas) {
|
|
221 |
var resource = quotas ? quotas[resource_name] : this.quotas[resource_name];
|
|
159 | 222 |
var resource_meta = this.resources[resource_name]; |
160 | 223 |
if (!resource_meta) { return } |
161 | 224 |
var value, limit, percentage; |
... | ... | |
182 | 245 |
} |
183 | 246 |
}) |
184 | 247 |
|
185 |
var label_left = percentage >= 30 ? percentage - 17 : 'auto';
|
|
248 |
var label_left = percentage >= 30 ? percentage - 17 : 'auto'; |
|
186 | 249 |
var label_col = label_left == 'auto' ? 'inherit' : '#fff'; |
250 |
if (label_left != 'auto') { label_left = label_left + "%" } |
|
187 | 251 |
percentage = humanize.numberFormat(percentage, 0); |
188 | 252 |
qdata = {'curr': value, 'max': limit, 'perc': percentage, 'cls': cls, |
189 | 253 |
'label_left': label_left, 'label_color': label_col} |
190 | 254 |
_.extend(qdata, resource); |
191 | 255 |
return qdata |
192 | 256 |
}, |
193 |
|
|
194 |
setQuotas: function(data) { |
|
257 |
|
|
258 |
setQuotas: function(data, update_projects) {
|
|
195 | 259 |
LOG("Set quotas", data); |
260 |
this.last_quota_received = data; |
|
261 |
var project_uuids = _.keys(data); |
|
262 |
|
|
196 | 263 |
var self = this; |
197 |
this.quotas = data; |
|
264 |
var sums = {}; |
|
265 |
_.each(data, function(quotas, project_uuid) { |
|
266 |
_.each(quotas, function(values, qname) { |
|
267 |
if (!sums[qname]) { |
|
268 |
sums[qname] = {}; |
|
269 |
} |
|
270 |
var qitem = sums[qname]; |
|
271 |
_.each(values, function(value, param) { |
|
272 |
var current = qitem[param]; |
|
273 |
qitem[param] = current ? qitem[param] + value : value; |
|
274 |
}, this); |
|
275 |
}); |
|
276 |
}, this); |
|
277 |
|
|
278 |
this.project_quotas = data; |
|
279 |
this.quotas = sums; |
|
198 | 280 |
_.each(this.quotas, function(v, k) { |
199 | 281 |
var r = self.resources[k]; |
200 | 282 |
var usage = self.getUsage(k); |
... | ... | |
204 | 286 |
if (!self.resources_ordered[r.index]) { return } |
205 | 287 |
self.resources_ordered[r.index].usage = usage; |
206 | 288 |
}); |
289 |
|
|
290 |
var active_project_uuids = _.keys(this.project_quotas); |
|
291 |
var project_change = false; |
|
292 |
_.each(this.project_quotas, function(resources, uuid) { |
|
293 |
if (project_change) { return } |
|
294 |
_.each(resources, function(v, k){ |
|
295 |
if (project_change) { return } |
|
296 |
|
|
297 |
if (!self.resources[k]) { return } |
|
298 |
if (!self.resources[k].projects) { |
|
299 |
self.resources[k].projects = {}; |
|
300 |
self.resources[k].projects_list = []; |
|
301 |
} |
|
302 |
|
|
303 |
var resource = self.resources[k]; |
|
304 |
var project_usage = self.getUsage(k, resources); |
|
305 |
var resource_projects_list = self.resources[k].projects_list; |
|
306 |
|
|
307 |
if (!self.projects[uuid]) { |
|
308 |
self.getProjects(function(data) { |
|
309 |
self.updateProjects(data); |
|
310 |
self.setQuotas(self.last_quota_received); |
|
311 |
self.updateLayout(); |
|
312 |
}); |
|
313 |
|
|
314 |
project_change = true; |
|
315 |
return; |
|
316 |
} |
|
317 |
if (!project_usage) { return; } |
|
318 |
|
|
319 |
if (!resource.projects[uuid]) { |
|
320 |
resource.projects[uuid] = _.clone(self.projects[uuid]); |
|
321 |
if (self.projects[uuid].base_project) { |
|
322 |
resource.projects[uuid].name = 'User quota' |
|
323 |
} |
|
324 |
} |
|
325 |
var resource_project = resource.projects[uuid]; |
|
326 |
resource_project.usage = project_usage; |
|
327 |
|
|
328 |
if (resource_project.index === undefined) { |
|
329 |
resource_project.index = resource_projects_list.length; |
|
330 |
resource_projects_list.push(resource_project); |
|
331 |
} else { |
|
332 |
resource_projects_list[resource_project.index] = resource_project; |
|
333 |
} |
|
334 |
|
|
335 |
_.each(resource.projects, function(project, uuid) { |
|
336 |
if (active_project_uuids.indexOf(uuid) == -1) { |
|
337 |
var index = resource.projects[uuid].index; |
|
338 |
delete resource.projects[uuid]; |
|
339 |
delete resource.projects_list[index]; |
|
340 |
} |
|
341 |
}); |
|
342 |
}); |
|
343 |
|
|
344 |
}); |
|
345 |
|
|
207 | 346 |
}, |
208 | 347 |
|
209 |
_ajaxOptions: function() { |
|
348 |
_ajaxOptions: function(url) {
|
|
210 | 349 |
var token = $.cookie(this.settings.cookie_name).split("|")[1]; |
211 | 350 |
return { |
212 |
'url': this.url, |
|
351 |
'url': url || this.url,
|
|
213 | 352 |
'headers': { |
214 | 353 |
'X-Auth-Token': token |
215 | 354 |
}, |
... | ... | |
220 | 359 |
LOG("Updating quotas"); |
221 | 360 |
var self = this; |
222 | 361 |
this.getQuotas(function(data){ |
223 |
self.setQuotas(data.system);
|
|
362 |
self.setQuotas(data, true);
|
|
224 | 363 |
self.updateLayout(); |
225 | 364 |
}) |
226 | 365 |
}, |
227 | 366 |
|
367 |
getProjects: function(callback) { |
|
368 |
var options = this._ajaxOptions(this.projects_url); |
|
369 |
options.success = callback; |
|
370 |
LOG("Calling projects API", options); |
|
371 |
$.ajax(options); |
|
372 |
}, |
|
373 |
|
|
228 | 374 |
getQuotas: function(callback) { |
375 |
if (this.updating_projects) { return } |
|
229 | 376 |
var options = this._ajaxOptions(); |
230 | 377 |
options.success = callback; |
231 | 378 |
LOG("Calling quotas API", options); |
Also available in: Unified diff