root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / okeanos-ember.js @ 812b1e8d
History | View | Annotate | Download (12.6 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 |
actions: {
|
215 |
openWizard: function() { |
216 |
console.log('2');
|
217 |
return this.render('wizard', { |
218 |
into: 'application', |
219 |
outlet: 'wizard' |
220 |
}); |
221 |
} |
222 |
} |
223 |
}); |
224 |
|
225 |
Synnefo.SectionsRoute = Ember.Route.extend({ |
226 |
modelName: undefined, |
227 |
model: function() { |
228 |
return this.store.find(this.modelName); |
229 |
}, |
230 |
renderTemplate: function(controller) { |
231 |
this.render('snfElems', {controller: controller}); |
232 |
} |
233 |
}); |
234 |
|
235 |
|
236 |
Synnefo.VmsRoute = Synnefo.SectionsRoute.extend({ |
237 |
modelName: 'vm' |
238 |
}); |
239 |
|
240 |
Synnefo.NetworksRoute = Synnefo.SectionsRoute.extend({ |
241 |
modelName: 'network' |
242 |
}); |
243 |
|
244 |
Synnefo.VolumesRoute = Synnefo.SectionsRoute.extend({ |
245 |
modelName: 'volume' |
246 |
}); |
247 |
|
248 |
Synnefo.SnapshotsRoute = Synnefo.SectionsRoute.extend({ |
249 |
modelName: 'snapshot' |
250 |
}); |
251 |
|
252 |
Synnefo.ImagesRoute = Synnefo.SectionsRoute.extend({ |
253 |
modelName: 'userImage' |
254 |
}); |
255 |
|
256 |
|
257 |
|
258 |
|
259 |
|
260 |
/* Controllers */
|
261 |
|
262 |
Synnefo.ApplicationController = Ember.Controller.extend({ |
263 |
updateCurrentPath: function() { |
264 |
// we need the set because ElemsController gets the value of current path in every transition
|
265 |
Synnefo.set('currentPath', this.get('currentPath')) |
266 |
return this.get('currentPath'); |
267 |
}.observes('currentPath'),
|
268 |
actions: {
|
269 |
test: function() { |
270 |
console.log('This is test from Synnefo.ApplicationController');
|
271 |
return 0; |
272 |
} |
273 |
}, |
274 |
|
275 |
pageTitle : function() { |
276 |
var currentPath =this.get('currentPath'); |
277 |
if(currentPath!== 'index') return Synnefo.conf.sectors.findBy('destination', this.get('currentPath')).title; |
278 |
else return 'Home'; |
279 |
}.property('currentPath'),
|
280 |
|
281 |
// name: "okeanos application",
|
282 |
}); |
283 |
|
284 |
|
285 |
|
286 |
Synnefo.ElemsController = Ember.ArrayController.extend({ |
287 |
type: undefined, |
288 |
itemController: function(){ |
289 |
var type = this.type; |
290 |
return type.substring(0, type.length - 1); |
291 |
}.property(), |
292 |
icon: function() { |
293 |
// should this be placed in ElemsView?
|
294 |
return Synnefo.conf.sectors.findBy('destination', this.get('type')).icon.replace('outline', 'full'); |
295 |
}.property(), |
296 |
hasOS: function(){ |
297 |
if(Synnefo.get('currentPath') == "vms") |
298 |
return true; |
299 |
else return false; |
300 |
}.property(), |
301 |
hasTags: function(){ |
302 |
if(Synnefo.get('currentPath') == "vms") |
303 |
return true; |
304 |
else return false; |
305 |
}.property(), |
306 |
}); |
307 |
|
308 |
Synnefo.VmsController = Synnefo.ElemsController.extend({ |
309 |
type: 'vms' |
310 |
}); |
311 |
|
312 |
|
313 |
Synnefo.NetworksController = Synnefo.ElemsController.extend({ |
314 |
type: 'networks' |
315 |
}); |
316 |
|
317 |
Synnefo.VolumesController = Synnefo.ElemsController.extend({ |
318 |
type: 'volumes' |
319 |
}); |
320 |
|
321 |
|
322 |
Synnefo.SnapshotsController = Synnefo.ElemsController.extend({ |
323 |
type: 'snapshots' |
324 |
}); |
325 |
|
326 |
Synnefo.ImagesController = Synnefo.ElemsController.extend({ |
327 |
type: 'images' |
328 |
}); |
329 |
|
330 |
|
331 |
|
332 |
Synnefo.ElemController = Ember.ObjectController.extend({ |
333 |
needs: [],
|
334 |
actionsList: Synnefo.conf.userActions,
|
335 |
setAvailableActions: function() { |
336 |
var parent = this.needs; |
337 |
var self = this; |
338 |
return this.actionsList.filter(function(el) { |
339 |
return _.contains(el['snf-components'], self.get('controllers.'+parent).type) &&( _.contains(el['enabled-status'], self.get('model.status')) || _.contains(el['enabled-status'], 'all')); |
340 |
}) |
341 |
}.property(), |
342 |
createBtn: false, |
343 |
actions: {
|
344 |
shutdown: function(param) { |
345 |
console.log(this.get('model.status')); |
346 |
this.set('model.status', 'shutting'); |
347 |
}, |
348 |
destroyElement: function(param) { |
349 |
var element = this.get('model'); |
350 |
element.deleteRecord(); |
351 |
element.save(); |
352 |
} |
353 |
} |
354 |
}); |
355 |
|
356 |
Synnefo.VmController = Synnefo.ElemController.extend({ |
357 |
needs: ['vms'] |
358 |
}); |
359 |
|
360 |
Synnefo.NetworkController = Synnefo.ElemController.extend({ |
361 |
needs: ['networks'] |
362 |
}); |
363 |
|
364 |
Synnefo.VolumeController = Synnefo.ElemController.extend({ |
365 |
needs: ['volumes'] |
366 |
}); |
367 |
|
368 |
Synnefo.SnapshotController = Synnefo.ElemController.extend({ |
369 |
needs: ['snapshots'] |
370 |
}); |
371 |
|
372 |
Synnefo.ImageController = Synnefo.ElemController.extend({ |
373 |
needs: ['images'] |
374 |
}); |
375 |
|
376 |
|
377 |
/* Views */
|
378 |
|
379 |
Synnefo.NavIconView = Ember.View.extend({ |
380 |
tagName: 'span', |
381 |
click: function(e) { |
382 |
var parentEl = this.$().parent('a'); |
383 |
var currentEl = this.$().parents('li').siblings('li').find('a.current'); |
384 |
|
385 |
ui.replaceClass(currentEl, 'full', 'outline', 'snf-'); |
386 |
ui.replaceClass(parentEl, 'outline', 'full', 'snf-'); |
387 |
} |
388 |
|
389 |
}); |
390 |
|
391 |
Synnefo.NavigationView = Ember.CollectionView.extend({ |
392 |
tagName: "ul", |
393 |
classNames: ['icons-nav'], |
394 |
|
395 |
content: Synnefo.conf.sectors,
|
396 |
itemViewClass: Ember.View.extend({
|
397 |
templateName: "navigationItem" |
398 |
}), |
399 |
}); |
400 |
|
401 |
|
402 |
Synnefo.ElemView = Ember.View.extend({ |
403 |
// templateName: 'elem',
|
404 |
addNewBtn: false, |
405 |
templateName: 'snfElem', |
406 |
tagName: 'li', |
407 |
selectable: true, |
408 |
initSelect: 'unchecked', |
409 |
classNameBindings: ['status'], |
410 |
attributeBindings: ['data-status'], |
411 |
'data-status': function() { |
412 |
return this.status; |
413 |
}.property(), |
414 |
status: function() { |
415 |
return this.get('controller.status'); |
416 |
}.property('controller.status')
|
417 |
}); |
418 |
|
419 |
Synnefo.ImgWrapView = Ember.View.extend({ |
420 |
templateName: 'img-wrap', |
421 |
classNames: ['img-wrap'], |
422 |
icon: function() { |
423 |
var parentView = this.get('parentView'); |
424 |
var addNewBtn = parentView.get('addNewBtn'); |
425 |
if(addNewBtn)
|
426 |
return parentView.get('icon'); |
427 |
else
|
428 |
return parentView.get('controller').get('parentController').get('icon'); |
429 |
}.property() |
430 |
}); |
431 |
|
432 |
Synnefo.NameView = Ember.View.extend({ |
433 |
templateName: 'name', |
434 |
tagName: 'h4', |
435 |
name: function() { |
436 |
// the name may be defined inside the parent view or in its model or controller
|
437 |
return this.get('parentView').get('controller').get('name'); |
438 |
}.property() |
439 |
}); |
440 |
|
441 |
// to be changed
|
442 |
Synnefo.ImmediateActionView = Ember.View.extend({ |
443 |
templateName: 'actions', |
444 |
classNames: ['actions'] |
445 |
}) |
446 |
|
447 |
/* Components */
|
448 |
|
449 |
Synnefo.Btn1Component = Ember.Component.extend({ |
450 |
tagName: 'a', |
451 |
click: function() { |
452 |
this.sendAction("action", this.get('param')); |
453 |
} |
454 |
}); |
455 |
|
456 |
Synnefo.AddNewComponent = Ember.Component.extend({ |
457 |
templateName: 'snfElem', |
458 |
addNewBtn: true, |
459 |
selectable: false, |
460 |
icon: function() { |
461 |
baseIcon = Synnefo.conf.sectors.findBy('destination', this.get('type')).icon; |
462 |
return baseIcon.replace('outline', 'create-full'); |
463 |
}.property(), |
464 |
tagName: 'li', |
465 |
status: 'add-new', |
466 |
classNameBindings: ['status'], |
467 |
attributeBindings: ['data-status, data-reveal-id'], |
468 |
'data-reveal-id': function(){ |
469 |
if(addNewBtn)
|
470 |
return /*this.get('type').substring(0, type.length - 1)+*/'-wizard'; |
471 |
else
|
472 |
return undefined; |
473 |
}.property(), |
474 |
'data-status': function() { |
475 |
return this.status; |
476 |
}.property(), |
477 |
name: function() { |
478 |
var msg = 'Create New '; |
479 |
var btnType = this.get('type') |
480 |
switch(btnType){
|
481 |
case 'vms': |
482 |
return msg + 'Machine'; |
483 |
case 'networks': |
484 |
return msg + 'Network'; |
485 |
case 'volumes': |
486 |
return msg + 'Volume'; |
487 |
case 'snapshots': |
488 |
return msg + 'Snapshot'; |
489 |
case 'images': |
490 |
return '+ Upload New Image'; |
491 |
} |
492 |
}.property(), |
493 |
click: function () { |
494 |
// var type = this.get('type');
|
495 |
// var wizardEl = $('#'+ type.substring(0, type.length - 1)+'-wizard');
|
496 |
// $('.overlay-area-custom').fadeIn(100);
|
497 |
// $('body').addClass('with-overlay');
|
498 |
// wizardEl.fadeIn('slow');
|
499 |
console.log('1');
|
500 |
this.sendAction('action'); |
501 |
} |
502 |
}); |
503 |
|
504 |
Synnefo.LoginMenuComponent = Ember.Component.extend({ |
505 |
classNames: ['login'], |
506 |
didInsertElement: function() { |
507 |
console.log('didInsertElement');
|
508 |
var self = this.$(); |
509 |
self.mouseenter(function(e){
|
510 |
self.find('ul').stop(true, true).slideDown(200); |
511 |
}); |
512 |
self.mouseleave(function(e){
|
513 |
self.find('ul').stop(true, true).slideUp(200); |
514 |
}); |
515 |
|
516 |
} |
517 |
}); |
518 |
|
519 |
Synnefo.SnfCheckboxComponent = Ember.Component.extend({ |
520 |
tagName: 'a', |
521 |
classNames: ['check'], |
522 |
templateName: 'components/select-btn', |
523 |
initState: function() { |
524 |
return this.get('initState'); |
525 |
}.property(), |
526 |
didInsertElement: function() { |
527 |
var el = this.$(); |
528 |
var self =this; |
529 |
this.setInitClasses();
|
530 |
el.click(function(e) {
|
531 |
e.preventDefault(); |
532 |
e.stopPropagation(); |
533 |
self.changeState(el); |
534 |
// ui.entitiesActionsEnabled();
|
535 |
}); |
536 |
}, |
537 |
setInitClasses: function() { |
538 |
var self =this.$(); |
539 |
switch(this.initState){ |
540 |
case 'unchecked': { |
541 |
this.uncheck(self);
|
542 |
break;
|
543 |
} |
544 |
case 'prechecked': { |
545 |
self.find('span').addClass('prechecked') |
546 |
this.check(self);
|
547 |
break;
|
548 |
} |
549 |
} |
550 |
}, |
551 |
// used to be in ui.checkbox
|
552 |
changeState : function(checkbox_link) { |
553 |
$(checkbox_link).find('.snf-checkbox-unchecked, .snf-checkbox-checked').toggleClass('snf-checkbox-unchecked snf-checkbox-checked'); |
554 |
$(checkbox_link).closest('li').toggleClass('selected'); |
555 |
}, |
556 |
check : function(checkbox_link) { |
557 |
$(checkbox_link).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked'); |
558 |
$(checkbox_link).closest('li').addClass('selected'); |
559 |
}, |
560 |
uncheck : function(checkbox_link) { |
561 |
$(checkbox_link).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked'); |
562 |
$(checkbox_link).closest('li').removeClass('selected'); |
563 |
}, |
564 |
|
565 |
reset: function(area) { |
566 |
$(area).find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
567 |
$(area).find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
568 |
}, |
569 |
}); |