Frontend MVP

Frontend MVP + nginx.conf for api

devops/nginx.conf

@@ -45,7 +45,7 @@ http {
     }
 
     server {
-            listen       443  http2;
+        listen       443 ssl http2;
         listen       [::]:443 ssl http2;
         server_name  oktopustr369.com;
         root         /usr/share/nginx/html;
@@ -60,6 +60,10 @@ http {
         ssl_ciphers PROFILE=SYSTEM;
         ssl_prefer_server_ciphers on;
 
+        error_page 404 /404.html;
+        location = /404.html {
+        }
+
         location / {
                 proxy_pass             http://127.0.0.1:3000;
                 proxy_read_timeout     60;
@@ -73,7 +77,6 @@ http {
                 proxy_set_header Host $host;
                 proxy_cache_bypass $http_upgrade;
         }
-            
 	location /api {
                 proxy_pass             http://127.0.0.1:8001;
                 proxy_read_timeout     60;
@@ -87,7 +90,9 @@ http {
                 proxy_set_header Host $host;
                 proxy_cache_bypass $http_upgrade;
         }
-        }
 
+        error_page 500 502 503 504 /50x.html;
+        location = /50x.html {
         }
-
+    }
+}

frontend/src/contexts/auth-context.js

@@ -84,7 +84,7 @@ export const AuthProvider = (props) => {
       const user = {
         id: '5e86809283e28b96d2d38537',
         avatar: '/assets/avatars/default-avatar.png',
-        name: 'Anika Visser',
+        name: 'Oktopus',
         email: 'anika.visser@devias.io',
       };
 
@@ -117,7 +117,7 @@ export const AuthProvider = (props) => {
     const user = {
       id: '5e86809283e28b96d2d38537',
       avatar: '/assets/avatars/default-avatar.png',
-      name: 'Anika Visser',
+      name: 'Oktopus',
       email: 'anika.visser@devias.io',
     };
 
@@ -162,7 +162,7 @@ export const AuthProvider = (props) => {
     const user = {
       id: '5e86809283e28b96d2d38537',
       avatar: '/assets/avatars/default-avatar.png',
-      name: 'Anika Visser',
+      name: 'Oktopus',
       email: 'anika.visser@devias.io',
       token: token
     };

frontend/src/sections/devices/devices-rpc.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   Button,
   Card,
@@ -12,33 +12,150 @@ import {
   MenuItem, 
   Select,
   FormControl,
-  SvgIcon
+  SvgIcon,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions, 
+  Box,
+  IconButton
 } 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';
 
 
 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(`{
+  "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 handleClose = () => {
   setOpen(false);
 };
 const handleOpen = () => {
   setOpen(true);
-};
+  var myHeaders = new Headers();
+  myHeaders.append("Content-Type", "application/json");
+  myHeaders.append("Authorization", "<token>");
 
-  const [value, setValue] = useState(`
+ var raw = value
-  {opa, 
-    teste123:goiaba}`
-  )
 
-  const [age, setAge] = useState(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(`https://d9962fd9-2464-4a30-9a86-a15a04b57ad0.mock.pstmn.io/device/${router.query.id}/${method}`, requestOptions)
+    .then(response => response.text())
+    .then(result => {
+      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 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
+    }
   };
 
   const handleChange = (event) => {
@@ -87,7 +204,7 @@ const handleOpen = () => {
               onChange={handleChange}
               value={value}
               fullWidth
-              rows="10"
+              rows="9"
             />
           </Stack>
         </CardContent>
@@ -108,6 +225,51 @@ const handleOpen = () => {
             >
             <CircularProgress color="inherit" />
         </Backdrop>
+        <Dialog
+        fullWidth={ true } 
+        maxWidth={"md"}
+        open={answer}
+        scroll={scroll}
+        aria-labelledby="scroll-dialog-title"
+        aria-describedby="scroll-dialog-description"
+      >
+        <DialogTitle id="scroll-dialog-title">
+        <Box display="flex" alignItems="center">
+              <Box flexGrow={1} >Response</Box>
+              <Box>
+                  <IconButton >
+                        <SvgIcon 
+                          onClick={()=>{
+                          setAnswer(false);
+                          handleClose;
+                          //setContent("");
+                          }}
+                        >
+                          <XMarkIcon />
+                      </SvgIcon>
+                  </IconButton>
+              </Box>
+        </Box>
+        </DialogTitle>
+        <DialogContent dividers={scroll === 'paper'}>
+          <DialogContentText
+            id="scroll-dialog-description"
+            //ref={descriptionElementRef}
+            tabIndex={-1}
+          >
+          <pre>
+            {content}
+          </pre>
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={()=>{
+            setAnswer(false);
+            handleClose;
+            //setContent("");
+          }}>Ok</Button>
+        </DialogActions>
+      </Dialog>
       </Card>
     </form>
   );

frontend/src/sections/overview/overview-latest-orders.js

@@ -100,7 +100,12 @@ export const OverviewLatestOrders = (props) => {
                     <SvgIcon 
                       fontSize="small" 
                       sx={{cursor:'pointer'}} 
-                      onClick={()=>router.push("devices/"+order.SN)}
+                      onClick={()=>{
+                          if (order.Status !== 2){
+                            router.push("devices/"+order.SN)
+                          }
+                        }
+                      }
                     >
                       <ArrowTopRightOnSquareIcon />
                     </SvgIcon>