mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
83 lines
3.2 KiB
Plaintext
83 lines
3.2 KiB
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import CardSubtitle from '@ui/CardSubtitle.astro'
|
|
import StatusMonitoring from '@shared/components/cards/StatusMonitoring.astro'
|
|
import DocsLink from '@ui/DocsLink.astro'
|
|
|
|
interface TrackingItem {
|
|
status?: 'success' | 'warning' | 'danger'
|
|
label: string
|
|
}
|
|
|
|
// Mirrors the uptime history shown in docs/content/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' },
|
|
]
|
|
---
|
|
|
|
<DefaultLayout title="Tracking" pageMenu="base.tracking" description="Tracking blocks show an uptime or activity history as a row of colored bars.">
|
|
<DocsLink slot="page-header-actions" path="/ui/components/tracking" />
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Basic example</CardTitle>
|
|
<CardSubtitle>Hover a block to see its status.</CardSubtitle>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<StatusMonitoring />
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Squares variant</CardTitle>
|
|
<CardSubtitle>Add <code>.tracking-squares</code> for square, evenly spaced blocks.</CardSubtitle>
|
|
<div class="tracking tracking-squares">
|
|
{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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|