045d9ea890
Rename admin/ → Admin/ and swagger/ → Swagger/ to match router imports. Windows is case-insensitive so the mismatch was invisible locally. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
import { StatCard, Card, DataTable, Badge, Button, ProgressBar, Spinner } from '@cameleer/design-system';
|
|
import type { Column } from '@cameleer/design-system';
|
|
import { useDatabaseStatus, useConnectionPool, useDatabaseTables, useActiveQueries, useKillQuery } from '../../api/queries/admin/database';
|
|
|
|
export default function DatabaseAdminPage() {
|
|
const { data: status } = useDatabaseStatus();
|
|
const { data: pool } = useConnectionPool();
|
|
const { data: tables } = useDatabaseTables();
|
|
const { data: queries } = useActiveQueries();
|
|
const killQuery = useKillQuery();
|
|
|
|
const poolPct = pool ? (pool.activeConnections / pool.maximumPoolSize) * 100 : 0;
|
|
|
|
const tableColumns: Column<any>[] = [
|
|
{ key: 'tableName', header: 'Table' },
|
|
{ key: 'rowCount', header: 'Rows', sortable: true },
|
|
{ key: 'dataSize', header: 'Data Size' },
|
|
{ key: 'indexSize', header: 'Index Size' },
|
|
];
|
|
|
|
const queryColumns: Column<any>[] = [
|
|
{ key: 'pid', header: 'PID' },
|
|
{ key: 'durationSeconds', header: 'Duration', render: (v) => `${v}s` },
|
|
{ key: 'state', header: 'State', render: (v) => <Badge label={String(v)} /> },
|
|
{ key: 'query', header: 'Query', render: (v) => <span style={{ fontSize: '0.75rem', fontFamily: 'var(--font-mono)' }}>{String(v).slice(0, 80)}</span> },
|
|
{
|
|
key: 'pid', header: '', width: '80px',
|
|
render: (v) => <Button variant="danger" size="sm" onClick={() => killQuery.mutate(v as number)}>Kill</Button>,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<h2 style={{ marginBottom: '1rem' }}>Database Administration</h2>
|
|
|
|
<div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
|
|
<StatCard label="Status" value={status?.connected ? 'Connected' : 'Disconnected'} accent={status?.connected ? 'success' : 'error'} />
|
|
<StatCard label="Version" value={status?.version ?? '—'} />
|
|
<StatCard label="TimescaleDB" value={status?.timescaleDb ? 'Enabled' : 'Disabled'} />
|
|
</div>
|
|
|
|
{pool && (
|
|
<Card>
|
|
<div style={{ padding: '1rem' }}>
|
|
<h3 style={{ marginBottom: '0.5rem' }}>Connection Pool</h3>
|
|
<ProgressBar value={poolPct} />
|
|
<div style={{ display: 'flex', gap: '2rem', marginTop: '0.5rem', fontSize: '0.875rem' }}>
|
|
<span>Active: {pool.activeConnections}</span>
|
|
<span>Idle: {pool.idleConnections}</span>
|
|
<span>Max: {pool.maximumPoolSize}</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
<div style={{ marginTop: '1.5rem' }}>
|
|
<h3 style={{ marginBottom: '0.75rem' }}>Tables</h3>
|
|
<DataTable columns={tableColumns} data={(tables || []).map((t: any) => ({ ...t, id: t.tableName }))} sortable pageSize={20} />
|
|
</div>
|
|
|
|
<div style={{ marginTop: '1.5rem' }}>
|
|
<h3 style={{ marginBottom: '0.75rem' }}>Active Queries</h3>
|
|
<DataTable columns={queryColumns} data={(queries || []).map((q: any) => ({ ...q, id: String(q.pid) }))} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|