Timeline
What happened, in order. A dot for every event on one track; the dot's colour is the signal.
- v1.4.1 is live2 min ago
Production · 3 commits from main
- Tests passed4 min ago
214 tests in 38 s
- Build finished5 min ago
- Deploy started by ada6 min ago
vue
<script setup lang="ts">
const release = [
{ title: 'v1.4.1 is live', time: '2 min ago', text: 'Production · 3 commits from main', tone: 'accent' },
{ title: 'Tests passed', time: '4 min ago', text: '214 tests in 38 s' },
{ title: 'Build finished', time: '5 min ago' },
{ title: 'Deploy started by ada', time: '6 min ago' },
]
</script>
<template>
<OTimeline :items="release" />
</template>Only title is required. The order is yours: newest first for a log, oldest first for a plan.
Tone
Most events are quiet. accent lights the one that matters now; danger marks one that went wrong. One or two per timeline, or the colour stops meaning anything.
The slot adds something under an event — a button, a badge. It gets the item, so you can show it for some events only.
- Rolled back to v1.3.914:32
Error rate is back under 0.5%.
- Error rate over 5%14:20
GET /v1/search times out.
- v1.4.0 deployed14:05
vue
<OTimeline :items="incident">
<template #default="{ item }">
<OButton v-if="item.retry" size="sm" @click="openTrace(item)">Open the trace</OButton>
</template>
</OTimeline>Pending
pending is an event that has not happened yet: its dot is empty, like a step not taken in Pips.
- Freeze the release branchMon
- Run the migration on stagingTue
- Migrate productionThu
- Remove the old columnsnext week
vue
<script setup lang="ts">
const plan = [
{ title: 'Freeze the release branch', time: 'Mon' },
{ title: 'Run the migration on staging', time: 'Tue', tone: 'accent' },
{ title: 'Migrate production', time: 'Thu', pending: true },
{ title: 'Remove the old columns', time: 'next week', pending: true },
]
</script>Timeline or pips
- Timeline — events with names and times, any number of them.
- Pips — a handful of equal steps with no text of their own.
Props and slots
| Prop | Type | Default | Description |
|---|---|---|---|
items | { title: string, time?: string, text?: string, tone?: 'accent' | 'danger', pending?: boolean }[] | required |
| Slot | Description |
|---|---|
| default | More under an event; gets { item } |
The timeline is a list (<ol>), so screen readers announce how many events there are.