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

            template: Ember.Handlebars.compile(monitoring_html),

            cpuGraph: null,
            loadGraph: null,
            memGraph: null,
            viewRendered: false,
            //other Graphs to be added (TODO)

            init: function() {
                this._super();
                this.setUpGraphs();
            },

            // Check If Ember View Rendered
            didInsertElement: function(){
                console.log("- Ember Monitoring View Rendered");
                this.set('viewRendered',true);
                this._super();
            },

            // Check If Ember View Is Destroyed
            willDestroyElement: function(){
                console.log("- Ember Monitoring View Is Being Destroyed");
                window.clearInterval(window.monitoringInterval);
                this._super();
            },

            updateGraphs: function(data){
                    console.log("- We Have New Data At: " + (new Date()).toTimeString());

                    this.cpuGraph.updateData(data.cpu);
                    this.loadGraph.updateData(data.load);
                    this.memGraph.updateData(data.memory);
            },

            clickedCollapse: function(graph){

                $("#" + graph.id).hide(400);
                $("#" + graph.id + "Btn").show(400);
                // DEBUG Todo REMOVE IT
                console.log(graph);
                console.log("clickedCollapse");
            },

            clickedExpand: function(graph){
                
                $("#" + graph.id).show(400);
                $("#" + graph.id + "Btn").hide(400);
                // DEBUG Todo REMOVE IT
                console.log(graph);
                console.log("clickedCollapse");
            },

            // Graph Constructor
            setUpGraphs: function() {
                
                // Graph Constructor
                function Graph(divID,width,timeToDisplay){

                    var NUM_OF_LABELS = 6;
                    var STEP_SECONDS = 10;
                    var NUM_OF_MIN_MEASUREMENTS = 180;  // 30 Minutes
                    var NUM_OF_MAX_MEASUREMENTS = 8640; // 24 Hours

                    // Calculate Aspect Ratio Of Height
                    var fixedHeight = 160 / 1280 * width;
                    var margin = {top: 20, right: 0, bottom: 30, left: 0}; // TODO Fix Margin Based On Aspect Ratio

                    this.id = divID;
                    this.width = width;
                    this.height = (fixedHeight < 85 ? 85 : fixedHeight);
                    this.data = [];
                    this.timeDisplayed = timeToDisplay;
                    this.realDataIndex = -1;

                    // Distance of two values in graph (pixels), Important For Animation
                    this.valuesDistance = 0;
                    this.isAnimated = true;

                    // Calculate The step  of the time axis
                    this.secondsStep =  Math.floor((timeToDisplay.getHours()*60*60 + 
                                        timeToDisplay.getMinutes()*60 + 
                                        timeToDisplay.getSeconds() ) / NUM_OF_LABELS); 
                    

                    // Scale Functions will scale graph to defined width and height
                    var xScale = d3.time.scale().range([0, this.width - margin.left - margin.right]);
                    var yScale = d3.scale.linear().range([this.height - margin.top - margin.bottom, 0]);

                    // valueline is function that creates the main line based on data
                    var valueline = d3.svg.line()
                                    .x(function(d) {return xScale(d.time); })
                                    .y(function(d) {return yScale(d.value); });

                    
                    // Create main graph, append svg and other elements
                    var d3svg =   d3.select("#"+this.id)
                                    .append('svg')
                                    .attr('width',this.width)
                                    .attr('height',this.height);

                    var d3GridX = d3.select("#"+this.id)
                                    .select('svg')
                                    .append("g")         
                                    .attr("class", "grid-x")
                                    .attr("transform", "translate(0," + this.height + ")");

                    var d3GridY = d3.select("#"+this.id)
                                    .select('svg')
                                    .append("g")         
                                    .attr("class", "grid-y");

                    var d3vLine = d3svg.append('g')
                                       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                                       .append('path'); 

                    var d3xAxis = d3svg.append('g')
                                  .attr('class','x-axis')
                                  .attr("transform", "translate(0," + (this.height - margin.bottom +2) + ")");
    

                    //--------------------------------------------------------------------------------------------


                    /**
                    * Method: updateData
                    * Gets Data From Controller, checks for overflow or less data received
                    * fixes them and then updates Graph
                    */
                    this.updateData = function(newData) {

                        if(this.data.length == 0)
                        {
                            info("-- Received First Data");

                            var dataBuffer = [];
                            var measurements_received = newData.length;
                            if(measurements_received < NUM_OF_MIN_MEASUREMENTS)
                            {
                                info("-- Measurement Are Less Than Expected, Filling With 0");
                                // Get First Measurement Time
                                var format = d3.time.format("%X");
                                var metricTime = format.parse(newData[0].time);
                                metricTime = new Date(metricTime.getTime() - STEP_SECONDS*1000);

                                // Fill Data With Zeros
                                for(var i= 0; i < (NUM_OF_MIN_MEASUREMENTS - measurements_received); i++)
                                {
                                    var zeroObject = {
                                        time: (metricTime.getHours() + ":" + metricTime.getMinutes() + ":" + metricTime.getSeconds()),
                                        value: 0
                                    }

                                    dataBuffer.push(zeroObject);
                                    metricTime = new Date(metricTime.getTime() - STEP_SECONDS*1000);
                                }
                                // Set Real Data Start Index
                                this.realDataIndex = dataBuffer.length;
                                dataBuffer.reverse();

                                // Join New Data With Zero Value Array
                                dataBuffer = dataBuffer.concat(newData);
                            }
                            else{

                                dataBuffer = newData;
                            }

                            // Fix Values, TypeCaste To Date And Number
                            var fixedData = [];
                            dataBuffer.forEach(function(d) {
                                
                                var format    = d3.time.format("%X");
                                var tempObj   = {};
                                tempObj.time  = format.parse(d.time);
                                tempObj.value = +d.value;
                                fixedData.push(tempObj);
                            });

                            // Set Our Final Data
                            this.data = fixedData;
                        }
                        else{
                            info("-- Received Data Update, Num Of New Data: " + newData.length);

                            // Check If We Have Overflow , Clip Older Measurement
                            if(this.data.length + newData.length > NUM_OF_MAX_MEASUREMENTS)
                            {
                                info("-- Overflow, Max Data: " + NUM_OF_MAX_MEASUREMENTS + " , Current: " + (this.data.length + newData.length));

                                // Clip Old Data
                                var num_of_overflow_Objs = this.data.length + newData.length - NUM_OF_MAX_MEASUREMENTS;
                                this.data = this.data.slice(num_of_overflow_Objs);
                            }

                            // Fix Values, TypeCaste To Date And Number
                            var fixedData = [];
                            newData.forEach(function(d) {
                                var format = d3.time.format("%X");
                                var tempObj = {};
                                tempObj.time = format.parse(d.time);
                                tempObj.value = +d.value;
                                fixedData.push(tempObj);
                            });

                            // Set Our Final Data
                            this.data = this.data.concat(fixedData);
                            info("-- Updated Data Lenght: " + this.data.length);
                        }

                        this.updateView();
                    };
                    

                    /**
                    * Method: updateView
                    * Updates graph by selecting data from data instance
                    * redraws value line, x-axis, labels and grid
                    */
                    this.updateView = function() {
                        
                        console.log("-- Updating View")
                        
                        var displayedData = [];
                        var num_of_displayed_measurements = (this.timeDisplayed.getHours()*60*60 +
                                                            this.timeDisplayed.getMinutes()*60   +
                                                            this.timeDisplayed.getSeconds()) / STEP_SECONDS;

                        // Get only data that will be displayed
                        if(this.data.length > num_of_displayed_measurements)
                        {
                            displayedData = this.data.slice(this.data.length - num_of_displayed_measurements);
                            console.log("--- After  Slice - Data Lenght: " + displayedData.length);
                        }
                        else
                        {
                            displayedData = this.data;
                        }

                        // Set Possible min/max x & y values
                        xScale.domain(d3.extent(displayedData , function(d) { return d.time;  }));
                        yScale.domain([0, d3.max(displayedData, function(d) { return d.value; })]);


                        if(this.isAnimated)
                        {
                            // For Animated Graph
                            // After we have our values we can calculate the distance and set new range
                            this.calcValueDistance();
                            xScale.range([-this.valuesDistance, this.width - margin.left - margin.right]);
                            
                            // Update Animated Line
                            d3vLine.attr("transform", "translate(" + this.valuesDistance + ")")
                                   .attr("d", valueline(displayedData)) 
                                   .transition() 
                                   .ease("linear")
                                   .duration(STEP_SECONDS*1000)
                                   .attr("transform", "translate(" + 0 + ")");
                        }
                        else {
                            xScale.range([0, this.width - margin.left - margin.right]);

                            // Update value line
                            d3vLine.attr("d", valueline(displayedData));
                        }


                        // Update xAxis - TODO Fix secondsStep
                        d3xAxis.call(d3.svg.axis()
                                           .scale(xScale)
                                           .orient("bottom")
                                           .ticks(d3.time.minutes, this.secondsStep/60) // TODO Fix SecondsStep
                                           .tickFormat(d3.time.format("%I:%M%p")))
                                           .selectAll("text") 
                                           .style("text-anchor", "end")
                                           .attr('x','-10');

                        // Create Grid
                        d3GridX.call(d3.svg.axis()
                                           .scale(xScale)
                                           .orient("bottom")
                                           .ticks(5)
                                           .tickSize(-this.height, 0, 0)
                                           .tickFormat(""));

                        
                        d3GridY.call(d3.svg.axis()
                                           .scale(yScale)
                                           .orient("left")
                                           .ticks(5)
                                           .tickSize(-this.width, 0, 0)
                                           .tickFormat(""));
                    };<commit_msg>Added animated grid and x-axis, reduced bottom margin a little bit<commit_after>define('app/views/monitoring', [
    'app/views/mistscreen',
    'text!app/templates/monitoring.html', 'ember'],
    /**
     *
     * Monitoring View
     *
     * @returns Class
     */
    function(MistScreen, monitoring_html) {
        return MistScreen.extend({

            template: Ember.Handlebars.compile(monitoring_html),

            cpuGraph: null,
            loadGraph: null,
            memGraph: null,
            viewRendered: false,
            //other Graphs to be added (TODO)

            init: function() {
                this._super();
                this.setUpGraphs();
            },

            // Check If Ember View Rendered
            didInsertElement: function(){
                console.log("- Ember Monitoring View Rendered");
                this.set('viewRendered',true);
                this._super();
            },

            // Check If Ember View Is Destroyed
            willDestroyElement: function(){
                console.log("- Ember Monitoring View Is Being Destroyed");
                window.clearInterval(window.monitoringInterval);
                this._super();
            },

            updateGraphs: function(data){
                    console.log("- We Have New Data At: " + (new Date()).toTimeString());

                    this.cpuGraph.updateData(data.cpu);
                    this.loadGraph.updateData(data.load);
                    this.memGraph.updateData(data.memory);
            },

            clickedCollapse: function(graph){

                $("#" + graph.id).hide(400);
                $("#" + graph.id + "Btn").show(400);
                // DEBUG Todo REMOVE IT
                console.log(graph);
                console.log("clickedCollapse");
            },

            clickedExpand: function(graph){
                
                $("#" + graph.id).show(400);
                $("#" + graph.id + "Btn").hide(400);
                // DEBUG Todo REMOVE IT
                console.log(graph);
                console.log("clickedCollapse");
            },

            // Graph Constructor
            setUpGraphs: function() {
                
                // Graph Constructor
                function Graph(divID,width,timeToDisplay){

                    var NUM_OF_LABELS = 6;
                    var STEP_SECONDS = 10;
                    var NUM_OF_MIN_MEASUREMENTS = 180;  // 30 Minutes
                    var NUM_OF_MAX_MEASUREMENTS = 8640; // 24 Hours

                    // Calculate Aspect Ratio Of Height
                    var fixedHeight = 160 / 1280 * width;
                    var margin = {top: 20, right: 0, bottom: 24, left: 0}; // TODO Fix Margin Based On Aspect Ratio

                    this.id = divID;
                    this.width = width;
                    this.height = (fixedHeight < 85 ? 85 : fixedHeight);
                    this.data = [];
                    this.timeDisplayed = timeToDisplay;
                    this.realDataIndex = -1;

                    // Distance of two values in graph (pixels), Important For Animation
                    this.valuesDistance = 0;
                    this.isAnimated = true;

                    // Calculate The step  of the time axis
                    this.secondsStep =  Math.floor((timeToDisplay.getHours()*60*60 + 
                                        timeToDisplay.getMinutes()*60 + 
                                        timeToDisplay.getSeconds() ) / NUM_OF_LABELS); 
                    

                    // Scale Functions will scale graph to defined width and height
                    var xScale = d3.time.scale().range([0, this.width - margin.left - margin.right]);
                    var yScale = d3.scale.linear().range([this.height - margin.top - margin.bottom, 0]);

                    // valueline is function that creates the main line based on data
                    var valueline = d3.svg.line()
                                    .x(function(d) {return xScale(d.time); })
                                    .y(function(d) {return yScale(d.value); });

                    
                    // Create main graph, append svg and other elements
                    var d3svg =   d3.select("#"+this.id)
                                    .append('svg')
                                    .attr('width',this.width)
                                    .attr('height',this.height);

                    var d3GridX = d3.select("#"+this.id)
                                    .select('svg')
                                    .append("g")         
                                    .attr("class", "grid-x")
                                    .attr("transform", "translate(0," + this.height + ")");

                    var d3GridY = d3.select("#"+this.id)
                                    .select('svg')
                                    .append("g")         
                                    .attr("class", "grid-y");

                    var d3vLine = d3svg.append('g')
                                       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                                       .append('path'); 

                    var d3xAxis = d3svg.append('g')
                                  .attr('class','x-axis')
                                  .attr("transform", "translate(0," + (this.height - margin.bottom +2) + ")");
    

                    //--------------------------------------------------------------------------------------------


                    /**
                    * Method: updateData
                    * Gets Data From Controller, checks for overflow or less data received
                    * fixes them and then updates Graph
                    */
                    this.updateData = function(newData) {

                        if(this.data.length == 0)
                        {
                            info("-- Received First Data");

                            var dataBuffer = [];
                            var measurements_received = newData.length;
                            if(measurements_received < NUM_OF_MIN_MEASUREMENTS)
                            {
                                info("-- Measurement Are Less Than Expected, Filling With 0");
                                // Get First Measurement Time
                                var format = d3.time.format("%X");
                                var metricTime = format.parse(newData[0].time);
                                metricTime = new Date(metricTime.getTime() - STEP_SECONDS*1000);

                                // Fill Data With Zeros
                                for(var i= 0; i < (NUM_OF_MIN_MEASUREMENTS - measurements_received); i++)
                                {
                                    var zeroObject = {
                                        time: (metricTime.getHours() + ":" + metricTime.getMinutes() + ":" + metricTime.getSeconds()),
                                        value: 0
                                    }

                                    dataBuffer.push(zeroObject);
                                    metricTime = new Date(metricTime.getTime() - STEP_SECONDS*1000);
                                }
                                // Set Real Data Start Index
                                this.realDataIndex = dataBuffer.length;
                                dataBuffer.reverse();

                                // Join New Data With Zero Value Array
                                dataBuffer = dataBuffer.concat(newData);
                            }
                            else{

                                dataBuffer = newData;
                            }

                            // Fix Values, TypeCaste To Date And Number
                            var fixedData = [];
                            dataBuffer.forEach(function(d) {
                                
                                var format    = d3.time.format("%X");
                                var tempObj   = {};
                                tempObj.time  = format.parse(d.time);
                                tempObj.value = +d.value;
                                fixedData.push(tempObj);
                            });

                            // Set Our Final Data
                            this.data = fixedData;
                        }
                        else{
                            info("-- Received Data Update, Num Of New Data: " + newData.length);

                            // Check If We Have Overflow , Clip Older Measurement
                            if(this.data.length + newData.length > NUM_OF_MAX_MEASUREMENTS)
                            {
                                info("-- Overflow, Max Data: " + NUM_OF_MAX_MEASUREMENTS + " , Current: " + (this.data.length + newData.length));

                                // Clip Old Data
                                var num_of_overflow_Objs = this.data.length + newData.length - NUM_OF_MAX_MEASUREMENTS;
                                this.data = this.data.slice(num_of_overflow_Objs);
                            }

                            // Fix Values, TypeCaste To Date And Number
                            var fixedData = [];
                            newData.forEach(function(d) {
                                var format = d3.time.format("%X");
                                var tempObj = {};
                                tempObj.time = format.parse(d.time);
                                tempObj.value = +d.value;
                                fixedData.push(tempObj);
                            });

                            // Set Our Final Data
                            this.data = this.data.concat(fixedData);
                            info("-- Updated Data Lenght: " + this.data.length);
                        }

                        this.updateView();
                    };
                    

                    /**
                    * Method: updateView
                    * Updates graph by selecting data from data instance
                    * redraws value line, x-axis, labels and grid
                    */
                    this.updateView = function() {
                        
                        console.log("-- Updating View")
                        
                        var displayedData = [];
                        var num_of_displayed_measurements = (this.timeDisplayed.getHours()*60*60 +
                                                            this.timeDisplayed.getMinutes()*60   +
                                                            this.timeDisplayed.getSeconds()) / STEP_SECONDS;

                        // Get only data that will be displayed
                        if(this.data.length > num_of_displayed_measurements)
                        {
                            displayedData = this.data.slice(this.data.length - num_of_displayed_measurements);
                            console.log("--- After  Slice - Data Lenght: " + displayedData.length);
                        }
                        else
                        {
                            displayedData = this.data;
                        }

                        // Set Possible min/max x & y values
                        xScale.domain(d3.extent(displayedData , function(d) { return d.time;  }));
                        yScale.domain([0, d3.max(displayedData, function(d) { return d.value; })]);


                        if(this.isAnimated)
                        {

                            var animationDuration = STEP_SECONDS*1000;
                            // For Animated Graph
                            // After we have our values we can calculate the distance and set new range
                            this.calcValueDistance();
                            xScale.range([-this.valuesDistance, this.width - margin.left - margin.right]);
                            
                            // Update Animated Line
                            d3vLine.attr("transform", "translate(" + this.valuesDistance + ")")
                                   .attr("d", valueline(displayedData)) 
                                   .transition() 
                                   .ease("linear")
                                   .duration(animationDuration)
                                   .attr("transform", "translate(" + 0 + ")");


                            // Update xAxis And Grid Offset- TODO Fix secondsStep
                            d3xAxis.call(d3.svg.axis()
                                           .scale(xScale)
                                           .orient("bottom")
                                           .ticks(d3.time.minutes, this.secondsStep/60) // TODO Fix SecondsStep
                                           .tickFormat(d3.time.format("%I:%M%p")))
                                           .selectAll("text") 
                                           .style("text-anchor", "end")
                                           .attr('x','-10');

                            d3GridX.call(d3.svg.axis()
                                           .scale(xScale)
                                           .orient("bottom")
                                           .ticks(5)
                                           .tickSize(-this.height, 0, 0)
                                           .tickFormat(""));

                            d3GridY.call(d3.svg.axis()
                                           .scale(yScale)
                                           .orient("left")
                                           .ticks(5)
                                           .tickSize(-this.width, 0, 0)
                                           .tickFormat(""));
                        

                            // Animate Axis And Grid
                            d3xAxis.attr("transform", "translate(" + this.valuesDistance + ","+ (this.height - margin.bottom +2) +")")
                                   .transition() 
                                   .ease("linear")
                                   .duration(animationDuration)
                                   .attr("transform", "translate(0," + (this.height - margin.bottom +2) + ")");

                            d3GridX.attr("transform", "translate(" + this.valuesDistance + ","+ this.height +")")
                                   .transition() 
                                   .ease("linear")
                                   .duration(animationDuration)
                                   .attr("transform", "translate(0," + this.height + ")");
                        }
                        else {
                            xScale.range([0, this.width - margin.left - margin.right]);

                            // Update value line
                            d3vLine.attr("d", valueline(displayedData));

                            // Update xAxis And grid - TODO Fix secondsStep
                            d3xAxis.call(d3.svg.axis()
                                           .scale(xScale)
                                           .orient("bottom")
                                           .ticks(d3.time.minutes, this.secondsStep/60) // TODO Fix SecondsStep
                                           .tickFormat(d3.time.format("%I:%M%p")))
                                           .selectAll("text") 
                                           .style("text-anchor", "end")
                                           .attr('x','-10');

                            d3GridX.call(d3.svg.axis()
                                           .scale(xScale)
                                           .orient("bottom")
                                           .ticks(5)
                                           .tickSize(-this.height, 0, 0)
                                           .tickFormat(""));

                        
                            d3GridY.call(d3.svg.axis()
                                           .scale(yScale)
                                           .orient("left")
                                           .ticks(5)
                                           .tickSize(-this.width, 0, 0)
                                           .tickFormat(""));
                        }
                    };
{'fraction_non_alphanumeric': 0.0983440902275246, 'fraction_numerical': 0.00860551535302171, 'mean_word_length': 0.7944083757384336, 'pattern_counts': {'":': 4, '<': 9, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 212, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7141456', 'n_tokens_mistral': 6942, 'n_tokens_neox': 6296, 'n_words': 1330}