diff --git a/frontend/src/sections/devices/cwmp/devices-rpc.js b/frontend/src/sections/devices/cwmp/devices-rpc.js index 62c97b0..13d99bf 100644 --- a/frontend/src/sections/devices/cwmp/devices-rpc.js +++ b/frontend/src/sections/devices/cwmp/devices-rpc.js @@ -19,37 +19,26 @@ import { DialogContentText, DialogActions, Box, - IconButton + IconButton, + Grid } from '@mui/material'; import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon'; import PaperAirplane from '@heroicons/react/24/solid/PaperAirplaneIcon'; import CircularProgress from '@mui/material/CircularProgress'; import Backdrop from '@mui/material/Backdrop'; import { useRouter } from 'next/router'; +import { useBackendContext } from 'src/contexts/backend-context'; +import DocumentArrowDown from '@heroicons/react/24/outline/DocumentArrowDownIcon'; +import TrashIcon from '@heroicons/react/24/outline/TrashIcon'; +import PlusCircleIcon from '@heroicons/react/24/outline/PlusCircleIcon'; +import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon'; +import CheckIcon from '@heroicons/react/24/outline/CheckIcon'; export const DevicesRPC = () => { const router = useRouter() - -const [open, setOpen] = useState(false); -const [scroll, setScroll] = useState('paper'); -const [answer, setAnswer] = useState(false) -const [content, setContent] = useState('') -const [age, setAge] = useState(2); - -const [value, setValue] = useState(` - - - - - - InternetGatewayDevice.LANDevice.1.WLANConfiguration.1. - InternetGatewayDevice.LANDevice.1.WLANConfiguration.2. - - - -`) +let { httpRequest } = useBackendContext() var prettifyXml = function(sourceXml) { @@ -75,129 +64,219 @@ var prettifyXml = function(sourceXml) return resultXml; }; +const [open, setOpen] = useState(false); +const [scroll, setScroll] = useState('paper'); +const [answer, setAnswer] = useState(false) +const [content, setContent] = useState('') +const [age, setAge] = useState(6); +const [newMessage, setNewMessage] = useState(false) +const [message, setMessage] = useState(null) +const [currentMsg, setCurrentMsg] = useState(0) +const [newMsgName, setNewMsgName] = useState("") +const [value, setValue] = useState() +const [saveChanges, setSaveChanges] = useState(false) +const [loadingSaveMsg, setLoadingSaveMsg] = useState(false) +const possibleMsgs = [ + ` + + + + + + + InternetGatewayDevice.TraceRouteDiagnostics.Host + 192.168.60.4 + + + + + +`, +` + + + + + InternetGatewayDevice.LANDevice.1.WLANConfiguration.2. + + + +`, +` + + + + + InternetGatewayDevice.LANDevice.1.WLANConfiguration. + + + +`, +` + + + + + + 007 + + + + `, +` + + + + + + InternetGatewayDevice.LANDevice.1.WLANConfiguration.1. + + + +`,` + + + + + InternetGatewayDevice. + 1 + + +`, +` + + + + + + InternetGatewayDevice.LANDevice.1.WLANConfiguration. + + + +`] +const [newMsgValue, setNewMsgValue] = useState(possibleMsgs[age-1]) +const [loading, setLoading] = useState(false); + +const handleNewMessageValue = (event) => { + setNewMsgValue(event.target.value) +} + const handleClose = () => { setOpen(false); }; -const handleOpen = () => { - setOpen(true); - var myHeaders = new Headers(); - myHeaders.append("Authorization", localStorage.getItem("token")); - var raw = value +const handleCancelNewMsgTemplate = () => { + setNewMessage(false) + setNewMsgName("") + setNewMsgValue(possibleMsgs[age-1]) + // setValue(possibleMsgs[age-1]) +} - var requestOptions = { - method: 'PUT', - headers: myHeaders, - body: raw, - redirect: 'follow' - }; - - var method; - - switch(age) { - case 1: - method="addObject" - break; - case 2: - method="getParameterValues" - break; - case 3: - method="setParameterValues" - break; - case 4: - method="deleteObject" - break; - } - - - fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device/cwmp/${router.query.id[0]}/${method}`, requestOptions) - .then(response => response.text()) - .then(result => { - if (result.status === 401){ - router.push("/auth/login") +const saveMsg = async () => { + let {status} = await httpRequest( + `/api/device/message?name=`+message[currentMsg].name, + "PUT", + value, + null, + ) + if ( status === 204){ + setSaveChanges(false) + setMessage(message.map((msg, index) => { + if (index === currentMsg) { + return {...msg, value: value} + }else{ + return msg } - setOpen(false) - setAnswer(true) - let teste = prettifyXml(result) - console.log(teste) - setContent(teste) - }) - .catch(error => console.log('error', error)); - }; + })) + } +} + +const createNewMsg = async () => { + setLoading(true) + let {status} = await httpRequest( + `/api/device/message/cwmp?name=`+newMsgName, + "POST", + newMsgValue, + null, + ) + if ( status === 204){ + setNewMessage(false) + setNewMsgName("") + let result = await fetchMessages() + if (result) { + setCurrentMsg(result.length-1) + } + setValue(newMsgValue) + setNewMsgValue(possibleMsgs[age-1]) + } + setLoading(false) +} + +const handleChangeMessage = (event) => { + setSaveChanges(false) + setCurrentMsg(event.target.value) + setValue(message[event.target.value].value) +} + +const handleDeleteMessage = async () => { + let {status} = await httpRequest( + `/api/device/message?name=`+message[currentMsg].name.replace(" ", '+'), + "DELETE", + ) + if ( status === 204){ + fetchMessages() + setCurrentMsg(0) + setValue("") + } +} + +const handleOpen = async () => { + setOpen(true); + + let {result, status} = await httpRequest( + `/api/device/cwmp/${router.query.id[0]}/generic`, + "PUT", + value, + null, + "text", + ) + if (status === 200){ + setAnswer(true) + console.log("result:",result) + let answer = prettifyXml(result) + if (answer == "null"){ + answer = result + } + console.log(answer) + setContent(answer) + } + setOpen(false) + +} + +const fetchMessages = async () => { + let {result, status} = await httpRequest( + `/api/device/message?type=cwmp`, + "GET", + null, + null, + ) + if ( status === 200){ + setMessage(result) + setValue(result ? result[0].value : "") + return result + } +} const handleChangeRPC = (event) => { setAge(event.target.value); - switch(event.target.value) { - case 1: - setValue(` - - - - - InternetGatewayDevice.LANDevice. - - - - `) - break; - case 2: - setValue(` - - - - - - InternetGatewayDevice.LANDevice.1.WLANConfiguration.1. - InternetGatewayDevice.LANDevice.1.WLANConfiguration.2. - InternetGatewayDevice.LANDevice.2.WLANConfiguration.2. - InternetGatewayDevice.LANDevice.2.WLANConfiguration.1. - - - - `) - break; - case 3: - setValue(` - - - - - - - - InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.Enable - 0 - - - InternetGatewayDevice.LANDevice.1.WLANConfiguration.2.SSID - HUAWEI_TEST-2 - - - LC1309123 - - - `) - break; - case 4: - setValue(` - - - - - InternetGatewayDevice.LANDevice.3. - - - - `) - break; - default: - // code block - } + setNewMsgValue(possibleMsgs[event.target.value-1]) }; - const handleChange = (event) => { - setValue(event.target.value); - }; + const handleEditMessage = (event) => { + setSaveChanges(true) + setValue(event.target.value) + } const handleSubmit = useCallback( (event) => { @@ -206,54 +285,91 @@ const handleOpen = () => { [] ); + useEffect(() => { + fetchMessages(); + },[]); + return (
- - - - - + < EnvelopeIcon/>} + title="Custom Message" + action={ + + + } + > + + + + Message + + + - + />:} - - - + {/* */} + + + + {!loadingSaveMsg ? : } + + + + theme.zIndex.drawer + 1 }} @@ -307,6 +423,83 @@ const handleOpen = () => { }}>Ok + + + + + + + {setNewMsgName(event.target.value)}} + label="Name" + sx={{maxWidth: "30%", justifyContent:"center"}} + /> + + Template + + + + + + + + {/* */} + + + {!loading ? + :} + +
); diff --git a/frontend/src/sections/devices/usp/devices-rpc.js b/frontend/src/sections/devices/usp/devices-rpc.js index 521bd9e..4f54a41 100644 --- a/frontend/src/sections/devices/usp/devices-rpc.js +++ b/frontend/src/sections/devices/usp/devices-rpc.js @@ -19,151 +19,296 @@ import { DialogContentText, DialogActions, Box, - IconButton + IconButton, + Grid } from '@mui/material'; import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon'; import PaperAirplane from '@heroicons/react/24/solid/PaperAirplaneIcon'; import CircularProgress from '@mui/material/CircularProgress'; import Backdrop from '@mui/material/Backdrop'; import { useRouter } from 'next/router'; +import { useBackendContext } from 'src/contexts/backend-context'; +import DocumentArrowDown from '@heroicons/react/24/outline/DocumentArrowDownIcon'; +import TrashIcon from '@heroicons/react/24/outline/TrashIcon'; +import PlusCircleIcon from '@heroicons/react/24/outline/PlusCircleIcon'; +import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon'; +import CheckIcon from '@heroicons/react/24/outline/CheckIcon'; export const DevicesRPC = () => { const router = useRouter() +let { httpRequest } = useBackendContext() const [open, setOpen] = useState(false); const [scroll, setScroll] = useState('paper'); const [answer, setAnswer] = useState(false) const [content, setContent] = useState('') -const [age, setAge] = useState(2); +const [age, setAge] = useState(6); +const [newMessage, setNewMessage] = useState(false) +const [message, setMessage] = useState(null) +const [currentMsg, setCurrentMsg] = useState(0) +const [newMsgName, setNewMsgName] = useState("") +const [value, setValue] = useState() +const [saveChanges, setSaveChanges] = useState(false) +const [loadingSaveMsg, setLoadingSaveMsg] = useState(false) +const possibleMsgs = [ + `{ + "header": { + "msg_id": "b7dc38ea-aefb-4761-aa55-edaa97adb2f0", + "msg_type": 4 + }, + "body": { + "request": { + "set": { + "allow_partial":true, + "update_objs":[ + { + "obj_path":"Device.IP.Interface.1.", + "param_settings":[ + { + "param":"Alias", + "value":"test", + "required":true + } + ] + } + ] + } + } + } +}`, +`{ + "header": { + "msg_id": "b7dc38ea-aefb-4761-aa55-edaa97adb2f0", + "msg_type": 10 + }, + "body": { + "request": { + "delete": { + "allow_partial": true, + "obj_paths": [ + "Device.IP.Interface.[Alias==test]." + ] + } + } + } +}`, +` +{ + "header": { + "msg_id": "b7dc38ea-aefb-4761-aa55-edaa97adb2f0", + "msg_type": 8 + }, + "body": { + "request": { + "add": { + "allow_partial": true, + "create_objs": [ + { + "obj_path": "Device.IP.Interface.", + "param_settings": [ + { + "param": "Alias", + "value": "test", + "required": true + } + ] + } + ] + } + } + } +}`, +`{ + "header": { + "msg_id": "b7dc38ea-aefb-4761-aa55-edaa97adb2f0", + "msg_type": 6 + }, + "body": { + "request": { + "operate": { + "command": "Device.Reboot()", + "send_resp": true + } + } + } +}`, +`{ + "header": { + "msg_id": "b7dc38ea-aefb-4761-aa55-edaa97adb2f0", + "msg_type": 1 + }, + "body": { + "request": { + "get": { + "paramPaths": [ + "Device.WiFi.SSID.[Name==wlan0].", + "Device.IP.Interface.*.Alias", + "Device.DeviceInfo.FirmwareImage.*.Alias", + "Device.IP.Interface.1.IPv4Address.1.IPAddress" + ], + "maxDepth": 2 + } + } + } +}`,`{ + "header": { + "msg_id": "b7dc38ea-aefb-4761-aa55-edaa97adb2f0", + "msg_type": 12 + }, + "body": { + "request": { + "get_supported_dm": { + "obj_paths" : [ + "Device." + ], + "first_level_only" : false, + "return_commands" : false, + "return_events" : false, + "return_params" : true + } + } + } +}`, +`{ + "header": { + "msg_id": "b7dc38ea-aefb-4761-aa55-edaa97adb2f0", + "msg_type": 14 + }, + "body": { + "request": { + "get_instances": { + "obj_paths" : ["Device.DeviceInfo."], + "first_level_only" : false + } + } + } +}`] +const [newMsgValue, setNewMsgValue] = useState(possibleMsgs[age-1]) +const [loading, setLoading] = useState(false); -const [value, setValue] = useState(`{ - "param_paths": [ - "Device.WiFi.SSID.[Name==wlan0].", - "Device.IP.Interface.*.Alias", - "Device.DeviceInfo.FirmwareImage.*.Alias", - "Device.IP.Interface.1.IPv4Address.1.IPAddress" - ], - "max_depth": 2 -}`) +const handleNewMessageValue = (event) => { + setNewMsgValue(event.target.value) +} const handleClose = () => { setOpen(false); }; -const handleOpen = () => { - setOpen(true); - var myHeaders = new Headers(); - myHeaders.append("Content-Type", "application/json"); - myHeaders.append("Authorization", localStorage.getItem("token")); - var raw = value +const handleCancelNewMsgTemplate = () => { + setNewMessage(false) + setNewMsgName("") + setNewMsgValue(possibleMsgs[age-1]) + // setValue(possibleMsgs[age-1]) +} - var requestOptions = { - method: 'PUT', - headers: myHeaders, - body: raw, - redirect: 'follow' - }; - - var method; - - switch(age) { - case 1: - method="add" - break; - case 2: - method="get" - break; - case 3: - method="set" - break; - case 4: - method="del" - break; - } - - - fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device/${router.query.id[0]}/any/${method}`, requestOptions) - .then(response => response.text()) - .then(result => { - if (result.status === 401){ - router.push("/auth/login") +const saveMsg = async () => { + let {status} = await httpRequest( + `/api/device/message?name=`+message[currentMsg].name, + "PUT", + value, + null, + ) + if ( status === 204){ + setSaveChanges(false) + setMessage(message.map((msg, index) => { + if (index === currentMsg) { + return {...msg, value: value} + }else{ + return msg } - setOpen(false) - setAnswer(true) - let teste = JSON.stringify(JSON.parse(result), null, 2) - console.log(teste) - setContent(teste) - }) - .catch(error => console.log('error', error)); - }; + })) + } +} + +const createNewMsg = async () => { + setLoading(true) + let {status} = await httpRequest( + `/api/device/message/usp?name=`+newMsgName, + "POST", + newMsgValue, + null, + ) + if ( status === 204){ + setNewMessage(false) + setNewMsgName("") + let result = await fetchMessages() + if (result) { + setCurrentMsg(result.length-1) + } + setValue(newMsgValue) + setNewMsgValue(possibleMsgs[age-1]) + } + setLoading(false) +} + +const handleChangeMessage = (event) => { + setSaveChanges(false) + setCurrentMsg(event.target.value) + setValue(message[event.target.value].value) +} + +const handleDeleteMessage = async () => { + let {status} = await httpRequest( + `/api/device/message?name=`+message[currentMsg].name.replace(" ", '+'), + "DELETE", + ) + if ( status === 204){ + fetchMessages() + setCurrentMsg(0) + setValue("") + } +} + +const handleOpen = async () => { + setOpen(true); + + let {result, status} = await httpRequest( + `/api/device/${router.query.id[0]}/any/generic`, + "PUT", + value, + null, + ) + if (status === 200){ + setAnswer(true) + console.log("result:",result) + let answer = JSON.stringify(result, null, 2) + if (answer == "null"){ + answer = result + } + console.log(answer) + setContent(answer) + } + setOpen(false) + +} + +const fetchMessages = async () => { + let {result, status} = await httpRequest( + `/api/device/message?type=usp`, + "GET", + null, + null, + ) + if ( status === 200){ + setMessage(result) + setValue(result ? result[0].value : "") + return result + } +} const handleChangeRPC = (event) => { setAge(event.target.value); - switch(event.target.value) { - case 1: - setValue(`{ - "allow_partial": true, - "create_objs": [ - { - "obj_path": "Device.IP.Interface.", - "param_settings": [ - { - "param": "Alias", - "value": "test", - "required": true - } - ] - } - ] - }`) - break; - case 2: - setValue(`{ - "param_paths": [ - "Device.WiFi.SSID.[Name==wlan0].", - "Device.IP.Interface.*.Alias", - "Device.DeviceInfo.FirmwareImage.*.Alias", - "Device.IP.Interface.1.IPv4Address.1.IPAddress" - ], - "max_depth": 2 - }`) - break; - case 3: - setValue(` - { - "allow_partial":true, - "update_objs":[ - { - "obj_path":"Device.IP.Interface.[Alias==pamonha].", - "param_settings":[ - { - "param":"Alias", - "value":"goiaba", - "required":true - } - ] - } - ] - }`) - break; - case 4: - setValue(`{ - "allow_partial": true, - "obj_paths": [ - "Device.IP.Interface.3." - ] - }`) - break; - default: - // code block - } + setNewMsgValue(possibleMsgs[event.target.value-1]) }; - const handleChange = (event) => { - setValue(event.target.value); - }; + const handleEditMessage = (event) => { + if (message) { + setSaveChanges(true) + } + setValue(event.target.value) + } const handleSubmit = useCallback( (event) => { @@ -172,54 +317,91 @@ const handleOpen = () => { [] ); + useEffect(() => { + fetchMessages(); + },[]); + return (
- - - - - + < EnvelopeIcon/>} + title="Custom Message" + action={ + + + } + > + + + + Message + + + - + />:} - - - + {/* */} + + + + {!loadingSaveMsg ? : } + + + + theme.zIndex.drawer + 1 }} @@ -273,6 +455,83 @@ const handleOpen = () => { }}>Ok + + + + + + + {setNewMsgName(event.target.value)}} + label="Name" + sx={{maxWidth: "30%", justifyContent:"center"}} + /> + + Template + + + + + + + + {/* */} + + + {!loading ? + :} + +
);