Merge pull request #119 from OktopUSP/dev

Dev

frontend/src/layouts/dashboard/layout.js

@@ -52,10 +52,25 @@ export const Layout = withAuthGuard((props) => {
         onClose={() => setOpenNav(false)}
         open={openNav}
       />
+      
       <LayoutRoot>
         <LayoutContainer>
           {children}
         </LayoutContainer>
+        <div style={{
+      position:"fixed", 
+      bottom:"5px", 
+      right:"5px",
+      cursor:"pointer"
+      }}>
+        <a href='https://github.com/OktopUSP/oktopus' target='blank'>
+        <img 
+        src="assets/general/github-mark.png" 
+        width={"30px"}
+        >
+        </img>
+        </a>
+      </div>
       </LayoutRoot>
     </>
   );

frontend/src/pages/auth/login.js

@@ -131,21 +131,12 @@ const Page = () => {
               <Typography variant="h4">
                 Login
               </Typography>
-              {/* <Typography
+              <Typography
                 color="text.secondary"
                 variant="body2"
               >
-                Don't have an account?
+              This project is open source, reach out at <Link href='https://github.com/OktopUSP/oktopus'>Github</Link> or <Link href='https://join.slack.com/t/oktopustr-369/shared_invite/zt-1znmrbr52-3AXgOlSeQTPQW8_Qhn3C4g'>Slack</Link> 
-                &nbsp;
+              </Typography>
-                <Link
-                  component={NextLink}
-                  href="/auth/register"
-                  underline="hover"
-                  variant="subtitle2"
-                >
-                  Register
-                </Link>
-              </Typography> */}
             </Stack>
             {/*<Tabs
               onChange={handleMethodChange}
@@ -225,11 +216,7 @@ const Page = () => {
                   sx={{ mt: 3 }}
                 >
                   <div>
-                    Don't have an account? ask one for us at <Link 
+                    You can use <b>demo@gmail.com</b> and password <b>demo</b>
-                    href="https://github.com/leandrofars/oktopus" 
-                    underline="hover">
-                      Github
-                    </Link>
                   </div>
                 </Alert>
               </form>

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

@@ -14,13 +14,95 @@ import PlusCircleIcon from '@heroicons/react/24/outline/PlusCircleIcon';
 import ArrowUturnLeftIcon from '@heroicons/react/24/outline/ArrowUturnLeftIcon'
 import { useRouter } from 'next/router';
 
+function ShowParamsWithValues({x, deviceParametersValue}) {
+    console.log("estoy aqui")
+    let paths = x.supported_obj_path.split(".")
+    console.log(paths)
+    if(paths[paths.length -2] == "{i}"){
+        return Object.keys(deviceParametersValue).map((paramKey, h)=>{
+            return (
+            <List dense={true} key={h}>
+                <ListItem
+                    divider={true}
+                    sx={{
+                        boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;',
+                        pl: 4,
+                    }}
+                >
+                <ListItemText
+                primary={<b>{paramKey}</b>}
+                sx={{fontWeight:'bold'}}
+                />
+                </ListItem>
+            {deviceParametersValue[paramKey].map((param, i) => {
+                console.log("opa")
+                return (
+                <List 
+                component="div" 
+                disablePadding 
+                dense={true}
+                key={i}
+                >
+                    <ListItem
+                        key={i}
+                        divider={true}
+                        sx={{
+                            boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;',
+                            pl: 4 
+                        }}
+                        secondaryAction={
+                            <div>
+                                {Object.values(param)[0]}
+                            </div>
+                        }
+                    >
+                        <ListItemText
+                            primary={Object.keys(param)[0]}
+                        />
+                    </ListItem>
+                </List>
+                )
+            })}
+            </List>
+            )
+        })
+    }else{
+        return x.supported_params.map((y, index)=>{
+            return (
+                <List 
+                    component="div" 
+                    disablePadding 
+                    dense={true}
+                    key={y.param_name}
+                    >
+                    <ListItem
+                        key={index}
+                        divider={true}
+                        sx={{
+                            boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;',
+                            pl: 4 
+                        }}
+                        secondaryAction={
+                            <div>
+                                {deviceParametersValue[y.param_name]}
+                            </div>
+                        }
+                    >
+                        <ListItemText
+                            primary={y.param_name}
+                        />
+                    </ListItem>
+                </List>)
+            })
+    }
+}
 
 export const DevicesDiscovery = () => {
 
 const router = useRouter()
 
 const [deviceParameters, setDeviceParameters] = useState(null)
-const [deviceParametersValue, setDeviceParametersValue] = useState([])
+const [deviceParametersValue, setDeviceParametersValue] = useState({})
 
 const initialize = async (raw) => {
     let content = await getDeviceParameters(raw)
@@ -47,6 +129,27 @@ const getDeviceParameters = async (raw) =>{
     }
 }
 
+const getDeviceParameterInstances = async (raw) =>{
+    var myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append("Authorization", localStorage.getItem("token"));
+
+    var requestOptions = {
+        method: 'PUT',
+        headers: myHeaders,
+        redirect: 'follow',
+        body: raw
+    };
+
+    let result = await (await fetch(`${process.env.NEXT_PUBLIC_REST_ENPOINT}/device/${router.query.id[0]}/instances`, requestOptions))
+    if (result.status != 200) {
+        throw new Error('Please check your email and password');
+    }else{
+        return result.json()
+    }
+}
+
+
   useEffect(()=> {
 
     initialize(
@@ -82,9 +185,95 @@ const getDeviceParameters = async (raw) =>{
 //         )
 //     })
 //   }
+  // Multi instance not used, found better way to get values
+  const updateDeviceParametersMultiInstance = async (param) =>{
+    console.log("UpdateDeviceParametersMultiInstance => param = ", param)
+
+    let raw = JSON.stringify({
+        "obj_paths": [param],
+        "first_level_only" : true,
+        "return_commands" : true,
+        "return_events" : true,
+        "return_params" : true 
+    })
+
+    let response = await getDeviceParameterInstances(raw)
+    console.log("response:", response)
+
+    let instancesToGet = []
+    if (response.req_path_results[0].curr_insts) {
+        let supportedParams = response.req_path_results[0].curr_insts
+        let instances = () => {
+            for (let i =0; i < supportedParams.length ;i++){
+                instancesToGet.push(supportedParams[i].instantiated_obj_path)
+            }
+        }
+        instances()
+    }else{
+        instancesToGet.push(response.req_path_results[0].requested_path)
+    }
+
+    let rawInP = JSON.stringify({
+        "obj_paths": instancesToGet,
+        "first_level_only" : true,
+        "return_commands" : true,
+        "return_events" : true,
+        "return_params" : true 
+    })
+
+    let resultParams = await getDeviceParameters(rawInP)
+    console.log("result params:", resultParams)
+    setDeviceParameters(resultParams)
+
+
+    let paramsToFetch = []
+
+    // console.log("parameters to fetch: ", paramsToFetch)
+
+    //     let rawV = JSON.stringify({
+    //         "param_paths": paramsToFetch,
+    //         "max_depth": 1
+    //     })
+
+    //     let resultValues = await getDeviceParametersValue(rawV)
+    //     console.log("result values:", resultValues)
+
+
+    //     let rawP = JSON.stringify({
+    //         "obj_paths": paramsToFetch,
+    //         "first_level_only" : true,
+    //         "return_commands" : true,
+    //         "return_events" : true,
+    //         "return_params" : true 
+    //     })
+
+    //     let resultParams = await getDeviceParameters(rawP)
+    //     console.log("result params:", resultParams)
+
+    //     let values = {}
+    //     let setvalues = () => {resultValues.req_path_results.map((x)=>{
+    //         // let path = x.requested_path.split(".")
+    //         // let param = path[path.length -1]
+    //         if (!x.resolved_path_results){
+    //             return
+    //         }
+    //         x.resolved_path_results.map((y)=> {
+                
+    //         })
+    //         // Object.keys(x.resolved_path_results[0].result_params).forEach((key, index) =>{
+    //         //     values[key] = x.resolved_path_results[0].result_params[key]
+    //         // })
+    //         return values
+    //     })}
+    //     setvalues()
+    //     console.log("values:",values)
+
+    //     setDeviceParameters(resultParams)
+    //     setDeviceParametersValue(values)
+  }
 
   const updateDeviceParameters = async (param) => {
-    
+    console.log("UpdateDeviceParameters => param = ", param)
     let raw = JSON.stringify({
             "obj_paths": [param],
             "first_level_only" : true,
@@ -97,13 +286,12 @@ const getDeviceParameters = async (raw) =>{
 
     console.log("content:",content)
 
-    setDeviceParameters(content)
-
     let supportedParams = content.req_obj_results[0].supported_objs[0].supported_params
     let parametersToFetch = () => {
         let paramsToFetch = []
         for (let i =0; i < supportedParams.length ;i++){
-            paramsToFetch.push(content.req_obj_results[0].supported_objs[0].supported_obj_path+supportedParams[i].param_name)
+            let supported_obj_path = content.req_obj_results[0].supported_objs[0].supported_obj_path.replaceAll("{i}","*")
+            paramsToFetch.push(supported_obj_path+supportedParams[i].param_name)
         }
         return paramsToFetch
     }
@@ -120,14 +308,58 @@ const getDeviceParameters = async (raw) =>{
         let result = await getDeviceParametersValue(raw)
         console.log("result:", result)
 
-        let values = []
+        let values = {}
-        let setValues = result.req_path_results.map((x)=>{
+        // let setvalues = () => {resultValues.req_path_results.map((x)=>{
-            let path = x.requested_path.split(".")
+        //     // let path = x.requested_path.split(".")
-            let param = path[path.length -1]
+        //     // let param = path[path.length -1]
-            return values.push(x.resolved_path_results[0].result_params[param])
+        //     if (!x.resolved_path_results){
-        })
+        //         return
+        //     }
+
+        //     Object.keys(x.resolved_path_results[0].result_params).forEach((key, index) =>{
+        //         values[key] = x.resolved_path_results[0].result_params[key]
+        //     })
+        //     return values
+        // })}
+        // setvalues()
+
+        let setvalues = () => {result.req_path_results.map((x)=>{
+            if (!x.resolved_path_results){
+                return
+            }
+
+            let paths = x.requested_path.split(".")
+            if(paths[paths.length -2] == "*"){
+                x.resolved_path_results.map(y=>{
+                    if (values[y.resolved_path]){
+                        values[y.resolved_path].push(y.result_params)
+                    }else{
+                        values[y.resolved_path] = []
+                        values[y.resolved_path].push(y.result_params)
+                    }
+                    // Object.keys(y.result_params).forEach((key, index) =>{
+                    //     if (values[y.resolved_path]){
+                    //         values[y.resolved_path].push(y.result_params)
+                    //     }else{
+                    //         values[y.resolved_path] = []
+                    //         values[y.resolved_path].push(y.result_params)
+                    //     }
+                    // })
+                })
+            }else{
+                Object.keys(x.resolved_path_results[0].result_params).forEach((key, index) =>{
+                    values[key] = x.resolved_path_results[0].result_params[key]
+                })
+            }
+
+            return values
+        })}
+        setvalues()
         console.log(values)
         setDeviceParametersValue(values)
+        setDeviceParameters(content)
+    }else{
+        setDeviceParameters(content)
     }
   }
 
@@ -154,117 +386,139 @@ const getDeviceParameters = async (raw) =>{
   }
 
   const showParameters = () => {
-    return deviceParameters.req_obj_results[0].supported_objs.map((x,i)=> {
+    return deviceParameters.req_obj_results.map((a,b)=>{
-        return (
+        return a.supported_objs.map((x,i)=> {
-        <List dense={true} key={x.supported_obj_path}>
+
-            <ListItem
+            let supported_obj_path = x.supported_obj_path.split(".")
-                key={x.supported_obj_path}
+            let supportedObjPath = ""
-                divider={true}
+
-                secondaryAction={
+            supported_obj_path.map((x,i)=>{
-                    i == 0 && x.supported_obj_path != "Device." ?
+                if(i !== supported_obj_path.length -2){
-                    <IconButton onClick={()=>
+                    supportedObjPath = supportedObjPath + x + "."
-                        {
+                }
-                            let paths = x.supported_obj_path.split(".")
+            })
-                            console.log(paths)
+
-                            updateDeviceParameters(paths[paths.length -3]+".")
+            let req_obj_path = a.req_obj_path.split(".")
-                        }
+            let reqObjPath = ""
-                    }>
+
-                    <SvgIcon>
+            req_obj_path.map((x,i)=>{
-                        <ArrowUturnLeftIcon></ArrowUturnLeftIcon>
+                if(i !== req_obj_path.length -2){
-                    </SvgIcon>
+                    reqObjPath = reqObjPath + x + "."
-                    </IconButton>
+                }
-                    :
+            })
-                    <IconButton onClick={()=>updateDeviceParameters(x.supported_obj_path)}>
+
-                        <SvgIcon>
+            // console.log("reqObjPath:", reqObjPath)
-                            {
+            // console.log("supportedObjPath:", supportedObjPath)
-                            x.supported_obj_path != "Device." && 
+
-                            <PlusCircleIcon></PlusCircleIcon>
+            let paramName = x.supported_obj_path
-                            }
+            if (supportedObjPath != "Device.."){
-                        </SvgIcon>
+                if (supportedObjPath == reqObjPath){
-                    </IconButton>
+                    paramName = a.req_obj_path
                 }
-                sx={{
-                    boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;'
-                }}
-            >
-                <ListItemText
-                    primary={<b>{x.supported_obj_path}</b>}
-                    sx={{fontWeight:'bold'}}
-                />
-            </ListItem>
-            { x.supported_params &&
-                x.supported_params.map((y, index)=>{
-                    return <List 
-                    component="div" 
-                    disablePadding 
-                    dense={true}
-                    key={y.param_name}
-                    >
-                    <ListItem
-                        key={i}
-                        divider={true}
-                        sx={{
-                            boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;',
-                            pl: 4 
-                        }}
-                        secondaryAction={
-                            <div>{deviceParametersValue[index]}</div>
-                        }
-                    >
-                        <ListItemText
-                            primary={y.param_name}
-                        />
-                    </ListItem>
-                </List>
-                })
             }
-            { x.supported_commands &&
+
-                x.supported_commands.map((y)=>{
+            return (
-                    return <List 
+            <List dense={true} key={x.supported_obj_path}>
-                    component="div" 
+                <ListItem
-                    disablePadding 
+                    key={x.supported_obj_path}
-                    dense={true}
+                    divider={true}
-                    key={y.command_name}
+                    secondaryAction={
-                    >
+                        i == 0 && x.supported_obj_path != "Device." ?
-                    <ListItem
+                        <IconButton onClick={()=>
-                        key={i}
+                            {   
-                        divider={true}
+                                let supported_obj_path = x.supported_obj_path.replaceAll("{i}.","*.")
-                        sx={{
+                                let paths = supported_obj_path.split(".")
-                            boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;',
+                                console.log("paths:",paths)
-                            pl: 4 
+
-                        }}
+                                let pathsToJump = 2
-                    >
+                                if (paths[paths.length -2] == "*"){
-                        <ListItemText
+                                    pathsToJump = 3
-                            primary={y.command_name}
+                                }
-                        />
+                                
-                    </ListItem>
+                                paths.splice(paths.length - pathsToJump, pathsToJump)
-                </List>
+                                let pathToFetch = paths.join(".")
-                })
+                                
-            }
+                                updateDeviceParameters(pathToFetch)
-            { x.supported_events &&
+                            }
-                x.supported_events.map((y)=>{
+                        }>
-                    return <List 
+                        <SvgIcon>
-                    component="div" 
+                            <ArrowUturnLeftIcon></ArrowUturnLeftIcon>
-                    disablePadding 
+                        </SvgIcon>
-                    dense={true}
+                        </IconButton>
-                    key={y.event_name}
+                        :
-                    >
+                        <IconButton onClick={()=>{
-                    <ListItem
+                            console.log("x.supported_obj_path:",x.supported_obj_path)
-                        key={i}
+                            let supported_obj_path = x.supported_obj_path.replaceAll("{i}.","*.")
-                        divider={true}
+                            updateDeviceParameters(supported_obj_path)
-                        sx={{
+                        }}>
-                            boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;',
+                            <SvgIcon>
-                            pl: 4 
+                                {
-                        }}
+                                x.supported_obj_path != "Device." && 
-                    >
+                                <PlusCircleIcon></PlusCircleIcon>
-                        <ListItemText
+                                }
-                            primary={y.event_name}
+                            </SvgIcon>
-                        />
+                        </IconButton>
-                    </ListItem>
+                    }
-                </List>
+                    sx={{
-                })
+                        boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;'
-            }
+                    }}
-        </List>)
+                >
+                    <ListItemText
+                        primary={<b>{paramName}</b>}
+                        sx={{fontWeight:'bold'}}
+                    />
+                </ListItem>
+                { x.supported_params && 
+                    <ShowParamsWithValues x={x} deviceParametersValue={deviceParametersValue}/>
+                }
+                { x.supported_commands &&
+                    x.supported_commands.map((y)=>{
+                        return <List 
+                        component="div" 
+                        disablePadding 
+                        dense={true}
+                        key={y.command_name}
+                        >
+                        <ListItem
+                            key={i}
+                            divider={true}
+                            sx={{
+                                boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;',
+                                pl: 4 
+                            }}
+                        >
+                            <ListItemText
+                                primary={y.command_name}
+                            />
+                        </ListItem>
+                    </List>
+                    })
+                }
+                { x.supported_events &&
+                    x.supported_events.map((y)=>{
+                        return <List 
+                        component="div" 
+                        disablePadding 
+                        dense={true}
+                        key={y.event_name}
+                        >
+                        <ListItem
+                            key={i}
+                            divider={true}
+                            sx={{
+                                boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;',
+                                pl: 4 
+                            }}
+                        >
+                            <ListItemText
+                                primary={y.event_name}
+                            />
+                        </ListItem>
+                    </List>
+                    })
+                }
+            </List>)
+        })
     })
   }