refactor(quality): Q29 前端巨型组件拆分 — AlertCenter 542L→312L (-42%), 提取 4 个受控组件 (AlertsToolbar 89L 筛选工具栏 + AlertsTab 149L 告警列表表格+分页 + ContactsTab 87L 联系人卡片网格 + ContactGroupsTab 88L 联系组卡片网格), 客户端搜索过滤逻辑移入 AlertsTab, 删除确认逻辑下沉到子组件, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓ (18.71s), go build=0, 17/17 测试通过
This commit is contained in:
attacker committed
1 parent
4c44fdde8b
commit
803bffd0e3
7 files changed
+496
-275
No files matched your search
@@ -1,34 +1,25 @@
|
||||
// 告警中心主组件 — TanStack Query 编排 // Logan.Li
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
AlertTriangle, CheckCircle, Search, RefreshCw,
|
||||
Eye, Check, VolumeX, Plus,
|
||||
} from 'lucide-react';
|
||||
import { AlertTriangle, RefreshCw, Plus } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { StatStrip } from '@/components/ui/stat-strip';
|
||||
import {
|
||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { toast } from 'sonner';
|
||||
import { PageShell } from '@/components/layout/PageShell';
|
||||
import { PageEmpty } from '@/components/layout/PageEmpty';
|
||||
import { PageLoading } from '@/components/layout/PageLoading';
|
||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
||||
import { alertCenterApi, alertApi } from '@/api';
|
||||
import { useAlerts, useUnifiedAlertRules, useMetricCatalog, useAlertMutations } from '@/hooks/api';
|
||||
import {
|
||||
type Alert, getSeverityBadge, getStatusBadge, getChannelTypeLabel,
|
||||
} from './alert-center-helpers';
|
||||
import { type Alert } from './alert-center-helpers';
|
||||
import { AlertDetailDialog, AlertSilenceDialog } from './AlertCenterDetail';
|
||||
import { MetricCatalogTab } from './MetricCatalogTab';
|
||||
import { AlertRulesTab } from './AlertRulesTab';
|
||||
import { ContactDialog } from './ContactDialog';
|
||||
import { ContactGroupDialog } from './ContactGroupDialog';
|
||||
import { NotifyPolicyTab } from './NotifyPolicyTab';
|
||||
import AlertsToolbar from './AlertsToolbar';
|
||||
import AlertsTab from './AlertsTab';
|
||||
import ContactsTab from './ContactsTab';
|
||||
import ContactGroupsTab from './ContactGroupsTab';
|
||||
|
||||
import type { UnifiedAlertRule } from '@/api';
|
||||
import type { Contact, ContactGroup } from './alert-center-helpers';
|
||||
@@ -181,63 +172,6 @@ const AlertCenter: React.FC = () => {
|
||||
{ id: 'notify', label: t('monitor.alertCenterPanel.notifyPolicy') },
|
||||
];
|
||||
|
||||
const alertsToolbar = activeTab === 'alerts' ? (
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 w-full">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-[280px]">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder={t('alert.searchPlaceholder')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-8 h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<Select value={severityFilter} onValueChange={(v) => handleFilterChange('severity', v)}>
|
||||
<SelectTrigger className="w-[100px] h-8 text-xs">
|
||||
<SelectValue placeholder={t('alert.table.severity')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t('alert.allSeverity')}</SelectItem>
|
||||
<SelectItem value="critical">{t('alert.severity.critical')}</SelectItem>
|
||||
<SelectItem value="warning">{t('alert.severity.warning')}</SelectItem>
|
||||
<SelectItem value="info">{t('alert.severity.info')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={statusFilter} onValueChange={(v) => handleFilterChange('status', v)}>
|
||||
<SelectTrigger className="w-[100px] h-8 text-xs">
|
||||
<SelectValue placeholder={t('common.status')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t('alert.allStatus')}</SelectItem>
|
||||
<SelectItem value="firing">{t('alert.status.firing')}</SelectItem>
|
||||
<SelectItem value="acknowledged">{t('alert.status.acknowledged')}</SelectItem>
|
||||
<SelectItem value="resolved">{t('alert.status.resolved')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={sourceFilter} onValueChange={(v) => handleFilterChange('source', v)}>
|
||||
<SelectTrigger className="w-[120px] h-8 text-xs">
|
||||
<SelectValue placeholder={t('monitor.alertCenterPanel.sourcePlaceholder')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t('monitor.alertCenterPanel.allSources')}</SelectItem>
|
||||
<SelectItem value="host">{t('monitor.alertCenterPanel.hostMonitor')}</SelectItem>
|
||||
<SelectItem value="middleware">{t('monitor.alertCenterPanel.middlewareMonitor')}</SelectItem>
|
||||
<SelectItem value="snmp">{t('monitor.alertCenterPanel.snmpMonitor')}</SelectItem>
|
||||
<SelectItem value="site">{t('monitor.alertCenterPanel.siteProbe')}</SelectItem>
|
||||
<SelectItem value="log">{t('monitor.alertCenterPanel.logAlert')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs dg-text-muted">
|
||||
<span>{t('alert.totalItems', { count: total })}</span>
|
||||
<Button variant="outline" size="sm" onClick={() => refetchAlerts()} disabled={fetchingAlerts} className="h-7 text-xs px-2 dg-btn-secondary">
|
||||
<RefreshCw className={cn('w-3 h-3 mr-1', fetchingAlerts && 'animate-spin')} />{t('common.refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : undefined;
|
||||
|
||||
// eslint-disable-next-line react-hooks/purity
|
||||
const nowMs = Date.now();
|
||||
|
||||
@@ -250,7 +184,19 @@ const AlertCenter: React.FC = () => {
|
||||
tabs={pageTabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
toolbar={alertsToolbar}
|
||||
toolbar={activeTab === 'alerts' ? (
|
||||
<AlertsToolbar
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
severityFilter={severityFilter}
|
||||
statusFilter={statusFilter}
|
||||
sourceFilter={sourceFilter}
|
||||
onFilterChange={handleFilterChange}
|
||||
total={total}
|
||||
fetchingAlerts={fetchingAlerts}
|
||||
onRefresh={() => refetchAlerts()}
|
||||
/>
|
||||
) : undefined}
|
||||
metrics={(
|
||||
<StatStrip
|
||||
items={[
|
||||
@@ -281,115 +227,20 @@ const AlertCenter: React.FC = () => {
|
||||
) : undefined}
|
||||
>
|
||||
{activeTab === 'alerts' && (
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium">{t('alert.table.alertInfo')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-16">{t('alert.table.severity')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-16">{t('alert.table.status')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-24">{t('alert.table.source')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-20">{t('alert.table.duration')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-28">{t('alert.table.actions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{loading ? (
|
||||
<tr><td colSpan={6} className="px-3 py-2"><PageLoading label={t('alert.loading')} /></td></tr>
|
||||
) : alerts.length === 0 ? (
|
||||
<tr><td colSpan={6} className="px-3 py-2"><PageEmpty title={t('alert.noAlerts')} className="py-6" /></td></tr>
|
||||
) : (
|
||||
alerts.filter(alert => {
|
||||
// 客户端也保留关键词搜索过滤
|
||||
if (!searchQuery) return true;
|
||||
const q = searchQuery.toLowerCase();
|
||||
return alert.title.toLowerCase().includes(q) ||
|
||||
alert.description.toLowerCase().includes(q) ||
|
||||
alert.source.toLowerCase().includes(q);
|
||||
}).map((alert) => (
|
||||
<tr key={alert.id} className="hover:bg-muted/50">
|
||||
<td className="px-3 py-2">
|
||||
<div className="font-medium text-xs">{alert.title}</div>
|
||||
<div className="text-xs text-muted-foreground line-clamp-1">{alert.description}</div>
|
||||
<div className="flex gap-1 mt-0.5">
|
||||
{Object.entries(alert.labels).slice(0, 2).map(([k, v]) => (
|
||||
<Badge key={k} variant="outline" className="text-[10px] px-1 py-0">{k}={v}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2">{getSeverityBadge(alert.severity)}</td>
|
||||
<td className="px-3 py-2">{getStatusBadge(alert.status)}</td>
|
||||
<td className="px-3 py-2 text-xs">
|
||||
<div>{alert.source}</div>
|
||||
<div className="text-muted-foreground text-[10px]">{alert.service}</div>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-muted-foreground">
|
||||
{alert.status === 'resolved' && alert.resolvedAt
|
||||
? t('alert.minutesShort', { count: Math.floor((new Date(alert.resolvedAt).getTime() - new Date(alert.startedAt).getTime()) / 60000) })
|
||||
: t('alert.minutesShort', { count: Math.floor((nowMs - new Date(alert.startedAt).getTime()) / 60000) })}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-0.5">
|
||||
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"
|
||||
onClick={() => { setSelectedAlert(alert); setDetailOpen(true); }}>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
{alert.status === 'firing' && (
|
||||
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"
|
||||
onClick={() => handleAcknowledge(alert.id)}>
|
||||
<Check className="w-3.5 h-3.5 dg-text-blue" />
|
||||
</Button>
|
||||
)}
|
||||
{(alert.status === 'firing' || alert.status === 'acknowledged') && (
|
||||
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"
|
||||
onClick={() => handleResolve(alert.id)}>
|
||||
<CheckCircle className="w-3.5 h-3.5 text-green-600" />
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"
|
||||
onClick={() => { setSelectedAlert(alert); setSilenceOpen(true); }}>
|
||||
<VolumeX className="w-3.5 h-3.5 text-orange-600" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 分页控件 */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between px-3 py-2 border-t text-xs">
|
||||
<span className="text-muted-foreground">{t('alert.pageInfo', { page, totalPages, total })}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs px-2"
|
||||
disabled={page <= 1} onClick={() => setPage(p => p - 1)}>
|
||||
{t('alert.prevPage')}
|
||||
</Button>
|
||||
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
|
||||
const start = Math.max(1, Math.min(page - 2, totalPages - 4));
|
||||
const pn = start + i;
|
||||
if (pn > totalPages) return null;
|
||||
return (
|
||||
<Button key={pn} variant={pn === page ? 'default' : 'outline'} size="sm"
|
||||
className="h-7 min-w-[28px] text-xs px-1"
|
||||
onClick={() => setPage(pn)}>
|
||||
{pn}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs px-2"
|
||||
disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>
|
||||
{t('alert.nextPage')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<AlertsTab
|
||||
alerts={alerts}
|
||||
loading={loading}
|
||||
searchQuery={searchQuery}
|
||||
nowMs={nowMs}
|
||||
total={total}
|
||||
totalPages={totalPages}
|
||||
page={page}
|
||||
onAcknowledge={handleAcknowledge}
|
||||
onResolve={handleResolve}
|
||||
onOpenDetail={(alert) => { setSelectedAlert(alert); setDetailOpen(true); }}
|
||||
onOpenSilence={(alert) => { setSelectedAlert(alert); setSilenceOpen(true); }}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'rules' && (
|
||||
@@ -411,103 +262,22 @@ const AlertCenter: React.FC = () => {
|
||||
{activeTab === 'metrics' && <MetricCatalogTab />}
|
||||
|
||||
{activeTab === 'contacts' && (
|
||||
contacts.length === 0 ? (
|
||||
<PageEmpty title={t('monitor.alertCenterPanel.noContactsTitle')} description={t('monitor.alertCenterPanel.noContactsDesc')} />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{contacts.map((c) => (
|
||||
<Card key={c.id} className="hover:border-primary/50 transition-colors">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-sm">{c.name}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-1 text-xs text-muted-foreground">
|
||||
{c.phone && <div>📱 {c.phone}</div>}
|
||||
{c.email && <div>📧 {c.email}</div>}
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{c.channel_type && (
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{getChannelTypeLabel(c.channel_type)}
|
||||
</Badge>
|
||||
)}
|
||||
{c.webhook_url && (
|
||||
<span className="text-[10px] text-muted-foreground truncate max-w-[200px]" title={c.webhook_url}>
|
||||
{c.webhook_url}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-1.5 pt-1.5">
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs flex-1"
|
||||
onClick={() => { setEditingContact(c); setContactDialogOpen(true); }}>
|
||||
{t("monitor.alertCenterPanel.edit")}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs"
|
||||
onClick={async () => {
|
||||
const ok = await _confirm({ title: t('alert.deleteContact'), description: `${c.name}`, confirmText: t('common.delete'), variant: 'destructive' });
|
||||
if (!ok) return;
|
||||
try { await alertApi.deleteContact(c.id); toast.success(t('alert.deleted')); fetchContacts(); }
|
||||
catch { toast.error(t('alert.deleteFailed')); }
|
||||
}}>
|
||||
{t("monitor.alertCenterPanel.delete")}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
<ContactsTab
|
||||
contacts={contacts}
|
||||
onEdit={(c) => { setEditingContact(c); setContactDialogOpen(true); }}
|
||||
onDelete={async (id) => { await alertApi.deleteContact(id); fetchContacts(); }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'notify' && <NotifyPolicyTab />}
|
||||
|
||||
{activeTab === 'groups' && (
|
||||
contactGroups.length === 0 ? (
|
||||
<PageEmpty title={t('monitor.alertCenterPanel.noGroupsTitle')} description={t('monitor.alertCenterPanel.noGroupsDesc')} />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{contactGroups.map((g) => {
|
||||
let cids: number[] = [];
|
||||
try { cids = JSON.parse(g.contact_ids || '[]'); } catch { /* ignore */ }
|
||||
const memberNames = contacts
|
||||
.filter(c => cids.includes(c.id))
|
||||
.map(c => c.name);
|
||||
return (
|
||||
<Card key={g.id} className="hover:border-primary/50 transition-colors">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-base">{g.group_name}</CardTitle>
|
||||
<Badge variant="secondary">{t('alert.peopleCount', { count: cids.length })}</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-2">
|
||||
{g.notes && <p className="text-sm text-muted-foreground">{g.notes}</p>}
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{memberNames.map(name => (
|
||||
<Badge key={name} variant="outline" className="text-xs">{name}</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button variant="outline" size="sm" className="flex-1"
|
||||
onClick={() => { setEditingGroup(g); setGroupDialogOpen(true); }}>
|
||||
{t("monitor.alertCenterPanel.edit")}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={async () => {
|
||||
const ok = await _confirm({ title: t('alert.deleteGroup'), description: `${g.group_name}`, confirmText: t('common.delete'), variant: 'destructive' });
|
||||
if (!ok) return;
|
||||
try { await alertApi.deleteContactGroup(g.id); toast.success(t('alert.deleted')); fetchContactGroups(); }
|
||||
catch { toast.error(t('alert.deleteFailed')); }
|
||||
}}>
|
||||
{t("monitor.alertCenterPanel.delete")}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
<ContactGroupsTab
|
||||
contactGroups={contactGroups}
|
||||
contacts={contacts}
|
||||
onEdit={(g) => { setEditingGroup(g); setGroupDialogOpen(true); }}
|
||||
onDelete={async (id) => { await alertApi.deleteContactGroup(id); fetchContactGroups(); }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<AlertDetailDialog
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
// 告警中心 — 告警列表 Tab（表格 + 分页）
|
||||
// Logan.Li — 从 AlertCenter 提取的受控展示组件
|
||||
import React from 'react';
|
||||
import { Eye, Check, CheckCircle, VolumeX } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { PageEmpty } from '@/components/layout/PageEmpty';
|
||||
import { PageLoading } from '@/components/layout/PageLoading';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { type Alert, getSeverityBadge, getStatusBadge } from './alert-center-helpers';
|
||||
|
||||
export interface AlertsTabProps {
|
||||
alerts: Alert[];
|
||||
loading: boolean;
|
||||
searchQuery: string;
|
||||
nowMs: number;
|
||||
total: number;
|
||||
totalPages: number;
|
||||
page: number;
|
||||
onAcknowledge: (id: string) => void;
|
||||
onResolve: (id: string) => void;
|
||||
onOpenDetail: (alert: Alert) => void;
|
||||
onOpenSilence: (alert: Alert) => void;
|
||||
onPageChange: (page: number) => void;
|
||||
}
|
||||
|
||||
const AlertsTab: React.FC<AlertsTabProps> = ({
|
||||
alerts, loading, searchQuery, nowMs,
|
||||
total, totalPages, page,
|
||||
onAcknowledge, onResolve, onOpenDetail, onOpenSilence, onPageChange,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const filteredAlerts = alerts.filter(alert => {
|
||||
if (!searchQuery) return true;
|
||||
const q = searchQuery.toLowerCase();
|
||||
return alert.title.toLowerCase().includes(q) ||
|
||||
alert.description.toLowerCase().includes(q) ||
|
||||
alert.source.toLowerCase().includes(q);
|
||||
});
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium">{t('alert.table.alertInfo')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-16">{t('alert.table.severity')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-16">{t('alert.table.status')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-24">{t('alert.table.source')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-20">{t('alert.table.duration')}</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium w-28">{t('alert.table.actions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{loading ? (
|
||||
<tr><td colSpan={6} className="px-3 py-2"><PageLoading label={t('alert.loading')} /></td></tr>
|
||||
) : filteredAlerts.length === 0 ? (
|
||||
<tr><td colSpan={6} className="px-3 py-2"><PageEmpty title={t('alert.noAlerts')} className="py-6" /></td></tr>
|
||||
) : (
|
||||
filteredAlerts.map((alert) => (
|
||||
<tr key={alert.id} className="hover:bg-muted/50">
|
||||
<td className="px-3 py-2">
|
||||
<div className="font-medium text-xs">{alert.title}</div>
|
||||
<div className="text-xs text-muted-foreground line-clamp-1">{alert.description}</div>
|
||||
<div className="flex gap-1 mt-0.5">
|
||||
{Object.entries(alert.labels).slice(0, 2).map(([k, v]) => (
|
||||
<Badge key={k} variant="outline" className="text-[10px] px-1 py-0">{k}={v}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2">{getSeverityBadge(alert.severity)}</td>
|
||||
<td className="px-3 py-2">{getStatusBadge(alert.status)}</td>
|
||||
<td className="px-3 py-2 text-xs">
|
||||
<div>{alert.source}</div>
|
||||
<div className="text-muted-foreground text-[10px]">{alert.service}</div>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-muted-foreground">
|
||||
{alert.status === 'resolved' && alert.resolvedAt
|
||||
? t('alert.minutesShort', { count: Math.floor((new Date(alert.resolvedAt).getTime() - new Date(alert.startedAt).getTime()) / 60000) })
|
||||
: t('alert.minutesShort', { count: Math.floor((nowMs - new Date(alert.startedAt).getTime()) / 60000) })}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-0.5">
|
||||
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"
|
||||
onClick={() => onOpenDetail(alert)}>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
{alert.status === 'firing' && (
|
||||
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"
|
||||
onClick={() => onAcknowledge(alert.id)}>
|
||||
<Check className="w-3.5 h-3.5 dg-text-blue" />
|
||||
</Button>
|
||||
)}
|
||||
{(alert.status === 'firing' || alert.status === 'acknowledged') && (
|
||||
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"
|
||||
onClick={() => onResolve(alert.id)}>
|
||||
<CheckCircle className="w-3.5 h-3.5 text-green-600" />
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" className="h-7 w-7 p-0"
|
||||
onClick={() => onOpenSilence(alert)}>
|
||||
<VolumeX className="w-3.5 h-3.5 text-orange-600" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 分页控件 */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between px-3 py-2 border-t text-xs">
|
||||
<span className="text-muted-foreground">{t('alert.pageInfo', { page, totalPages, total })}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs px-2"
|
||||
disabled={page <= 1} onClick={() => onPageChange(page - 1)}>
|
||||
{t('alert.prevPage')}
|
||||
</Button>
|
||||
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
|
||||
const start = Math.max(1, Math.min(page - 2, totalPages - 4));
|
||||
const pn = start + i;
|
||||
if (pn > totalPages) return null;
|
||||
return (
|
||||
<Button key={pn} variant={pn === page ? 'default' : 'outline'} size="sm"
|
||||
className="h-7 min-w-[28px] text-xs px-1"
|
||||
onClick={() => onPageChange(pn)}>
|
||||
{pn}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs px-2"
|
||||
disabled={page >= totalPages} onClick={() => onPageChange(page + 1)}>
|
||||
{t('alert.nextPage')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertsTab;
|
||||
@@ -0,0 +1,89 @@
|
||||
// 告警中心 — 筛选工具栏（搜索 + 严重级别/状态/来源下拉 + 刷新）
|
||||
// Logan.Li — 从 AlertCenter 提取的受控展示组件
|
||||
import React from 'react';
|
||||
import { Search, RefreshCw } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export interface AlertsToolbarProps {
|
||||
searchQuery: string;
|
||||
onSearchChange: (value: string) => void;
|
||||
severityFilter: string;
|
||||
statusFilter: string;
|
||||
sourceFilter: string;
|
||||
onFilterChange: (type: 'severity' | 'status' | 'source', value: string) => void;
|
||||
total: number;
|
||||
fetchingAlerts: boolean;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
const AlertsToolbar: React.FC<AlertsToolbarProps> = ({
|
||||
searchQuery, onSearchChange,
|
||||
severityFilter, statusFilter, sourceFilter, onFilterChange,
|
||||
total, fetchingAlerts, onRefresh,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 w-full">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-[280px]">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder={t('alert.searchPlaceholder')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="pl-8 h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<Select value={severityFilter} onValueChange={(v) => onFilterChange('severity', v)}>
|
||||
<SelectTrigger className="w-[100px] h-8 text-xs">
|
||||
<SelectValue placeholder={t('alert.table.severity')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t('alert.allSeverity')}</SelectItem>
|
||||
<SelectItem value="critical">{t('alert.severity.critical')}</SelectItem>
|
||||
<SelectItem value="warning">{t('alert.severity.warning')}</SelectItem>
|
||||
<SelectItem value="info">{t('alert.severity.info')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={statusFilter} onValueChange={(v) => onFilterChange('status', v)}>
|
||||
<SelectTrigger className="w-[100px] h-8 text-xs">
|
||||
<SelectValue placeholder={t('common.status')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t('alert.allStatus')}</SelectItem>
|
||||
<SelectItem value="firing">{t('alert.status.firing')}</SelectItem>
|
||||
<SelectItem value="acknowledged">{t('alert.status.acknowledged')}</SelectItem>
|
||||
<SelectItem value="resolved">{t('alert.status.resolved')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={sourceFilter} onValueChange={(v) => onFilterChange('source', v)}>
|
||||
<SelectTrigger className="w-[120px] h-8 text-xs">
|
||||
<SelectValue placeholder={t('monitor.alertCenterPanel.sourcePlaceholder')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t('monitor.alertCenterPanel.allSources')}</SelectItem>
|
||||
<SelectItem value="host">{t('monitor.alertCenterPanel.hostMonitor')}</SelectItem>
|
||||
<SelectItem value="middleware">{t('monitor.alertCenterPanel.middlewareMonitor')}</SelectItem>
|
||||
<SelectItem value="snmp">{t('monitor.alertCenterPanel.snmpMonitor')}</SelectItem>
|
||||
<SelectItem value="site">{t('monitor.alertCenterPanel.siteProbe')}</SelectItem>
|
||||
<SelectItem value="log">{t('monitor.alertCenterPanel.logAlert')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs dg-text-muted">
|
||||
<span>{t('alert.totalItems', { count: total })}</span>
|
||||
<Button variant="outline" size="sm" onClick={onRefresh} disabled={fetchingAlerts} className="h-7 text-xs px-2 dg-btn-secondary">
|
||||
<RefreshCw className={cn('w-3 h-3 mr-1', fetchingAlerts && 'animate-spin')} />{t('common.refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertsToolbar;
|
||||
@@ -0,0 +1,88 @@
|
||||
// 告警中心 — 报警联系组 Tab（卡片网格 + 成员徽章 + 编辑/删除）
|
||||
// Logan.Li — 从 AlertCenter 提取的受控展示组件
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { PageEmpty } from '@/components/layout/PageEmpty';
|
||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { type Contact, type ContactGroup } from './alert-center-helpers';
|
||||
|
||||
export interface ContactGroupsTabProps {
|
||||
contactGroups: ContactGroup[];
|
||||
contacts: Contact[];
|
||||
onEdit: (group: ContactGroup) => void;
|
||||
onDelete: (id: number) => Promise<void>;
|
||||
}
|
||||
|
||||
const ContactGroupsTab: React.FC<ContactGroupsTabProps> = ({ contactGroups, contacts, onEdit, onDelete }) => {
|
||||
const { t } = useTranslation();
|
||||
const _confirm = useConfirm();
|
||||
|
||||
if (contactGroups.length === 0) {
|
||||
return (
|
||||
<PageEmpty
|
||||
title={t('monitor.alertCenterPanel.noGroupsTitle')}
|
||||
description={t('monitor.alertCenterPanel.noGroupsDesc')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{contactGroups.map((g) => {
|
||||
let cids: number[] = [];
|
||||
try { cids = JSON.parse(g.contact_ids || '[]'); } catch { /* ignore */ }
|
||||
const memberNames = contacts
|
||||
.filter(c => cids.includes(c.id))
|
||||
.map(c => c.name);
|
||||
return (
|
||||
<Card key={g.id} className="hover:border-primary/50 transition-colors">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-base">{g.group_name}</CardTitle>
|
||||
<Badge variant="secondary">{t('alert.peopleCount', { count: cids.length })}</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-2">
|
||||
{g.notes && <p className="text-sm text-muted-foreground">{g.notes}</p>}
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{memberNames.map(name => (
|
||||
<Badge key={name} variant="outline" className="text-xs">{name}</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button variant="outline" size="sm" className="flex-1"
|
||||
onClick={() => onEdit(g)}>
|
||||
{t('monitor.alertCenterPanel.edit')}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={async () => {
|
||||
const ok = await _confirm({
|
||||
title: t('alert.deleteGroup'),
|
||||
description: `${g.group_name}`,
|
||||
confirmText: t('common.delete'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
if (!ok) return;
|
||||
try {
|
||||
await onDelete(g.id);
|
||||
toast.success(t('alert.deleted'));
|
||||
} catch {
|
||||
toast.error(t('alert.deleteFailed'));
|
||||
}
|
||||
}}>
|
||||
{t('monitor.alertCenterPanel.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactGroupsTab;
|
||||
@@ -0,0 +1,87 @@
|
||||
// 告警中心 — 报警联系人 Tab（卡片网格 + 编辑/删除）
|
||||
// Logan.Li — 从 AlertCenter 提取的受控展示组件
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { PageEmpty } from '@/components/layout/PageEmpty';
|
||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { type Contact, getChannelTypeLabel } from './alert-center-helpers';
|
||||
|
||||
export interface ContactsTabProps {
|
||||
contacts: Contact[];
|
||||
onEdit: (contact: Contact) => void;
|
||||
onDelete: (id: number) => Promise<void>;
|
||||
}
|
||||
|
||||
const ContactsTab: React.FC<ContactsTabProps> = ({ contacts, onEdit, onDelete }) => {
|
||||
const { t } = useTranslation();
|
||||
const _confirm = useConfirm();
|
||||
|
||||
if (contacts.length === 0) {
|
||||
return (
|
||||
<PageEmpty
|
||||
title={t('monitor.alertCenterPanel.noContactsTitle')}
|
||||
description={t('monitor.alertCenterPanel.noContactsDesc')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{contacts.map((c) => (
|
||||
<Card key={c.id} className="hover:border-primary/50 transition-colors">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-sm">{c.name}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-1 text-xs text-muted-foreground">
|
||||
{c.phone && <div>📱 {c.phone}</div>}
|
||||
{c.email && <div>📧 {c.email}</div>}
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{c.channel_type && (
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{getChannelTypeLabel(c.channel_type)}
|
||||
</Badge>
|
||||
)}
|
||||
{c.webhook_url && (
|
||||
<span className="text-[10px] text-muted-foreground truncate max-w-[200px]" title={c.webhook_url}>
|
||||
{c.webhook_url}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-1.5 pt-1.5">
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs flex-1"
|
||||
onClick={() => onEdit(c)}>
|
||||
{t('monitor.alertCenterPanel.edit')}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs"
|
||||
onClick={async () => {
|
||||
const ok = await _confirm({
|
||||
title: t('alert.deleteContact'),
|
||||
description: `${c.name}`,
|
||||
confirmText: t('common.delete'),
|
||||
variant: 'destructive',
|
||||
});
|
||||
if (!ok) return;
|
||||
try {
|
||||
await onDelete(c.id);
|
||||
toast.success(t('alert.deleted'));
|
||||
} catch {
|
||||
toast.error(t('alert.deleteFailed'));
|
||||
}
|
||||
}}>
|
||||
{t('monitor.alertCenterPanel.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactsTab;
|
||||
Reference in new issue
Block a user