root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / okeanos-ember.js @ e0d90534
History | View | Annotate | Download (12.4 kB)
1 |
/* Init Application */
|
---|---|
2 |
|
3 |
window.Synnefo = Ember.Application.create({ |
4 |
currentPath: 'vms', |
5 |
LOG_TRANSITIONS: true, // To have Ember write out transition events to the log (it can be helpful to see exactly what is going on with the router) |
6 |
}); |
7 |
|
8 |
Synnefo.ApplicationAdapter = DS.FixtureAdapter.extend();;Ember.Inflector.inflector.uncountable('account');
|
9 |
|
10 |
Synnefo.Account = DS.Model.extend({ |
11 |
email: DS.attr('string') |
12 |
}); |
13 |
|
14 |
// CHECK can i use a single obj and not an array of obj
|
15 |
Synnefo.Account.FIXTURES = { |
16 |
id: 001, |
17 |
email: "athina@mail.com" |
18 |
}; |
19 |
|
20 |
|
21 |
|
22 |
Synnefo.Vm = DS.Model.extend({ |
23 |
// id: DS.attr('number'), we do not define it ;)
|
24 |
name: DS.attr('string'), |
25 |
hostname: DS.attr('string'), |
26 |
status: DS.attr('string'), |
27 |
os: DS.attr()
|
28 |
}); |
29 |
|
30 |
Synnefo.Vm.FIXTURES = |
31 |
[{ |
32 |
id: 125355, |
33 |
name: "web-server", |
34 |
hostname: "user@snf-38389.vm.okeanos.grnet.gr", |
35 |
status: "running", |
36 |
os: "kubuntu" |
37 |
}, |
38 |
{ |
39 |
id: 12, |
40 |
name: "another-server", |
41 |
hostname: "user@snf-33333.vm.okeanos.grnet.gr", |
42 |
status: "off", |
43 |
os: "fedora" |
44 |
}]; |
45 |
|
46 |
Synnefo.Network = DS.Model.extend({ |
47 |
name: DS.attr('string'), |
48 |
status: DS.attr('string'), |
49 |
}); |
50 |
|
51 |
Synnefo.Network.FIXTURES = |
52 |
[{ |
53 |
id: 11, |
54 |
name: 'Network-1', |
55 |
status: 'running' |
56 |
}, |
57 |
{ |
58 |
id: 22, |
59 |
name: 'Network-2', |
60 |
status: 'error' |
61 |
}]; |
62 |
|
63 |
|
64 |
Synnefo.Volume = DS.Model.extend({ |
65 |
name: DS.attr('string'), |
66 |
status: DS.attr('string'), |
67 |
}); |
68 |
|
69 |
Synnefo.Volume.FIXTURES = |
70 |
[{ |
71 |
id: 111, |
72 |
name: 'Volume-1', |
73 |
status: 'running' |
74 |
}, |
75 |
{ |
76 |
id: 222, |
77 |
name: 'Volume-2', |
78 |
status: 'building' |
79 |
}]; |
80 |
|
81 |
Synnefo.Snapshot = DS.Model.extend({ |
82 |
name: DS.attr('string'), |
83 |
status: DS.attr('string'), |
84 |
}); |
85 |
|
86 |
Synnefo.Snapshot.FIXTURES = |
87 |
[{ |
88 |
id: 33, |
89 |
name: 'Snapshot-1', |
90 |
status: 'running' |
91 |
}, |
92 |
{ |
93 |
id: 44, |
94 |
name: 'Snapshot-2', |
95 |
status: 'building' |
96 |
}]; |
97 |
|
98 |
|
99 |
Synnefo.UserImage = DS.Model.extend({ |
100 |
name: DS.attr('string'), |
101 |
status: DS.attr('string'), |
102 |
}); |
103 |
|
104 |
Synnefo.UserImage.FIXTURES = |
105 |
[{ |
106 |
id: 55, |
107 |
name: 'Image-1', |
108 |
status: 'running' |
109 |
}, |
110 |
{ |
111 |
id: 66, |
112 |
name: 'Image-2', |
113 |
status: 'running' |
114 |
}]; |
115 |
|
116 |
|
117 |
Synnefo.conf = { |
118 |
sectors: [{
|
119 |
destination: "vms", |
120 |
title: "Virtual Machines", |
121 |
icon: "snf-pc-outline" |
122 |
}, |
123 |
{ |
124 |
destination: "networks", |
125 |
title: "Network", |
126 |
icon: "snf-network-outline" |
127 |
|
128 |
}, |
129 |
{ |
130 |
destination: "volumes", |
131 |
title: "Volumes", |
132 |
icon: "snf-volume-outline" |
133 |
}, |
134 |
{ |
135 |
destination: "pithos", |
136 |
title: "Pithos", |
137 |
icon: "snf-pithos-outline" |
138 |
}, |
139 |
{ |
140 |
destination: "images", |
141 |
title: "Images", |
142 |
icon: "snf-image-outline" |
143 |
}, |
144 |
{ |
145 |
destination: "snapshots", |
146 |
title: "Snapshots", |
147 |
icon: "snf-snapshot-outline" |
148 |
}, |
149 |
{ |
150 |
destination: "ips", |
151 |
title: "IPs", |
152 |
icon: "snf-nic-outline" |
153 |
}, |
154 |
{ |
155 |
destination: "sshkeys", |
156 |
title: "SSh Keys", |
157 |
icon: "snf-key-outline" |
158 |
}], |
159 |
|
160 |
userActions: [{
|
161 |
description:'start', |
162 |
'snf-components':['vms'], |
163 |
'enabled-status': ['off'], |
164 |
action: 'is this a function?' |
165 |
}, |
166 |
{ |
167 |
description:'destroyElement', |
168 |
'snf-components': ['vms', 'networks'], |
169 |
'enabled-status': ['all'], |
170 |
action: 'is this a function?', |
171 |
}, |
172 |
{ |
173 |
description:'shutdown', |
174 |
'snf-components': ['vms'], |
175 |
'enabled-status': ['running'], |
176 |
action: 'is this a function?' |
177 |
}, |
178 |
{ |
179 |
description:'add machine', |
180 |
'snf-components': ['networks'], |
181 |
'enabled-status': ['active'], |
182 |
action: 'is this a function?' |
183 |
}, |
184 |
{ |
185 |
description:'action for all', |
186 |
'snf-components': ['vms', 'networks'], |
187 |
'enabled-status': ['all'], |
188 |
action: 'is this a function?' |
189 |
}] |
190 |
}; |
191 |
;/* Mapping */
|
192 |
|
193 |
Synnefo.Router.map(function() {
|
194 |
// I defined the above resource to extend its Route
|
195 |
this.resource('sections', {'path':'/'}); |
196 |
for(var i=0; i<Synnefo.conf.sectors.length; i++) |
197 |
this.resource(Synnefo.conf.sectors[i].destination/*, function() { |
198 |
this.route('grid');
|
199 |
this.route('list');
|
200 |
}*/);
|
201 |
}); |
202 |
|
203 |
|
204 |
/* Routes */
|
205 |
|
206 |
Synnefo.ApplicationRoute = Ember.Route.extend({ |
207 |
model: function() { |
208 |
return {email: 'athina@mail.com'}; |
209 |
}, |
210 |
redirect: function() { |
211 |
// have to set vm navigation icon full
|
212 |
this.transitionTo('vms'); |
213 |
} |
214 |
}); |
215 |
|
216 |
Synnefo.SectionsRoute = Ember.Route.extend({ |
217 |
modelName: undefined, |
218 |
model: function() { |
219 |
return this.store.find(this.modelName); |
220 |
}, |
221 |
renderTemplate: function(controller) { |
222 |
this.render('snfElems', {controller: controller}); |
223 |
} |
224 |
}); |
225 |
|
226 |
|
227 |
Synnefo.VmsRoute = Synnefo.SectionsRoute.extend({ |
228 |
modelName: 'vm' |
229 |
}); |
230 |
|
231 |
Synnefo.NetworksRoute = Synnefo.SectionsRoute.extend({ |
232 |
modelName: 'network' |
233 |
}); |
234 |
|
235 |
Synnefo.VolumesRoute = Synnefo.SectionsRoute.extend({ |
236 |
modelName: 'volume' |
237 |
}); |
238 |
|
239 |
Synnefo.SnapshotsRoute = Synnefo.SectionsRoute.extend({ |
240 |
modelName: 'snapshot' |
241 |
}); |
242 |
|
243 |
Synnefo.ImagesRoute = Synnefo.SectionsRoute.extend({ |
244 |
modelName: 'userImage' |
245 |
}); |
246 |
|
247 |
|
248 |
|
249 |
|
250 |
|
251 |
/* Controllers */
|
252 |
|
253 |
Synnefo.ApplicationController = Ember.Controller.extend({ |
254 |
updateCurrentPath: function() { |
255 |
// we need the set because ElemsController gets the value of current path in every transition
|
256 |
Synnefo.set('currentPath', this.get('currentPath')) |
257 |
return this.get('currentPath'); |
258 |
}.observes('currentPath'),
|
259 |
actions: {
|
260 |
test: function() { |
261 |
console.log('This is test from Synnefo.ApplicationController');
|
262 |
return 0; |
263 |
} |
264 |
}, |
265 |
|
266 |
pageTitle : function() { |
267 |
var currentPath =this.get('currentPath'); |
268 |
if(currentPath!== 'index') return Synnefo.conf.sectors.findBy('destination', this.get('currentPath')).title; |
269 |
else return 'Home'; |
270 |
}.property('currentPath'),
|
271 |
|
272 |
// name: "okeanos application",
|
273 |
}); |
274 |
|
275 |
|
276 |
|
277 |
Synnefo.ElemsController = Ember.ArrayController.extend({ |
278 |
type: undefined, |
279 |
itemController: function(){ |
280 |
var type = this.type; |
281 |
return type.substring(0, type.length - 1); |
282 |
}.property(), |
283 |
icon: function() { |
284 |
// should this be placed in ElemsView?
|
285 |
return Synnefo.conf.sectors.findBy('destination', this.get('type')).icon.replace('outline', 'full'); |
286 |
}.property(), |
287 |
hasOS: function(){ |
288 |
if(Synnefo.get('currentPath') == "vms") |
289 |
return true; |
290 |
else return false; |
291 |
}.property(), |
292 |
hasTags: function(){ |
293 |
if(Synnefo.get('currentPath') == "vms") |
294 |
return true; |
295 |
else return false; |
296 |
}.property(), |
297 |
}); |
298 |
|
299 |
Synnefo.VmsController = Synnefo.ElemsController.extend({ |
300 |
type: 'vms' |
301 |
}); |
302 |
|
303 |
|
304 |
Synnefo.NetworksController = Synnefo.ElemsController.extend({ |
305 |
type: 'networks' |
306 |
}); |
307 |
|
308 |
Synnefo.VolumesController = Synnefo.ElemsController.extend({ |
309 |
type: 'volumes' |
310 |
}); |
311 |
|
312 |
|
313 |
Synnefo.SnapshotsController = Synnefo.ElemsController.extend({ |
314 |
type: 'snapshots' |
315 |
}); |
316 |
|
317 |
Synnefo.ImagesController = Synnefo.ElemsController.extend({ |
318 |
type: 'images' |
319 |
}); |
320 |
|
321 |
|
322 |
|
323 |
Synnefo.ElemController = Ember.ObjectController.extend({ |
324 |
needs: [],
|
325 |
actionsList: Synnefo.conf.userActions,
|
326 |
setAvailableActions: function() { |
327 |
var parent = this.needs; |
328 |
var self = this; |
329 |
return this.actionsList.filter(function(el) { |
330 |
return _.contains(el['snf-components'], self.get('controllers.'+parent).type) &&( _.contains(el['enabled-status'], self.get('model.status')) || _.contains(el['enabled-status'], 'all')); |
331 |
}) |
332 |
}.property(), |
333 |
createBtn: false, |
334 |
actions: {
|
335 |
shutdown: function(param) { |
336 |
console.log(this.get('model.status')); |
337 |
this.set('model.status', 'shutting'); |
338 |
}, |
339 |
destroyElement: function(param) { |
340 |
var element = this.get('model'); |
341 |
element.deleteRecord(); |
342 |
element.save(); |
343 |
} |
344 |
} |
345 |
}); |
346 |
|
347 |
Synnefo.VmController = Synnefo.ElemController.extend({ |
348 |
needs: ['vms'] |
349 |
}); |
350 |
|
351 |
Synnefo.NetworkController = Synnefo.ElemController.extend({ |
352 |
needs: ['networks'] |
353 |
}); |
354 |
|
355 |
Synnefo.VolumeController = Synnefo.ElemController.extend({ |
356 |
needs: ['volumes'] |
357 |
}); |
358 |
|
359 |
Synnefo.SnapshotController = Synnefo.ElemController.extend({ |
360 |
needs: ['snapshots'] |
361 |
}); |
362 |
|
363 |
Synnefo.ImageController = Synnefo.ElemController.extend({ |
364 |
needs: ['images'] |
365 |
}); |
366 |
|
367 |
|
368 |
/* Views */
|
369 |
|
370 |
Synnefo.NavIconView = Ember.View.extend({ |
371 |
tagName: 'span', |
372 |
click: function(e) { |
373 |
var parentEl = this.$().parent('a'); |
374 |
var currentEl = this.$().parents('li').siblings('li').find('a.current'); |
375 |
|
376 |
ui.replaceClass(currentEl, 'full', 'outline', 'snf-'); |
377 |
ui.replaceClass(parentEl, 'outline', 'full', 'snf-'); |
378 |
} |
379 |
|
380 |
}); |
381 |
|
382 |
Synnefo.NavigationView = Ember.CollectionView.extend({ |
383 |
tagName: "ul", |
384 |
classNames: ['icons-nav'], |
385 |
|
386 |
content: Synnefo.conf.sectors,
|
387 |
itemViewClass: Ember.View.extend({
|
388 |
templateName: "navigationItem" |
389 |
}), |
390 |
}); |
391 |
|
392 |
|
393 |
Synnefo.ElemView = Ember.View.extend({ |
394 |
// templateName: 'elem',
|
395 |
addNewBtn: false, |
396 |
templateName: 'snfElem', |
397 |
tagName: 'li', |
398 |
selectable: true, |
399 |
initSelect: 'unchecked', |
400 |
classNameBindings: ['status'], |
401 |
attributeBindings: ['data-status'], |
402 |
'data-status': function() { |
403 |
return this.status; |
404 |
}.property(), |
405 |
status: function() { |
406 |
return this.get('controller.status'); |
407 |
}.property('controller.status')
|
408 |
}); |
409 |
|
410 |
Synnefo.ImgWrapView = Ember.View.extend({ |
411 |
templateName: 'img-wrap', |
412 |
classNames: ['img-wrap'], |
413 |
icon: function() { |
414 |
var parentView = this.get('parentView'); |
415 |
var addNewBtn = parentView.get('addNewBtn'); |
416 |
if(addNewBtn)
|
417 |
return parentView.get('icon'); |
418 |
else
|
419 |
return parentView.get('controller').get('parentController').get('icon'); |
420 |
}.property() |
421 |
}); |
422 |
|
423 |
Synnefo.NameView = Ember.View.extend({ |
424 |
templateName: 'name', |
425 |
tagName: 'h4', |
426 |
name: function() { |
427 |
// the name may be defined inside the parent view or in its model or controller
|
428 |
return this.get('parentView').get('controller').get('name'); |
429 |
}.property() |
430 |
}); |
431 |
|
432 |
// to be changed
|
433 |
Synnefo.ImmediateActionView = Ember.View.extend({ |
434 |
templateName: 'actions', |
435 |
classNames: ['actions'] |
436 |
}) |
437 |
|
438 |
/* Components */
|
439 |
|
440 |
Synnefo.Btn1Component = Ember.Component.extend({ |
441 |
tagName: 'a', |
442 |
click: function() { |
443 |
this.sendAction("action", this.get('param')); |
444 |
} |
445 |
}); |
446 |
|
447 |
Synnefo.AddNewComponent = Ember.Component.extend({ |
448 |
templateName: 'snfElem', |
449 |
addNewBtn: true, |
450 |
selectable: false, |
451 |
icon: function() { |
452 |
baseIcon = Synnefo.conf.sectors.findBy('destination', this.get('type')).icon; |
453 |
return baseIcon.replace('outline', 'create-full'); |
454 |
}.property(), |
455 |
tagName: 'li', |
456 |
status: 'add-new', |
457 |
classNameBindings: ['status'], |
458 |
attributeBindings: ['data-status, data-reveal-id'], |
459 |
'data-reveal-id': function(){ |
460 |
if(addNewBtn)
|
461 |
return /*this.get('type').substring(0, type.length - 1)+*/'-wizard'; |
462 |
else
|
463 |
return undefined; |
464 |
}.property(), |
465 |
'data-status': function() { |
466 |
return this.status; |
467 |
}.property(), |
468 |
name: function() { |
469 |
var msg = 'Create New '; |
470 |
var btnType = this.get('type') |
471 |
switch(btnType){
|
472 |
case 'vms': |
473 |
return msg + 'Machine'; |
474 |
case 'networks': |
475 |
return msg + 'Network'; |
476 |
case 'volumes': |
477 |
return msg + 'Volume'; |
478 |
case 'snapshots': |
479 |
return msg + 'Snapshot'; |
480 |
case 'images': |
481 |
return '+ Upload New Image'; |
482 |
} |
483 |
}.property(), |
484 |
click: function (e) { |
485 |
e.preventDefault(); |
486 |
var wizardID = '#'+ this.get('type').substring(0, type.length - 1)+'-wizard' |
487 |
$('.overlay-area-custom').fadeIn(100); |
488 |
$('body').addClass('with-overlay'); |
489 |
$(wizardID).fadeIn('slow'); |
490 |
} |
491 |
}); |
492 |
|
493 |
Synnefo.LoginMenuComponent = Ember.Component.extend({ |
494 |
classNames: ['login'], |
495 |
didInsertElement: function() { |
496 |
console.log('didInsertElement');
|
497 |
var self = this.$(); |
498 |
self.mouseenter(function(e){
|
499 |
self.find('ul').stop(true, true).slideDown(200); |
500 |
}); |
501 |
self.mouseleave(function(e){
|
502 |
self.find('ul').stop(true, true).slideUp(200); |
503 |
}); |
504 |
|
505 |
} |
506 |
}); |
507 |
|
508 |
Synnefo.SnfCheckboxComponent = Ember.Component.extend({ |
509 |
tagName: 'a', |
510 |
classNames: ['check'], |
511 |
templateName: 'components/select-btn', |
512 |
initState: function() { |
513 |
return this.get('initState'); |
514 |
}.property(), |
515 |
didInsertElement: function() { |
516 |
var el = this.$(); |
517 |
var self =this; |
518 |
this.setInitClasses();
|
519 |
el.click(function(e) {
|
520 |
e.preventDefault(); |
521 |
e.stopPropagation(); |
522 |
self.changeState(el); |
523 |
// ui.entitiesActionsEnabled();
|
524 |
}); |
525 |
}, |
526 |
setInitClasses: function() { |
527 |
var self =this.$(); |
528 |
switch(this.initState){ |
529 |
case 'unchecked': { |
530 |
this.uncheck(self);
|
531 |
break;
|
532 |
} |
533 |
case 'prechecked': { |
534 |
self.find('span').addClass('prechecked') |
535 |
this.check(self);
|
536 |
break;
|
537 |
} |
538 |
} |
539 |
}, |
540 |
// used to be in ui.checkbox
|
541 |
changeState : function(checkbox_link) { |
542 |
$(checkbox_link).find('.snf-checkbox-unchecked, .snf-checkbox-checked').toggleClass('snf-checkbox-unchecked snf-checkbox-checked'); |
543 |
$(checkbox_link).closest('li').toggleClass('selected'); |
544 |
}, |
545 |
check : function(checkbox_link) { |
546 |
$(checkbox_link).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked'); |
547 |
$(checkbox_link).closest('li').addClass('selected'); |
548 |
}, |
549 |
uncheck : function(checkbox_link) { |
550 |
$(checkbox_link).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked'); |
551 |
$(checkbox_link).closest('li').removeClass('selected'); |
552 |
}, |
553 |
|
554 |
reset: function(area) { |
555 |
$(area).find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
556 |
$(area).find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
557 |
}, |
558 |
}); |