feat(admin): DB-backed integration toggles + sticky cols + dark contrast
Builds on the env-var INTEGRATIONS_DISABLED shipped with the nav-design overhaul. Adds a DB-backed admin UI so operators can flip integrations without editing .env and restarting the container, plus the remaining visual cleanup items from the design backlog. Integration toggles - Migration 081 — integration_settings table (key PK, disabled flag, reason, disabled_by audit, disabled_at). Seeded with all 13 known integrations as enabled. - GET / PATCH /api/admin/integrations — gated by requirePermission (admin, access). PATCH clears the in-process integration-health cache so toggles take effect within seconds. - /admin/integrations admin page with a Switch per integration, optional reason input, audit-info subtitle (disabled by, when, why), live status light from /api/dashboard/integration-health. - integration-health service merges env-var disable list with DB rows; degrades gracefully if migration unapplied / DB unreachable. - Wired into the Admin nav dropdown (eight items now). - CLAUDE.md describes both env + DB sources. Sticky first column on tables - Table primitive accepts stickyFirstColumn?: boolean. When true, TH and TD :first-child stay pinned during horizontal scroll, with background inheritance preserving hover and selected row tints. - DataTable exposes the prop too — on by default for paginated tables. - /addigy-devices opts in. Dark-mode contrast - --border lifted from 10% to 14% in .dark; --input from 15% to 18%; --sidebar-border to 14%. - StatusLight outline ring lifted from /10 to /15 (light) and /20 (dark). - DetailModal empty-cell em-dash lifted from /40 to /70 so missing values are legible on dark surfaces. DESIGN.md - Closed sticky-first-column, dark-mode contrast, and palette-audit items (palette deprioritized — most uses are semantic). - Skeleton helpers documented as preferred for new code; existing ad-hoc patterns left in place. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
ab78e7bd4f
commit
e1427b62d7
13 changed files with 561 additions and 34 deletions
|
|
@ -110,7 +110,7 @@ export default function AddigyDevicesPage() {
|
|||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<Table stickyFirstColumn>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Device</TableHead>
|
||||
|
|
|
|||
318
app/admin/integrations/page.tsx
Normal file
318
app/admin/integrations/page.tsx
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
/* /admin/integrations — operator-managed integration toggles.
|
||||
*
|
||||
* Joins `integration_settings` (DB-backed disabled state, audit info)
|
||||
* with `/api/dashboard/integration-health` (live status + categories +
|
||||
* display names) so the admin sees both halves on one page. Toggling a
|
||||
* row hits PATCH /api/admin/integrations and forces a health refresh. */
|
||||
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { PageHeader } from '@/components/navigation/page-header';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { StatusLight, type StatusLightState } from '@/components/ui/status-light';
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import { EmptyState } from '@/components/ui/empty-state';
|
||||
import { RefreshCw, AlertTriangle, Power } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface IntegrationSetting {
|
||||
key: string;
|
||||
disabled: boolean;
|
||||
reason: string | null;
|
||||
disabledBy: string | null;
|
||||
disabledAt: string | null;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface IntegrationHealthItem {
|
||||
key: string;
|
||||
name: string;
|
||||
category: string;
|
||||
status: 'ok' | 'auth_failed' | 'unreachable' | 'not_configured' | 'unknown' | 'disabled';
|
||||
configured: boolean;
|
||||
latencyMs?: number;
|
||||
error?: string | null;
|
||||
tokenExpiry?: { daysRemaining: number } | null;
|
||||
}
|
||||
|
||||
interface MergedRow {
|
||||
key: string;
|
||||
name: string;
|
||||
category: string;
|
||||
liveStatus: IntegrationHealthItem['status'];
|
||||
setting: IntegrationSetting;
|
||||
}
|
||||
|
||||
function liveStatusLight(s: IntegrationHealthItem['status']): StatusLightState {
|
||||
if (s === 'ok') return 'ok';
|
||||
if (s === 'auth_failed' || s === 'unreachable') return 'error';
|
||||
if (s === 'disabled') return 'idle';
|
||||
return 'idle';
|
||||
}
|
||||
|
||||
function fmtDate(iso: string | null): string {
|
||||
if (!iso) return '—';
|
||||
const ms = Date.now() - new Date(iso).getTime();
|
||||
if (ms < 60_000) return 'just now';
|
||||
const min = Math.floor(ms / 60_000);
|
||||
if (min < 60) return `${min} min ago`;
|
||||
const hr = Math.floor(min / 60);
|
||||
if (hr < 48) return `${hr} h ago`;
|
||||
return `${Math.floor(hr / 24)} d ago`;
|
||||
}
|
||||
|
||||
const ENV_OVERRIDE_NOTE =
|
||||
'INTEGRATIONS_DISABLED env var is also active — env entries always take precedence and cannot be re-enabled here.';
|
||||
|
||||
export default function IntegrationTogglesPage() {
|
||||
const [rows, setRows] = useState<MergedRow[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pending, setPending] = useState<string | null>(null);
|
||||
const [reasons, setReasons] = useState<Record<string, string>>({});
|
||||
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [sRes, hRes] = await Promise.all([
|
||||
fetch('/api/admin/integrations', { cache: 'no-store' }),
|
||||
fetch('/api/dashboard/integration-health', { cache: 'no-store' }),
|
||||
]);
|
||||
if (!sRes.ok) throw new Error('Failed to load integration settings');
|
||||
if (!hRes.ok) throw new Error('Failed to load integration health');
|
||||
const sBody = (await sRes.json()) as { items: IntegrationSetting[] };
|
||||
const hBody = (await hRes.json()) as { items: IntegrationHealthItem[] };
|
||||
|
||||
const settingByKey = new Map(sBody.items.map((s) => [s.key, s]));
|
||||
|
||||
// Source of truth for the row list is the live integration-health
|
||||
// response (it carries display names + categories). We merge in the
|
||||
// setting if one exists, otherwise synthesize a default.
|
||||
const merged: MergedRow[] = hBody.items.map((h) => ({
|
||||
key: h.key,
|
||||
name: h.name,
|
||||
category: h.category,
|
||||
liveStatus: h.status,
|
||||
setting:
|
||||
settingByKey.get(h.key) ??
|
||||
{
|
||||
key: h.key,
|
||||
disabled: h.status === 'disabled',
|
||||
reason: null,
|
||||
disabledBy: null,
|
||||
disabledAt: null,
|
||||
updatedAt: '',
|
||||
},
|
||||
}));
|
||||
merged.sort((a, b) => a.name.localeCompare(b.name));
|
||||
setRows(merged);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, []);
|
||||
|
||||
async function toggle(row: MergedRow, next: boolean) {
|
||||
setPending(row.key);
|
||||
try {
|
||||
const res = await fetch('/api/admin/integrations', {
|
||||
method: 'PATCH',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
key: row.key,
|
||||
disabled: next,
|
||||
reason: next ? reasons[row.key] || null : null,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => ({}))) as { error?: string };
|
||||
throw new Error(body.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
toast.success(`${row.name} ${next ? 'disabled' : 'enabled'}`);
|
||||
// Reload merged view so live status reflects the change after cache flush.
|
||||
await load();
|
||||
// Clear the inline reason input on success.
|
||||
setReasons((prev) => {
|
||||
const copy = { ...prev };
|
||||
delete copy[row.key];
|
||||
return copy;
|
||||
});
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'Toggle failed');
|
||||
} finally {
|
||||
setPending(null);
|
||||
}
|
||||
}
|
||||
|
||||
const disabledCount = rows?.filter((r) => r.setting.disabled).length ?? 0;
|
||||
const totalCount = rows?.length ?? 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="Integrations"
|
||||
description={
|
||||
rows
|
||||
? `${disabledCount} of ${totalCount} disabled`
|
||||
: 'Toggle integrations on or off without a container restart'
|
||||
}
|
||||
breadcrumbs={[
|
||||
{ label: 'Admin', href: '/admin' },
|
||||
{ label: 'Integrations' },
|
||||
]}
|
||||
accent
|
||||
actions={
|
||||
<Button onClick={load} variant="outline" size="sm" disabled={loading}>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto px-6 py-6 space-y-6 max-w-4xl">
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>Failed to load</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Alert>
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertTitle>How this works</AlertTitle>
|
||||
<AlertDescription className="space-y-1 text-sm">
|
||||
<p>
|
||||
Disabling an integration here suppresses it from <code>/status</code> and
|
||||
the top-bar status light, and excludes it from failure roll-ups. Live
|
||||
auth checks still run (so the underlying state is logged), but the UI
|
||||
ignores them.
|
||||
</p>
|
||||
<p className="text-muted-foreground">{ENV_OVERRIDE_NOTE}</p>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Power className="h-4 w-4" />
|
||||
Toggle integrations
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{!rows ? (
|
||||
<div className="p-6 space-y-3">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Skeleton key={i} className="h-14" />
|
||||
))}
|
||||
</div>
|
||||
) : rows.length === 0 ? (
|
||||
<div className="p-6">
|
||||
<EmptyState
|
||||
icon={Power}
|
||||
title="No integrations registered"
|
||||
description="The integration-health service didn't return any items."
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-border">
|
||||
{rows.map((row) => (
|
||||
<IntegrationRow
|
||||
key={row.key}
|
||||
row={row}
|
||||
pending={pending === row.key}
|
||||
reasonValue={reasons[row.key] ?? ''}
|
||||
onReasonChange={(v) =>
|
||||
setReasons((prev) => ({ ...prev, [row.key]: v }))
|
||||
}
|
||||
onToggle={(next) => void toggle(row, next)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function IntegrationRow({
|
||||
row,
|
||||
pending,
|
||||
reasonValue,
|
||||
onReasonChange,
|
||||
onToggle,
|
||||
}: {
|
||||
row: MergedRow;
|
||||
pending: boolean;
|
||||
reasonValue: string;
|
||||
onReasonChange: (v: string) => void;
|
||||
onToggle: (next: boolean) => void;
|
||||
}) {
|
||||
const isDisabled = row.setting.disabled;
|
||||
return (
|
||||
<li className={`grid grid-cols-1 md:grid-cols-[1fr_auto] gap-3 px-4 py-3 ${isDisabled ? 'opacity-80' : ''}`}>
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<StatusLight state={liveStatusLight(row.liveStatus)} size="md" className="mt-1.5" label={row.liveStatus} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium">{row.name}</span>
|
||||
<span className="text-xs text-muted-foreground uppercase tracking-wide">
|
||||
{row.category}
|
||||
</span>
|
||||
{isDisabled && <StatusBadge tone="inactive" size="xs">disabled</StatusBadge>}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
<span className="num">{row.key}</span>
|
||||
{row.setting.disabledBy && (
|
||||
<>
|
||||
{' · disabled by '}
|
||||
<span>{row.setting.disabledBy}</span>
|
||||
{' '}
|
||||
<span className="num">{fmtDate(row.setting.disabledAt)}</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
{isDisabled && row.setting.reason && (
|
||||
<p className="text-xs italic text-muted-foreground mt-1">
|
||||
"{row.setting.reason}"
|
||||
</p>
|
||||
)}
|
||||
{!isDisabled && (
|
||||
<Input
|
||||
placeholder="Optional: why are you disabling this?"
|
||||
value={reasonValue}
|
||||
onChange={(e) => onReasonChange(e.target.value)}
|
||||
className="h-7 text-xs mt-2 max-w-md"
|
||||
disabled={pending}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 md:self-center">
|
||||
<Switch
|
||||
checked={!isDisabled}
|
||||
onCheckedChange={(v) => onToggle(!v)}
|
||||
disabled={pending}
|
||||
aria-label={`Toggle ${row.name}`}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground w-14 text-left">
|
||||
{isDisabled ? 'Disabled' : 'Enabled'}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
99
app/api/admin/integrations/route.ts
Normal file
99
app/api/admin/integrations/route.ts
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/**
|
||||
* GET /api/admin/integrations — list every integration_settings row
|
||||
* PATCH /api/admin/integrations — body: { key, disabled, reason? }
|
||||
*
|
||||
* Backed by the `integration_settings` table (migration 081). Toggling
|
||||
* here takes effect within the 5-minute health cache without restarting
|
||||
* the container. Forces a cache refresh on PATCH so the UI reflects the
|
||||
* change immediately.
|
||||
*/
|
||||
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { requirePermission } from '@/lib/auth-utils';
|
||||
import postgresClient from '@/lib/services/postgres-client';
|
||||
import { clearIntegrationHealthCache } from '@/lib/services/integration-health';
|
||||
|
||||
interface IntegrationSettingRow {
|
||||
key: string;
|
||||
disabled: boolean;
|
||||
disabled_reason: string | null;
|
||||
disabled_by: string | null;
|
||||
disabled_at: string | null;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface IntegrationSetting {
|
||||
key: string;
|
||||
disabled: boolean;
|
||||
reason: string | null;
|
||||
disabledBy: string | null;
|
||||
disabledAt: string | null;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
function rowToDto(r: IntegrationSettingRow): IntegrationSetting {
|
||||
return {
|
||||
key: r.key,
|
||||
disabled: r.disabled,
|
||||
reason: r.disabled_reason,
|
||||
disabledBy: r.disabled_by,
|
||||
disabledAt: r.disabled_at,
|
||||
updatedAt: r.updated_at,
|
||||
};
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
const { error } = await requirePermission('admin', 'access');
|
||||
if (error) return error;
|
||||
|
||||
const res = await postgresClient.query<IntegrationSettingRow>(
|
||||
`SELECT key, disabled, disabled_reason, disabled_by, disabled_at::text,
|
||||
updated_at::text
|
||||
FROM integration_settings
|
||||
ORDER BY key`,
|
||||
);
|
||||
return NextResponse.json({ items: res.rows.map(rowToDto) });
|
||||
}
|
||||
|
||||
export async function PATCH(request: NextRequest) {
|
||||
const { session, error } = await requirePermission('admin', 'access');
|
||||
if (error) return error;
|
||||
|
||||
let body: { key?: unknown; disabled?: unknown; reason?: unknown };
|
||||
try {
|
||||
body = (await request.json()) as typeof body;
|
||||
} catch {
|
||||
return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
|
||||
}
|
||||
|
||||
const key = typeof body.key === 'string' ? body.key.trim() : '';
|
||||
const disabled = body.disabled === true;
|
||||
const reason =
|
||||
typeof body.reason === 'string' && body.reason.trim().length > 0
|
||||
? body.reason.trim().slice(0, 500)
|
||||
: null;
|
||||
|
||||
if (!key) {
|
||||
return NextResponse.json({ error: '`key` is required' }, { status: 400 });
|
||||
}
|
||||
|
||||
const actor = (session?.user as { email?: string } | undefined)?.email ?? null;
|
||||
|
||||
const res = await postgresClient.query<IntegrationSettingRow>(
|
||||
`INSERT INTO integration_settings (key, disabled, disabled_reason, disabled_by, disabled_at, updated_at)
|
||||
VALUES ($1, $2, $3, $4, CASE WHEN $2 THEN NOW() ELSE NULL END, NOW())
|
||||
ON CONFLICT (key) DO UPDATE
|
||||
SET disabled = EXCLUDED.disabled,
|
||||
disabled_reason = CASE WHEN EXCLUDED.disabled THEN EXCLUDED.disabled_reason ELSE NULL END,
|
||||
disabled_by = CASE WHEN EXCLUDED.disabled THEN EXCLUDED.disabled_by ELSE NULL END,
|
||||
disabled_at = CASE WHEN EXCLUDED.disabled THEN NOW() ELSE NULL END,
|
||||
updated_at = NOW()
|
||||
RETURNING key, disabled, disabled_reason, disabled_by, disabled_at::text, updated_at::text`,
|
||||
[key, disabled, reason, disabled ? actor : null],
|
||||
);
|
||||
|
||||
// Force the next /api/dashboard/integration-health request to re-check.
|
||||
clearIntegrationHealthCache();
|
||||
|
||||
return NextResponse.json({ item: rowToDto(res.rows[0]) });
|
||||
}
|
||||
|
|
@ -95,8 +95,8 @@
|
|||
--accent: oklch(0.62 0.17 220); /* Logo blue */
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--border: oklch(1 0 0 / 14%);
|
||||
--input: oklch(1 0 0 / 18%);
|
||||
--ring: oklch(0.62 0.17 220);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.62 0.17 220); /* Logo blue */
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-border: oklch(1 0 0 / 14%);
|
||||
--sidebar-ring: oklch(0.62 0.17 220);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue