fix: 仪表盘死按钮修复+K8s进度条可视化+标题简化

- Dashboard: 移除无功能的"实时监控"按钮,"刷新"按钮接上数据重载(useCallback+spin动画)
- DashboardRecent: 4个"查看全部"按钮接上路由导航(告警→/alerts, 发布→/releases, 服务器→/servers, 集群→/clusters)
- K8sNodes: CPU/Mem使用率从纯文本改为迷你进度条(颜色阈值:绿<60%/黄60-85%/红>85%)
- K8sWorkloads: Deployment副本比用进度条可视化(满=绿/未满=黄)
- K8sClusters: 页面标题"K8s集群管理"→"集群列表"
This commit is contained in:
attacker committed 2026-06-15 03:35:30 +08:00
1 parent bf3d642b59
commit 18aa445b32
5 files changed
+104 -71

No files matched your search

@@ -1,3 +1,4 @@
import { useNavigate } from 'react-router-dom';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
@@ -12,6 +13,7 @@ import {
// 告警消息卡片
export function AlertMessagesCard({ alerts }: { alerts: any[] }) {
const navigate = useNavigate();
const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
return (
@@ -22,7 +24,7 @@ export function AlertMessagesCard({ alerts }: { alerts: any[] }) {
<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">
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/alerts')}>
查看全部
<ArrowRight className="h-4 w-4 ml-1" />
</Button>
@@ -150,6 +152,7 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
// 发布历史卡片
export function ReleaseHistoryCard({ releases }: { releases: any[] }) {
const navigate = useNavigate();
return (
<Card className="bg-slate-900 border-slate-800">
<CardHeader className="pb-2">
@@ -158,7 +161,7 @@ export function ReleaseHistoryCard({ releases }: { releases: any[] }) {
<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">
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/releases')}>
查看全部
<ArrowRight className="h-4 w-4 ml-1" />
</Button>
@@ -229,6 +232,7 @@ export function ReleaseHistoryCard({ releases }: { releases: any[] }) {
// 服务器状态卡片
export function ServerStatusCard({ servers }: { servers: any[] }) {
const navigate = useNavigate();
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;
@@ -241,7 +245,7 @@ export function ServerStatusCard({ servers }: { servers: any[] }) {
<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">
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/servers')}>
查看全部
<ArrowRight className="h-4 w-4 ml-1" />
</Button>
@@ -292,6 +296,7 @@ export function ServerStatusCard({ servers }: { servers: any[] }) {
// K8s集群状态卡片
export function K8sClusterCard({ clusters }: { clusters: any[] }) {
const navigate = useNavigate();
return (
<Card className="bg-slate-900 border-slate-800">
<CardHeader className="pb-2">
@@ -300,7 +305,7 @@ export function K8sClusterCard({ clusters }: { clusters: any[] }) {
<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">
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/clusters')}>
查看全部
<ArrowRight className="h-4 w-4 ml-1" />
</Button>