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

Signed-off-by: Charles <charles.bourque96@gmail.com>

package-lock.json

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

package.json

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

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

@@ -165,6 +165,13 @@ const AdvancedSettings: React.FC<{ editing: boolean; namePrefix: string }> = ({
           isDisabled={!editing}
           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) && (
           <ObjectArrayFieldModal
             name={`${namePrefix}.multi-psk`}

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/interfacesConstants.js

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

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/ServicesSection/DhcpRelay.tsx

@@ -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;

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/ServicesSection/index.jsx

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

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/ServicesSection/servicesConstants.js

@@ -1,6 +1,26 @@
 import { object, number, string, array, bool } from 'yup';
 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) => {
   const shape = object()
     .shape({
@@ -428,6 +448,7 @@ export const SERVICES_SCHEMA = (t, useDefault = false) =>
       ieee8021x: SERVICES_IEEE8021X_SCHEMA(t, useDefault),
       captive: SERVICES_CAPTIVE_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();
     case 'gps':
       return SERVICES_GPS_SCHEMA(t, true).cast();
+    case 'dhcp-relay':
+      return SERVICES_DHCP_RELAY_SCHEMA(t, true).cast();
     default:
       return null;
   }

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/UnitSection/BeaconAdvertisement.tsx

@@ -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;

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/UnitSection/Unit.jsx

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

src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/UnitSection/unitConstants.js

@@ -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) =>
   object().shape({
     name: string().required(t('form.required')).default('Unit'),
@@ -27,5 +33,6 @@ export const UNIT_SCHEMA = (t) =>
       timezone: string().default(undefined),
       'leds-active': bool().default(true),
       'random-password': bool().default(false),
+      'beacon-advertisement': UNIT_BEACON_ADVERTISEMENT_SCHEMA(t).default(undefined),
     }),
   });