Q33: DashboardRecent 巨型组件拆分 (518L→25L barrel, 提取 dashboard-recent/ 7 文件)
DashboardRecent.tsx (518L) → 25L barrel re-export (-95%) 提取 7 个独立文件到 dashboard-recent/ 子目录: - types.ts (48L): DashboardRelease/Cluster/AutomationStats/OpsStats/PipelineStats 接口 - shared-components.tsx (35L): StatusDot + SeverityBadge 共享辅助组件 - AlertMessagesCard.tsx (72L): 告警消息卡片 (使用 shared-components) - CertificateExpiryCard.tsx (99L): 证书到期卡片 - ReleaseHistoryCard.tsx (99L): 发布历史卡片 - OpsOverviewCard.tsx (77L): 运维概览卡片 (6 快捷入口 tiles) - KubernetesClusterCard.tsx (97L): Kubernetes 集群卡片 向后兼容: DashboardRecent.tsx 改为 barrel re-export， Dashboard.tsx 的 import 无需修改。 验证: tsc -b=0, npm build✓ (18.18s), ESLint errors=0/any=0, go build=0, 17/17 集成测试通过
This commit is contained in:
attacker committed
1 parent
6c828c5992
commit
adb5a57bb2
9 files changed
+550
-515
No files matched your search
@@ -1,518 +1,25 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import {
|
||||
Rocket,
|
||||
AlertTriangle,
|
||||
ArrowRight,
|
||||
Cloud,
|
||||
Shield,
|
||||
Clock3,
|
||||
Globe,
|
||||
Database,
|
||||
Server,
|
||||
Monitor,
|
||||
Activity,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { AlertEventRecord, CertExpiryRecord } from '@/types';
|
||||
|
||||
/** 仪表盘卡片数据类型 — 与 Dashboard API 响应对齐 */
|
||||
export interface DashboardRelease {
|
||||
id: number | string;
|
||||
status: string;
|
||||
app_name: string;
|
||||
version: string;
|
||||
environment?: string;
|
||||
commit_id?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface DashboardCluster {
|
||||
id: number | string;
|
||||
code?: string;
|
||||
name: string;
|
||||
status: string;
|
||||
cpu_usage?: number;
|
||||
memory_usage?: number;
|
||||
node_count?: number;
|
||||
pod_count?: number;
|
||||
ingress_count?: number;
|
||||
deployment_count?: number;
|
||||
service_count?: number;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface DashboardAutomationStats {
|
||||
cron_job_count?: number;
|
||||
script_count?: number;
|
||||
today_executions?: number;
|
||||
success_rate?: number;
|
||||
}
|
||||
|
||||
export interface DashboardOpsStats {
|
||||
domain_count?: number;
|
||||
site_task_count?: number;
|
||||
middleware_count?: number;
|
||||
snmp_device_count?: number;
|
||||
monitor_target_count?: number;
|
||||
}
|
||||
|
||||
export interface DashboardPipelineStats {
|
||||
today_count?: number;
|
||||
success?: number;
|
||||
failed?: number;
|
||||
running?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* DashboardRecent - 优化后的仪表盘底部卡片组件
|
||||
*
|
||||
* 优化点：
|
||||
* 1. 使用 dg-card 工具类替代硬编码的 slate 颜色
|
||||
* 2. 统一的状态指示器样式
|
||||
* 3. 更好的 hover 效果和过渡动画
|
||||
* 4. ScrollArea 使用 scrollbar-thin 类
|
||||
* 5. 空状态显示更友好
|
||||
* DashboardRecent — barrel re-export
|
||||
*
|
||||
* 原始 518L 单文件拆分为 dashboard-recent/ 目录下独立文件:
|
||||
* - types.ts: DashboardRelease / DashboardCluster / DashboardAutomationStats / DashboardOpsStats / DashboardPipelineStats
|
||||
* - shared-components.tsx: StatusDot / SeverityBadge
|
||||
* - AlertMessagesCard.tsx: 告警消息卡片
|
||||
* - CertificateExpiryCard.tsx: 证书到期卡片
|
||||
* - ReleaseHistoryCard.tsx: 发布历史卡片
|
||||
* - OpsOverviewCard.tsx: 运维概览卡片
|
||||
* - KubernetesClusterCard.tsx: Kubernetes 集群卡片
|
||||
*/
|
||||
export { AlertMessagesCard } from './dashboard-recent/AlertMessagesCard';
|
||||
export { CertificateExpiryCard } from './dashboard-recent/CertificateExpiryCard';
|
||||
export { ReleaseHistoryCard } from './dashboard-recent/ReleaseHistoryCard';
|
||||
export { OpsOverviewCard } from './dashboard-recent/OpsOverviewCard';
|
||||
export { KubernetesClusterCard } from './dashboard-recent/KubernetesClusterCard';
|
||||
|
||||
// Status dot component
|
||||
function StatusDot({ severity }: { severity: string }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-2 h-2 rounded-full flex-shrink-0 mt-1.5',
|
||||
severity === 'critical' && 'bg-[var(--dg-red)]',
|
||||
severity === 'warning' && 'bg-[var(--dg-yellow)]',
|
||||
severity === 'info' && 'bg-[var(--dg-blue)]',
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Severity badge
|
||||
function SeverityBadge({ severity }: { severity: string }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs font-medium',
|
||||
severity === 'critical' && 'dg-badge-red border',
|
||||
severity === 'warning' && 'dg-badge-yellow border',
|
||||
severity === 'info' && 'dg-badge-blue border',
|
||||
)}
|
||||
>
|
||||
{severity === 'critical' ? t('common.error') : severity === 'warning' ? t('common.warning') : t('common.info')}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.alerts.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.alerts.description')}</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/alerts')}
|
||||
>
|
||||
{t('dashboard.alerts.viewAll')}
|
||||
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[320px] scrollbar-thin">
|
||||
{recentAlerts.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-muted)]">
|
||||
<AlertTriangle className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">{t('dashboard.alerts.empty')}</p>
|
||||
<p className="text-xs mt-1 opacity-60">{t('dashboard.alerts.emptyHint')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5 pr-2">
|
||||
{recentAlerts.map((alert) => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className="flex items-start gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer group"
|
||||
onClick={() => navigate('/alert-center')}
|
||||
>
|
||||
<StatusDot severity={alert.severity || 'info'} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">
|
||||
{alert.rule_name}
|
||||
</span>
|
||||
<SeverityBadge severity={alert.severity || 'info'} />
|
||||
</div>
|
||||
<p className="text-xs text-[var(--dg-text-muted)] mt-1">{alert.target}</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]/70 line-clamp-1">{alert.message}</p>
|
||||
</div>
|
||||
<span className="text-[11px] text-[var(--dg-text-muted)]/50 whitespace-nowrap flex-shrink-0">
|
||||
{alert.created_at ? new Date(alert.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) : ''}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord[] }) {
|
||||
const { t } = useTranslation();
|
||||
const expiringDomains = (expCerts ?? [])
|
||||
.map((d) => ({
|
||||
...d,
|
||||
// eslint-disable-next-line react-hooks/purity
|
||||
daysUntilExpiry: d.days_until_expiry ?? Math.ceil((new Date(d.expire_date).getTime() - Date.now()) / (1000 * 60 * 60 * 24)),
|
||||
}))
|
||||
.sort((a, b) => a.daysUntilExpiry - b.daysUntilExpiry);
|
||||
|
||||
const criticalCount = expiringDomains.filter((d) => d.daysUntilExpiry < 30).length;
|
||||
const warningCount = expiringDomains.filter((d) => d.daysUntilExpiry >= 30 && d.daysUntilExpiry < 60).length;
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.certificates.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.certificates.description')}</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{criticalCount > 0 && (
|
||||
<Badge className="dg-badge-red border">
|
||||
<AlertTriangle className="h-3 w-3 mr-1" />
|
||||
{criticalCount} {t('dashboard.certificates.expiringSoon')}
|
||||
</Badge>
|
||||
)}
|
||||
{warningCount > 0 && (
|
||||
<Badge className="dg-badge-yellow border">
|
||||
{warningCount} {t('dashboard.certificates.expiringIn30Days')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[280px] scrollbar-thin">
|
||||
{expiringDomains.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Shield className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">{t('dashboard.certificates.empty')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5 pr-2">
|
||||
{expiringDomains.map((domain) => (
|
||||
<div
|
||||
key={domain.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div
|
||||
className={cn(
|
||||
'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
|
||||
domain.daysUntilExpiry < 30 ? 'bg-[var(--dg-red)]/10' :
|
||||
domain.daysUntilExpiry < 60 ? 'bg-[var(--dg-yellow)]/10' :
|
||||
'bg-[var(--dg-green)]/10'
|
||||
)}
|
||||
>
|
||||
<Shield className={cn(
|
||||
'h-4 w-4',
|
||||
domain.daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' :
|
||||
domain.daysUntilExpiry < 60 ? 'text-[var(--dg-yellow)]' :
|
||||
'text-[var(--dg-green)]'
|
||||
)} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{domain.name}</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]">{t('dashboard.certificates.expireDate')}: {domain.expire_date?.substring(0, 10)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs flex-shrink-0',
|
||||
domain.daysUntilExpiry < 30 ? 'dg-badge-red border' :
|
||||
domain.daysUntilExpiry < 60 ? 'dg-badge-yellow border' :
|
||||
'dg-badge-green border'
|
||||
)}
|
||||
>
|
||||
{domain.daysUntilExpiry < 0 ? t('dashboard.certificates.expired') : `${domain.daysUntilExpiry} ${t('dashboard.certificates.days')}`}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[] }) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const releaseList = releases?.slice(0, 5) ?? [];
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.releases.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.releases.description')}</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/pipelines')}
|
||||
>
|
||||
{t('dashboard.releases.viewAll')}
|
||||
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{releaseList.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Rocket className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">{t('dashboard.releases.empty')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{releaseList.map((release) => (
|
||||
<div
|
||||
key={release.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
|
||||
release.status === 'success' ? 'bg-[var(--dg-green)]/10' :
|
||||
release.status === 'failed' ? 'bg-[var(--dg-red)]/10' :
|
||||
release.status === 'deploying' ? 'bg-[var(--dg-blue)]/10' :
|
||||
'bg-[var(--dg-yellow)]/10'
|
||||
)}
|
||||
>
|
||||
<Rocket className={cn(
|
||||
'h-4 w-4',
|
||||
release.status === 'success' ? 'text-[var(--dg-green)]' :
|
||||
release.status === 'failed' ? 'text-[var(--dg-red)]' :
|
||||
release.status === 'deploying' ? 'text-[var(--dg-blue)]' :
|
||||
'text-[var(--dg-yellow)]'
|
||||
)} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{release.app_name}</span>
|
||||
<Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-muted)] flex-shrink-0">
|
||||
{release.version}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{release.environment}</span>
|
||||
<span className="text-xs text-[var(--dg-border)]">·</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)] truncate">{release.commit_id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs flex-shrink-0',
|
||||
release.status === 'success' ? 'dg-badge-green border' :
|
||||
release.status === 'failed' ? 'dg-badge-red border' :
|
||||
release.status === 'deploying' ? 'dg-badge-blue border' :
|
||||
'dg-badge-yellow border'
|
||||
)}
|
||||
>
|
||||
{release.status === 'success' ? t('dashboard.releases.success') :
|
||||
release.status === 'failed' ? t('dashboard.releases.failed') :
|
||||
release.status === 'deploying' ? t('dashboard.releases.deploying') :
|
||||
release.status === 'rolled_back' ? t('dashboard.releases.rolledBack') : t('dashboard.releases.building')}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
/** 运维概览 — 资产 / 监控 / 任务快捷入口 // Logan.Li */
|
||||
export function OpsOverviewCard({
|
||||
automation,
|
||||
ops,
|
||||
serverCount,
|
||||
hostMonitorCount,
|
||||
firingAlerts,
|
||||
}: {
|
||||
automation?: DashboardAutomationStats;
|
||||
ops?: DashboardOpsStats;
|
||||
serverCount?: number;
|
||||
hostMonitorCount?: number;
|
||||
firingAlerts?: number;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const tiles = [
|
||||
{ key: 'servers', label: t('dashboard.ops.servers'), value: serverCount ?? 0, icon: Server, path: '/servers', color: 'text-[var(--dg-blue)]' },
|
||||
{ key: 'domains', label: t('dashboard.ops.domains'), value: ops?.domain_count ?? 0, icon: Globe, path: '/domains', color: 'text-[var(--dg-cyan)]' },
|
||||
{ key: 'host', label: t('dashboard.ops.hostMonitor'), value: hostMonitorCount ?? serverCount ?? 0, icon: Monitor, path: '/host-monitor', color: 'text-[var(--dg-green)]' },
|
||||
{ key: 'mw', label: t('dashboard.ops.middleware'), value: ops?.middleware_count ?? 0, icon: Database, path: '/monitor-center?tab=middleware', color: 'text-[var(--dg-red)]' },
|
||||
{ key: 'site', label: t('dashboard.ops.siteProbes'), value: ops?.site_task_count ?? 0, icon: Activity, path: '/monitor-center?tab=site', color: 'text-[var(--dg-yellow)]' },
|
||||
{ key: 'cron', label: t('dashboard.ops.cronJobs'), value: automation?.cron_job_count ?? 0, icon: Clock3, path: '/cronjobs', color: 'text-[var(--dg-purple)]' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.ops.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.ops.description')}</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="dg-btn-ghost text-xs" onClick={() => navigate('/ai-agent-cli')}>
|
||||
{t('menu.aiAgentCli')}
|
||||
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-3">
|
||||
{tiles.map((tile) => (
|
||||
<button
|
||||
key={tile.key}
|
||||
type="button"
|
||||
onClick={() => navigate(tile.path)}
|
||||
className="flex items-center gap-2.5 p-2.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all text-left"
|
||||
>
|
||||
<tile.icon className={cn('h-4 w-4 shrink-0', tile.color)} />
|
||||
<div className="min-w-0">
|
||||
<div className="text-base font-bold text-[var(--dg-text-primary)] leading-none">{tile.value}</div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5 truncate">{tile.label}</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs px-1 pt-1 border-t border-[var(--dg-border)]">
|
||||
<span className="text-[var(--dg-text-muted)]">
|
||||
{t('dashboard.ops.todayExecutions')}: <span className="text-[var(--dg-text-primary)] font-medium">{automation?.today_executions ?? 0}</span>
|
||||
</span>
|
||||
<button type="button" className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]" onClick={() => navigate('/alert-center')}>
|
||||
{t('dashboard.ops.firingAlerts')}: <span className={cn('font-medium', (firingAlerts ?? 0) > 0 ? 'text-[var(--dg-red)]' : 'text-[var(--dg-text-primary)]')}>{firingAlerts ?? 0}</span>
|
||||
</button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster[] }) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.clusters.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.clusters.description')}</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/kubernetes')}
|
||||
>
|
||||
{t('dashboard.clusters.viewAll')}
|
||||
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{clusters.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Cloud className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">{t('dashboard.clusters.empty')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{clusters.map((cluster) => {
|
||||
const cpuUsage = Number(cluster.cpu_usage ?? 0);
|
||||
const memoryUsage = Number(cluster.memory_usage ?? 0);
|
||||
const hasUsage = cpuUsage > 0 || memoryUsage > 0;
|
||||
const metrics = hasUsage
|
||||
? [
|
||||
{ label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.cpu'), value: `${cpuUsage.toFixed(1)}%` },
|
||||
{ label: t('dashboard.clusters.memory'), value: `${memoryUsage.toFixed(1)}%` },
|
||||
]
|
||||
: [
|
||||
{ label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.ingress'), value: cluster.ingress_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.deployments'), value: cluster.deployment_count ?? 0 },
|
||||
];
|
||||
return (
|
||||
<div
|
||||
key={cluster.id}
|
||||
className="p-3.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer"
|
||||
onClick={() => navigate(`/kubernetes/${cluster.code || cluster.id}`)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Cloud className="h-4.5 w-4.5 text-[var(--dg-blue)]" />
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{cluster.name}</span>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs',
|
||||
cluster.status === 'healthy' ? 'dg-badge-green border' :
|
||||
cluster.status === 'warning' ? 'dg-badge-yellow border' :
|
||||
'dg-badge-red border'
|
||||
)}
|
||||
>
|
||||
{cluster.status === 'healthy' ? t('dashboard.clusters.healthy') : cluster.status === 'warning' ? t('dashboard.clusters.warning') : t('dashboard.clusters.error')}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2 text-center">
|
||||
{metrics.map((item) => (
|
||||
<div key={item.label} className="p-1.5 rounded-lg bg-[var(--dg-bg-primary)]/50">
|
||||
<div className="text-sm font-semibold text-[var(--dg-text-primary)]">{item.value}</div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
export type {
|
||||
DashboardRelease,
|
||||
DashboardCluster,
|
||||
DashboardAutomationStats,
|
||||
DashboardOpsStats,
|
||||
DashboardPipelineStats,
|
||||
} from './dashboard-recent/types';
|
||||
@@ -0,0 +1,72 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { AlertTriangle, ArrowRight } from 'lucide-react';
|
||||
import type { AlertEventRecord } from '@/types';
|
||||
import { StatusDot, SeverityBadge } from './shared-components';
|
||||
|
||||
export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.alerts.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.alerts.description')}</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/alerts')}
|
||||
>
|
||||
{t('dashboard.alerts.viewAll')}
|
||||
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[320px] scrollbar-thin">
|
||||
{recentAlerts.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-muted)]">
|
||||
<AlertTriangle className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">{t('dashboard.alerts.empty')}</p>
|
||||
<p className="text-xs mt-1 opacity-60">{t('dashboard.alerts.emptyHint')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5 pr-2">
|
||||
{recentAlerts.map((alert) => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className="flex items-start gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer group"
|
||||
onClick={() => navigate('/alert-center')}
|
||||
>
|
||||
<StatusDot severity={alert.severity || 'info'} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">
|
||||
{alert.rule_name}
|
||||
</span>
|
||||
<SeverityBadge severity={alert.severity || 'info'} />
|
||||
</div>
|
||||
<p className="text-xs text-[var(--dg-text-muted)] mt-1">{alert.target}</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]/70 line-clamp-1">{alert.message}</p>
|
||||
</div>
|
||||
<span className="text-[11px] text-[var(--dg-text-muted)]/50 whitespace-nowrap flex-shrink-0">
|
||||
{alert.created_at ? new Date(alert.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) : ''}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { AlertTriangle, Shield } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { CertExpiryRecord } from '@/types';
|
||||
|
||||
export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord[] }) {
|
||||
const { t } = useTranslation();
|
||||
const expiringDomains = (expCerts ?? [])
|
||||
.map((d) => ({
|
||||
...d,
|
||||
// eslint-disable-next-line react-hooks/purity
|
||||
daysUntilExpiry: d.days_until_expiry ?? Math.ceil((new Date(d.expire_date).getTime() - Date.now()) / (1000 * 60 * 60 * 24)),
|
||||
}))
|
||||
.sort((a, b) => a.daysUntilExpiry - b.daysUntilExpiry);
|
||||
|
||||
const criticalCount = expiringDomains.filter((d) => d.daysUntilExpiry < 30).length;
|
||||
const warningCount = expiringDomains.filter((d) => d.daysUntilExpiry >= 30 && d.daysUntilExpiry < 60).length;
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.certificates.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.certificates.description')}</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{criticalCount > 0 && (
|
||||
<Badge className="dg-badge-red border">
|
||||
<AlertTriangle className="h-3 w-3 mr-1" />
|
||||
{criticalCount} {t('dashboard.certificates.expiringSoon')}
|
||||
</Badge>
|
||||
)}
|
||||
{warningCount > 0 && (
|
||||
<Badge className="dg-badge-yellow border">
|
||||
{warningCount} {t('dashboard.certificates.expiringIn30Days')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[280px] scrollbar-thin">
|
||||
{expiringDomains.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Shield className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">{t('dashboard.certificates.empty')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5 pr-2">
|
||||
{expiringDomains.map((domain) => (
|
||||
<div
|
||||
key={domain.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div
|
||||
className={cn(
|
||||
'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
|
||||
domain.daysUntilExpiry < 30 ? 'bg-[var(--dg-red)]/10' :
|
||||
domain.daysUntilExpiry < 60 ? 'bg-[var(--dg-yellow)]/10' :
|
||||
'bg-[var(--dg-green)]/10'
|
||||
)}
|
||||
>
|
||||
<Shield className={cn(
|
||||
'h-4 w-4',
|
||||
domain.daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' :
|
||||
domain.daysUntilExpiry < 60 ? 'text-[var(--dg-yellow)]' :
|
||||
'text-[var(--dg-green)]'
|
||||
)} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{domain.name}</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]">{t('dashboard.certificates.expireDate')}: {domain.expire_date?.substring(0, 10)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs flex-shrink-0',
|
||||
domain.daysUntilExpiry < 30 ? 'dg-badge-red border' :
|
||||
domain.daysUntilExpiry < 60 ? 'dg-badge-yellow border' :
|
||||
'dg-badge-green border'
|
||||
)}
|
||||
>
|
||||
{domain.daysUntilExpiry < 0 ? t('dashboard.certificates.expired') : `${domain.daysUntilExpiry} ${t('dashboard.certificates.days')}`}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Cloud, ArrowRight } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { DashboardCluster } from './types';
|
||||
|
||||
export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster[] }) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.clusters.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.clusters.description')}</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/kubernetes')}
|
||||
>
|
||||
{t('dashboard.clusters.viewAll')}
|
||||
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{clusters.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Cloud className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">{t('dashboard.clusters.empty')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{clusters.map((cluster) => {
|
||||
const cpuUsage = Number(cluster.cpu_usage ?? 0);
|
||||
const memoryUsage = Number(cluster.memory_usage ?? 0);
|
||||
const hasUsage = cpuUsage > 0 || memoryUsage > 0;
|
||||
const metrics = hasUsage
|
||||
? [
|
||||
{ label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.cpu'), value: `${cpuUsage.toFixed(1)}%` },
|
||||
{ label: t('dashboard.clusters.memory'), value: `${memoryUsage.toFixed(1)}%` },
|
||||
]
|
||||
: [
|
||||
{ label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.ingress'), value: cluster.ingress_count ?? 0 },
|
||||
{ label: t('dashboard.clusters.deployments'), value: cluster.deployment_count ?? 0 },
|
||||
];
|
||||
return (
|
||||
<div
|
||||
key={cluster.id}
|
||||
className="p-3.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer"
|
||||
onClick={() => navigate(`/kubernetes/${cluster.code || cluster.id}`)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Cloud className="h-4.5 w-4.5 text-[var(--dg-blue)]" />
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{cluster.name}</span>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs',
|
||||
cluster.status === 'healthy' ? 'dg-badge-green border' :
|
||||
cluster.status === 'warning' ? 'dg-badge-yellow border' :
|
||||
'dg-badge-red border'
|
||||
)}
|
||||
>
|
||||
{cluster.status === 'healthy' ? t('dashboard.clusters.healthy') : cluster.status === 'warning' ? t('dashboard.clusters.warning') : t('dashboard.clusters.error')}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2 text-center">
|
||||
{metrics.map((item) => (
|
||||
<div key={item.label} className="p-1.5 rounded-lg bg-[var(--dg-bg-primary)]/50">
|
||||
<div className="text-sm font-semibold text-[var(--dg-text-primary)]">{item.value}</div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Clock3, Globe, Database, Server, Monitor, Activity } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { DashboardAutomationStats, DashboardOpsStats } from './types';
|
||||
|
||||
/** 运维概览 — 资产 / 监控 / 任务快捷入口 */
|
||||
export function OpsOverviewCard({
|
||||
automation,
|
||||
ops,
|
||||
serverCount,
|
||||
hostMonitorCount,
|
||||
firingAlerts,
|
||||
}: {
|
||||
automation?: DashboardAutomationStats;
|
||||
ops?: DashboardOpsStats;
|
||||
serverCount?: number;
|
||||
hostMonitorCount?: number;
|
||||
firingAlerts?: number;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const tiles = [
|
||||
{ key: 'servers', label: t('dashboard.ops.servers'), value: serverCount ?? 0, icon: Server, path: '/servers', color: 'text-[var(--dg-blue)]' },
|
||||
{ key: 'domains', label: t('dashboard.ops.domains'), value: ops?.domain_count ?? 0, icon: Globe, path: '/domains', color: 'text-[var(--dg-cyan)]' },
|
||||
{ key: 'host', label: t('dashboard.ops.hostMonitor'), value: hostMonitorCount ?? serverCount ?? 0, icon: Monitor, path: '/host-monitor', color: 'text-[var(--dg-green)]' },
|
||||
{ key: 'mw', label: t('dashboard.ops.middleware'), value: ops?.middleware_count ?? 0, icon: Database, path: '/monitor-center?tab=middleware', color: 'text-[var(--dg-red)]' },
|
||||
{ key: 'site', label: t('dashboard.ops.siteProbes'), value: ops?.site_task_count ?? 0, icon: Activity, path: '/monitor-center?tab=site', color: 'text-[var(--dg-yellow)]' },
|
||||
{ key: 'cron', label: t('dashboard.ops.cronJobs'), value: automation?.cron_job_count ?? 0, icon: Clock3, path: '/cronjobs', color: 'text-[var(--dg-purple)]' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.ops.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.ops.description')}</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="dg-btn-ghost text-xs" onClick={() => navigate('/ai-agent-cli')}>
|
||||
{t('menu.aiAgentCli')}
|
||||
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-3">
|
||||
{tiles.map((tile) => (
|
||||
<button
|
||||
key={tile.key}
|
||||
type="button"
|
||||
onClick={() => navigate(tile.path)}
|
||||
className="flex items-center gap-2.5 p-2.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all text-left"
|
||||
>
|
||||
<tile.icon className={cn('h-4 w-4 shrink-0', tile.color)} />
|
||||
<div className="min-w-0">
|
||||
<div className="text-base font-bold text-[var(--dg-text-primary)] leading-none">{tile.value}</div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5 truncate">{tile.label}</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs px-1 pt-1 border-t border-[var(--dg-border)]">
|
||||
<span className="text-[var(--dg-text-muted)]">
|
||||
{t('dashboard.ops.todayExecutions')}: <span className="text-[var(--dg-text-primary)] font-medium">{automation?.today_executions ?? 0}</span>
|
||||
</span>
|
||||
<button type="button" className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]" onClick={() => navigate('/alert-center')}>
|
||||
{t('dashboard.ops.firingAlerts')}: <span className={cn('font-medium', (firingAlerts ?? 0) > 0 ? 'text-[var(--dg-red)]' : 'text-[var(--dg-text-primary)]')}>{firingAlerts ?? 0}</span>
|
||||
</button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Rocket, ArrowRight } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { DashboardRelease } from './types';
|
||||
|
||||
export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[] }) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const releaseList = releases?.slice(0, 5) ?? [];
|
||||
|
||||
return (
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.releases.title')}</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.releases.description')}</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/pipelines')}
|
||||
>
|
||||
{t('dashboard.releases.viewAll')}
|
||||
<ArrowRight className="h-3.5 w-3.5 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{releaseList.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Rocket className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">{t('dashboard.releases.empty')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{releaseList.map((release) => (
|
||||
<div
|
||||
key={release.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
|
||||
release.status === 'success' ? 'bg-[var(--dg-green)]/10' :
|
||||
release.status === 'failed' ? 'bg-[var(--dg-red)]/10' :
|
||||
release.status === 'deploying' ? 'bg-[var(--dg-blue)]/10' :
|
||||
'bg-[var(--dg-yellow)]/10'
|
||||
)}
|
||||
>
|
||||
<Rocket className={cn(
|
||||
'h-4 w-4',
|
||||
release.status === 'success' ? 'text-[var(--dg-green)]' :
|
||||
release.status === 'failed' ? 'text-[var(--dg-red)]' :
|
||||
release.status === 'deploying' ? 'text-[var(--dg-blue)]' :
|
||||
'text-[var(--dg-yellow)]'
|
||||
)} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{release.app_name}</span>
|
||||
<Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-muted)] flex-shrink-0">
|
||||
{release.version}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{release.environment}</span>
|
||||
<span className="text-xs text-[var(--dg-border)]">·</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)] truncate">{release.commit_id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs flex-shrink-0',
|
||||
release.status === 'success' ? 'dg-badge-green border' :
|
||||
release.status === 'failed' ? 'dg-badge-red border' :
|
||||
release.status === 'deploying' ? 'dg-badge-blue border' :
|
||||
'dg-badge-yellow border'
|
||||
)}
|
||||
>
|
||||
{release.status === 'success' ? t('dashboard.releases.success') :
|
||||
release.status === 'failed' ? t('dashboard.releases.failed') :
|
||||
release.status === 'deploying' ? t('dashboard.releases.deploying') :
|
||||
release.status === 'rolled_back' ? t('dashboard.releases.rolledBack') : t('dashboard.releases.building')}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** Status dot component */
|
||||
export function StatusDot({ severity }: { severity: string }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-2 h-2 rounded-full flex-shrink-0 mt-1.5',
|
||||
severity === 'critical' && 'bg-[var(--dg-red)]',
|
||||
severity === 'warning' && 'bg-[var(--dg-yellow)]',
|
||||
severity === 'info' && 'bg-[var(--dg-blue)]',
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/** Severity badge */
|
||||
export function SeverityBadge({ severity }: { severity: string }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs font-medium',
|
||||
severity === 'critical' && 'dg-badge-red border',
|
||||
severity === 'warning' && 'dg-badge-yellow border',
|
||||
severity === 'info' && 'dg-badge-blue border',
|
||||
)}
|
||||
>
|
||||
{severity === 'critical' ? t('common.error') : severity === 'warning' ? t('common.warning') : t('common.info')}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/** Dashboard 卡片数据类型 — 与 Dashboard API 响应对齐 */
|
||||
|
||||
export interface DashboardRelease {
|
||||
id: number | string;
|
||||
status: string;
|
||||
app_name: string;
|
||||
version: string;
|
||||
environment?: string;
|
||||
commit_id?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface DashboardCluster {
|
||||
id: number | string;
|
||||
code?: string;
|
||||
name: string;
|
||||
status: string;
|
||||
cpu_usage?: number;
|
||||
memory_usage?: number;
|
||||
node_count?: number;
|
||||
pod_count?: number;
|
||||
ingress_count?: number;
|
||||
deployment_count?: number;
|
||||
service_count?: number;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface DashboardAutomationStats {
|
||||
cron_job_count?: number;
|
||||
script_count?: number;
|
||||
today_executions?: number;
|
||||
success_rate?: number;
|
||||
}
|
||||
|
||||
export interface DashboardOpsStats {
|
||||
domain_count?: number;
|
||||
site_task_count?: number;
|
||||
middleware_count?: number;
|
||||
snmp_device_count?: number;
|
||||
monitor_target_count?: number;
|
||||
}
|
||||
|
||||
export interface DashboardPipelineStats {
|
||||
today_count?: number;
|
||||
success?: number;
|
||||
failed?: number;
|
||||
running?: number;
|
||||
}
|
||||
Reference in new issue
Block a user