|
|
@@ -2,11 +2,14 @@
|
|
|
<div class="row clearfix">
|
|
|
<div class="col-md-12 column">
|
|
|
<ul class="nav nav-tabs">
|
|
|
+ <li class="active">
|
|
|
+ <a href="/">概述</a>
|
|
|
+ </li>
|
|
|
<li>
|
|
|
- <a href="#">概述</a>
|
|
|
+ <a href="/?fn=statistic">监控</a>
|
|
|
</li>
|
|
|
- <li class="active">
|
|
|
- <a href="#">监控</a>
|
|
|
+ <li>
|
|
|
+ <a href="/?fn=log">日志</a>
|
|
|
</li>
|
|
|
<li class="disabled">
|
|
|
<a href="#">告警</a>
|
|
|
@@ -26,33 +29,26 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row clearfix">
|
|
|
- <div class="col-md-3 column">
|
|
|
- <div class="list-group">
|
|
|
- <a href="#" class="list-group-item active">HelloWorld</a>
|
|
|
- <a href="#" class="list-group-item">sayHello</a>
|
|
|
- <a href="#" class="list-group-item">sayHi</a>
|
|
|
- <a href="#" class="list-group-item active">User</a>
|
|
|
- <a href="#" class="list-group-item active">Blog</a>
|
|
|
+ <div class="col-md-12 column">
|
|
|
+ <div class="row clearfix">
|
|
|
+ <div class="col-md-12 column text-center">
|
|
|
+ <?php echo $date_btn_str;?>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row clearfix">
|
|
|
+ <div class="col-md-6 column" id="suc-pie">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-6 column" id="code-pie">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="col-md-9 column">
|
|
|
- <div class="alert alert-dismissable alert-success">
|
|
|
- <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
|
- <h4>
|
|
|
- Alert!
|
|
|
- </h4> <strong>Warning!</strong> Best check yo self, you're not looking too good. <a href="#" class="alert-link">alert link</a>
|
|
|
+ <div class="row clearfix">
|
|
|
+ <div class="col-md-12 column" id="req-container" >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="alert alert-dismissable alert-danger">
|
|
|
- <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
|
- <h4>
|
|
|
- Alert!
|
|
|
- </h4> <strong>Warning!</strong> Best check yo self, you're not looking too good. <a href="#" class="alert-link">alert link</a>
|
|
|
+ <div class="row clearfix">
|
|
|
+ <div class="col-md-12 column" id="time-container" >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <h3 class="text-primary text-center">
|
|
|
- {$module}::{$interface}请求量曲线
|
|
|
- </h3>
|
|
|
- <div id="req-container" style="min-width:1100px;height:400px"></div>
|
|
|
- <div id="time-container" style="min-width:1100px;height:400px"></div>
|
|
|
<div class="text-center">
|
|
|
<button class="btn btn-primary" type="button">分别统计</button>
|
|
|
<button class="btn btn-primary" type="button">汇总统计</button>
|
|
|
@@ -64,110 +60,7 @@
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- 2014-02-09 00:05:00
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 13500
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0.0268
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 13500
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0.0268
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 100%
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr class="danger">
|
|
|
- <td>
|
|
|
- 2014-02-09 00:10:00
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 13500
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0.0268
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 13400
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0.0268
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 100
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0.0263
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 98.1%
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- 2014-02-09 00:15:00
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 13500
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0.0268
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 13500
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0.0268
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 100%
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- 2014-02-09 00:20:00
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 13500
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0.0268
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 13500
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0.0268
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 0
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- 100%
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
+ <?php echo $table_data;?>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
@@ -175,129 +68,210 @@
|
|
|
</div>
|
|
|
<script>
|
|
|
Highcharts.setOptions({
|
|
|
- global: {
|
|
|
- useUTC: false
|
|
|
- }
|
|
|
+ global: {
|
|
|
+ useUTC: false
|
|
|
+ }
|
|
|
});
|
|
|
$(function () {
|
|
|
- $('#req-container').highcharts({
|
|
|
+ $('#suc-pie').highcharts({
|
|
|
chart: {
|
|
|
- type: 'spline'
|
|
|
+ plotBackgroundColor: null,
|
|
|
+ plotBorderWidth: null,
|
|
|
+ plotShadow: false
|
|
|
},
|
|
|
title: {
|
|
|
- text: '<?php echo "$date $interface_name";?> 请求量曲线'
|
|
|
- },
|
|
|
- subtitle: {
|
|
|
- text: ''
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'datetime',
|
|
|
- dateTimeLabelFormats: {
|
|
|
- hour: '%H:%M'
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- title: {
|
|
|
- text: '请求量(次/5分钟)'
|
|
|
- },
|
|
|
- min: 0
|
|
|
+ text: '<?php echo $date;?> 可用性'
|
|
|
},
|
|
|
tooltip: {
|
|
|
- formatter: function() {
|
|
|
- return '<p style="color:'+this.series.color+';font-weight:bold;">'
|
|
|
- + this.series.name +
|
|
|
- '</p><br /><p style="color:'+this.series.color+';font-weight:bold;">时间:' + Highcharts.dateFormat('%m月%d日 %H:%M', this.x) +
|
|
|
- '</p><br /><p style="color:'+this.series.color+';font-weight:bold;">数量:'+ this.y + '</p>';
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false,
|
|
|
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
|
},
|
|
|
- series: [ {
|
|
|
- name: '成功曲线',
|
|
|
- data: [
|
|
|
- <?php echo $success_series_data;?>
|
|
|
- ],
|
|
|
- lineWidth: 2,
|
|
|
- marker:{
|
|
|
- radius: 1
|
|
|
- },
|
|
|
-
|
|
|
- pointInterval: 300*1000
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ cursor: 'pointer',
|
|
|
+ dataLabels: {
|
|
|
+ enabled: true,
|
|
|
+ color: '#000000',
|
|
|
+ connectorColor: '#000000',
|
|
|
+ format: '<b>{point.name}</b>: {point.percentage:.1f} %'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- {
|
|
|
- name: '失败曲线',
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '可用性',
|
|
|
data: [
|
|
|
- <?php echo $fail_series_data;?>
|
|
|
- ],
|
|
|
- lineWidth: 2,
|
|
|
- marker:{
|
|
|
- radius: 1
|
|
|
- },
|
|
|
- pointInterval: 300*1000,
|
|
|
- color : '#9C0D0D'
|
|
|
+ {
|
|
|
+ name: '可用',
|
|
|
+ y: <?php echo $global_rate;?>,
|
|
|
+ sliced: true,
|
|
|
+ selected: true,
|
|
|
+ color: '#2f7ed8'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '不可用',
|
|
|
+ y: <?php echo (100-$global_rate);?>,
|
|
|
+ sliced: true,
|
|
|
+ selected: true,
|
|
|
+ color: '#910000'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}]
|
|
|
});
|
|
|
-});
|
|
|
+});
|
|
|
$(function () {
|
|
|
- $('#time-container').highcharts({
|
|
|
+ $('#code-pie').highcharts({
|
|
|
chart: {
|
|
|
- type: 'spline'
|
|
|
+ plotBackgroundColor: null,
|
|
|
+ plotBorderWidth: null,
|
|
|
+ plotShadow: false
|
|
|
},
|
|
|
title: {
|
|
|
- text: '<?php echo "$date $interface_name";?> 请求耗时曲线'
|
|
|
- },
|
|
|
- subtitle: {
|
|
|
- text: ''
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'datetime',
|
|
|
- dateTimeLabelFormats: {
|
|
|
- hour: '%H:%M'
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- title: {
|
|
|
- text: '平均耗时(单位:秒)'
|
|
|
- },
|
|
|
- min: 0
|
|
|
+ text: '<?php echo $date;?> 返回码分布'
|
|
|
},
|
|
|
tooltip: {
|
|
|
- formatter: function() {
|
|
|
- return '<p style="color:'+this.series.color+';font-weight:bold;">'
|
|
|
- + this.series.name +
|
|
|
- '</p><br /><p style="color:'+this.series.color+';font-weight:bold;">时间:' + Highcharts.dateFormat('%m月%d日 %H:%M', this.x) +
|
|
|
- '</p><br /><p style="color:'+this.series.color+';font-weight:bold;">平均耗时:'+ this.y + '</p>';
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false,
|
|
|
- text: "jumei.com",
|
|
|
- href: "http://www.jumei.com"
|
|
|
+ pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
|
|
},
|
|
|
- series: [ {
|
|
|
- name: '成功曲线',
|
|
|
- data: [
|
|
|
- <?php echo $success_time_series_data;?>
|
|
|
- ],
|
|
|
- lineWidth: 2,
|
|
|
- marker:{
|
|
|
- radius: 1
|
|
|
- },
|
|
|
- pointInterval: 300*1000
|
|
|
+ plotOptions: {
|
|
|
+ pie: {
|
|
|
+ allowPointSelect: true,
|
|
|
+ cursor: 'pointer',
|
|
|
+ dataLabels: {
|
|
|
+ enabled: true,
|
|
|
+ color: '#000000',
|
|
|
+ connectorColor: '#000000',
|
|
|
+ format: '<b>{point.name}</b>: {point.percentage:.1f} %'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- {
|
|
|
- name: '失败曲线',
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ name: '返回码分布',
|
|
|
data: [
|
|
|
- <?php echo $fail_time_series_data;?>
|
|
|
- ],
|
|
|
- lineWidth: 2,
|
|
|
- marker:{
|
|
|
- radius: 1
|
|
|
- },
|
|
|
- pointInterval: 300*1000,
|
|
|
- color : '#9C0D0D'
|
|
|
- } ]
|
|
|
+ <?php echo $code_pie_data;?>
|
|
|
+ ]
|
|
|
+ }]
|
|
|
});
|
|
|
+});
|
|
|
+$(function () {
|
|
|
+ $('#req-container').highcharts({
|
|
|
+ chart: {
|
|
|
+ type: 'spline'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '<?php echo "$date $interface_name";?> 请求量曲线'
|
|
|
+ },
|
|
|
+ subtitle: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'datetime',
|
|
|
+ dateTimeLabelFormats: {
|
|
|
+ hour: '%H:%M'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ title: {
|
|
|
+ text: '请求量(次/5分钟)'
|
|
|
+ },
|
|
|
+ min: 0
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: function() {
|
|
|
+ return '<p style="color:'+this.series.color+';font-weight:bold;">'
|
|
|
+ + this.series.name +
|
|
|
+ '</p><br /><p style="color:'+this.series.color+';font-weight:bold;">时间:' + Highcharts.dateFormat('%m月%d日 %H:%M', this.x) +
|
|
|
+ '</p><br /><p style="color:'+this.series.color+';font-weight:bold;">数量:'+ this.y + '</p>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false,
|
|
|
+ },
|
|
|
+ series: [ {
|
|
|
+ name: '成功曲线',
|
|
|
+ data: [
|
|
|
+ <?php echo $success_series_data;?>
|
|
|
+ ],
|
|
|
+ lineWidth: 2,
|
|
|
+ marker:{
|
|
|
+ radius: 1
|
|
|
+ },
|
|
|
+
|
|
|
+ pointInterval: 300*1000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '失败曲线',
|
|
|
+ data: [
|
|
|
+ <?php echo $fail_series_data;?>
|
|
|
+ ],
|
|
|
+ lineWidth: 2,
|
|
|
+ marker:{
|
|
|
+ radius: 1
|
|
|
+ },
|
|
|
+ pointInterval: 300*1000,
|
|
|
+ color : '#9C0D0D'
|
|
|
+ }]
|
|
|
+ });
|
|
|
+});
|
|
|
+$(function () {
|
|
|
+ $('#time-container').highcharts({
|
|
|
+ chart: {
|
|
|
+ type: 'spline'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '<?php echo "$date $interface_name";?> 请求耗时曲线'
|
|
|
+ },
|
|
|
+ subtitle: {
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'datetime',
|
|
|
+ dateTimeLabelFormats: {
|
|
|
+ hour: '%H:%M'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ title: {
|
|
|
+ text: '平均耗时(单位:秒)'
|
|
|
+ },
|
|
|
+ min: 0
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: function() {
|
|
|
+ return '<p style="color:'+this.series.color+';font-weight:bold;">'
|
|
|
+ + this.series.name +
|
|
|
+ '</p><br /><p style="color:'+this.series.color+';font-weight:bold;">时间:' + Highcharts.dateFormat('%m月%d日 %H:%M', this.x) +
|
|
|
+ '</p><br /><p style="color:'+this.series.color+';font-weight:bold;">平均耗时:'+ this.y + '</p>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false,
|
|
|
+ text: "jumei.com",
|
|
|
+ href: "http://www.jumei.com"
|
|
|
+ },
|
|
|
+ series: [ {
|
|
|
+ name: '成功曲线',
|
|
|
+ data: [
|
|
|
+ <?php echo $success_time_series_data;?>
|
|
|
+ ],
|
|
|
+ lineWidth: 2,
|
|
|
+ marker:{
|
|
|
+ radius: 1
|
|
|
+ },
|
|
|
+ pointInterval: 300*1000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '失败曲线',
|
|
|
+ data: [
|
|
|
+ <?php echo $fail_time_series_data;?>
|
|
|
+ ],
|
|
|
+ lineWidth: 2,
|
|
|
+ marker:{
|
|
|
+ radius: 1
|
|
|
+ },
|
|
|
+ pointInterval: 300*1000,
|
|
|
+ color : '#9C0D0D'
|
|
|
+ } ]
|
|
|
+ });
|
|
|
});
|
|
|
</script>
|