feat(frontend): custom cwmp/usp messages templates

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()
-
+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 [value, setValue] = useState(`<?xml version="1.0" encoding="UTF-8"?>
-<soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-  <soap:Header/>
-  <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
-    <cwmp:GetParameterValues>
-      <ParameterNames>
-        <string>InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.</string>
-        <string>InternetGatewayDevice.LANDevice.1.WLANConfiguration.2.</string>
-       </ParameterNames>
-    </cwmp:GetParameterValues>
-  </soap:Body>
-</soap:Envelope>`)
 
 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 = [
+  `<?xml version="1.0" encoding="UTF-8"?>
+<soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <soap:Header/>
+  <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
+    <cwmp:SetParameterValues>
+      <ParameterList soapenc:arrayType="cwmp:ParameterValueStruct[4]">
+                <ParameterValueStruct>
+                    <Name>InternetGatewayDevice.TraceRouteDiagnostics.Host</Name>
+                    <Value>192.168.60.4</Value>
+                </ParameterValueStruct>
+      </ParameterList>
+      <ParameterKey></ParameterKey>
+    </cwmp:SetParameterValues>
+  </soap:Body>
+</soap:Envelope>`,
+`<?xml version="1.0" encoding="UTF-8"?>
+<soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <soap:Header/>
+  <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
+    <cwmp:DeleteObject>
+      <ObjectName>InternetGatewayDevice.LANDevice.1.WLANConfiguration.2.</ObjectName>
+      <ParameterKey></ParameterKey>
+    </cwmp:DeleteObject>
+  </soap:Body>
+</soap:Envelope>`,
+`<?xml version="1.0" encoding="UTF-8"?>
+<soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <soap:Header/>
+  <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
+    <cwmp:AddObject>
+      <ObjectName>InternetGatewayDevice.LANDevice.1.WLANConfiguration.</ObjectName>
+      <ParameterKey></ParameterKey>
+    </cwmp:AddObject>
+  </soap:Body>
+</soap:Envelope>`,
+`<?xml version="1.0" encoding="UTF-8"?>
+	<soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+	  <soap:Header/>
+	  <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
+		<cwmp:Reboot>
+			<CommandKey>
+				007
+			</CommandKey>
+		</cwmp:Reboot>
+	  </soap:Body>
+	</soap:Envelope>`,
+`<?xml version="1.0" encoding="UTF-8"?>
+<soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..schemaswt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <soap:Header/>
+  <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
+    <cwmp:GetParameterValues>
+      <ParameterNames>
+        <string>InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.</string>
+       </ParameterNames>
+    </cwmp:GetParameterValues>
+  </soap:Body>
+</soap:Envelope>`,`<?xml version="1.0" encoding="UTF-8"?>
+<soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <soap:Header/>
+  <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
+    <cwmp:GetParameterNames>
+      <ParameterPath>InternetGatewayDevice.</ParameterPath>
+      <NextLevel>1</NextLevel>
+    </cwmp:GetParameterNames>
+  </soap:Body>
+</soap:Envelope>`,
+`<?xml version="1.0" encoding="UTF-8"?>
+<soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <soap:Header/>
+  <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
+    <cwmp:GetParameterAttributes>
+      <ParameterNames>
+        <string>InternetGatewayDevice.LANDevice.1.WLANConfiguration.</string>
+       </ParameterNames>
+    </cwmp:GetParameterAttributes>
+  </soap:Body>
+</soap:Envelope>`]
+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 = {
+const saveMsg = async () => {
-    method: 'PUT',
+  let {status} = await httpRequest(
-    headers: myHeaders,
+    `/api/device/message?name=`+message[currentMsg].name,
-    body: raw,
+    "PUT", 
-    redirect: 'follow'
+    value,
-  };
+    null,
-
+  )
-  var method;
+  if ( status === 204){
-
+    setSaveChanges(false)
-  switch(age) {
+    setMessage(message.map((msg, index) => {
-    case 1:
+      if (index === currentMsg) {
-      method="addObject"
+        return {...msg, value: value}
-      break;
+      }else{
-    case 2:
+        return msg
-      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")
       }
-      setOpen(false)
+    }))
-      setAnswer(true)
+  }
-      let teste =  prettifyXml(result)
+}
-      console.log(teste)
+
-      setContent(teste)
+const createNewMsg = async () => {
-    })
+  setLoading(true)
-    .catch(error => console.log('error', error));
+  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) {
+    setNewMsgValue(possibleMsgs[event.target.value-1])
-      case 1:
-        setValue(`<?xml version="1.0" encoding="UTF-8"?>
-        <soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-          <soap:Header/>
-          <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
-            <cwmp:AddObject>
-              <ObjectName>InternetGatewayDevice.LANDevice.</ObjectName>
-              <ParameterKey></ParameterKey>
-            </cwmp:AddObject>
-          </soap:Body>
-        </soap:Envelope>`)
-        break;
-      case 2:
-        setValue(`<?xml version="1.0" encoding="UTF-8"?>
-        <soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-          <soap:Header/>
-          <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
-            <cwmp:GetParameterValues>
-              <ParameterNames>
-                <string>InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.</string>
-                <string>InternetGatewayDevice.LANDevice.1.WLANConfiguration.2.</string>
-                <string>InternetGatewayDevice.LANDevice.2.WLANConfiguration.2.</string>
-                <string>InternetGatewayDevice.LANDevice.2.WLANConfiguration.1.</string>
-               </ParameterNames>
-            </cwmp:GetParameterValues>
-          </soap:Body>
-        </soap:Envelope>`)
-        break;
-      case 3:
-        setValue(`
-        <?xml version="1.0" encoding="UTF-8"?>
-        <soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-          <soap:Header/>
-          <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
-            <cwmp:SetParameterValues>
-              <ParameterList soapenc:arrayType="cwmp:ParameterValueStruct[3]">
-            <ParameterValueStruct>
-                <Name>InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.Enable</Name>
-                <Value>0</Value>
-                </ParameterValueStruct>
-                <ParameterValueStruct>
-                <Name>InternetGatewayDevice.LANDevice.1.WLANConfiguration.2.SSID</Name>
-                <Value>HUAWEI_TEST-2</Value>
-                </ParameterValueStruct>
-              </ParameterList>
-              <ParameterKey>LC1309123</ParameterKey>
-            </cwmp:SetParameterValues>
-          </soap:Body>
-        </soap:Envelope>`)
-        break;
-      case 4:
-        setValue(`<?xml version="1.0" encoding="UTF-8"?>
-        <soap:Envelope xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:cwmp="urn:dslforum-org:cwmp-1-0" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:schemaLocation="urn:dslforum-org:cwmp-1-0 ..\schemas\wt121.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-          <soap:Header/>
-          <soap:Body soap:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">
-            <cwmp:DeleteObject>
-              <ObjectName>InternetGatewayDevice.LANDevice.3.</ObjectName>
-              <ParameterKey></ParameterKey>
-            </cwmp:DeleteObject>
-          </soap:Body>
-        </soap:Envelope>`)
-        break;
-      default:
-        // code block
-    }
   };
 
