129 lines
5.6 KiB
HTML
129 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>System Status</title>
|
|
<link href="{{url_for('static', filename='css/bootstrap.min.css')}}" rel="stylesheet">
|
|
<link href="{{url_for('static', filename='css/bootstrap-icons.css')}}" rel="stylesheet">
|
|
<link rel="icon" href="{{url_for('static', filename='img/ltf-logo.png')}}">
|
|
<style>
|
|
.bd-placeholder-img {
|
|
font-size: 1.125rem;
|
|
text-anchor: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.bd-placeholder-img-lg {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-light">
|
|
<div class="container px-5">
|
|
<main>
|
|
<div class="py-5 text-center">
|
|
<img class="d-block mx-auto mb-4" src="{{url_for('static', filename='img/ltf-logo.svg')}}" alt="" width="72" height="57">
|
|
<h2>Systems Status</h2>
|
|
<p class="lead">The current status of the Liberty Tech Force systems.</p>
|
|
</div>
|
|
{% if overall_status == 'operational' %}
|
|
<div class="p-3 mb-5 bg-success text-white" style="border-radius: 3px;">
|
|
<i class="bi-check-circle-fill" style="margin-right: 0.5rem;"></i> All systems are operational
|
|
</div>
|
|
{% elif overall_status == 'unclear' %}
|
|
<div class="p-3 mb-5 bg-warning" style="border-radius: 3px;">
|
|
<i class="bi-question-circle-fill" style="margin-right: 0.5rem;"></i> Some systems are experiencing problems
|
|
</div>
|
|
{% elif overall_status == 'offline' %}
|
|
<div class="p-3 mb-5 bg-danger text-white" style="border-radius: 3px;">
|
|
<i class="bi-exclamation-circle-fill" style="margin-right: 0.5rem;"></i> <strong>There is a major disruption of services</strong>
|
|
</div>
|
|
{% endif %}
|
|
{% if services | length > 0 %}
|
|
<h2 class="mt-5 mb-3">Services</h2>
|
|
<ul class="list-group">
|
|
{% for service in services %}
|
|
{% if service.status == 'operational' %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
|
|
{% elif service.status == 'unclear' %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center p-3 bg-warning" style="--bs-bg-opacity: 0.2">
|
|
{% elif service.status == 'offline' %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center p-3 bg-danger" style="--bs-bg-opacity: 0.2">
|
|
{% endif %}
|
|
{{service.name}}
|
|
{% if service.status == 'operational' %}
|
|
<span class="text-success">
|
|
{% elif service.status == 'unclear' %}
|
|
<span class="text-warning">
|
|
{% elif service.status == 'offline' %}
|
|
<span class="text-danger">
|
|
{% endif %}
|
|
{{service.status.title()}}
|
|
|
|
{% if service.status == 'operational' %}
|
|
<i class="bi-check-circle-fill"></i>
|
|
{% elif service.status == 'unclear' %}
|
|
<i class="bi-question-circle-fill"></i>
|
|
{% elif service.status == 'unclear' %}
|
|
<i class="bi-exclamation-circle-fill"></i>
|
|
{% endif %}
|
|
</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{% if incidents | length > 0 %}
|
|
<h2 class="mt-5 mb-3">Incidents</h2>
|
|
{% endif %}
|
|
{% for incident in incidents %}
|
|
<div class="row">
|
|
<div class="col-auto text-center flex-column d-none d-sm-flex">
|
|
<div class="row h-50">
|
|
{% if loop.first %}
|
|
<div class="col"> </div>
|
|
<div class="col"> </div>
|
|
{% else %}
|
|
<div class="col border-end border-2"> </div>
|
|
<div class="col border-start border-2"> </div>
|
|
{% endif %}
|
|
</div>
|
|
<!-- h5 class="m-2"><span class="rounded-circle bg-white border px-3 py-1"></span></h5 -->
|
|
{% if incident.is_resolved %}
|
|
<h5 class="m-2"><span class="bi-check-circle-fill text-success" style="font-size: 200%"></span></h5>
|
|
{% else %}
|
|
<h5 class="m-2"><span class="bi-exclamation-circle-fill text-danger" style="font-size: 200%"></span></h5>
|
|
{% endif %}
|
|
<div class="row h-50">
|
|
{% if loop.last %}
|
|
<div class="col"> </div>
|
|
<div class="col"> </div>
|
|
{% else %}
|
|
<div class="col border-end border-2"> </div>
|
|
<div class="col border-start border-2"> </div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col py-2">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="float-end">{{incident.created.strftime('%H:%M%z - %a %d %B, %Y')}}</div>
|
|
<h4 class="card-title text-muted">{{incident.title}} - {{incident.service.name}}</h4>
|
|
<p class="card-text text-muted">{{incident.description}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</main>
|
|
<footer class="my-5 pt-5 text-muted text-center text-small">
|
|
<p class="mb-1">© 2021 <a href="https://libertytechforce.com">Liberty Tech Force</a> | Powered by <a href="https://git.libertytechforce.com/libertytechforce/statusforce">StatusForce</a></p>
|
|
</footer>
|
|
</div>
|
|
<!-- script src="js/bootstrap.bundle.min.js"></script -->
|
|
</body>
|
|
</html>
|