59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
import { SyntheticEvent } from 'react';
|
|
import { useGetLogs } from '../generated/anthoLumeAPIV1';
|
|
import { Button } from '../components/Button';
|
|
import { LoadingState, TextInput } from '../components';
|
|
import { useDebouncedState } from '../hooks/useDebouncedState';
|
|
import { Search2Icon } from '../icons';
|
|
|
|
export default function AdminLogsPage() {
|
|
const [filter, setFilter, activeFilter, flushFilter] = useDebouncedState('', 300);
|
|
|
|
const { data: logsData, isLoading } = useGetLogs(activeFilter ? { filter: activeFilter } : {});
|
|
|
|
const logs = logsData?.status === 200 ? (logsData.data.logs ?? []) : [];
|
|
|
|
const handleFilterSubmit = (e: SyntheticEvent) => {
|
|
e.preventDefault();
|
|
flushFilter();
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-4 flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
|
|
<form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleFilterSubmit}>
|
|
<div className="flex w-full grow flex-col">
|
|
<div className="relative flex">
|
|
<span className="inline-flex items-center border-y border-l border-border bg-surface px-3 text-sm text-content-muted shadow-xs">
|
|
<Search2Icon size={15} hoverable={false} />
|
|
</span>
|
|
<TextInput
|
|
type="text"
|
|
value={filter}
|
|
onChange={e => setFilter(e.target.value)}
|
|
className="p-2"
|
|
placeholder="JQ Filter"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Button variant="secondary" type="submit" className="w-full lg:w-60">
|
|
Filter
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col-reverse overflow-scroll font-mono text-content">
|
|
{isLoading ? (
|
|
<LoadingState className="min-h-40 w-full" />
|
|
) : (
|
|
// Key By Index - Log lines have no stable id and can repeat; this list is append-only and fully replaced on refetch.
|
|
logs.map((log, index) => (
|
|
<span key={index} className="whitespace-nowrap hover:whitespace-pre">
|
|
{typeof log === 'string' ? log : JSON.stringify(log)}
|
|
</span>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|