282 lines
11 KiB
TypeScript
282 lines
11 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||
import { TrashIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
|
||
import { api } from '../lib/api';
|
||
import type { PaginatedResponse, ApiResponse } from '../lib/api';
|
||
import type { AppLog } from '../types';
|
||
import { formatDateTime } from '../lib/utils';
|
||
import DataTable, { Column } from '../components/ui/DataTable';
|
||
import Pagination from '../components/ui/Pagination';
|
||
import Modal from '../components/ui/Modal';
|
||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||
import SearchableSelect from '../components/ui/SearchableSelect';
|
||
|
||
const LEVEL_META: Record<string, { label: string; cls: string }> = {
|
||
emergency: { label: 'اضطراری', cls: 'red' },
|
||
alert: { label: 'هشدار جدی', cls: 'red' },
|
||
critical: { label: 'بحرانی', cls: 'red' },
|
||
error: { label: 'خطا', cls: 'red' },
|
||
warning: { label: 'اخطار', cls: 'amber' },
|
||
notice: { label: 'اطلاع', cls: 'gray' },
|
||
info: { label: 'اطلاعات', cls: 'gray' },
|
||
debug: { label: 'دیباگ', cls: 'gray' },
|
||
};
|
||
|
||
const LEVEL_FILTER_OPTIONS = [
|
||
{ value: '', label: 'همه سطوح' },
|
||
{ value: 'error', label: 'خطا' },
|
||
{ value: 'warning', label: 'اخطار' },
|
||
{ value: 'critical', label: 'بحرانی' },
|
||
];
|
||
|
||
type Tab = 'logs' | 'settings';
|
||
|
||
export default function LogsPage() {
|
||
const [tab, setTab] = useState<Tab>('logs');
|
||
const [page, setPage] = useState(1);
|
||
const [level, setLevel] = useState('');
|
||
const [search, setSearch] = useState('');
|
||
const [viewLog, setViewLog] = useState<AppLog | null>(null);
|
||
const [confirmClear, setConfirmClear] = useState(false);
|
||
const [downloading, setDownloading] = useState(false);
|
||
const limit = 25;
|
||
const queryClient = useQueryClient();
|
||
|
||
const handleDownload = async () => {
|
||
setDownloading(true);
|
||
try {
|
||
const qs =
|
||
(level ? `&level=${level}` : '') +
|
||
(search ? `&search=${encodeURIComponent(search)}` : '');
|
||
await api.download(`/api/v1/admin/logs/export?${qs}`);
|
||
} finally {
|
||
setDownloading(false);
|
||
}
|
||
};
|
||
|
||
const logsQuery = useQuery({
|
||
queryKey: ['admin-logs', page, level, search],
|
||
queryFn: () =>
|
||
api.get<PaginatedResponse<AppLog>>(
|
||
`/api/v1/admin/logs?page=${page}&limit=${limit}` +
|
||
(level ? `&level=${level}` : '') +
|
||
(search ? `&search=${encodeURIComponent(search)}` : ''),
|
||
),
|
||
});
|
||
|
||
const clearMutation = useMutation({
|
||
mutationFn: () => api.delete<ApiResponse<{ deleted: number }>>('/api/v1/admin/logs'),
|
||
onSuccess: () => {
|
||
setConfirmClear(false);
|
||
setPage(1);
|
||
queryClient.invalidateQueries({ queryKey: ['admin-logs'] });
|
||
},
|
||
});
|
||
|
||
const columns: Column<AppLog>[] = [
|
||
{ key: 'created_at', header: 'زمان', render: (l) => formatDateTime(l.created_at) },
|
||
{
|
||
key: 'level',
|
||
header: 'سطح',
|
||
render: (l) => {
|
||
const meta = LEVEL_META[l.level] ?? { label: l.level, cls: 'gray' };
|
||
return <span className={`badge ${meta.cls}`}><span className="bdot" />{meta.label}</span>;
|
||
},
|
||
},
|
||
{
|
||
key: 'message',
|
||
header: 'پیام',
|
||
render: (l) => (
|
||
<button
|
||
type="button"
|
||
title="نمایش جزئیات"
|
||
onClick={() => setViewLog(l)}
|
||
style={{ fontSize: 12.5, display: 'block', maxWidth: 420, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'right', background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: 'var(--primary)', width: '100%' }}
|
||
>
|
||
{l.message}
|
||
</button>
|
||
),
|
||
},
|
||
{ key: 'path', header: 'مسیر', render: (l) => <span dir="ltr" className="muted" style={{ fontSize: 12 }}>{l.path ?? '—'}</span> },
|
||
];
|
||
|
||
return (
|
||
<div className="fade-in">
|
||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||
<div>
|
||
<h1 className="section-title">لاگها</h1>
|
||
<div className="muted">رویدادهای ثبتشدهی سیستم (اخطار و بالاتر)</div>
|
||
</div>
|
||
{tab === 'logs' && (
|
||
<div style={{ display: 'flex', gap: 8 }}>
|
||
<button
|
||
className="btn ghost sm"
|
||
onClick={handleDownload}
|
||
disabled={downloading || (logsQuery.data?.meta?.totalRecords ?? 0) === 0}
|
||
>
|
||
<ArrowDownTrayIcon style={{ width: 16, height: 16 }} />
|
||
{downloading ? 'در حال دانلود...' : 'دانلود همه لاگها'}
|
||
</button>
|
||
<button
|
||
className="btn danger sm"
|
||
onClick={() => setConfirmClear(true)}
|
||
disabled={(logsQuery.data?.meta?.totalRecords ?? 0) === 0}
|
||
>
|
||
<TrashIcon style={{ width: 16, height: 16 }} />
|
||
حذف همه لاگها
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: 8, marginBottom: 'var(--gap)' }}>
|
||
<button
|
||
className={`btn ${tab === 'logs' ? 'primary' : 'ghost'} sm`}
|
||
onClick={() => setTab('logs')}
|
||
>
|
||
فهرست لاگها
|
||
</button>
|
||
<button
|
||
className={`btn ${tab === 'settings' ? 'primary' : 'ghost'} sm`}
|
||
onClick={() => setTab('settings')}
|
||
>
|
||
مدت نگهداری
|
||
</button>
|
||
</div>
|
||
|
||
{tab === 'logs' && (
|
||
<div className="card">
|
||
<div className="card-pad">
|
||
<div style={{ marginBottom: 12, display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
|
||
<input
|
||
className="input"
|
||
style={{ maxWidth: 260 }}
|
||
placeholder="جستجو در متن..."
|
||
value={search}
|
||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||
/>
|
||
<div style={{ width: 200 }}>
|
||
<SearchableSelect
|
||
options={LEVEL_FILTER_OPTIONS}
|
||
value={level}
|
||
onChange={(v) => { setLevel(v ? String(v) : ''); setPage(1); }}
|
||
placeholder="همه سطوح"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<DataTable<AppLog>
|
||
columns={columns}
|
||
data={logsQuery.data?.data ?? []}
|
||
loading={logsQuery.isLoading}
|
||
emptyMessage="لاگی یافت نشد"
|
||
/>
|
||
<Pagination
|
||
page={page}
|
||
total={logsQuery.data?.meta?.totalRecords ?? 0}
|
||
limit={limit}
|
||
onPageChange={setPage}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{tab === 'settings' && <RetentionSettings />}
|
||
|
||
<Modal open={!!viewLog} title="جزئیات لاگ" onClose={() => setViewLog(null)}>
|
||
{viewLog && (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 360, maxWidth: 640 }}>
|
||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', fontSize: 12.5 }}>
|
||
<div><span className="muted">سطح: </span>{LEVEL_META[viewLog.level]?.label ?? viewLog.level}</div>
|
||
<div><span className="muted">زمان: </span>{formatDateTime(viewLog.created_at)}</div>
|
||
{viewLog.path && <div><span className="muted">مسیر: </span><span dir="ltr">{viewLog.path}</span></div>}
|
||
</div>
|
||
<div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.9, fontSize: 13.5, padding: '12px 14px', borderRadius: 'var(--r-sm)', background: 'var(--surface-3)', border: '1px solid var(--border)' }} dir="ltr">
|
||
{viewLog.message}
|
||
</div>
|
||
{viewLog.context && (
|
||
<div>
|
||
<div className="muted" style={{ fontSize: 12, marginBottom: 4 }}>context</div>
|
||
<pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 12, padding: '10px 12px', borderRadius: 'var(--r-sm)', background: 'var(--surface)', border: '1px solid var(--border)', margin: 0 }} dir="ltr">
|
||
{viewLog.context}
|
||
</pre>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
|
||
<ConfirmDialog
|
||
open={confirmClear}
|
||
title="حذف همه لاگها"
|
||
message="همهی لاگهای سیستم برای همیشه حذف میشوند. این عمل قابل بازگشت نیست. ادامه میدهید؟"
|
||
confirmLabel="حذف همه"
|
||
danger
|
||
loading={clearMutation.isPending}
|
||
onConfirm={() => clearMutation.mutate()}
|
||
onCancel={() => setConfirmClear(false)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function RetentionSettings() {
|
||
const queryClient = useQueryClient();
|
||
const [days, setDays] = useState<string>('');
|
||
const [touched, setTouched] = useState(false);
|
||
|
||
const settingsQuery = useQuery({
|
||
queryKey: ['admin-settings'],
|
||
queryFn: () => api.get<ApiResponse<Record<string, string | boolean>>>('/api/v1/admin/settings'),
|
||
});
|
||
|
||
const current = String(settingsQuery.data?.data?.log_retention_days ?? '');
|
||
const value = touched ? days : current;
|
||
|
||
const saveMutation = useMutation({
|
||
mutationFn: (retentionDays: string) =>
|
||
api.patch<ApiResponse<Record<string, string | boolean>>>('/api/v1/admin/settings', {
|
||
log_retention_days: retentionDays,
|
||
}),
|
||
onSuccess: () => {
|
||
setTouched(false);
|
||
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
|
||
},
|
||
});
|
||
|
||
return (
|
||
<div className="card">
|
||
<div className="card-pad">
|
||
<div style={{ maxWidth: 420, display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
<div>
|
||
<label className="muted" style={{ fontSize: 13, display: 'block', marginBottom: 6 }}>
|
||
مدت نگهداری لاگها (روز)
|
||
</label>
|
||
<input
|
||
className="input"
|
||
type="number"
|
||
min={0}
|
||
value={value}
|
||
placeholder={settingsQuery.isLoading ? 'در حال بارگذاری...' : '90'}
|
||
onChange={(e) => { setDays(e.target.value); setTouched(true); }}
|
||
style={{ maxWidth: 200 }}
|
||
/>
|
||
<div className="muted" style={{ fontSize: 12, marginTop: 6, lineHeight: 1.7 }}>
|
||
لاگهای قدیمیتر از این مدت بهصورت روزانه بهصورت خودکار حذف میشوند. مقدار ۰ یعنی نگهداری نامحدود.
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<button
|
||
className="btn primary sm"
|
||
disabled={saveMutation.isPending || !touched || value === current}
|
||
onClick={() => saveMutation.mutate(String(parseInt(value || '0', 10)))}
|
||
>
|
||
{saveMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|