<commit_before>define('app/views/monitoring', [
    'text!app/templates/monitoring.html', 'ember'],
    /**
     *
     * Monitoring View
     *
     * @returns Class
     */
    function(monitoring_html) {
        return Ember.View.extend({

            template: Ember.Handlebars.compile(monitoring_html),

            graphs : {
                cpu: null,
                load: null,
                memory: null,
                diskRead: null,
                diskWrite: null,
                networkTX: null,
                networkRX: null
            },

            viewRendered: false,
            graphsCreated: false,

            /**
            *
            * Initialize monitoring view. Automatically called by ember
            *
            */
            init: function() {
                this._super();
                this.setUpGraphs();
            },

            /**
            *
            * Called by ember when view is rendered
            *
            */
            didInsertElement: function(){
                this._super();
                this.set('viewRendered',true);
            },

            /**
            *
            * Called by ember when view will be destroyed
            * Stops data request and re-initializes enable button
            *
            */
            willDestroyElement: function(){

                this._super();
                Mist.monitoringController.request.stop();

                // Re-Initialize Enable Button Of Jquery Mobile
                Em.run.next(function() {
                    $('.monitoring-button').button();
                });
            },

            /**
            *
            * If monitoring is enabled Re-draws jqm components,
            * creates graph instances, initializes controller and
            * setups resize event
            *
            */
            setUpGraphs: function() {

                var machine = this.get('controller').get('model');

                // Check if disable button pressed
                // Then check if everything is ok to render the graphs
                if(machine.id != ' ' && this.viewRendered && !machine.hasMonitoring){

                    Mist.monitoringController.request.stop();
                }
                else if(this.viewRendered && machine.hasMonitoring && !this.graphsCreated &&
                        machine.id != ' '){

                    var self = this;
                    var controller = Mist.monitoringController;

                    var setup = function() {

                        // Check if jqm is initialized
                        if(!Mist.isJQMInitialized){

                            window.setTimeout(setup,1000);
                        }
                        else{

                            Em.run.next(function() {

                                // Re-Initialize jquery components and hide buttons
                                self.redrawJQMComponents();     
                                $('.graphBtn').hide(0); 
                                
                                self.createGraphs(10*60*1000);
                                

                                controller.initialize({
                                    machineModel    : machine,      // Send Current Machine
                                    graphs          : self.graphs,  // Send Graphs Instances
                                });

                                // Set Up Resolution Change Event
                                $(window).resize(function(){

                                    var newWidth = $("#GraphsArea").width() -2;
                                    for(metric in self.graphs){
                                         self.graphs[metric].changeWidth(newWidth);
                                    }
                                })

                            });
                        }
                    }

                    setup();
                    Mist.rulesController.redrawRules();
                }
            }.observes('controller.model.hasMonitoring','viewRendered'),

            /**
            *
            * Re-draws JQM Components of monitoring
            *
            */
            redrawJQMComponents: function(){

                $('.monitoring-button').trigger('create');
                $('#add-rule-button').trigger('create');
                $('#monitoring-dialog').trigger('create');

                $('#graphBar').trigger('create');

                // History And Zoom Buttons
                $('.graphControls').trigger('create');

                // Disable History
                $('#graphsGoForward').addClass('ui-disabled');
                $('#graphsResetHistory').addClass('ui-disabled');
            },

            /**
            *
            * Creates graph instances
            * @param {number} timeToDisplay  - The graphs timeWindow in miliseconds
            *
            */
            createGraphs: function(timeToDisplay){

                // Get Width, -2 left & right border
                var width = $("#GraphsArea").width() -2;

                this.graphs['cpu']       = new this.Graph('cpuGraph',width,timeToDisplay,"%");
                this.graphs['load']      = new this.Graph('loadGraph',width,timeToDisplay);
                this.graphs['memory']    = new this.Graph('memoryGraph',width,timeToDisplay,"%");
                this.graphs['diskRead']  = new this.Graph('diskReadGraph' ,width,timeToDisplay);
                this.graphs['diskWrite'] = new this.Graph('diskWriteGraph',width,timeToDisplay);
                this.graphs['networkRX'] = new this.Graph('networkRXGraph',width,timeToDisplay);
                this.graphs['networkTX'] = new this.Graph('networkTXGraph',width,timeToDisplay);


                self.graphsCreated = true;
            },


            /**
             * Represents a Graph.
             * @constructor
             * @param {string} divID            - The id of div element, this is where graphs will append
             * @param {number} width            - The width of graph
             * @param {number} timeToDisplayms  - The TimeWindow in miliseconds
             * @param {string} yAxisValueFormat - Format for Left axis values ex. 10%
             */
            Graph: function(divID,width,timeToDisplayms,yAxisValueFormat){

                    var NUM_OF_LABELS = 5;
                    var NUM_OF_MIN_MEASUREMENTS = 8640; // 24 Hours
                    var NUM_OF_MAX_MEASUREMENTS = 8640; // 24 Hours
                    var NUM_OF_MEASUREMENT = 60; // Number of metrics monitor sends in every request


                    // Calculate Aspect Ratio Of Height
                    var fixedHeight = 160 / 1280 * width;
                    var margin      = {top: 10, right: 0, bottom: 24, left: 40};<commit_msg>Made graphs left margin bigger to be able to display more digits<commit_after>define('app/views/monitoring', [
    'text!app/templates/monitoring.html', 'ember'],
    /**
     *
     * Monitoring View
     *
     * @returns Class
     */
    function(monitoring_html) {
        return Ember.View.extend({

            template: Ember.Handlebars.compile(monitoring_html),

            graphs : {
                cpu: null,
                load: null,
                memory: null,
                diskRead: null,
                diskWrite: null,
                networkTX: null,
                networkRX: null
            },

            viewRendered: false,
            graphsCreated: false,

            /**
            *
            * Initialize monitoring view. Automatically called by ember
            *
            */
            init: function() {
                this._super();
                this.setUpGraphs();
            },

            /**
            *
            * Called by ember when view is rendered
            *
            */
            didInsertElement: function(){
                this._super();
                this.set('viewRendered',true);
            },

            /**
            *
            * Called by ember when view will be destroyed
            * Stops data request and re-initializes enable button
            *
            */
            willDestroyElement: function(){

                this._super();
                Mist.monitoringController.request.stop();

                // Re-Initialize Enable Button Of Jquery Mobile
                Em.run.next(function() {
                    $('.monitoring-button').button();
                });
            },

            /**
            *
            * If monitoring is enabled Re-draws jqm components,
            * creates graph instances, initializes controller and
            * setups resize event
            *
            */
            setUpGraphs: function() {

                var machine = this.get('controller').get('model');

                // Check if disable button pressed
                // Then check if everything is ok to render the graphs
                if(machine.id != ' ' && this.viewRendered && !machine.hasMonitoring){

                    Mist.monitoringController.request.stop();
                }
                else if(this.viewRendered && machine.hasMonitoring && !this.graphsCreated &&
                        machine.id != ' '){

                    var self = this;
                    var controller = Mist.monitoringController;

                    var setup = function() {

                        // Check if jqm is initialized
                        if(!Mist.isJQMInitialized){

                            window.setTimeout(setup,1000);
                        }
                        else{

                            Em.run.next(function() {

                                // Re-Initialize jquery components and hide buttons
                                self.redrawJQMComponents();     
                                $('.graphBtn').hide(0); 
                                
                                self.createGraphs(10*60*1000);
                                

                                controller.initialize({
                                    machineModel    : machine,      // Send Current Machine
                                    graphs          : self.graphs,  // Send Graphs Instances
                                });

                                // Set Up Resolution Change Event
                                $(window).resize(function(){

                                    var newWidth = $("#GraphsArea").width() -2;
                                    for(metric in self.graphs){
                                         self.graphs[metric].changeWidth(newWidth);
                                    }
                                })

                            });
                        }
                    }

                    setup();
                    Mist.rulesController.redrawRules();
                }
            }.observes('controller.model.hasMonitoring','viewRendered'),

            /**
            *
            * Re-draws JQM Components of monitoring
            *
            */
            redrawJQMComponents: function(){

                $('.monitoring-button').trigger('create');
                $('#add-rule-button').trigger('create');
                $('#monitoring-dialog').trigger('create');

                $('#graphBar').trigger('create');

                // History And Zoom Buttons
                $('.graphControls').trigger('create');

                // Disable History
                $('#graphsGoForward').addClass('ui-disabled');
                $('#graphsResetHistory').addClass('ui-disabled');
            },

            /**
            *
            * Creates graph instances
            * @param {number} timeToDisplay  - The graphs timeWindow in miliseconds
            *
            */
            createGraphs: function(timeToDisplay){

                // Get Width, -2 left & right border
                var width = $("#GraphsArea").width() -2;

                this.graphs['cpu']       = new this.Graph('cpuGraph',width,timeToDisplay,"%");
                this.graphs['load']      = new this.Graph('loadGraph',width,timeToDisplay);
                this.graphs['memory']    = new this.Graph('memoryGraph',width,timeToDisplay,"%");
                this.graphs['diskRead']  = new this.Graph('diskReadGraph' ,width,timeToDisplay);
                this.graphs['diskWrite'] = new this.Graph('diskWriteGraph',width,timeToDisplay);
                this.graphs['networkRX'] = new this.Graph('networkRXGraph',width,timeToDisplay);
                this.graphs['networkTX'] = new this.Graph('networkTXGraph',width,timeToDisplay);


                self.graphsCreated = true;
            },


            /**
             * Represents a Graph.
             * @constructor
             * @param {string} divID            - The id of div element, this is where graphs will append
             * @param {number} width            - The width of graph
             * @param {number} timeToDisplayms  - The TimeWindow in miliseconds
             * @param {string} yAxisValueFormat - Format for Left axis values ex. 10%
             */
            Graph: function(divID,width,timeToDisplayms,yAxisValueFormat){

                    var NUM_OF_LABELS = 5;
                    var NUM_OF_MIN_MEASUREMENTS = 8640; // 24 Hours
                    var NUM_OF_MAX_MEASUREMENTS = 8640; // 24 Hours
                    var NUM_OF_MEASUREMENT = 60; // Number of metrics monitor sends in every request


                    // Calculate Aspect Ratio Of Height
                    var fixedHeight = 160 / 1280 * width;
                    var margin      = {top: 10, right: 0, bottom: 24, left: 52};
{'fraction_non_alphanumeric': 0.0998621090064591, 'fraction_numerical': 0.006821975469917991, 'mean_word_length': 1.1063894833384287, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 18, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5992074', 'n_tokens_mistral': 3332, 'n_tokens_neox': 2983, 'n_words': 680}