UptimeStrip | tcpsystems/ui

Try it

Day 1: operational
Day 2: operational
Day 3: degraded
Day 4: operational

Svelte

<UptimeStrip label="Service uptime" days={[{"label":"Day 1","state":"ok"},{"label":"Day 2","state":"ok"},{"label":"Day 3","state":"degraded"},{"label":"Day 4","state":"ok"}]} />

Examples

Service status

API Gateway

Nov 6: operational
Nov 5: operational
Nov 4: operational
Nov 3: operational
Nov 2: operational
Nov 1: operational
Oct 31: operational
Oct 30: operational
Oct 29: operational
Oct 28: operational
Oct 27: degraded
Oct 26: operational
Oct 25: operational
Oct 24: operational
Oct 23: operational
Oct 22: operational
Oct 21: operational
Oct 20: operational
Oct 19: operational
Oct 18: operational
Oct 17: operational
Oct 16: operational
Oct 15: operational
Oct 14: operational
Oct 13: operational
Oct 12: operational
Oct 11: operational
Oct 10: operational
Oct 9: operational
Oct 8: operational

99.7% uptime

Database Primary

Nov 6: operational
Nov 5: operational
Nov 4: operational
Nov 3: operational
Nov 2: operational
Nov 1: operational
Oct 31: operational
Oct 30: operational
Oct 29: operational
Oct 28: operational
Oct 27: operational
Oct 26: operational
Oct 25: operational
Oct 24: operational
Oct 23: operational
Oct 22: operational
Oct 21: operational
Oct 20: operational
Oct 19: operational
Oct 18: operational
Oct 17: operational
Oct 16: operational
Oct 15: operational
Oct 14: operational
Oct 13: operational
Oct 12: operational
Oct 11: operational
Oct 10: operational
Oct 9: operational
Oct 8: operational

100% uptime

CDN Edge

Nov 6: operational
Nov 5: degraded
Nov 4: operational
Nov 3: operational
Nov 2: operational
Nov 1: down
Oct 31: operational
Oct 30: operational
Oct 29: operational
Oct 28: degraded
Oct 27: operational
Oct 26: operational
Oct 25: operational
Oct 24: operational
Oct 23: operational
Oct 22: operational
Oct 21: operational
Oct 20: operational
Oct 19: operational
Oct 18: operational
Oct 17: operational
Oct 16: operational
Oct 15: operational
Oct 14: operational
Oct 13: operational
Oct 12: operational
Oct 11: operational
Oct 10: operational
Oct 9: operational
Oct 8: operational

96.3% uptime

Service status.svelte

<script lang="ts">
	import UptimeStrip from '@tcpsystems/ui/foundation/UptimeStrip';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Grid from '@tcpsystems/ui/foundation/Grid';
	import Text from '@tcpsystems/ui/foundation/Text';
</script>

