diff --git a/src/frontend/src/pages/ConfigPage.jsx b/src/frontend/src/pages/ConfigPage.jsx
index 5e77270..7aaea86 100644
--- a/src/frontend/src/pages/ConfigPage.jsx
+++ b/src/frontend/src/pages/ConfigPage.jsx
@@ -8,10 +8,12 @@ import {
HStack,
Portal,
Select,
+ Spinner,
Text,
Textarea,
VStack,
} from '@chakra-ui/react';
+
import DocumentTitle from '@/components/system/pages/DocumentTitle';
import PageContainer from '@/components/system/PageContainer';
import DashboardBackground from '@/components/system/pages/DashboardBackground';
@@ -32,6 +34,10 @@ const ConfigPage = () => {
const [editableConfig, setEditableConfig] = useState('');
const [applying, setApplying] = useState(false);
const [hasParsed, setHasParsed] = useState(false);
+ const [conmmand, setConmmand] = useState([]);
+ const [isPeizhi, setisPeizhi] = useState(false);
+ const [isApplying, setIsApplying] = useState(false);
+ const [applyStatus, setApplyStatus] = useState([]);
const deviceCollection = createListCollection({
items: devices.map((device) => ({
@@ -55,6 +61,13 @@ const ConfigPage = () => {
}
try {
+ /**
+ const response = await api.parseCommand(inputText);
+ if (response) {
+ setParsedConfig(response);
+ setEditableConfig(response);
+ setHasParsed(true);
+ }**/
const performParse = async () => {
if (testMode) {
await Common.sleep(800 + Math.random() * 700);
@@ -79,12 +92,16 @@ const ConfigPage = () => {
},
});
- const result = await resultWrapper.unwrap();
-
- if (result?.config) {
- setParsedConfig(result.config);
- setEditableConfig(result.config);
+ let result = await resultWrapper.unwrap();
+ if (result?.data) {
+ setParsedConfig(JSON.stringify(result.data));
+ setEditableConfig(JSON.stringify(result.data));
setHasParsed(true);
+ result = result.data;
+ if (result.config && Array.isArray(result.config.commands)) {
+ setConmmand(result.config.commands);
+ }
+ setisPeizhi(true);
}
} catch (error) {
console.error('配置解析异常:', error);
@@ -95,6 +112,37 @@ const ConfigPage = () => {
}
};
+ const applyCommand = async (switch_ip, command, index) => {
+ try {
+ setApplyStatus((prevStatus) => {
+ const updated = [...prevStatus];
+ updated[index] = 'in-progress';
+ return updated;
+ });
+
+ const applyResult = testMode
+ ? await Common.sleep(1000)
+ : await api.applyConfig(switch_ip, [command]);
+
+ if (applyResult?.data?.success) {
+ setApplyStatus((prevStatus) => {
+ const updated = [...prevStatus];
+ updated[index] = 'success';
+ return updated;
+ });
+ } else {
+ Notification.error({ title: '命令应用失败', description: '请检查命令是否合法' });
+ }
+ } catch (error) {
+ setApplyStatus((prevStatus) => {
+ const updated = [...prevStatus];
+ updated[index] = 'failed';
+ return updated;
+ });
+ throw error;
+ }
+ };
+
const handleApply = async () => {
if (!editableConfig) {
Notification.warn({
@@ -108,7 +156,7 @@ const ConfigPage = () => {
try {
const applyOperation = testMode
? Common.sleep(1000).then(() => ({ success: true }))
- : await api.applyConfig(selectedDevice, editableConfig);
+ : await api.applyConfig(selectedDevice, conmmand);
await Notification.promise({
promise: applyOperation,
@@ -250,6 +298,143 @@ const ConfigPage = () => {
)}
+ {isPeizhi && parsedConfig && (
+
+
+ {(() => {
+ let parsed;
+ try {
+ parsed = JSON.parse(editableConfig);
+ } catch (e) {
+ return 配置 JSON 格式错误,无法解析。;
+ }
+
+ const config = parsed.config ? [parsed.config] : parsed;
+ return config.map((cfg, idx) => (
+
+
+ 配置类型: {cfg.type}
+
+
+ {Object.entries(cfg).map(([key, value]) => {
+ if (key === 'type' || key === 'commands') return null;
+ return (
+
+ {key}
+
+ );
+ })}
+
+
+ 配置命令:
+
+ {cfg.commands?.map((cmd, i) => (
+
+ 命令 #{i + 1}
+
+ ))}
+
+
+
+ ));
+ })()}
+ {isApplying && (
+
+
+
+
+ 应用配置命令
+
+
+ {conmmand.map((command, index) => (
+
+
+ {command}
+
+
+
+ {applyStatus[index] === 'success'
+ ? '成功'
+ : applyStatus[index] === 'failed'
+ ? '失败'
+ : applyStatus[index] === 'in-progress'
+ ? '正在应用'
+ : ''}
+
+
+ ))}
+
+
+
+
+ )}
+
+
+ )}
diff --git a/src/frontend/src/services/api/api.js b/src/frontend/src/services/api/api.js
index 9c9dd26..36b0a29 100644
--- a/src/frontend/src/services/api/api.js
+++ b/src/frontend/src/services/api/api.js
@@ -41,22 +41,16 @@ export const api = {
* @param text 文本
* @returns {Promise>}
*/
- //parseCommand: async (text) => await axios.post(buildUrl('/api/parse_command'), { command: text }),
- async parseCommand(text) {
- const res = await axios.post(buildUrl('/api/parse_command', { command: text }));
- if (res) {
- return res;
- } else return null;
- },
+ parseCommand: (text) => axios.post(buildUrl('/api/parse_command'), { command: text }),
/**
* 应用配置
* @param switch_ip 交换机ip
- * @param config 配置
+ * @param commands 配置,为数组[]
* @returns {Promise>}
*/
- applyConfig: (switch_ip, config) =>
- axios.post(buildUrl('/api/apply_config'), { switch_ip, config }),
+ applyConfig: (switch_ip, commands) =>
+ axios.post(buildUrl('/api/execute_cli_commands'), { switch_ip, commands }),
/**
* 更新基础URL