bvandeusen
4e83b4225a
The muted-text token was redefined identically in 12 component <style scoped> blocks. Consolidate to one global utility in styles/app.css; remove the 12 copies. Keeps the explicit on-surface-variant (vellum) token, NOT Vuetify's opacity-based text-medium-emphasis (per the muted-text-token rule). Behavior- preserving: every class=fc-muted usage now resolves to the single source. §8b exhaustiveness caught (and I fixed) my own sed clobbering the new app.css rule — now exactly one .fc-muted definition exists, zero component-local. Catalog updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
<template>
|
|
<v-table density="compact" class="fc-backup-table">
|
|
<thead>
|
|
<tr>
|
|
<th>When</th>
|
|
<th>Status</th>
|
|
<th class="text-right">Duration</th>
|
|
<th class="text-right">Size</th>
|
|
<th>Tag</th>
|
|
<th class="text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="r in runs" :key="r.id">
|
|
<td class="fc-tabular" :title="r.started_at">
|
|
{{ formatRelative(r.started_at) }}
|
|
</td>
|
|
<td>
|
|
<v-icon size="small" :color="statusColor(r.status)">
|
|
{{ statusIcon(r.status) }}
|
|
</v-icon>
|
|
{{ r.status }}
|
|
</td>
|
|
<td class="text-right fc-tabular">{{ formatDuration(r) }}</td>
|
|
<td class="text-right fc-tabular">{{ formatBytes(r.size_bytes) }}</td>
|
|
<td>
|
|
<v-chip
|
|
v-if="r.tag" size="x-small" color="accent" variant="tonal"
|
|
>{{ r.tag }}</v-chip>
|
|
<span v-else class="fc-muted">—</span>
|
|
</td>
|
|
<td class="text-right">
|
|
<KebabMenu :label="`Actions for backup ${r.id}`">
|
|
<v-list-item
|
|
:title="r.tag ? 'Untag' : 'Tag…'"
|
|
@click="$emit('tag', r)"
|
|
/>
|
|
<v-list-item
|
|
title="Restore…" :disabled="r.status !== 'ok'"
|
|
@click="$emit('restore', r)"
|
|
/>
|
|
<v-list-item
|
|
title="Delete…"
|
|
@click="$emit('delete', r)"
|
|
/>
|
|
</KebabMenu>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="!runs.length">
|
|
<td colspan="6" class="text-center fc-muted py-4">No backups yet.</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { formatRelative as fmtRelative } from '../../utils/date.js'
|
|
import KebabMenu from '../common/KebabMenu.vue'
|
|
|
|
defineProps({ runs: { type: Array, default: () => [] } })
|
|
defineEmits(['restore', 'delete', 'tag'])
|
|
|
|
function statusIcon(s) {
|
|
return {
|
|
ok: 'mdi-check-circle', error: 'mdi-close-circle',
|
|
running: 'mdi-timer-sand', restoring: 'mdi-restore-clock',
|
|
restored: 'mdi-restore', pending: 'mdi-clock-outline',
|
|
}[s] || 'mdi-help-circle'
|
|
}
|
|
function statusColor(s) {
|
|
return {
|
|
ok: 'success', error: 'error',
|
|
running: 'accent', restoring: 'info',
|
|
restored: 'info', pending: 'on-surface-variant',
|
|
}[s] || 'on-surface-variant'
|
|
}
|
|
function formatDuration(r) {
|
|
if (r.duration_seconds == null) return '—'
|
|
const s = r.duration_seconds
|
|
if (s < 60) return `${s}s`
|
|
if (s < 3600) return `${Math.floor(s / 60)}m ${s % 60}s`
|
|
const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60)
|
|
return `${h}h ${m}m`
|
|
}
|
|
function formatBytes(b) {
|
|
if (b == null) return '—'
|
|
const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
|
|
let i = 0; let v = b
|
|
while (v >= 1024 && i < units.length - 1) { v /= 1024; i++ }
|
|
return `${v.toFixed(i === 0 ? 0 : 1)} ${units[i]}`
|
|
}
|
|
function formatRelative(iso) {
|
|
return fmtRelative(iso, { nullText: '—' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-backup-table { background: transparent; }
|
|
.fc-tabular { font-variant-numeric: tabular-nums; }
|
|
</style>
|