monithor/Monithor.web/Pages/Shared/_Status.cshtml
2021-05-13 22:38:02 +02:00

149 lines
5.1 KiB
Plaintext

@using Monithor.api
@{
var statusPage = (StatusPage) ViewData["statuspage"];
var monitors = statusPage.Monitors.Select(p => p.monitor);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta http-equiv="refresh" content="60">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" id="viewport" name="viewport">
<title>
@statusPage.Name status
</title>
@if (monitors.All(p => p.Status is MonitorStatus.Up or MonitorStatus.Validating)) {
<link rel="shortcut icon" type="image/x-icon" href="/assets/up_small.png"/>
}
else {
<link rel="shortcut icon" type="image/x-icon" href="/assets/down_small.png"/>
}
<link href="https://@statusPage.Route/" rel="canonical">
<link rel="stylesheet" media="all" href="/css/status.css"/>
</head>
<body class="status-page">
<main class="main">
<div class="status-page-container pt-2 pb-5">
<navbar class="navbar status-header">
<a class="d-flex flex-nowrap align-items-center" href="/">
<div class="status-header-brand">@statusPage.Name</div>
<span class="status-header-label">Status</span>
</a>
<div>
</div>
</navbar>
<div class="status-page-overview">
@if (monitors.All(p => p.Status is MonitorStatus.Up or MonitorStatus.Validating)) {
<img class="status-page-overview-icon" src="/assets/up_large.png" alt="up"/>
<h1 class="status-page-title">All services are online</h1>
}
else if (monitors.All(p => p.Status is MonitorStatus.Down or MonitorStatus.Recovering)) {
<img class="status-page-overview-icon" src="/assets/down_large.png" alt="down"/>
<h1 class="status-page-title">All services are down</h1>
}
else {
<img class="status-page-overview-icon" src="/assets/down_large.png" alt="down"/>
<h1 class="status-page-title">Some services are down</h1>
}
<p class="status-page-updated-at text-muted">Last updated @DbProxy.LastUpdated</p>
</div>
@RenderBody()
<div class="card status-page-resources-card">
<div class="card-header d-flex flex-column flex-md-row justify-content-between align-items-md-center">
<b class="card-title">Current status by service</b>
</div>
<div class="card-body">
<div class="status-page-resource-list">
<div data-onload="initTooltips()">
@foreach (var (monitor, displayName) in statusPage.Monitors) {
<div class='status-page-resource'>
<div class='d-flex flex-column'>
<div class='d-flex flex-column flex-md-row justify-content-between'>
<div class='d-flex align-items-center'>
@if (monitor.Status is MonitorStatus.Up) {
<img style="width: 16px;" class="mr-2" src="/assets/up_small.png" alt="up"/>
@displayName
<span class="text-muted">
&nbsp;@monitor.Message
</span>
}
else if (monitor.Status is MonitorStatus.Validating) {
<img style="width: 16px;" class="mr-2" src="/assets/unmonitored_small.png" alt="hold"/>
@displayName
<span class="text-muted">
&nbsp;@monitor.Message - @monitor.LastValue
</span>
}
else if (monitor.Status is MonitorStatus.Recovering) {
<img style="width: 16px;" class="mr-2" src="/assets/unmonitored_small.png" alt="hold"/>
@displayName
<span class="text-muted">
&nbsp;@monitor.Message
</span>
}
else {
<img style="width: 16px;" class="mr-2" src="/assets/down_small.png" alt="down"/>
@displayName
<span class="text-muted">
&nbsp;@monitor.Message - @monitor.LastValue
</span>
}
</div>
<span class='text-muted'>
@switch(monitor.Status) {
case MonitorStatus.Unknown:
@Html.Raw("Unknown");
break;
case MonitorStatus.Up:
@Html.Raw("Operational");
break;
case MonitorStatus.Down:
@Html.Raw("Down");
break;
case MonitorStatus.Validating:
@Html.Raw("Validating downtime");
break;
case MonitorStatus.Recovering:
@Html.Raw("Validating recovery");
break;
default:
throw new ArgumentOutOfRangeException();
}
<!--
99.999% uptime in the last 90 days
-->
</span>
</div>
</div>
<!--
<div class='status-page-resource-ticks mt-2'>
<div class='status-page-resource-tick-inner status-page-tick-up'></div>
<div class='status-page-resource-tick-inner status-page-tick-maintenance'></div>
<div class='status-page-resource-tick-inner status-page-tick-down'></div>
@@for (var i = 1; i <= 90; i++) {
<div class='status-page-resource-tick'>
<div class='status-page-resource-tick-inner status-page-tick-none'></div>
</div>
}
</div>
-->
</div>
}
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>