Improvements
This commit is contained in:
parent
8d64d01463
commit
fc42462c78
|
|
@ -1,3 +1,9 @@
|
|||
<?php
|
||||
|
||||
define("UPTIME_KUMA_URL", "http://uptime-kuma.local:3001");
|
||||
|
||||
define("ENABLE_TWIG_CACHE", false);
|
||||
|
||||
define("MONITORINGS", [
|
||||
4 => ["rich" => true]
|
||||
]);
|
||||
|
|
|
|||
54
controller/status.php
Normal file
54
controller/status.php
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<?php
|
||||
|
||||
require_once("../vendor/autoload.php");
|
||||
|
||||
class UptimeStatus {
|
||||
|
||||
private $data;
|
||||
|
||||
public function load_data() {
|
||||
$page = json_decode(file_get_contents(UPTIME_KUMA_URL . "/api/status-page/public"), true);
|
||||
$status = json_decode(file_get_contents(UPTIME_KUMA_URL . "/api/status-page/heartbeat/public"), true);
|
||||
$this->data = array_merge($page, $status);
|
||||
}
|
||||
|
||||
public function display() {
|
||||
|
||||
$filter = new \Twig\TwigFilter('timeago', function ($ago, $now) {
|
||||
|
||||
$time = strtotime($now) - strtotime($ago);
|
||||
|
||||
$units = array (
|
||||
31536000 => 'year',
|
||||
2592000 => 'month',
|
||||
604800 => 'week',
|
||||
86400 => 'day',
|
||||
3600 => 'hour',
|
||||
60 => 'minute',
|
||||
1 => 'second'
|
||||
);
|
||||
|
||||
foreach ($units as $unit => $val) {
|
||||
if ($time < $unit) continue;
|
||||
$numberOfUnits = floor($time / $unit);
|
||||
return ($val == 'second')? 'a few seconds ago' :
|
||||
(($numberOfUnits>1) ? $numberOfUnits : 'a')
|
||||
.' '.$val.(($numberOfUnits>1) ? 's' : '').' ago';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$twig_config = [];
|
||||
if(ENABLE_TWIG_CACHE) $twig_config["cache"] = "../cache/twig/";
|
||||
|
||||
$loader = new \Twig\Loader\FilesystemLoader("../view/");
|
||||
$twig = new \Twig\Environment($loader, $twig_config);
|
||||
$twig->addFilter($filter);
|
||||
|
||||
$monitoring = MONITORINGS ?? [];
|
||||
|
||||
echo $twig->render('index.twig', array_merge(["monitoring" => $monitoring], $this->data));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,16 +1,10 @@
|
|||
<?php
|
||||
|
||||
require_once("../config.inc.php");
|
||||
require_once("../vendor/autoload.php");
|
||||
|
||||
$loader = new \Twig\Loader\FilesystemLoader("../view/");
|
||||
$twig = new \Twig\Environment($loader, [
|
||||
'cache' => '../cache/twig/',
|
||||
]);
|
||||
require("../config.inc.php");
|
||||
require("../controller/status.php");
|
||||
|
||||
$page = json_decode(file_get_contents(UPTIME_KUMA_URL . "/api/status-page/public"), true);
|
||||
$monitors = json_decode(file_get_contents(UPTIME_KUMA_URL . "/api/status-page/heartbeat/public"), true);
|
||||
$status = new UptimeStatus;
|
||||
|
||||
$data = array_merge($page, $monitors);
|
||||
|
||||
echo $twig->render('index.twig', $data);
|
||||
$status->load_data();
|
||||
$status->display();
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ h3, h4 {
|
|||
|
||||
.group .item {
|
||||
overflow: hidden;
|
||||
margin: 5px 0;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
|
|
@ -37,6 +36,13 @@ h3, h4 {
|
|||
background-color: #fff1;
|
||||
}
|
||||
|
||||
:is(.group, .item) > .inner {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* MONITOR */
|
||||
|
||||
.monitor {
|
||||
--color: #fff2;
|
||||
}
|
||||
|
|
@ -54,27 +60,57 @@ h3, h4 {
|
|||
grid-template-columns: 22px 1fr max-content;
|
||||
}
|
||||
|
||||
.monitor .heartbeats {
|
||||
.monitor .icon {
|
||||
color: var(--color);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.monitor .uptime {
|
||||
font-size: .9rem;
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
|
||||
/* HEARTBEATS */
|
||||
|
||||
.heartbeats {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.heartbeats .items {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
height: 5px;
|
||||
transition: all .3s;
|
||||
transition: all .3s .5s;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.monitor:hover .heartbeats {
|
||||
height: 25px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.monitor .heartbeats > * {
|
||||
.heartbeats .items > * {
|
||||
flex: 1;
|
||||
background-color: var(--color);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.heartbeats .time {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .9rem;
|
||||
opacity: .5;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.monitor:hover .heartbeats .items {
|
||||
height: 25px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* STATUS COLORS */
|
||||
|
||||
.monitor.status-1, .monitor .heartbeats .status-1 {
|
||||
--color: var(--green-color);
|
||||
}
|
||||
|
|
@ -85,18 +121,4 @@ h3, h4 {
|
|||
|
||||
.monitor.status-2, .monitor .heartbeats .status-2 {
|
||||
--color: var(--red-color);
|
||||
}
|
||||
|
||||
:is(.group, .item) > .inner {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.monitor .icon {
|
||||
color: var(--color);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.monitor .uptime {
|
||||
font-size: .9rem;
|
||||
color: var(--color);
|
||||
}
|
||||
11
view/heartbeats.twig
Normal file
11
view/heartbeats.twig
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<div class="heartbeats">
|
||||
<div class="items">
|
||||
{% for heartbeat in heartbeats %}
|
||||
<div class="status-{{ heartbeat.status }}"></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="time">
|
||||
<div>{{ (heartbeats | first).time | timeago((heartbeats | last).time) }}</div>
|
||||
<div>now</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -19,10 +19,8 @@
|
|||
<b>{{ (attribute(uptimeList, "#{monitor.id}_24") * 100) | number_format(1, '.') }}%</b> uptime
|
||||
</div>
|
||||
</header>
|
||||
<div class="heartbeats">
|
||||
{% for heartbeat in heartbeats %}
|
||||
<div class="status-{{ heartbeat.status }}"></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if monitoring[monitor.id].rich %}
|
||||
{{ include('./heartbeats.twig') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue