ronnibaslund/dezky
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(flags): real feature-flag system with bulk eval + operator UI

Browse Source 
Real backend for the flags page (was pure mock). Built so it's ready for
the first risky rollout (likely the Stalwart JMAP client or the Stripe
billing engine).

services/platform-api:
- Flag schema (key, description, state, pct, scope.{plans, tenantSlugs,
  partnerSlugs, environments}, embedded history capped at 20)
- FlagsService with CRUD + evaluateAll(tenantSlug) → { key: bool }
  Eval algorithm:
    off  → false; on → true
    targeted → require non-empty scope (empty allowlist means "nobody"),
               then match every non-empty axis
    rollout  → match scope, then sha256(`${tenantId}:${key}`) % 100 < pct
  Hash-based rollout is deterministic: bumping pct only flips the new
  slice. Pure helpers (matchesScope, hasAnyScope, inRolloutBucket) are
  exported for future unit tests.
- FlagsController exposes GET /flags, GET /flags/:key, POST /flags/evaluate
  (JwtAuthGuard); POST/PATCH/DELETE require OperatorGuard. History entries
  capture the actor's email.
- SeedService idempotently creates 10 flag keys mapping to real Dezky
  concerns (jmap_native_v2, gdpr_export_v2, new_billing_engine, etc.).
  $setOnInsert so operator edits survive restarts.

apps/operator:
- 6 proxies: /api/flags index get/post, [key] get/patch/delete, evaluate post
- types/flag.ts with the shape that mirrors the backend
- pages/flags.vue: useFetch real list, row click opens FlagDetail,
  "New flag" opens NewFlagModal, scope summary column shows targeting
  at a glance
- FlagDetail.vue: side panel with segmented state, rollout slider with
  live "~N of M tenants" preview from /api/tenants, plan/tenant/env chip
  pickers, dirty-tracked Save, instant Kill-switch (PATCH state=off+pct=0),
  embedded change history
- NewFlagModal.vue: minimal create form (key + description). Everything
  else is configured in the detail panel afterward.
- CommandPalette: feature-flag rows now come from /api/flags instead of
  the dropped fixture, so newly-created flags are searchable immediately
- data/fixtures.ts: drop FLAGS / FeatureFlag exports (replaced by the
  real backend)

