louis/oktopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): device rssi indication of signal state

Browse Source
This commit is contained in:
leandrofars 2024-07-10 11:59:56 -03:00
parent 9df2a04404
commit 35372dd980
1 changed files with 109 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
frontend/src/sections/devices/cwmp/connecteddevices.js
View File

@ -16,102 +16,131 @@ export const ConnectedDevices = () => {
const [interfaces, setInterfaces] = useState([]);
const [interfaceValue, setInterfaceValue] = useState(null);
const getConnectionState = (rssi) => {
let connectionStatus = "Signal "
if (rssi > -30) {
return connectionStatus + "Excellent"
} else if (rssi > -60) {
return connectionStatus + "Good"
} else if (rssi > -70) {
return connectionStatus + "Bad"
} else {
return connectionStatus + "Awful"
}
}
const fetchConnectedDevicesData = async () => {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", localStorage.getItem("token"));
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device/${router.query.id[0]}/connecteddevices`, requestOptions)
.then(response => {
if (response.status === 401) {
router.push("/auth/login")
}
return response.json()
})
.then(result => {
console.log("connecteddevices content", result)
let interfaces = Object.keys(result)
setInterfaces(interfaces)
setInterfaceValue(interfaces[0])
setContent(result)
})
.catch(error => console.log('error', error));
.then(response => {
if (response.status === 401) {
router.push("/auth/login")
}
return response.json()
})
.then(result => {
console.log("connecteddevices content", result)
let interfaces = Object.keys(result)
setInterfaces(interfaces)
setInterfaceValue(interfaces[0])
setContent(result)
})
.catch(error => console.log('error', error));
};
useEffect(() => {
fetchConnectedDevicesData();
},[])
}, [])
return (
<Stack
justifyContent="center"
alignItems={(!content || interfaces.length == 0) &&"center"}
return (
<Stack
justifyContent="center"
alignItems={(!content || interfaces.length == 0) && "center"}
>
{content && interfaces.length > 0 ?
<Card>
<CardContent>
<Grid mb={3}>
<InputLabel> Interface </InputLabel>
<Select label="interface" variant="standard" value={interfaceValue} onChange={(e)=> setInterfaceValue(e.target.value)}>
{(
interfaces.map((item, index) => (
<MenuItem key={index} value={item}>
{item}
</MenuItem>
{content && interfaces.length > 0 ?
<Card>
<CardContent>
<Grid mb={3}>
<InputLabel> Interface </InputLabel>
<Select label="interface" variant="standard" value={interfaceValue} onChange={(e) => setInterfaceValue(e.target.value)}>
{(
interfaces.map((item, index) => (
<MenuItem key={index} value={item}>
{item}
</MenuItem>
))
)}
</Select>
</Grid>
{
content[interfaceValue].map((property, index) => (
<Card key={index}>
<CardContent>
<Grid container justifyContent={"center"}>
<Stack direction="row" spacing={5}>
<Stack justifyItems={"center"} direction={"row"} mt={2}>
<Tooltip title={property.active ? "Online" : "Offline"}>
<SvgIcon>
<CpuChipIcon color={property.active ? theme.palette.success.main : theme.palette.error.main}></CpuChipIcon>
</SvgIcon>
</Tooltip>
<Typography ml={"10px"}>
{property.hostname}
</Typography>
</Stack>
<Divider orientation="vertical" />
<Stack spacing={2}>
<Typography>
IP address: {property.ip_adress}
</Typography>
<Typography>
MAC: {property.mac}
</Typography>
</Stack>
<Stack spacing={2}>
<Typography>
Source: {property.adress_source}
</Typography>
<Tooltip title={getConnectionState(property.rssi)}>
<Typography display={"flex"} color={() => {
let rssi = property.rssi
if (rssi > -30) {
return theme.palette.success.main
} else if (rssi > -60) {
return theme.palette.success.main
} else if (rssi > -70) {
return theme.palette.warning.main
} else {
return theme.palette.error.main
}
}}>
<Typography color={theme.palette.neutral[900]} sx={{pr:"5px"}}>
RSSI:
</Typography>
{property.rssi} dbm
</Typography>
</Tooltip>
</Stack>
</Stack>
</Grid>
</CardContent>
</Card>
))
)}
</Select>
</Grid>
{
content[interfaceValue].map((property,index) => (
<Card key={index}>
<CardContent>
<Grid container justifyContent={"center"}>
<Stack direction="row" spacing={5}>
<Stack justifyItems={"center"} direction={"row"} mt={2}>
<Tooltip title={property.active ? "Online": "Offline"}>
<SvgIcon>
<CpuChipIcon color={property.active ? theme.palette.success.main : theme.palette.error.main}></CpuChipIcon>
</SvgIcon>
</Tooltip>
<Typography ml={"10px"}>
{property.hostname}
</Typography>
</Stack>
<Divider orientation="vertical"/>
<Stack spacing={2}>
<Typography>
IP address: {property.ip_adress}
</Typography>
<Typography>
MAC: {property.mac}
</Typography>
</Stack>
<Stack spacing={2}>
<Typography>
RSSI: {property.rssi} dbm
</Typography>
<Typography>
Source: {property.adress_source}
</Typography>
</Stack>
</Stack>
</Grid>
</CardContent>
</Card>
))
}
</CardContent>
</Card>: (
content ? <Typography> No connected devices found </Typography> : <CircularProgress/>
)}
}
</CardContent>
</Card> : (
content ? <Typography> No connected devices found </Typography> : <CircularProgress />
)}
</Stack>
)
}