mirror of
https://github.com/Jerryplusy/AI-powered-switches.git
synced 2025-10-14 09:49:19 +00:00
fix:修复api调用问题
This commit is contained in:
parent
fcf072636e
commit
65d92a8777
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
@ -7,9 +7,13 @@ import {
|
||||
Button,
|
||||
Text,
|
||||
Spinner,
|
||||
Table,
|
||||
Badge,
|
||||
HStack,
|
||||
Table,
|
||||
Select,
|
||||
Field,
|
||||
Portal,
|
||||
createListCollection,
|
||||
} from '@chakra-ui/react';
|
||||
import DocumentTitle from '@/components/system/pages/DocumentTitle';
|
||||
import PageContainer from '@/components/system/PageContainer';
|
||||
@ -28,22 +32,28 @@ import scanEffect from '@/libs/script/scanPage/scanEffect';
|
||||
*/
|
||||
const ScanPage = () => {
|
||||
const [subnet, setSubnet] = useState('');
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [networkAdapters, setNetworkAdapters] = useState(createListCollection({ items: [] }));
|
||||
const [scannedDevices, setScannedDevices] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [localIp, setLocalIp] = useState('');
|
||||
const [selectedNetwork, setSelectedNetwork] = useState('');
|
||||
const [inputMode, setInputMode] = useState(false);
|
||||
|
||||
const config = ConfigTool.load();
|
||||
const testMode = config.testMode;
|
||||
|
||||
useEffect(() => {
|
||||
scanEffect
|
||||
.fetchLocalInfo({
|
||||
setLocalIp: setLocalIp,
|
||||
setSubnet: setSubnet,
|
||||
subnet: subnet,
|
||||
})
|
||||
.then();
|
||||
}, [subnet, Notification]);
|
||||
api.getNetworkAdapters().then((response) => {
|
||||
const { networks } = response.data;
|
||||
const networkCollection = createListCollection({
|
||||
items: networks.map((network) => ({
|
||||
label: `${network.adapter} (${network.network})`,
|
||||
value: network.network,
|
||||
})),
|
||||
});
|
||||
setNetworkAdapters(networkCollection);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleScan = async () => {
|
||||
setLoading(true);
|
||||
@ -57,17 +67,18 @@ const ScanPage = () => {
|
||||
});
|
||||
} else {
|
||||
const res = await api.scan(subnet);
|
||||
scanDevices = res.devices || [];
|
||||
console.log(`res:${JSON.stringify(res)}`);
|
||||
scanDevices = res.data.devices || [];
|
||||
Notification.success({
|
||||
title: '扫描子网设备成功!',
|
||||
});
|
||||
}
|
||||
|
||||
console.log(`device:${JSON.stringify(scanDevices)}`);
|
||||
scanDevices = scanDevices.map((d, idx) => ({
|
||||
...d,
|
||||
name: `交换机 ${idx + 1}`,
|
||||
}));
|
||||
setDevices(scanDevices);
|
||||
setScannedDevices(scanDevices);
|
||||
const updatedStats = {
|
||||
totalDevices: scanDevices.length,
|
||||
onlineDevices: scanDevices.length,
|
||||
@ -97,15 +108,20 @@ const ScanPage = () => {
|
||||
});
|
||||
} else {
|
||||
const res = await api.listDevices();
|
||||
scanDevices = res.devices || [];
|
||||
scanDevices = res.data.devices || [];
|
||||
}
|
||||
setDevices(scanDevices);
|
||||
setScannedDevices(scanDevices);
|
||||
} catch (err) {
|
||||
Notification.error({ title: '获取上次扫描记录失败' });
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleNetworkChange = ({ value }) => {
|
||||
setSelectedNetwork(value[0] ?? '');
|
||||
setSubnet(value[0] ?? '');
|
||||
};
|
||||
|
||||
return (
|
||||
<DocumentTitle title={'网络扫描'}>
|
||||
<DashboardBackground />
|
||||
@ -132,6 +148,53 @@ const ScanPage = () => {
|
||||
</HStack>
|
||||
|
||||
<HStack mb={4} spacing={4}>
|
||||
<Field.Root>
|
||||
<Field.Label fontWeight={'bold'} mb={1} fontSize="sm">
|
||||
{'选择网段'}
|
||||
</Field.Label>
|
||||
<Select.Root
|
||||
collection={networkAdapters}
|
||||
value={selectedNetwork ? [selectedNetwork] : []}
|
||||
onValueChange={handleNetworkChange}
|
||||
placeholder={'请选择网段'}
|
||||
size={'sm'}
|
||||
colorPalette={'teal'}
|
||||
>
|
||||
<Select.HiddenSelect />
|
||||
<Select.Control>
|
||||
<Select.Trigger>
|
||||
<Select.ValueText />
|
||||
</Select.Trigger>
|
||||
<Select.IndicatorGroup>
|
||||
<Select.Indicator />
|
||||
<Select.ClearTrigger />
|
||||
</Select.IndicatorGroup>
|
||||
</Select.Control>
|
||||
<Portal>
|
||||
<Select.Positioner>
|
||||
<Select.Content>
|
||||
{networkAdapters.items.map((item, index) => (
|
||||
<Select.Item key={`${item.value}-${index}`} item={item}>
|
||||
{' '}
|
||||
{item.label}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select.Positioner>
|
||||
</Portal>
|
||||
</Select.Root>
|
||||
</Field.Root>
|
||||
|
||||
<Button
|
||||
onClick={() => setInputMode(!inputMode)}
|
||||
colorPalette={'blue'}
|
||||
variant={'outline'}
|
||||
>
|
||||
{inputMode ? '切换为选择模式' : '切换为输入模式'}
|
||||
</Button>
|
||||
</HStack>
|
||||
|
||||
{inputMode ? (
|
||||
<Input
|
||||
placeholder={'输入子网 (如 192.168.1.0/24)'}
|
||||
value={subnet}
|
||||
@ -139,6 +202,9 @@ const ScanPage = () => {
|
||||
width={'300px'}
|
||||
bg={'whiteAlpha.200'}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<HStack mb={4} spacing={4}>
|
||||
<Button
|
||||
onClick={handleScan}
|
||||
isLoading={loading}
|
||||
@ -164,7 +230,7 @@ const ScanPage = () => {
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
{!loading && devices.length > 0 && (
|
||||
{!loading && scannedDevices.length > 0 && (
|
||||
<FadeInWrapper delay={0.2} yOffset={-5}>
|
||||
<Table.Root
|
||||
variant={'outline'}
|
||||
@ -193,7 +259,7 @@ const ScanPage = () => {
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{devices.map((d) => (
|
||||
{scannedDevices.map((d) => (
|
||||
<Table.Row
|
||||
key={d.ip}
|
||||
_hover={{
|
||||
@ -211,7 +277,7 @@ const ScanPage = () => {
|
||||
</FadeInWrapper>
|
||||
)}
|
||||
|
||||
{!loading && devices.length === 0 && (
|
||||
{!loading && scannedDevices.length === 0 && (
|
||||
<Text color={'gray.400'}>{'暂无扫描结果,请执行扫描..'}</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
@ -52,6 +52,12 @@ export const api = {
|
||||
applyConfig: (switch_ip, commands) =>
|
||||
axios.post(buildUrl('/api/execute_cli_commands'), { switch_ip: switch_ip, commands: commands }),
|
||||
|
||||
/**
|
||||
* 获取网络适配器信息
|
||||
* @returns {Promise<axios.AxiosResponse<any>>}
|
||||
*/
|
||||
getNetworkAdapters: () => axios.get(buildUrl('/api/network_adapters')),
|
||||
|
||||
/**
|
||||
* 更新基础URL
|
||||
* @param url
|
||||
|
Loading…
x
Reference in New Issue
Block a user