Smoke-tested end-to-end: list renders 10 seed flags, opening gdpr_export_v2
and flipping to rollout 25% then saving persists + adds a history entry,
kill-switch sets state=off in one click, /api/flags/evaluate returns the
correct booleans for the seeded tenant, same tenant gets the same answer
on consecutive evals (determinism), and creating + deleting a flag through
the UI roundtrips correctly.
This commit is contained in:
Ronni Baslund
2026-05-24 19:21:15 +02:00
parent 77a09aaf77
commit 868a305539
22 changed files with 1334 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/operator/components/CommandPalette.vue
+7 -4
View File
@@ -2,7 +2,8 @@
import type { IconName } from './UiIcon.vue'
import type { Tenant } from '~/types/tenant'
import type { Partner } from '~/types/partner'
import { FLAGS, INCIDENT } from '~/data/fixtures'
import type { Flag } from '~/types/flag'
import { INCIDENT } from '~/data/fixtures'
// Each row in the palette. `action` decides what happens on Enter / click.
// We try `to` first (a navigateTo) since most rows are navigation; `run` is
@@ -31,6 +32,7 @@ const inputRef = ref<HTMLInputElement | null>(null)
// palette is client-only).
const { data: tenants, refresh: rT } = useLazyFetch<Tenant[]>('/api/tenants', { default: () => [], server: false })
const { data: partners, refresh: rP } = useLazyFetch<Partner[]>('/api/partners', { default: () => [], server: false })
const { data: flags, refresh: rF } = useLazyFetch<Flag[]>('/api/flags', { default: () => [], server: false })
const NAV: { id: string; label: string; icon: IconName; to: string }[] = [
{ id: 'n-overview', label: 'Overview', icon: 'home', to: '/' },
@@ -72,12 +74,13 @@ function partnerRows(): Row[] {
}
function flagRows(): Row[] {
return FLAGS.slice(0, 6).map((f) => ({
return (flags.value ?? []).slice(0, 8).map((f) => ({
id: `f-${f.key}`,
groupLabel: 'Feature flags',
title: f.key,
subtitle: f.state === 'rollout' ? `rollout · ${f.pct}% · ${f.scope}` : `${f.state} · ${f.scope}`,
subtitle: f.state === 'rollout' ? `rollout · ${f.pct}%` : f.state,
icon: 'plug',
badge: f.state,
to: '/flags',
}))
}
@@ -154,7 +157,7 @@ watch(isOpen, async (v) => {
if (!v) return
query.value = ''
cursor.value = 0
await Promise.all([rT(), rP()])
await Promise.all([rT(), rP(), rF()])
await nextTick()
inputRef.value?.focus()
})
apps/operator/components/FlagDetail.vue
+432
View File
@@ -0,0 +1,432 @@
<script setup lang="ts">
// Right-anchored side panel for editing a single flag. Opens from a row click
// on /flags. Mirrors the NotificationDrawer/IncidentModal dismissal pattern
// (Teleport scrim + Escape + route change) and the segmented-state UI from
// the operator design.
import type { Flag, FlagState } from '~/types/flag'
import type { Tenant } from '~/types/tenant'
const props = defineProps<{ flag: Flag | null; tenants: Tenant[] }>()
const emit = defineEmits<{
close: []
saved: [Flag]
deleted: [string]
}>()
const route = useRoute()
// Local working copy so unsaved edits aren't visible elsewhere. Reset every
// time `flag` changes (opening a different row, or re-opening after save).
const draft = ref({
description: '',
state: 'off' as FlagState,
pct: 0,
plans: [] as string[],
tenantSlugs: [] as string[],
partnerSlugs: [] as string[],
environments: [] as ('prod' | 'staging' | 'dev')[],
note: '',
})
watch(
() => props.flag,
(f) => {
if (!f) return
draft.value = {
description: f.description,
state: f.state,
pct: f.pct,
plans: [...f.scope.plans],
tenantSlugs: [...f.scope.tenantSlugs],
partnerSlugs: [...f.scope.partnerSlugs],
environments: [...f.scope.environments],
note: '',
}
},
{ immediate: true },
)
watch(() => route.path, () => {
if (props.flag) emit('close')
})
onMounted(() => {
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape' && props.flag) emit('close')
}
document.addEventListener('keydown', onKey)
onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
})
const STATES: FlagState[] = ['off', 'targeted', 'rollout', 'on']
const ALL_PLANS = ['mvp', 'pro', 'enterprise']
const ALL_ENVS: ('prod' | 'staging' | 'dev')[] = ['prod', 'staging', 'dev']
const totalTenants = computed(() => props.tenants.length)
const rolloutCount = computed(() => Math.round((totalTenants.value * draft.value.pct) / 100))
const dirty = computed(() => {
if (!props.flag) return false
const f = props.flag
const d = draft.value
return (
d.description !== f.description ||
d.state !== f.state ||
d.pct !== f.pct ||
!arrEq(d.plans, f.scope.plans) ||
!arrEq(d.tenantSlugs, f.scope.tenantSlugs) ||
!arrEq(d.partnerSlugs, f.scope.partnerSlugs) ||
!arrEq(d.environments, f.scope.environments)
)
})
function arrEq(a: string[], b: string[]) {
if (a.length !== b.length) return false
const sa = [...a].sort()
const sb = [...b].sort()
return sa.every((v, i) => v === sb[i])
}
const busy = ref(false)
const error = ref<string | null>(null)
function togglePlan(p: string) {
draft.value.plans = draft.value.plans.includes(p)
? draft.value.plans.filter((x) => x !== p)
: [...draft.value.plans, p]
}
function toggleEnv(e: 'prod' | 'staging' | 'dev') {
draft.value.environments = draft.value.environments.includes(e)
? draft.value.environments.filter((x) => x !== e)
: [...draft.value.environments, e]
}
function toggleTenant(slug: string) {
draft.value.tenantSlugs = draft.value.tenantSlugs.includes(slug)
? draft.value.tenantSlugs.filter((x) => x !== slug)
: [...draft.value.tenantSlugs, slug]
}
async function save() {
if (!props.flag || !dirty.value) return
busy.value = true
error.value = null
try {
const updated = await $fetch<Flag>(`/api/flags/${props.flag.key}`, {
method: 'PATCH',
body: {
description: draft.value.description,
state: draft.value.state,
pct: draft.value.pct,
scope: {
plans: draft.value.plans,
tenantSlugs: draft.value.tenantSlugs,
partnerSlugs: draft.value.partnerSlugs,
environments: draft.value.environments,
},
note: draft.value.note || undefined,
},
})
emit('saved', updated)
} catch (e) {
const err = e as { data?: { data?: { message?: string }; message?: string } }
error.value = err.data?.data?.message || err.data?.message || 'Save failed'
} finally {
busy.value = false
}
}
async function killSwitch() {
if (!props.flag) return
busy.value = true
error.value = null
try {
const updated = await $fetch<Flag>(`/api/flags/${props.flag.key}`, {
method: 'PATCH',
body: { state: 'off', pct: 0, note: 'kill-switch' },
})
emit('saved', updated)
} catch (e) {
const err = e as { data?: { message?: string } }
error.value = err.data?.message || 'Kill-switch failed'
} finally {
busy.value = false
}
}
function fmtDate(s: string) {
return new Date(s).toLocaleString('da-DK', { dateStyle: 'short', timeStyle: 'short' })
}
</script>
<template>
<Teleport to="body">
<Transition name="drawer-fade">
<div v-if="flag" class="backdrop" @click="emit('close')" />
</Transition>
<Transition name="drawer-slide">
<aside v-if="flag" class="drawer" role="dialog" :aria-label="flag.key" @click.stop>
<header>
<div>
<Eyebrow>Feature flag</Eyebrow>
<h2><Mono>{{ flag.key }}</Mono></h2>
</div>
<button class="x" type="button" aria-label="Close" @click="emit('close')">
<UiIcon name="x" :size="13" />
</button>
</header>
<div class="body">
<section>
<label class="label">Description</label>
<input v-model="draft.description" type="text" />
</section>
<section>
<label class="label">State</label>
<div class="seg four">
<button
v-for="s in STATES"
:key="s"
:class="{ on: draft.state === s }"
type="button"
@click="draft.state = s"
>{{ s }}</button>
</div>
</section>
<section v-if="draft.state === 'rollout'">
<label class="label">Rollout percentage</label>
<div class="rollout-row">
<input v-model.number="draft.pct" type="range" min="0" max="100" />
<Mono class="pct">{{ draft.pct }}%</Mono>
</div>
<Mono dim>~{{ rolloutCount }} of {{ totalTenants }} tenants will see this flag enabled</Mono>
</section>
<section v-if="draft.state === 'targeted' || draft.state === 'rollout'">
<label class="label">Plans</label>
<div class="chips">
<button
v-for="p in ALL_PLANS"
:key="p"
:class="['chip', { on: draft.plans.includes(p) }]"
type="button"
@click="togglePlan(p)"
>{{ p }}</button>
</div>
<Mono dim>empty = any plan</Mono>
</section>
<section v-if="draft.state === 'targeted' || draft.state === 'rollout'">
<label class="label">Tenant allowlist</label>
<div v-if="tenants.length" class="chips wrap">
<button
v-for="t in tenants"
:key="t.slug"
:class="['chip', { on: draft.tenantSlugs.includes(t.slug) }]"
type="button"
:title="t.name"
@click="toggleTenant(t.slug)"
>{{ t.slug }}</button>
</div>
<Mono dim>empty = any tenant</Mono>
</section>
<section v-if="draft.state === 'targeted' || draft.state === 'rollout'">
<label class="label">Environments</label>
<div class="chips">
<button
v-for="e in ALL_ENVS"
:key="e"
:class="['chip', { on: draft.environments.includes(e) }]"
type="button"
@click="toggleEnv(e)"
>{{ e }}</button>
</div>
<Mono dim>empty = any environment</Mono>
</section>
<section v-if="dirty">
<label class="label">Change note (optional)</label>
<input v-model="draft.note" type="text" placeholder="why are you changing this?" />
</section>
<section>
<label class="label">Change history</label>
<div class="history">
<div v-for="(h, i) in [...flag.history].reverse()" :key="i" class="hist-row">
<Mono dim>{{ fmtDate(h.at) }}</Mono>
<Mono>{{ h.byEmail || 'system' }}</Mono>
<span>{{ h.action }}</span>
<Mono v-if="h.note" dim class="hist-note">— {{ h.note }}</Mono>
</div>
<Mono v-if="!flag.history.length" dim>no history</Mono>
</div>
</section>
<p v-if="error" class="err">{{ error }}</p>
</div>
<footer>
<UiButton variant="danger" :disabled="busy || flag.state === 'off'" @click="killSwitch">
<template #leading><UiIcon name="x" :size="13" /></template>
Kill-switch
</UiButton>
<div class="spacer" />
<UiButton variant="ghost" @click="emit('close')">Cancel</UiButton>
<UiButton variant="primary" :disabled="!dirty || busy" @click="save">
{{ busy ? 'Saving…' : 'Save changes' }}
</UiButton>
</footer>
</aside>
</Transition>
</Teleport>
</template>
<style scoped>
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 190; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(560px, 100vw);
background: var(--elevated);
border-left: 1px solid var(--border);
box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35);
z-index: 200;
display: flex; flex-direction: column;
overflow: hidden;
}
header {
padding: 18px 22px 14px 22px;
border-bottom: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: flex-start;
}
h2 {
margin: 4px 0 0 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
}
.x {
width: 28px; height: 28px;
border: 0; border-radius: 6px; background: transparent;
color: var(--text-mute); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.x:hover { background: var(--surface); color: var(--text); }
.body {
flex: 1; overflow-y: auto;
padding: 20px 22px;
display: flex; flex-direction: column; gap: 18px;
}
section { display: flex; flex-direction: column; gap: 8px; }
.label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-mute);
font-weight: 500;
}
input[type='text'] {
height: 34px;
padding: 0 12px;
background: var(--input-bg);
border: 1px solid var(--border);
color: var(--text);
border-radius: 6px;
font-family: inherit;
font-size: 13px;
outline: 0;
}
input[type='text']:focus { border-color: var(--border-hi); }
.seg {
display: grid;
gap: 4px;
padding: 3px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 7px;
width: fit-content;
}
.seg.four { grid-template-columns: repeat(4, minmax(72px, 1fr)); }
.seg button {
appearance: none;
border: 0;
background: transparent;
color: var(--text-dim);
font-family: inherit;
font-size: 12px;
font-weight: 500;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--text); color: var(--bg); }
.rollout-row { display: flex; align-items: center; gap: 14px; }
.rollout-row input { flex: 1; accent-color: var(--accent); }
.pct { font-size: 14px; font-weight: 600; min-width: 50px; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.wrap { max-height: 140px; overflow-y: auto; padding: 4px 0; }
.chip {
appearance: none;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--border-hi); }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.history {
display: flex; flex-direction: column; gap: 6px;
border-left: 2px solid var(--border);
padding-left: 12px;
max-height: 200px;
overflow-y: auto;
}
.hist-row {
display: grid;
grid-template-columns: 110px 160px 1fr;
gap: 10px;
align-items: baseline;
font-size: 12px;
}
.hist-note { grid-column: 1 / -1; padding-left: 0; }
.err {
margin: 0;
padding: 10px 12px;
background: rgba(240, 88, 88, 0.08);
border: 1px solid rgba(240, 88, 88, 0.24);
color: var(--bad);
border-radius: 6px;
font-size: 12px;
}
footer {
border-top: 1px solid var(--border);
background: var(--surface);
padding: 12px 18px;
display: flex; gap: 8px; align-items: center;
}
.spacer { flex: 1; }
.drawer-fade-enter-active, .drawer-fade-leave-active { transition: opacity 0.18s ease; }
.drawer-fade-enter-from, .drawer-fade-leave-to { opacity: 0; }
.drawer-slide-enter-active, .drawer-slide-leave-active { transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.drawer-slide-enter-from, .drawer-slide-leave-to { transform: translateX(100%); }
</style>
apps/operator/components/NewFlagModal.vue
+176
View File
@@ -0,0 +1,176 @@
<script setup lang="ts">
// "New flag" modal — opens from the page header. Only collects the absolute
// minimum (key + optional description); state/rollout/targeting are tuned in
// the FlagDetail side panel after creation, which is the same surface used
// for every subsequent edit.
import type { Flag } from '~/types/flag'
const props = defineProps<{ open: boolean }>()
const emit = defineEmits<{ close: []; created: [Flag] }>()
const key = ref('')
const description = ref('')
const error = ref<string | null>(null)
const busy = ref(false)
watch(
() => props.open,
(v) => {
if (v) {
key.value = ''
description.value = ''
error.value = null
}
},
)
onMounted(() => {
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape' && props.open) emit('close')
}
document.addEventListener('keydown', onKey)
onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
})
const valid = computed(() => /^[a-z][a-z0-9_]{1,62}[a-z0-9]$/.test(key.value.trim()))
async function submit() {
if (!valid.value) return
busy.value = true
error.value = null
try {
const created = await $fetch<Flag>('/api/flags', {
method: 'POST',
body: { key: key.value.trim(), description: description.value.trim() },
})
emit('created', created)
} catch (e) {
const err = e as { data?: { data?: { message?: string }; message?: string } }
error.value = err.data?.data?.message || err.data?.message || 'Create failed'
} finally {
busy.value = false
}
}
</script>
<template>
<Teleport to="body">
<div v-if="open" class="backdrop" @click="emit('close')">
<div class="modal" role="dialog" aria-label="New feature flag" @click.stop>
<header>
<div>
<Eyebrow>Engineering</Eyebrow>
<h2>New feature flag</h2>
</div>
<button class="x" type="button" aria-label="Close" @click="emit('close')">
<UiIcon name="x" :size="12" />
</button>
</header>
<div class="body">
<section>
<label class="label">Key</label>
<input v-model="key" type="text" placeholder="e.g. new_inbox_view" />
<Mono dim>lowercase snake_case · starts with a letter · 3–64 chars</Mono>
</section>
<section>
<label class="label">Description (optional)</label>
<input v-model="description" type="text" placeholder="what does this flag gate?" />
</section>
<p v-if="error" class="err">{{ error }}</p>
</div>
<footer>
<UiButton variant="ghost" @click="emit('close')">Cancel</UiButton>
<UiButton variant="primary" :disabled="!valid || busy" @click="submit">
{{ busy ? 'Creating…' : 'Create flag' }}
</UiButton>
</footer>
</div>
</div>
</Teleport>
</template>
<style scoped>
.backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.55);
display: flex; align-items: center; justify-content: center;
padding: 24px;
z-index: 180;
}
.modal {
width: 100%; max-width: 460px;
background: var(--elevated);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
display: flex; flex-direction: column;
overflow: hidden;
}
header {
padding: 16px 20px;
display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 1px solid var(--border);
}
h2 {
margin: 4px 0 0 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
}
.x {
width: 26px; height: 26px;
border: 0; border-radius: 6px; background: transparent;
color: var(--text-mute); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.x:hover { background: var(--surface); color: var(--text); }
.body {
padding: 16px 20px;
display: flex; flex-direction: column; gap: 14px;
}
section { display: flex; flex-direction: column; gap: 6px; }
.label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-mute);
font-weight: 500;
}
input {
height: 34px;
padding: 0 12px;
background: var(--input-bg);
border: 1px solid var(--border);
color: var(--text);
border-radius: 6px;
font-family: inherit;
font-size: 13px;
outline: 0;
}
input:focus { border-color: var(--border-hi); }
.err {
margin: 0;
padding: 10px 12px;
background: rgba(240, 88, 88, 0.08);
border: 1px solid rgba(240, 88, 88, 0.24);
color: var(--bad);
border-radius: 6px;
font-size: 12px;
}
footer {
padding: 12px 20px;
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid var(--border);
background: var(--surface);
}
</style>
apps/operator/data/fixtures.ts
+3 -21
View File
@@ -59,27 +59,9 @@ export const INCIDENT: ActiveIncident = {
],
}
export type FlagState = 'on' | 'off' | 'rollout' | 'targeted'
export interface FeatureFlag {
key: string
state: FlagState
pct: number
scope: string
modified: string
}
export const FLAGS: FeatureFlag[] = [
{ key: 'jmap_native_v2', state: 'rollout', pct: 50, scope: 'Business+ · 38 tenants', modified: 'Anne · 2 d ago' },
{ key: 'oci_versioning', state: 'on', pct: 100, scope: 'all tenants', modified: 'Anne · 14 d ago' },
{ key: 'jitsi_recording_e2ee', state: 'targeted', pct: 0, scope: 'allowlist · 3 tenants', modified: 'Mikkel · 5 d ago' },
{ key: 'new_billing_engine', state: 'rollout', pct: 25, scope: '12 tenants', modified: 'Anne · today' },
{ key: 'gdpr_export_v2', state: 'off', pct: 0, scope: 'kill-switch', modified: 'Sofie · 21 d ago' },
{ key: 'whitelabel_cssprops', state: 'on', pct: 100, scope: 'partners', modified: 'Anne · 1 mo ago' },
{ key: 'audit_log_streaming', state: 'on', pct: 100, scope: 'Enterprise', modified: 'Mikkel · 8 d ago' },
{ key: 'zulip_topic_threading', state: 'rollout', pct: 75, scope: '63 tenants', modified: 'Sofie · 3 d ago' },
{ key: 'tos_2026_acceptance', state: 'on', pct: 100, scope: 'all tenants', modified: 'Anne · 6 d ago' },
{ key: 'beta_ai_summaries', state: 'off', pct: 0, scope: 'killed', modified: 'Anne · 1 mo ago' },
]
// Feature flags moved to a real backend at /api/flags + see types/flag.ts.
// The seed in services/platform-api/src/seed/seed.service.ts creates the
// same 10 flags this fixture used to contain.
export type AuditTone = 'info' | 'warn' | 'bad'
export interface AuditEntry {
apps/operator/pages/flags.vue
+94 -15
View File
@@ -1,18 +1,63 @@
<script setup lang="ts">
import { FLAGS, type FeatureFlag } from '~/data/fixtures'
import type { Flag, FlagState } from '~/types/flag'
import type { Tenant } from '~/types/tenant'
function stateTone(f: FeatureFlag): 'ok' | 'neutral' | 'warn' | 'info' {
switch (f.state) {
const { data: flags, refresh } = await useFetch<Flag[]>('/api/flags', {
default: () => [],
})
// Tenants are needed by FlagDetail for the allowlist picker + the rollout
// preview ("~N of M tenants will see this"). Lazy because we only need them
// when the side panel opens.
const { data: tenants } = useLazyFetch<Tenant[]>('/api/tenants', {
default: () => [],
server: false,
})
const open = ref<Flag | null>(null)
const showNew = ref(false)
function stateTone(state: FlagState): 'ok' | 'neutral' | 'warn' | 'info' {
switch (state) {
case 'on': return 'ok'
case 'off': return 'neutral'
case 'rollout': return 'warn'
case 'targeted': return 'info'
}
}
function stateLabel(f: FeatureFlag) {
function stateLabel(f: Flag) {
if (f.state === 'rollout') return `${f.pct}% rollout`
return f.state
}
async function onSaved(updated: Flag) {
// Replace the row in-place so the list reflects the new state without a
// full refetch — but also refresh in the background to pick up any
// server-side derived fields (history entries, updatedAt).
flags.value = (flags.value ?? []).map((f) => (f.key === updated.key ? updated : f))
open.value = updated
refresh()
}
async function onCreated(created: Flag) {
flags.value = [...(flags.value ?? []), created].sort((a, b) => a.key.localeCompare(b.key))
showNew.value = false
open.value = created
}
function fmtDate(s: string) {
return new Date(s).toLocaleDateString('da-DK', { day: '2-digit', month: 'short' })
}
function describeScope(f: Flag): string {
if (f.state === 'on') return 'all'
if (f.state === 'off') return '—'
const parts: string[] = []
if (f.scope.plans.length) parts.push(`plan: ${f.scope.plans.join(', ')}`)
if (f.scope.tenantSlugs.length) parts.push(`${f.scope.tenantSlugs.length} tenant${f.scope.tenantSlugs.length === 1 ? '' : 's'}`)
if (f.scope.partnerSlugs.length) parts.push(`${f.scope.partnerSlugs.length} partner${f.scope.partnerSlugs.length === 1 ? '' : 's'}`)
if (f.scope.environments.length) parts.push(`env: ${f.scope.environments.join('/')}`)
return parts.length ? parts.join(' · ') : 'no targeting'
}
</script>
<template>
@@ -20,10 +65,10 @@ function stateLabel(f: FeatureFlag) {
<PageHeader
eyebrow="Engineering"
title="Feature flags"
subtitle="Toggle, target, and roll out platform features. Every change is logged."
:subtitle="`${flags.length} flags. Toggle, target, and roll out features without redeploying.`"
>
<template #actions>
<UiButton variant="primary" disabled>
<UiButton variant="primary" @click="showNew = true">
<template #leading><UiIcon name="plus" :size="13" /></template>
New flag
</UiButton>
@@ -40,19 +85,23 @@ function stateLabel(f: FeatureFlag) {
<th>Rollout</th>
<th>Scope</th>
<th>Last modified</th>
<th class="r"></th>
</tr>
</thead>
<tbody>
<tr v-for="f in FLAGS" :key="f.key">
<tr v-for="f in flags" :key="f.key" @click="open = f">
<td>
<div class="key">
<span class="key-tile" :data-state="f.state">
<UiIcon name="plug" :size="11" />
</span>
<Mono class="key-name">{{ f.key }}</Mono>
<div>
<Mono class="key-name">{{ f.key }}</Mono>
<div v-if="f.description" class="key-desc">{{ f.description }}</div>
</div>
</div>
</td>
<td><Badge :tone="stateTone(f)" dot>{{ stateLabel(f) }}</Badge></td>
<td><Badge :tone="stateTone(f.state)" dot>{{ stateLabel(f) }}</Badge></td>
<td>
<div v-if="f.state === 'rollout'" class="rollout">
<div class="bar"><div class="fill" :style="{ width: `${f.pct}%` }" /></div>
@@ -60,15 +109,39 @@ function stateLabel(f: FeatureFlag) {
</div>
<Mono v-else dim>—</Mono>
</td>
<td><Mono dim>{{ f.scope }}</Mono></td>
<td><Mono dim>{{ f.modified }}</Mono></td>
<td>
<Mono dim>{{ describeScope(f) }}</Mono>
</td>
<td>
<Mono dim>{{ fmtDate(f.updatedAt) }}</Mono>
</td>
<td class="r">
<UiIcon name="chevRight" :size="12" />
</td>
</tr>
<tr v-if="!flags.length">
<td colspan="6" class="empty">
<Mono dim>// no flags yet</Mono>
</td>
</tr>
</tbody>
</table>
</Card>
<Mono dim class="note">// mock fixtures — wire to a feature-flag service (Unleash / OpenFeature) in a follow-up</Mono>
<Mono dim class="note">
// backed by /api/flags · seed contains 10 flags mapping to real Dezky
concerns. Consumers (portal, platform-api) call POST /api/flags/evaluate
with a tenant slug to get current boolean values.
</Mono>
</div>
<FlagDetail
:flag="open"
:tenants="tenants ?? []"
@close="open = null"
@saved="onSaved"
/>
<NewFlagModal :open="showNew" @close="showNew = false" @created="onCreated" />
</div>
</template>
@@ -87,26 +160,32 @@ th {
font-weight: 500;
border-bottom: 1px solid var(--border);
}
td { padding: 12px 20px; font-size: 12px; border-top: 1px solid var(--border); vertical-align: middle; }
th.r, td.r { text-align: right; }
td { padding: 12px 20px; font-size: 12px; border-top: 1px solid var(--border); vertical-align: middle; color: var(--text-mute); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface); }
.key { display: flex; align-items: center; gap: 10px; }
.key-tile {
width: 22px; height: 22px;
width: 24px; height: 24px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text-mute);
}
.key-tile[data-state='on'] { background: rgba(31, 138, 91, 0.12); color: var(--ok); }
.key-tile[data-state='off'] { background: rgba(128, 128, 128, 0.12); color: var(--text-mute); }
.key-tile[data-state='rollout'] { background: rgba(232, 154, 31, 0.12); color: var(--warn); }
.key-tile[data-state='targeted']{ background: rgba(42, 111, 219, 0.1); color: var(--info); }
.key-name { font-weight: 600; }
.key-name { font-weight: 600; color: var(--text); display: block; }
.key-desc { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.rollout { display: inline-flex; align-items: center; gap: 10px; width: 160px; }
.bar { flex: 1; height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; }
.fill { height: 100%; background: var(--warn); }
.empty { padding: 32px 20px; text-align: center; }
.note { display: block; padding: 4px 4px 0 4px; }
</style>
apps/operator/server/api/flags/[key]/index.delete.ts
+7
View File
@@ -0,0 +1,7 @@
import { platformApi } from '~~/server/utils/platform-api'
export default defineEventHandler(async (event) => {
const key = getRouterParam(event, 'key')
await platformApi(event, `/flags/${key}`, { method: 'DELETE' })
return { ok: true }
})
apps/operator/server/api/flags/[key]/index.get.ts
+6
View File
@@ -0,0 +1,6 @@
import { platformApi } from '~~/server/utils/platform-api'
export default defineEventHandler((event) => {
const key = getRouterParam(event, 'key')
return platformApi(event, `/flags/${key}`)
})
apps/operator/server/api/flags/[key]/index.patch.ts
+7
View File
@@ -0,0 +1,7 @@
import { platformApi } from '~~/server/utils/platform-api'
export default defineEventHandler(async (event) => {
const key = getRouterParam(event, 'key')
const body = await readBody(event)
return platformApi(event, `/flags/${key}`, { method: 'PATCH', body })
})
apps/operator/server/api/flags/evaluate.post.ts
+6
View File
@@ -0,0 +1,6 @@
import { platformApi } from '~~/server/utils/platform-api'
export default defineEventHandler(async (event) => {
const body = await readBody(event)
return platformApi(event, '/flags/evaluate', { method: 'POST', body })
})
apps/operator/server/api/flags/index.get.ts
+3
View File
@@ -0,0 +1,3 @@
import { platformApi } from '~~/server/utils/platform-api'
export default defineEventHandler((event) => platformApi(event, '/flags'))
apps/operator/server/api/flags/index.post.ts
+6
View File
@@ -0,0 +1,6 @@
import { platformApi } from '~~/server/utils/platform-api'
export default defineEventHandler(async (event) => {
const body = await readBody(event)
return platformApi(event, '/flags', { method: 'POST', body })
})
apps/operator/types/flag.ts
+29
View File
@@ -0,0 +1,29 @@
// Shape returned by /api/flags — matches the Flag schema on platform-api.
export type FlagState = 'off' | 'targeted' | 'rollout' | 'on'
export interface FlagHistoryEntry {
at: string
byEmail?: string
action: string
note?: string
}
export interface FlagScope {
plans: string[]
tenantSlugs: string[]
partnerSlugs: string[]
environments: ('prod' | 'staging' | 'dev')[]
}
export interface Flag {
_id: string
key: string
description: string
state: FlagState
pct: number
scope: FlagScope
history: FlagHistoryEntry[]
createdAt: string
updatedAt: string
}