Add unified logs platform with Helm-managed central Elasticsearch.
Deploy cloudhost-logging on cluster registration, ship app and optional service logs to ES with owner isolation, and fix Kibana 8.12 auth via kibana_system. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
keyhan
@@ -5,7 +5,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '@/lib/api';
|
||||
import { toast } from 'react-toastify';
|
||||
import type { Cluster, ClusterResources } from '@/types';
|
||||
import { Server, CheckCircle, XCircle, BarChart3, Clock, RotateCw, Plug, X } from 'lucide-react';
|
||||
import { Server, CheckCircle, XCircle, BarChart3, Clock, RotateCw, Plug, X, ScrollText, Copy } from 'lucide-react';
|
||||
import { useConfirm } from '@/components/confirm-modal';
|
||||
|
||||
function ResourcePanel({ clusterId }: { clusterId: string }) {
|
||||
@@ -120,6 +120,100 @@ function ResourcePanel({ clusterId }: { clusterId: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
function CentralLoggingPanel() {
|
||||
const queryClient = useQueryClient();
|
||||
const { data: status, isLoading } = useQuery({
|
||||
queryKey: ['admin-elasticsearch-status'],
|
||||
queryFn: () => api.get('/admin/elasticsearch/status').then((r) => r.data),
|
||||
});
|
||||
|
||||
const deployMutation = useMutation({
|
||||
mutationFn: () => api.post('/admin/elasticsearch/deploy'),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-elasticsearch-status'] });
|
||||
toast.success('Logging stack deployment started');
|
||||
},
|
||||
onError: () => toast.error('Failed to deploy logging stack'),
|
||||
});
|
||||
|
||||
const undeployMutation = useMutation({
|
||||
mutationFn: () => api.delete('/admin/elasticsearch/undeploy'),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin-elasticsearch-status'] });
|
||||
toast.success('Logging stack removed');
|
||||
},
|
||||
});
|
||||
|
||||
const kibanaCmd = 'kubectl port-forward svc/kibana 5601:5601 -n logging';
|
||||
|
||||
return (
|
||||
<div className="card p-4 border border-indigo-100 bg-indigo-50/30">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3 mb-3">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||
<ScrollText className="w-5 h-5 text-indigo-600" /> Central logging (Elasticsearch)
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Required for the unified Logs page. Installed automatically via Helm when a cluster is registered.
|
||||
End users never get Kibana access — staff use port-forward.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{!status?.deployed ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deployMutation.mutate()}
|
||||
disabled={deployMutation.isPending}
|
||||
className="btn-primary text-sm"
|
||||
>
|
||||
{deployMutation.isPending ? 'Deploying…' : 'Deploy stack'}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => undeployMutation.mutate()}
|
||||
disabled={undeployMutation.isPending}
|
||||
className="btn-secondary text-sm text-red-600"
|
||||
>
|
||||
Remove stack
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-gray-500">Checking status…</p>
|
||||
) : status?.deployed ? (
|
||||
<div className="text-sm space-y-2">
|
||||
<p className="text-green-700 font-medium flex items-center gap-1">
|
||||
<CheckCircle className="w-4 h-4" /> Deployed · health: {status.health?.status || 'unknown'}
|
||||
</p>
|
||||
<div className="bg-white rounded-lg p-3 border border-gray-200">
|
||||
<p className="text-xs font-medium text-gray-600 mb-1">Kibana (staff only)</p>
|
||||
<div className="flex items-center gap-2 font-mono text-xs">
|
||||
<code className="flex-1 break-all">{kibanaCmd}</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(kibanaCmd);
|
||||
toast.success('Copied');
|
||||
}}
|
||||
className="p-1 text-gray-500 hover:text-gray-800"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">Then open http://localhost:5601</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-amber-700">
|
||||
Not deployed on the default cluster. New clusters install this automatically; use Deploy for existing clusters.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AdminClustersPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const confirm = useConfirm();
|
||||
@@ -208,6 +302,8 @@ export default function AdminClustersPage() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<CentralLoggingPanel />
|
||||
|
||||
{showForm && (
|
||||
<div className="card space-y-4 animate-slide-up">
|
||||
<h2 className="text-lg font-semibold text-gray-900">Register New Cluster</h2>
|
||||
|
||||
@@ -6,7 +6,8 @@ import api from '@/lib/api';
|
||||
import { toast } from 'react-toastify';
|
||||
import type { Application, Deployment, ResourceUsage, ClusterPublic, ClusterPoolPublic, AppSnapshot, K8sRevisionData, K8sRevision, ServiceAccessGrant, ServiceAccessTarget } from '@/types';
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import { Hexagon, Rocket, Play, Square, RotateCw, Globe, Package, Server, Scale, CheckCircle, Clock, XCircle, AlertCircle, Link, GitBranch, KeyRound, FolderUp, BarChart3, ChevronDown, FileText, Monitor, Hammer, Settings, RefreshCw, Upload, Circle, Pin, Database, Eye, EyeOff, Copy, Check, History, Download, RotateCcw, Camera, Trash2, Archive, Zap, Wallet, CreditCard, AlertTriangle, ShieldAlert, ExternalLink } from 'lucide-react';
|
||||
import NextLink from 'next/link';
|
||||
import { Hexagon, Rocket, Play, Square, RotateCw, Globe, Package, Server, Scale, CheckCircle, Clock, XCircle, AlertCircle, Link, GitBranch, KeyRound, FolderUp, BarChart3, ChevronDown, FileText, Monitor, Hammer, Settings, RefreshCw, Upload, Circle, Pin, Database, Eye, EyeOff, Copy, Check, History, Download, RotateCcw, Camera, Trash2, Archive, Zap, Wallet, CreditCard, AlertTriangle, ShieldAlert, ExternalLink, ScrollText } from 'lucide-react';
|
||||
import { useConfirm } from '@/components/confirm-modal';
|
||||
import { BuildProgressModal } from '@/components/build-progress-modal';
|
||||
|
||||
@@ -925,6 +926,14 @@ export default function AppDetailPage() {
|
||||
{previewMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><Globe className="w-3 h-3 inline" /> Preview</>}
|
||||
</button>
|
||||
)}
|
||||
{app.enableElasticsearch && (
|
||||
<NextLink
|
||||
href={`/dashboard/logs?appId=${appId}`}
|
||||
className="text-sm px-4 py-2 rounded-xl font-medium bg-slate-50 text-slate-700 hover:bg-slate-100 border border-slate-200 transition-all active:scale-[0.98] inline-flex items-center gap-1"
|
||||
>
|
||||
<ScrollText className="w-3 h-3" /> Logs
|
||||
</NextLink>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<button onClick={handleDelete} disabled={deleteMutation.isPending} className="btn-danger text-sm disabled:opacity-50">
|
||||
|
||||
@@ -24,6 +24,7 @@ import {
|
||||
Boxes,
|
||||
Wallet,
|
||||
CreditCard,
|
||||
ScrollText,
|
||||
} from 'lucide-react';
|
||||
|
||||
type NavItem = { href: string; label: string; icon: ReactNode };
|
||||
@@ -31,6 +32,7 @@ type NavItem = { href: string; label: string; icon: ReactNode };
|
||||
const userNavItems: NavItem[] = [
|
||||
{ href: '/dashboard', label: 'Dashboard', icon: <LayoutDashboard className="w-4 h-4" /> },
|
||||
{ href: '/dashboard/apps', label: 'Applications', icon: <Package className="w-4 h-4" /> },
|
||||
{ href: '/dashboard/logs', label: 'Logs', icon: <ScrollText className="w-4 h-4" /> },
|
||||
{ href: '/dashboard/deploy', label: 'New Deploy', icon: <Rocket className="w-4 h-4" /> },
|
||||
{ href: '/dashboard/wallet', label: 'Wallet', icon: <Wallet className="w-4 h-4" /> },
|
||||
{ href: '/dashboard/tickets', label: 'Tickets', icon: <Ticket className="w-4 h-4" /> },
|
||||
|
||||
@@ -1,401 +1,389 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, Suspense } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import axios from 'axios';
|
||||
import { Loader2, RefreshCw, Search, Filter, Clock, AlertCircle, AlertTriangle, Info, Bug } from 'lucide-react';
|
||||
|
||||
interface Application {
|
||||
id: string;
|
||||
name: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface LogFilter {
|
||||
appId: string;
|
||||
level: string;
|
||||
from: string;
|
||||
to: string;
|
||||
search: string;
|
||||
}
|
||||
|
||||
interface LogEntry {
|
||||
timestamp: string;
|
||||
level: string;
|
||||
message: string;
|
||||
app?: string;
|
||||
pod?: string;
|
||||
}
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import api from '@/lib/api';
|
||||
import type { Application, LogEntry, LogSearchResult, LogStatsResult } from '@/types';
|
||||
import {
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
AlertCircle,
|
||||
FileText,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from 'lucide-react';
|
||||
|
||||
const LOG_LEVELS = [
|
||||
{ value: '', label: 'همه سطوح', color: 'bg-gray-100' },
|
||||
{ value: 'error', label: 'Error', color: 'bg-red-100 text-red-800' },
|
||||
{ value: 'warn', label: 'Warning', color: 'bg-yellow-100 text-yellow-800' },
|
||||
{ value: 'info', label: 'Info', color: 'bg-blue-100 text-blue-800' },
|
||||
{ value: 'debug', label: 'Debug', color: 'bg-gray-100 text-gray-800' },
|
||||
{ value: '', label: 'All levels' },
|
||||
{ value: 'error', label: 'Error' },
|
||||
{ value: 'warn', label: 'Warning' },
|
||||
{ value: 'info', label: 'Info' },
|
||||
{ value: 'debug', label: 'Debug' },
|
||||
];
|
||||
|
||||
const WORKLOADS = [
|
||||
{ value: '', label: 'All sources' },
|
||||
{ value: 'app', label: 'Application' },
|
||||
{ value: 'redis', label: 'Redis' },
|
||||
{ value: 'rabbitmq', label: 'RabbitMQ' },
|
||||
{ value: 'database', label: 'Database' },
|
||||
];
|
||||
|
||||
const TIME_RANGES = [
|
||||
{ value: '1h', label: 'ساعت گذشته' },
|
||||
{ value: '6h', label: '6 ساعت گذشته' },
|
||||
{ value: '24h', label: '24 ساعت گذشته' },
|
||||
{ value: '7d', label: 'هفته گذشته' },
|
||||
{ value: 'custom', label: 'بازه دلخواه' },
|
||||
{ value: '1h', label: 'Last hour' },
|
||||
{ value: '6h', label: 'Last 6 hours' },
|
||||
{ value: '24h', label: 'Last 24 hours' },
|
||||
{ value: '7d', label: 'Last 7 days' },
|
||||
];
|
||||
|
||||
export default function LogsPage() {
|
||||
const [filters, setFilters] = useState<LogFilter>({
|
||||
appId: '',
|
||||
level: '',
|
||||
from: '',
|
||||
to: '',
|
||||
search: '',
|
||||
});
|
||||
function levelBadgeClass(level: string) {
|
||||
switch (level?.toLowerCase()) {
|
||||
case 'error':
|
||||
return 'bg-red-100 text-red-800';
|
||||
case 'warn':
|
||||
case 'warning':
|
||||
return 'bg-amber-100 text-amber-800';
|
||||
case 'info':
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-700';
|
||||
}
|
||||
}
|
||||
|
||||
function LogsPageContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const initialAppId = searchParams.get('appId') || '';
|
||||
|
||||
const [appId, setAppId] = useState(initialAppId);
|
||||
const [workload, setWorkload] = useState('');
|
||||
const [level, setLevel] = useState('');
|
||||
const [search, setSearch] = useState('');
|
||||
const [timeRange, setTimeRange] = useState('24h');
|
||||
const [page, setPage] = useState(1);
|
||||
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||
|
||||
// Fetch user's applications
|
||||
const { data: applications } = useQuery<Application[]>({
|
||||
queryKey: ['applications'],
|
||||
queryFn: async () => {
|
||||
const { data } = await axios.get('/api/applications');
|
||||
return data;
|
||||
},
|
||||
useEffect(() => {
|
||||
if (initialAppId) setAppId(initialAppId);
|
||||
}, [initialAppId]);
|
||||
|
||||
const { data: loggingStatus } = useQuery({
|
||||
queryKey: ['logs-status'],
|
||||
queryFn: () => api.get('/logs/status').then((r) => r.data as { available: boolean }),
|
||||
});
|
||||
|
||||
// Fetch logs query
|
||||
const { data: logsResult, isLoading, refetch, isFetching } = useQuery({
|
||||
queryKey: ['logs', filters, timeRange],
|
||||
queryFn: async () => {
|
||||
const params = new URLSearchParams();
|
||||
if (filters.appId) params.append('appId', filters.appId);
|
||||
if (filters.level) params.append('level', filters.level);
|
||||
if (filters.search) params.append('search', filters.search);
|
||||
|
||||
if (timeRange !== 'custom') {
|
||||
const now = new Date();
|
||||
const from = new Date();
|
||||
switch (timeRange) {
|
||||
case '1h': from.setHours(now.getHours() - 1); break;
|
||||
case '6h': from.setHours(now.getHours() - 6); break;
|
||||
case '24h': from.setDate(now.getDate() - 1); break;
|
||||
case '7d': from.setDate(now.getDate() - 7); break;
|
||||
}
|
||||
params.append('from', from.toISOString());
|
||||
} else {
|
||||
if (filters.from) params.append('from', filters.from);
|
||||
if (filters.to) params.append('to', filters.to);
|
||||
}
|
||||
const { data: applications = [] } = useQuery<Application[]>({
|
||||
queryKey: ['applications'],
|
||||
queryFn: () => api.get('/applications').then((r) => r.data),
|
||||
});
|
||||
|
||||
const { data } = await axios.get(`/api/logs?${params.toString()}`);
|
||||
return data;
|
||||
const buildTimeRange = () => {
|
||||
const now = new Date();
|
||||
const from = new Date();
|
||||
switch (timeRange) {
|
||||
case '1h':
|
||||
from.setHours(now.getHours() - 1);
|
||||
break;
|
||||
case '6h':
|
||||
from.setHours(now.getHours() - 6);
|
||||
break;
|
||||
case '7d':
|
||||
from.setDate(now.getDate() - 7);
|
||||
break;
|
||||
default:
|
||||
from.setDate(now.getDate() - 1);
|
||||
}
|
||||
return { from: from.toISOString(), to: now.toISOString() };
|
||||
};
|
||||
|
||||
const { from, to } = buildTimeRange();
|
||||
|
||||
const {
|
||||
data: logsResult,
|
||||
isLoading,
|
||||
isFetching,
|
||||
refetch,
|
||||
error,
|
||||
} = useQuery<LogSearchResult>({
|
||||
queryKey: ['logs', appId, workload, level, search, timeRange, page],
|
||||
queryFn: () => {
|
||||
const params = new URLSearchParams();
|
||||
if (appId) params.set('appId', appId);
|
||||
if (workload) params.set('workload', workload);
|
||||
if (level) params.set('level', level);
|
||||
if (search) params.set('search', search);
|
||||
params.set('from', from);
|
||||
params.set('to', to);
|
||||
params.set('page', String(page));
|
||||
params.set('limit', '100');
|
||||
return api.get(`/logs?${params.toString()}`).then((r) => r.data);
|
||||
},
|
||||
enabled: loggingStatus?.available !== false,
|
||||
refetchInterval: autoRefresh ? 5000 : false,
|
||||
});
|
||||
|
||||
// Fetch log stats
|
||||
const { data: logStats } = useQuery({
|
||||
queryKey: ['logStats', filters.appId, timeRange],
|
||||
queryFn: async () => {
|
||||
const { data: stats } = useQuery<LogStatsResult>({
|
||||
queryKey: ['log-stats', appId, workload, timeRange],
|
||||
queryFn: () => {
|
||||
const params = new URLSearchParams();
|
||||
if (filters.appId) params.append('appId', filters.appId);
|
||||
params.append('period', timeRange === 'custom' ? '24h' : timeRange);
|
||||
|
||||
const { data } = await axios.get(`/api/logs/stats?${params.toString()}`);
|
||||
return data;
|
||||
if (appId) params.set('appId', appId);
|
||||
if (workload) params.set('workload', workload);
|
||||
params.set('period', timeRange);
|
||||
return api.get(`/logs/stats?${params.toString()}`).then((r) => r.data);
|
||||
},
|
||||
enabled: loggingStatus?.available !== false,
|
||||
});
|
||||
|
||||
// Fetch recent errors
|
||||
const { data: recentErrors } = useQuery({
|
||||
queryKey: ['recentErrors', filters.appId],
|
||||
queryFn: async () => {
|
||||
const params = new URLSearchParams();
|
||||
if (filters.appId) params.append('appId', filters.appId);
|
||||
params.append('limit', '10');
|
||||
|
||||
const { data } = await axios.get(`/api/logs/errors?${params.toString()}`);
|
||||
return data;
|
||||
},
|
||||
});
|
||||
const totalPages = logsResult ? Math.max(1, Math.ceil(logsResult.total / logsResult.limit)) : 1;
|
||||
|
||||
const getLevelBadgeClass = (level: string) => {
|
||||
const levelItem = LOG_LEVELS.find(l => l.value === level.toLowerCase());
|
||||
return levelItem?.color || 'bg-gray-100';
|
||||
};
|
||||
if (loggingStatus && !loggingStatus.available) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto card p-8 text-center">
|
||||
<AlertCircle className="w-12 h-12 text-amber-500 mx-auto mb-4" />
|
||||
<h1 className="text-xl font-bold text-gray-900 mb-2">Logging not available</h1>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Central Elasticsearch is not deployed on the cluster. Enable the logging addon when deploying an app,
|
||||
and ask an administrator to deploy the logging stack.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8" dir="rtl">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900">لاگهای اپلیکیشن</h1>
|
||||
<p className="text-gray-600 mt-2">
|
||||
مشاهده و جستجو در لاگهای اپلیکیشنهای خود
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
|
||||
<FileText className="w-6 h-6" /> Logs
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Application, Redis, RabbitMQ, and database logs in one place
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="bg-white rounded-xl shadow-sm border p-6 mb-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{/* App Filter */}
|
||||
<div className="card p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
اپلیکیشن
|
||||
</label>
|
||||
<label className="text-xs font-medium text-gray-600 block mb-1">Application</label>
|
||||
<select
|
||||
value={filters.appId}
|
||||
onChange={(e) => setFilters({ ...filters, appId: e.target.value })}
|
||||
className="w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value={appId}
|
||||
onChange={(e) => {
|
||||
setAppId(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
className="input w-full text-sm"
|
||||
>
|
||||
<option value="">همه اپلیکیشنها</option>
|
||||
{applications?.map((app) => (
|
||||
<option value="">All applications</option>
|
||||
{applications.map((app) => (
|
||||
<option key={app.id} value={app.id}>
|
||||
{app.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Level Filter */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
سطح لاگ
|
||||
</label>
|
||||
<label className="text-xs font-medium text-gray-600 block mb-1">Source</label>
|
||||
<select
|
||||
value={filters.level}
|
||||
onChange={(e) => setFilters({ ...filters, level: e.target.value })}
|
||||
className="w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value={workload}
|
||||
onChange={(e) => {
|
||||
setWorkload(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
className="input w-full text-sm"
|
||||
>
|
||||
{LOG_LEVELS.map((level) => (
|
||||
<option key={level.value} value={level.value}>
|
||||
{level.label}
|
||||
{WORKLOADS.map((w) => (
|
||||
<option key={w.value || 'all'} value={w.value}>
|
||||
{w.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Time Range */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
بازه زمانی
|
||||
</label>
|
||||
<label className="text-xs font-medium text-gray-600 block mb-1">Level</label>
|
||||
<select
|
||||
value={level}
|
||||
onChange={(e) => {
|
||||
setLevel(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
className="input w-full text-sm"
|
||||
>
|
||||
{LOG_LEVELS.map((l) => (
|
||||
<option key={l.value || 'all'} value={l.value}>
|
||||
{l.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-gray-600 block mb-1">Time range</label>
|
||||
<select
|
||||
value={timeRange}
|
||||
onChange={(e) => setTimeRange(e.target.value)}
|
||||
className="w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
||||
onChange={(e) => {
|
||||
setTimeRange(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
className="input w-full text-sm"
|
||||
>
|
||||
{TIME_RANGES.map((range) => (
|
||||
<option key={range.value} value={range.value}>
|
||||
{range.label}
|
||||
{TIME_RANGES.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
جستجو در متن
|
||||
</label>
|
||||
<label className="text-xs font-medium text-gray-600 block mb-1">Search</label>
|
||||
<input
|
||||
type="text"
|
||||
value={filters.search}
|
||||
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
||||
placeholder="جستجو..."
|
||||
className="w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setSearch(e.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
placeholder="Search message..."
|
||||
className="input w-full text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom date range */}
|
||||
{timeRange === 'custom' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
از تاریخ
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={filters.from}
|
||||
onChange={(e) => setFilters({ ...filters, from: e.target.value })}
|
||||
className="w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
تا تاریخ
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={filters.to}
|
||||
onChange={(e) => setFilters({ ...filters, to: e.target.value })}
|
||||
className="w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex items-center gap-4 mt-4">
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50"
|
||||
>
|
||||
{isFetching ? 'در حال بارگذاری...' : 'بروزرسانی'}
|
||||
<div className="flex flex-wrap items-center gap-3 mt-4">
|
||||
<button type="button" onClick={() => refetch()} disabled={isFetching} className="btn-primary text-sm">
|
||||
{isFetching ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 inline animate-spin mr-1" /> Loading
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="w-4 h-4 inline mr-1" /> Refresh
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<label className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoRefresh}
|
||||
onChange={(e) => setAutoRefresh(e.target.checked)}
|
||||
className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
||||
className="rounded"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">بروزرسانی خودکار (هر 5 ثانیه)</span>
|
||||
Auto-refresh (5s)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
{logStats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<div className="bg-white rounded-xl shadow-sm border p-4">
|
||||
<div className="text-sm text-gray-500">کل لاگها</div>
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
{logStats.meta?.period || '-'}
|
||||
</div>
|
||||
{stats && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div className="card p-4">
|
||||
<p className="text-xs text-gray-500">Total ({stats.period})</p>
|
||||
<p className="text-2xl font-bold text-gray-900">{stats.total}</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl shadow-sm border p-4 border-red-200">
|
||||
<div className="text-sm text-red-500">خطاها</div>
|
||||
<div className="text-2xl font-bold text-red-600">
|
||||
{recentErrors?.meta?.limit || 0}
|
||||
</div>
|
||||
<div className="card p-4 border-red-100">
|
||||
<p className="text-xs text-red-600">Errors</p>
|
||||
<p className="text-2xl font-bold text-red-700">{stats.errors}</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl shadow-sm border p-4 border-yellow-200">
|
||||
<div className="text-sm text-yellow-600">هشدارها</div>
|
||||
<div className="text-2xl font-bold text-yellow-600">-</div>
|
||||
<div className="card p-4 border-amber-100">
|
||||
<p className="text-xs text-amber-600">Warnings</p>
|
||||
<p className="text-2xl font-bold text-amber-700">{stats.warnings}</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl shadow-sm border p-4">
|
||||
<div className="text-sm text-gray-500">اپلیکیشن فعال</div>
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
{filters.appId
|
||||
? applications?.find(a => a.id === filters.appId)?.name || '-'
|
||||
: `${applications?.length || 0} اپلیکیشن`}
|
||||
</div>
|
||||
<div className="card p-4">
|
||||
<p className="text-xs text-gray-500">Sources</p>
|
||||
<p className="text-sm font-mono text-gray-800 mt-1">
|
||||
{Object.entries(stats.byWorkload || {})
|
||||
.map(([k, v]) => `${k}: ${v}`)
|
||||
.join(' · ') || '—'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Query Info */}
|
||||
{logsResult && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
|
||||
<h3 className="font-medium text-blue-900 mb-2">اطلاعات کوئری</h3>
|
||||
<p className="text-sm text-blue-700 mb-2">{logsResult.usage?.description}</p>
|
||||
<div className="bg-white rounded-lg p-3 font-mono text-sm overflow-x-auto" dir="ltr">
|
||||
<pre>{JSON.stringify(logsResult.query, null, 2)}</pre>
|
||||
</div>
|
||||
<p className="text-xs text-blue-600 mt-2">
|
||||
💡 این کوئری را میتوانید در Elasticsearch یا Kibana اجرا کنید.
|
||||
</p>
|
||||
{error && (
|
||||
<div className="card p-4 border-red-200 bg-red-50 text-red-800 text-sm">
|
||||
Failed to load logs. Ensure logging is enabled on your application and Elasticsearch is running.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Logs Table */}
|
||||
<div className="bg-white rounded-xl shadow-sm border overflow-hidden">
|
||||
<div className="px-6 py-4 border-b flex items-center justify-between">
|
||||
<h2 className="font-semibold text-gray-900">لاگها</h2>
|
||||
{isFetching && (
|
||||
<span className="text-sm text-gray-500 flex items-center gap-2">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
در حال بارگذاری...
|
||||
<div className="card overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
|
||||
<h2 className="font-semibold text-gray-900">Log entries</h2>
|
||||
{logsResult && (
|
||||
<span className="text-xs text-gray-500">
|
||||
{logsResult.total} total · page {page}/{totalPages}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
در حال بارگذاری لاگها...
|
||||
<div className="p-12 text-center text-gray-500">
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-2" />
|
||||
Loading logs...
|
||||
</div>
|
||||
) : !logsResult?.hits?.length ? (
|
||||
<div className="p-12 text-center text-gray-500 text-sm">
|
||||
No logs found for the selected filters.
|
||||
{!appId && <p className="mt-2">Deploy an app with logging enabled to start collecting logs.</p>}
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<div className="overflow-x-auto max-h-[600px] overflow-y-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50 sticky top-0">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">
|
||||
زمان
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">
|
||||
سطح
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">
|
||||
اپلیکیشن
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">
|
||||
پیام
|
||||
</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Time</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Level</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500">App</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Source</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{/* Sample rows - in production, this would come from actual ES query results */}
|
||||
<tr className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3 text-sm text-gray-900 font-mono" dir="ltr">
|
||||
{new Date().toISOString().slice(0, 19).replace('T', ' ')}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${getLevelBadgeClass('info')}`}>
|
||||
INFO
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-900">
|
||||
نمونه اپلیکیشن
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600 font-mono" dir="ltr">
|
||||
برای مشاهده لاگها، کوئری بالا را در Elasticsearch اجرا کنید
|
||||
</td>
|
||||
</tr>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{logsResult.hits.map((entry: LogEntry) => (
|
||||
<tr key={entry.id} className="hover:bg-gray-50 align-top">
|
||||
<td className="px-3 py-2 font-mono text-xs text-gray-600 whitespace-nowrap">
|
||||
{new Date(entry.timestamp).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${levelBadgeClass(entry.level)}`}>
|
||||
{entry.level?.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-gray-800">{entry.applicationName || '—'}</td>
|
||||
<td className="px-3 py-2 text-gray-600 capitalize">{entry.workload || 'app'}</td>
|
||||
<td className="px-3 py-2 font-mono text-xs text-gray-800 break-all max-w-xl">
|
||||
{entry.message}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination info */}
|
||||
{logsResult?.meta && (
|
||||
<div className="px-6 py-4 border-t bg-gray-50 text-sm text-gray-500">
|
||||
صفحه {logsResult.meta.page} | {logsResult.meta.limit} آیتم در هر صفحه
|
||||
{logsResult && logsResult.total > logsResult.limit && (
|
||||
<div className="px-4 py-3 border-t border-gray-100 flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
className="btn-secondary text-sm disabled:opacity-40"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 inline" /> Previous
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
className="btn-secondary text-sm disabled:opacity-40"
|
||||
>
|
||||
Next <ChevronRight className="w-4 h-4 inline" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Recent Errors */}
|
||||
{recentErrors && (
|
||||
<div className="bg-white rounded-xl shadow-sm border overflow-hidden mt-6">
|
||||
<div className="px-6 py-4 border-b bg-red-50">
|
||||
<h2 className="font-semibold text-red-900">آخرین خطاها</h2>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
برای مشاهده خطاهای اخیر، کوئری زیر را در Elasticsearch اجرا کنید:
|
||||
</p>
|
||||
<div className="bg-gray-100 rounded-lg p-3 mt-2 font-mono text-sm overflow-x-auto" dir="ltr">
|
||||
<pre>{JSON.stringify(recentErrors.query, null, 2)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Kibana Link */}
|
||||
<div className="bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-200 rounded-xl p-6 mt-6">
|
||||
<h3 className="font-semibold text-purple-900 mb-2">🔍 مشاهده در Kibana</h3>
|
||||
<p className="text-purple-700 mb-4">
|
||||
برای تجربه بهتر در مشاهده و آنالیز لاگها، از Kibana استفاده کنید.
|
||||
</p>
|
||||
<div className="bg-white rounded-lg p-3 font-mono text-sm" dir="ltr">
|
||||
kubectl port-forward svc/kibana 5601:5601 -n logging
|
||||
</div>
|
||||
<p className="text-sm text-purple-600 mt-2">
|
||||
سپس به آدرس http://localhost:5601 بروید
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LogsPage() {
|
||||
return (
|
||||
<Suspense fallback={<div className="p-8 text-center text-gray-500">Loading...</div>}>
|
||||
<LogsPageContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user