天兔3.8主机监控中添加内存统计图 - 大话人生

公告

前提：已经安装天兔3.8成功

添加内存统计步骤：

一.在/opt/lampp/htdocs/lepus/application/controllers/lp_os.php 文件中添加，目的是让chart_reslut中有内存数据mem_total、mem_avail、mem_cached (名字对应数据库中 os_status_history表中相应的字段名)：

在181行后处插入如下代码

                $chart_reslut[$i]['mem_total'] = $dbdata['mem_total'];
                $chart_reslut[$i]['mem_avail'] = $dbdata['mem_avail'];
                $chart_reslut[$i]['mem_cached'] = $dbdata['mem_cached'];

未插入前代码

   public function chart(){
        
        parent::check_privilege();
        $host = $this->uri->segment(3);
        $host=!empty($host) ? $host : "";
        $begin_time = $this->uri->segment(4);
        $begin_time=!empty($begin_time) ? $begin_time : "30";
        $time_span = $this->uri->segment(5);
        $time_span=!empty($time_span) ? $time_span : "min";
        
        //连接数图表
        $chart_reslut=array();              
        for($i=$begin_time;$i>=0;$i--){
            $timestamp=time()-60*$i;
            $time= date('YmdHi',$timestamp);
            $has_record = $this->os->check_has_record($host,$time);
            if($has_record){
                $chart_reslut[$i]['time']=date('Y-m-d H:i',$timestamp);
                $dbdata=$this->os->get_os_chart_record($host,$time);
                $chart_reslut[$i]['process'] = $dbdata['process'];
                $chart_reslut[$i]['load_1'] = $dbdata['load_1'];
                $chart_reslut[$i]['load_5'] = $dbdata['load_5'];
                $chart_reslut[$i]['load_15'] = $dbdata['load_15'];
                $chart_reslut[$i]['cpu_user_time'] = $dbdata['cpu_user_time'];
                $chart_reslut[$i]['cpu_system_time'] = $dbdata['cpu_system_time'];
                $chart_reslut[$i]['cpu_idle_time'] = $dbdata['cpu_idle_time'];
                $chart_reslut[$i]['mem_usage_rate'] = $dbdata['mem_usage_rate'];
                $chart_reslut[$i]['disk_io_reads_total'] = $dbdata['disk_io_reads_total'];
                $chart_reslut[$i]['disk_io_writes_total'] = $dbdata['disk_io_writes_total'];
                $chart_reslut[$i]['net_in_bytes_total'] = $dbdata['net_in_bytes_total'];
                $chart_reslut[$i]['net_out_bytes_total'] = $dbdata['net_out_bytes_total'];
            }
 
        }
        $data['chart_reslut']=$chart_reslut;
    
        $chart_option=array();
        if($time_span=='min'){
            $chart_option['formatString']='%H:%M';
        }
        else if($time_span=='hour'){
            $chart_option['formatString']='%H:%M';
        }
        else if($time_span=='day'){
            $chart_option['formatString']='%m/%d %H:%M';
        }
        
        $data['chart_option']=$chart_option;
      
        $data['begin_time']=$begin_time;
        $data['cur_host']=$host;
        $data['last_record'] = $this->os->get_last_record($host);
        $data['diskinfo'] = $this->os->get_disk_record($host);
        $this->layout->view('os/chart',$data);
    }

插入后：

   public function chart(){
        
        parent::check_privilege();
        $host = $this->uri->segment(3);
        $host=!empty($host) ? $host : "";
        $begin_time = $this->uri->segment(4);
        $begin_time=!empty($begin_time) ? $begin_time : "30";
        $time_span = $this->uri->segment(5);
        $time_span=!empty($time_span) ? $time_span : "min";
        
        //连接数图表
        $chart_reslut=array();              
        for($i=$begin_time;$i>=0;$i--){
            $timestamp=time()-60*$i;
            $time= date('YmdHi',$timestamp);
            $has_record = $this->os->check_has_record($host,$time);
            if($has_record){
                $chart_reslut[$i]['time']=date('Y-m-d H:i',$timestamp);
                $dbdata=$this->os->get_os_chart_record($host,$time);
                $chart_reslut[$i]['process'] = $dbdata['process'];
                $chart_reslut[$i]['load_1'] = $dbdata['load_1'];
                $chart_reslut[$i]['load_5'] = $dbdata['load_5'];
                $chart_reslut[$i]['load_15'] = $dbdata['load_15'];
                $chart_reslut[$i]['cpu_user_time'] = $dbdata['cpu_user_time'];
                $chart_reslut[$i]['cpu_system_time'] = $dbdata['cpu_system_time'];
                $chart_reslut[$i]['cpu_idle_time'] = $dbdata['cpu_idle_time'];
                $chart_reslut[$i]['mem_usage_rate'] = $dbdata['mem_usage_rate'];
                $chart_reslut[$i]['disk_io_reads_total'] = $dbdata['disk_io_reads_total'];
                $chart_reslut[$i]['disk_io_writes_total'] = $dbdata['disk_io_writes_total'];
                $chart_reslut[$i]['net_in_bytes_total'] = $dbdata['net_in_bytes_total'];
                $chart_reslut[$i]['net_out_bytes_total'] = $dbdata['net_out_bytes_total'];
                $chart_reslut[$i]['mem_total'] = $dbdata['mem_total'];   #插入的代码
                $chart_reslut[$i]['mem_avail'] = $dbdata['mem_avail'];   #插入的代码
                $chart_reslut[$i]['mem_cached'] = $dbdata['mem_cached']; #插入的代码

            }
 
        }
        $data['chart_reslut']=$chart_reslut;
    
        $chart_option=array();
        if($time_span=='min'){
            $chart_option['formatString']='%H:%M';
        }
        else if($time_span=='hour'){
            $chart_option['formatString']='%H:%M';
        }
        else if($time_span=='day'){
            $chart_option['formatString']='%m/%d %H:%M';
        }
        
        $data['chart_option']=$chart_option;
      
        $data['begin_time']=$begin_time;
        $data['cur_host']=$host;
        $data['last_record'] = $this->os->get_last_record($host);
        $data['diskinfo'] = $this->os->get_disk_record($host);
        $this->layout->view('os/chart',$data);
    }

