How to use comparisonTrend method in Best

Best JavaScript code snippet using best

ComparisonTrend.js

Source:ComparisonTrend.js

1/**2 * Created by min on 2015-12-03.3 */4Ext.define("view.ComparisonTrend",{5    extend         : "Exem.FormOnCondition",6    width          : "100%",7    height         : "100%",8    singeField     : false,9    retrieveY      : '25%',10    conditionHeight: 83 ,11    DisplayTime    : DisplayTimeMode.H,12    style          : { background: '#cccccc' },13    sql            : {},14    listeners: {15        beforedestroy: function() {16            this.isClosed = true;17            this.stat_change.destroy();18            if(this.stat_view){19                this.stat_view.destroy();20            }21        }22    },23    onFromHourSelect: function(toCal){24        var self = toCal.dateField.up().up().up() ;25        var set_to = new Date(toCal.tempFromTime + self.diff_time) ;26        if ( self.rdo_interval.getCheckedValue()  == 'hour' ){27            self.diff_time = Number(self.cbo_hour.getValue()) * 3600000 ;28        }else{29            self.diff_time = Number(self.cbo_day.getValue()) * 3600000 * 24 ;30        }31        toCal.toCalender.setMaxDate(set_to) ;32        toCal.toCalender.setDate(Ext.util.Format.date(new Date(set_to), 'Y-m-d'));33        toCal.setToTime(new Date(set_to)) ;34    },35    onCalenderValidFn: function(){36        var self = this.up().up().up();37        var set_to = +new Date( this.pickerUI.dateField.mainFromField.getValue()+':00:00' ) + self.diff_time ;38        var datePicker;39        switch(this.itemId){40            case 'second_date':41                datePicker = self.second_date ;42                break ;43            case 'third_date' :44                datePicker = self.third_date ;45                break ;46            default :47                datePicker = self.first_date ;48                break ;49        }50        if ( Comm.Lang == 'ko' ){51            this.date_format = 'Y-m-d H' ;52        } else if( Comm.Lang == 'ja' ){53            this.date_format = 'Y/m/d H' ;54        } else{55            this.date_format = 'm/d/Y H' ;56        }57        datePicker.mainToField.setValue(Ext.util.Format.date( new Date(set_to), this.date_format)) ;58    } ,59    /*60     * 2. ê²ìêµ¬ê°ì´ ì´íì´ ëì¼ë©´ ìë¨¸ë¦¬ë ë°ì¼ë¦¬ íì´ë¸ë¡ ì¡°í.61     //* 1. ì²«ë°ì´í°í¼ì»¤ì íìì ë°°ì´ë¡ ë´ëììë í¨ why? ë,ì¸ë²ì§¸ì ë°ì´í°í¼ì»¤ìê°ì¡°ê±´ì ë¬´ìíê³  ì°¨í¸ ê·¸ë¦¬ê¸°ìí´.62     //*    (ì¿¼ë¦¬ì¡°íë ë³¸ë ìê°ê°ì¼ë¡ íê³ , ê·¸ë¦´ëë§ ì¡°ì)63     * */64    get_chart_sql: function( type, date_obj ){65        try{66            var sql_file ;67            var diff1 = +new Date(date_obj.getFromDateTime()+':00:00').setMinutes(0) ;68            var diff2 = +new Date(date_obj.getToDateTime()+':00:00').setMinutes(0) ;69            if ( diff2 - diff1 >= 86400000 ){70                if ( type == 'agent' ){71                    sql_file = 'IMXPA_ComparisonTrend_Chart_Agent_daily.sql';72                }73                else {74                    sql_file = 'IMXPA_ComparisonTrend_Chart_GC_daily.sql';75                }76            }else{77                if ( type == 'agent' ){78                    sql_file = 'IMXPA_ComparisonTrend_Chart_Agent.sql';79                }80                else {81                    sql_file = 'IMXPA_ComparisonTrend_Chart_GC.sql';82                }83            }84            return sql_file ;85        }finally{86            diff1 = null ;87            diff2 = null ;88            sql_file = null ;89        }90    } ,91    executeSQL: function(){92        if ( !this.check_valid() ) {93            return;94        }95        this.workArea.getComponent('mid_tab').setActiveTab(0) ;96        this.retrieve_click = true ;97        this.target_chart = null ;98        this.draw_cnt = 0 ;99        var grid3 = this.h_pnl.getComponent('bot_tab_grid3') ;100        if ( this.cbo_cnt.getRawValue() == '2' ){101            grid3.setVisible(false) ;102        }else{103            grid3.setVisible(true) ;104        }105        this.get_chart_data('Agent') ;106        setTimeout(function(){107            this.get_grid_data() ;108        }.bind(this), 300) ;109    } ,110    /*111     * 1. ê·¸ë¦¬ë ë°ì´í° ê°ì ¸ì¤ê¸°.112     * 2. ê·¸ë¦¬ë íì´íë³ê²½íê¸°.113     * */114    get_grid_data: function(){115        var serverName, serverId;116        this.h_pnl.loadingMask.show() ;117        // ######## Grid #####################118        var color = ['#2b99f0', '#01cc00', '#e76627'] ;119        for ( var ix = 0; ix < Number(this.cbo_cnt.getRawValue()); ix++ ){120            serverId = this.stand_data[ix][2];121            serverName = Comm.RTComm.getServerNameByID(serverId);122            this.array_grid[ix].up().setTitle(serverName) ;123            this.array_grid[ix].up().up().el.dom.style.borderColor = color[ix] ;124            WS.SQLExec({125                sql_file: 'IMXPA_ComparisonTrend_Grid.sql',126                bind: [{ name: 'fromtime', value: this.stand_data[ix][0], type : SQLBindType.STRING }127                    ,{ name: 'totime', value: this.stand_data[ix][1], type : SQLBindType.STRING }128                    ,{ name: 'was_id', value: this.stand_data[ix][2], type : SQLBindType.INTEGER }]129            }, this.on_grid.bind({130                target: this.array_grid[ix],131                self  : this132            }), this);133        }134        ix = null ;135        color = null ;136    } ,137    on_grid: function( header, data ){138        var self = this.self ;139        var jx;140        if(this.isClosed){141            return;142        }143        this.target.clearRows() ;144        if(!common.Util.checkSQLExecValid(header, data)){145            this.target.loadingMask.hide();146            self.h_pnl.loadingMask.hide();147            console.debug('ComparisonTrend-on_grid');148            console.debug(header);149            console.debug(data);150            return;151        }152        for ( jx = 0 ; jx < data.rows.length; jx++ ){153            this.target.addRow( [154                data.rows[jx][0]     //'time'155                ,data.rows[jx][1]    //'txn'156                ,data.rows[jx][2]    //'txn_id'157                ,data.rows[jx][3]    //'txn_name'158                ,data.rows[jx][4]    //'txn_exec_count'159                ,data.rows[jx][5]    //'txn_elapse_max'160                ,data.rows[jx][6]    //'txn_elapse_avg'161                ,data.rows[jx][7]    //'sql_elapse_max'162                ,data.rows[jx][8]    //'sql_elapse_avg'163                ,data.rows[jx][9]    //'txn_elapse'164            ] );165        }166        this.target.drawGrid() ;167        this.target.loadingMask.hide() ;168        if ( self.cbo_cnt.getRawValue() == '2' && this.target.itemId == 'grid2' || self.cbo_cnt.getRawValue() == '3' && this.target.itemId == 'grid3'){169            self.h_pnl.loadingMask.hide() ;170        }171    } ,172    /*173     * 3ê°ì wasì ëí ì°¨í¸ì¿¼ë¦¬ load.174     * */175    get_chart_data: function( type ){176        var target;177        this.loadingMask.showMask() ;178        if ( type == 'pnl_Agent' ){179            type = 'Agent';180        }else if ( type == 'pnl_GC' ){181            type = 'GC';182        }183        if ( !this.target_chart){184            target = this.array_chart[type] ;185        }else{186            target = [this.target_chart];187        }188        var ix;189        for ( ix = 0 ; ix < target.length; ix++ ){190            target[ix].clearAllSeires() ;191            target[ix].plotDraw() ;192        }193        if ( type.toLowerCase().indexOf('agent') >= 0 ){194            type = 'agent';195        }196        else{197            type = 'gc';198        }199        //ì´íë¶í°ë dailyíì´ë¸ë¡ ì¡°í.200        var sql_file = this.get_chart_sql( type, this.first_date ) ;201        // ######## Chart #####################202        for ( ix = 0; ix < Number(this.cbo_cnt.getRawValue()); ix++ ){203            //ë¨ìí ë°ë¡ ë ë ¤ì£¼ê¸° ìí %ì°ì°.204            if ( ix % 2 == 0 ){205                WS2.SQLExec({206                    sql_file: sql_file,207                    bind: [{ name: 'fromtime', value: this.stand_data[ix][0], type: SQLBindType.STRING }208                        ,{ name: 'totime', value: this.stand_data[ix][1], type: SQLBindType.STRING }209                        ,{ name: 'was_id', value: this.stand_data[ix][2], type: SQLBindType.INTEGER }]210                }, this.on_chart.bind({211                    series_idx: ix,212                    target    : target,213                    self      : this,214                    type      : type215                }), this);216            }else{217                WS.SQLExec({218                    sql_file: sql_file,219                    bind: [{ name: 'fromtime', value: this.stand_data[ix][0], type: SQLBindType.STRING }220                        ,{ name: 'totime', value: this.stand_data[ix][1], type: SQLBindType.STRING }221                        ,{ name: 'was_id', value: this.stand_data[ix][2], type: SQLBindType.INTEGER }]222                }, this.on_chart.bind({223                    series_idx: ix,224                    target    : target,225                    self      : this,226                    type      : type227                }), this);228            }229        }230        ix = null ;231        sql_file = null ;232        target = null ;233    } ,234    on_chart: function( header, data ){235        var self = this.self ;236        var stat_list ;237        if(this.isClosed){238            return;239        }240        if(!common.Util.checkSQLExecValid(header, data)){241            self.loadingMask.hide();242            console.debug('ComparisonTrend-on_chart');243            console.debug(header);244            console.debug(data);245            return;246        }247        if(data.rows.length == 0){248            self.loadingMask.hide();249            return;250        }251        if ( this.type == 'agent' ){252            stat_list = self.was_stat_alias ;253        }else{254            stat_list = self.gc_stat_alias ;255        }256        try{257            var cht_cnt;258            var ix = 0, jx = 0 ;259            var data_idx ;260            var series_id ;261            var arr_store  = {} ;262            var from_time, to_time, interval;263            var comboCnt = self.cbo_cnt.getRawValue();264            self.draw_cnt++ ;265            for ( cht_cnt = 0 ; cht_cnt < this.target.length; cht_cnt++ ){266                if(comboCnt < 3){267                    this.target[cht_cnt].setSeriesVisible(2, false);268                    this.target[cht_cnt].setSeriesLegendVisible(2, false);269                }270                if ( !arr_store[this.target[cht_cnt].stat_id]){271                    arr_store[this.target[cht_cnt].stat_id] = [] ;272                }273                for ( ix = 0 ; ix < data.columns.length; ix++ ){274                    //data index matching275                    data_idx = stat_list.indexOf( data.columns[ix].toLowerCase() ) ;276                    if( this.target[cht_cnt].stat_id !== data.columns[ix].toLowerCase() || data_idx == -1){277                        continue ;278                    }279                    data_idx += 2 ;280                    for ( jx = 0 ; jx < data.rows.length; jx++ ){281                        arr_store[this.target[cht_cnt].stat_id].push( [ data.rows[jx][0], data.rows[jx][data_idx] ] ) ;282                    }283                }284                //series matching285                switch ( this.series_idx ){286                    case 0:287                        series_id = 'mid_cht0' ;288                        break ;289                    case 1:290                        series_id = 'mid_cht1' ;291                        break ;292                    case 2:293                        series_id = 'mid_cht2' ;294                        this.target[cht_cnt].setSeriesVisible(2, true);295                        this.target[cht_cnt].setSeriesLegendVisible(2, true);296                        break ;297                    default :298                        break;299                }300                from_time = +new Date(header.parameters.bind[0].value);301                to_time = +new Date(header.parameters.bind[1].value) + 1000;302                if(common.Util.getBetweenDate(to_time, from_time)){303                    interval = PlotChart.time.exHour;304                }305                else{306                    interval = PlotChart.time.exMin;307                }308                this.target[cht_cnt].interval = interval;309                this.target[cht_cnt].addIndexValues([{310                    from  : header.parameters.bind[0].value,311                    to    : header.parameters.bind[1].value,312                    interval : interval,313                    time  : 0,314                    data  : arr_store[this.target[cht_cnt].stat_id],315                    series: series_id316                }]) ;317                this.target[cht_cnt].plotDraw() ;318                this.target[cht_cnt].loadingMask.hide() ;319            }320        }catch(e){321            self.loadingMask.hide() ;322            console.debug(e.message);323        }finally{324            if ( self.cbo_cnt.getRawValue() == self.draw_cnt ){325                self.loadingMask.hide() ;326                self.draw_cnt = 0;327            }328            ix        = null ;329            data_idx  = null ;330            arr_store = null ;331            stat_list = null ;332        }333    } ,334    check_valid: function(){335        var first_obj;336        var second_obj;337        var third_obj;338        try{339            switch( this.cbo_condition.getValue() ){340                //1. ê¸°ì¤ì´ ìì´ì í¸ë¼ë©´,341                case '1':342                    if(!this.was_combo.checkValid()){343                        return false;344                    }345                    first_obj  = this.first_date.getFromDateTime() ;346                    second_obj = this.second_date.getFromDateTime() ;347                    third_obj  = this.third_date.getFromDateTime() ;348                    this.stand_data[0] = [ Ext.util.Format.date( this.first_date.getFromDateTime()+':00:00', 'Y-m-d H:00:00')349                        , Ext.util.Format.date( new Date(+new Date(this.first_date.getToDateTime()+':00:00')- 3600000), 'Y-m-d H:59:59')350                        , this.was_combo.getValue()351                    ] ;352                    this.stand_data[1] = [ Ext.util.Format.date( this.second_date.getFromDateTime()+':00:00', 'Y-m-d H:00:00')353                        , Ext.util.Format.date( new Date(+new Date(this.second_date.getToDateTime()+':00:00')- 3600000), 'Y-m-d H:59:59')354                        , this.was_combo.getValue()355                    ] ;356                    this.stand_data[2] = [ Ext.util.Format.date(  this.third_date.getFromDateTime()+':00:00', 'Y-m-d H:00:00')357                        , Ext.util.Format.date( new Date(+new Date(this.third_date.getToDateTime()+':00:00')- 3600000), 'Y-m-d H:59:59')358                        , this.was_combo.getValue()359                    ] ;360                    break ;361                //2. ê¸°ì¤ì´ ìê°ì´ë¼ë©´,362                //-1.ê±´ìê° 2ê° or 3ê°363                case '2':364                    if(!this.was_combo.checkValid() || !this.second_was_combo.checkValid() || !this.third_was_combo.checkValid()){365                        return false;366                    }367                    first_obj  = this.was_combo.getValue() ;368                    second_obj = this.second_was_combo.getValue() ;369                    third_obj  = this.third_was_combo.getValue() ;370                    this.stand_data[0] = [ Ext.util.Format.date( this.first_date.getFromDateTime()+':00:00', 'Y-m-d H:00:00')371                        , Ext.util.Format.date( new Date(+new Date(this.first_date.getToDateTime()+':00:00')- 3600000), 'Y-m-d H:59:59')372                        , this.was_combo.getValue()373                    ] ;374                    this.stand_data[1] = [ Ext.util.Format.date( this.first_date.getFromDateTime()+':00:00', 'Y-m-d H:00:00')375                        , Ext.util.Format.date( new Date(+new Date(this.first_date.getToDateTime()+':00:00')- 3600000), 'Y-m-d H:59:59')376                        , this.second_was_combo.getValue()377                    ] ;378                    this.stand_data[2] = [ Ext.util.Format.date(  this.first_date.getFromDateTime()+':00:00', 'Y-m-d H:00:00')379                        , Ext.util.Format.date( new Date(+new Date(this.first_date.getToDateTime()+':00:00')- 3600000), 'Y-m-d H:59:59')380                        , this.third_was_combo.getValue()381                    ] ;382                    break ;383                //3. ê¸°ì¤ì´ ë³µí©ì´ë¼ë©´,384                //ìë ì¬ê¸°ì ê²ì¬íê³  ë¦¬í´.385                case '3':386                    if(!this.was_combo.checkValid() || !this.second_was_combo.checkValid() || !this.third_was_combo.checkValid()){387                        return false;388                    }389                    var first_was   = this.was_combo.getValue() ;390                    var second_was  = this.second_was_combo.getValue() ;391                    var third_was   = this.third_was_combo.getValue() ;392                    var first_time  = this.first_date.getFromDateTime() ;393                    var second_time = this.second_date.getFromDateTime() ;394                    var third_time  = this.third_date.getFromDateTime() ;395                    this.stand_data[0] = [ Ext.util.Format.date( this.first_date.getFromDateTime()+':00:00', 'Y-m-d H:00:00')396                        , Ext.util.Format.date( new Date(+new Date(this.first_date.getToDateTime()+':00:00')- 3600000), 'Y-m-d H:59:59')397                        , first_was398                    ] ;399                    this.stand_data[1] = [ Ext.util.Format.date( this.second_date.getFromDateTime()+':00:00', 'Y-m-d H:00:00')400                        , Ext.util.Format.date( new Date(+new Date(this.second_date.getToDateTime()+':00:00')- 3600000), 'Y-m-d H:59:59')401                        , second_was402                    ] ;403                    this.stand_data[2] = [ Ext.util.Format.date(  this.third_date.getFromDateTime()+':00:00', 'Y-m-d H:00:00')404                        , Ext.util.Format.date( new Date(+new Date(this.third_date.getToDateTime()+':00:00')- 3600000), 'Y-m-d H:59:59')405                        , third_was406                    ] ;407                    //ê°¯ì 2408                    if ( this.cbo_cnt.getValue() == '1' ){409                        if ( first_time == second_time && first_was == second_was ){410                            this.show_message('The duplicate comparison') ;411                            return false ;412                        }413                    }else {414                        //ê°¯ì 3415                        if (416                            ( first_time == second_time && first_was == second_was )417                            || ( second_time == third_time && second_was == third_was )418                            || ( third_time == first_time && third_was == first_was )419                        ){420                            this.show_message('The duplicate comparison');421                            return false ;422                        }423                    }424                    first_was  = null ;425                    second_was = null ;426                    third_was  = null ;427                    return true ;428                default :429                    break;430            }431            //ê°¯ì 2432            if ( this.cbo_cnt.getValue() == '1' ){433                if ( first_obj == second_obj ){434                    this.show_message('The duplicate comparison') ;435                    return false ;436                }437                else{438                    return true ;439                }440            }else {441                //ê°¯ì 3442                if (( first_obj == second_obj && first_was == second_was )443                    || ( second_obj == third_obj && second_was == third_was )444                    || ( third_obj == first_obj && third_was == first_was ) ){445                    this.show_message('The duplicate comparison');446                    return false ;447                }448                else{449                    return true ;450                }451            }452        }finally{453            first_obj  = null ;454            second_obj = null ;455            third_obj  = null ;456        }457    } ,458    show_message: function(_msg){459        common.Util.showMessage( common.Util.TR('Warning'), common.Util.TR(_msg),460            Ext.Msg.OK, Ext.MessageBox.WARNING, function() {461            }.bind(this));462    } ,463    init: function(){464        this.retrieve_click = false ;465        this.diff_time = 3600000 ;466        //2 or 3467        this.draw_cnt = 0 ;468        if ( Comm.Lang == 'ko' ){469            this.date_format = 'Y-m-d H' ;470        } else if( Comm.Lang == 'ja' ){471            this.date_format = 'Y/m/d H' ;472        } else{473            this.date_format = 'm/d/Y H' ;474        }475        this.stand_data = {476            0: [],477            1: [],478            2: []479        } ;480        this.all_stat_list = {481            Stat : [] ,482            GC   : []483        } ;484        this.stat_name_list = {485            Stat: [],486            GC  : []487        } ;488        this.target_chart = null ;489        this.was_stat = [490            'Concurrent Users' //was_session491            //,'Queue'           //app_session492            ,'Active Transactions'493            //,'Total DB Connections'494            //,'Active DB Connections'495            ,'SQL Execute Count'496            ,'SQL Elapse Time' //ê²ëìì±í-dailyììë§_ìë¬ë ê±°ì.ì»¬ë¼ì´ìì.497            //,'SQL Prepare Count'498            ,'SQL Fetch Count'499            ,'JVM CPU Usage (%)'500            ,'JVM Free Heap (MB)'501            //,'JVM Heap Size (MB)'502            ,'JVM Used Heap (MB)'503            //,'JVM Memory Size (MB)'504            ,'JVM Thread Count'505            ,'OS CPU (%)'506            ,'TPS'507            //,'OS CPU Sys (%)'508            //,'OS CPU User (%)'509            //,'OS CPU IO (%)'510            ,'OS Free Memory (MB)'511            //,'OS Total Memory (MB)'512            //,'OS Send Packets'513            //,'OS Rcv Packets'514            ,'Active Users'515            ,'Elapse Time'516        ]  ;517        this.was_stat_alias = [518            'was_sessions'519            //,'app_sessions'520            ,'active_txns'521            //,'db_sessions'522            //,'active_db_sessions'523            ,'sql_exec_count'524            ,'sql_elapse'525            //,'sql_prepare_count'526            ,'sql_fetch_count'527            ,'jvm_cpu_usage'528            ,'jvm_free_heap'529            //,'jvm_heap_size'530            ,'jvm_used_heap'531            //,'jvm_mem_size'532            ,'jvm_thread_count'533            ,'os_cpu'534            ,'tps'535            //,'os_cpu_sys'536            //,'os_cpu_user'537            //,'os_cpu_io'538            ,'os_free_memory'539            //,'os_total_memory'540            //,'os_send_packets'541            //,'os_rcv_packets'542            ,'active_users'543            ,'txn_elapse'544        ] ;545        this.gc_stat = [546            'Compile Count'547            ,'Compile Time (Sec)'548            ,'Class Loaded Count'549            ,'Class Count'550            ,'Class Loader Time (Sec)'551            ,'Eden Space Maximum Size (MB)'552            ,'Eden Current Size (MB)'553            ,'Eden Used Size (MB)'554            ,'Full GC Count'555            ,'Full GC Time (Sec)'556            ,'Old Current Size (MB)'557            ,'Old Maximum Size (MB)'558            ,'Old Used Size (MB)'559            ,'Perm Space Current Size (MB)'560            ,'Perm Space Maximum Size (MB)'561            ,'Perm Space Used Size (MB)'562            ,'Survivor 0 Current Size (MB)'563            ,'Survivor 0 Maximum Size (MB)'564            ,'Survivor 0 Used Size (MB)'565            ,'Survivor 1 Current Size (MB)'566            ,'Survivor 1 Maximum Size (MB)'567            ,'Survivor 1 Used Size (MB)'568            ,'Total GC Count'569            ,'Total GC Time (Sec)'570            ,'Young GC Count'571            ,'Young GC Time (Sec)'572        ] ;573        this.gc_stat_alias = [574            'compiles'575            ,'compile_time'576            ,'loaded'577            ,'class_count'578            ,'class_loader_time'579            ,'eden_size'580            ,'eden_capacity'581            ,'eden_used'582            ,'fgc'583            ,'old_gc_time'584            ,'old_capacity'585            ,'old_size'586            ,'old_used'587            ,'perm_capacity'588            ,'perm_size'589            ,'perm_used'590            ,'s0_capacity'591            ,'s0_size'592            ,'s0_used'593            ,'s1_capacity'594            ,'s1_size'595            ,'s1_used'596            ,'jvm_gc_count'597            ,'jvm_gc_time'598            ,'ygc'599            ,'eden_gc_time'600        ] ;601        this.IDXDB_DEFAULT   = 'Default' ;602        this.IDXDB_STAT      = 'pa_comparison_stat';603        this.IDXDB_STAT_ID   = 'pa_comparison_stat_id';604        this.IDXDB_GC        = 'pa_comparison_gc';605        this.IDXDB_GC_ID     = 'pa_comparison_gc_id';606        this.IDXDB_LAST_TYPE = 'pa_comparison_last_type';607        this.IDXDB_TYPES     = 'pa_comparison_types';608        this.get_stat_name() ;609        this.setWorkAreaLayout('border');610        this.layout_top() ;611        this.layout_condition() ;612        //make statchange613        this.layout_center() ;614        this.title_update( this.array_chart.Agent615            , Comm.web_env_info[ this.IDXDB_STAT+'_'+Comm.web_env_info[this.IDXDB_LAST_TYPE] ]616            , Comm.web_env_info[ this.IDXDB_STAT_ID+'_'+Comm.web_env_info[this.IDXDB_LAST_TYPE] ]617        ) ;618        this.title_update( this.array_chart.GC619            , Comm.web_env_info[ this.IDXDB_GC+'_'+Comm.web_env_info[this.IDXDB_LAST_TYPE] ]620            , Comm.web_env_info[ this.IDXDB_GC_ID+'_'+Comm.web_env_info[this.IDXDB_LAST_TYPE] ]621        ) ;622        this.layout_bot() ;623        this.datePicker.setVisible(false) ;624    } ,625    set_condition: function(){626        var first_stand = this.cbo_condition.getValue() ;627        var second_stand = this.cbo_cnt.getValue() ;628        switch (first_stand){629            case '1':630                //agent631                this.second_was_combo.setDisabled( true ) ;632                this.third_was_combo.setDisabled( true ) ;633                if ( second_stand == 1 ){634                    this.second_date.setDisabled(false) ;635                    this.third_date.setDisabled(true) ;636                }637                else{638                    this.second_date.setDisabled(false) ;639                    this.third_date.setDisabled(false) ;640                }641                break ;642            case '2':643                //time644                this.second_date.setDisabled(true) ;645                this.third_date.setDisabled(true) ;646                if ( second_stand == 1 ){647                    this.second_was_combo.setDisabled( false ) ;648                    this.third_was_combo.setDisabled( true ) ;649                }650                else{651                    this.second_was_combo.setDisabled( false ) ;652                    this.third_was_combo.setDisabled( false ) ;653                }654                break ;655            case '3':656                //agent + time657                this.second_date.setDisabled( false ) ;658                this.second_was_combo.setDisabled( false ) ;659                if ( second_stand == 1 ){660                    this.third_date.setDisabled( true ) ;661                    this.third_was_combo.setDisabled( true ) ;662                }663                else{664                    this.third_date.setDisabled( false ) ;665                    this.third_was_combo.setDisabled( false ) ;666                }667                break ;668            default :669                break ;670        }671        first_stand  = null ;672        second_stand = null ;673    } ,674    layout_top: function(){675        var ix;676        this.cbo_condition = Ext.create('Exem.ComboBox',{677            itemId    : 'cbo_condition',678            fieldLabel: common.Util.TR('Criteria'),679            labelWidth: 70,680            width     : 170,681            y         : 5  ,682            store     : Ext.create('Exem.Store') ,683            editable  : false,684            listeners : {685                scope : this,686                change: function(){687                    var self = this ;688                    if ( self.was_combo == undefined ){689                        return ;690                    }691                    self.set_condition() ;692                }693            }694        }) ;695        this.cbo_condition.addItem('3', common.Util.TR('Agent') + '+' + common.Util.TR('Time')) ;696        this.cbo_condition.addItem('2', common.Util.TR('Time')) ;697        this.cbo_condition.addItem('1', common.Util.TR('Agent')) ;698        this.cbo_condition.selectRow( 0 ) ;699        this.conditionArea.add( this.cbo_condition ) ;700        this.cbo_cnt = Ext.create('Exem.ComboBox', {701            itemId    : 'cbo_condition',702            fieldLabel: common.Util.TR('Count'),703            labelWidth: 70 ,704            width     : 120,705            x         : 150,706            y         : 5  ,707            store     : Ext.create('Exem.Store') ,708            editable  : false,709            listeners : {710                scope : this,711                change: function(){712                    var self = this ;713                    if ( self.was_combo == undefined ){714                        return;715                    }716                    self.set_condition() ;717                }718            }719        }) ;720        this.cbo_cnt.addItem('2', '3') ;721        this.cbo_cnt.addItem('1', '2') ;722        this.cbo_cnt.selectRow( 0 ) ;723        this.rdo_interval = Ext.create('Exem.FieldContainer',{724            itemId         : 'rdo_interval',725            defaultType    : 'radiofield',726            fieldLabel     : common.Util.TR('Interval'),727            //labelAlign     : 'top',728            labelWidth     : 60,729            labelSeparator : '',730            x              : 280,731            y              : 5,732            //columns      : 2,733            //vertical       : true,734            layout         : 'vbox',735            //defaults       : { flex: 1 },736            width          : 80,737            //style          : { //'borderColor': '#d0d0d0',738            // 'borderStyle': 'solid',739            // 'borderRadius': '10px',740            // 'padding': '-5px 0px 0px 0px',741            //  'borderWidth': '1px 1px 1px 1px',742            //  'left': '23px',743            //  'top': '46px',744            //  'width': '500px',745            //  'height': '40px' } ,746            //defaults       : { flex: 1 },747            items          : [{748                width     : 40,749                boxLabel  : common.Util.TR(''),750                name      : this.id + '_interval',751                inputValue: 'hour',752                checked   : true,753                style     : { 'marginTop': '-2px' },754                listeners : {755                    scope  : this,756                    change: function( me, nv ){757                        if ( nv ){758                            this.cbo_day.setDisabled(true) ;759                            this.conditionArea.getComponent('lbl_day').el.dom.style.color = '#cccccc' ;760                            this.cbo_hour.setDisabled(false) ;761                            this.conditionArea.getComponent('lbl_hour').el.dom.style.color = 'black' ;762                            this.diff_time = Number(this.cbo_hour.getValue()) * 3600000 ;763                            this.set_interval() ;764                        }765                    }766                }767            },{768                boxLabel  : common.Util.TR(''),769                name      : this.id + '_interval',770                inputValue: 'day',771                style     : { 'marginTop': '0px' },772                listeners : {773                    scope  : this,774                    change: function( me, nv){775                        if ( nv ){776                            this.cbo_hour.setDisabled(true) ;777                            this.conditionArea.getComponent('lbl_hour').el.dom.style.color = '#cccccc' ;778                            this.cbo_day.setDisabled(false) ;779                            this.conditionArea.getComponent('lbl_day').el.dom.style.color = 'black' ;780                            this.diff_time = Number(this.cbo_day.getValue()) * 3600000 * 24 ;781                            this.set_interval() ;782                        }783                    }784                }785            }]786        }) ;787        this.cbo_hour = Ext.create('Exem.ComboBox',{788            itemId    : 'cbo_hour',789            fieldLabel: '',//common.Util.TR('hour'),790            //labelAlign: 'right',791            //labelWidth: 50,792            width     : 90,793            x         : 367,794            y         : 5,795            store     : Ext.create('Exem.Store'),796            editable  : false ,797            listeners : {798                scope : this,799                change: function(){800                    if ( this.rdo_interval.getCheckedValue()  == 'hour'){801                        this.diff_time = Number(this.cbo_hour.getValue()) * 3600000 ;802                    }803                    else{804                        this.diff_time = Number(this.cbo_day.getValue()) * 3600000 * 24 ;805                    }806                    if ( this.second_date == undefined ){807                        return;808                    }809                    this.set_interval() ;810                }811            }812        }) ;813        var lbl_hour = Ext.create('Ext.form.Label',{814            itemId: 'lbl_hour',815            text  : common.Util.TR('Hour'),816            x     : 383,817            y     : 8818        }) ;819        for ( ix = 24 ; ix > 0 ; ix-- ){820            this.cbo_hour.addItem( ix.toString(), ix.toString() ) ;821        }822        this.cbo_hour.selectRow(0) ;823        this.cbo_day = Ext.create('Exem.ComboBox',{824            itemId    : 'cbo_day',825            fieldLabel: '',//common.Util.TR('hour'),826            width     : 90,827            x         : 367,828            y         : 32,829            store     : Ext.create('Exem.Store'),830            editable  : false ,831            listeners : {832                scope : this,833                change: function(){834                    if ( this.rdo_interval.getCheckedValue()  == 'hour'){835                        this.diff_time = Number(this.cbo_hour.getValue()) * 3600000 ;836                    }837                    else{838                        this.diff_time = Number(this.cbo_day.getValue()) * 3600000 * 24 ;839                    }840                    if ( this.second_date == undefined ){841                        return;842                    }843                    this.set_interval() ;844                }845            }846        }) ;847        var lbl_day = Ext.create('Ext.form.Label',{848            itemId: 'lbl_day',849            text  : common.Util.TR('Day'),850            x     : 383,851            y     : 35852        }) ;853        for ( ix = 31 ; ix > 0 ; ix-- ){854            this.cbo_day.addItem( ix.toString(), ix.toString() ) ;855        }856        this.cbo_day.selectRow(0) ;857        this.conditionArea.add( this.cbo_condition, this.cbo_cnt, this.rdo_interval, this.cbo_hour, lbl_hour, this.cbo_day, lbl_day ) ;858        this.cbo_day.setDisabled(true) ;859        lbl_day.el.dom.style.color = '#cccccc' ;860        ix = null ;861        lbl_hour = null ;862        lbl_day = null ;863    } ,864    set_interval: function(){865        this.change_interval( this.first_date.mainFromField, this.first_date.mainToField ) ;866        this.change_interval( this.second_date.mainFromField, this.second_date.mainToField ) ;867        this.change_interval( this.third_date.mainFromField, this.third_date.mainToField ) ;868    } ,869    /*870     * íë¨ ê·¸ë¦¬ë ë ì´ìì871     * */872    layout_bot: function(){873        //ì ëì ì¼ë¡ max3ê°ê¹ì§ íì´ ë¶ë ì»¨íì´ë.874        this.h_pnl = Ext.create('Exem.Container',{875            layout   : 'hbox' ,876            region   : 'south',877            split    : true ,878            height   : '30%',879            flex     : 1880        }) ;881        this.create_grid( 'grid1' ) ;882        this.create_grid( 'grid2' ) ;883        this.create_grid( 'grid3' ) ;884        this.workArea.add( this.h_pnl ) ;885        /**886        //this.set_condition() ;887        //this.h_pnl.add( tab ) ;888        //tab.setActiveTab( 0 ) ;889         **/890    } ,891    /*892     * ì¤ì ë ì´ìì893     * */894    layout_center: function(){895        var self = this ;896        var default_stat = [897            'TPS'898            ,'OS CPU(%)'899            ,'JVM Used Heap (MB)'900            ,'Elapsed Time'901        ];902        var default_stat_id = [903            'tps'904            ,'os_cpu'905            ,'jvm_used_heap'906            ,'txn_elapse'907        ];908        var default_gc  = [909            'Total GC Count'910            ,'Total GC Time (Sec)'911            ,'Full GC Count'912            ,'Full GC Time (Sec)'913        ];914        var default_gc_id = [915            'jvm_gc_count'916            ,'jvm_gc_time'917            ,'fgc'918            ,'old_gc_time'919        ];920        var tab = Ext.create('Exem.TabPanel',{921            region   : 'center',922            layout   : 'vbox',923            height   : '40%',924            split    : true ,925            itemId   : 'mid_tab',926            style    : { 'border-radius': '6px' },927            listeners: {928                tabchange: function(_tabPanel, _newCard) {929                    if ( !self.retrieve_click ){930                        return;931                    }932                    if ( common.Util.TR( _newCard.title ) == common.Util.TR('GC') ){933                        self.target_chart = null ;934                        self.draw_cnt = 0 ;935                        self.get_chart_data( 'GC' ) ;936                    }937                }938            }939        }) ;940        var ix = 0 ;941        var jx = 0 ;942        var pnl ;943        var type = ['Agent', 'GC'] ;944        var stat ;945        var stat_id ;946        //-agent, gc ëê°ì»¨íì´ë ìì±947        for ( ix = 0 ; ix < 2; ix++ ){948            //ê¸°ë³¸ ì§í ì í949            if ( type[ix] == 'Agent' ){950                stat = default_stat ;951                stat_id = default_stat_id ;952            }953            else{954                stat = default_gc ;955                stat_id = default_gc_id ;956            }957            //ê°ê° 4ê°ì§íê°ì§ ì°¨í¸ ìì±.958            pnl = Ext.create('Exem.Container',{959                layout : 'vbox',960                flex   : 1,961                padding: '3 0 0 0',962                title  : common.Util.TR( type[ix] ),963                itemId : 'pnl_'+type[ix]964            }) ;965            tab.add(pnl) ;966            for ( jx = 0 ; jx < 4; jx++ ){967                this.create_chart( pnl, type[ix], stat, stat_id, jx ) ;968            }969        }970        this.workArea.add( tab ) ;971        tab.setActiveTab( 0 ) ;972        //stat change973        if ( this.stat_change == undefined || this.stat_change == null ){974            //statchange ë¯¸ë¦¬ë§ë¤ì´ëê¸°.975            this.stat_change = Ext.create('view.PerformanceTrendStatChangeWindow',{976                was_id    : this.was_combo.getValue(),977                stat_data : this.all_stat_list,978                useTab: {979                    stat : true,980                    db   : false,//is_visible,981                    wait : false,//is_visible,982                    gc   : true ,983                    pool : false984                },985                okFn: function(type, name, id){986                    console.debug('ì íë íì??', type);987                    console.debug('ì íë ì´ë¦??', name);988                    console.debug('ì íë ìì´ë??', id);989                    //íì´í ìë°ì´í¸990                    self.title_update(self.target_chart, name, id);991                    if (!self.retrieve_click || self.retrieve_click == undefined) {992                        return;993                    }994                    //ì¿¼ë¦¬ ì¬ì¡°í995                    self.draw_cnt = 1 ;996                    self.get_chart_data(self.target_chart.chart_type) ;997                }998            });999            this.stat_change.init();1000            setTimeout(function(){1001                if(this.isClosed){1002                    return;1003                }1004                this.stat_view                    = Ext.create('view.PerformanceTrendUserDefined');1005                this.stat_view.scope              = this;1006                this.stat_view.view_name          = 'comparison' ;1007                this.stat_view.visible_stat_list  = ['stat', 'gc'] ;1008                this.stat_view.db_visible         = false ;1009                this.stat_view.wait_visible       = false ;1010                this.stat_view.total_stat_list    = this.all_stat_list;1011                this.stat_view.curr_active_tab    = this.workArea.getComponent('mid_tab').getActiveTab() ;1012                this.stat_view.db_id              = 0 ;1013                this.stat_view.init_form();1014            }.bind(this), 1000);1015        }1016        //save stat change1017        this.btn_save_stat = Ext.create('Ext.button.Button',{1018            text      : common.Util.TR('User Defined'),1019            margin    : '2 5 2 0',1020            style     : {1021                cursor    : 'pointer',1022                lineHeight: '18px'1023            },1024            listeners : {1025                click: function() {1026                    if (self.stat_view == undefined) {1027                        return;1028                    }1029                    self.stat_view.setTitle( common.Util.TR('User Defined') ) ;1030                    self.stat_view.show();1031                    self.stat_view.flag_refresh = self.retrieve_click;1032                    self.stat_view.load_list_data();1033                }1034            }1035        });1036        tab.getTabBar().add({xtype: 'tbspacer', flex: 8});1037        tab.getTabBar().add(self.btn_save_stat);1038        tab = null ;1039        pnl = null ;1040        ix = null ;1041        stat = null ;1042        stat_id = null ;1043    } ,1044    /*1045     * ìë¨ ì¡°ê±´ ë ì´ìì1046     * */1047    layout_condition: function(){1048        var self = this ;1049        var y_value = 25 ;1050        var color = ['#2b99f0', '#01cc00', '#e76627'] ;1051        var con1 ;1052        //color container1053        for ( var ix = 0 ; ix < 3; ix++ ){1054            con1 = Ext.create('Exem.Container',{1055                layout: 'fit',1056                width : 10,1057                height: 10,1058                x     : 490,1059                y     : (ix*y_value)+10 ,1060                style : { 'background': color[ix], 'border-radius': '6px' }1061            }) ;1062            this.conditionArea.add(con1) ;1063        }1064        ix      = null ;1065        color   = null ;1066        con1    = null ;1067        this.first_date = Ext.create('Exem.DatePicker', {1068            x                : 505,1069            y                : 5,1070            itemId           : 'first_date',1071            width            : 100,1072            executeSQL       : this.executeSQL,1073            executeScope     : this,1074            rangeOneDay      : true,1075            DisplayTime      : DisplayTimeMode.H,1076            onCalenderValidFn: this.onCalenderValidFn,1077            onFromHourSelect : this.onFromHourSelect,1078            toCalNotUse      : true,   //toTimeìª½ë¬ë ¥ ì¬ì©X1079            toFieldEditable  : false,  //readonlyê¸°ë¥1080            useGoDayButton   : false,  //yesterday,today_ì¬ì©X1081            useRangeOver     : true   //1ëíê¹ì§_ì íê°ë¥1082            //disableMessage   : common.Util.TR('ì¸í°ë² ì¤ì ì ë°ë¼ ë³ëëë¯ë¡ ì í ë¶ê°')1083        });1084        //datepicker1085        this.second_date = Ext.create('Exem.DatePicker', {1086            x                : 505,1087            y                : 30,1088            itemId           : 'second_date',1089            width            : 100,1090            executeSQL       : this.executeSQL,1091            executeScope     : this,1092            rangeOneDay      : true,1093            DisplayTime      : DisplayTimeMode.H,1094            onCalenderValidFn: this.onCalenderValidFn,1095            onFromHourSelect : this.onFromHourSelect,1096            toCalNotUse      : true,   //toTimeìª½ë¬ë ¥ ì¬ì©X1097            toFieldEditable  : false,  //readonlyê¸°ë¥1098            useGoDayButton   : false,  //yesterday,today_ì¬ì©X1099            useRangeOver     : true    //1ëíê¹ì§_ì íê°ë¥1100            //disableMessage   : common.Util.TR('ì¸í°ë² ì¤ì ì ë°ë¼ ë³ëëë¯ë¡ ì í ë¶ê°')1101        });1102        this.third_date = Ext.create('Exem.DatePicker', {1103            x                : 505,1104            y                : 55,1105            itemId           : 'third_date',1106            width            : 100,1107            executeSQL       : this.executeSQL,1108            executeScope     : this,1109            rangeOneDay      : true,1110            DisplayTime      : DisplayTimeMode.H,1111            onCalenderValidFn: this.onCalenderValidFn,1112            onFromHourSelect : this.onFromHourSelect,1113            toCalNotUse      : true ,1114            toFieldEditable  : false,  //readonlyê¸°ë¥1115            useGoDayButton   : false,  //yesterday,today_ì¬ì©X1116            useRangeOver     : true    //1ëíê¹ì§_ì íê°ë¥1117            //disableMessage   : common.Util.TR('ì¸í°ë² ì¤ì ì ë°ë¼ ë³ëëë¯ë¡ ì í ë¶ê°')1118        });1119        //### first_date ###########################################################################1120        this.first_date.mainFromField.addListener('keyup', function(){1121            var set_to = +new Date(this.getValue()+':00:00') + self.diff_time ;1122            if(!set_to){1123                self.first_date.mainFromField.setValue(this.lastValue);1124            }1125            else{1126                self.first_date.mainToField.setValue( Ext.util.Format.date( new Date(set_to) , self.date_format) ) ;1127            }1128        }) ;1129        //### second_date ###########################################################################1130        this.second_date.mainFromField.addListener('keyup', function(){1131            var set_to = +new Date(this.getValue()+':00:00') + self.diff_time ;1132            if(!set_to){1133                self.second_date.mainFromField.setValue(this.lastValue);1134            }1135            else{1136                self.second_date.mainToField.setValue( Ext.util.Format.date( new Date(set_to) , self.date_format) ) ;1137            }1138        }) ;1139        //### third_date ###########################################################################1140        this.third_date.mainFromField.addListener('keyup', function(){1141            var set_to = +new Date(this.getValue()+':00:00') + self.diff_time ;1142            if(!set_to){1143                self.third_date.mainFromField.setValue(this.lastValue);1144            }1145            else{1146                self.third_date.mainToField.setValue( Ext.util.Format.date( new Date(set_to) , self.date_format) ) ;1147            }1148        }) ;1149        this.first_date.mainToField.setDisabled(true) ;1150        this.second_date.mainToField.setDisabled(true) ;1151        this.third_date.mainToField.setDisabled(true) ;1152        this.set_interval() ;1153        //was combobox1154        this.was_combo = Ext.create('Exem.wasDBComboBox',{1155            x               : 730,1156            y               : 5,1157            comboLabelWidth : 60,1158            itemId          : 'wasCombo',1159            width           : 400,1160            comboWidth      : 240,1161            selectType      : common.Util.TR('Agent'),1162            addSelectAllItem: false,1163            listeners: {1164                afterrender: function(){1165                    this.WASDBCombobox.addListener('select', function(){1166                    }) ;1167                }1168            }1169        }) ;1170        this.second_was_combo = Ext.create('Exem.wasDBComboBox',{1171            x               : 730,1172            y               : 30,1173            comboLabelWidth : 60,1174            itemId          : 'wasCombo2',1175            width           : 400,1176            comboWidth      : 240,1177            selectType      : common.Util.TR('Agent'),1178            addSelectAllItem: false1179        }) ;1180        this.third_was_combo = Ext.create('Exem.wasDBComboBox',{1181            x               : 730,1182            y               : 55,1183            comboLabelWidth : 60,1184            itemId          : 'wasCombo3',1185            width           : 400,1186            comboWidth      : 240,1187            selectType      : common.Util.TR('Agent'),1188            addSelectAllItem: false,1189            listeners : {1190                scope : this,1191                afterrender: function(){1192                    this.set_condition() ;1193                }1194            }1195        }) ;1196        this.conditionArea.add( this.first_date, this.second_date, this.third_date, this.was_combo, this.second_was_combo, this.third_was_combo ) ;1197    },1198    /*1199     * ì²ì ë¬ë ¥ì ì¸í°ë²ë§í¼ ë,ì¸ë²ì§¸ Fromê°ë³ê²½ íë©´ toTimeë³ê²½í´ì£¼ë í¨ì.1200     * param - datePicker1201     * */1202    change_interval: function( from, to ){1203        if ( this.diff_time == undefined ){1204            return;1205        }1206        var time = +new Date(from.getValue()+':00:00')+this.diff_time ;1207        to.setValue( Ext.util.Format.date( new Date(time), this.date_format) ) ;1208        time = null ;1209    } ,1210    /*1211     * ì°¨í¸ ìì± í¨ì1212     * */1213    create_chart: function( parent, type, title, title_id, cht_idx ){1214        /*1215         * parent  -> pnl(Container)1216         * type    -> Agent or GC1217         * title   -> Stat List ..1218         * id      -> itemId1219         * cht_idx -> chart index (0~3)1220         * */1221        var chart = Ext.create('Exem.chart.CanvasChartLayer',{1222            height                       : 50,1223            title                        : common.Util.TR( title[cht_idx] ),1224            chart_type                   : type,1225            stat_title                   : title[cht_idx],1226            stat_id                      : title_id[cht_idx],1227            itemId                       : type+'_chart_'+cht_idx,1228            interval                     : PlotChart.time.exHour,1229            titleHeight                  : 17,1230            titleWidth                   : 170,1231            titleFontSize                : '12px',1232            dbclick_info                 : { cb: this.on_chart, scope: this, itemId: type+'_chart_'+cht_idx, idx: cht_idx, chart_type: type },1233            //showTitle                    : false,1234            showTitle                    : true,1235            showLegend                   : true,1236            legendWidth                  : 170,1237            legendTextAlign              : 'east',1238            //showIndicator                : false,1239            indicatorLegendFormat        : '%y',1240            indicatorLegendAxisTimeFormat: '%H:%M',1241            showTooltip                  : true,1242            toolTipFormat                : '%x [value:%y] ',1243            toolTipTimeFormat            : '%H:%M',1244            //mouseSelect                  : false,1245            xaxisCurrentToTime           : true,1246            onIndexValue                 : true ,1247            standardSeries               : 0,1248            chartProperty   : {1249                yLabelWidth : 55,1250                xLabelFont  : {size: 8, color: 'black'},1251                yLabelFont  : {size: 8, color: 'black'},1252                xaxis       : false,1253                mode        : null1254            }1255        }) ;1256        var add_series = function(){1257            chart.addSeries({1258                label: common.Util.CTR('AVG'),1259                id   : 'mid_cht0',1260                type : PlotChart.type.exLine,1261                color: '#2b99f0'1262            });1263            chart.addSeries({1264                label: common.Util.CTR('AVG'),1265                id   : 'mid_cht1',1266                type : PlotChart.type.exLine,1267                color: '#01cc00'1268            });1269            chart.addSeries({1270                label: common.Util.CTR('AVG'),1271                id   : 'mid_cht2',1272                hideLegend: true,1273                type : PlotChart.type.exLine,1274                color: '#e76627'1275            });1276        } ;1277        //chart header click - single stat change form1278        chart.titleLayer.on({1279            render: {1280                fn   : this.title_click ,1281                scope: chart,1282                style: { cursor: 'pointer' }1283            }1284        }) ;1285        add_series();1286        if ( this.array_chart == undefined ){1287            this.array_chart = { 'Agent': [], 'GC': [] } ;1288            this.array_chart.Agent = [] ;1289            this.array_chart.GC = [] ;1290        }1291        this.array_chart[type].push( chart ) ;1292        parent.add( chart ) ;1293    } ,1294    title_click: function(){1295        var el = this.titleLayer.getEl() ;1296        var info = this.dbclick_info;1297        if ( info == null ){1298            return;1299        }1300        el.scope = info.scope ;1301        el.itemId = 'chart'+info.itemId;1302        el.cht_idx = info.idx;1303        this.titleLayer.getEl().setStyle('cursor', 'pointer') ;1304        this.titleLayer.getEl().addListener('click', function(){1305            console.debug( info );1306            var active_tab   = info.scope.workArea.getComponent('mid_tab').getActiveTab() ;1307            var active_pnl   = info.scope.workArea.getComponent('mid_tab').getComponent(active_tab.itemId) ;1308            var select_title = active_pnl.getComponent(info.idx).title ;1309            var stat_type    = info.scope.find_stat_type( select_title ) ;1310            // target_chartë íì¬ activeëì´ìë í.1311            switch ( active_tab.itemId ){1312                case 'pnl_Agent':1313                    info.scope.target_chart = info.scope.array_chart.Agent[info.idx] ;1314                    break ;1315                case 'pnl_GC'   :1316                    info.scope.target_chart = info.scope.array_chart.GC[info.idx] ;1317                    break ;1318                default :1319                    break;1320            }1321            info.scope.target_chart = info.scope.array_chart[info.chart_type][info.idx] ;1322            info.scope.stat_change.setUseTab(stat_type);1323            info.scope.stat_change.selectValue(stat_type, select_title);1324        }) ;1325    } ,1326    /*1327     * ê·¸ë¦¬ë ìì± í¨ì1328     * */1329    create_grid: function( id ){1330        /*1331         * id -> itemId1332         * */1333        var tab = Ext.create('Exem.TabPanel',{1334            layout   : 'fit',1335            flex     : 1,1336            height   : '100%',1337            itemId   : 'bot_tab_'+id,1338            style    : { 'border-radius': '6px', 'border-style': 'solid', 'border-width': '2px' }1339        }) ;1340        var con = Ext.create('Exem.Panel',{1341            // executeSQLëììì setTitleë¡ ë³ê²½í¨.1342            title   : common.Util.TR('Agent'),1343            layout  : 'fit'1344        }) ;1345        var grid = Ext.create('Exem.BaseGrid',{1346            itemId    : id,1347            usePager  : false1348            //adjustGrid: true1349        }) ;1350        con.add( grid ) ;1351        tab.add( con ) ;1352        grid.beginAddColumns() ;1353        grid.addColumn('was_id'                                         , 'time'            , 170, Grid.DateTime, false, true);1354        grid.addColumn('was_name'                                       , 'txn'             , 100, Grid.String  , false, true);1355        grid.addColumn('txn_id'                                         , 'txn_id'          , 100, Grid.String  , false, true);1356        grid.addColumn(common.Util.CTR('Transaction')                   , 'txn_name'        , 100, Grid.String  , true , false);1357        grid.addColumn(common.Util.CTR('Transaction Execution Count')   , 'txn_exec_count'  , 100, Grid.Number  , true , false);1358        grid.addColumn(common.Util.CTR('Transaction Elapse Time (MAX)') , 'txn_elapse_max'  , 100, Grid.Float   , true , false);1359        grid.addColumn(common.Util.CTR('Transaction Elapse Time (AVG)') , 'txn_elapse_avg'  , 100, Grid.Float   , true , false);1360        grid.addColumn(common.Util.CTR('SQL Elapse Time (MAX)')         , 'sql_elapse_max'  , 100, Grid.Float   , true , false);1361        grid.addColumn(common.Util.CTR('SQL Elapse Time (AVG)')         , 'sql_elapse_avg'  , 100, Grid.Float   , true , false);1362        grid.addColumn('txn_elapse'                                     , 'txn_elapse'      , 100, Grid.Float   , false, true);1363        grid.endAddColumns() ;1364        this.h_pnl.add( tab, { type: 'tbspacer', width: 3 } ) ;1365        tab.setActiveTab( 0 ) ;1366        if ( this.array_grid == undefined ){1367            this.array_grid = [] ;1368        }1369        this.array_grid.push( grid ) ;1370        grid = null ;1371        con = null ;1372        tab = null ;1373    } ,1374    /*1375     * ì°¨í¸ íì´í ë³ê²½1376     * */1377    title_update: function( arr_cht, title, id ){1378        if(!title || !id){1379            return;1380        }1381        //ë°°ì´ì¸ì§ ìëì§(StatChange) ì²´í¬1382        if (!Array.isArray(arr_cht)) {1383            arr_cht = [arr_cht];1384            title   = [title] ;1385            id      = [id] ;1386        }1387        for (var ix = 0; ix < arr_cht.length; ix++){1388            console.debug(ix +'     :::     '+title[ix]);1389            arr_cht[ix].up().loadingMask.showMask() ;1390            arr_cht[ix].setTitle( common.Util.TR(title[ix]) );1391            arr_cht[ix].stat_title = common.Util.TR(title[ix]) ;1392            arr_cht[ix].stat_id = common.Util.TR(id[ix]) ;1393            arr_cht[ix].up().loadingMask.hide() ;1394        }1395        ix = null ;1396    } ,1397    get_stat_name: function(){1398        if (this.all_stat_list['Stat'].length == 0){1399            for (var ix = 0; ix < this.was_stat.length; ix++)1400                this.all_stat_list['Stat'].push({ name: this.was_stat[ix], value: this.was_stat_alias[ix] });1401            for (ix = 0; ix < this.gc_stat.length; ix++)1402                this.all_stat_list['GC'].push({ name: this.gc_stat[ix], value: this.gc_stat_alias[ix] });1403            ix = null;1404        }1405    },1406    find_stat_type: function(title){1407        try{1408            var ix = 0;1409            var result;1410            for (ix = 0; ix < this.all_stat_list['Stat'].length; ix++) {1411                if ( common.Util.TR(this.all_stat_list['Stat'][ix].name ) == common.Util.TR(title)) {1412                    result = TrendStatChange.stat;1413                    break;1414                }1415            }1416            for (ix = 0; ix < this.all_stat_list['GC'].length; ix++) {1417                if ( common.Util.TR(this.all_stat_list['GC'][ix].name) == common.Util.TR(title)) {1418                    result = TrendStatChange.gc;1419                    break;1420                }1421            }1422            return result;1423        }finally{1424            ix = null;1425        }1426    }...

benchmark.js

Source:benchmark.js

1import { LightningElement, track, api, wire } from 'lwc';2import { drawPlot, buildTrends, buildLayout, relayout, createAnnotation, removeAnnotation } from './plots';3import { ConnectStore, store } from 'store/store';4import { fetchComparison, comparisonChanged } from 'store/actions';5export default class ComponentBenchmark extends LightningElement {6    // PROPERTIES7    element;8    hasRegisteredHandlers = false;9    currentLayout = {};10    @track selectedPoints = [];11    recentHoverData;12    comparisonElement;13    @track pendingCommitsToCompare = new Set();14    @track viewComparisonCommits = [];15    @track comparisonResults = {};16    @track comparisonName = null;17    @api metric = 'all';18    // eslint-disable-next-line @lwc/lwc/no-unknown-wire-adapters19    @wire(ConnectStore, { store })20    storeChanged({ view }) {21        this.comparisonResults = view.comparison.results;22        this.viewComparisonCommits = view.comparison.commits;23        this.comparisonName = view.comparison.benchmarkName;24        // eslint-disable-next-line @lwc/lwc/no-api-reassignments25        this.metric = view.metric;26    }27    _first;28    @api29    get first() {30        return this._first;31    }32    set first(first) {33        this._first = first;34        this.currentLayout = buildLayout(this.benchmark.name, this.first);35        if (this.element) {36            relayout(this.element, this.currentLayout);37            // eslint-disable-next-line lwc/no-raf, @lwc/lwc/no-async-operation38            window.requestAnimationFrame(() => {39                this.updateGraphZoom();40            });41        }42    }43    allTrends = [];44    visibleTrends = [];45    _benchmark;46    @api47    get benchmark() {48        return this._benchmark;49    }50    set benchmark(benchmark) {51        this._benchmark = benchmark;52        this.allTrends = buildTrends(benchmark);53    }54    _zoom;55    @api56    get zoom() {57        return this._zoom;58    }59    set zoom(zoom) {60        this._zoom = zoom;61        if (!zoom.origin || zoom.origin !== this.benchmark.name) {62            this.updateGraphZoom();63        }64    }65    // GETTERS66    get comparing() {67        return this.pendingCommitsToCompare.size > 0;68    }69    get showingComparison() {70        return this.viewComparisonCommits.length > 0;71    }72    get hasComparisonResults() {73        return Object.keys(this.comparisonResults).length > 0;74    }75    get containerClassNames() {76        return this.comparing ? 'comparing container' : 'container';77    }78    get comparisonModalTitle() {79        return `Comparing on ${this.comparisonName}`;80    }81    // METHODS82    handleRelayout(update) {83        const firstKey = Object.keys(update).shift();84        if (this.first && firstKey && firstKey.includes('xaxis')) {85            // make sure we are talking about zoom updates86            this.dispatchEvent(87                new CustomEvent('zoom', {88                    detail: {89                        update: {90                            ...update,91                            origin: this.benchmark.name,92                        },93                    },94                }),95            );96        }97    }98    updateGraphZoom() {99        if (this.element) {100            this.currentLayout = relayout(this.element, this.zoom);101        }102    }103    closeCommitInfo(event) {104        const { commit } = event.detail;105        this.selectedPoints.every((point, idx) => {106            if (point.commit === commit) {107                if (!point.pendingCompare) {108                    this.currentLayout = removeAnnotation(this.element, commit);109                }110                this.selectedPoints.splice(idx, 1);111                return false;112            }113            return true;114        });115    }116    rawClickHandler(event) {117        const grandParent = event.target.parentElement.parentElement;118        if (grandParent !== this.element && this.recentHoverData) {119            this.traceClicked();120        }121    }122    traceClicked() {123        const point = this.recentHoverData.points[0];124        const { x: commit } = point;125        const top = this.first ? 400 * 1.15 : 400;126        const left = point.xaxis.l2p(point.xaxis.d2c(point.x)) + point.xaxis._offset;127        const commitInfo = {128            commit,129            top,130            left,131            hidden: false,132            pendingCompare: this.pendingCommitsToCompare.has(commit),133        };134        const needsInsertion = this.selectedPoints.every((pastPoint, idx) => {135            if (pastPoint.commit === commit && !pastPoint.hidden) {136                return false;137            } else if (pastPoint.commit === commit && pastPoint.hidden) {138                this.selectedPoints[idx] = { ...commitInfo };139                return false;140            }141            return true;142        });143        if (needsInsertion && !this.comparing) {144            this.selectedPoints.push(commitInfo);145            this.currentLayout = createAnnotation(this.element, point);146        } else if (needsInsertion && this.comparing) {147            this.pendingCommitsToCompare.add(commit);148            this.selectedPoints.push({ ...commitInfo, hidden: true, pendingCompare: true });149            this.currentLayout = createAnnotation(this.element, point);150        }151    }152    hoverHandler(data) {153        this.recentHoverData = data;154    }155    updateVisibleTrends() {156        if (this.allTrends.length > 0) {157            this.visibleTrends =158                this.metric === 'all'159                    ? this.allTrends160                    : this.allTrends.filter((trend) => trend.name.includes(this.metric));161        }162    }163    onCompareClick(event) {164        const { commit } = event.detail;165        const beingCompared = this.pendingCommitsToCompare.has(commit);166        if (beingCompared) {167            this.pendingCommitsToCompare.delete(commit);168            this.selectedPoints.every((pastPoint, idx) => {169                if (pastPoint.commit === commit) {170                    this.selectedPoints[idx] = { ...pastPoint, pendingCompare: false };171                    return false;172                }173                return true;174            });175        } else {176            this.pendingCommitsToCompare.add(commit);177            this.selectedPoints.every((pastPoint, idx) => {178                if (pastPoint.commit === commit && !pastPoint.hidden) {179                    this.selectedPoints[idx] = { ...pastPoint, hidden: true, pendingCompare: true };180                    return false;181                }182                return true;183            });184        }185    }186    runComparison() {187        store.dispatch(fetchComparison(this.benchmark.name, [...this.pendingCommitsToCompare]));188    }189    cancelComparison() {190        this.pendingCommitsToCompare.forEach((commit) => {191            this.currentLayout = removeAnnotation(this.element, commit);192        });193        this.pendingCommitsToCompare = new Set();194        this.selectedPoints = [];195    }196    closeModal() {197        this.comparisonElement = null;198        store.dispatch(comparisonChanged());199    }200    async renderedCallback() {201        if (!this.element) this.element = this.template.querySelector('.graph');202        this.updateVisibleTrends();203        this.currentLayout = await drawPlot(this.element, this.visibleTrends, this.currentLayout);204        if (!this.hasRegisteredHandlers) {205            this.hasRegisteredHandlers = true;206            this.element.addEventListener('click', (event) => this.rawClickHandler(event));207            this.element.on('plotly_hover', (data) => this.hoverHandler(data));208            this.element.on('plotly_relayout', (update) => this.handleRelayout(update));209        }210        if (!this.hasSetInitialZoom) {211            this.hasSetInitialZoom = true;212            this.updateGraphZoom();213        }214        // COMPARISON215        // fetch comparison results if all we have is the commits from the url216        if (this.showingComparison && !this.hasComparisonResults && this.comparisonName === this.benchmark.name) {217            store.dispatch(fetchComparison(this.benchmark.name, this.viewComparisonCommits));218        }219        if (this.showingComparison && this.hasComparisonResults) {220            if (!this.comparisonElement) this.comparisonElement = this.template.querySelector('.comparison-graph');221            if (this.comparisonElement) {222                const comparisonTrend = buildTrends(this.comparisonResults, true, true);223                const initialComparisonLayout = buildLayout(this.comparisonResults.name, false);224                await drawPlot(this.comparisonElement, comparisonTrend, initialComparisonLayout);225            }226        }227    }...

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.