feat(operator): tenant list + 7-tab detail with real lifecycle (O.5)
Operator can now manage tenants end-to-end from the UI:
- pages/tenants/index.vue — list with status/plan/domains/created/
provisioning-state columns, search by slug or name, status chips
with live counts (all/active/pending/suspended), click-through
to detail
- pages/tenants/[slug].vue — 7-tab detail (Overview, Users, Resources,
Billing, Audit, Support, Danger zone)
- 3 tabs hit real backends: Overview (identity + billing fields),
Users (lazy-loaded via new GET /tenants/:slug/users endpoint),
Resources (live provisioning state per integration + Reconcile button)
- 3 tabs render mock fixtures with warn-tone "mock" badges: Billing
(Stripe placeholder), Audit (sample log lines), Support (placeholder
pending the ticket queue work)
- Danger zone: 3 real-backend cards (Suspend / Resume / Soft-delete),
each gated by a ConfirmDialog modal. Verified live — clicked
Suspend on acme, status flipped to 'suspended' in Mongo, then
Resumed back to 'active'
platform-api additions:
- GET /tenants/:slug/users returns users with this tenant in their
tenantIds, sorted by last login. Same authorization rule as the
existing /tenants/:slug — platform admins always pass,
non-admins must be a member of the tenant
- tenants.module imports User schema for the new lookup
New components (apps/operator/components/):
- Tabs.vue — horizontal strip with optional per-tab counts, v-model
- ConfirmDialog.vue — Teleport-to-body modal, Escape/backdrop close,
danger/primary tone for the confirm button
Server proxy infrastructure (apps/operator/server/):
- utils/platform-api.ts — single helper encapsulating
access-token-from-session + bearer-forward + error normalization.
Every operator proxy route is now a one-liner against this helper
- api/tenants/index.get.ts, [slug]/{index.get,index.patch,index.delete,
users.get,suspend.post,resume.post,reconcile.post}.ts
Two real bugs found and fixed during the smoke test:
- Mongoose subdocument `_id` leaks into JSON when iterating
tenant.provisioningStatus. Switched to an explicit
`['authentik', 'stalwart', 'ocis']` whitelist in both v-fors
- Documents created before provisioningErrors was added (like the
acme tenant) don't have the field at all in JSON. Use optional
chaining (`tenant.provisioningErrors?.[k]`) instead of bracket
access. Without it: 'Cannot read properties of undefined (reading
"authentik")' during the Resources tab render
This commit is contained in:
Ronni Baslund
@@ -0,0 +1,258 @@
|
||||
<script setup lang="ts">
|
||||
import type { Tenant, TenantStatus } from '~/types/tenant'
|
||||
|
||||
const { data: tenants, refresh, pending } = await useFetch<Tenant[]>('/api/tenants', {
|
||||
default: () => [],
|
||||
})
|
||||
|
||||
const search = ref('')
|
||||
const statusFilter = ref<'all' | TenantStatus>('all')
|
||||
|
||||
const filtered = computed(() => {
|
||||
const q = search.value.trim().toLowerCase()
|
||||
return (tenants.value ?? []).filter((t) => {
|
||||
if (statusFilter.value !== 'all' && t.status !== statusFilter.value) return false
|
||||
if (!q) return true
|
||||
return t.slug.toLowerCase().includes(q) || t.name.toLowerCase().includes(q)
|
||||
})
|
||||
})
|
||||
|
||||
const counts = computed(() => {
|
||||
const c = { all: 0, active: 0, pending: 0, suspended: 0, deleted: 0 }
|
||||
for (const t of tenants.value ?? []) {
|
||||
c.all++
|
||||
c[t.status]++
|
||||
}
|
||||
return c
|
||||
})
|
||||
|
||||
const STATUS_TONE: Record<TenantStatus, 'ok' | 'warn' | 'bad' | 'neutral'> = {
|
||||
active: 'ok',
|
||||
pending: 'warn',
|
||||
suspended: 'bad',
|
||||
deleted: 'neutral',
|
||||
}
|
||||
|
||||
function navTo(t: Tenant) {
|
||||
return navigateTo(`/tenants/${t.slug}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Customers"
|
||||
title="Tenants"
|
||||
:subtitle="`${counts.all} tenants — ${counts.active} active, ${counts.pending} pending, ${counts.suspended} suspended.`"
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="secondary" :disabled="pending" @click="refresh()">
|
||||
<template #leading><UiIcon name="chevDown" :size="13" /></template>
|
||||
Refresh
|
||||
</UiButton>
|
||||
<UiButton variant="primary">
|
||||
<template #leading><UiIcon name="plus" :size="13" /></template>
|
||||
New tenant
|
||||
</UiButton>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<div class="stage">
|
||||
<div class="filters">
|
||||
<div class="search">
|
||||
<UiIcon name="search" :size="14" stroke="var(--text-mute)" />
|
||||
<input v-model="search" placeholder="Search slug or name…" />
|
||||
</div>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="opt in (['all', 'active', 'pending', 'suspended'] as const)"
|
||||
:key="opt"
|
||||
:class="['chip', { active: statusFilter === opt }]"
|
||||
@click="statusFilter = opt"
|
||||
>
|
||||
{{ opt }}
|
||||
<span class="chip-count">{{ counts[opt] }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card :pad="0">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tenant</th>
|
||||
<th>Status</th>
|
||||
<th>Plan</th>
|
||||
<th>Domains</th>
|
||||
<th>Created</th>
|
||||
<th class="th-right">Provisioning</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="filtered.length === 0" class="empty">
|
||||
<td colspan="6">
|
||||
<div class="empty-inner">
|
||||
<UiIcon name="building" :size="20" stroke="var(--text-mute)" />
|
||||
<span>No tenants match this filter.</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="t in filtered" :key="t._id" class="clickable" @click="navTo(t)">
|
||||
<td>
|
||||
<div class="cell-tenant">
|
||||
<div class="cell-name">{{ t.name }}</div>
|
||||
<Mono dim>{{ t.slug }}</Mono>
|
||||
</div>
|
||||
</td>
|
||||
<td><Badge :tone="STATUS_TONE[t.status]" dot>{{ t.status }}</Badge></td>
|
||||
<td><Badge tone="neutral">{{ t.plan }}</Badge></td>
|
||||
<td>
|
||||
<Mono dim>{{ t.domains.length ? t.domains[0] : '—' }}</Mono>
|
||||
<Mono v-if="t.domains.length > 1" dim>(+{{ t.domains.length - 1 }})</Mono>
|
||||
</td>
|
||||
<td><Mono dim>{{ new Date(t.createdAt).toISOString().slice(0, 10) }}</Mono></td>
|
||||
<td class="td-right">
|
||||
<div class="prov-row">
|
||||
<span
|
||||
v-for="k in (['authentik', 'stalwart', 'ocis'] as const)"
|
||||
:key="k"
|
||||
:class="['prov', `prov-${t.provisioningStatus?.[k] ?? 'pending'}`]"
|
||||
:title="`${k}: ${t.provisioningStatus?.[k] ?? 'pending'}`"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stage {
|
||||
padding: 24px 40px 64px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
flex: 1;
|
||||
max-width: 360px;
|
||||
}
|
||||
.search input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
min-width: 0;
|
||||
}
|
||||
.search input::placeholder { color: var(--text-mute); }
|
||||
|
||||
.chips { display: flex; gap: 4px; }
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 30px;
|
||||
padding: 0 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chip:hover { background: var(--elevated); color: var(--text); }
|
||||
.chip.active {
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
border-color: var(--text);
|
||||
}
|
||||
.chip-count {
|
||||
font-size: 10px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-mute);
|
||||
}
|
||||
th.th-right { text-align: right; }
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
tbody tr.clickable { cursor: pointer; }
|
||||
tbody tr.clickable:hover { background: var(--surface); }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
|
||||
td {
|
||||
padding: 14px 16px;
|
||||
color: var(--text);
|
||||
}
|
||||
td.td-right { text-align: right; }
|
||||
|
||||
.cell-tenant { display: flex; flex-direction: column; gap: 2px; }
|
||||
.cell-name { font-weight: 500; font-size: 13px; }
|
||||
|
||||
.empty td { padding: 48px 16px; text-align: center; }
|
||||
.empty-inner {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text-mute);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.prov-row { display: inline-flex; gap: 4px; justify-content: flex-end; }
|
||||
.prov {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--border);
|
||||
}
|
||||
.prov-ok { background: var(--ok); }
|
||||
.prov-skipped { background: var(--text-mute); }
|
||||
.prov-error { background: var(--bad); }
|
||||
.prov-pending { background: var(--warn); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user