preview/pages/uptime.astro - dev - githubmirror/tabler

preview/pages/uptime.astro
113 строк3 KB
Paweł Kuna
Improve accessibility across layouts, components, and forms (#2799)
06 авг 2026, 00:40
06 авг 2026, 00:401effe22
---
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 title="Uptime" 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} label="Response times across regions in the last day" />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-4">
      <Card>
        <CardBody>
          <CardTitle>Uptime incidents per day</CardTitle>
          <Chart chartId="uptime-incidents" height={15} label="Uptime incidents per day" />
        </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>