# Uptime Bar

> Health at a glance: UptimeBar (a bar per day), Meter (usage against a limit), ServerCard, DeployPipeline.

Component · Data · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/UptimeBar/)

Health at a glance: `UptimeBar` (a bar per day), `Meter` (usage against a limit), `ServerCard`, `DeployPipeline`.

UptimeBar: `days` ("ok" | "warn" | "danger" | "none" or {status, label, note}), `uptime` (percent), `caption`. Hover shows the day.
Meter: `label`, `value`, `max`, `text`, `warn` (75), `danger` (90), `tone`.
ServerCard: `name`, `provider`, `address`, `logo`, `status`, `statusLabel`, `meters` ({label, value, max, text, unknown}; value null shows "Unknown"), `uptime` (UptimeBar props), `foot`.
DeployPipeline: `stages` ({name, status: "done" | "running" | "signal" | "danger" | "idle", duration, action}).

## Example

```tsx
import * as React from "react";
import { DeployPipeline, Meter, ServerCard, UptimeBar } from "@twentyfirstmedia/pro";
import type { UptimeDay } from "@twentyfirstmedia/pro";

const days: UptimeDay[] = [];
for (let i = 0; i < 90; i++)
  days.push(
    i === 61
      ? {
          status: "danger",
          note: "14 min down",
        }
      : i === 40 || i === 77
        ? {
            status: "warn",
            note: "slow responses",
          }
        : {
            status: i < 6 ? "none" : "ok",
          },
  );
export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "1fr 1fr",
          gap: 16,
        } as React.CSSProperties
      }
    >
      <ServerCard
        name="ax41-fsn1"
        provider="Hetzner"
        address="95.217.14.80"
        status="ok"
        statusLabel="Online"
        meters={[
          {
            label: "CPU",
            value: 34,
            text: "34%",
          },
          {
            label: "RAM",
            value: 81,
            text: "52 / 64 GB",
          },
          {
            label: "Disk",
            value: null,
          },
        ]}
        foot="Last deploy 2 h ago · #482"
      />
      <div
        className="tf-panel"
        style={{
          gap: 16,
        }}
      >
        <b>northwind.de</b>
        <UptimeBar days={days} uptime={99.96} />
        <Meter label="Budget" value={82} text="€820 / €1,000" />
        <DeployPipeline
          stages={[
            {
              name: "Pull",
              status: "done",
              duration: "4 s",
            },
            {
              name: "Build",
              status: "done",
              duration: "1 m 12 s",
            },
            {
              name: "Approve",
              status: "signal",
            },
            {
              name: "Release",
            },
          ]}
        />
      </div>
    </div>
  );
}
```

## Props

### DeployPipeline

| Prop | Type | Notes |
| --- | --- | --- |
| `stages` | `{ name: string; status?: "done" \| "running" \| "signal" \| "danger" \| "idle"; duration?: string; action?: ReactNode; }[]` | Required |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Meter

| Prop | Type | Notes |
| --- | --- | --- |
| `label?` | `ReactNode` |  |
| `value` | `number \| null` | Required |
| `max?` | `number` |  |
| `text?` | `ReactNode` |  |
| `warn?` | `number` |  |
| `danger?` | `number` |  |
| `tone?` | `Tint` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### ServerCard

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `provider?` | `string` |  |
| `address?` | `string` |  |
| `logo?` | `ReactNode` |  |
| `status?` | `Status` |  |
| `statusLabel?` | `string` |  |
| `meters?` | `{ label: string; value: number \| null; max?: number; text?: ReactNode; unknown?: string; }[]` |  |
| `uptime?` | `UptimeBarProps` |  |
| `foot?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### UptimeBar

| Prop | Type | Notes |
| --- | --- | --- |
| `days` | `UptimeDay[]` | Required |
| `uptime?` | `number` |  |
| `caption?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |