增加系统版本维护页面
This commit is contained in:
dengqichen
parent
051a3c827c
commit
35c65b0510
@ -685,40 +685,6 @@ export const ServerEditDialog: React.FC<ServerEditDialogProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 测试连接按钮 */}
|
||||
<div className="mt-4 flex items-center gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleTestAndCollect}
|
||||
disabled={testing || collecting || loading}
|
||||
className="flex-1"
|
||||
>
|
||||
{testing ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
测试连接中...
|
||||
</>
|
||||
) : collecting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
采集硬件信息中...
|
||||
</>
|
||||
) : testSuccess ? (
|
||||
<>
|
||||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||||
测试连接并采集信息
|
||||
</>
|
||||
) : (
|
||||
'测试连接并采集信息'
|
||||
)}
|
||||
</Button>
|
||||
{testSuccess && !isEdit && (
|
||||
<span className="text-xs text-green-600 dark:text-green-400">
|
||||
✓ 连接成功，硬件信息已采集
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
@ -36,7 +36,7 @@ import { DataTablePagination } from '@/components/ui/pagination';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import type { ServerResponse, ServerCategoryResponse, ServerStatus, OsType } from './types';
|
||||
import { ServerStatusLabels, OsTypeLabels } from './types';
|
||||
import { getServers, getServerCategories, deleteServer, testServerConnection, collectServerHardware } from './service';
|
||||
import { getServers, getServerList, getServerCategories, deleteServer, testServerConnection, collectServerHardware } from './service';
|
||||
import { CategoryManageDialog } from './components/CategoryManageDialog';
|
||||
import { AlertRuleManageDialog } from './components/AlertRuleManageDialog';
|
||||
import { ServerEditDialog } from './components/ServerEditDialog';
|
||||
@ -142,19 +142,37 @@ const ServerList: React.FC = () => {
|
||||
};
|
||||
|
||||
// 加载服务器列表
|
||||
const loadServers = async () => {
|
||||
setLoading(true);
|
||||
const loadServers = async (silent: boolean = false) => {
|
||||
// silent 为 true 时不显示全局 loading 状态（用于操作后的静默刷新）
|
||||
if (!silent) {
|
||||
setLoading(true);
|
||||
}
|
||||
try {
|
||||
const result = await getServers({
|
||||
const params = {
|
||||
categoryId: selectedCategoryId,
|
||||
status: selectedStatus,
|
||||
osType: selectedOsType,
|
||||
pageNum: pageIndex,
|
||||
size: pageSize,
|
||||
});
|
||||
if (result) {
|
||||
setServers(result.content || []);
|
||||
setTotalElements(result.totalElements || 0);
|
||||
};
|
||||
|
||||
// 卡片模式使用 list 接口（无分页），列表模式使用 page 接口（有分页）
|
||||
if (viewMode === 'grid') {
|
||||
// 卡片模式：调用 list 接口获取所有数据
|
||||
const result = await getServerList(params);
|
||||
if (result) {
|
||||
setServers(result);
|
||||
setTotalElements(result.length);
|
||||
}
|
||||
} else {
|
||||
// 列表模式：调用 page 接口获取分页数据
|
||||
const result = await getServers({
|
||||
...params,
|
||||
pageNum: pageIndex,
|
||||
size: pageSize,
|
||||
});
|
||||
if (result) {
|
||||
setServers(result.content || []);
|
||||
setTotalElements(result.totalElements || 0);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载服务器列表失败:', error);
|
||||
@ -164,7 +182,9 @@ const ServerList: React.FC = () => {
|
||||
description: '无法加载服务器列表',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
if (!silent) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -178,6 +198,9 @@ const ServerList: React.FC = () => {
|
||||
title: '连接成功',
|
||||
description: `响应时间: ${result.responseTime}ms`,
|
||||
});
|
||||
// 静默刷新服务器列表（不显示加载状态）
|
||||
await loadServers(true);
|
||||
await loadStats();
|
||||
} else {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
@ -199,20 +222,39 @@ const ServerList: React.FC = () => {
|
||||
// 刷新硬件信息
|
||||
const handleCollectHardware = async (server: ServerResponse) => {
|
||||
setCollectingServerId(server.id);
|
||||
|
||||
// 显示开始采集的提示
|
||||
toast({
|
||||
title: '正在采集硬件信息...',
|
||||
description: `正在从 ${server.serverName} 采集最新硬件信息`,
|
||||
});
|
||||
|
||||
try {
|
||||
const result = await collectServerHardware(server.id);
|
||||
toast({
|
||||
title: '硬件信息已更新',
|
||||
description: `${result.hostname} - CPU: ${result.cpuCores}核 内存: ${result.memorySize}GB`,
|
||||
});
|
||||
// 刷新服务器列表
|
||||
await loadServers();
|
||||
|
||||
// 静默刷新服务器列表（不显示加载状态）
|
||||
await loadServers(true);
|
||||
await loadStats();
|
||||
|
||||
// 显示详细的成功信息
|
||||
toast({
|
||||
title: '✓ 硬件信息更新成功',
|
||||
description: (
|
||||
<div className="space-y-1">
|
||||
<div><strong>{result.hostname}</strong></div>
|
||||
<div className="text-xs space-y-0.5">
|
||||
<div>• CPU: {result.cpuCores} 核</div>
|
||||
<div>• 内存: {result.memorySize} GB</div>
|
||||
<div>• 磁盘: {result.diskSize} GB</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
});
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: '采集失败',
|
||||
description: error.response?.data?.message || '无法采集硬件信息',
|
||||
description: error.response?.data?.message || '无法采集硬件信息，请检查服务器连接',
|
||||
});
|
||||
} finally {
|
||||
setCollectingServerId(null);
|
||||
@ -250,10 +292,10 @@ const ServerList: React.FC = () => {
|
||||
await deleteServer(serverToDelete.id);
|
||||
};
|
||||
|
||||
// 成功回调
|
||||
// 成功回调（新增/编辑服务器后）
|
||||
const handleSuccess = () => {
|
||||
loadCategories();
|
||||
loadServers();
|
||||
loadServers(true); // 静默刷新
|
||||
loadStats();
|
||||
};
|
||||
|
||||
@ -293,10 +335,10 @@ const ServerList: React.FC = () => {
|
||||
);
|
||||
});
|
||||
|
||||
// 监听筛选条件和分页变化
|
||||
// 监听筛选条件、分页和视图模式变化
|
||||
useEffect(() => {
|
||||
loadServers();
|
||||
}, [pageIndex, pageSize, selectedCategoryId, selectedStatus, selectedOsType]);
|
||||
}, [pageIndex, pageSize, selectedCategoryId, selectedStatus, selectedOsType, viewMode]);
|
||||
|
||||
// 使用statsData作为统计数据
|
||||
const stats = statsData;
|
||||
@ -579,8 +621,8 @@ const ServerList: React.FC = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 分页 */}
|
||||
{!loading && servers.length > 0 && (
|
||||
{/* 分页（仅列表模式） */}
|
||||
{!loading && servers.length > 0 && viewMode === 'table' && (
|
||||
<div className="mt-6 flex items-center justify-between">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
共 {totalElements} 条记录，第 {pageIndex + 1} / {Math.ceil(totalElements / pageSize)} 页
|
||||
@ -596,6 +638,16 @@ const ServerList: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 卡片模式统计信息 */}
|
||||
{!loading && servers.length > 0 && viewMode === 'grid' && (
|
||||
<div className="mt-6 text-sm text-muted-foreground text-center">
|
||||
共 {totalElements} 台服务器
|
||||
{searchKeyword && filteredServers.length > 0 && (
|
||||
<span>，搜索结果 {filteredServers.length} 条</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</ScrollArea>
|
||||
@ -639,7 +691,7 @@ const ServerList: React.FC = () => {
|
||||
description: `服务器"${serverToDelete?.serverName}"已删除`,
|
||||
});
|
||||
setServerToDelete(null);
|
||||
loadServers();
|
||||
loadServers(true); // 静默刷新
|
||||
loadStats();
|
||||
}}
|
||||
variant="destructive"
|
||||
|
||||
@ -65,6 +65,16 @@ export const batchDeleteServerCategories = (ids: number[]) =>
|
||||
|
||||
// ==================== 服务器 ====================
|
||||
|
||||
/**
|
||||
* 获取服务器列表（不分页）
|
||||
*/
|
||||
export const getServerList = (params?: {
|
||||
categoryId?: number;
|
||||
status?: string;
|
||||
osType?: string;
|
||||
}) =>
|
||||
request.get<ServerResponse[]>(`${SERVER_URL}/list`, { params });
|
||||
|
||||
/**
|
||||
* 获取服务器分页列表
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user