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

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

@@ -0,0 +1,47 @@
+define([
+    'view/base'
+], function(
+    BaseView
+){  
+
+    var AlertView = BaseView.extend({
+
+        subscriptions : {
+            'view:adddashboard:save'      : 'render',
+            'view:addcategory:save'       : 'render',
+            'view:addmonitor:save'        : 'render',
+            'view:addmonitor:test'        : 'render',
+            'view:expandedmonitor:delete' : 'render',
+            'view:expandedmonitor:save'   : 'render',
+            'view:smallmonitor:save'      : 'render',
+            'view:dashboard:save'         : 'render',
+            'view:resetmonitor:reset'     : 'render'
+        },
+
+        initialize : function(options) {
+            _.bindAll(this, 'render', 'activate', 'deactivate');
+            this.templar = options.templar;
+        },
+
+        render : function(data) {
+            this.templar.render({
+                path   : 'alert',
+                el     : this.$el,
+                data   : data
+            });
+
+            this.activate();
+        },
+
+        activate : function() {
+            this.$el.addClass('active');
+            _.delay(this.deactivate, 8000);
+        },
+
+        deactivate : function() {
+            this.$el.removeClass('active');
+        }
+    });
+
+    return AlertView;
+});

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

@@ -0,0 +1,340 @@
+define([
+    'timeline',
+    'view/base'
+], function(
+    Timeline,
+    BaseView
+){
+
+    var AlertTimelineView = BaseView.extend({
+
+        events : {
+            'shown .accordion-body'  : 'publishTimelineHeight',
+            'hidden .accordion-body' : 'publishTimelineHeight'
+        },
+
+        subscriptions : {
+            'view:dashboard:complete' : 'render'
+        },
+
+        initialize : function(options) {
+            _.bindAll(this);
+
+            this.templar      = options.templar;
+            this.dashboardId  = options.dashboardId;
+            this.status       = options.status;
+            this.popovers     = [];
+            this.openPopovers = [];
+            this.alertData    = [];
+        },
+
+        render : function() {
+            this.templar.render({
+                path   : 'alerttimeline',
+                el     : this.$el,
+                data   : {}
+            });
+
+            this.$timeline  = this.$el.find('.alert-timeline .accordion-inner');
+            this.$accordion = this.$el.find('.alert-timeline .accordion-body');
+
+            // this.setupAlertTimeline();
+
+            // // notify user with red bell indicator
+            // this.setAlertStatus();
+        },
+
+        addPopover : function() {
+            var self = this;
+            jobAlertIdList = _.uniq(self.jobAlertList);
+
+            for (var i = jobAlertIdList.length - 1; i >= 0; i--) {
+
+                var initPopover = function(jobId) {
+
+                    var $content   = $("<div class='timeline-monitor'>"),
+                        $closeBtn  = $('<button/>', {
+                            'text'  : 'Troubleshoot Monitor',
+                            'class' : 'btn'
+                        });
+
+                    var $group = $('.timeline-group-' + jobId);
+
+                    var el = $group.popover({
+                        trigger   : 'manual',
+                        html      : true,
+                        placement : 'bottom',
+                        delay     : {
+                            show : 100,
+                            hide : 200
+                        },
+                        container : 'body',
+                        content   : $content
+                    }).click(function(e) {
+                        e.stopPropagation();
+                        var $this = $(this);
+
+                        // remove other open popovers from view
+                        _.each(self.openPopovers, function(openPopover) {
+                            openPopover.data('popover').tip().removeClass('active');
+                            openPopover.data('popover').hide();
+                        });
+                        // reset list of open popovers
+                        self.openPopovers = [];
+
+                        // check that popover is active
+                        if ($this.toggleClass('active').hasClass('active')) {
+                            $closeBtn.off('click');
+                            $('body').off('click');
+                            $this.popover('show');
+
+                            // throw up the loading text till the data is retrieved about the incident
+                            // Note : better overlay method overiding base.  Need to switch out base
+                            self.showOverlay($content.parent(), 'Loading...', 'alert-data-overlay');
+
+                            self.loadAlertIncidentData(jobId, $this, $content, function(incidentData) {
+                                // create the table that will hold meta data about incident
+                                var $metaTable = self.createMetaTable(incidentData);
+
+                                if ( $this.data('popover').tip().find('.alert-meta-data').length > 0 ) {
+                                    $this.data('popover').tip().find('.alert-meta-data').replaceWith($metaTable);
+                                } else {
+                                    $this.data('popover').tip().append($metaTable);
+                                }
+                                $this.data('popover').tip().append($closeBtn);
+
+                                // add a popover hide trigger
+                                $closeBtn.on('click', function(e) {
+                                    e.stopPropagation();
+                                    $this.popover('hide');
+                                    $this.toggleClass('active');
+                                    $closeBtn.off('click');
+                                    self.openPopovers = [];
+                                    Backbone.Mediator.pub('view:alerttimeline:troubleshoot', jobId);
+                                });
+
+                                // push the current element tied to a popover into an array
+                                self.openPopovers.push($this);
+                                // add a on body trigger to remove popovers as well
+                                $('body').on('click', function() {
+                                    self.openPopovers = [];
+                                    $this.removeClass('active');
+                                    $this.popover('hide');
+                                });
+                            });
+
+
+                        } else {
+                            self.openPopovers = [];
+                            $this.popover('hide');
+                        }
+                    });
+                }
+                // initialize popovers with correct jobId reference
+                initPopover(jobAlertIdList[i]);
+            };
+        },
+
+        loadAlertIncidentData : function(jobId, $alertEvent, $content, cb) {
+            var self = this;
+
+            // load graph data for popover
+            var job             = self.collection.get(jobId),
+                incidentPattern = /timeline-event-(\d+)/g,
+                incidentId      = parseInt(incidentPattern.exec($alertEvent.attr('class'))[1]),
+                incidentData    = _.findWhere(self.alertData, {
+                    'id' : incidentId
+                });
+
+            // get meta data for incident alert
+            var name            = job.get('name'),
+                startDate       = new XDate(incidentData.start),
+                endDate         = new XDate(incidentData.end),
+                jobData         = job.toJSON(),
+                incidentMinDiff = startDate.diffMinutes(endDate),
+                incidentHrsDiff = startDate.diffHours(endDate);
+
+            jobData.toDate  = endDate.toString("MM/dd/yyyy HH:mm");
+            // restricting to 500 minutes back to help keep HighCharts from choking
+            jobData.minutes = ( incidentMinDiff < 500 ) ? incidentMinDiff : 500;
+
+            var chart = self.initGraph($content[0]);
+
+            $.ajax({
+                url   : '/monitor.json',
+                type  : 'post',
+                data  : job.toJSON(),
+                async : false,
+                success : function( response ) {
+                    if ( response.status == 'success' ) {
+                        var formattedGraphData = self.formatGraphData( response.graph_data );
+                        self.renderGraphData(chart, formattedGraphData);
+
+
+                        if ( typeof cb === 'function' ) {
+                            cb({
+                                'name'  : name,
+                                'start' : startDate.toString("MM/dd/yyyy HH:mm"),
+                                'end'   : endDate.toString("MM/dd/yyyy HH:mm"),
+                                'hrs'   : Math.floor(incidentHrsDiff),
+                                'min'   : Math.floor(incidentMinDiff % 60)
+                            });
+                        }
+
+                        // finally hide the loading text
+                        self.hideOverlay($content.parent());
+                    }
+                }
+            });
+        },
+
+        // NOTE : Need to abstract this out to a template
+        createMetaTable : function(incidentData) {
+            return $("<table class='alert-meta-data'><tr><th>Name</th><td>"
+                   + incidentData.name
+                   + "</td></tr><tr><th>Start</th><td>"
+                   + incidentData.start
+                   + "</td></tr><tr><th>End</th><td>"
+                   + incidentData.end
+                   + "</td></tr><tr><th>Duration</th><td>"
+                   + incidentData.hrs + ' hr '
+                   + incidentData.min + ' min'
+                   + "</td></tr></table>");
+        },
+
+        publishTimelineHeight : function() {
+            var self = this;
+
+            // hide overflow at the beginning of transition
+            // to keep a vertical scrollbar from appearing
+            Backbone.Mediator.pub('view:alerttimeline:toggle', self.$accordion.height());
+            $(document.body).css('overflow','auto');
+        },
+
+        setAlertStatus : function() {
+            var self = this;
+            if (this.status) self.$el.find('.icon-bell-alt').addClass('alert-status');
+        },
+
+        setupAlertTimeline : function() {
+            var self            = this,
+                jobAlertIdList  = [];
+
+            $.ajax('/dashboards/' + self.dashboardId + '/errors', {
+                success : function(result) {
+
+                    // format data for timeline.js
+                    _.each(result, function(alert) {
+                        var startDate = null;
+
+                        // NOTE: set the name for an alert, but this isn't currently
+                        // being used for the UI, more for debugging purposes.
+                        _.extend(alert, {
+                            'name' : ( typeof self.collection.get(alert.jobId) != 'undefined' ) ? self.collection.get(alert.jobId).get('name') : ''
+                        });
+
+                        // limiting data range to 2 weeks worth
+                        // NOTE : Need to probably have a better rendering system for the alert timeline
+                        //        for issues lasting longer than 2 weeks.
+                        if ( self.formatServerDateTime(alert.date, true) < new XDate(Date.now(), true).addWeeks(-2) ) {
+                            startDate = new XDate(Date.now(), true).addWeeks(-2);
+                        } else {
+                            startDate = self.formatServerDateTime(alert.date, true);
+                        }
+
+                        self.alertData.push({
+                            'id'      : alert.id,
+                            'jobId'   : alert.jobId,
+                            'start'   : startDate,
+                            'end'     : ( alert.endDate ) ? self.formatServerDateTime(alert.endDate, true) : self.formatServerDateTime(Date.now(), true),
+                            'status'  : alert.status,
+                            'content' : alert.name
+                        });
+
+                        jobAlertIdList.push(alert.jobId);
+                    });
+
+                    // create our timeline
+                    self.timeline  = new Timeline(self.$timeline[0]);
+
+                    // default timeline view to current time spanning 1day back and 0.5day into the future
+                    var start = new XDate(Date.now() - 2 * 24/2 * 60 * 60 * 1000, true),
+                        end   = new XDate(Date.now() + 1 * 24/2 * 60 * 60 * 1000, true);
+
+                    // render the timeline data
+                    self.timeline.draw(self.alertData, {
+                        'utc'         : true,
+                        'start'       : start,
+                        'end'         : end,
+                        'width'       : '100%',
+                        'editable'    : false,
+                        'style'       : 'box',
+                        'intervalMin' : 1000 * 60 * 10,          // 10 seconds
+                        'intervalMax' : 1000 * 60 * 60 * 24 * 3, // 3 day max zoom out
+                    });
+
+                    self.$timeline.on('mouseenter', function() {
+                        $(window).on('scroll', self.stopBrowserScroll);
+                    });
+                    self.$timeline.on('mouseleave', function() {
+                        $(window).off('scroll', self.stopBrowserScroll);
+                    });
+
+                    self.jobAlertList = jobAlertIdList;
+                    self.addPopover();
+                }
+            });
+        },
+
+        stopBrowserScroll : function() {
+            window.scrollTo(0,0);
+        },
+
+        /** internal
+         * BaseView#showOverlay(el, text, class) -> Element
+         *
+         *
+         **/
+        showOverlay : function(el, text, className) {
+            var self = this;
+            el = $(el);
+
+            if ( !self.overlay ) {
+                var className = ( className ) ? className : '';
+                el.data('overlay', $("<div class='overlay " + className + "'><h1></h1></div>"));
+                el.append(el.data('overlay'));
+            }
+
+            el.data('overlay').find('h1').html(text);
+            el.data('overlay').show();
+        },
+        /** internal
+         * BaseView#hideOverlay() -> Element
+         *
+         *
+         **/
+        hideOverlay : function(el) {
+            var self = this;
+            el.data('overlay').hide();
+        },
+
+        destructor : function() {
+            var self     = this,
+                parentEl = self.$el.prev();
+
+            // unsubscribe from mediator channels
+            self.destroySubscriptions();
+
+            self.remove();
+            self.unbind();
+            self.off();
+
+            self.$el.empty();
+
+            // place the containing element back in the page for later
+            $("<section class='timeline-wrap clearfix'></section>").insertAfter(parentEl);
+        }
+    });
+
+    return AlertTimelineView;
+});

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

