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 [interfaces, setInterfaces] = useState([]);
const [interfaceValue, setInterfaceValue] = useState(null); 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 () => { const fetchConnectedDevicesData = async () => {
var myHeaders = new Headers(); var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json"); myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", localStorage.getItem("token")); myHeaders.append("Authorization", localStorage.getItem("token"));
var requestOptions = { var requestOptions = {
method: 'GET', method: 'GET',
headers: myHeaders, headers: myHeaders,
redirect: 'follow' redirect: 'follow'
}; };
fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device/${router.query.id[0]}/connecteddevices`, requestOptions) fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device/${router.query.id[0]}/connecteddevices`, requestOptions)
.then(response => { .then(response => {
if (response.status === 401) { if (response.status === 401) {
router.push("/auth/login") router.push("/auth/login")
} }
return response.json() return response.json()
}) })
.then(result => { .then(result => {
console.log("connecteddevices content", result) console.log("connecteddevices content", result)
let interfaces = Object.keys(result) let interfaces = Object.keys(result)
setInterfaces(interfaces) setInterfaces(interfaces)
setInterfaceValue(interfaces[0]) setInterfaceValue(interfaces[0])
setContent(result) setContent(result)
}) })
.catch(error => console.log('error', error)); .catch(error => console.log('error', error));
}; };
useEffect(() => { useEffect(() => {
fetchConnectedDevicesData(); fetchConnectedDevicesData();
},[]) }, [])
return ( return (
<Stack <Stack
justifyContent="center" justifyContent="center"
alignItems={(!content || interfaces.length == 0) &&"center"} alignItems={(!content || interfaces.length == 0) && "center"}
> >
{content && interfaces.length > 0 ? {content && interfaces.length > 0 ?
<Card> <Card>
<CardContent> <CardContent>
<Grid mb={3}> <Grid mb={3}>
<InputLabel> Interface </InputLabel> <InputLabel> Interface </InputLabel>
<Select label="interface" variant="standard" value={interfaceValue} onChange={(e)=> setInterfaceValue(e.target.value)}> <Select label="interface" variant="standard" value={interfaceValue} onChange={(e) => setInterfaceValue(e.target.value)}>
{( {(
interfaces.map((item, index) => ( interfaces.map((item, index) => (
<MenuItem key={index} value={item}> <MenuItem key={index} value={item}>
{item} {item}
</MenuItem> </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> </CardContent>
</Grid> </Card> : (
{ content ? <Typography> No connected devices found </Typography> : <CircularProgress />
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/>
)}
</Stack> </Stack>
) )
} }