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 {
|
import {
|
||||||
Box,
|
Box,
|
||||||
VStack,
|
VStack,
|
||||||
@ -7,9 +7,13 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Text,
|
Text,
|
||||||
Spinner,
|
Spinner,
|
||||||
|
Table,
|
||||||
Badge,
|
Badge,
|
||||||
HStack,
|
HStack,
|
||||||
Table,
|
Select,
|
||||||
|
Field,
|
||||||
|
Portal,
|
||||||
|
createListCollection,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import DocumentTitle from '@/components/system/pages/DocumentTitle';
|
import DocumentTitle from '@/components/system/pages/DocumentTitle';
|
||||||
import PageContainer from '@/components/system/PageContainer';
|
import PageContainer from '@/components/system/PageContainer';
|
||||||
@ -28,22 +32,28 @@ import scanEffect from '@/libs/script/scanPage/scanEffect';
|
|||||||
*/
|
*/
|
||||||
const ScanPage = () => {
|
const ScanPage = () => {
|
||||||
const [subnet, setSubnet] = useState('');
|
const [subnet, setSubnet] = useState('');
|
||||||
const [devices, setDevices] = useState([]);
|
const [networkAdapters, setNetworkAdapters] = useState(createListCollection({ items: [] }));
|
||||||
|
const [scannedDevices, setScannedDevices] = useState([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [localIp, setLocalIp] = useState('');
|
const [localIp, setLocalIp] = useState('');
|
||||||
|
const [selectedNetwork, setSelectedNetwork] = useState('');
|
||||||
|
const [inputMode, setInputMode] = useState(false);
|
||||||
|
|
||||||
const config = ConfigTool.load();
|
const config = ConfigTool.load();
|
||||||
const testMode = config.testMode;
|
const testMode = config.testMode;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
scanEffect
|
api.getNetworkAdapters().then((response) => {
|
||||||
.fetchLocalInfo({
|
const { networks } = response.data;
|
||||||
setLocalIp: setLocalIp,
|
const networkCollection = createListCollection({
|
||||||
setSubnet: setSubnet,
|
items: networks.map((network) => ({
|
||||||
subnet: subnet,
|
label: `${network.adapter} (${network.network})`,
|
||||||
})
|
value: network.network,
|
||||||
.then();
|
})),
|
||||||
}, [subnet, Notification]);
|
});
|
||||||
|
setNetworkAdapters(networkCollection);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
const handleScan = async () => {
|
const handleScan = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
@ -57,17 +67,18 @@ const ScanPage = () => {
|
|||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
const res = await api.scan(subnet);
|
const res = await api.scan(subnet);
|
||||||
scanDevices = res.devices || [];
|
console.log(`res:${JSON.stringify(res)}`);
|
||||||
|
scanDevices = res.data.devices || [];
|
||||||
Notification.success({
|
Notification.success({
|
||||||
title: '扫描子网设备成功!',
|
title: '扫描子网设备成功!',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
console.log(`device:${JSON.stringify(scanDevices)}`);
|
||||||
scanDevices = scanDevices.map((d, idx) => ({
|
scanDevices = scanDevices.map((d, idx) => ({
|
||||||
...d,
|
...d,
|
||||||
name: `交换机 ${idx + 1}`,
|
name: `交换机 ${idx + 1}`,
|
||||||
}));
|
}));
|
||||||
setDevices(scanDevices);
|
setScannedDevices(scanDevices);
|
||||||
const updatedStats = {
|
const updatedStats = {
|
||||||
totalDevices: scanDevices.length,
|
totalDevices: scanDevices.length,
|
||||||
onlineDevices: scanDevices.length,
|
onlineDevices: scanDevices.length,
|
||||||
@ -97,15 +108,20 @@ const ScanPage = () => {
|
|||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
const res = await api.listDevices();
|
const res = await api.listDevices();
|
||||||
scanDevices = res.devices || [];
|
scanDevices = res.data.devices || [];
|
||||||
}
|
}
|
||||||
setDevices(scanDevices);
|
setScannedDevices(scanDevices);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
Notification.error({ title: '获取上次扫描记录失败' });
|
Notification.error({ title: '获取上次扫描记录失败' });
|
||||||
}
|
}
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleNetworkChange = ({ value }) => {
|
||||||
|
setSelectedNetwork(value[0] ?? '');
|
||||||
|
setSubnet(value[0] ?? '');
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DocumentTitle title={'网络扫描'}>
|
<DocumentTitle title={'网络扫描'}>
|
||||||
<DashboardBackground />
|
<DashboardBackground />
|
||||||
@ -132,6 +148,53 @@ const ScanPage = () => {
|
|||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
<HStack mb={4} spacing={4}>
|
<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
|
<Input
|
||||||
placeholder={'输入子网 (如 192.168.1.0/24)'}
|
placeholder={'输入子网 (如 192.168.1.0/24)'}
|
||||||
value={subnet}
|
value={subnet}
|
||||||
@ -139,6 +202,9 @@ const ScanPage = () => {
|
|||||||
width={'300px'}
|
width={'300px'}
|
||||||
bg={'whiteAlpha.200'}
|
bg={'whiteAlpha.200'}
|
||||||
/>
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<HStack mb={4} spacing={4}>
|
||||||
<Button
|
<Button
|
||||||
onClick={handleScan}
|
onClick={handleScan}
|
||||||
isLoading={loading}
|
isLoading={loading}
|
||||||
@ -164,7 +230,7 @@ const ScanPage = () => {
|
|||||||
</HStack>
|
</HStack>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!loading && devices.length > 0 && (
|
{!loading && scannedDevices.length > 0 && (
|
||||||
<FadeInWrapper delay={0.2} yOffset={-5}>
|
<FadeInWrapper delay={0.2} yOffset={-5}>
|
||||||
<Table.Root
|
<Table.Root
|
||||||
variant={'outline'}
|
variant={'outline'}
|
||||||
@ -193,7 +259,7 @@ const ScanPage = () => {
|
|||||||
</Table.Row>
|
</Table.Row>
|
||||||
</Table.Header>
|
</Table.Header>
|
||||||
<Table.Body>
|
<Table.Body>
|
||||||
{devices.map((d) => (
|
{scannedDevices.map((d) => (
|
||||||
<Table.Row
|
<Table.Row
|
||||||
key={d.ip}
|
key={d.ip}
|
||||||
_hover={{
|
_hover={{
|
||||||
@ -211,7 +277,7 @@ const ScanPage = () => {
|
|||||||
</FadeInWrapper>
|
</FadeInWrapper>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!loading && devices.length === 0 && (
|
{!loading && scannedDevices.length === 0 && (
|
||||||
<Text color={'gray.400'}>{'暂无扫描结果,请执行扫描..'}</Text>
|
<Text color={'gray.400'}>{'暂无扫描结果,请执行扫描..'}</Text>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -52,6 +52,12 @@ export const api = {
|
|||||||
applyConfig: (switch_ip, commands) =>
|
applyConfig: (switch_ip, commands) =>
|
||||||
axios.post(buildUrl('/api/execute_cli_commands'), { switch_ip: switch_ip, commands: 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
|
* 更新基础URL
|
||||||
* @param url
|
* @param url
|
||||||
|
Loading…
x
Reference in New Issue
Block a user