<Stack data-gap="lg">
	<Grid min="sm" gap="lg">
		<Stack data-gap="sm">
			<Text><strong>API Gateway</strong></Text>
			<UptimeStrip
				label="API Gateway uptime - last 30 days"
				days={[
					{ label: 'Nov 6', state: 'ok' }, { label: 'Nov 5', state: 'ok' }, { label: 'Nov 4', state: 'ok' }, { label: 'Nov 3', state: 'ok' }, { label: 'Nov 2', state: 'ok' }, { label: 'Nov 1', state: 'ok' }, { label: 'Oct 31', state: 'ok' },
					{ label: 'Oct 30', state: 'ok' }, { label: 'Oct 29', state: 'ok' }, { label: 'Oct 28', state: 'ok' }, { label: 'Oct 27', state: 'degraded' }, { label: 'Oct 26', state: 'ok' }, { label: 'Oct 25', state: 'ok' }, { label: 'Oct 24', state: 'ok' }, { label: 'Oct 23', state: 'ok' }, { label: 'Oct 22', state: 'ok' }, { label: 'Oct 21', state: 'ok' },
					{ label: 'Oct 20', state: 'ok' }, { label: 'Oct 19', state: 'ok' }, { label: 'Oct 18', state: 'ok' }, { label: 'Oct 17', state: 'ok' }, { label: 'Oct 16', state: 'ok' }, { label: 'Oct 15', state: 'ok' }, { label: 'Oct 14', state: 'ok' }, { label: 'Oct 13', state: 'ok' }, { label: 'Oct 12', state: 'ok' }, { label: 'Oct 11', state: 'ok' }, { label: 'Oct 10', state: 'ok' }, { label: 'Oct 9', state: 'ok' }, { label: 'Oct 8', state: 'ok' },
				]}
			/>
			<Text size="sm" tone="muted">99.7% uptime</Text>
		</Stack>

		<Stack data-gap="sm">
			<Text><strong>Database Primary</strong></Text>
			<UptimeStrip
				label="Database Primary uptime - last 30 days"
				days={[
					{ label: 'Nov 6', state: 'ok' }, { label: 'Nov 5', state: 'ok' }, { label: 'Nov 4', state: 'ok' }, { label: 'Nov 3', state: 'ok' }, { label: 'Nov 2', state: 'ok' }, { label: 'Nov 1', state: 'ok' }, { label: 'Oct 31', state: 'ok' },
					{ label: 'Oct 30', state: 'ok' }, { label: 'Oct 29', state: 'ok' }, { label: 'Oct 28', state: 'ok' }, { label: 'Oct 27', state: 'ok' }, { label: 'Oct 26', state: 'ok' }, { label: 'Oct 25', state: 'ok' }, { label: 'Oct 24', state: 'ok' }, { label: 'Oct 23', state: 'ok' }, { label: 'Oct 22', state: 'ok' }, { label: 'Oct 21', state: 'ok' },
					{ label: 'Oct 20', state: 'ok' }, { label: 'Oct 19', state: 'ok' }, { label: 'Oct 18', state: 'ok' }, { label: 'Oct 17', state: 'ok' }, { label: 'Oct 16', state: 'ok' }, { label: 'Oct 15', state: 'ok' }, { label: 'Oct 14', state: 'ok' }, { label: 'Oct 13', state: 'ok' }, { label: 'Oct 12', state: 'ok' }, { label: 'Oct 11', state: 'ok' }, { label: 'Oct 10', state: 'ok' }, { label: 'Oct 9', state: 'ok' }, { label: 'Oct 8', state: 'ok' },
				]}
			/>
			<Text size="sm" tone="muted">100% uptime</Text>
		</Stack>

		<Stack data-gap="sm">
			<Text><strong>CDN Edge</strong></Text>
			<UptimeStrip
				label="CDN Edge uptime - last 30 days"
				days={[
					{ label: 'Nov 6', state: 'ok' }, { label: 'Nov 5', state: 'degraded' }, { label: 'Nov 4', state: 'ok' }, { label: 'Nov 3', state: 'ok' }, { label: 'Nov 2', state: 'ok' }, { label: 'Nov 1', state: 'down' }, { label: 'Oct 31', state: 'ok' },
					{ label: 'Oct 30', state: 'ok' }, { label: 'Oct 29', state: 'ok' }, { label: 'Oct 28', state: 'degraded' }, { label: 'Oct 27', state: 'ok' }, { label: 'Oct 26', state: 'ok' }, { label: 'Oct 25', state: 'ok' }, { label: 'Oct 24', state: 'ok' }, { label: 'Oct 23', state: 'ok' }, { label: 'Oct 22', state: 'ok' }, { label: 'Oct 21', state: 'ok' },
					{ label: 'Oct 20', state: 'ok' }, { label: 'Oct 19', state: 'ok' }, { label: 'Oct 18', state: 'ok' }, { label: 'Oct 17', state: 'ok' }, { label: 'Oct 16', state: 'ok' }, { label: 'Oct 15', state: 'ok' }, { label: 'Oct 14', state: 'ok' }, { label: 'Oct 13', state: 'ok' }, { label: 'Oct 12', state: 'ok' }, { label: 'Oct 11', state: 'ok' }, { label: 'Oct 10', state: 'ok' }, { label: 'Oct 9', state: 'ok' }, { label: 'Oct 8', state: 'ok' },
				]}
			/>
			<Text size="sm" tone="muted">96.3% uptime</Text>
		</Stack>
	</Grid>