-  const handleChange = (event) => {
+  const handleEditMessage = (event) => {
-    setValue(event.target.value);
+    setSaveChanges(true)
-  };
+    setValue(event.target.value)
+  }
 
   const handleSubmit = useCallback(
     (event) => {
@@ -206,54 +285,91 @@ const handleOpen = () => {
     []
   );
 
+  useEffect(() => {
+    fetchMessages();
+  },[]);
+
   return (
     <form onSubmit={handleSubmit}>
       <Card>
-        <CardActions sx={{ justifyContent: 'flex-end'}}>
+        <CardHeader sx={{ justifyContent: 'flex-end'}} 
-            <FormControl sx={{width:'100px'}}>
+          avatar={<SvgIcon>< EnvelopeIcon/></SvgIcon>}
-                <Select
+          title="Custom Message" 
-                    labelId="demo-simple-select-standard-label"
+          action={ 
-                    id="demo-simple-select-standard"
+          <Stack direction={"row"} spacing={1} width={"100%"} justifyContent={"flex-end"}>
-                    value={age}
+            <Button sx={{ backgroundColor: "rgba(48, 109, 111, 0.04)" }}
-                    label="Action"
+            endIcon={<SvgIcon><PlusCircleIcon /></SvgIcon>}
-                    onChange={(event)=>{handleChangeRPC(event)}}
+            onClick={()=>{setNewMessage(true)}}
-                    variant='standard'
+            >
-                >
+              <Stack direction={"row"} spacing={1}>
-                    <MenuItem value={1}>Create</MenuItem>
+                New Message
-                    <MenuItem value={2}>Read</MenuItem>
+              </Stack>
-                    <MenuItem value={3}>Update</MenuItem>
+            </Button>
-                    <MenuItem value={4}>Delete</MenuItem>
+          </Stack>}
-                </Select>
+        >
-            </FormControl>
+        </CardHeader>
-        </CardActions>
         <Divider />
         <CardContent>
+          <Stack pb={4} spacing={5} direction={"row"}>
+            <FormControl sx={{display:"flex", width: "15%"}} variant="standard" >
+            <InputLabel>Message</InputLabel>
+              <Select
+                  value={currentMsg}
+                  onChange={(event)=>{handleChangeMessage(event)}}
+              > 
+                {message && message.map((msg, index) => {
+                  return  <MenuItem value={index}>{msg.name}</MenuItem>
+                })}
+              </Select>
+            </FormControl>
+          </Stack>
           <Stack
             spacing={3}
             alignItems={'stretch'}
           >
-            <TextField
+            {!loadingSaveMsg ? <TextField
               id="outlined-multiline-static"
               size="large"
               multiline="true"
-              label="Mensagem"
+              // label="Payload"
               name="password"
-              onChange={handleChange}
+              onChange={handleEditMessage}
               value={value}
+              variant="filled"
               fullWidth
               rows="15"
-            />
+            />:<CircularProgress />}
           </Stack>
         </CardContent>
-        <Divider />
+        {/* <Divider /> */}
-        <CardActions sx={{ justifyContent: 'flex-end' }}>
+        <CardActions>
-          <Button 
+          <Stack direction={"row"} spacing={1} width={"100%"} justifyContent={"flex-start"}>
-          variant="contained" 
+            <Button 
-          endIcon={<SvgIcon><PaperAirplane /></SvgIcon>} 
+            variant="contained" 
-          onClick={handleOpen}
+            endIcon={<SvgIcon><TrashIcon /></SvgIcon>} 
-          >
+            onClick={handleDeleteMessage}
-            Send
+            disabled={!message}
-          </Button>
+            >
+              Delete
+            </Button>
+            {!loadingSaveMsg ? <Button 
+            variant="contained" 
+            endIcon={<SvgIcon><DocumentArrowDown /></SvgIcon>} 
+            onClick={saveMsg}
+            disabled={!saveChanges}
+            >
+              Save
+            </Button>: <CircularProgress />}
+          </Stack>
+          <Stack direction={"row"} spacing={1} width={"100%"} justifyContent={"flex-end"}>
+            <Button 
+            variant="contained" 
+            endIcon={<SvgIcon><PaperAirplane /></SvgIcon>} 
+            onClick={handleOpen}
+            >
+              Send
+            </Button>
+          </Stack>
         </CardActions>
         <Backdrop
             sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
@@ -307,6 +423,83 @@ const handleOpen = () => {
           }}>Ok</Button>
         </DialogActions>
       </Dialog>
+      <Dialog open={newMessage} maxWidth={"800px"}>
+          <DialogTitle>
+           <SvgIcon><EnvelopeIcon/></SvgIcon>
+          </DialogTitle>
+          <DialogContent>
+          <Stack
+              direction={"row"}
+              container
+              pb={3}
+              // direction="column"
+              // alignItems="center"
+              // justifyContent="center"
+              pt={1}
+              spacing={3}
+            >
+              <TextField
+                  variant='standard'
+                  fullWidth
+                  value={newMsgName}
+                  onChange={(event)=>{setNewMsgName(event.target.value)}}
+                  label="Name"
+                  sx={{maxWidth: "30%", justifyContent:"center"}}
+              />
+                <FormControl sx={{display:"flex", width: "30%"}} variant="standard" >
+                  <InputLabel>Template</InputLabel>
+                  <Select
+                      value={age}
+                      label="Action"
+                      name='action'
+                      onChange={(event)=>{handleChangeRPC(event)}}
+                  >
+                      <MenuItem value={1}>SetParameterValues</MenuItem>
+                      <MenuItem value={2}>DeleteObject</MenuItem>
+                      <MenuItem value={3}>AddObject</MenuItem>
+                      <MenuItem value={4}>Reboot</MenuItem>
+                      <MenuItem value={5}>GetParameterValues</MenuItem>
+                      <MenuItem value={6}>GetParameterNames</MenuItem>
+                      <MenuItem value={7}>GetParameterAttributes</MenuItem>
+                  </Select>
+                </FormControl>
+            </Stack>
+            <Stack
+              spacing={3}
+              alignItems={'stretch'}
+              width={"600px"}
+            >
+              <TextField
+                id="outlined-multiline-static"
+                size="large"
+                multiline="true"
+                label="Payload"
+                name="password"
+                onChange={handleNewMessageValue}
+                value={newMsgValue}
+                // fullWidth
+                // rows="15"
+              />
+            </Stack>
+          </DialogContent>
+          {/* <Divider/> */}
+          <Stack direction={"row"} spacing={1} width={"100%"} justifyContent={"flex-end"} p={2}>
+            <Button 
+            variant="contained" 
+            onClick={handleCancelNewMsgTemplate}
+            >
+              Cancel
+            </Button>
+            {!loading ?
+            <Button 
+            variant="contained" 
+            endIcon={<SvgIcon><CheckIcon /></SvgIcon>} 
+            onClick={createNewMsg}
+            >
+              Save
+            </Button>:<CircularProgress />}
+          </Stack>
+      </Dialog>
       </Card>
     </form>
   );

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(`{
+const handleNewMessageValue = (event) => {
-  "param_paths": [
+  setNewMsgValue(event.target.value)
-      "Device.WiFi.SSID.[Name==wlan0].",
+}
-      "Device.IP.Interface.*.Alias",
-      "Device.DeviceInfo.FirmwareImage.*.Alias",
-      "Device.IP.Interface.1.IPv4Address.1.IPAddress"
-  ],
-  "max_depth": 2
-}`)
 
 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 = {
+const saveMsg = async () => {
-    method: 'PUT',
+  let {status} = await httpRequest(
-    headers: myHeaders,
+    `/api/device/message?name=`+message[currentMsg].name,
-    body: raw,
+    "PUT", 
-    redirect: 'follow'
+    value,
-  };
+    null,
-
+  )
-  var method;
+  if ( status === 204){
-
+    setSaveChanges(false)
-  switch(age) {
+    setMessage(message.map((msg, index) => {
-    case 1:
+      if (index === currentMsg) {
-      method="add"
+        return {...msg, value: value}
-      break;
+      }else{
-    case 2:
+        return msg
-      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")
       }
-      setOpen(false)
+    }))
-      setAnswer(true)
+  }
-      let teste =  JSON.stringify(JSON.parse(result), null, 2)
+}
-      console.log(teste)
+
-      setContent(teste)
+const createNewMsg = async () => {
-    })
+  setLoading(true)
-    .catch(error => console.log('error', error));
+  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) {
+    setNewMsgValue(possibleMsgs[event.target.value-1])
-      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
-    }
   };
 