@@ -0,0 +1,535 @@
+define([
+    'jquery',     
+    'underscore', 
+    'backbone',
+    'handlebars',
+    'highcharts',
+    'underscore-string',
+    'highcharts-theme',
+    'xdate',
+    'backbone-mediator'
+], function(
+    $, 
+    _, 
+    Backbone,
+    Handlebars,
+    HighChart
+){  
+    var BaseView = Backbone.View.extend({
+
+        assetRoot        : 'public/',    // just a reference for asset url config
+        intervalDiviser  : 4,            // used for dynamically reducing x-axis label markers
+        infiniteTimes    : [],           // save infinite data in our graphData object
+        infiniteLabels   : [],
+        infiniteTimesInt : [],
+        /**
+         * BaseView#addHelpers()
+         **/
+        addHelpers : function() {
+            Handlebars.registerHelper('nl2br', function(text) {
+                var nl2br = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + '<br>' + '$2');
+                return new Handlebars.SafeString(nl2br);
+            });
+        },
+        /**
+         * BaseView#destroySubscriptions()
+         **/
+        destroySubscriptions : function () {
+            for (sub in this.subscriptions) {
+                Backbone.Mediator.unsubscribe(sub, this[this.subscriptions[sub]], this);
+            }            
+        },
+        /**
+         * BaseView#drawAsInfinite(key) -> Boolean|Null
+         **/
+        drawAsInfinite : function (key) {
+            var match = key.match(/^drawAsInfinite\((.*)\)$/);
+            if (match) {
+                return _.last(match);
+            } else {
+                return null;
+            }
+        },
+        /**
+         * BaseView#formatGraphData(graphData) -> Object
+         * - graphData (Object): payload containing graph data, output, status
+         *                       from the /monitors route
+         *
+         * This method splits out coordinate data into 2 linear arrays keyed to
+         * the specific metrics. This makes it easier for high charts to consume
+         * the data and graph it. The old data key/value pairs are stored in the 
+         * graphite key under the metrics queue created by the metrics field in 
+         * the setmetrics.hbs template. 
+         **/
+        formatGraphData : function( graphData ) {
+            var formattedGraphData = _.reduce(_.keys(graphData), (function(accum, key) {
+                var graphiteDataRaw     = graphData[key];
+                graphData[key]          = {};
+                graphData[key].graphite = graphiteDataRaw;
+                graphData[key].xInt     = [];
+                graphData[key].x        = [];
+                graphData[key].y        = [];
+
+                _.each(graphData[key].graphite, function(dataPair) {
+                    // NOTE : non standardized date data coming from database, sometimes 13 digits sometimes 10
+                    //        in this case 10
+                    graphData[key].x.push( new XDate(dataPair[0] * 1000).toUTCString("HH:mm") );
+                    graphData[key].y.push( dataPair[1] );
+                    graphData[key].xInt.push( dataPair[0] );
+                });
+
+                return graphData;
+
+            }), []);
+
+            return formattedGraphData;
+        },
+        focusFirst : function() {
+            this.$el.find('input[type=text]:first').focus();
+        },
+        /**
+         * BaseView#initGraph(el) -> Object
+         * - el (Element): container element for graph
+         *
+         * Just sets up a high chart for any given element container.
+         **/
+        initGraph : function(el) {
+            var self = this;
+
+            self.chart = new Highcharts.Chart({
+                exporting : {
+                    buttons : { 
+                        exportButton : {
+                            enabled : false
+                        },
+                        printButton : {
+                            enabled : false
+                        }
+
+                    }
+                },
+                credits: {
+                    enabled : false
+                },
+                chart: {
+                    zoomType        : 'x',
+                    spacingRight    : 24,
+                    animation       : true,
+                    renderTo        : el,
+                    type            : 'line',
+                    borderRadius    : 3,
+                    backgroundColor : {
+                        stops: [
+                            [0, 'rgb(16, 16, 16)'],
+                            [1, 'rgb(16, 16, 16)']
+                        ]
+                    },
+                },
+                title : {
+                    text  : null
+                },
+                xAxis : {
+                    minTickInterval : this,
+                    title : {
+                        text : null
+                    }
+                },
+                yAxis : {
+                    title : {
+                        text : null
+                    }
+                },
+                plotOptions: {
+                    column: { 
+                        animation: true
+                    },
+                    series: {
+                        animation : false,
+                        marker: {
+                            enabled: false
+                        }
+                    }
+                },
+                tooltip : {
+                    animation : true
+                }
+            });
+
+            return self.chart;
+        },
+        /**
+         * BaseView#keyOrder(hash) -> Array
+         * - hash : a hash of values
+         *
+         * Just getting a list of alphabetically sorted hash keys.
+         **/
+        keyOrder : function(hash) {
+            var self = this,
+                keys = [];
+
+                keys = _.keys(hash);
+                keys = _.sortBy(keys, function (key) {
+                    return key.toLowerCase();
+                });
+
+            return keys;
+        },
+        /**
+         * BaseView#_renderGraphData(chart, graphData)
+         * - chart (Object): HighChart object
+         * - graphData (Object): formatted graph data object
+         *
+         * Adds the right data sets to the given chart.
+         **/
+        renderGraphData : function(chart, graphData) {
+            var self       = this,
+                renderData = graphData,
+                times      = [],
+                colors     = [      // creating an array to a series color scheme to stay consistant between updates from the server
+                    '#4572A7', 
+                    '#AA4643', 
+                    '#89A54E', 
+                    '#80699B', 
+                    '#3D96AE', 
+                    '#DB843D', 
+                    '#92A8CD', 
+                    '#A47D7C', 
+                    '#B5CA92'
+                ];
+
+            // clear out previous data series
+            while (chart.series.length > 0) {
+                chart.series[0].remove(true);
+            }
+            // remove all existing plot lines
+            chart.xAxis[0].removePlotLine('plotLine');
+
+            self.infiniteTimes    = [];
+            self.infiniteTimesInt = [];
+            self.infiniteLabels   = [];
+
+            _.each(graphData, function(dataSet, key) {
+                if ( self.drawAsInfinite(key) ) {
+                    var drawAsInfiniteTimes    = [],
+                        drawAsInfiniteIntTimes = [];
+
+                    // check for time plots where defineAsInfinite is enabled
+                    for (var i = 0; i < dataSet.xInt.length; i++) {
+                        if (dataSet.y[i]) {
+                            drawAsInfiniteTimes.push(dataSet.x[i]);
+                            drawAsInfiniteIntTimes.push(dataSet.xInt[i]);
+                        }
+                    }
+
+                    self.infiniteTimes.push(drawAsInfiniteTimes);
+                    self.infiniteTimesInt.push(drawAsInfiniteIntTimes);
+                    self.infiniteLabels.push(self.drawAsInfinite(key));
+                    delete graphData[key];
+                }
+            });
+
+            // go by alpha sorted key order for graph rendering color/label consistancy
+            var sortedGraphDataKeys = self.keyOrder(graphData);
+            
+            // index of array for position placement for drawAsInfinite method
+            for (var i = 0; i < sortedGraphDataKeys.length; i++) {
+                var dataSet = graphData[sortedGraphDataKeys[i]];
+
+                chart.xAxis[0].setCategories( dataSet.x );
+                chart.xAxis[0].options.tickInterval = parseInt((dataSet.x.length / self.intervalDiviser), 10);
+                chart.xAxis[0].setExtremes(null, null);
+
+                chart.addSeries({
+                    name      : sortedGraphDataKeys[i],
+                    data      : dataSet.y,
+                    animation : false,
+                    color     : colors[i]
+                });
+
+                // keep track of x time intervals for each group combined
+                // in order to have a complete list of x data points
+                times = _.union(times, dataSet.xInt);
+            }
+
+            // check to see that there are any infinite lines to plot
+            if ( self.infiniteTimes.length ) {
+                var infinitesLength = self.infiniteTimes.length - 1;
+                for (var i = infinitesLength; i >= 0; i--) {
+                    var infiniteTimesPlots = self.infiniteTimesInt[i];
+
+                    if ( infiniteTimesPlots.length ) {
+                        for (var j = 0; j < infiniteTimesPlots.length; j++) {
+
+                            // check the position in the time array to place the plot
+                            var timeIndex = _.sortedIndex(times, infiniteTimesPlots[j]);
+
+                            if (!_.isNull(timeIndex)) { 
+                                chart.xAxis[0].addPlotLine({
+                                    id        : 'plotLine',
+                                    value     : timeIndex,
+                                    color     : 'green',
+                                    dashStyle : 'shortdash',
+                                    width     : 2,
+                                    label     : {
+                                        text  : self.infiniteLabels[i],
+                                        style : {
+                                            color : '#ccc'
+                                        } 
+                                    }
+                                });
+                            }   
+                        }
+                    }
+                }
+            }
+        },
+        /**
+         * BaseView#formatServerDateTime(value) -> Date Obj
+         * - value (String|Int): Can't rely always rely on date format being given to the front end
+         * - utc      (Boolean): UTC time format flag
+         *
+         * This is a centralized method simply for detecting the date format from the service architecture,
+         * where some systems may use a 13 digit timestamp and others a 10, etc.  This method should make 
+         * things easier to change wholesale in the future if needed.
+         **/
+        formatServerDateTime : function(value, utc) { 
+            var serverDateLength = value.toString().length;
+            return ( serverDateLength == 10 ) ? new XDate( parseInt(value, 10) * 1000, utc ) : new XDate( parseInt(value, 10), utc );
+        },
+
+        /**
+         * BaseView#parseAlertKeys(value) -> Array
+         * - value (String): INput string to parse
+         *
+         * This method is used to parse a string delimited by spaces, commas, or newlines
+         **/
+        parseAlertKeys : function(value) {
+            var parsed = [];
+            var fragments = value.split('\n');
+
+            _.each(fragments, function(frag) {
+                parsed.push(_.str.words(frag, /([ \,])/));
+            });
+
+            // assure a one dimensional array
+            parsed = _.flatten(parsed);
+            // filter out non valid alert keys
+            parsed = _.filter(parsed, function(str) {
+                // no blank values and no commas
+                return !_.str.isBlank(str) && ( str !== ',' );
+            });
+            
+            return parsed;
+        },
+        resizeModal : function($modal, size, ignoreHeight) {
+            var width            = $(window).width(),
+                height           = $(window).height(),
+                widthMultiplier  = 0.6,
+                heightMultiplier = 0.8;
+            
+            switch(size) {
+                case 'small' :
+                    widthMultipler = 0.3; break;
+                case 'medium' :
+                    widthMultipler = 0.6; break;
+                case 'large' :
+                    widthMultipler = 0.9; break;
+                default : 
+                    widthMultipler = 0.6;
+            }
+
+            $modal.css({
+                width      : width * widthMultipler,
+                marginLeft : -(width * (widthMultipler / 2))
+            });
+
+            if (!ignoreHeight) {
+                $modal.css({
+                    height     : height * heightMultiplier
+                });
+                $modal.find('.modal-body').css({
+                    maxHeight : (height * heightMultiplier) - 140,
+                    height    : (height * heightMultiplier) - 149
+                });
+            }
+
+            $modal.each(function () {
+                $(this).css({
+                    marginTop: -($(this).height() / 2),
+                });
+            });
+
+            // add a class to add other styling to
+            $modal.addClass('modal-' + size);
+
+            return {
+                height : $modal.height(),
+                width  : $modal.width(),
+                body : {
+                    height : $modal.find('.modal-body').height(),
+                    width  : $modal.find('.modal-body').width()
+                }
+            };
+        },
+
+        
+        /** internal
+         * BaseView#_processRadioControl(collection[, defaults]) -> String
+         * - collection (Object): Element collection
+         * - defaults (String): if empty collection, return defaulted string
+         *
+         * Simply used to process bootstrap button groups and find what is 
+         * currently selected. Buttons require data-value attributes to set
+         * selected value.
+         **/
+        _processRadioControl : function(collection, defaults) {
+            var activeValues = _.map(collection, function(el) {
+                return $(el).attr('data-value');
+            });
+
+            if ( activeValues.length > 0 ) {
+                return activeValues.join(',');
+            } else if ( !defaults ) {
+                return '';
+            } else {
+                return defaults;
+            }
+        },
+        /** internal
+         * BaseView#_createCronExpr() -> String
+         *
+         * Used to set up cron expression from the schedulemonitor.hbs view
+         **/
+        _createCronExpr : function() {
+            var self = this;
+
+            // cron syntax eg. 0 * * * * ?
+            return [
+                0, // self.$el.find('#inputSeconds').val()
+                self.$el.find('#inputMinutes').val(),
+                self.$el.find('#inputHours').val(),
+                self.$el.find('#inputDays').val(),
+                self._processRadioControl(self.$el.find('.month-picker button.active'), '*'),
+                self._processRadioControl(self.$el.find('.day-picker button.active'), '?')
+            ].join(' ');
+        },
+        /**
+         * BaseView#showOverlay(el, text, class) -> Element
+         *
+         * 
+         **/
+        showOverlay : function(el, text, className) {
+            var self = this;
+            el = $(el);
+
+            if ( !self.overlay ) {
+                var className = ( className ) ? className : ''; 
+                self.overlay  = $("<div class='overlay " + className + "'><h1></h1></div>");
+                el.append(self.overlay);
+            }
+
+            self.overlay.find('h1').html(text);
+            self.overlay.show();
+        },
+        /**
+         * BaseView#hideOverlay() -> Element
+         *
+         * 
+         **/
+        hideOverlay : function() {
+            var self = this;
+            self.overlay.hide();
+        },
+        /** internal
+         * AddMonitorView#_toggleFullscreen(selector, mirrorRef)
+         * - selector (String|DOM Object): Code mirror selector
+         * - mirrorRef (Object): Code mirror object reference
+         *
+         * Set code mirror styles to expand to their container.
+         **/
+        _toggleFullscreen : function(selector, mirrorRef, closeButton, backButton) {
+            var self     = this,
+                editorEl = $(selector);
+
+            if (!editorEl.hasClass('fullscreen')) {
+                if ( closeButton && backButton ) {
+                    closeButton.hide();
+                    backButton.show();
+                }
+
+                editorEl.data('beforeFullscreen', { 
+                    height : editorEl.height(), 
+                    width  : editorEl.width() 
+                });
+                editorEl.addClass('fullscreen');
+                editorEl.width('100%');
+                editorEl.height('100%');
+                mirrorRef.setSize('100%', '100%');
+                mirrorRef.refresh();
+            } else {
+                if ( closeButton && backButton ) {
+                    closeButton.show();
+                    backButton.hide();
+                }
+
+                editorEl.removeClass('fullscreen');
+                editorEl.height(editorEl.data('beforeFullscreen').height);
+                editorEl.width(editorEl.data('beforeFullscreen').width);
+                mirrorRef.refresh();
+            }
+        },
+        _validateMirror : function(mirror) {
+            var self    = this,
+                wrapper = $( mirror.getWrapperElement() );
+            if(self._isNonblank(mirror.getValue())) {
+                wrapper.removeClass('error');  
+                return true;        
+            } else {
+                wrapper.addClass('error');
+                return false;
+            }
+        },
+        _isNonblank : function(string) {
+            var isNonblankRegex = /\S/;
+            return String (string).search(isNonblankRegex) != -1;
+        },
+
+        getPositions : function(el) {
+            var self   = this,
+                pos    = $(el).offset(),
+                width  = $(el).width(),
+                height = $(el).height();
+            
+            return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
+        },
+
+        comparePositions : function( p1, p2 ) {
+            var self = this,
+                r1   = p1[0] < p2[0] ? p1 : p2,
+                r2   = p1[0] < p2[0] ? p2 : p1;
+            return ( r1[1] > r2[0] || r1[0] === r2[0] );
+        },
+
+        overlaps : function( el1, el2 ) {
+            var self = this,
+                pos1 = self.getPositions( el1 ),
+                pos2 = self.getPositions( el2 );
+        
+            return self.comparePositions(pos1[0], pos2[0]) && self.comparePositions(pos1[1], pos2[1]);
+        }
+    });
+
+    BaseView.prototype.destructor = function() {
+        this.destroySubscriptions();
+
+        if (this.onDestruct) {
+            this.onDestruct();
+        }
+
+        this.off();
+        this.remove();
+        this.$el.empty();
+    }
+
+    return BaseView;
+});