feat: 定时任务编辑入口全栈打通 + 修复ApprovalFlow编译错误 + 完成大文件拆分重构
- CronJobManager: 编辑按钮接通 onClick → openEdit(job)，弹出编辑对话框预填数据，
复用新建/编辑共用 Dialog（editingId 区分模式），标题/按钮文案动态切换，
保存时根据 editingId 调用 createJob 或 updateJob — 消除占位按钮
- ApprovalFlow: 修复 API 方法名不匹配导致 tsc -b 编译失败
(getInstances→getProcesses, getMyApprovals→getProcesses({status:'pending'}),
approveInstance→approveProcess, rejectInstance→rejectProcess)
+ 添加 ApprovalFlowManager 导出别名兼容 App.tsx 导入
- 合并已完成的大文件拆分重构: automation.go→automation_cron/script/playbook,
ldap.go→ldap_ou/ldap_users, server.go→cloud_accounts/domain/platform/region,
user.go→user_admin; 前端 Dashboard/K8s/Server/Approval/Monitor 子组件拆分
// Logan.Li
This commit is contained in:
attacker committed
1 parent
8be63ac168
commit
a7e2351ad2
37 files changed
+7374
-4891
No files matched your search
@@ -1,790 +1,16 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
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 {
|
||||
Server,
|
||||
Cloud,
|
||||
Bell,
|
||||
Rocket,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Activity,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
ArrowRight,
|
||||
DollarSign,
|
||||
Shield,
|
||||
MemoryStick,
|
||||
Database,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
BarChart,
|
||||
Bar,
|
||||
} from 'recharts';
|
||||
import { Clock, Activity, Server, Cloud, Bell, DollarSign } from 'lucide-react';
|
||||
import { dashboardStatsApi, serverApi, k8sApi } from '@/services/api';
|
||||
|
||||
// 云平台颜色映射
|
||||
const CLOUD_COLORS: Record<string, string> = {
|
||||
'阿里云': '#ff6a00',
|
||||
aliyun: '#ff6a00',
|
||||
AWS: '#ff9900',
|
||||
aws: '#ff9900',
|
||||
'腾讯云': '#006eff',
|
||||
tencent: '#006eff',
|
||||
'华为云': '#ff0000',
|
||||
huawei: '#ff0000',
|
||||
Azure: '#0078d4',
|
||||
azure: '#0078d4',
|
||||
};
|
||||
const FALLBACK_CLOUD_COLORS = ['#ff6a00', '#ff9900', '#006eff', '#ff0000', '#0078d4', '#10b981', '#a855f7', '#ec4899'];
|
||||
|
||||
// 计算月度环比变化（基于 month_trend 最后两个月）
|
||||
function computeMonthChange(monthTrend: any[]): {
|
||||
pct: number;
|
||||
label: string;
|
||||
direction: 'up' | 'down' | 'neutral';
|
||||
} {
|
||||
if (!monthTrend || monthTrend.length < 2) {
|
||||
return { pct: 0, label: '暂无数据', direction: 'neutral' };
|
||||
}
|
||||
const cur = Number(monthTrend[monthTrend.length - 1].cost ?? 0);
|
||||
const prev = Number(monthTrend[monthTrend.length - 2].cost ?? 0);
|
||||
if (prev === 0) {
|
||||
return { pct: 0, label: cur > 0 ? '新增费用' : '持平', direction: 'neutral' };
|
||||
}
|
||||
const pct = ((cur - prev) / prev) * 100;
|
||||
const direction = pct > 0.05 ? 'up' : pct < -0.05 ? 'down' : 'neutral';
|
||||
const label = `${pct > 0 ? '+' : ''}${pct.toFixed(1)}% 较上月`;
|
||||
return { pct, label, direction };
|
||||
}
|
||||
|
||||
// 根据平均值生成24小时趋势数据（无实时指标时使用）
|
||||
function generateMetricsData(avgCpu: number, avgMemory: number, avgDisk: number, points = 24) {
|
||||
const data = [];
|
||||
for (let i = points - 1; i >= 0; i--) {
|
||||
const d = new Date(Date.now() - i * 60 * 60 * 1000);
|
||||
data.push({
|
||||
time: `${d.getHours().toString().padStart(2, '0')}:00`,
|
||||
cpu: Number(Math.max(0, avgCpu + (Math.random() - 0.5) * 15).toFixed(1)),
|
||||
memory: Number(Math.max(0, avgMemory + (Math.random() - 0.5) * 10).toFixed(1)),
|
||||
disk: Number(Math.max(0, avgDisk + (Math.random() - 0.5) * 5).toFixed(1)),
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
// 统计卡片组件
|
||||
function StatCard({
|
||||
title,
|
||||
value,
|
||||
description,
|
||||
icon: Icon,
|
||||
trend,
|
||||
trendValue,
|
||||
color,
|
||||
onClick,
|
||||
}: {
|
||||
title: string;
|
||||
value: string | number;
|
||||
description?: string;
|
||||
icon: React.ElementType;
|
||||
trend?: 'up' | 'down' | 'neutral';
|
||||
trendValue?: string;
|
||||
color: string;
|
||||
onClick?: () => void;
|
||||
}) {
|
||||
const colorClasses: Record<string, { bg: string; text: string }> = {
|
||||
blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
|
||||
emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
|
||||
amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
|
||||
rose: { bg: 'bg-rose-500/10', text: 'text-rose-400' },
|
||||
purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
|
||||
cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
|
||||
orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
|
||||
};
|
||||
const colors = colorClasses[color];
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="bg-slate-900 border-slate-800 hover:border-slate-700 transition-all cursor-pointer"
|
||||
onClick={onClick}
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-slate-400">{title}</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<h3 className="text-2xl font-bold text-slate-100">{value}</h3>
|
||||
{trend && trendValue && (
|
||||
<span
|
||||
className={`flex items-center text-xs font-medium ${
|
||||
trend === 'up' ? 'text-emerald-400' : trend === 'down' ? 'text-red-400' : 'text-slate-400'
|
||||
}`}
|
||||
>
|
||||
{trend === 'up' ? (
|
||||
<TrendingUp className="h-3 w-3 mr-0.5" />
|
||||
) : trend === 'down' ? (
|
||||
<TrendingDown className="h-3 w-3 mr-0.5" />
|
||||
) : null}
|
||||
{trendValue}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{description && <p className="text-xs text-slate-500">{description}</p>}
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg ${colors.bg} ${colors.text}`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 成本费用卡片
|
||||
function CostOverviewCard({ costStats }: { costStats: any }) {
|
||||
const cloudCosts: any[] = costStats?.cloud_costs ?? [];
|
||||
const monthTrend: any[] = costStats?.month_trend ?? [];
|
||||
|
||||
const costData = cloudCosts.map((c, i) => ({
|
||||
name: c.cloud,
|
||||
value: c.cost,
|
||||
color: CLOUD_COLORS[c.cloud] || FALLBACK_CLOUD_COLORS[i % FALLBACK_CLOUD_COLORS.length],
|
||||
}));
|
||||
const monthlyData = monthTrend.map((m) => ({ month: m.month, cost: m.cost }));
|
||||
const totalCost =
|
||||
costStats?.total_cost ?? costData.reduce((sum, item) => sum + item.value, 0);
|
||||
const costChange = computeMonthChange(monthTrend);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">云成本概览</CardTitle>
|
||||
<CardDescription className="text-slate-500">本月各云平台费用支出</CardDescription>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-2xl font-bold text-slate-100">¥{Number(totalCost).toLocaleString()}</p>
|
||||
<p className={`text-xs ${
|
||||
costChange.direction === 'up'
|
||||
? 'text-emerald-400'
|
||||
: costChange.direction === 'down'
|
||||
? 'text-red-400'
|
||||
: 'text-slate-500'
|
||||
}`}>
|
||||
{costChange.label}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-slate-400 mb-2">费用分布</p>
|
||||
<div className="h-[180px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={costData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={40}
|
||||
outerRadius={70}
|
||||
paddingAngle={2}
|
||||
dataKey="value"
|
||||
>
|
||||
{costData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0f172a',
|
||||
border: '1px solid #1e293b',
|
||||
borderRadius: '6px',
|
||||
color: '#f8fafc',
|
||||
}}
|
||||
formatter={(value: number) => `¥${value.toLocaleString()}`}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-slate-400 mb-2">月度趋势</p>
|
||||
<div className="h-[180px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={monthlyData} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
|
||||
<XAxis dataKey="month" stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
|
||||
<YAxis stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0f172a',
|
||||
border: '1px solid #1e293b',
|
||||
borderRadius: '6px',
|
||||
color: '#f8fafc',
|
||||
}}
|
||||
formatter={(value: number) => `¥${value.toLocaleString()}`}
|
||||
/>
|
||||
<Bar dataKey="cost" fill="#3b82f6" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-2">
|
||||
{costData.map((item) => (
|
||||
<div key={item.name} className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
|
||||
<span className="text-sm text-slate-300">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-100">¥{Number(item.value).toLocaleString()}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 告警消息卡片
|
||||
function AlertMessagesCard({ alerts }: { alerts: any[] }) {
|
||||
const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">告警消息</CardTitle>
|
||||
<CardDescription className="text-slate-500">最近触发的告警事件</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[320px]">
|
||||
<div className="space-y-2">
|
||||
{recentAlerts.map((alert) => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className="flex items-start gap-3 p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<div className={`w-2 h-2 rounded-full mt-1.5 ${
|
||||
alert.severity === 'critical' ? 'bg-red-400' :
|
||||
alert.severity === 'warning' ? 'bg-amber-400' : 'bg-blue-400'
|
||||
}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-slate-200 truncate">{alert.rule_name}</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
alert.severity === 'critical'
|
||||
? 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
: alert.severity === 'warning'
|
||||
? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
: 'border-blue-500/30 text-blue-400 bg-blue-500/10'
|
||||
}`}
|
||||
>
|
||||
{alert.severity === 'critical' ? '严重' : alert.severity === 'warning' ? '警告' : '提示'}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-1">{alert.target}</p>
|
||||
<p className="text-xs text-slate-500">{alert.message}</p>
|
||||
</div>
|
||||
<span className="text-xs text-slate-500 whitespace-nowrap">
|
||||
{alert.created_at ? new Date(alert.created_at).toLocaleString() : ''}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Top5 资源使用卡片
|
||||
function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
|
||||
const topCpuServers = (topUsage?.cpu ?? []).slice(0, 5);
|
||||
const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
|
||||
const topDiskServers = (topUsage?.disk ?? []).slice(0, 5);
|
||||
|
||||
const renderList = (
|
||||
items: any[],
|
||||
color: string,
|
||||
BarColor: string,
|
||||
icon: React.ReactNode,
|
||||
label: string
|
||||
) => (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{icon}
|
||||
<span className="text-sm font-medium text-slate-300">{label}</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{items.map((item, index) => {
|
||||
const usage = Number(item.usage ?? 0);
|
||||
return (
|
||||
<div key={item.id ?? index} className="flex items-center gap-2">
|
||||
<span className="text-xs text-slate-500 w-4">{index + 1}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-slate-300 truncate">{item.hostname}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${
|
||||
usage > 80 ? 'bg-red-400' : usage > 60 ? 'bg-amber-400' : BarColor
|
||||
}`}
|
||||
style={{ width: `${usage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs ${
|
||||
usage > 80 ? 'text-red-400' : usage > 60 ? 'text-amber-400' : 'text-slate-400'
|
||||
}`}>
|
||||
{usage.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">Top5 资源使用</CardTitle>
|
||||
<CardDescription className="text-slate-500">CPU、内存、磁盘使用率最高</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{/* CPU Top5 */}
|
||||
{renderList(topCpuServers, 'blue', 'bg-blue-400', <Cpu className="h-4 w-4 text-blue-400" />, 'CPU')}
|
||||
{/* Memory Top5 */}
|
||||
{renderList(topMemoryServers, 'emerald', 'bg-emerald-400', <MemoryStick className="h-4 w-4 text-emerald-400" />, '内存')}
|
||||
{/* Disk Top5 */}
|
||||
{renderList(topDiskServers, 'purple', 'bg-purple-400', <Database className="h-4 w-4 text-purple-400" />, '磁盘')}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 证书到期卡片
|
||||
function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
|
||||
const expiringDomains = (expCerts ?? [])
|
||||
.map((d) => ({
|
||||
...d,
|
||||
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="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">证书到期提醒</CardTitle>
|
||||
<CardDescription className="text-slate-500">SSL证书到期时间监控</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{criticalCount > 0 && (
|
||||
<Badge className="bg-red-500/20 text-red-400 border-0">
|
||||
<AlertTriangle className="h-3 w-3 mr-1" />
|
||||
{criticalCount} 即将过期
|
||||
</Badge>
|
||||
)}
|
||||
{warningCount > 0 && (
|
||||
<Badge className="bg-amber-500/20 text-amber-400 border-0">
|
||||
{warningCount} 30天内过期
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[280px]">
|
||||
<div className="space-y-2">
|
||||
{expiringDomains.map((domain) => (
|
||||
<div
|
||||
key={domain.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
||||
domain.daysUntilExpiry < 30 ? 'bg-red-500/10 text-red-400' :
|
||||
domain.daysUntilExpiry < 60 ? 'bg-amber-500/10 text-amber-400' :
|
||||
'bg-emerald-500/10 text-emerald-400'
|
||||
}`}>
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-200">{domain.name}</p>
|
||||
<p className="text-xs text-slate-500">到期: {domain.expire_date?.substring(0, 10)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
domain.daysUntilExpiry < 30
|
||||
? 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
: domain.daysUntilExpiry < 60
|
||||
? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
}`}
|
||||
>
|
||||
{domain.daysUntilExpiry < 0 ? '已过期' : `${domain.daysUntilExpiry} 天`}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 资源使用率趋势卡片
|
||||
function ResourceUsageCard({
|
||||
avgCpu,
|
||||
avgMemory,
|
||||
avgDisk,
|
||||
}: {
|
||||
avgCpu: number;
|
||||
avgMemory: number;
|
||||
avgDisk: number;
|
||||
}) {
|
||||
const data = generateMetricsData(avgCpu, avgMemory, avgDisk, 24);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">资源使用率趋势</CardTitle>
|
||||
<CardDescription className="text-slate-500">过去24小时系统资源使用情况</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
|
||||
<Cpu className="h-3 w-3 mr-1" />
|
||||
CPU
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
|
||||
<Activity className="h-3 w-3 mr-1" />
|
||||
内存
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-purple-500/30 text-purple-400 bg-purple-500/10">
|
||||
<HardDrive className="h-3 w-3 mr-1" />
|
||||
磁盘
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[280px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="colorCpu" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorMemory" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorDisk" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#a855f7" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#a855f7" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
|
||||
<XAxis dataKey="time" stroke="#475569" fontSize={12} tickLine={false} axisLine={false} />
|
||||
<YAxis stroke="#475569" fontSize={12} tickLine={false} axisLine={false} unit="%" />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0f172a',
|
||||
border: '1px solid #1e293b',
|
||||
borderRadius: '6px',
|
||||
color: '#f8fafc',
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="cpu"
|
||||
stroke="#3b82f6"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorCpu)"
|
||||
strokeWidth={2}
|
||||
name="CPU"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="memory"
|
||||
stroke="#10b981"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorMemory)"
|
||||
strokeWidth={2}
|
||||
name="内存"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="disk"
|
||||
stroke="#a855f7"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorDisk)"
|
||||
strokeWidth={2}
|
||||
name="磁盘"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 发布历史卡片
|
||||
function ReleaseHistoryCard({ releases }: { releases: any[] }) {
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">发布历史</CardTitle>
|
||||
<CardDescription className="text-slate-500">今日应用发布记录</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{releases.slice(0, 5).map((release) => (
|
||||
<div
|
||||
key={release.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<div
|
||||
className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
||||
release.status === 'success'
|
||||
? 'bg-emerald-500/10 text-emerald-400'
|
||||
: release.status === 'failed'
|
||||
? 'bg-red-500/10 text-red-400'
|
||||
: release.status === 'deploying'
|
||||
? 'bg-blue-500/10 text-blue-400'
|
||||
: 'bg-amber-500/10 text-amber-400'
|
||||
}`}
|
||||
>
|
||||
<Rocket className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-slate-200">{release.app_name}</span>
|
||||
<Badge variant="outline" className="text-xs border-slate-700 text-slate-400">
|
||||
{release.version}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-xs text-slate-500">{release.environment}</span>
|
||||
<span className="text-xs text-slate-500">·</span>
|
||||
<span className="text-xs text-slate-500">{release.commit_id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
release.status === 'success'
|
||||
? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
: release.status === 'failed'
|
||||
? 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
: release.status === 'deploying'
|
||||
? 'border-blue-500/30 text-blue-400 bg-blue-500/10'
|
||||
: 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
}`}
|
||||
>
|
||||
{release.status === 'success'
|
||||
? '成功'
|
||||
: release.status === 'failed'
|
||||
? '失败'
|
||||
: release.status === 'deploying'
|
||||
? '发布中'
|
||||
: release.status === 'rolled_back'
|
||||
? '已回滚'
|
||||
: '构建中'}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 服务器状态卡片
|
||||
function ServerStatusCard({ servers }: { servers: any[] }) {
|
||||
const runningServers = servers.filter((s) => s.status === 'running').length;
|
||||
const stoppedServers = servers.filter((s) => s.status === 'stopped').length;
|
||||
const maintenanceServers = servers.filter((s) => s.status === 'maintenance').length;
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">服务器状态</CardTitle>
|
||||
<CardDescription className="text-slate-500">服务器运行状态分布</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-4 mb-4">
|
||||
<div className="text-center p-3 rounded-lg bg-emerald-500/10">
|
||||
<div className="text-2xl font-bold text-emerald-400">{runningServers}</div>
|
||||
<div className="text-xs text-slate-400 mt-1">运行中</div>
|
||||
</div>
|
||||
<div className="text-center p-3 rounded-lg bg-amber-500/10">
|
||||
<div className="text-2xl font-bold text-amber-400">{maintenanceServers}</div>
|
||||
<div className="text-xs text-slate-400 mt-1">维护中</div>
|
||||
</div>
|
||||
<div className="text-center p-3 rounded-lg bg-slate-500/10">
|
||||
<div className="text-2xl font-bold text-slate-400">{stoppedServers}</div>
|
||||
<div className="text-xs text-slate-400 mt-1">已停止</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{servers.slice(0, 4).map((server) => (
|
||||
<div key={server.id} className="flex items-center gap-3 p-2 rounded-lg bg-slate-800/50">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
server.status === 'running'
|
||||
? 'bg-emerald-400'
|
||||
: server.status === 'maintenance'
|
||||
? 'bg-amber-400'
|
||||
: 'bg-slate-400'
|
||||
}`}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-slate-200 truncate">{server.hostname}</p>
|
||||
<p className="text-xs text-slate-500">{server.ip}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-slate-400">CPU {Number(server.cpu_usage ?? 0).toFixed(1)}%</p>
|
||||
<p className="text-xs text-slate-400">内存 {Number(server.memory_usage ?? 0).toFixed(1)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// K8s集群状态卡片
|
||||
function K8sClusterCard({ clusters }: { clusters: any[] }) {
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">K8s集群</CardTitle>
|
||||
<CardDescription className="text-slate-500">Kubernetes集群健康状态</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{clusters.map((cluster) => {
|
||||
const cpuUsage = Number(cluster.cpu_usage ?? 0);
|
||||
const memoryUsage = Number(cluster.memory_usage ?? 0);
|
||||
return (
|
||||
<div key={cluster.id} className="p-3 rounded-lg bg-slate-800/50">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cloud className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-sm font-medium text-slate-200">{cluster.name}</span>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
cluster.status === 'healthy'
|
||||
? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
: cluster.status === 'warning'
|
||||
? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
: 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
}`}
|
||||
>
|
||||
{cluster.status === 'healthy' ? '健康' : cluster.status === 'warning' ? '警告' : '异常'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2 text-center">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-200">{cluster.node_count ?? cluster.nodes ?? 0}</div>
|
||||
<div className="text-xs text-slate-500">节点</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-200">{cluster.pod_count ?? cluster.pods ?? 0}</div>
|
||||
<div className="text-xs text-slate-500">Pod</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-200">{cpuUsage.toFixed(1)}%</div>
|
||||
<div className="text-xs text-slate-500">CPU</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-200">{memoryUsage.toFixed(1)}%</div>
|
||||
<div className="text-xs text-slate-500">内存</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
import { StatCard } from './DashboardStats';
|
||||
import { CostOverviewCard, TopResourceUsageCard, ResourceUsageCard, computeMonthChange } from './DashboardCharts';
|
||||
import {
|
||||
AlertMessagesCard,
|
||||
CertificateExpiryCard,
|
||||
ReleaseHistoryCard,
|
||||
ServerStatusCard,
|
||||
K8sClusterCard,
|
||||
} from './DashboardRecent';
|
||||
|
||||
export function Dashboard() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
@@ -0,0 +1,349 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
BarChart,
|
||||
Bar,
|
||||
} from 'recharts';
|
||||
import { Cpu, HardDrive, Activity, MemoryStick, Database } from 'lucide-react';
|
||||
|
||||
// 云平台颜色映射
|
||||
const CLOUD_COLORS: Record<string, string> = {
|
||||
'阿里云': '#ff6a00',
|
||||
aliyun: '#ff6a00',
|
||||
AWS: '#ff9900',
|
||||
aws: '#ff9900',
|
||||
'腾讯云': '#006eff',
|
||||
tencent: '#006eff',
|
||||
'华为云': '#ff0000',
|
||||
huawei: '#ff0000',
|
||||
Azure: '#0078d4',
|
||||
azure: '#0078d4',
|
||||
};
|
||||
const FALLBACK_CLOUD_COLORS = ['#ff6a00', '#ff9900', '#006eff', '#ff0000', '#0078d4', '#10b981', '#a855f7', '#ec4899'];
|
||||
|
||||
// 计算月度环比变化（基于 month_trend 最后两个月）
|
||||
export function computeMonthChange(monthTrend: any[]): {
|
||||
pct: number;
|
||||
label: string;
|
||||
direction: 'up' | 'down' | 'neutral';
|
||||
} {
|
||||
if (!monthTrend || monthTrend.length < 2) {
|
||||
return { pct: 0, label: '暂无数据', direction: 'neutral' };
|
||||
}
|
||||
const cur = Number(monthTrend[monthTrend.length - 1].cost ?? 0);
|
||||
const prev = Number(monthTrend[monthTrend.length - 2].cost ?? 0);
|
||||
if (prev === 0) {
|
||||
return { pct: 0, label: cur > 0 ? '新增费用' : '持平', direction: 'neutral' };
|
||||
}
|
||||
const pct = ((cur - prev) / prev) * 100;
|
||||
const direction = pct > 0.05 ? 'up' : pct < -0.05 ? 'down' : 'neutral';
|
||||
const label = `${pct > 0 ? '+' : ''}${pct.toFixed(1)}% 较上月`;
|
||||
return { pct, label, direction };
|
||||
}
|
||||
|
||||
// 根据平均值生成24小时趋势数据（无实时指标时使用）
|
||||
function generateMetricsData(avgCpu: number, avgMemory: number, avgDisk: number, points = 24) {
|
||||
const data = [];
|
||||
for (let i = points - 1; i >= 0; i--) {
|
||||
const d = new Date(Date.now() - i * 60 * 60 * 1000);
|
||||
data.push({
|
||||
time: `${d.getHours().toString().padStart(2, '0')}:00`,
|
||||
cpu: Number(Math.max(0, avgCpu + (Math.random() - 0.5) * 15).toFixed(1)),
|
||||
memory: Number(Math.max(0, avgMemory + (Math.random() - 0.5) * 10).toFixed(1)),
|
||||
disk: Number(Math.max(0, avgDisk + (Math.random() - 0.5) * 5).toFixed(1)),
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
// 成本费用卡片
|
||||
export function CostOverviewCard({ costStats }: { costStats: any }) {
|
||||
const cloudCosts: any[] = costStats?.cloud_costs ?? [];
|
||||
const monthTrend: any[] = costStats?.month_trend ?? [];
|
||||
|
||||
const costData = cloudCosts.map((c, i) => ({
|
||||
name: c.cloud,
|
||||
value: c.cost,
|
||||
color: CLOUD_COLORS[c.cloud] || FALLBACK_CLOUD_COLORS[i % FALLBACK_CLOUD_COLORS.length],
|
||||
}));
|
||||
const monthlyData = monthTrend.map((m) => ({ month: m.month, cost: m.cost }));
|
||||
const totalCost =
|
||||
costStats?.total_cost ?? costData.reduce((sum, item) => sum + item.value, 0);
|
||||
const costChange = computeMonthChange(monthTrend);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">云成本概览</CardTitle>
|
||||
<CardDescription className="text-slate-500">本月各云平台费用支出</CardDescription>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-2xl font-bold text-slate-100">¥{Number(totalCost).toLocaleString()}</p>
|
||||
<p className={`text-xs ${
|
||||
costChange.direction === 'up'
|
||||
? 'text-emerald-400'
|
||||
: costChange.direction === 'down'
|
||||
? 'text-red-400'
|
||||
: 'text-slate-500'
|
||||
}`}>
|
||||
{costChange.label}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-slate-400 mb-2">费用分布</p>
|
||||
<div className="h-[180px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={costData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={40}
|
||||
outerRadius={70}
|
||||
paddingAngle={2}
|
||||
dataKey="value"
|
||||
>
|
||||
{costData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0f172a',
|
||||
border: '1px solid #1e293b',
|
||||
borderRadius: '6px',
|
||||
color: '#f8fafc',
|
||||
}}
|
||||
formatter={(value: number) => `¥${value.toLocaleString()}`}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-slate-400 mb-2">月度趋势</p>
|
||||
<div className="h-[180px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={monthlyData} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
|
||||
<XAxis dataKey="month" stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
|
||||
<YAxis stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0f172a',
|
||||
border: '1px solid #1e293b',
|
||||
borderRadius: '6px',
|
||||
color: '#f8fafc',
|
||||
}}
|
||||
formatter={(value: number) => `¥${value.toLocaleString()}`}
|
||||
/>
|
||||
<Bar dataKey="cost" fill="#3b82f6" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-2">
|
||||
{costData.map((item) => (
|
||||
<div key={item.name} className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
|
||||
<span className="text-sm text-slate-300">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-100">¥{Number(item.value).toLocaleString()}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Top5 资源使用卡片
|
||||
export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
|
||||
const topCpuServers = (topUsage?.cpu ?? []).slice(0, 5);
|
||||
const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
|
||||
const topDiskServers = (topUsage?.disk ?? []).slice(0, 5);
|
||||
|
||||
const renderList = (
|
||||
items: any[],
|
||||
color: string,
|
||||
BarColor: string,
|
||||
icon: React.ReactNode,
|
||||
label: string
|
||||
) => (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{icon}
|
||||
<span className="text-sm font-medium text-slate-300">{label}</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{items.map((item, index) => {
|
||||
const usage = Number(item.usage ?? 0);
|
||||
return (
|
||||
<div key={item.id ?? index} className="flex items-center gap-2">
|
||||
<span className="text-xs text-slate-500 w-4">{index + 1}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-slate-300 truncate">{item.hostname}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${
|
||||
usage > 80 ? 'bg-red-400' : usage > 60 ? 'bg-amber-400' : BarColor
|
||||
}`}
|
||||
style={{ width: `${usage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs ${
|
||||
usage > 80 ? 'text-red-400' : usage > 60 ? 'text-amber-400' : 'text-slate-400'
|
||||
}`}>
|
||||
{usage.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">Top5 资源使用</CardTitle>
|
||||
<CardDescription className="text-slate-500">CPU、内存、磁盘使用率最高</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{/* CPU Top5 */}
|
||||
{renderList(topCpuServers, 'blue', 'bg-blue-400', <Cpu className="h-4 w-4 text-blue-400" />, 'CPU')}
|
||||
{/* Memory Top5 */}
|
||||
{renderList(topMemoryServers, 'emerald', 'bg-emerald-400', <MemoryStick className="h-4 w-4 text-emerald-400" />, '内存')}
|
||||
{/* Disk Top5 */}
|
||||
{renderList(topDiskServers, 'purple', 'bg-purple-400', <Database className="h-4 w-4 text-purple-400" />, '磁盘')}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 资源使用率趋势卡片
|
||||
export function ResourceUsageCard({
|
||||
avgCpu,
|
||||
avgMemory,
|
||||
avgDisk,
|
||||
}: {
|
||||
avgCpu: number;
|
||||
avgMemory: number;
|
||||
avgDisk: number;
|
||||
}) {
|
||||
const data = generateMetricsData(avgCpu, avgMemory, avgDisk, 24);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">资源使用率趋势</CardTitle>
|
||||
<CardDescription className="text-slate-500">过去24小时系统资源使用情况</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
|
||||
<Cpu className="h-3 w-3 mr-1" />
|
||||
CPU
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
|
||||
<Activity className="h-3 w-3 mr-1" />
|
||||
内存
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-purple-500/30 text-purple-400 bg-purple-500/10">
|
||||
<HardDrive className="h-3 w-3 mr-1" />
|
||||
磁盘
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[280px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="colorCpu" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorMemory" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorDisk" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#a855f7" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#a855f7" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
|
||||
<XAxis dataKey="time" stroke="#475569" fontSize={12} tickLine={false} axisLine={false} />
|
||||
<YAxis stroke="#475569" fontSize={12} tickLine={false} axisLine={false} unit="%" />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#0f172a',
|
||||
border: '1px solid #1e293b',
|
||||
borderRadius: '6px',
|
||||
color: '#f8fafc',
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="cpu"
|
||||
stroke="#3b82f6"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorCpu)"
|
||||
strokeWidth={2}
|
||||
name="CPU"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="memory"
|
||||
stroke="#10b981"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorMemory)"
|
||||
strokeWidth={2}
|
||||
name="内存"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="disk"
|
||||
stroke="#a855f7"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorDisk)"
|
||||
strokeWidth={2}
|
||||
name="磁盘"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,359 @@
|
||||
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,
|
||||
} from 'lucide-react';
|
||||
|
||||
// 告警消息卡片
|
||||
export function AlertMessagesCard({ alerts }: { alerts: any[] }) {
|
||||
const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">告警消息</CardTitle>
|
||||
<CardDescription className="text-slate-500">最近触发的告警事件</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[320px]">
|
||||
<div className="space-y-2">
|
||||
{recentAlerts.map((alert) => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className="flex items-start gap-3 p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<div className={`w-2 h-2 rounded-full mt-1.5 ${
|
||||
alert.severity === 'critical' ? 'bg-red-400' :
|
||||
alert.severity === 'warning' ? 'bg-amber-400' : 'bg-blue-400'
|
||||
}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-slate-200 truncate">{alert.rule_name}</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
alert.severity === 'critical'
|
||||
? 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
: alert.severity === 'warning'
|
||||
? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
: 'border-blue-500/30 text-blue-400 bg-blue-500/10'
|
||||
}`}
|
||||
>
|
||||
{alert.severity === 'critical' ? '严重' : alert.severity === 'warning' ? '警告' : '提示'}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-1">{alert.target}</p>
|
||||
<p className="text-xs text-slate-500">{alert.message}</p>
|
||||
</div>
|
||||
<span className="text-xs text-slate-500 whitespace-nowrap">
|
||||
{alert.created_at ? new Date(alert.created_at).toLocaleString() : ''}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 证书到期卡片
|
||||
export function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
|
||||
const expiringDomains = (expCerts ?? [])
|
||||
.map((d) => ({
|
||||
...d,
|
||||
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="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">证书到期提醒</CardTitle>
|
||||
<CardDescription className="text-slate-500">SSL证书到期时间监控</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{criticalCount > 0 && (
|
||||
<Badge className="bg-red-500/20 text-red-400 border-0">
|
||||
<AlertTriangle className="h-3 w-3 mr-1" />
|
||||
{criticalCount} 即将过期
|
||||
</Badge>
|
||||
)}
|
||||
{warningCount > 0 && (
|
||||
<Badge className="bg-amber-500/20 text-amber-400 border-0">
|
||||
{warningCount} 30天内过期
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[280px]">
|
||||
<div className="space-y-2">
|
||||
{expiringDomains.map((domain) => (
|
||||
<div
|
||||
key={domain.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
||||
domain.daysUntilExpiry < 30 ? 'bg-red-500/10 text-red-400' :
|
||||
domain.daysUntilExpiry < 60 ? 'bg-amber-500/10 text-amber-400' :
|
||||
'bg-emerald-500/10 text-emerald-400'
|
||||
}`}>
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-200">{domain.name}</p>
|
||||
<p className="text-xs text-slate-500">到期: {domain.expire_date?.substring(0, 10)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
domain.daysUntilExpiry < 30
|
||||
? 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
: domain.daysUntilExpiry < 60
|
||||
? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
}`}
|
||||
>
|
||||
{domain.daysUntilExpiry < 0 ? '已过期' : `${domain.daysUntilExpiry} 天`}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 发布历史卡片
|
||||
export function ReleaseHistoryCard({ releases }: { releases: any[] }) {
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">发布历史</CardTitle>
|
||||
<CardDescription className="text-slate-500">今日应用发布记录</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{releases.slice(0, 5).map((release) => (
|
||||
<div
|
||||
key={release.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<div
|
||||
className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
||||
release.status === 'success'
|
||||
? 'bg-emerald-500/10 text-emerald-400'
|
||||
: release.status === 'failed'
|
||||
? 'bg-red-500/10 text-red-400'
|
||||
: release.status === 'deploying'
|
||||
? 'bg-blue-500/10 text-blue-400'
|
||||
: 'bg-amber-500/10 text-amber-400'
|
||||
}`}
|
||||
>
|
||||
<Rocket className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-slate-200">{release.app_name}</span>
|
||||
<Badge variant="outline" className="text-xs border-slate-700 text-slate-400">
|
||||
{release.version}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-xs text-slate-500">{release.environment}</span>
|
||||
<span className="text-xs text-slate-500">·</span>
|
||||
<span className="text-xs text-slate-500">{release.commit_id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
release.status === 'success'
|
||||
? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
: release.status === 'failed'
|
||||
? 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
: release.status === 'deploying'
|
||||
? 'border-blue-500/30 text-blue-400 bg-blue-500/10'
|
||||
: 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
}`}
|
||||
>
|
||||
{release.status === 'success'
|
||||
? '成功'
|
||||
: release.status === 'failed'
|
||||
? '失败'
|
||||
: release.status === 'deploying'
|
||||
? '发布中'
|
||||
: release.status === 'rolled_back'
|
||||
? '已回滚'
|
||||
: '构建中'}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 服务器状态卡片
|
||||
export function ServerStatusCard({ servers }: { servers: any[] }) {
|
||||
const runningServers = servers.filter((s) => s.status === 'running').length;
|
||||
const stoppedServers = servers.filter((s) => s.status === 'stopped').length;
|
||||
const maintenanceServers = servers.filter((s) => s.status === 'maintenance').length;
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">服务器状态</CardTitle>
|
||||
<CardDescription className="text-slate-500">服务器运行状态分布</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-4 mb-4">
|
||||
<div className="text-center p-3 rounded-lg bg-emerald-500/10">
|
||||
<div className="text-2xl font-bold text-emerald-400">{runningServers}</div>
|
||||
<div className="text-xs text-slate-400 mt-1">运行中</div>
|
||||
</div>
|
||||
<div className="text-center p-3 rounded-lg bg-amber-500/10">
|
||||
<div className="text-2xl font-bold text-amber-400">{maintenanceServers}</div>
|
||||
<div className="text-xs text-slate-400 mt-1">维护中</div>
|
||||
</div>
|
||||
<div className="text-center p-3 rounded-lg bg-slate-500/10">
|
||||
<div className="text-2xl font-bold text-slate-400">{stoppedServers}</div>
|
||||
<div className="text-xs text-slate-400 mt-1">已停止</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{servers.slice(0, 4).map((server) => (
|
||||
<div key={server.id} className="flex items-center gap-3 p-2 rounded-lg bg-slate-800/50">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
server.status === 'running'
|
||||
? 'bg-emerald-400'
|
||||
: server.status === 'maintenance'
|
||||
? 'bg-amber-400'
|
||||
: 'bg-slate-400'
|
||||
}`}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-slate-200 truncate">{server.hostname}</p>
|
||||
<p className="text-xs text-slate-500">{server.ip}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-slate-400">CPU {Number(server.cpu_usage ?? 0).toFixed(1)}%</p>
|
||||
<p className="text-xs text-slate-400">内存 {Number(server.memory_usage ?? 0).toFixed(1)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// K8s集群状态卡片
|
||||
export function K8sClusterCard({ clusters }: { clusters: any[] }) {
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">K8s集群</CardTitle>
|
||||
<CardDescription className="text-slate-500">Kubernetes集群健康状态</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{clusters.map((cluster) => {
|
||||
const cpuUsage = Number(cluster.cpu_usage ?? 0);
|
||||
const memoryUsage = Number(cluster.memory_usage ?? 0);
|
||||
return (
|
||||
<div key={cluster.id} className="p-3 rounded-lg bg-slate-800/50">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cloud className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-sm font-medium text-slate-200">{cluster.name}</span>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${
|
||||
cluster.status === 'healthy'
|
||||
? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
: cluster.status === 'warning'
|
||||
? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
: 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
}`}
|
||||
>
|
||||
{cluster.status === 'healthy' ? '健康' : cluster.status === 'warning' ? '警告' : '异常'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2 text-center">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-200">{cluster.node_count ?? cluster.nodes ?? 0}</div>
|
||||
<div className="text-xs text-slate-500">节点</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-200">{cluster.pod_count ?? cluster.pods ?? 0}</div>
|
||||
<div className="text-xs text-slate-500">Pod</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-200">{cpuUsage.toFixed(1)}%</div>
|
||||
<div className="text-xs text-slate-500">CPU</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-200">{memoryUsage.toFixed(1)}%</div>
|
||||
<div className="text-xs text-slate-500">内存</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { TrendingUp, TrendingDown } from 'lucide-react';
|
||||
|
||||
// 统计卡片组件
|
||||
export function StatCard({
|
||||
title,
|
||||
value,
|
||||
description,
|
||||
icon: Icon,
|
||||
trend,
|
||||
trendValue,
|
||||
color,
|
||||
onClick,
|
||||
}: {
|
||||
title: string;
|
||||
value: string | number;
|
||||
description?: string;
|
||||
icon: React.ElementType;
|
||||
trend?: 'up' | 'down' | 'neutral';
|
||||
trendValue?: string;
|
||||
color: string;
|
||||
onClick?: () => void;
|
||||
}) {
|
||||
const colorClasses: Record<string, { bg: string; text: string }> = {
|
||||
blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
|
||||
emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
|
||||
amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
|
||||
rose: { bg: 'bg-rose-500/10', text: 'text-rose-400' },
|
||||
purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
|
||||
cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
|
||||
orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
|
||||
};
|
||||
const colors = colorClasses[color];
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="bg-slate-900 border-slate-800 hover:border-slate-700 transition-all cursor-pointer"
|
||||
onClick={onClick}
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-slate-400">{title}</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<h3 className="text-2xl font-bold text-slate-100">{value}</h3>
|
||||
{trend && trendValue && (
|
||||
<span
|
||||
className={`flex items-center text-xs font-medium ${
|
||||
trend === 'up' ? 'text-emerald-400' : trend === 'down' ? 'text-red-400' : 'text-slate-400'
|
||||
}`}
|
||||
>
|
||||
{trend === 'up' ? (
|
||||
<TrendingUp className="h-3 w-3 mr-0.5" />
|
||||
) : trend === 'down' ? (
|
||||
<TrendingDown className="h-3 w-3 mr-0.5" />
|
||||
) : null}
|
||||
{trendValue}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{description && <p className="text-xs text-slate-500">{description}</p>}
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg ${colors.bg} ${colors.text}`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user