Leandro Antônio Farias Machado
GitHub
commit
77b742bf77
BIN
frontend/public/assets/general/github-mark.png
Normal file
BIN
frontend/public/assets/general/github-mark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -131,21 +131,12 @@ const Page = () => {
|
|||
<Typography variant="h4">
|
||||
Login
|
||||
</Typography>
|
||||
{/* <Typography
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
>
|
||||
Don't have an account?
|
||||
|
||||
<Link
|
||||
component={NextLink}
|
||||
href="/auth/register"
|
||||
underline="hover"
|
||||
variant="subtitle2"
|
||||
>
|
||||
Register
|
||||
</Link>
|
||||
</Typography> */}
|
||||
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>
|
||||
</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
|
||||
href="https://github.com/leandrofars/oktopus"
|
||||
underline="hover">
|
||||
Github
|
||||
</Link>
|
||||
You can use <b>demo@gmail.com</b> and password <b>demo</b>
|
||||
</div>
|
||||
</Alert>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -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 setValues = result.req_path_results.map((x)=>{
|
||||
let path = x.requested_path.split(".")
|
||||
let param = path[path.length -1]
|
||||
return values.push(x.resolved_path_results[0].result_params[param])
|
||||
})
|
||||
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
|
||||
// }
|
||||
|
||||
// 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 (
|
||||
<List dense={true} key={x.supported_obj_path}>
|
||||
<ListItem
|
||||
key={x.supported_obj_path}
|
||||
divider={true}
|
||||
secondaryAction={
|
||||
i == 0 && x.supported_obj_path != "Device." ?
|
||||
<IconButton onClick={()=>
|
||||
{
|
||||
let paths = x.supported_obj_path.split(".")
|
||||
console.log(paths)
|
||||
updateDeviceParameters(paths[paths.length -3]+".")
|
||||
}
|
||||
}>
|
||||
<SvgIcon>
|
||||
<ArrowUturnLeftIcon></ArrowUturnLeftIcon>
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
:
|
||||
<IconButton onClick={()=>updateDeviceParameters(x.supported_obj_path)}>
|
||||
<SvgIcon>
|
||||
{
|
||||
x.supported_obj_path != "Device." &&
|
||||
<PlusCircleIcon></PlusCircleIcon>
|
||||
}
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
return deviceParameters.req_obj_results.map((a,b)=>{
|
||||
return a.supported_objs.map((x,i)=> {
|
||||
|
||||
let supported_obj_path = x.supported_obj_path.split(".")
|
||||
let supportedObjPath = ""
|
||||
|
||||
supported_obj_path.map((x,i)=>{
|
||||
if(i !== supported_obj_path.length -2){
|
||||
supportedObjPath = supportedObjPath + x + "."
|
||||
}
|
||||
})
|
||||
|
||||
let req_obj_path = a.req_obj_path.split(".")
|
||||
let reqObjPath = ""
|
||||
|
||||
req_obj_path.map((x,i)=>{
|
||||
if(i !== req_obj_path.length -2){
|
||||
reqObjPath = reqObjPath + x + "."
|
||||
}
|
||||
})
|
||||
|
||||
// console.log("reqObjPath:", reqObjPath)
|
||||
// console.log("supportedObjPath:", supportedObjPath)
|
||||
|
||||
let paramName = x.supported_obj_path
|
||||
if (supportedObjPath != "Device.."){
|
||||
if (supportedObjPath == reqObjPath){
|
||||
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 <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>)
|
||||
|
||||
return (
|
||||
<List dense={true} key={x.supported_obj_path}>
|
||||
<ListItem
|
||||
key={x.supported_obj_path}
|
||||
divider={true}
|
||||
secondaryAction={
|
||||
i == 0 && x.supported_obj_path != "Device." ?
|
||||
<IconButton onClick={()=>
|
||||
{
|
||||
let supported_obj_path = x.supported_obj_path.replaceAll("{i}.","*.")
|
||||
let paths = supported_obj_path.split(".")
|
||||
console.log("paths:",paths)
|
||||
|
||||
let pathsToJump = 2
|
||||
if (paths[paths.length -2] == "*"){
|
||||
pathsToJump = 3
|
||||
}
|
||||
|
||||
paths.splice(paths.length - pathsToJump, pathsToJump)
|
||||
let pathToFetch = paths.join(".")
|
||||
|
||||
updateDeviceParameters(pathToFetch)
|
||||
}
|
||||
}>
|
||||
<SvgIcon>
|
||||
<ArrowUturnLeftIcon></ArrowUturnLeftIcon>
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
:
|
||||
<IconButton onClick={()=>{
|
||||
console.log("x.supported_obj_path:",x.supported_obj_path)
|
||||
let supported_obj_path = x.supported_obj_path.replaceAll("{i}.","*.")
|
||||
updateDeviceParameters(supported_obj_path)
|
||||
}}>
|
||||
<SvgIcon>
|
||||
{
|
||||
x.supported_obj_path != "Device." &&
|
||||
<PlusCircleIcon></PlusCircleIcon>
|
||||
}
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
}
|
||||
sx={{
|
||||
boxShadow: 'rgba(149, 157, 165, 0.2) 0px 0px 5px;'
|
||||
}}
|
||||
>
|
||||
<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>)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user