tabler/preview/pages/uptime.astro

---

import Subheader from '@ui/Subheader.astro';
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Chart from '@ui/Chart.astro';
import Card from '@ui/Card.astro';
import CardBody from '@ui/CardBody.astro';
import CardTitle from '@ui/CardTitle.astro';
---

<DefaultLayout pageHeaderFile="uptime" pageMenu="extra.uptime" pageLibs={['apexcharts']}>
	<div class="row row-cards">
		<div class="col-md-4">
			<Card>
				<CardBody>
					<Subheader>Currently up for</Subheader>
					<div class="h3 m-0">14 days 2 hours 54 mins 34 seconds</div>
				</CardBody>
			</Card>
		</div>
		<div class="col-md-4">
			<Card>
				<CardBody>
					<Subheader>Last checked at</Subheader>
					<div class="h3 m-0">27 seconds ago</div>
				</CardBody>
			</Card>
		</div>
		<div class="col-md-4">
			<Card>
				<CardBody>
					<Subheader>Incidents</Subheader>
					<div class="h3 m-0">3</div>
				</CardBody>
			</Card>
		</div>
		<div class="col-md-8">
			<Card>
				<CardBody>
					<CardTitle>Response times across regions in the last day</CardTitle>
					<Chart chartId="uptime" height={15} />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-4">
			<Card>
				<CardBody>
					<CardTitle>Uptime incidents per day</CardTitle>
					<Chart chartId="uptime-incidents" height={15} />
				</CardBody>
			</Card>
		</div>
		<div class="col-12">
			<Card>
				<div class="card-table table-responsive">
					<table class="table">
						<thead>
						<tr>
							<th>Time period</th>
							<th>Availability</th>
							<th>Downtime</th>
							<th>Incidents</th>
							<th>Longest incident</th>
							<th>Avg. incident</th>
						</tr>
						</thead>
						<tbody><tr>
							<td>Today</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						<tr>
							<td>Last 7 days</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						<tr>
							<td>Last 30 days</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						<tr>
							<td>Last 365 days</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						<tr>
							<td>All time</td>
							<td>98.9533%</td>
							<td>1 minute</td>
							<td>1</td>
							<td>1 minute</td>
							<td>1 minute</td>
						</tr>
						</tbody>
					</table>
				</div>
			</Card>
		</div>
	</div>
</DefaultLayout>