Statistics
| Branch: | Tag: | Revision:

root / ui / static / snf / js / ui / web / ui_main_view.js @ 6a3a5bf7

History | View | Annotate | Download (24.5 kB)

1
;(function(root){
2

    
3
    // root
4
    var root = root;
5
    
6
    // setup namepsaces
7
    var snf = root.synnefo = root.synnefo || {};
8
    var models = snf.models = snf.models || {}
9
    var storage = snf.storage = snf.storage || {};
10
    var ui = snf.ui = snf.ui || {};
11

    
12
    var views = snf.views = snf.views || {}
13

    
14
    // shortcuts
15
    var bb = root.Backbone;
16
    var util = snf.util;
17
    
18
    // TODO: implement me
19
    views.NoticeView = views.Overlay.extend({});
20

    
21
    views.MultipleActionsView = views.View.extend({
22
        view_id: "multiple_actions",
23

    
24
        _actions: {},
25
        el: '#multiple_actions_container',
26
        
27
        initialize: function() {
28
            this.actions = {};
29
            views.MultipleActionsView.__super__.initialize.call(this);
30
            
31
            // view elements
32
            this.confirm_actions = this.$(".confirm_multiple_actions");
33
            this.confirm_actions_yes = this.$(".confirm_multiple_actions button.yes");
34
            this.confirm_actions_no = this.$(".confirm_multiple_actions button.no");
35
            this.confirm_reboot = this.$(".confirm_reboot_required");
36
            this.confirm_reboot_yes = this.$(".confirm_reboot_required button.yes");
37
            this.confirm_reboot_no = this.$(".confirm_reboot_required button.no");
38
            this.confirm_reboot_list = this.confirm_reboot.find(".reboot-machines-list");
39

    
40
            this.init_handlers();
41
            this.update_layout();
42
            
43
            // for heavy resize/scroll window events
44
            // do it `like a boss` 
45
            this.fix_position = _.throttle(this.fix_position, 100);
46
            this.show_limit = 1;
47
        },
48

    
49
        init_handlers: function() {
50
            var self = this;
51

    
52
            $(window).resize(_.bind(function(){
53
                this.fix_position();
54
            }, this));
55

    
56
            $(window).scroll(_.bind(function(){
57
                this.fix_position();
58
            }, this));
59
            
60
            // confirm/cancel button handlers
61
            var self = this;
62
            this.confirm_actions_yes.click(function(){ self.do_all(); })
63
            this.confirm_actions_no.click(function(){
64
                self.reset_actions();
65
            });
66

    
67
            this.confirm_reboot_yes.click(function(){ self.do_reboot_all(); })
68
            this.confirm_reboot_no.click(function(){
69
                self.reset_reboots();
70
            });
71

    
72
            storage.vms.bind("change:pending_action", _.bind(this.handle_vm_change, this));
73
            storage.vms.bind("change:reboot_required", _.bind(this.handle_vm_change, this));
74
        },
75
    
76
        handle_vm_change: function(vm) {
77
            if (vm.has_pending_action()) {
78
                var action = vm.get("pending_action");
79
                this.add_action(vm, action);
80
            } else {
81
                this.remove_action(vm);
82
            }
83
            this.update_layout();
84
        },
85

    
86
        add_action: function(vm, action) {
87
            this._actions[vm.id] = {'vm': vm, 'action': action};
88
        },
89

    
90
        remove_action: function(vm) {
91
            delete this._actions[vm.id];
92
        },
93

    
94
        reset: function() {
95
            this._actions = {};
96
            this.update_layout();
97
        },
98
        
99
        reboot_vm: function(vm) {
100
            vm.call("reboot");
101
        },
102

    
103
        do_reboot_all: function() {
104
            _.each(storage.vms.get_reboot_required(), function(vm){
105
                this.reboot_vm(vm)
106
            }, this)  
107
        },
108

    
109
        do_all: function() {
110
            _.each(this._actions, function(action){
111
                action.vm.call(action.action);
112
            }, this)  
113
            this.reset_actions();
114
        },
115

    
116
        reset_reboots: function () {
117
            _.each(storage.vms.get_reboot_required(), function(vm) {vm.set({'reboot_required': false})}, this);
118
            this.update_layout();
119
        },
120

    
121
        reset_actions: function() {
122
            _.each(this._actions, _.bind(function(action){
123
                try {
124
                    action.vm.clear_pending_action();
125
                    this.remove_action(action.vm);
126
                } catch(err) {
127
                    console.error("vm " + action.vm.id + " failed to reset", err);
128
                }
129
            }, this))  
130
        },
131
        
132
        fix_position: function() {
133
            $('.confirm_multiple').removeClass('fixed');
134
            if (($(this.el).offset().top +$(this.el).height())> ($(window).scrollTop() + $(window).height())) {
135
                $('.confirm_multiple').addClass('fixed');
136
            }
137
        },
138
        
139
        check_notify_limit: function() {
140
            this.show_limit = 1;
141
            if (ui.main.current_view && ['networks', 'vm_list'].indexOf(ui.main.current_view.view_id) > -1) {
142
                this.show_limit = 0;
143
            }
144
        },
145
        
146
        update_reboot_required_list: function(vms) {
147
            this.confirm_reboot_list.empty();
148
        },
149

    
150
        update_reboot_required: function() {
151
            var vms = storage.vms.get_reboot_required();
152
            if (vms.length) {
153
                this.confirm_reboot.find(".actionLen").text(vms.length);
154
                this.update_reboot_required_list();
155
                this.confirm_reboot.show();
156
                $(this.el).show();
157
            } else {
158
                if (!this.actions_visible) {
159
                   $(this.el).hide();
160
                }
161
                this.confirm_reboot.hide();
162
            }
163
        },
164

    
165
        update_layout: function() {
166
            this.check_notify_limit();
167
            this.actions_visible = false;
168

    
169
            if (_.size(this._actions) > this.show_limit) {
170
                this.actions_visible = true;
171
                $(this.el).show();
172
                this.confirm_actions.show();
173
            } else {
174
                $(this.el).hide();
175
                this.confirm_actions.hide();
176
            }
177

    
178
            this.update_reboot_required();
179
            this.confirm_actions.find(".actionLen").text(_.size(this._actions));
180
            $(window).trigger("resize");
181
        }
182
    })
183
    
184
    // menu wrapper view
185
    views.SelectView = views.View.extend({
186
        
187
        initialize: function(view) {
188
            this.parent = view;
189

    
190
            this.pane_view_selector = $(".css-tabs");
191
            this.machine_view_selector = $("#view-select");
192
            this.el = $(".css-tabs");
193
            this.title = $(".tab-name");
194

    
195
            this.set_handlers();
196
            this.update_layout();
197

    
198
            views.SelectView.__super__.initialize.apply(this, arguments);
199
        },
200
        
201
        clear_active: function() {
202
            this.pane_view_selector.find("a").removeClass("active");
203
            this.machine_view_selector.find("a").removeClass("activelink");
204
        },
205
        
206
        // intercept menu links
207
        set_handlers: function() {
208
            var self = this;
209
            this.pane_view_selector.find("a").hover(function(){
210
                // FIXME: title from href ? omg
211
                self.title.text($(this).attr("href"));
212
            }, function(){
213
                self.title.text(self.parent.get_title());
214
            });
215

    
216
            this.pane_view_selector.find("a#machines_view_link").click(_.bind(function(ev){
217
                ev.preventDefault();
218
                this.parent.show_view("machines");
219
            }, this))
220
            this.pane_view_selector.find("a#networks_view_link").click(_.bind(function(ev){
221
                ev.preventDefault();
222
                this.parent.show_view("networks");
223
            }, this))
224
            this.pane_view_selector.find("a#disks_view_link").click(_.bind(function(ev){
225
                ev.preventDefault();
226
                this.parent.show_view("disks");
227
            }, this))
228
            
229
            this.machine_view_selector.find("a#machines_view_icon_link").click(_.bind(function(ev){
230
                ev.preventDefault();
231
                var d = $.now();
232
                this.parent.show_view("icon");
233
            }, this))
234
            this.machine_view_selector.find("a#machines_view_list_link").click(_.bind(function(ev){
235
                ev.preventDefault();
236
                this.parent.show_view("list");
237
            }, this))
238
            this.machine_view_selector.find("a#machines_view_single_link").click(_.bind(function(ev){
239
                ev.preventDefault();
240
                this.parent.show_view("single");
241
            }, this))
242
        },
243

    
244
        update_layout: function() {
245
            this.clear_active();
246

    
247
            var pane_index = this.parent.pane_ids[this.parent.current_view_id];
248
            $(this.pane_view_selector.find("a")).removeClass("active");
249
            $(this.pane_view_selector.find("a").get(pane_index)).addClass("active");
250
            
251
            if (this.parent.current_view && this.parent.current_view.vms_view) {
252

    
253
                if (storage.vms.length > 0) {
254
                    this.machine_view_selector.show();
255
                    var machine_index = this.parent.views_ids[this.parent.current_view_id];
256
                    $(this.machine_view_selector.find("a").get(machine_index)).addClass("activelink");
257
                } else {
258
                    this.machine_view_selector.hide();
259
                }
260
            } else {
261
                this.machine_view_selector.hide();
262
            }
263

    
264
        }
265
    });
266

    
267
    views.MainView = views.View.extend({
268
        el: 'body',
269
        view_id: 'main',
270
        
271
        // FIXME: titles belong to SelectView
272
        views_titles: {
273
            'icon': 'machines', 'single': 'machines', 
274
            'list': 'machines', 'networks': 'networks',
275
            'disks': 'disks'
276
        },
277

    
278
        // indexes registry
279
        views_indexes: {0: 'icon', 2:'single', 1: 'list', 3:'networks'},
280
        views_pane_indexes: {0:'single', 1:'networks', 2:'disks'},
281

    
282
        // views classes registry
283
        views_classes: {'icon': views.IconView, 'single': views.SingleView, 
284
            'list': views.ListView, 'networks': views.NetworksView},
285

    
286
        // view ids
287
        views_ids: {'icon':0, 'single':2, 'list':1, 'networks':3},
288

    
289
        // on which pane id each view exists
290
        // machine views (icon,single,list) are all on first pane
291
        pane_ids: {'icon':0, 'single':0, 'list':0, 'networks':1, 'disks':2},
292
    
293
        initialize: function(show_view) {
294
            if (!show_view) { show_view = 'icon' };
295
            
296
            // fallback to browser error reporting (true for debug)
297
            this.skip_errors = true
298

    
299
            // reset views
300
            this.views = {};
301

    
302
            this.el = $("#app");
303
            // reset main view status
304
            this._loaded = false;
305
            this.status = "Initializing...";
306

    
307
            // initialize handlers
308
            this.init_handlers();
309

    
310
            // identify initial view from user cookies
311
            // this view will be visible after loading of
312
            // main view
313
            this.initial_view = this.session_view();
314

    
315
            views.MainView.__super__.initialize.call(this);
316
        },
317
        
318
        vms_handlers_registered: false,
319

    
320
        // register event handlers
321
        // 
322
        // vms storage events to identify if vms list 
323
        // is empty and display empty view if user viewing
324
        // a machine view
325
        //
326
        // api/ui error event handlers
327
        init_handlers: function() {
328
            // vm handlers
329
            storage.vms.bind("remove", _.bind(this.check_empty, this));
330
            storage.vms.bind("add", _.bind(this.check_empty, this));
331
            storage.vms.bind("change", _.bind(this.check_empty, this));
332
            storage.vms.bind("reset", _.bind(this.check_empty, this));
333
            
334
            // api calls handlers
335
            synnefo.api.bind("error", _.bind(this.handle_api_error, this));
336
            synnefo.api.bind("change:error_state", _.bind(this.handle_api_error_state, this));
337
            synnefo.ui.bind("error", _.bind(this.handle_ui_error, this));
338
        },
339
        
340
        handle_api_error_state: function(state) {
341
            if (snf.api.error_state) {
342
                this.stop_intervals();
343
            } else {
344
                if (this.intervals_stopped) {
345
                    this.update_intervals();
346
                }
347
            }
348
        },
349
        
350
        handle_api_error: function(xhr, type, message) {
351
            this.error_state = true;
352
            this.log.error("API ERRROR", arguments);
353
            
354
            var xhr = arguments[0];
355
            var args = util.parse_api_error(arguments);
356
            
357
            // force logout if UNAUTHORIZED request arrives
358
            if (args.code == 401) { snf.ui.logout(); return };
359

    
360
            var error_entry = [args.ns, args.code, args.message, args.type, args.details, args];
361
            this.error_view.show_error.apply(this.error_view, error_entry);
362
        },
363

    
364
        handle_ui_error: function(error) {
365
            error = error + "<br /><br />" + snf.util.stacktrace().replace("at", "<br /><br />at");
366
            this.error_view.show_error("Application", -1, "Something went wrong", "JS Exception", error);
367
        },
368

    
369
        init_overlays: function() {
370
            this.create_vm_view = new views.CreateVMView();
371
            //this.notice_view = new views.NoticeView();
372
        },
373
        
374
        show_loading_view: function() {
375
            $("#container #content").hide();
376
            $("#loading-view").show();
377
        },
378

    
379
        hide_loading_view: function() {
380
            $("#container #content").show();
381
            $("#loading-view").hide();
382
            $(".css-panes").show();
383
        },
384
        
385
        items_to_load: 4,
386
        completed_items: 0,
387
        check_status: function(loaded) {
388
            this.completed_items++;
389
            // images, flavors loaded
390
            if (this.completed_items == 2) {
391
                this.load_nets_and_vms();
392
            }
393
            if (this.completed_items == this.items_to_load) {
394
                this.after_load();
395
            }
396
        },
397

    
398
        load_nets_and_vms: function() {
399
            var self = this;
400
            this.update_status("Loading vms...");
401
            storage.vms.fetch({refresh:true, update:false, success: function(){
402
                self.update_status("VMS Loaded.");
403
                self.check_status()
404
            }});
405
            this.update_status("Loading networks...");
406
            storage.networks.fetch({refresh:true, update:false, success: function(){
407
                self.update_status("Networks loaded.");
408
                self.check_status()
409
            }});
410
        },  
411

    
412
        init_intervals: function() {
413
            this._networks = storage.networks.get_fetcher(snf.config.update_interval, snf.config.update_interval/3, 3, true, undefined);
414
            this._vms = storage.vms.get_fetcher(snf.config.update_interval, snf.config.update_interval/3, 3, true, undefined);
415
        },
416

    
417
        stop_intervals: function() {
418
            this._networks.stop();
419
            this._vms.stop();
420
            this.intervals_stopped = true;
421
        },
422

    
423
        update_intervals: function() {
424
            this._networks.stop();
425
            this._networks.start();
426
            this._vms.stop();
427
            this._vms.start();
428
            this.intervals_stopped = false;
429
        },
430

    
431
        after_load: function() {
432
            this.update_status("Setting vms update interval...");
433
            this.init_intervals();
434
            this.update_intervals();
435
            this.update_status("Loaded");
436
            // FIXME: refactor needed
437
            // initialize views
438
            this.initialize_views()
439
            this.update_status("Initializing overlays...");
440
            this.init_overlays();
441
            // display initial view
442
            this.loaded = true;
443
            this.show_initial_view();
444
            this.check_empty();
445
        },
446

    
447
        load: function() {
448
            this.error_view = new views.ErrorView();
449
            var self = this;
450
            // initialize overlay views
451
            
452
            // display loading message
453
            this.show_loading_view();
454
            // sync load initial data
455
            this.update_status("Loading images...");
456
            storage.images.fetch({refresh:true, update:false, success: function(){
457
                self.check_status()
458
            }});
459
            this.update_status("Loading flavors...");
460
            storage.flavors.fetch({refresh:true, update:false, success:function(){
461
                self.check_status()
462
            }});
463
        },
464

    
465
        update_status: function(msg) {
466
            this.log.debug(msg)
467
            this.status = msg;
468
            $("#loading-view .info").removeClass("hidden")
469
            $("#loading-view .info").text(this.status);
470
        },
471

    
472
        initialize_views: function() {
473
            this.empty_view = new views.EmptyView();
474
            this.select_view = new views.SelectView(this);
475
            this.metadata_view = new views.MetadataView();
476
            this.multiple_actions_view = new views.MultipleActionsView();
477
            this.feedback_view = new views.FeedbackView();
478
            
479
            this.add_view("icon");
480
            this.add_view("list");
481
            this.add_view("single");
482
            this.add_view("networks");
483

    
484
            this.init_menu();
485
        },
486

    
487
        init_menu: function() {
488
            $(".usermenu .feedback").click(_.bind(function(){
489
                this.feedback_view.show();
490
            }, this));
491
        },
492
        
493
        // initial view based on user cookie
494
        show_initial_view: function() {
495
          this.set_vm_view_handlers();
496
          this.hide_loading_view();
497
          this.show_view(this.initial_view);
498
          this.trigger("initial");
499
        },
500

    
501
        show_vm_details: function(vm) {
502
            snf.ui.main.show_view("single")
503
            snf.ui.main.current_view.show_vm(vm);
504
        },
505

    
506
        set_vm_view_handlers: function() {
507
            $("#createcontainer #create").click(_.bind(function(){
508
                this.create_vm_view.show();
509
            }, this))
510
        },
511

    
512
        check_empty: function() {
513
            if (!this.loaded) { return }
514
            if (storage.vms.length == 0) {
515
                this.show_empty();
516
            } else {
517
                this.hide_empty();
518
            }
519
            this.select_view.update_layout();
520
        },
521

    
522
        show_empty: function() {
523
            $("#machines-pane-top").addClass("empty");
524

    
525
            this.$(".panes").hide();
526
            this.$("#machines-pane").show();
527

    
528
            this.hide_views([]);
529
            this.empty_view.show();
530
        },
531

    
532
        hide_empty: function() {
533
            $("#machines-pane-top").removeClass("empty");
534

    
535
            this.empty_view = new views.EmptyView();
536
            this.empty_view.hide();
537
            if (this.current_view && !this.current_view.visible()) { 
538
                this.current_view.show(); 
539
            }
540
        },
541
        
542
        get_title: function(view_id) {
543
            var view_id = view_id || this.current_view_id;
544
            return this.views_titles[view_id];
545
        },
546

    
547
        // return class object for the given view or false if
548
        // the view is not registered
549
        get_class_for_view: function (view_id) {
550
            if (!this.views_classes[view_id]) {
551
                return false;
552
            }
553
            return this.views_classes[view_id];
554
        },
555

    
556
        view: function(view_id) {
557
            return this.views[view_id];
558
        },
559

    
560
        add_view: function(view_id) {
561
            if (!this.views[view_id]) {
562
                var cls = this.get_class_for_view(view_id);
563
                if (this.skip_errors) {
564
                    this.views[view_id] = new cls();
565
                    $(this.views[view_id]).bind("resize", _.bind(function() {
566
                        window.positionFooter();
567
                        this.multiple_actions_view.fix_position();
568
                    }, this));
569
                } else {
570
                    // catch ui errors
571
                    try {
572
                        this.views[view_id] = new cls();
573
                        $(this.views[view_id]).bind("resize", _.bind(function() {
574
                            window.positionFooter();
575
                            this.multiple_actions_view.fix_position();
576
                        }, this));
577
                    } catch (err) {snf.ui.trigger("error", err)}
578
                }
579
            } else {
580
            }
581

    
582
            if (this.views[view_id].vms_view) {
583
                this.views[view_id].metadata_view = this.metadata_view;
584
            }
585
            return this.views[view_id];
586
        },
587
            
588
        hide_views: function(skip) {
589
            _.each(this.views, function(view) {
590
                if (skip.indexOf(view) === -1) {
591
                    $(view.el).hide();
592
                }
593
            }, this)
594
        },
595
        
596
        get: function(view_id) {
597
            return this.views[view_id];
598
        },
599
        
600
        session_view: function() {
601
            if (this.pane_view_from_session() > 0) {
602
                return this.views_pane_indexes[this.pane_view_from_session()];
603
            } else {
604
                return this.views_indexes[this.machine_view_from_session()];
605
            }
606
        },
607

    
608
        pane_view_from_session: function() {
609
            return $.cookie("pane_view") || 0;
610
        },
611

    
612
        machine_view_from_session: function() {
613
            return $.cookie("machine_view") || 0;
614
        },
615

    
616
        update_session: function() {
617
            $.cookie("pane_view", this.pane_ids[this.current_view_id]);
618
            if (this.current_view.vms_view) {
619
                $.cookie("machine_view", this.views_ids[this.current_view_id]);
620
            }
621
        },
622

    
623
        identify_view: function(view_id) {
624
            // machines view_id is an alias to
625
            // one of the 3 machines view
626
            // identify which one (if no cookie set defaults to icon)
627
            if (view_id == "machines") {
628
                var index = this.machine_view_from_session();
629
                view_id = this.views_indexes[index];
630
            }
631
            return view_id;
632
        },
633
        
634
        // switch to current view pane
635
        // if differs from the visible one
636
        show_view_pane: function() {
637
            if (this.current_view.pane != this.current_pane) {
638
                $(this.current_view.pane).show();
639
                $(this.current_pane).hide();
640
                this.current_pane = this.current_view.pane;
641
            }
642
        },
643

    
644
        show_view: function(view_id) {
645
            // same view, visible
646
            // get out of here asap
647
            if (this.current_view && 
648
                this.current_view.id == view_id && 
649
                this.current_view.visible()) {
650
                return;
651
            }
652
            
653
            // choose proper view_id
654
            view_id = this.identify_view(view_id);
655

    
656
            // add/create view and update current view
657
            var view = this.add_view(view_id);
658
            
659
            // set current view
660
            this.current_view = view;
661
            this.current_view_id = view_id;
662

    
663
            // hide all other views
664
            this.hide_views([this.current_view]);
665
            
666
            // FIXME: depricated
667
            $(".large-spinner").remove();
668

    
669
            // show current view
670
            this.show_view_pane();
671
            view.show();
672
            
673
            // update menus
674
            if (this.select_view) {
675
                this.select_view.update_layout();
676
            }
677
            this.current_view.__update_layout();
678

    
679
            // update cookies
680
            this.update_session();
681
            
682
            // machines view subnav
683
            if (this.current_view.vms_view) {
684
                $("#machines-pane").show();
685
            } else {
686
                $("#machines-pane").hide();
687
            }
688
            
689
            // fix footer position
690
            // TODO: move footer handlers in
691
            // main view (from home.html)
692
            if (window.positionFooter) {
693
                window.positionFooter();
694
            }
695
            
696
            // trigger view change event
697
            this.trigger("view:change", this.current_view.view_id);
698
            $(window).trigger("view:change");
699
            storage.vms.reset_pending_actions();
700
            return view;
701
        },
702

    
703
        reset_vm_actions: function() {
704
        
705
        },
706
        
707
        // identify current view
708
        // based on views element visibility
709
        current_view_id: function() {
710
            var found = false;
711
            _.each(this.views, function(key, value) {
712
                if (value.visible()) {
713
                    found = value;
714
                }
715
            })
716
            return found;
717
        }
718

    
719
    });
720

    
721
    snf.ui.main = new views.MainView();
722
    
723
    snf.ui.logout = function() {
724
        $.cookie("X-Auth-Token", null);
725
        if (window.LOGOUT_REDIRECT !== undefined)
726
        {
727
            window.location = window.LOGOUT_REDIRECT;
728
        } else {
729
            window.location.reload();
730
        }
731
    }
732

    
733
    snf.ui.init = function() {
734
        snf.ui.main.load();
735
    }
736

    
737
})(this);