Added uptime and avg latency
TimZ99
parent
b3de673c6a
commit
32c17f372b
|
|
@ -187,13 +187,15 @@ class HistoryGraph {
|
|||
|
||||
/**
|
||||
* Generate data arrays for graphs
|
||||
* @param array $records all uptime records to parse, MUST BE SORTED BY DATE IN ASCENDING ORDER
|
||||
* @param array $lines array with keys as line ids to prepare (key must be available in uptime records)
|
||||
* @param callable $cb_if_up function to check if the server is up or down
|
||||
* @param array $records All uptime records to parse, MUST BE SORTED BY DATE IN ASCENDING ORDER
|
||||
* @param array $lines Array with keys as line ids to prepare (key must be available in uptime records)
|
||||
* @param string $latency_avg_key which key from uptime records to use for calculating averages
|
||||
* @param \DateTime $start_time Lowest DateTime of the graph
|
||||
* @param \DateTime $end_time Highest DateTime of the graph
|
||||
* @param boolean $add_uptime add uptime calculation?
|
||||
* @param boolean $add_uptime Add uptime calculation?
|
||||
* @param array $prev Previous result
|
||||
* @param int $downtime Total downtime
|
||||
* @param int $prev_downtime Timestamp from last offline record. 0 when last record is uptime
|
||||
* @return array
|
||||
*/
|
||||
protected function generateGraphLines($records, $lines, $latency_avg_key, $start_time, $end_time, $add_uptime = false) {
|
||||
|
|
@ -203,65 +205,60 @@ class HistoryGraph {
|
|||
// PLEASE NOTE: all times are in microseconds! because of javascript.
|
||||
$latency_avg = 0;
|
||||
|
||||
$downtime = array();
|
||||
$prev = reset($records);
|
||||
|
||||
$prev_down = false;
|
||||
$prev_downtime = 0;
|
||||
$downtime = 0;
|
||||
|
||||
$prev_up = array();
|
||||
$prev_up['status'] = false;
|
||||
$prev_up['value'] = 0.0;
|
||||
|
||||
$line_type = 'unknown';
|
||||
// Create the list of points and server down zones
|
||||
foreach ($records as $record) {
|
||||
$time = strtotime($record['date']);
|
||||
// use the first line to calculate average latency
|
||||
$latency_avg += (float) $record[$latency_avg_key];
|
||||
|
||||
|
||||
foreach ($lines as $key => $value) {
|
||||
// add the value for each of the different lines
|
||||
if (isset($record[$key])) {
|
||||
if (isset($record['status'])){
|
||||
$line_type = 'short';
|
||||
// down
|
||||
if ($record['status'] == 0){
|
||||
$lines['online'][] = $prev_up['status']
|
||||
$lines['online'][] = $prev['status']
|
||||
// Previous datapoint was online
|
||||
? '{ x: '.($time*1000).', y: '.$prev_up['value'].'}'
|
||||
? '{ x: '.($time*1000).', y: '.$prev['latency'].'}'
|
||||
// Previous datapoint was offline
|
||||
: '{ x: '.($time*1000).', y: null}';
|
||||
// new outage start
|
||||
$lines['offline'][] = '{ x: '.($time*1000).', y:0.1}';
|
||||
$prev_up['status'] = false;
|
||||
|
||||
$prev_downtime != 0 ?: $prev_downtime = $time;
|
||||
}
|
||||
// up
|
||||
else {
|
||||
$lines['offline'][] = $prev_up['status']
|
||||
// outage ends
|
||||
$lines['offline'][] = $prev['status']
|
||||
// Previous datapoint was online
|
||||
? '{ x: '.($time*1000).', y:null}'
|
||||
// Previous datapoint was offline
|
||||
: '{ x: '.($time*1000).', y:0.1}';
|
||||
$lines['online'][] = '{ x: '.($time*1000).', y: '.round((float) $record[$key], 4).'}';
|
||||
$prev_up['status'] = true;
|
||||
$prev_up['value'] = round((float) $record[$key], 4);
|
||||
|
||||
$prev_downtime == 0 ?: $downtime += ($time - $prev_downtime);
|
||||
$prev_downtime = 0;
|
||||
}
|
||||
}
|
||||
else {
|
||||
$lines[$key][] = '{ x: \''.$record['date'].'\', y: '.$record[$key].'}';
|
||||
}
|
||||
$prev = $record;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
if (!$prev_up['status'] && $line_type == 'short') {
|
||||
// Was down before.
|
||||
// Record the first and last date as a string in the down array
|
||||
$lines['offline'][] = '{ x: '.($now->getTimestamp()*1000).', y:0.1}';
|
||||
// TODO
|
||||
// add the number of microseconds of downtime to counter for %
|
||||
//$time_down += ($time - $now->getTimestamp());
|
||||
// Was down before.
|
||||
// Record the first and last date as a string in the down array
|
||||
$prev_downtime == 0 ?: $downtime += ($now->getTimestamp()-$prev_downtime);
|
||||
if ($add_uptime) {
|
||||
$prev['status'] ?: $lines['offline'][] = '{ x: '.($now->getTimestamp()*1000).', y:0.1}';
|
||||
$data['uptime'] = 100 - ($downtime / ($end_time->getTimestamp() - $start_time->getTimestamp()));
|
||||
}
|
||||
|
||||
$lines_merged = array();
|
||||
|
|
@ -274,17 +271,6 @@ class HistoryGraph {
|
|||
$lines_merged[$line_key]['name'] = psm_get_lang('servers', $line_key);
|
||||
}
|
||||
|
||||
// TODO
|
||||
/*if (isset($last_date)) {
|
||||
// if last_date is still set, the last check was "down" and we are still in down mode
|
||||
$downtime[] = '{ x: '.($last_date*1000).', y:0.0}';
|
||||
|
||||
$time_down += ($end_time->getTimestamp() - $last_date);
|
||||
}
|
||||
|
||||
if ($add_uptime) {
|
||||
$data['uptime'] = 100 - (($time_down / ($end_time->getTimestamp() - $start_time->getTimestamp())) / 10);
|
||||
}*/
|
||||
$data['latency_avg'] = count($records) > 0 ? ($latency_avg / count($records)) : 0;
|
||||
$data['lines'] = sizeof($lines_merged) ? $lines_merged : '';
|
||||
$data['end_timestamp'] = number_format($end_time->getTimestamp(), 0, '', '')*1000;
|
||||
|
|
|
|||
|
|
@ -13,8 +13,16 @@
|
|||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<noscript></div></noscript>
|
||||
<noscript></div></noscript><div class="w-100"></div>
|
||||
<br>
|
||||
{% if graph.id == 'history_short' %}
|
||||
<div id="meter" data-value="{{ graph.uptime|round(3) }}" translation="{{ graph.info.1.label|lower }}">
|
||||
<span id="needle" style="transform: rotate({{ ((graph.uptime|round/100)*180)|round }}deg);"></span>
|
||||
</div><br>
|
||||
{% endif %}
|
||||
{{ graph.info.0.label }}: {{ graph.info.0.value }}s
|
||||
</div>
|
||||
|
||||
{% if graph.id == 'history_short' %}
|
||||
<script>
|
||||
var historyShort = new Chart(document.getElementById("{{ graph.id }}").getContext('2d'), {
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
html{position:relative;min-height:100%}html[dir='rtl'] #auto_refresh_servers,html[dir='rtl'] #log_retention_period{border-left-width:0px}html[dir='rtl'] #auto_refresh_servers_input,html[dir='rtl'] #log_retention_period_input{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0;border-bottom-right-radius:0}body{padding-top:4.5rem;margin-bottom:80px}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;background-color:#f5f5f5}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,0.64)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,0.85)}dl,dt,dd{margin-bottom:0}footer .text-muted{color:#4C5557 !important}a,button,.nav-link{min-height:44px !important;min-width:44px !important}a.icon{text-decoration:none;cursor:pointer;padding-left:10px}#auto_refresh_servers,#log_retention_period{border-right-width:0px}#auto_refresh_servers_input,#log_retention_period_input{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-bottom-left-radius:0}form.form-signin input[type="text"],form.form-reset input[type="text"]{border-bottom-left-radius:0;border-bottom-right-radius:0}form.form-signin input[type="password"]{border-top-left-radius:0;border-top-right-radius:0}form.form-reset input#input-password{border-radius:0}form.form-reset input#input-password-repeat{border-top-left-radius:0;border-top-right-radius:0}form.form-signin,form.form-forgot,form.form-reset{margin:auto}table tr[visible='false'],.no-result{display:none}table tr[visible='true']{display:table-row}td,tbody th>a{-ms-word-break:break-all;word-break:break-all;word-break:break-word;overflow-wrap:break-word}th{width:25%;text-align:left}.bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{color:unset}
|
||||
html{position:relative;min-height:100%}html[dir='rtl'] #auto_refresh_servers,html[dir='rtl'] #log_retention_period{border-left-width:0px}html[dir='rtl'] #auto_refresh_servers_input,html[dir='rtl'] #log_retention_period_input{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0;border-bottom-right-radius:0}body{padding-top:4.5rem;margin-bottom:80px}.footer{position:absolute;bottom:0;width:100%;height:60px;line-height:60px;background-color:#f5f5f5}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,0.64)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,0.85)}dl,dt,dd{margin-bottom:0}footer .text-muted{color:#4C5557 !important}a,button,.nav-link{min-height:44px !important;min-width:44px !important}a.icon{text-decoration:none;cursor:pointer;padding-left:10px}#auto_refresh_servers,#log_retention_period{border-right-width:0px}#auto_refresh_servers_input,#log_retention_period_input{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-bottom-left-radius:0}form.form-signin input[type="text"],form.form-reset input[type="text"]{border-bottom-left-radius:0;border-bottom-right-radius:0}form.form-signin input[type="password"]{border-top-left-radius:0;border-top-right-radius:0}form.form-reset input#input-password{border-radius:0}form.form-reset input#input-password-repeat{border-top-left-radius:0;border-top-right-radius:0}form.form-signin,form.form-forgot,form.form-reset{margin:auto}table tr[visible='false'],.no-result{display:none}table tr[visible='true']{display:table-row}td,tbody th>a{-ms-word-break:break-all;word-break:break-all;word-break:break-word;overflow-wrap:break-word}th{width:25%;text-align:left}.bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{color:unset}#meter{border-radius:200px 200px 0 0;height:100px;margin:50px auto 0;overflow:hidden;position:relative;width:200px}#meter:before{background:#fbfbfb;border-radius:200px 200px 0 0;-webkit-box-shadow:3px 1px 8px rgba(0,0,0,0.15) inset;box-shadow:3px 1px 8px rgba(0,0,0,0.15) inset;content:"";height:100px;position:absolute;width:200px}#meter:after{background:#fff;border-radius:140px 140px 0 0;bottom:0;-webkit-box-shadow:3px 1px 8px rgba(0,0,0,0.15);box-shadow:3px 1px 8px rgba(0,0,0,0.15);content:"\a" attr(data-value) "%\a" attr(translation);font-size:1.5em;font-weight:100;height:80px;left:20px;line-height:25px;position:absolute;text-align:center;width:160px;z-index:3;white-space:pre}#needle{background:rgba(52,52,64,0.7);border-radius:4px;bottom:-4px;-webkit-box-shadow:3px -1px 4px rgba(0,0,0,0.4);box-shadow:3px -1px 4px rgba(0,0,0,0.4);display:block;height:8px;left:5px;position:absolute;width:95px;-webkit-transform-origin:100% 4px;transform-origin:100% 4px;-webkit-transition:all 1s;transition:all 1s}
|
||||
/*# sourceMappingURL=style.min.css.map */
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"../scss/style.scss"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -132,4 +132,54 @@ th {
|
|||
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
|
||||
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
#meter {
|
||||
border-radius: 200px 200px 0 0;
|
||||
height: 100px;
|
||||
margin: 50px auto 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
&:before {
|
||||
background: #fbfbfb;
|
||||
border-radius: 200px 200px 0 0;
|
||||
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15) inset;
|
||||
content: "";
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
}
|
||||
&:after {
|
||||
background: #fff;
|
||||
border-radius: 140px 140px 0 0;
|
||||
bottom: 0;
|
||||
-webkit-box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
|
||||
content: "\A" attr(data-value) "%\A"attr(translation);
|
||||
font-size: 1.5em;
|
||||
font-weight: 100;
|
||||
height: 80px;
|
||||
left: 20px;
|
||||
line-height: 25px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 160px;
|
||||
z-index: 3;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
#needle {
|
||||
background: rgba(52, 52, 64, 0.7);
|
||||
border-radius: 4px;
|
||||
bottom: -4px;
|
||||
box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4);
|
||||
display: block;
|
||||
height: 8px;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
width: 95px;
|
||||
transform-origin: 100% 4px;
|
||||
transition: all 1s;
|
||||
}
|
||||
Loading…
Reference in New Issue