rearview 1.0.0.rc1-jruby → 1.0.0.rc2-jruby

data/public/rearview-src/js/view/dashboard.js

@@ -0,0 +1,493 @@
+define([
+    'view/base',
+    'model/monitor',
+    'collection/monitor',
+    'view/smallmonitor',
+    'view/expandedmonitor',
+    'view/addmonitor',
+    'view/resetmonitor',
+    'view/alerttimeline',
+    'codemirror',
+    'codemirror-ruby',
+    'jquery-validate'
+], function(
+    BaseView,
+    MonitorModel,
+    MonitorCollection,
+    SmallMonitorView,
+    ExpandedMonitorView,
+    AddMonitorView,
+    ResetMonitorView,
+    AlertTimelineView,
+    CodeMirror
+){  
+    var DashboardView = BaseView.extend({
+        rowMonitorLimit : 3,
+        events : {
+            'slid .carousel'  : 'advanceCarousel'
+        },
+
+        subscriptions : {
+            'view:expandedmonitor:open'       : 'hideDash',
+            'view:expandedmonitor:exit'       : 'updateDash',
+            'view:addmonitor:close'           : 'showDash',
+            'view:addmonitor:save'            : 'updateDash',
+            'view:addmonitor:show'            : 'hideDash',
+            'view:smallmonitor:edit'          : 'editMonitor',
+            'view:alerttimeline:troubleshoot' : 'editMonitor',
+            // 'view:dashboard:complete'         : 'advanceCarousel'
+        },
+
+        hidePrevCaption : function() {
+            this.$el.find('.carousel-caption').parent().children('.carousel-caption p').hide();
+        },
+
+        initialize : function(options) {
+            _.bindAll(this);
+
+            this.templar            = options.templar;
+            this.dashboardId        = ( options.dashboardId ) ? options.dashboardId : null;
+            this.categoryId         = ( options.categoryId ) ? options.categoryId : null;
+            this.user               = ( options.user ) ? options.user : null;
+            this.router             = ( options.router ) ? options.router : null;
+            this.categories         = [];
+            this.monitors           = [];
+            this.monitorCollections = [];
+            this.currentOrder       = [];
+            this.carouselIndex      = 0;
+
+            this.expandedMonitorView = new ExpandedMonitorView({
+                'el'      : $('.edit-monitor-wrap'),
+                'user'    : this.user,
+                'templar' : this.templar,
+                'router'  : this.router
+            });
+
+            this.addMonitorView = new AddMonitorView({
+                'model'       : new MonitorModel({
+                    'dashboardId' : this.dashboardId
+                }),
+                'user'        : this.user,
+                'dashboardId' : this.dashboardId,
+                'templar'     : this.templar
+            });
+
+            this.alertTimelineView = new AlertTimelineView({
+                'el'          : $('.timeline-wrap'),
+                'collection'  : this.collection,
+                'dashboardId' : this.dashboardId,
+                'user'        : this.user,
+                'status'      : this.checkDashboardAlertState(),
+                'templar'     : this.templar
+            });
+
+            this.resetMonitorView = new ResetMonitorView({
+                'el'      : $('.reset-monitor-wrap'),
+                'templar' : this.templar
+            });
+
+            this.addHelpers();
+
+            Backbone.Mediator.pub('view:dashboard:init');
+        },
+
+        render : function() {
+            this.initMonitors();
+            return this;
+        },
+        /**
+         * DashboardView#initMonitors()
+         *                  
+         * 
+         **/
+        initMonitors : function() {
+            this.getCategories();
+
+            // publish dashboard information for the header view
+            this.getDashboardInfo(this.dashboardId, function(title) {
+                Backbone.Mediator.pub('view:dashboard:render', {
+                    'title'    : title,
+                    'subtitle' : this.getDashboardSubtitle(this.getCategoryIndex()),
+                    'nav'      : {
+                        'ecosystem' : false,
+                        'dashboard' : true
+                    },
+                    'dashboardId'    : this.dashboardId
+                });
+            }.bind(this));
+
+            this.updateMonitorList();
+            this.setupCarousel();
+            this.setupDrop();
+            this.goToCategory();
+
+            Backbone.Mediator.pub('view:dashboard:complete');
+        },
+
+        setCategories : function(categories) {
+            // we need to remove the parent if categories exist
+            _.each(categories, function(category, index) {
+                if ( category.children.length ) {
+                    this.categories.splice(index,1);
+                }
+            }, this);
+            
+            this.categories = categories;
+        },
+
+        getCategories : function() {
+            $.ajax({
+                url : '/dashboards/' + this.dashboardId + '/children',
+                async : false,
+                success : function(result) {
+                    var categories = result;
+                    // NOTE : a decision was made once a category exists
+                    //        to move all current monitors to that category
+                    //        and never show the parent
+                    this.setCategories(categories);
+                }.bind(this)
+            });
+        },
+
+        setupDrop : function() {
+            this.$monitorDragWraps = $('.small-monitor-drag');
+            this.$monitorWraps     = $('.small-monitor-wrap');
+
+            this.$monitorWraps.droppable({ 
+                accept : '.small-monitor',
+                
+                over : function(e, ui) {
+                    $(e.target).addClass('active-drop');
+                    ui.draggable.draggable( 'option', 'revert', false );
+                },
+                out : function(e, ui) {
+                    $(e.target).removeClass('active-drop');
+                    ui.draggable.draggable( 'option', 'revert', true );
+                }, 
+                drop : function(e, ui) {
+                    $(e.target).removeClass('active-drop');
+                    $(window).trigger('resize');
+                }
+            });
+        },
+
+        setupCarousel : function() {
+            this.$carousel = $('#dashboardCarousel').carousel({
+                interval : false
+            });
+
+            this.$el.find('.icon-chevron-sign-right').click(function() {
+                this.$carousel.carousel('next');
+            }.bind(this));
+
+            this.$el.find('.icon-chevron-sign-left').click(function() {
+                this.$carousel.carousel('prev');
+            }.bind(this));
+        },
+
+        getDashboardSubtitle : function(carouselIndex) {
+            this.getCategories();
+            var subtitle = '';
+            if ( ( this.categories.length >= 1 ) &&
+                 ( this.parentDashboardInfo.id !== this.getCategoryId() ) ) {
+
+                subtitle = _.str.capitalize( this.categories[carouselIndex].name ) + ' Dashboard';
+            } else {
+                subtitle = 'Monitor Dashboard';
+            }
+
+            return subtitle;
+        },
+
+        publishDashboardSubtitle : function(carouselIndex) {
+            Backbone.Mediator.pub('view:dashboard:render', {
+                'subtitle' : this.getDashboardSubtitle(carouselIndex)
+            });
+        },
+
+        advanceCarousel : function(e) {
+            if(e) e.stopPropagation();
+
+            this.carouselIndex = this.$el.find('.item.active').index('.item');
+            this.setCategoryId( ( this.categories.length ) 
+                                ? this.categories[this.carouselIndex].id 
+                                : this.getCategoryId() );
+
+            
+            this.router.navigate('dash/' + this.dashboardId + '/category/' + this.getCategoryId() );
+            this.$el.find('.dashboard-' + this.getCategoryId()).css({
+                'min-height' : this.$el.find('.dashboard-' + this.getCategoryId() + ' .monitor-grid').height() + 40
+            });
+
+            this.publishDashboardSubtitle(this.carouselIndex);
+            Backbone.Mediator.pub('view:dashboard:category', this.getCategoryId());
+            $(window).trigger('resize');
+        },
+
+        getCategoryIndex : function() {
+            var currentIndex = 0;
+            _.each(this.categories, function(category, index) {
+                if ( this.getCategoryId() === category.id ) {
+                    currentIndex = index;
+                }
+            }, this);
+
+            return currentIndex;
+        },
+
+        goToCategory : function() {
+            if ( this.getCategoryIndex() ) {
+                // When we advance directly to a slide
+                // animation is unnecessary
+                this.$carousel.toggleClass('slide');
+                this.$carousel.carousel(this.getCategoryIndex());
+                this.$carousel.toggleClass('slide');
+            }
+            
+            if ( this.categories.length <= 1 ) {
+                this.$el.find('.carousel-indicators, .carousel-control').hide();
+            }
+        },
+
+        // This should return an id no matter what
+        // whether it's a category ( which is just a nested dashboard )
+        // or dashboard id
+        getCategoryId : function() {
+            return this.categoryId;
+        },
+
+        setCategoryId : function(id) {
+            this.categoryId = ( !_.isNull(id) ) ? id : this.categoryId;
+            return this.getCategoryId();
+        },
+
+        getMonitorOrder : function() {
+            var userPreferences = this.user.get('preferences');
+
+            if ( this.categories.length ) {
+                _.each(this.categories, function(category) {
+                    var categoryMonitorOrder = ( userPreferences.dashboards 
+                                                 && !_.isEmpty(userPreferences.dashboards[category.id]) )
+                                             ? userPreferences.dashboards[category.id].order
+                                             : [];
+                    this.currentOrder[category.id] = categoryMonitorOrder;
+                }, this);
+            } else {
+                var dashboardMonitorOrder = ( userPreferences.dashboards 
+                                             && !_.isEmpty(userPreferences.dashboards[this.parentDashboardInfo.id]) )
+                                         ? userPreferences.dashboards[this.parentDashboardInfo.id].order
+                                         : [];
+                this.currentOrder[this.parentDashboardInfo.id] = dashboardMonitorOrder;
+            }
+
+            return this.currentOrder;
+        },
+
+        getDashboardInfo : function(dashboardId, cb) {
+            $.ajax({
+                url : '/dashboards/' + dashboardId,
+                async : false,
+                success : function(dashboard) {
+                    this.parentDashboardInfo = dashboard;
+                    
+                    if (typeof cb === 'function') {
+                        cb(this.parentDashboardInfo.name);
+                    }
+                }.bind(this),
+                error : function(result) {
+                }.bind(this),
+                complete : function(jxhr, status) {
+                }.bind(this)
+            });
+        },
+
+        editMonitor : function(id) {
+            this.expandedMonitorView.render(id, this.categories, this.getCategoryId(), this.dashboardId);
+        },
+
+        updateDash : function(data) {
+            if (data && data.status && data.status != 'error') {
+                this.collection = new MonitorCollection(null, {
+                    dashboardId : this.dashboardId
+                });
+
+                this.reinitializeDash(data);
+            }
+            this.showDash();
+        },
+
+        reinitializeDash : function(data) {
+            var $parentSibling = this.$el.parent();
+
+            this.router.navigate();
+            if ( this.getCategoryId() ) {
+                this.router.navigate("dash/" + this.dashboardId + '/category/' + this.getCategoryId(), {trigger: true});
+            } else {
+                this.router.navigate("dash/" + this.dashboardId, {trigger: true});
+            }
+        },
+
+        hideDash : function() {
+            this.$el.hide();
+        },
+
+        showDash : function() {
+            this.$el.show();
+            // highcharts gets stuck sometimes, firing a 
+            // resize event keeps it from sticking
+            $(window).trigger('resize');
+        },
+
+        updateSavedMonitorStatus : function(data) {
+            var model = ( data ) ? data.model : null;
+
+            if ( model ) {
+                _.each(this.monitors, function(view) {
+                    if(view.model.get('id') === model.get('id')) {
+                        view.nextRun();
+                    }
+                });
+            }
+        },
+
+        checkDashboardAlertState : function() {
+            this.collection.each(function(model) {
+                if ( model.get('status') !== 'success' && typeof model.get('status') != 'undefined' && model.get('active') ) {
+                    this.dashboardAlert = true;
+                }
+            });
+
+            if ( this.dashboardAlert ) {
+                Backbone.Mediator.pub('view:dashboard:alert');
+            }
+
+            return this.dashboardAlert;
+        },
+        /**
+         * SmallMonitorView#updateMonitorList()
+         *  
+         * This method is simply to place small monitors in bootstrap
+         * rows and add them correctly for template render. 
+         **/
+        updateMonitorList : function() {
+            // to store current list in current order
+            var monitorCollection = [],
+                renderCategories  = [];
+
+            // get current monitor order from user prefs
+            this.getMonitorOrder();
+
+            // NOTE: utilize handlebars to determine how many monitors
+            // per row are needed which is configurable by this view
+            Handlebars.registerHelper('mod', function(indexCount, block) {
+                if ( parseInt(indexCount, 10) % (this.rowMonitorLimit) === 0 ) {
+                    return block.fn(this);
+                }
+            }.bind(this));
+            // build json payload for template render in handlebars
+            if ( this.categories.length ) {
+                _.each(this.categories, function(category) {
+                    var monitorCollection = new MonitorCollection(null, {
+                        dashboardId : category.id
+                    });
+
+                    // sometimes there is a preexisting order that may lack
+                    // newly added monitors, etc. here we are making sure they 
+                    // get rendered at the end of the current user's ordering
+                    // preferences array
+                    var categoryMonitorOrder = this.currentOrder[category.id];
+                    if (categoryMonitorOrder.length !== 0) {
+                        // instantiate views that don't have order yet...
+                        var unorderedMonitors = _.difference(monitorCollection.pluck('id'), categoryMonitorOrder);
+                        // add them to the order array
+                        categoryMonitorOrder = _.union(categoryMonitorOrder, unorderedMonitors); 
+                        monitorCollection.filterById( categoryMonitorOrder );
+                    }
+
+                    this.monitorCollections.push(monitorCollection);
+                    category.monitors = monitorCollection.toJSON();
+                }, this);
+                renderCategories = this.categories;
+            } else {
+                var monitorCollection = new MonitorCollection(null, {
+                    dashboardId : this.parentDashboardInfo.id
+                });
+                
+                var dashboardMonitorOrder = ( this.currentOrder.length ) 
+                                          ? this.currentOrder[this.parentDashboardInfo.id]
+                                          : [];
+                if (dashboardMonitorOrder.length !== 0) {
+                    // instantiate views that don't have order yet...
+                    var unorderedMonitors = _.difference(monitorCollection.pluck('id'), dashboardMonitorOrder);
+                    // add them to the order array
+                    dashboardMonitorOrder = _.union(dashboardMonitorOrder, unorderedMonitors); 
+                    monitorCollection.filterById( dashboardMonitorOrder );
+                }
+
+                this.monitorCollections.push(monitorCollection);
+                this.parentDashboardInfo.monitors = monitorCollection.toJSON();
+
+                renderCategories.push(this.parentDashboardInfo);
+            }
+
+            // render the dashboard template before we render our
+            // small monitors
+            this.templar.render({
+                path : 'dashboard',
+                el   : this.$el,
+                data : {
+                    'categories' : renderCategories
+                }
+            });
+
+            _.each(this.monitorCollections, function(monitorCollection) {
+                monitorCollection.each(function(monitor) {
+                    this.monitors.push(new SmallMonitorView({
+                        'el'          : this.$el.find('.small-monitor-' + monitor.get('id'))[0],
+                        'model'       : monitor,
+                        'dashboardId' : this.dashboardId,
+                        'templar'     : this.templar,
+                        'user'        : this.user
+                    }).render()); 
+                }.bind(this));
+            }, this);
+        },
+
+        destroyMonitors : function() {
+            for (viewName in this.monitors) {
+                var view = this.monitors[viewName];
+                view.destructor();
+                delete this.monitors[viewName];
+            }
+        },
+
+        destructor : function() {
+            var $parentSibling = this.$el.parent();
+
+            // start cleaning up monitor views
+            this.destroyMonitors();
+            // unbind collection
+            this.collection.off('remove', this.reinitializeDash, this);
+            // unsubscribe from mediator channels
+            this.destroySubscriptions();
+            // clean up edit/add monitor view
+            this.expandedMonitorView.destructor();
+            this.addMonitorView.destructor();
+            this.alertTimelineView.destructor();
+            this.resetMonitorView.destructor();
+            
+            //
+            this.monitors = [];
+            this.categories = [];
+
+            this.$el.empty();
+            this.$el.remove();
+            this.off();
+
+            // place the containing element back in the page for later
+            $parentSibling.prepend("<div class='monitor-panel container clearfix'>");
+        }
+    });
+
+    return DashboardView;
+});