Made some improvements to how server statistics are displayed.
This commit is contained in:
Beanow
parent
a11ecf4140
commit
9b8eaa7aa7
4 changed files with 194 additions and 71 deletions
|
|
@ -13,6 +13,14 @@ $default_timezone = 'Europe/Amsterdam';
|
||||||
// What is your site name?
|
// What is your site name?
|
||||||
$a->config['sitename'] = "EXPERIMENTAL Friendica public directory";
|
$a->config['sitename'] = "EXPERIMENTAL Friendica public directory";
|
||||||
|
|
||||||
|
//Statistic display settings.
|
||||||
|
$a->config['stats'] = array(
|
||||||
|
|
||||||
|
//For site health, the max age for which to display data.
|
||||||
|
'maxDataAge' => 3600*24*30*4 //120 days = ~4 months
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
//Settings related to the syncing feature.
|
//Settings related to the syncing feature.
|
||||||
$a->config['syncing'] = array(
|
$a->config['syncing'] = array(
|
||||||
|
|
||||||
|
|
@ -46,7 +54,7 @@ $a->config['site-health'] = array(
|
||||||
//Wait for at least ... before probing a site again.
|
//Wait for at least ... before probing a site again.
|
||||||
//The longer this value, the more "stable" site-healths will be over time.
|
//The longer this value, the more "stable" site-healths will be over time.
|
||||||
//Note: If a bad (negative) health site submits something, a probe will be performed regardless.
|
//Note: If a bad (negative) health site submits something, a probe will be performed regardless.
|
||||||
'min_probe_delay' => 3*24*3600, // 3 days
|
'min_probe_delay' => 24*3600, // 1 day
|
||||||
|
|
||||||
//Probes get a simple /friendica/json file from the server.
|
//Probes get a simple /friendica/json file from the server.
|
||||||
//Feel free to set this timeout to a very tight value.
|
//Feel free to set this timeout to a very tight value.
|
||||||
|
|
|
||||||
81
include/smoothing.js
Normal file
81
include/smoothing.js
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
(function(){
|
||||||
|
|
||||||
|
window.Smoothing = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Applies both a moving average bracket and and exponential smoothing.
|
||||||
|
* @param {array} raw The raw Y values.
|
||||||
|
* @param {float} factor The exponential smoothing factor to apply (between o and 1).
|
||||||
|
* @param {int} bracket The amount of datapoints to add to the backet on each side! (2 = 5 data points)
|
||||||
|
* @return {array} The smoothed Y values.
|
||||||
|
*/
|
||||||
|
exponentialMovingAverage: function(raw, factor, bracket){
|
||||||
|
|
||||||
|
var output = [];
|
||||||
|
var smoother = new ExponentialSmoother(factor);
|
||||||
|
|
||||||
|
//Transform each data point with the smoother.
|
||||||
|
for (var i = 0; i < raw.length; i++){
|
||||||
|
|
||||||
|
var input = raw[i];
|
||||||
|
|
||||||
|
//See if we should bracket.
|
||||||
|
if(bracket > 0){
|
||||||
|
|
||||||
|
//Cap our start and end so it doesn't go out of bounds.
|
||||||
|
var start = Math.max(i-bracket, 0);
|
||||||
|
var end = Math.min(i+bracket, raw.length);
|
||||||
|
|
||||||
|
//Push the range to our input.
|
||||||
|
input = [];
|
||||||
|
for(var j = start; j < end; j++){
|
||||||
|
input.push(raw[j]);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
output.push(
|
||||||
|
smoother.transform(input)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return output;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// Exponential Smoother class.
|
||||||
|
var ExponentialSmoother = function(factor){
|
||||||
|
this.currentValue = null;
|
||||||
|
this.smoothingFactor = factor || 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
ExponentialSmoother.prototype.transform = function(input){
|
||||||
|
|
||||||
|
// In case our input is a bracket, first average it.
|
||||||
|
if(input.length){
|
||||||
|
var len = input.length;
|
||||||
|
var sum = 0;
|
||||||
|
for (var i = input.length - 1; i >= 0; i--)
|
||||||
|
sum += input[i]
|
||||||
|
input = sum/len;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start with our initial value.
|
||||||
|
if(this.currentValue === null){
|
||||||
|
this.currentValue = input;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Our output is basically an updated value.
|
||||||
|
return this.currentValue =
|
||||||
|
|
||||||
|
// Weigh our current value with the smoothing factor.
|
||||||
|
(this.currentValue * this.smoothingFactor) +
|
||||||
|
|
||||||
|
// Add the input to it with the inverse value of the smoothing factor.
|
||||||
|
( (1-this.smoothingFactor) * input );
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
})();
|
||||||
167
mod/health.php
167
mod/health.php
|
|
@ -129,6 +129,42 @@ function health_summary(&$a){
|
||||||
function health_details($a, $id)
|
function health_details($a, $id)
|
||||||
{
|
{
|
||||||
|
|
||||||
|
//Max data age in MySQL date.
|
||||||
|
$maxDate = date('Y-m-d H:i:s', time()-($a->config['stats']['maxDataAge']));
|
||||||
|
|
||||||
|
//Include graphael line charts.
|
||||||
|
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/smoothing.js"></script>'.PHP_EOL;
|
||||||
|
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/raphael.js"></script>'.PHP_EOL;
|
||||||
|
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/g.raphael.js"></script>'.PHP_EOL;
|
||||||
|
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/g.line-min.js"></script>'.PHP_EOL;
|
||||||
|
$a->page['htmlhead'] .= '<script type="text/javascript">
|
||||||
|
window.smoothingFactor = 0.3;
|
||||||
|
window.smoothingBracket = 2;
|
||||||
|
window.availableCharts = [];
|
||||||
|
window.drawRaw = false;
|
||||||
|
window.drawCharts = function(){
|
||||||
|
for (var i = availableCharts.length - 1; i >= 0; i--) {
|
||||||
|
availableCharts[i](jQuery);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
window.onHoverPoint = function(r){ return function(){
|
||||||
|
this.tags = r.set();
|
||||||
|
var i = this.y.length-1;
|
||||||
|
this.tags.push(r.popup(this.x, this.y[i], Math.round(this.values[i])+"ms", "right", 5).insertBefore(this));
|
||||||
|
}};
|
||||||
|
window.onUnHoverPoint = function(r){ return function(){
|
||||||
|
this.tags && this.tags.remove();
|
||||||
|
}};
|
||||||
|
jQuery(function($){
|
||||||
|
drawCharts();
|
||||||
|
$(".js-toggle-raw").click(function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
drawRaw=!drawRaw;
|
||||||
|
drawCharts();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>';
|
||||||
|
|
||||||
//The overall health status.
|
//The overall health status.
|
||||||
$r = q(
|
$r = q(
|
||||||
"SELECT * FROM `site-health`
|
"SELECT * FROM `site-health`
|
||||||
|
|
@ -196,62 +232,14 @@ function health_details($a, $id)
|
||||||
|
|
||||||
//Get probe speed data.
|
//Get probe speed data.
|
||||||
$r = q(
|
$r = q(
|
||||||
"SELECT `request_time`, `dt_performed` FROM `site-probe`
|
"SELECT AVG(`request_time`) as `avg_time`, date(`dt_performed`) as `date` FROM `site-probe`
|
||||||
WHERE `site_health_id` = %u",
|
WHERE `site_health_id` = %u
|
||||||
intval($site['id'])
|
AND `dt_performed` > '%s'
|
||||||
|
GROUP BY `date`",
|
||||||
|
intval($site['id']),
|
||||||
|
$maxDate
|
||||||
);
|
);
|
||||||
if(count($r)){
|
if(count($r)){
|
||||||
//Include graphael line charts.
|
|
||||||
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/raphael.js"></script>'.PHP_EOL;
|
|
||||||
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/g.raphael.js"></script>'.PHP_EOL;
|
|
||||||
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/g.line-min.js"></script>';
|
|
||||||
$speeds = array();
|
|
||||||
$times = array();
|
|
||||||
$mintime = time();
|
|
||||||
foreach($r as $row){
|
|
||||||
$speeds[] = $row['request_time'];
|
|
||||||
$time = strtotime($row['dt_performed']);
|
|
||||||
$times[] = $time;
|
|
||||||
if($mintime > $time) $mintime = $time;
|
|
||||||
}
|
|
||||||
for($i=0; $i < count($times); $i++){
|
|
||||||
$times[$i] -= $mintime;
|
|
||||||
$times[$i] = floor($times[$i] / (24*3600));
|
|
||||||
}
|
|
||||||
$a->page['htmlhead'] .=
|
|
||||||
'<script type="text/javascript">
|
|
||||||
jQuery(function($){
|
|
||||||
|
|
||||||
var r = Raphael("probe-chart")
|
|
||||||
, x = ['.implode(',', $times).']
|
|
||||||
, y = ['.implode(',', $speeds).']
|
|
||||||
;
|
|
||||||
|
|
||||||
r.linechart(30, 15, 400, 300, x, [y], {symbol:"circle", axis:"0 0 0 1", shade:true, width:1.5}).hoverColumn(function () {
|
|
||||||
this.tags = r.set();
|
|
||||||
for (var i = 0, ii = this.y.length; i < ii; i++) {
|
|
||||||
this.tags.push(r.popup(this.x, this.y[i], this.values[i]+"ms", "right", 5).insertBefore(this).attr([{ fill: "#eee" }, { fill: this.symbols[i].attr("fill") }]));
|
|
||||||
}
|
|
||||||
}, function () {
|
|
||||||
this.tags && this.tags.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>';
|
|
||||||
}
|
|
||||||
|
|
||||||
//Get scrape speed data.
|
|
||||||
$r = q(
|
|
||||||
"SELECT AVG(`total_time`) as `avg_time`, date(`dt_performed`) as `date` FROM `site-scrape`
|
|
||||||
WHERE `site_health_id` = %u GROUP BY `date`",
|
|
||||||
intval($site['id'])
|
|
||||||
// date('Y-m-d H:i:s', time()-(3*24*3600)) //Max 3 days old.
|
|
||||||
);
|
|
||||||
if($r && count($r)){
|
|
||||||
//Include graphael line charts.
|
|
||||||
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/raphael.js"></script>'.PHP_EOL;
|
|
||||||
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/g.raphael.js"></script>'.PHP_EOL;
|
|
||||||
$a->page['htmlhead'] .= '<script type="text/javascript" src="'.$a->get_baseurl().'/include/g.line-min.js"></script>';
|
|
||||||
$speeds = array();
|
$speeds = array();
|
||||||
$times = array();
|
$times = array();
|
||||||
$mintime = time();
|
$mintime = time();
|
||||||
|
|
@ -267,21 +255,66 @@ function health_details($a, $id)
|
||||||
}
|
}
|
||||||
$a->page['htmlhead'] .=
|
$a->page['htmlhead'] .=
|
||||||
'<script type="text/javascript">
|
'<script type="text/javascript">
|
||||||
jQuery(function($){
|
availableCharts.push(function($){
|
||||||
|
|
||||||
var r = Raphael("scrape-chart")
|
var id = "probe-chart";
|
||||||
, x = ['.implode(',', $times).']
|
$("#"+id+" svg").remove();
|
||||||
, y = ['.implode(',', $speeds).']
|
var r = Raphael(id);
|
||||||
;
|
var x = ['.implode(',', $times).'];
|
||||||
|
var y = ['.implode(',', $speeds).'];
|
||||||
|
var smoothY = Smoothing.exponentialMovingAverage(y, smoothingFactor, smoothingBracket);
|
||||||
|
var values = [smoothY];
|
||||||
|
if(drawRaw){
|
||||||
|
values.push(y);
|
||||||
|
}
|
||||||
|
|
||||||
r.linechart(30, 15, 400, 300, x, [y], {shade:true, axis:"0 0 0 1", width:1}).hoverColumn(function () {
|
r.linechart(30, 15, 400, 300, x, values, {axis:"0 0 0 1", shade:true, width:0.8})
|
||||||
this.tags = r.set();
|
.hoverColumn(onHoverPoint(r), onUnHoverPoint(r));
|
||||||
for (var i = 0, ii = this.y.length; i < ii; i++) {
|
|
||||||
this.tags.push(r.popup(this.x, this.y[i], Math.round(this.values[i])+"ms", "right", 5).insertBefore(this));
|
});
|
||||||
}
|
</script>';
|
||||||
}, function () {
|
}
|
||||||
this.tags && this.tags.remove();
|
|
||||||
});
|
//Get scrape speed data.
|
||||||
|
$r = q(
|
||||||
|
"SELECT AVG(`total_time`) as `avg_time`, date(`dt_performed`) as `date` FROM `site-scrape`
|
||||||
|
WHERE `site_health_id` = %u
|
||||||
|
AND `dt_performed` > '%s'
|
||||||
|
GROUP BY `date`",
|
||||||
|
intval($site['id']),
|
||||||
|
$maxDate
|
||||||
|
);
|
||||||
|
if($r && count($r)){
|
||||||
|
$speeds = array();
|
||||||
|
$times = array();
|
||||||
|
$mintime = time();
|
||||||
|
foreach($r as $row){
|
||||||
|
$speeds[] = $row['avg_time'];
|
||||||
|
$time = strtotime($row['date']);
|
||||||
|
$times[] = $time;
|
||||||
|
if($mintime > $time) $mintime = $time;
|
||||||
|
}
|
||||||
|
for($i=0; $i < count($times); $i++){
|
||||||
|
$times[$i] -= $mintime;
|
||||||
|
$times[$i] = floor($times[$i] / (24*3600));
|
||||||
|
}
|
||||||
|
$a->page['htmlhead'] .=
|
||||||
|
'<script type="text/javascript">
|
||||||
|
availableCharts.push(function($){
|
||||||
|
|
||||||
|
var id = "scrape-chart";
|
||||||
|
$("#"+id+" svg").remove();
|
||||||
|
var r = Raphael(id);
|
||||||
|
var x = ['.implode(',', $times).'];
|
||||||
|
var y = ['.implode(',', $speeds).'];
|
||||||
|
var smoothY = Smoothing.exponentialMovingAverage(y, smoothingFactor, smoothingBracket);
|
||||||
|
var values = [smoothY];
|
||||||
|
if(drawRaw){
|
||||||
|
values.push(y);
|
||||||
|
}
|
||||||
|
|
||||||
|
r.linechart(30, 15, 400, 300, x, values, {shade:true, axis:"0 0 0 1", width:0.8})
|
||||||
|
.hoverColumn(onHoverPoint(r), onUnHoverPoint(r));
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>';
|
</script>';
|
||||||
|
|
|
||||||
|
|
@ -28,8 +28,9 @@
|
||||||
<div class="profile_speed">Profile speed: $avg_profile_timems</div>
|
<div class="profile_speed">Profile speed: $avg_profile_timems</div>
|
||||||
<div class="scrape_speed">Scrape speed: $avg_scrape_timems</div>
|
<div class="scrape_speed">Scrape speed: $avg_scrape_timems</div>
|
||||||
<div class="submit_speed">Submit speed: $avg_submit_timems</div>
|
<div class="submit_speed">Submit speed: $avg_submit_timems</div>
|
||||||
<span class="health perfect">$no_scrape_support</span>
|
<span class="health perfect">$no_scrape_support</span><br>
|
||||||
|
<a href="javascript:;" class="js-toggle-raw">Toggle raw data</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="probe-chart" class="speed-chart">Probe speed</div>
|
<div id="probe-chart" class="speed-chart">Probe speed in ms<br>(last 120 days)</div>
|
||||||
<div id="scrape-chart" class="speed-chart">Submit speed</div>
|
<div id="scrape-chart" class="speed-chart">Submit speed in ms<br>(last 120 days)</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue