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

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

@ -16,6 +16,19 @@ 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();
@ -47,19 +60,19 @@ export const ConnectedDevices = () => {
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}>
@ -70,13 +83,13 @@ export const ConnectedDevices = () => {
</Select> </Select>
</Grid> </Grid>
{ {
content[interfaceValue].map((property,index) => ( content[interfaceValue].map((property, index) => (
<Card key={index}> <Card key={index}>
<CardContent> <CardContent>
<Grid container justifyContent={"center"}> <Grid container justifyContent={"center"}>
<Stack direction="row" spacing={5}> <Stack direction="row" spacing={5}>
<Stack justifyItems={"center"} direction={"row"} mt={2}> <Stack justifyItems={"center"} direction={"row"} mt={2}>
<Tooltip title={property.active ? "Online": "Offline"}> <Tooltip title={property.active ? "Online" : "Offline"}>
<SvgIcon> <SvgIcon>
<CpuChipIcon color={property.active ? theme.palette.success.main : theme.palette.error.main}></CpuChipIcon> <CpuChipIcon color={property.active ? theme.palette.success.main : theme.palette.error.main}></CpuChipIcon>
</SvgIcon> </SvgIcon>
@ -85,7 +98,7 @@ export const ConnectedDevices = () => {
{property.hostname} {property.hostname}
</Typography> </Typography>
</Stack> </Stack>
<Divider orientation="vertical"/> <Divider orientation="vertical" />
<Stack spacing={2}> <Stack spacing={2}>
<Typography> <Typography>
IP address: {property.ip_adress} IP address: {property.ip_adress}
@ -95,12 +108,28 @@ export const ConnectedDevices = () => {
</Typography> </Typography>
</Stack> </Stack>
<Stack spacing={2}> <Stack spacing={2}>
<Typography>
RSSI: {property.rssi} dbm
</Typography>
<Typography> <Typography>
Source: {property.adress_source} Source: {property.adress_source}
</Typography> </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>
</Stack> </Stack>
</Grid> </Grid>
@ -109,8 +138,8 @@ export const ConnectedDevices = () => {
)) ))
} }
</CardContent> </CardContent>
</Card>: ( </Card> : (
content ? <Typography> No connected devices found </Typography> : <CircularProgress/> content ? <Typography> No connected devices found </Typography> : <CircularProgress />
)} )}
</Stack> </Stack>
) )