chore: clean .gitignore cache
This commit is contained in:
GitHub Actions
@@ -1,206 +0,0 @@
|
||||
import { useState, useEffect, type FC } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { getLogs, getLogContent, downloadLog, LogFilter } from '../api/logs';
|
||||
import { FileText, ChevronLeft, ChevronRight, ScrollText } from 'lucide-react';
|
||||
import { LogTable } from '../components/LogTable';
|
||||
import { LogFilters } from '../components/LogFilters';
|
||||
import { PageShell } from '../components/layout/PageShell';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Badge,
|
||||
EmptyState,
|
||||
Skeleton,
|
||||
SkeletonList,
|
||||
} from '../components/ui';
|
||||
|
||||
const Logs: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [selectedLog, setSelectedLog] = useState<string | null>(null);
|
||||
|
||||
// Filter State
|
||||
const [search, setSearch] = useState(searchParams.get('search') || '');
|
||||
const [host, setHost] = useState('');
|
||||
const [status, setStatus] = useState('');
|
||||
const [level, setLevel] = useState('');
|
||||
const [sort, setSort] = useState<'asc' | 'desc'>('desc');
|
||||
const [page, setPage] = useState(0);
|
||||
const limit = 50;
|
||||
|
||||
const { data: logs, isLoading: isLoadingLogs } = useQuery({
|
||||
queryKey: ['logs'],
|
||||
queryFn: getLogs,
|
||||
});
|
||||
|
||||
// Select first log by default if none selected
|
||||
useEffect(() => {
|
||||
if (!selectedLog && logs && logs.length > 0) {
|
||||
setSelectedLog(logs[0].name);
|
||||
}
|
||||
}, [logs, selectedLog]);
|
||||
|
||||
const filter: LogFilter = {
|
||||
search,
|
||||
host,
|
||||
status,
|
||||
level,
|
||||
limit,
|
||||
offset: page * limit,
|
||||
sort,
|
||||
};
|
||||
|
||||
const { data: logData, isLoading: isLoadingContent, refetch: refetchContent } = useQuery({
|
||||
queryKey: ['logContent', selectedLog, search, host, status, level, page, sort],
|
||||
queryFn: () => (selectedLog ? getLogContent(selectedLog, filter) : Promise.resolve(null)),
|
||||
enabled: !!selectedLog,
|
||||
});
|
||||
|
||||
const handleDownload = () => {
|
||||
if (selectedLog) downloadLog(selectedLog);
|
||||
};
|
||||
|
||||
const totalPages = logData ? Math.ceil(logData.total / limit) : 0;
|
||||
|
||||
return (
|
||||
<PageShell
|
||||
title={t('logs.title')}
|
||||
description={t('logs.description')}
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
{/* Log File List */}
|
||||
<div className="md:col-span-1 space-y-4">
|
||||
<Card className="p-4" data-testid="log-file-list">
|
||||
<h2 className="text-lg font-semibold mb-4 text-content-primary">{t('logs.logFiles')}</h2>
|
||||
{isLoadingLogs ? (
|
||||
<SkeletonList items={4} showAvatar={false} />
|
||||
) : logs?.length === 0 ? (
|
||||
<div className="text-sm text-content-muted text-center py-4">{t('logs.noLogFiles')}</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{logs?.map((log) => (
|
||||
<button
|
||||
key={log.name}
|
||||
onClick={() => {
|
||||
setSelectedLog(log.name);
|
||||
setPage(0);
|
||||
}}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center ${
|
||||
selectedLog === log.name
|
||||
? 'bg-brand-500/10 text-brand-500 border border-brand-500/30'
|
||||
: 'hover:bg-surface-muted text-content-secondary'
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-4 h-4 mr-2 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate">{log.name}</div>
|
||||
<div className="text-xs text-content-muted">{(log.size / 1024 / 1024).toFixed(2)} MB</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Log Content */}
|
||||
<div className="md:col-span-3 space-y-4">
|
||||
{selectedLog ? (
|
||||
<>
|
||||
<LogFilters
|
||||
search={search}
|
||||
onSearchChange={(v) => {
|
||||
setSearch(v);
|
||||
setPage(0);
|
||||
}}
|
||||
host={host}
|
||||
onHostChange={(v) => {
|
||||
setHost(v);
|
||||
setPage(0);
|
||||
}}
|
||||
status={status}
|
||||
onStatusChange={(v) => {
|
||||
setStatus(v);
|
||||
setPage(0);
|
||||
}}
|
||||
level={level}
|
||||
onLevelChange={(v) => {
|
||||
setLevel(v);
|
||||
setPage(0);
|
||||
}}
|
||||
sort={sort}
|
||||
onSortChange={(v) => {
|
||||
setSort(v);
|
||||
setPage(0);
|
||||
}}
|
||||
onRefresh={refetchContent}
|
||||
onDownload={handleDownload}
|
||||
isLoading={isLoadingContent}
|
||||
/>
|
||||
|
||||
<Card className="overflow-hidden">
|
||||
{isLoadingContent ? (
|
||||
<div className="p-6 space-y-3">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-8 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div data-testid="log-table">
|
||||
<LogTable logs={logData?.logs || []} isLoading={isLoadingContent} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{logData && logData.total > 0 && (
|
||||
<div className="px-6 py-4 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="text-sm text-content-muted" data-testid="page-info">
|
||||
{t('logs.showingEntries', { from: logData.offset + 1, to: Math.min(logData.offset + limit, logData.total), total: logData.total })}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" size="sm">
|
||||
{t('logs.pageOf', { current: page + 1, total: totalPages })}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||||
disabled={page === 0 || isLoadingContent}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
disabled={page >= totalPages - 1 || isLoadingContent}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</>
|
||||
) : (
|
||||
<EmptyState
|
||||
icon={<ScrollText className="h-12 w-12" />}
|
||||
title={t('logs.noLogSelected')}
|
||||
description={t('logs.selectLogDescription')}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logs;
|
||||
Reference in New Issue
Block a user