feat(nms): Enable federation mapping configuration capability on federated LTE networks

nms/app/e2e/__tests__/FegLte-test.js

@@ -44,7 +44,7 @@ describe('Admin component', () => {
     const page = await browser.newPage();
     await page.setViewport({width: 1280, height: 1024});
     try {
-      await page.goto('https://magma-test.localhost/nms');
+      await page.goto('https://magma-test.localhost/nms/test');
       await page.waitForXPath(`//span[text()='Dashboard']`, {
         timeout: 15000,
       });
@@ -92,7 +92,7 @@ describe('NMS', () => {
     const page = await browser.newPage();
     try {
       // test_feg_lte_network is mocked out
-      await page.goto('https://magma-test.localhost/nms');
+      await page.goto('https://magma-test.localhost/nms/test');
       await page.waitForXPath(`//span[text()='Dashboard']`, {
         timeout: 15000,
       });
@@ -195,6 +195,10 @@ describe('NMS', () => {
       await page.waitForSelector(editSelector);
       await page.click(editSelector);
 
+      const fedationTabSelector = '[data-testid="federationTab"]';
+      await page.waitForSelector(fedationTabSelector);
+      await page.click(fedationTabSelector);
+
       const fegPlaceholder = '[placeholder="Enter Federation Network ID"]';
       await page.waitForSelector(fegPlaceholder);
       await page.click(fegPlaceholder);

nms/app/views/network/FederationStyles.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2020 The Magma Authors.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @flow strict-local
+ * @format
+ */
+import {colors} from '../../theme/default';
+
+export const federationStyles = {
+  input: {
+    display: 'inline-flex',
+    margin: '5px 0',
+    width: '100%',
+  },
+  root: {
+    '&$expanded': {
+      minHeight: 'auto',
+    },
+    marginTop: '0px',
+    marginBottom: '0px',
+  },
+  expanded: {marginTop: '-8px', marginBottom: '-8px'},
+  block: {
+    display: 'block',
+  },
+  flex: {display: 'flex'},
+  panel: {flexGrow: 1},
+  removeIcon: {alignSelf: 'baseline'},
+  dialog: {height: '640px'},
+  title: {textAlign: 'center', margin: 'auto', marginLeft: '0px'},
+  description: {
+    color: colors.primary.mirage,
+  },
+  switch: {margin: 'auto 0px'},
+};

nms/app/views/network/NetworkEdit.js

@@ -14,6 +14,7 @@
  * @format
  */
 import type {
+  feg_lte_network,
   lte_network,
   network_epc_configs,
 } from '../../../generated/MagmaAPIBindings';
@@ -27,13 +28,15 @@ import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 
 import {NetworkEpcEdit} from './NetworkEpc';
+import {NetworkFederationEdit} from './NetworkFederationConfig';
 import {NetworkInfoEdit} from './NetworkInfo';
 import {NetworkRanEdit} from './NetworkRanConfig';
 import {colors, typography} from '../../theme/default';
 import {makeStyles} from '@material-ui/styles';
 import {useContext, useEffect, useState} from 'react';
 
 const NETWORK_TITLE = 'Network';
+const FEDERATION_TITLE = 'Federation';
 const EPC_TITLE = 'Epc';
 const RAN_TITLE = 'Ran';
 
@@ -57,14 +60,22 @@ const useStyles = makeStyles(_ => ({
   },
 }));
 
-const EditTableType = {
+const LTE_TABS = {
   info: 0,
+  feg: -1,
   epc: 1,
   ran: 2,
 };
 
+const FEG_TABS = {
+  info: 0,
+  feg: 1,
+  epc: 2,
+  ran: 3,
+};
+
 type EditProps = {
-  editTable: $Keys<typeof EditTableType>,
+  editTable: $Keys<typeof LTE_TABS> & $Keys<typeof FEG_TABS>,
 };
 
 type DialogProps = {
@@ -122,25 +133,39 @@ export function NetworkEditDialog(props: DialogProps) {
   const classes = useStyles();
   const ctx = useContext(LteNetworkContext);
 
-  const [lteNetwork, setLteNetwork] = useState<lte_network>({});
+  const [lteNetwork, setLteNetwork] = useState<
+    $Shape<lte_network & feg_lte_network>,
+  >({});
   const [epcConfigs, setEpcConfigs] = useState<network_epc_configs>({});
   const lteRanConfigs = editProps ? ctx.state.cellular?.ran : undefined;
 
-  const [tabPos, setTabPos] = React.useState(
-    editProps ? EditTableType[editProps.editTable] : 0,
-  );
+  const [tabPos, setTabPos] = React.useState(0);
 
   useEffect(() => {
-    setLteNetwork(editProps ? ctx.state : {});
-    setEpcConfigs(editProps ? ctx.state.cellular?.epc ?? {} : {});
+    if (editProps) {
+      const network = ctx.state;
+      setLteNetwork(network);
+      setEpcConfigs(network.cellular?.epc ?? {});
+      setTabPos(
+        network.federation
+          ? FEG_TABS[editProps.editTable]
+          : LTE_TABS[editProps.editTable],
+      );
+    } else {
+      setLteNetwork({});
+      setEpcConfigs({});
+      setTabPos(0);
+    }
   }, [open, editProps, ctx.state]);
 
   const onClose = () => {
     props.onClose();
   };
+  const isFegLet = !!lteNetwork.federation;
+  const tabs = isFegLet ? FEG_TABS : LTE_TABS;
 
   return (
-    <Dialog data-testid="editDialog" open={open} fullWidth={true} maxWidth="sm">
+    <Dialog data-testid="editDialog" open={open} fullWidth={true} maxWidth="md">
       <DialogTitle
         label={editProps ? 'Edit Network Settings' : 'Add Network'}
         onClose={onClose}
@@ -150,29 +175,51 @@ export function NetworkEditDialog(props: DialogProps) {
         onChange={(_, v) => setTabPos(v)}
         indicatorColor="primary"
         className={classes.tabBar}>
-        <Tab key="network" data-testid="networkTab" label={NETWORK_TITLE} />;
+        <Tab key="network" data-testid="networkTab" label={NETWORK_TITLE} />
+        {isFegLet && (
+          <Tab
+            key="federation"
+            data-testid="federationTab"
+            disabled={editProps ? false : true}
+            label={FEDERATION_TITLE}
+          />
+        )}
         <Tab
           key="epc"
           data-testid="epcTab"
           disabled={editProps ? false : true}
           label={EPC_TITLE}
         />
-        ;
         <Tab
           key="ran"
           data-testid="ranTab"
           disabled={editProps ? false : true}
           label={RAN_TITLE}
         />
-        ;
       </Tabs>
-      {tabPos === 0 && (
+      {tabPos === tabs.info && (
         <NetworkInfoEdit
           saveButtonTitle={editProps ? 'Save' : 'Save And Continue'}
           lteNetwork={lteNetwork}
           onClose={onClose}
           onSave={(lteNetwork: lte_network) => {
             setLteNetwork(lteNetwork);
+            if (editProps) {
+              onClose();
+            } else {
+              setTabPos(isFegLet ? tabPos + 2 : tabPos + 1);
+            }
+          }}
+        />
+      )}
+      {tabPos === tabs.feg && (
+        <NetworkFederationEdit
+          saveButtonTitle={editProps ? 'Save' : 'Save And Continue'}
+          networkId={lteNetwork.id}
+          config={lteNetwork.federation}
+          onClose={onClose}
+          onSave={federationConfigs => {
+            setLteNetwork({...lteNetwork, federation: federationConfigs});
             if (editProps) {
               onClose();
             } else {
@@ -181,7 +228,7 @@ export function NetworkEditDialog(props: DialogProps) {
           }}
         />
       )}
-      {tabPos === 1 && (
+      {tabPos === tabs.epc && (
         <NetworkEpcEdit
           saveButtonTitle={editProps ? 'Save' : 'Save And Continue'}
           networkId={lteNetwork.id}
@@ -197,7 +244,7 @@ export function NetworkEditDialog(props: DialogProps) {
           }}
         />
       )}
-      {tabPos === 2 && (
+      {tabPos === tabs.ran && (
         <NetworkRanEdit
           saveButtonTitle={editProps ? 'Save' : 'Save And Add Network'}
           networkId={lteNetwork.id}