</Stack>

Compact

Auth Service

99.9%

Day 14: operational
Day 13: operational
Day 12: operational
Day 11: degraded
Day 10: operational
Day 9: operational
Day 8: operational
Day 7: operational
Day 6: operational
Day 5: operational
Day 4: operational
Day 3: operational
Day 2: operational
Day 1: operational

Search Index

99.5%

Day 14: operational
Day 13: operational
Day 12: operational
Day 11: operational
Day 10: operational
Day 9: operational
Day 8: operational
Day 7: down
Day 6: operational
Day 5: operational
Day 4: degraded
Day 3: operational
Day 2: operational
Day 1: operational

Queue Worker

100%

Day 14: operational
Day 13: operational
Day 12: operational
Day 11: operational
Day 10: operational
Day 9: operational
Day 8: operational
Day 7: operational
Day 6: operational
Day 5: operational
Day 4: operational
Day 3: operational
Day 2: operational
Day 1: operational

Cache Layer

99.8%

Day 14: operational
Day 13: degraded
Day 12: operational
Day 11: operational
Day 10: operational
Day 9: operational
Day 8: operational
Day 7: operational
Day 6: operational
Day 5: operational
Day 4: operational
Day 3: operational
Day 2: operational
Day 1: operational

Compact.svelte

<script lang="ts">
	import UptimeStrip from '@tcpsystems/ui/foundation/UptimeStrip';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Grid from '@tcpsystems/ui/foundation/Grid';
	import Text from '@tcpsystems/ui/foundation/Text';
	import Badge from '@tcpsystems/ui/foundation/Badge';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';

	const services: { name: string; uptime: string; days: { label: string; state: 'ok' | 'degraded' | 'down' | 'none' }[] }[] = [
		{ name: 'Auth Service', uptime: '99.9%', days: Array.from({ length: 14 }, (_, i) => ({ label: `Day ${14-i}`, state: i === 3 ? 'degraded' : 'ok' })) },
		{ name: 'Search Index', uptime: '99.5%', days: Array.from({ length: 14 }, (_, i) => ({ label: `Day ${14-i}`, state: i === 7 ? 'down' : i === 10 ? 'degraded' : 'ok' })) },
		{ name: 'Queue Worker', uptime: '100%', days: Array.from({ length: 14 }, (_, i) => ({ label: `Day ${14-i}`, state: 'ok' })) },
		{ name: 'Cache Layer', uptime: '99.8%', days: Array.from({ length: 14 }, (_, i) => ({ label: `Day ${14-i}`, state: i === 1 ? 'degraded' : 'ok' })) }
	];
</script>

<Stack data-gap="lg">
	<Grid min="sm" gap="md">
		{#each services as { name, uptime, days }}
			<Stack data-gap="xs">
				<Cluster>
					<Text size="sm"><strong>{name}</strong></Text>
					<Badge tone="ok">{uptime}</Badge>
				</Cluster>
				<UptimeStrip label={`${name} uptime - last 14 days`} {days} />
			</Stack>
		{/each}
	</Grid>
</Stack>

API

Import

import UptimeStrip from '@tcpsystems/ui/foundation/UptimeStrip';

Prop	Type	Default
`days`	`Day[]`	none
`label`	`string`	none

Hook	Kind
`.tcp-uptime`	Root class
`data-state`	Data attribute