-  const handleChange = (event) => {
+  const handleEditMessage = (event) => {
-    setValue(event.target.value);
+    if (message) {
-  };
+      setSaveChanges(true)
+    }
+    setValue(event.target.value)
+  }
 
   const handleSubmit = useCallback(
     (event) => {
@@ -172,54 +317,91 @@ const handleOpen = () => {
     []
   );
 
+  useEffect(() => {
+    fetchMessages();
+  },[]);
+
   return (
     <form onSubmit={handleSubmit}>
       <Card>
-        <CardActions sx={{ justifyContent: 'flex-end'}}>
+        <CardHeader sx={{ justifyContent: 'flex-end'}} 
-            <FormControl sx={{width:'100px'}}>
+          avatar={<SvgIcon>< EnvelopeIcon/></SvgIcon>}
-                <Select
+          title="Custom Message" 
-                    labelId="demo-simple-select-standard-label"
+          action={ 
-                    id="demo-simple-select-standard"
+          <Stack direction={"row"} spacing={1} width={"100%"} justifyContent={"flex-end"}>
-                    value={age}
+            <Button sx={{ backgroundColor: "rgba(48, 109, 111, 0.04)" }}
-                    label="Action"
+            endIcon={<SvgIcon><PlusCircleIcon /></SvgIcon>}
-                    onChange={(event)=>{handleChangeRPC(event)}}
+            onClick={()=>{setNewMessage(true)}}
-                    variant='standard'
+            >
-                >
+              <Stack direction={"row"} spacing={1}>
-                    <MenuItem value={1}>Create</MenuItem>
+                New Message
-                    <MenuItem value={2}>Read</MenuItem>
+              </Stack>
-                    <MenuItem value={3}>Update</MenuItem>
+            </Button>
-                    <MenuItem value={4}>Delete</MenuItem>
+          </Stack>}
-                </Select>
+        >
-            </FormControl>
+        </CardHeader>
-        </CardActions>
         <Divider />
         <CardContent>
+          <Stack pb={4} spacing={5} direction={"row"}>
+            <FormControl sx={{display:"flex", width: "15%"}} variant="standard" >
+            <InputLabel>Message</InputLabel>
+              <Select
+                  value={currentMsg}
+                  onChange={(event)=>{handleChangeMessage(event)}}
+              > 
+                {message && message.map((msg, index) => {
+                  return  <MenuItem value={index}>{msg.name}</MenuItem>
+                })}
+              </Select>
+            </FormControl>
+          </Stack>
           <Stack
             spacing={3}
             alignItems={'stretch'}
           >
-            <TextField
+            {!loadingSaveMsg ? <TextField
               id="outlined-multiline-static"
               size="large"
               multiline="true"
-              label="Mensagem"
+              // label="Payload"
               name="password"
-              onChange={handleChange}
+              onChange={handleEditMessage}
               value={value}
+              variant="filled"
               fullWidth
               rows="15"
-            />
+            />:<CircularProgress />}
           </Stack>
         </CardContent>
-        <Divider />
+        {/* <Divider /> */}
-        <CardActions sx={{ justifyContent: 'flex-end' }}>
+        <CardActions>
-          <Button 
+          <Stack direction={"row"} spacing={1} width={"100%"} justifyContent={"flex-start"}>
-          variant="contained" 
+            <Button 
-          endIcon={<SvgIcon><PaperAirplane /></SvgIcon>} 
+            variant="contained" 
-          onClick={handleOpen}
+            endIcon={<SvgIcon><TrashIcon /></SvgIcon>} 
-          >
+            onClick={handleDeleteMessage}
-            Send
+            disabled={!message}
-          </Button>
+            >
+              Delete
+            </Button>
+            {!loadingSaveMsg ? <Button 
+            variant="contained" 
+            endIcon={<SvgIcon><DocumentArrowDown /></SvgIcon>} 
+            onClick={saveMsg}
+            disabled={!saveChanges}
+            >
+              Save
+            </Button>: <CircularProgress />}
+          </Stack>
+          <Stack direction={"row"} spacing={1} width={"100%"} justifyContent={"flex-end"}>
+            <Button 
+            variant="contained" 
+            endIcon={<SvgIcon><PaperAirplane /></SvgIcon>} 
+            onClick={handleOpen}
+            >
+              Send
+            </Button>
+          </Stack>
         </CardActions>
         <Backdrop
             sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
@@ -273,6 +455,83 @@ const handleOpen = () => {
           }}>Ok</Button>
         </DialogActions>
       </Dialog>
+      <Dialog open={newMessage} maxWidth={"800px"}>
+          <DialogTitle>
+           <SvgIcon><EnvelopeIcon/></SvgIcon>
+          </DialogTitle>
+          <DialogContent>
+          <Stack
+              direction={"row"}
+              container
+              pb={3}
+              // direction="column"
+              // alignItems="center"
+              // justifyContent="center"
+              pt={1}
+              spacing={3}
+            >
+              <TextField
+                  variant='standard'
+                  fullWidth
+                  value={newMsgName}
+                  onChange={(event)=>{setNewMsgName(event.target.value)}}
+                  label="Name"
+                  sx={{maxWidth: "30%", justifyContent:"center"}}
+              />
+                <FormControl sx={{display:"flex", width: "30%"}} variant="standard" >
+                  <InputLabel>Template</InputLabel>
+                  <Select
+                      value={age}
+                      label="Action"
+                      name='action'
+                      onChange={(event)=>{handleChangeRPC(event)}}
+                  >
+                      <MenuItem value={1}>Set</MenuItem>
+                      <MenuItem value={2}>Delete</MenuItem>
+                      <MenuItem value={3}>Add</MenuItem>
+                      <MenuItem value={4}>Operate</MenuItem>
+                      <MenuItem value={5}>Get</MenuItem>
+                      <MenuItem value={6}>Get Supported DM</MenuItem>
+                      <MenuItem value={7}>Get Instances</MenuItem>
+                  </Select>
+                </FormControl>
+            </Stack>
+            <Stack
+              spacing={3}
+              alignItems={'stretch'}
+              width={"600px"}
+            >
+              <TextField
+                id="outlined-multiline-static"
+                size="large"
+                multiline="true"
+                label="Payload"
+                name="password"
+                onChange={handleNewMessageValue}
+                value={newMsgValue}
+                // fullWidth
+                // rows="15"
+              />
+            </Stack>
+          </DialogContent>
+          {/* <Divider/> */}
+          <Stack direction={"row"} spacing={1} width={"100%"} justifyContent={"flex-end"} p={2}>
+            <Button 
+            variant="contained" 
+            onClick={handleCancelNewMsgTemplate}
+            >
+              Cancel
+            </Button>
+            {!loading ?
+            <Button 
+            variant="contained" 
+            endIcon={<SvgIcon><CheckIcon /></SvgIcon>} 
+            onClick={createNewMsg}
+            >
+              Save
+            </Button>:<CircularProgress />}
+          </Stack>
+      </Dialog>
       </Card>
     </form>
   );