feat: add data management admin page
Add frontend page for admin data collection management at /admin/data. The page displays available collectors (stocks, sectors, prices, valuations) with buttons to trigger collection jobs, and shows recent job history with status, timing, record counts, and error information. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
aec8541563
commit
11e5158378
180
frontend/src/app/admin/data/page.tsx
Normal file
180
frontend/src/app/admin/data/page.tsx
Normal file
@ -0,0 +1,180 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Sidebar from '@/components/layout/Sidebar';
|
||||
import Header from '@/components/layout/Header';
|
||||
import { api } from '@/lib/api';
|
||||
|
||||
interface JobLog {
|
||||
id: number;
|
||||
job_name: string;
|
||||
status: string;
|
||||
started_at: string;
|
||||
finished_at: string | null;
|
||||
records_count: number | null;
|
||||
error_msg: string | null;
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
const collectors = [
|
||||
{ key: 'stocks', label: '종목 마스터', description: 'KRX에서 종목 정보 수집' },
|
||||
{ key: 'sectors', label: '섹터 정보', description: 'WISEindex에서 섹터 분류 수집' },
|
||||
{ key: 'prices', label: '가격 데이터', description: 'pykrx로 OHLCV 데이터 수집' },
|
||||
{ key: 'valuations', label: '밸류 지표', description: 'KRX에서 PER/PBR 등 수집' },
|
||||
];
|
||||
|
||||
export default function DataManagementPage() {
|
||||
const router = useRouter();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [jobs, setJobs] = useState<JobLog[]>([]);
|
||||
const [collecting, setCollecting] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
const userData = await api.getCurrentUser() as User;
|
||||
setUser(userData);
|
||||
await fetchJobs();
|
||||
} catch {
|
||||
router.push('/login');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
init();
|
||||
}, [router]);
|
||||
|
||||
const fetchJobs = async () => {
|
||||
try {
|
||||
const data = await api.get<JobLog[]>('/api/admin/collect/status');
|
||||
setJobs(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch jobs:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const runCollector = async (key: string) => {
|
||||
setCollecting(key);
|
||||
try {
|
||||
await api.post(`/api/admin/collect/${key}`);
|
||||
await fetchJobs();
|
||||
} catch (err) {
|
||||
console.error('Collection failed:', err);
|
||||
} finally {
|
||||
setCollecting(null);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
success: 'bg-green-100 text-green-800',
|
||||
failed: 'bg-red-100 text-red-800',
|
||||
running: 'bg-yellow-100 text-yellow-800',
|
||||
};
|
||||
return colors[status] || 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-gray-500">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar />
|
||||
<div className="flex-1">
|
||||
<Header username={user?.username} />
|
||||
<main className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-800 mb-6">데이터 수집 관리</h1>
|
||||
|
||||
<div className="bg-white rounded-lg shadow mb-6">
|
||||
<div className="p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">수집 작업</h2>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{collectors.map((col) => (
|
||||
<div
|
||||
key={col.key}
|
||||
className="border rounded-lg p-4 flex flex-col"
|
||||
>
|
||||
<h3 className="font-medium text-gray-800">{col.label}</h3>
|
||||
<p className="text-sm text-gray-500 mb-4">{col.description}</p>
|
||||
<button
|
||||
onClick={() => runCollector(col.key)}
|
||||
disabled={collecting !== null}
|
||||
className="mt-auto px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-400 transition-colors"
|
||||
>
|
||||
{collecting === col.key ? '수집 중...' : '실행'}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="p-4 border-b flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold">최근 작업 이력</h2>
|
||||
<button
|
||||
onClick={fetchJobs}
|
||||
className="text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-sm font-medium text-gray-600">작업명</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-medium text-gray-600">상태</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-medium text-gray-600">시작 시간</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-medium text-gray-600">건수</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-medium text-gray-600">에러</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{jobs.map((job) => (
|
||||
<tr key={job.id}>
|
||||
<td className="px-4 py-3 text-sm">{job.job_name}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-1 rounded text-xs ${getStatusBadge(job.status)}`}>
|
||||
{job.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">
|
||||
{new Date(job.started_at).toLocaleString('ko-KR')}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm">{job.records_count ?? '-'}</td>
|
||||
<td className="px-4 py-3 text-sm text-red-600 truncate max-w-xs">
|
||||
{job.error_msg || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{jobs.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-4 py-8 text-center text-gray-500">
|
||||
아직 수집 이력이 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user