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
+549
-514
No files matched your search
@@ -504,6 +504,7 @@ services/api.ts (1324L)
|
|||||||
| Q30 | 前端巨型组件拆分（CloudBilling 534L→295L (-45%)，提取 cloud-billing/ 3 个文件 (OverviewTab 110L 概览统计:同步信息+成本告警横幅+趋势图+厂商分布 + RecordsTab 146L 成本记录表格+RecordsFilterToolbar筛选工具栏 + AlertRulesTab 91L 预警规则卡片网格)） | P0 | **done** |
|
| Q30 | 前端巨型组件拆分（CloudBilling 534L→295L (-45%)，提取 cloud-billing/ 3 个文件 (OverviewTab 110L 概览统计:同步信息+成本告警横幅+趋势图+厂商分布 + RecordsTab 146L 成本记录表格+RecordsFilterToolbar筛选工具栏 + AlertRulesTab 91L 预警规则卡片网格)） | P0 | **done** |
|
||||||
| Q31 | 前端巨型组件拆分（PromDsFormDialog 528L→294L (-44%)，提取 6 个文件 (CollapsibleSection 42L 通用折叠包装器 DRY 3 个重复折叠模式 + AuthSection 107L 认证折叠 + HeadersSection 64L 自定义Headers + AlertingSection 58L 告警折叠 + MiscSection 47L 杂项折叠 + TestResultBanner 32L 测试结果横幅)，3 个折叠区块全部使用共享 CollapsibleSection 消除重复 JSX)） | P0 | **done** |
|
| Q31 | 前端巨型组件拆分（PromDsFormDialog 528L→294L (-44%)，提取 6 个文件 (CollapsibleSection 42L 通用折叠包装器 DRY 3 个重复折叠模式 + AuthSection 107L 认证折叠 + HeadersSection 64L 自定义Headers + AlertingSection 58L 告警折叠 + MiscSection 47L 杂项折叠 + TestResultBanner 32L 测试结果横幅)，3 个折叠区块全部使用共享 CollapsibleSection 消除重复 JSX)） | P0 | **done** |
|
||||||
| Q32 | 前端巨型组件拆分（AuditOperationsTab 527L→275L (-48%)，提取 audit-operations/ 3 个文件 (types 43L normalizeLog 纯函数+AuditStatistics 接口 + LogDetailDialog 85L 详情弹窗+DetailRow + StatisticsDialog 108L 统计弹窗+StatCard)，清除死代码 useConfirm/_confirm/_handleShowStats/statsOpen/statistics/statsLoading，ESLint errors=0/any=0，tsc -b=0，npm build✓，go build=0，17/17 测试通过） | P0 | **done** |
|
| Q32 | 前端巨型组件拆分（AuditOperationsTab 527L→275L (-48%)，提取 audit-operations/ 3 个文件 (types 43L normalizeLog 纯函数+AuditStatistics 接口 + LogDetailDialog 85L 详情弹窗+DetailRow + StatisticsDialog 108L 统计弹窗+StatCard)，清除死代码 useConfirm/_confirm/_handleShowStats/statsOpen/statistics/statsLoading，ESLint errors=0/any=0，tsc -b=0，npm build✓，go build=0，17/17 测试通过） | P0 | **done** |
|
||||||
|
| Q33 | 前端巨型组件拆分（DashboardRecent 518L→25L (-95%)，提取 dashboard-recent/ 7 个文件 (types 48L + shared-components(StatusDot/SeverityBadge) 35L + AlertMessagesCard 72L + CertificateExpiryCard 99L + ReleaseHistoryCard 99L + OpsOverviewCard 77L + KubernetesClusterCard 97L)，主文件改为 barrel re-export 保持向后兼容，tsc -b=0，npm build✓，ESLint=0/0/0，go build=0，17/17 测试通过） | P0 | **done** |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -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 - 优化后的仪表盘底部卡片组件
|
* DashboardRecent — barrel re-export
|
||||||
*
|
*
|
||||||
* 优化点：
|
* 原始 518L 单文件拆分为 dashboard-recent/ 目录下独立文件:
|
||||||
* 1. 使用 dg-card 工具类替代硬编码的 slate 颜色
|
* - types.ts: DashboardRelease / DashboardCluster / DashboardAutomationStats / DashboardOpsStats / DashboardPipelineStats
|
||||||
* 2. 统一的状态指示器样式
|
* - shared-components.tsx: StatusDot / SeverityBadge
|
||||||
* 3. 更好的 hover 效果和过渡动画
|
* - AlertMessagesCard.tsx: 告警消息卡片
|
||||||
* 4. ScrollArea 使用 scrollbar-thin 类
|
* - CertificateExpiryCard.tsx: 证书到期卡片
|
||||||
* 5. 空状态显示更友好
|
* - 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
|
export type {
|
||||||
function StatusDot({ severity }: { severity: string }) {
|
DashboardRelease,
|
||||||
return (
|
DashboardCluster,
|
||||||
<div
|
DashboardAutomationStats,
|
||||||
className={cn(
|
DashboardOpsStats,
|
||||||
'w-2 h-2 rounded-full flex-shrink-0 mt-1.5',
|
DashboardPipelineStats,
|
||||||
severity === 'critical' && 'bg-[var(--dg-red)]',
|
} from './dashboard-recent/types';
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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