scottk/wlan-cloud-owprov-ui
1
0
Fork 0
mirror of https://github.com/Telecominfraproject/wlan-cloud-owprov-ui.git synced 2025-10-31 18:47:53 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

[WIFI-12949] Added new configuration options in configuration builder

Browse Source 
Signed-off-by: Charles <charles.bourque96@gmail.com>
This commit is contained in:
Charles
2023-09-20 16:38:15 +01:00
parent 88276292e5
commit 67a30fae24
10 changed files with 427 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "wlan-cloud-owprov-ui", "name": "wlan-cloud-owprov-ui",
"version": "2.11.0(29)", "version": "2.11.0(37)",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "wlan-cloud-owprov-ui", "name": "wlan-cloud-owprov-ui",
"version": "2.11.0(29)", "version": "2.11.0(37)",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@chakra-ui/anatomy": "^2.1.1", "@chakra-ui/anatomy": "^2.1.1",

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "wlan-cloud-owprov-ui", "name": "wlan-cloud-owprov-ui",
"version": "2.11.0(29)", "version": "2.11.0(37)",
"description": "", "description": "",
"main": "index.tsx", "main": "index.tsx",
"scripts": { "scripts": {

7
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/AdvancedSettings.tsx
View File

@@ -165,6 +165,13 @@ const AdvancedSettings: React.FC<{ editing: boolean; namePrefix: string }> = ({
isDisabled={!editing} isDisabled={!editing}
emptyIsUndefined emptyIsUndefined
/> />
<ToggleField
name={`${namePrefix}.tip-information-element`}
label="tip-information-element"
definitionKey="interface.ssid.tip-information-element"
isDisabled={!editing}
defaultValue
/>
{!NO_MULTI_PROTOS.includes(proto as string) && ( {!NO_MULTI_PROTOS.includes(proto as string) && (
<ObjectArrayFieldModal <ObjectArrayFieldModal
name={`${namePrefix}.multi-psk`} name={`${namePrefix}.multi-psk`}

1
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/interfacesConstants.js
View File

@@ -439,6 +439,7 @@ export const INTERFACE_SSID_SCHEMA = (t, useDefault = false) => {
radius: INTERFACE_SSID_RADIUS_SCHEMA(t), radius: INTERFACE_SSID_RADIUS_SCHEMA(t),
'pass-point': INTERFACE_SSID_PASS_POINT_SCHEMA(t), 'pass-point': INTERFACE_SSID_PASS_POINT_SCHEMA(t),
'dtim-period': number().moreThan(0).lessThan(256).integer().default(2), 'dtim-period': number().moreThan(0).lessThan(256).integer().default(2),
'tip-information-element': bool().default(true),
}); });
return useDefault ? shape : shape.nullable().default(undefined); return useDefault ? shape : shape.nullable().default(undefined);

178
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/ServicesSection/DhcpRelay.tsx Normal file
View File

@@ -0,0 +1,178 @@
import * as React from 'react';
import { Box, Flex, Heading, SimpleGrid } from '@chakra-ui/react';
import { SERVICES_DHCP_RELAY_VLAN_SCHEMA } from './servicesConstants';
import Card from 'components/Card';
import CardBody from 'components/Card/CardBody';
import CardHeader from 'components/Card/CardHeader';
import MultiSelectField from 'components/FormFields/MultiSelectField';
import NumberField from 'components/FormFields/NumberField';
import ObjectArrayFieldModal from 'components/FormFields/ObjectArrayFieldModal';
import SelectField from 'components/FormFields/SelectField';
import StringField from 'components/FormFields/StringField';
type Props = {
isEditing: boolean;
};
const selectPortsOptions = [
{
value: '*',
label: 'All',
},
{
value: 'WAN*',
label: 'WAN*',
},
{
value: 'LAN*',
label: 'LAN*',
},
{
value: 'LAN1',
label: 'LAN1',
},
{
value: 'LAN2',
label: 'LAN2',
},
{
value: 'LAN3',
label: 'LAN3',
},
{
value: 'LAN4',
label: 'LAN4',
},
{
value: 'LAN5',
label: 'LAN5',
},
{
value: 'LAN6',
label: 'LAN6',
},
{
value: 'LAN7',
label: 'LAN7',
},
{
value: 'LAN8',
label: 'LAN8',
},
{
value: 'LAN9',
label: 'LAN9',
},
{
value: 'LAN10',
label: 'LAN10',
},
{
value: 'LAN11',
label: 'LAN11',
},
{
value: 'LAN12',
label: 'LAN12',
},
];
const DhcpRelay = ({ isEditing }: Props) => {
const columns = React.useMemo(
() => [
{
id: 'vlan',
Header: 'Vlan ID',
Footer: '',
accessor: 'vlan',
customWidth: '40px',
},
{
id: 'circuit-id-format',
Header: 'Circuit ID Format',
Footer: '',
accessor: 'circuit-id-format',
},
{
id: 'remote-id-format',
Header: 'Remote ID Format',
Footer: '',
accessor: 'remote-id-format',
},
{
id: 'relay-server',
Header: 'Relay Server',
Footer: '',
accessor: 'relay-server',
},
],
[],
);
return (
<Card variant="widget" mb={4}>
<CardHeader>
<Heading size="md" borderBottom="1px solid">
DHCP Relay
</Heading>
</CardHeader>
<CardBody>
<SimpleGrid minChildWidth="300px" spacing="20px" mb={2} mt={2} w="100%">
<MultiSelectField
name="configuration.dhcp-relay.select-ports"
label="select-ports"
options={selectPortsOptions}
isRequired
isDisabled={!isEditing}
/>
<ObjectArrayFieldModal
name="configuration.dhcp-relay.vlans"
label="vlans"
fields={
<Box>
<Flex>
<Box w="100px" mr={2}>
<NumberField name="vlan" label="VLAN ID" isRequired w="100px" />
</Box>
<StringField name="relay-server" label="Relay Server" isRequired maxW="300px" />
</Flex>
<Flex mt={4}>
<Box mr={2}>
<SelectField
name="circuit-id-format"
label="Circuit ID Format"
options={[
{ label: 'AP MAC Address', value: 'ap-mac' },
{ label: 'SSID', value: 'ssid' },
{ label: 'VLAN ID', value: 'vlan-id' },
]}
isRequired
w="max-content"
/>
</Box>
<SelectField
name="remote-id-format"
label="Remote ID Format"
options={[
{ label: 'AP MAC Address', value: 'ap-mac' },
{ label: 'SSID', value: 'ssid' },
{ label: 'VLAN ID', value: 'vlan-id' },
]}
isRequired
w="max-content"
/>
</Flex>
</Box>
}
columns={columns}
schema={SERVICES_DHCP_RELAY_VLAN_SCHEMA}
isDisabled={!isEditing}
isRequired
/>
</SimpleGrid>
</CardBody>
</Card>
);
};
export default DhcpRelay;

3
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/ServicesSection/index.jsx
View File

@@ -11,6 +11,7 @@ import SubSectionPicker from '../common/SubSectionPicker';
import AirtimePolicies from './AirtimePolicies'; import AirtimePolicies from './AirtimePolicies';
import Captive from './Captive'; import Captive from './Captive';
import DataPlane from './DataPlane'; import DataPlane from './DataPlane';
import DhcpRelay from './DhcpRelay';
import FacebookWifi from './FacebookWifi'; import FacebookWifi from './FacebookWifi';
import Gps from './Gps'; import Gps from './Gps';
import Http from './Http'; import Http from './Http';
@@ -125,6 +126,7 @@ const ServicesSection = ({ editing, setSection, sectionInformation, removeSub })
'airtime-policies', 'airtime-policies',
'captive', 'captive',
'data-plane', 'data-plane',
'dhcp-relay',
'facebook-wifi', 'facebook-wifi',
'gps', 'gps',
'http', 'http',
@@ -149,6 +151,7 @@ const ServicesSection = ({ editing, setSection, sectionInformation, removeSub })
{isSubSectionActive('airtime-policies') && <AirtimePolicies editing={editing} />} {isSubSectionActive('airtime-policies') && <AirtimePolicies editing={editing} />}
{isSubSectionActive('captive') && <Captive editing={editing} />} {isSubSectionActive('captive') && <Captive editing={editing} />}
{isSubSectionActive('data-plane') && <DataPlane editing={editing} />} {isSubSectionActive('data-plane') && <DataPlane editing={editing} />}
{isSubSectionActive('dhcp-relay') && <DhcpRelay isEditing={editing} />}
{isSubSectionActive('facebook-wifi') && <FacebookWifi editing={editing} />} {isSubSectionActive('facebook-wifi') && <FacebookWifi editing={editing} />}
{isSubSectionActive('gps') && <Gps editing={editing} />} {isSubSectionActive('gps') && <Gps editing={editing} />}
{isSubSectionActive('http') && <Http editing={editing} />} {isSubSectionActive('http') && <Http editing={editing} />}

23
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/ServicesSection/servicesConstants.js
View File

@@ -1,6 +1,26 @@
import { object, number, string, array, bool } from 'yup'; import { object, number, string, array, bool } from 'yup';
import { testFqdnHostname, testIpv4, testLength, testUcMac } from 'constants/formTests'; import { testFqdnHostname, testIpv4, testLength, testUcMac } from 'constants/formTests';
export const SERVICES_DHCP_RELAY_VLAN_SCHEMA = (t, useDefault = false) => {
const shape = object().shape({
vlan: number().required(t('form.required')).moreThan(-1).lessThan(4097).integer().default(1),
'relay-server': string().required(t('form.required')).default(''),
'circuit-id-format': string().required(t('form.required')).default('vlan-id'),
'remote-id-format': string().required(t('form.required')).default('ap-mac'),
});
return useDefault ? shape : shape.nullable().default(undefined);
};
export const SERVICES_DHCP_RELAY_SCHEMA = (t, useDefault = false) => {
const shape = object().shape({
'select-ports': array().of(string()).min(1, t('form.required')).default([]),
vlans: array().of(SERVICES_DHCP_RELAY_VLAN_SCHEMA(t, useDefault)).default([]),
});
return useDefault ? shape : shape.nullable().default(undefined);
};
export const SERVICES_CAPTIVE_SCHEMA = (t, useDefault = false) => { export const SERVICES_CAPTIVE_SCHEMA = (t, useDefault = false) => {
const shape = object() const shape = object()
.shape({ .shape({
@@ -428,6 +448,7 @@ export const SERVICES_SCHEMA = (t, useDefault = false) =>
ieee8021x: SERVICES_IEEE8021X_SCHEMA(t, useDefault), ieee8021x: SERVICES_IEEE8021X_SCHEMA(t, useDefault),
captive: SERVICES_CAPTIVE_SCHEMA(t, useDefault), captive: SERVICES_CAPTIVE_SCHEMA(t, useDefault),
gps: SERVICES_GPS_SCHEMA(t, useDefault), gps: SERVICES_GPS_SCHEMA(t, useDefault),
'dhcp-relay': SERVICES_DHCP_RELAY_SCHEMA(t, useDefault),
}), }),
}); });
@@ -471,6 +492,8 @@ export const getSubSectionDefaults = (t, sub) => {
return SERVICES_CAPTIVE_SCHEMA(t, true).cast(); return SERVICES_CAPTIVE_SCHEMA(t, true).cast();
case 'gps': case 'gps':
return SERVICES_GPS_SCHEMA(t, true).cast(); return SERVICES_GPS_SCHEMA(t, true).cast();
case 'dhcp-relay':
return SERVICES_DHCP_RELAY_SCHEMA(t, true).cast();
default: default:
return null; return null;
} }

62
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/UnitSection/BeaconAdvertisement.tsx Normal file
View File

@@ -0,0 +1,62 @@
import * as React from 'react';
import { Box, Flex, Heading, Switch } from '@chakra-ui/react';
import NumberField from 'components/FormFields/NumberField';
import ToggleField from 'components/FormFields/ToggleField';
import useFastField from 'hooks/useFastField';
type Props = {
isEditing: boolean;
};
const BeaconAdvertisement = ({ isEditing }: Props) => {
const field = useFastField<object | undefined>({ name: 'configuration.beacon-advertisement' });
const isActive = !!field.value;
const onOpen = React.useCallback(() => {
field.onChange({
'device-name': true,
'device-serial': true,
'network-id': 0,
});
}, []);
const onClose = React.useCallback(() => {
field.onChange(undefined);
}, []);
return (
<Box>
<Flex alignItems="center">
<Heading size="md">Beacon Advertisement</Heading>
<Switch size="lg" ml="2" isChecked={isActive} onChange={isActive ? onClose : onOpen} isDisabled={!isEditing} />
</Flex>
{isActive ? (
<Flex mt={2}>
<Box w="220px">
<ToggleField
name="configuration.beacon-advertisement.device-name"
label="Device Name"
isDisabled={!isEditing}
/>
</Box>
<Box w="220px">
<ToggleField
name="configuration.beacon-advertisement.device-serial"
label="Device Serial"
isDisabled={!isEditing}
/>
</Box>
<NumberField
name="configuration.beacon-advertisement.network-id"
label="Network ID"
isDisabled={!isEditing}
w="120px"
/>
</Flex>
) : null}
</Box>
);
};
export default BeaconAdvertisement;

282
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/UnitSection/Unit.jsx
View File

@@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import { Heading, SimpleGrid } from '@chakra-ui/react'; import { Box, Heading, SimpleGrid } from '@chakra-ui/react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import BeaconAdvertisement from './BeaconAdvertisement';
import Card from 'components/Card'; import Card from 'components/Card';
import CardBody from 'components/Card/CardBody'; import CardBody from 'components/Card/CardBody';
import CardHeader from 'components/Card/CardHeader'; import CardHeader from 'components/Card/CardHeader';
@@ -23,144 +24,147 @@ const Unit = ({ editing }) => {
{t('configurations.unit')} {t('configurations.unit')}
</Heading> </Heading>
</CardHeader> </CardHeader>
<CardBody> <CardBody pb={8}>
<SimpleGrid minChildWidth="300px" spacing="20px" mb={8} mt={2} w="100%"> <Box w="100%">
<StringField <SimpleGrid minChildWidth="300px" spacing="20px" mb={4} mt={2} w="100%">
name="configuration.name" <StringField
label="name" name="configuration.name"
definitionKey="unit.name" label="name"
isDisabled={!editing} definitionKey="unit.name"
isRequired isDisabled={!editing}
/> isRequired
<StringField />
name="configuration.location" <StringField
label="location" name="configuration.location"
definitionKey="unit.location" label="location"
isDisabled={!editing} definitionKey="unit.location"
isRequired isDisabled={!editing}
/> isRequired
<StringField />
name="configuration.hostname" <StringField
label="hostname" name="configuration.hostname"
definitionKey="unit.hostname" label="hostname"
isDisabled={!editing} definitionKey="unit.hostname"
emptyIsUndefined isDisabled={!editing}
/> emptyIsUndefined
<SelectField />
name="configuration.timezone" <SelectField
label="timezone" name="configuration.timezone"
definitionKey="unit.timezone" label="timezone"
emptyIsUndefined definitionKey="unit.timezone"
isDisabled={!editing} emptyIsUndefined
options={[ isDisabled={!editing}
{ value: '', label: t('common.none') }, options={[
{ { value: '', label: t('common.none') },
value: 'UTC-11:00', {
label: 'Midway Islands Time (UTC-11:00)', value: 'UTC-11:00',
}, label: 'Midway Islands Time (UTC-11:00)',
{ },
value: 'UTC-10:00', {
label: 'Hawaii Standard Time (UTC-10:00)', value: 'UTC-10:00',
}, label: 'Hawaii Standard Time (UTC-10:00)',
{ },
value: 'UTC-8:00', {
label: 'Pacific Standard Time (UTC-8:00)', value: 'UTC-8:00',
}, label: 'Pacific Standard Time (UTC-8:00)',
{ },
value: 'UTC-7:00', {
label: 'Mountain Standard Time (UTC-7:00)', value: 'UTC-7:00',
}, label: 'Mountain Standard Time (UTC-7:00)',
{ },
value: 'UTC-6:00', {
label: 'Central Standard Time (UTC-6:00)', value: 'UTC-6:00',
}, label: 'Central Standard Time (UTC-6:00)',
{ },
value: 'UTC-5:00', {
label: 'Eastern Standard Time (UTC-5:00)', value: 'UTC-5:00',
}, label: 'Eastern Standard Time (UTC-5:00)',
{ },
value: 'UTC-4:00', {
label: 'Puerto Rico and US Virgin Islands Time (UTC-4:00)', value: 'UTC-4:00',
}, label: 'Puerto Rico and US Virgin Islands Time (UTC-4:00)',
{ },
value: 'UTC-3:30', {
label: 'Canada Newfoundland Time (UTC-3:30)', value: 'UTC-3:30',
}, label: 'Canada Newfoundland Time (UTC-3:30)',
{ value: 'UTC-3:00', label: 'Brazil Eastern Time (UTC-3:00)' }, },
{ { value: 'UTC-3:00', label: 'Brazil Eastern Time (UTC-3:00)' },
value: 'UTC-1:00', {
label: 'Central African Time (UTC-1:00)', value: 'UTC-1:00',
}, label: 'Central African Time (UTC-1:00)',
{ },
value: 'UTC', {
label: 'Universal Coordinated Time (UTC)', value: 'UTC',
}, label: 'Universal Coordinated Time (UTC)',
{ },
value: 'UTC+1:00', {
label: 'European Central Time (UTC+1:00)', value: 'UTC+1:00',
}, label: 'European Central Time (UTC+1:00)',
{ },
value: 'UTC+2:00', {
label: 'Eastern European Time (UTC+2:00)', value: 'UTC+2:00',
}, label: 'Eastern European Time (UTC+2:00)',
{ },
value: 'UTC+2:00', {
label: '(Arabic) Egypt Standard Time (UTC+2:00)', value: 'UTC+2:00',
}, label: '(Arabic) Egypt Standard Time (UTC+2:00)',
{ },
value: 'UTC+3:00', {
label: 'Eastern African Time (UTC+3:00)', value: 'UTC+3:00',
}, label: 'Eastern African Time (UTC+3:00)',
{ value: 'UTC+3:30', label: 'Middle East Time (UTC+3:30)' }, },
{ value: 'UTC+4:00', label: 'Near East Time (UTC+4:00)' }, { value: 'UTC+3:30', label: 'Middle East Time (UTC+3:30)' },
{ { value: 'UTC+4:00', label: 'Near East Time (UTC+4:00)' },
value: 'UTC+5:00', {
label: 'Pakistan Lahore Time (UTC+5:00)', value: 'UTC+5:00',
}, label: 'Pakistan Lahore Time (UTC+5:00)',
{ value: 'UTC+5:30', label: 'India Standard Time (UTC+5:30)' }, },
{ { value: 'UTC+5:30', label: 'India Standard Time (UTC+5:30)' },
value: 'UTC+6:00', {
label: 'Bangladesh Standard Time (UTC+6:00)', value: 'UTC+6:00',
}, label: 'Bangladesh Standard Time (UTC+6:00)',
{ },
value: 'UTC+7:00', {
label: 'Vietnam Standard Time (UTC+7:00)', value: 'UTC+7:00',
}, label: 'Vietnam Standard Time (UTC+7:00)',
{ value: 'UTC+8:00', label: 'China Taiwan Time (UTC+8:00)' }, },
{ value: 'UTC+9:00', label: 'Japan Standard Time (UTC+9:00)' }, { value: 'UTC+8:00', label: 'China Taiwan Time (UTC+8:00)' },
{ { value: 'UTC+9:00', label: 'Japan Standard Time (UTC+9:00)' },
value: 'UTC+9:30', {
label: 'Australia Central Time (UTC+9:30)', value: 'UTC+9:30',
}, label: 'Australia Central Time (UTC+9:30)',
{ },
value: 'UTC+10:00', {
label: 'Australia Eastern Time (UTC+10:00)', value: 'UTC+10:00',
}, label: 'Australia Eastern Time (UTC+10:00)',
{ },
value: 'UTC+11:00', {
label: 'Solomon Standard Time (UTC+11:00)', value: 'UTC+11:00',
}, label: 'Solomon Standard Time (UTC+11:00)',
{ },
value: 'UTC+12:00', {
label: 'New Zealand Standard Time (UTC+12:00)', value: 'UTC+12:00',
}, label: 'New Zealand Standard Time (UTC+12:00)',
]} },
/> ]}
<ToggleField />
name="configuration.leds-active" <ToggleField
label="leds-active" name="configuration.leds-active"
definitionKey="unit.leds-active" label="leds-active"
isDisabled={!editing} definitionKey="unit.leds-active"
isRequired isDisabled={!editing}
/> isRequired
<ToggleField />
name="configuration.random-password" <ToggleField
label="random-password" name="configuration.random-password"
definitionKey="unit.random-password" label="random-password"
isDisabled={!editing} definitionKey="unit.random-password"
isRequired isDisabled={!editing}
/> isRequired
</SimpleGrid> />
</SimpleGrid>
<BeaconAdvertisement isEditing={editing} />
</Box>
</CardBody> </CardBody>
</Card> </Card>
); );

7
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/UnitSection/unitConstants.js
View File

@@ -13,6 +13,12 @@ export const DEFAULT_UNIT = {
}, },
}; };
export const UNIT_BEACON_ADVERTISEMENT_SCHEMA = (t) =>
object().shape({
'device-name': string().required(t('form.required')).default(''),
'device-serial': string().required(t('form.required')).default(''),
'network-id': number().required(t('form.required')).min(0).lessThan(65535).default(1024),
});
export const UNIT_SCHEMA = (t) => export const UNIT_SCHEMA = (t) =>
object().shape({ object().shape({
name: string().required(t('form.required')).default('Unit'), name: string().required(t('form.required')).default('Unit'),
@@ -27,5 +33,6 @@ export const UNIT_SCHEMA = (t) =>
timezone: string().default(undefined), timezone: string().default(undefined),
'leds-active': bool().default(true), 'leds-active': bool().default(true),
'random-password': bool().default(false), 'random-password': bool().default(false),
'beacon-advertisement': UNIT_BEACON_ADVERTISEMENT_SCHEMA(t).default(undefined),
}), }),
}); });