mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
73 lines
2.7 KiB
Plaintext
73 lines
2.7 KiB
Plaintext
---
|
|
import Subheader from '@ui/Subheader.astro'
|
|
import Trending from '@ui/Trending.astro'
|
|
|
|
interface TrackingItem {
|
|
status?: 'success' | 'warning' | 'danger'
|
|
label: string
|
|
}
|
|
|
|
// Mirrors the uptime history shown in docs/pages/ui/components/tracking.mdx.
|
|
const uptime: TrackingItem[] = [
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'danger', label: 'Downtime' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'warning', label: 'Big load' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'danger', label: 'Downtime' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ label: 'No data' },
|
|
{ label: 'No data' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
{ status: 'success', label: 'Operational' },
|
|
]
|
|
---
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<Subheader>Status monitoring</Subheader>
|
|
<div class="ms-auto lh-1">
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Current month </a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a class="dropdown-item active" href="#">Current month</a>
|
|
<a class="dropdown-item" href="#">Last month</a>
|
|
<a class="dropdown-item" href="#">Last 3 months</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-baseline">
|
|
<div class="h1 mb-3 me-2">99.5%</div>
|
|
<div class="me-auto">
|
|
<Trending value={2} />
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<div class="tracking">
|
|
{uptime.map((item) => <div class:list={['tracking-block', item.status && `bg-${item.status}`]} data-bs-toggle="tooltip" data-bs-placement="top" title={item.label} />)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|