二、在/opt/lampp/htdocs/lepus/application/views/os/chart.php中插入代码

插入代码1：在43行插入如下代码，目的是在详情页中插入一个层，用来存放统计内存图表：

<div id="memory" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div>

插入代码前：

<div id="cpu_load" style="margin-top:5px; margin-left:10px; width:96%; height:300px;"></div>
<div id="cpu_utilization" style="margin-top:5px; margin-left:10px; width:96%; height:300px;"></div>
<div id="process" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div>
<div id="network" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div>
<div id="diskio" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div>

插入代码后：

<div id="cpu_load" style="margin-top:5px; margin-left:10px; width:96%; height:300px;"></div>
<div id="cpu_utilization" style="margin-top:5px; margin-left:10px; width:96%; height:300px;"></div>
<div id="process" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div>
<div id="network" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div>
<div id="diskio" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div>
<div id="memory" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div>   #插入的代码

插入代码2：在148行后插入如下代码，目的是在上面的层上画内存统计图（单位是KB）：

//memory start
$(document).ready(function(){
  var data1=[
    <?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?>
    ["<?php echo $item['time']?>", <?php echo $item['mem_cached']?> ],
    <?php }}else{ ?>
    []    
    <?php } ?>
  ];
  var data2=[
    <?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?>
    ["<?php echo $item['time']?>", <?php echo $item['mem_total']?> ],
    <?php }}else{ ?>
    []    
    <?php } ?>
  ];
  var data3=[
    <?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?>
    ["<?php echo $item['time']?>", <?php echo $item['mem_avail']?> ],

    <?php }}else{ ?>
    []    
    <?php } ?>
  ];
  var plot1 = $.jqplot('memory', [data1,data2,data3], {
    seriesDefaults: {
              show: true,     // 设置是否渲染整个图表区域（即显示图表中内容）  
              xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.  
              yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.  
              label: '',      // 用于显示在分类名称框中的分类名称  
              color: '',      // 分类在图标中表示（折现，柱状图等）的颜色  
              lineWidth: 1.5, // 分类图（特别是折线图）宽度  
              shadow: true,   // 各图在图表中是否显示阴影区域  
              shadowAngle: 45,    // 参考grid中相同参数  
              shadowOffset: 1.25, // 参考grid中相同参数  
              shadowDepth: 3,     // 参考grid中相同参数  
              shadowAlpha: 0.1,   // 参考grid中相同参数  
              showLine: true,     //是否显示图表中的折线（折线图中的折线）  
              showMarker: false,   // 是否强调显示图中的数据节点  
              fill: false,        // 是否填充图表中折线下面的区域（填充颜色同折线颜色）以及legend 
              rendererOptions: {
                 smooth: true,
              }
    },
    series:[//如果有多个分类需要显示，这在此处设置各个分类的相关配置属性  
           //eg.设置各个分类在分类名称框中的分类名称  
            {label: '<?php echo $this->lang->line('cached'); ?>'},{label: '<?php echo $this->lang->line('total'); ?>'},{label: '<?php echo $this->lang->line('avail'); ?>'}
           //配置参数设置同seriesDefaults  
    ],  
    legend: {  
        show: true, //设置是否出现分类名称框（即所有分类的名称出现在图的某个位置） 
        label:'123', 
        location: 'ne',     // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.  
        xoffset: 12,        // 分类名称框距图表区域上边框的距离（单位px）  
        yoffset: 12,        // 分类名称框距图表区域左边框的距离(单位px)  
        background:'',        //分类名称框距图表区域背景色  
        textColor:''          //分类名称框距图表区域内字体颜色  
    },  
    seriesColors: [ "#ff5800", "#EAA228", "#00CC00", "#839557", "#958c12",   
        "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],  // 默认显示的分类颜色  
    title:{
         text:"<?php echo $cur_host; ?> <?php echo $this->lang->line('memory'); ?> <?php echo $this->lang->line('chart'); ?>",
         show:true,
         fontSize:'13px',
         textColor:'#666',
    },
    
    axes:{
        xaxis:{
            renderer:$.jqplot.DateAxisRenderer,
            tickOptions:{formatString:"<?php echo $chart_option['formatString']; ?>"},
            tickInterval:"",
            label: "",
        },
        yaxis: {  
                renderer: $.jqplot.LogAxisRenderer,
                tickOptions:{ suffix: '' } 
        } 
    },
    highlighter: {
            show: true, 
            showLabel: true, 
            tooltipAxes: '',
            sizeAdjust: 7.5 , tooltipLocation : 'ne'
    },
    cursor:{
            show: true, 
            zoom: true
    }
   
  });
});
//memoey end

posted on 2019-11-15 17:01 大话人生阅读(207) 评论(0) 编辑收藏举报

刷新页面返回顶部