mirror of
https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git
synced 2025-10-30 01:42:19 +00:00
Merge pull request #151 from stephb9959/main
[WIFI-11958] Device restriction details display
This commit is contained in:
Charles Bourque
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "ucentral-client",
|
||||
"version": "2.8.0(43)",
|
||||
"version": "2.8.0(44)",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "ucentral-client",
|
||||
"version": "2.8.0(43)",
|
||||
"version": "2.8.0(44)",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@chakra-ui/icons": "^2.0.11",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ucentral-client",
|
||||
"version": "2.8.0(43)",
|
||||
"version": "2.8.0(44)",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"main": "index.tsx",
|
||||
|
||||
@@ -894,6 +894,20 @@
|
||||
"title": "Ressourcen",
|
||||
"variable": "Variable"
|
||||
},
|
||||
"restrictions": {
|
||||
"algo": "Signaturalgorithmus",
|
||||
"allowed": "dürfen",
|
||||
"countries": "erlaubte Länder",
|
||||
"developer": "Entwicklermodus",
|
||||
"dfs": "DFS-Überschreibung",
|
||||
"gw_commands": "Gateway-Befehle",
|
||||
"identifier": "Identifikator",
|
||||
"key_verification": "Überprüfung des Signaturschlüssels",
|
||||
"restricted": "Beschränkt",
|
||||
"signed_upgrade": "Nur signiertes Upgrade",
|
||||
"title": "Beschränkungen",
|
||||
"tty": "TTY-Zugriff"
|
||||
},
|
||||
"rrm": {
|
||||
"algorithm": "Algorithmus",
|
||||
"algorithm_other": "Algorithmen",
|
||||
|
||||
@@ -894,6 +894,20 @@
|
||||
"title": "Resources",
|
||||
"variable": "Variable"
|
||||
},
|
||||
"restrictions": {
|
||||
"algo": "Signing Algorithm",
|
||||
"allowed": "Allowed",
|
||||
"countries": "Allowed Countries",
|
||||
"developer": "Developer Mode",
|
||||
"dfs": "DFS Override",
|
||||
"gw_commands": "Gateway Commands",
|
||||
"identifier": "Identifier",
|
||||
"key_verification": "Signing Key Verification",
|
||||
"restricted": "Restricted",
|
||||
"signed_upgrade": "Signed Upgrade Only",
|
||||
"title": "Restrictions",
|
||||
"tty": "TTY Access"
|
||||
},
|
||||
"rrm": {
|
||||
"algorithm": "Algorithm",
|
||||
"algorithm_other": "Algorithms",
|
||||
|
||||
@@ -894,6 +894,20 @@
|
||||
"title": "Recursos",
|
||||
"variable": "Variable"
|
||||
},
|
||||
"restrictions": {
|
||||
"algo": "Algoritmo de firma",
|
||||
"allowed": "Permitido",
|
||||
"countries": "países permitidos",
|
||||
"developer": "Modo desarrollador",
|
||||
"dfs": "Anulación de DFS",
|
||||
"gw_commands": "Comandos de puerta de enlace",
|
||||
"identifier": "Identificador",
|
||||
"key_verification": "Verificación de clave de firma",
|
||||
"restricted": "Restringido",
|
||||
"signed_upgrade": "Solo actualización firmada",
|
||||
"title": "Las restricciones",
|
||||
"tty": "Acceso TTY"
|
||||
},
|
||||
"rrm": {
|
||||
"algorithm": "Algoritmo",
|
||||
"algorithm_other": "Algoritmos",
|
||||
|
||||
@@ -894,6 +894,20 @@
|
||||
"title": "Ressources",
|
||||
"variable": "Variable"
|
||||
},
|
||||
"restrictions": {
|
||||
"algo": "Algorithme de signature",
|
||||
"allowed": "Permis",
|
||||
"countries": "Pays autorisés",
|
||||
"developer": "Mode développeur",
|
||||
"dfs": "Remplacement DFS",
|
||||
"gw_commands": "Commandes de passerelle",
|
||||
"identifier": "Identifiant",
|
||||
"key_verification": "Vérification de la clé de signature",
|
||||
"restricted": "Limité",
|
||||
"signed_upgrade": "Mise à niveau signée uniquement",
|
||||
"title": "Restrictions",
|
||||
"tty": "Accès ATS"
|
||||
},
|
||||
"rrm": {
|
||||
"algorithm": "Algorithme",
|
||||
"algorithm_other": "Algorithmes",
|
||||
|
||||
@@ -894,6 +894,20 @@
|
||||
"title": "Recursos",
|
||||
"variable": "Variável"
|
||||
},
|
||||
"restrictions": {
|
||||
"algo": "Algoritmo de Assinatura",
|
||||
"allowed": "Permitido",
|
||||
"countries": "países permitidos",
|
||||
"developer": "Modo de desenvolvedor",
|
||||
"dfs": "Substituição DFS",
|
||||
"gw_commands": "Comandos de gateway",
|
||||
"identifier": "Identificador",
|
||||
"key_verification": "Verificação da chave de assinatura",
|
||||
"restricted": "Restrito",
|
||||
"signed_upgrade": "Somente atualização assinada",
|
||||
"title": "RESTRIÇÕES",
|
||||
"tty": "Acesso TTY"
|
||||
},
|
||||
"rrm": {
|
||||
"algorithm": "Algoritmo",
|
||||
"algorithm_other": "Algoritmos",
|
||||
|
||||
@@ -22,6 +22,20 @@ export interface GatewayDevice {
|
||||
notes: Note[];
|
||||
owner: string;
|
||||
restrictedDevice: boolean;
|
||||
restrictionDetails?: {
|
||||
dfs: boolean;
|
||||
ssh: boolean;
|
||||
rtty: boolean;
|
||||
tty: boolean;
|
||||
developer: boolean;
|
||||
upgrade: boolean;
|
||||
commands: boolean;
|
||||
country: string[];
|
||||
key_info: {
|
||||
vendor: string;
|
||||
algo: string;
|
||||
};
|
||||
};
|
||||
serialNumber: string;
|
||||
subscriber: string;
|
||||
venue: string;
|
||||
|
||||
89
src/pages/Device/RestrictionsCard/index.tsx
Normal file
89
src/pages/Device/RestrictionsCard/index.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import * as React from 'react';
|
||||
import { Box, Flex, Heading, ListItem, Text, UnorderedList } from '@chakra-ui/react';
|
||||
import { LockSimple, LockSimpleOpen } from 'phosphor-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card } from 'components/Containers/Card';
|
||||
import { CardBody } from 'components/Containers/Card/CardBody';
|
||||
import { CardHeader } from 'components/Containers/Card/CardHeader';
|
||||
import { useGetDevice } from 'hooks/Network/Devices';
|
||||
|
||||
type Props = {
|
||||
serialNumber: string;
|
||||
};
|
||||
|
||||
const RestrictionsCard = ({ serialNumber }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const getDevice = useGetDevice({ serialNumber });
|
||||
|
||||
const LABELS = {
|
||||
dfs: t('restrictions.dfs'),
|
||||
ssh: 'SSH',
|
||||
rtty: 'RTTY',
|
||||
tty: t('restrictions.tty'),
|
||||
developer: t('restrictions.developer'),
|
||||
upgrade: t('restrictions.signed_upgrade'),
|
||||
commands: t('restrictions.gw_commands'),
|
||||
} as { [key: string]: string };
|
||||
|
||||
const restrictions = getDevice.data?.restrictionDetails;
|
||||
|
||||
if (!restrictions || !getDevice.data?.restrictedDevice) return null;
|
||||
|
||||
const allowed = () => {
|
||||
const allowedKeys = Object.entries(restrictions).filter(([k, v]) => v === false && LABELS[k] !== undefined);
|
||||
return allowedKeys.map(([k]) => <ListItem key={k}>{LABELS[k]}</ListItem>);
|
||||
};
|
||||
const restricted = () => {
|
||||
const restrictedKeys = Object.entries(restrictions).filter(([k, v]) => v === true && LABELS[k] !== undefined);
|
||||
return restrictedKeys.map(([k]) => <ListItem key={k}>{LABELS[k]}</ListItem>);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card mb={4}>
|
||||
<CardHeader>
|
||||
<Heading size="md">{t('restrictions.title')}</Heading>
|
||||
</CardHeader>
|
||||
<CardBody p={0} display="block">
|
||||
<Flex mt={2}>
|
||||
<Heading size="sm" mr={2}>
|
||||
{t('restrictions.countries')}:
|
||||
</Heading>
|
||||
<Text>{restrictions.country.join(', ')}</Text>
|
||||
</Flex>
|
||||
<Heading size="sm" mt={2}>
|
||||
{t('restrictions.key_verification')}
|
||||
</Heading>
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
{t('controller.wifi.vendor')}: {restrictions.key_info?.vendor}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
{t('restrictions.algo')}: {restrictions.key_info?.algo}
|
||||
</ListItem>
|
||||
</UnorderedList>
|
||||
<Flex mt={2}>
|
||||
<Box w="100%">
|
||||
<Flex>
|
||||
<Heading size="sm" mr={2}>
|
||||
{t('restrictions.restricted')}
|
||||
</Heading>
|
||||
<LockSimple size={20} weight="bold" />
|
||||
</Flex>
|
||||
<UnorderedList>{restricted()}</UnorderedList>
|
||||
</Box>
|
||||
<Box w="100%">
|
||||
<Flex>
|
||||
<Heading size="sm" mr={2}>
|
||||
{t('restrictions.allowed')}
|
||||
</Heading>
|
||||
<LockSimpleOpen size={20} weight="bold" />
|
||||
</Flex>
|
||||
<UnorderedList>{allowed()}</UnorderedList>
|
||||
</Box>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default RestrictionsCard;
|
||||
@@ -19,6 +19,7 @@ import Masonry from 'react-masonry-css';
|
||||
import DeviceDetails from './Details';
|
||||
import DeviceLogsCard from './LogsCard';
|
||||
import DeviceNotes from './Notes';
|
||||
import RestrictionsCard from './RestrictionsCard';
|
||||
import DeviceStatisticsCard from './StatisticsCard';
|
||||
import DeviceSummary from './Summary';
|
||||
import WifiAnalysisCard from './WifiAnalysis';
|
||||
@@ -232,6 +233,8 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
|
||||
<DeviceStatisticsCard serialNumber={serialNumber} />
|
||||
<WifiAnalysisCard serialNumber={serialNumber} />
|
||||
<DeviceLogsCard serialNumber={serialNumber} />
|
||||
<RestrictionsCard serialNumber={serialNumber} />
|
||||
<Box />
|
||||
<DeviceNotes serialNumber={serialNumber} />
|
||||
</Masonry>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user