feat(api): add the Glue Data Catalog to the cloud explorer

Create and delete Glue databases, and describe a folder of CSV, JSON-lines or
Parquet files in S3 as a table: its columns, and for CSV the delimiter and
whether the first line is a header. Tables are written with the storage
settings Athena expects, so TheCloud's Athena can query one as soon as it
exists. Glue jobs and crawlers are not offered: the runtime stores them but
never runs them.

packages/frontend/src/components/DataCatalogPanel.tsx

@@ -0,0 +1,145 @@
+import {Plus, RefreshCw, X} from 'lucide-react'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
+import {useEffect, useState} from 'react'
+import {createCatalogTable, deleteCatalogTable, getCloudResource} from '@/api/cloudProxyClient'
+import {cloudQueryKeys} from '@/api/queries/cloudQueries'
+import {useAccountId} from '@/lib/accountStore'
+import {formatDateTime} from '@/lib/format'
+import type {CatalogTableInput, CloudResource} from '@/types/resource'
+
+type Props = {
+    resource?: CloudResource
+    runtimeReachable: boolean
+}
+
+type Column = {name: string; type: string}
+type CatalogTable = {
+    name: string
+    description: string | null
+    format: string
+    location: string | null
+    delimiter: string | null
+    headerRow: boolean
+    columns: Column[]
+    partitionKeys: Column[]
+    updatedAt: string | null
+    createdAt: string | null
+}
+type TableForm = {name: string; location: string; format: CatalogTableInput['format']; delimiter: string; headerRow: boolean; columns: Column[]}
+
+/** Matches the types the API accepts; decimal(p,s) can also be typed in by hand through the API. */
+const COLUMN_TYPES = ['string', 'int', 'bigint', 'double', 'float', 'boolean', 'date', 'timestamp', 'decimal(10,2)']
+const FORMAT_LABELS: Record<string, string> = {csv: 'CSV', json: 'JSON lines', parquet: 'Parquet', iceberg: 'Iceberg'}
+const DELIMITER_NAMES: Record<string, string> = {',': 'comma-separated', ';': 'semicolon-separated', '\t': 'tab-separated', '|': 'pipe-separated'}
+const delimiterLabel = (delimiter: string | null) => DELIMITER_NAMES[delimiter ?? ','] ?? `separated by "${delimiter}"`
+const emptyForm = (): TableForm => ({name: '', location: 's3://', format: 'csv', delimiter: ',', headerRow: true, columns: [{name: '', type: 'string'}]})
+
+export function DataCatalogPanel({resource, runtimeReachable}: Props) {
+    const accountId = useAccountId()
+    const queryClient = useQueryClient()
+    const [form, setForm] = useState<TableForm>(emptyForm)
+    const [notice, setNotice] = useState('')
+    const detailKey = ['glue-database', accountId, resource?.id]
+
+    const detailQuery = useQuery({
+        queryKey: detailKey,
+        queryFn: ({signal}) => getCloudResource('aws', 'datacatalog', resource?.id ?? '', signal),
+        enabled: Boolean(resource) && runtimeReachable,
+    })
+
+    useEffect(() => {
+        setNotice('')
+        setForm(emptyForm())
+    }, [resource?.id])
+
+    const settle = (updated: CloudResource, message: string) => {
+        queryClient.setQueryData(detailKey, updated)
+        setNotice(message)
+        return queryClient.invalidateQueries({queryKey: cloudQueryKeys.resources('aws', 'datacatalog')})
+    }
+    const createTable = useMutation({
+        mutationFn: () => createCatalogTable('aws', resource?.id ?? '', {
+            name: form.name.trim(),
+            location: form.location.trim(),
+            format: form.format,
+            ...(form.format === 'csv' ? {delimiter: form.delimiter, headerRow: form.headerRow} : {}),
+            columns: form.columns.map((column) => ({name: column.name.trim(), type: column.type})),
+        }),
+        onSuccess: (updated) => {
+            const name = form.name.trim()
+            setForm(emptyForm())
+            return settle(updated, `Created table ${name}. Athena can query it now.`)
+        },
+    })
+    const deleteTable = useMutation({
+        mutationFn: (tableName: string) => deleteCatalogTable('aws', resource?.id ?? '', tableName),
+        onSuccess: (updated, tableName) => settle(updated, `Deleted table ${tableName}. Its files stay in S3.`),
+    })
+
+    if (!resource) {
+        return <section className="table-panel"><div className="empty compact"><h3>Select a database</h3><p>Choose a database to see its tables, or describe files in S3 as a new table.</p></div></section>
+    }
+
+    const database = detailQuery.data ?? resource
+    const tables = Array.isArray(database.metadata.tables) ? database.metadata.tables as CatalogTable[] : []
+    const disabled = !runtimeReachable || createTable.isPending || deleteTable.isPending
+    const error = detailQuery.error ?? createTable.error ?? deleteTable.error
+    const setColumn = (index: number, patch: Partial<Column>) => setForm({...form, columns: form.columns.map((column, i) => i === index ? {...column, ...patch} : column)})
+
+    return <section className="table-panel" style={{marginTop: 16}} aria-label={`Database ${database.name}`}>
+        <div className="input-row resource-table-bar">
+            <div><p className="eyebrow">Glue database</p><span className="muted">{database.metadata.description ? String(database.metadata.description) : 'Tables here describe files in S3 so Athena can query them.'}</span></div>
+            <div className="cdn-actions">
+                <button className="button" type="button" disabled={!runtimeReachable || detailQuery.isFetching} onClick={() => { void detailQuery.refetch() }}><RefreshCw size={14}/>{detailQuery.isFetching ? 'Loading' : 'Refresh'}</button>
+            </div>
+        </div>
+
+        <div className="input-row resource-table-bar"><div><p className="eyebrow">Tables</p><span className="muted">{tables.length === 1 ? '1 table' : `${tables.length} tables`}</span></div></div>
+        {tables.length === 0 ? <p className="muted compact-text catalog-note">No tables yet. Describe a folder of CSV, JSON or Parquet files below.</p>
+            : <div className="cognito-table"><table className="table"><thead><tr><th>Table</th><th>Format</th><th>Location</th><th>Columns</th><th>Updated</th><th aria-label="Actions"/></tr></thead><tbody>{tables.map((table) => (
+                <tr key={table.name}>
+                    <td className="mono">{table.name}{table.description && <><br/><small className="muted">{table.description}</small></>}</td>
+                    <td>{FORMAT_LABELS[table.format] ?? table.format}{table.format === 'csv' && <><br/><small className="muted">{delimiterLabel(table.delimiter)}{table.headerRow ? ', header row' : ''}</small></>}</td>
+                    <td className="mono catalog-location">{table.location ?? '—'}</td>
+                    <td className="catalog-columns">{table.columns.map((column) => <span key={column.name}><code>{column.name}</code> <small className="muted">{column.type}</small></span>)}
+                        {table.partitionKeys.length > 0 && <small className="muted">partitioned by {table.partitionKeys.map((key) => key.name).join(', ')}</small>}</td>
+                    <td>{formatDateTime(table.updatedAt ?? table.createdAt) ?? '—'}</td>
+                    <td className="efs-row-actions"><button className="button compact danger" type="button" disabled={disabled} aria-label={`Delete table ${table.name}`} onClick={() => {
+                        setNotice('')
+                        if (window.confirm(`Delete table ${table.name}? Its files stay in S3.`)) deleteTable.mutate(table.name)
+                    }}>Delete</button></td>
+                </tr>
+            ))}</tbody></table></div>}
+
+        <form className="catalog-form" aria-label="Create table" onSubmit={(event) => { event.preventDefault(); setNotice(''); createTable.mutate() }}>
+            <p className="eyebrow">New table</p>
+            <div className="dynamic-form catalog-form-fields">
+                <label className="dynamic-field"><span>Name</span><input className="input mono" value={form.name} onChange={(event) => setForm({...form, name: event.target.value})} disabled={disabled} required pattern="[a-z_][a-z0-9_]*" title="Lowercase letters, numbers and underscores"/></label>
+                <label className="dynamic-field catalog-span"><span>S3 location</span><input className="input mono" value={form.location} onChange={(event) => setForm({...form, location: event.target.value})} disabled={disabled} required pattern="s3://[a-z0-9.\-]{3,63}(/.*)?" title="A folder such as s3://my-bucket/orders/"/></label>
+                <label className="dynamic-field"><span>Format</span><select className="input" value={form.format} onChange={(event) => setForm({...form, format: event.target.value as TableForm['format']})} disabled={disabled}>
+                    <option value="csv">CSV</option><option value="json">JSON lines</option><option value="parquet">Parquet</option>
+                </select></label>
+                {form.format === 'csv' && <>
+                    <label className="dynamic-field"><span>Delimiter</span><input className="input mono" value={form.delimiter} maxLength={1} onChange={(event) => setForm({...form, delimiter: event.target.value})} disabled={disabled} required/></label>
+                    <label className="dynamic-field catalog-check"><input type="checkbox" checked={form.headerRow} onChange={(event) => setForm({...form, headerRow: event.target.checked})} disabled={disabled}/><span>First line is a header</span></label>
+                </>}
+            </div>
+            <fieldset className="catalog-columns-editor" disabled={disabled}>
+                <legend>Columns</legend>
+                {form.columns.map((column, index) => <div className="catalog-column-row" key={index}>
+                    <input className="input mono" aria-label={`Column ${index + 1} name`} value={column.name} onChange={(event) => setColumn(index, {name: event.target.value})} required pattern="[a-z_][a-z0-9_]*" title="Lowercase letters, numbers and underscores"/>
+                    <select className="input" aria-label={`Column ${index + 1} type`} value={column.type} onChange={(event) => setColumn(index, {type: event.target.value})}>
+                        {COLUMN_TYPES.map((type) => <option key={type} value={type}>{type}</option>)}
+                    </select>
+                    <button className="button compact" type="button" aria-label={`Remove column ${index + 1}`} disabled={form.columns.length === 1} onClick={() => setForm({...form, columns: form.columns.filter((_, i) => i !== index)})}><X size={14}/></button>
+                </div>)}
+                <button className="button compact" type="button" onClick={() => setForm({...form, columns: [...form.columns, {name: '', type: 'string'}]})}><Plus size={14}/>Add column</button>
+            </fieldset>
+            <p className="muted compact-text">List the columns in the order they appear in the files. For JSON, use the field names.</p>
+            <div><button className="button primary" type="submit" disabled={disabled}>{createTable.isPending ? 'Creating' : 'Create table'}</button></div>
+        </form>
+
+        {notice && <p className="cognito-outcome cognito-outcome--ok" role="status">{notice}</p>}
+        {error instanceof Error && <p className="error-text compact-text" role="alert">{error.message}</p>}
+    </section>
+}