From 74f29516d4e21270c3fe40d9c50dd750d9f0ff0c Mon Sep 17 00:00:00 2001 From: brianchennn Date: Thu, 21 Sep 2023 06:47:14 +0000 Subject: [PATCH] remove SubscriberUpdate.tsx and integrate it into SubscriberCreate.tsx --- backend/WebUI/api_webui.go | 10 +- backend/WebUI/model_charging_data.go | 1 + frontend/src/App.tsx | 5 +- frontend/src/Top.tsx | 3 +- frontend/src/api/api.ts | 6 + frontend/src/pages/SubscriberCreate.tsx | 423 ++++--- frontend/src/pages/SubscriberList.tsx | 2 +- frontend/src/pages/SubscriberRead.tsx | 195 +-- frontend/src/pages/SubscriberUpdate.tsx | 1491 ----------------------- 9 files changed, 392 insertions(+), 1744 deletions(-) delete mode 100644 frontend/src/pages/SubscriberUpdate.tsx diff --git a/backend/WebUI/api_webui.go b/backend/WebUI/api_webui.go index 056d6279..0489e1c6 100644 --- a/backend/WebUI/api_webui.go +++ b/backend/WebUI/api_webui.go @@ -1531,12 +1531,18 @@ func dbOperation(ueId string, servingPlmnId string, method string, subsData *Sub if chargingData.Dnn != "" && chargingData.Filter != "" { chargingFilter = bson.M{ "ueId": ueId, "servingPlmnId": servingPlmnId, - "snssai": chargingData.Snssai, "dnn": chargingData.Dnn, "filter": chargingData.Filter, + "snssai": chargingData.Snssai, + "dnn": chargingData.Dnn, + "qfi": chargingData.QFI, + "filter": chargingData.Filter, } } else { chargingFilter = bson.M{ "ueId": ueId, "servingPlmnId": servingPlmnId, - "snssai": chargingData.Snssai, "dnn": "", "filter": "", + "snssai": chargingData.Snssai, + "qfi": chargingData.QFI, + "dnn": "", + "filter": "", } chargingDataBsonM["dnn"] = "" chargingDataBsonM["filter"] = "" diff --git a/backend/WebUI/model_charging_data.go b/backend/WebUI/model_charging_data.go index 4879eaf9..7aad94c1 100644 --- a/backend/WebUI/model_charging_data.go +++ b/backend/WebUI/model_charging_data.go @@ -3,6 +3,7 @@ package WebUI type ChargingData struct { Snssai string `json:"snssai,omitempty" yaml:"snssai" bson:"snssai" mapstructure:"snssai"` Dnn string `json:"dnn,omitempty" yaml:"dnn" bson:"dnn" mapstructure:"dnn"` + QFI int `json:"qfi" yaml:"qfi" bson:"qfi" mapstructure:"qfi"` Filter string `json:"filter,omitempty" yaml:"filter" bson:"filter" mapstructure:"filter"` // nolint ChargingMethod string `json:"chargingMethod,omitempty" yaml:"chargingMethod" bson:"chargingMethod" mapstructure:"chargingMethod"` diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 89a5f4a9..bb1a00ae 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,7 +4,6 @@ import StatusList from "./pages/StatusList"; import StatusRead from "./pages/StatusRead"; import SubscriberList from "./pages/SubscriberList"; import SubscriberCreate from "./pages/SubscriberCreate"; -import SubscriberUpdate from "./pages/SubscriberUpdate"; import SubscriberRead from "./pages/SubscriberRead"; import AnalysisList from "./pages/AnalysisList"; import TenantList from "./pages/TenantList"; @@ -60,10 +59,10 @@ export default function App() { } /> - + } /> diff --git a/frontend/src/Top.tsx b/frontend/src/Top.tsx index 7d206e80..9d4e5ec9 100644 --- a/frontend/src/Top.tsx +++ b/frontend/src/Top.tsx @@ -4,7 +4,6 @@ import StatusList from "./pages/StatusList"; import StatusRead from "./pages/StatusRead"; import SubscriberList from "./pages/SubscriberList"; import SubscriberCreate from "./pages/SubscriberCreate"; -import SubscriberUpdate from "./pages/SubscriberUpdate"; import SubscriberRead from "./pages/SubscriberRead"; import AnalysisList from "./pages/AnalysisList"; import TenantList from "./pages/TenantList"; @@ -23,7 +22,7 @@ export default function Top() { } /> } /> } /> - } /> + } /> } /> } /> } /> diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts index 5e84e1da..c79f484d 100644 --- a/frontend/src/api/api.ts +++ b/frontend/src/api/api.ts @@ -889,6 +889,12 @@ export interface Tenant { * @memberof ChargingData */ 'dnn'?: string; + /** + * + * @type {number} + * @memberof ChargingData + */ + 'qfi'?: number; /** * * @type {string} diff --git a/frontend/src/pages/SubscriberCreate.tsx b/frontend/src/pages/SubscriberCreate.tsx index 0abaae93..e3a212a8 100644 --- a/frontend/src/pages/SubscriberCreate.tsx +++ b/frontend/src/pages/SubscriberCreate.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useState, useEffect } from "react"; +import { useNavigate, useParams } from "react-router-dom"; import axios from "../axios"; import { @@ -30,9 +30,17 @@ import { TableRow, TextField, } from "@mui/material"; -import { integer } from "aws-sdk/clients/cloudfront"; + +let isNewSubscriber = false export default function SubscriberCreate() { + const { id, plmn } = useParams<{ + id: string; + plmn: string; + }>(); + if (id === "0" || id === undefined && plmn === "0" || plmn === undefined) { + isNewSubscriber = true + } const navigation = useNavigate(); const [data, setData] = useState({ @@ -73,7 +81,7 @@ export default function SubscriberCreate() { singleNssais: [], }, }, - "SessionManagementSubscriptionData": [ + SessionManagementSubscriptionData: [ { "singleNssai": { "sst": 1, @@ -204,13 +212,6 @@ export default function SubscriberCreate() { "dnn": "internet", "qfi": 8 }, - { - "filter": "permit out ip from any to 10.60.0.0/16", - "precedence": 138, - "snssai": "01010203", - "dnn": "internet", - "qfi": 9 - }, { "filter": "permit out ip from any to 10.60.0.0/16", "precedence": 127, @@ -230,16 +231,6 @@ export default function SubscriberCreate() { "gbrUL": "108 Mbps", "gbrDL": "108 Mbps" }, - { - "snssai": "01010203", - "dnn": "internet", - "qfi": 9, - "5qi": 9, - "mbrUL": "409 Mbps", - "mbrDL": "409 Mbps", - "gbrUL": "209 Mbps", - "gbrDL": "209 Mbps" - }, { "snssai": "01112233", "dnn": "internet", @@ -255,7 +246,8 @@ export default function SubscriberCreate() { { "snssai": "01010203", "dnn": "internet", - "filter": "10.10.60.1", + "qfi": 8, + "filter": "permit out ip from any to 10.60.0.0/16", "chargingMethod": "Offline", "quota": "0", "unitCost": "1", @@ -263,7 +255,8 @@ export default function SubscriberCreate() { { "snssai": "01112233", "dnn": "internet", - "filter": "10.10.60.2", + "qfi": 7, + "filter": "permit out ip from any to 10.60.0.0/16", "chargingMethod": "Online", "quota": "2000", "unitCost": "2", @@ -274,6 +267,13 @@ export default function SubscriberCreate() { const [opcValue, setOpcValue] = useState("8e27b6af0e692e750f32667a3b14605d"); const [dnnName, setDnnName] = useState([]); + if (!isNewSubscriber) { + useEffect(() => { + axios.get("/api/subscriber/" + id + "/" + plmn).then((res) => { + setData(res.data); + }); + }, [id]); + } function toHex(v: number | undefined): string { return ("00" + v?.toString(16).toUpperCase()).substr(-2); }; @@ -293,6 +293,7 @@ export default function SubscriberCreate() { } const onCreate = () => { + if (data.SessionManagementSubscriptionData === undefined) { alert("Please add at least one S-NSSAI"); return; @@ -325,7 +326,6 @@ export default function SubscriberCreate() { let supi = data.ueId!; for (let i = 0; i < data.userNumber!; i++) { data.ueId = supi; - console.log(data) axios .post("/api/subscriber/" + data.ueId + "/" + data.plmnID, data) .then((res) => { @@ -347,6 +347,57 @@ export default function SubscriberCreate() { } }; + const onUpdate = () => { + data.SmfSelectionSubscriptionData = { + subscribedSnssaiInfos: {}, + }; + data.SmPolicyData = { + smPolicySnssaiData: {}, + }; + for (let i = 0; i < data.SessionManagementSubscriptionData!.length; i++) { + const nssai = data.SessionManagementSubscriptionData![i]; + const key = nssai2KeyString(nssai.singleNssai!); + if (nssai.dnnConfigurations !== undefined) { + Object.keys(nssai.dnnConfigurations!).map((dnn) => { + if (data.SmfSelectionSubscriptionData!.subscribedSnssaiInfos![key] === undefined) { + data.SmfSelectionSubscriptionData!.subscribedSnssaiInfos![key] = { + dnnInfos: [{ dnn: dnn }], + }; + } else { + data.SmfSelectionSubscriptionData!.subscribedSnssaiInfos![key].dnnInfos!.push({ + dnn: dnn, + }); + } + if (data.SmPolicyData!.smPolicySnssaiData![key] === undefined) { + data.SmPolicyData!.smPolicySnssaiData![key] = { + snssai: nssai.singleNssai, + smPolicyDnnData: {}, + }; + } + data.SmPolicyData!.smPolicySnssaiData![key].smPolicyDnnData![dnn] = { + dnn: dnn, + }; + }); + } + } + axios + .put("/api/subscriber/" + data.ueId + "/" + data.plmnID, data) + .then((res) => { + navigation("/subscriber/" + data.ueId + "/" + data.plmnID); + }) + .catch((err) => { + if (err.response) { + if (err.response.data.cause) { + alert(err.response.data.cause); + } else { + alert(err.response.data); + } + } else { + alert(err.message); + } + }); + }; + const onSnssai = () => { if ( data.SessionManagementSubscriptionData === undefined || @@ -445,25 +496,73 @@ export default function SubscriberCreate() { setData({ ...data }); }; - const onFlowRuleAdd = (dnn: string, snssai: Nssai) => { + function selectQfi (dnn: string, snssai: Nssai, _5qi: number): number { + const sstsd = toHex(snssai.sst) + snssai.sd! + const filteredFlowRules = data.FlowRules!.filter((flow) => flow.dnn === dnn && flow.snssai === sstsd) + const UsedQfi = [] + for (let i = 0; i < filteredFlowRules.length; i++) { + UsedQfi.push(filteredFlowRules[i].qfi) + } + UsedQfi.sort((a,b) => a! - b!) + if (!UsedQfi.includes(_5qi)) { + return _5qi + } else { + for (let i = 1; i < 256; i++){ + if (!UsedQfi.includes(i)) { + return i + } + } + } + window.alert("Cannot select qfi in 1~128.") + return -1 + }; + + function select5Qi (dnn: string, snssai: Nssai): number { + const sstsd = toHex(snssai.sst) + snssai.sd! + const filteredQosFlows = data.QosFlows!.filter((qos) => qos.dnn === dnn && qos.snssai === sstsd) + const Used5Qi = [] + for (let i = 0; i < filteredQosFlows.length; i++) { + Used5Qi.push(filteredQosFlows[i]["5qi"]) + } + Used5Qi.sort((a,b) => a! - b!) + if (Used5Qi[Used5Qi.length - 1]! < 255) { + return Used5Qi[Used5Qi.length - 1]! + 1 + } + return 255 + }; + + const onFlowRulesAdd = (dnn: string, snssai: Nssai) => { if (dnn !== undefined) { + const sstSd = toHex(snssai.sst) + snssai.sd! + const filter = "permit out ip from any to 10.60.0.0/16" + const selected5Qi = select5Qi(dnn, snssai) + const selectedQfi = selectQfi(dnn, snssai, selected5Qi) data.FlowRules!.push({ - "filter": "permit out ip from any to 10.60.0.0/16", + "filter": filter, "precedence": 127, - "snssai": toHex(snssai.sst) + snssai.sd!, + "snssai": sstSd, "dnn": dnn, - "qfi": 8 + "qfi": selectedQfi // incremented qfi }) data.QosFlows!.push({ - "snssai": toHex(snssai.sst) + snssai.sd!, + "snssai": sstSd, "dnn": dnn, - "qfi": 8, - "5qi": 8, + "qfi": selectedQfi, // incremented qfi + "5qi": selected5Qi, // incremented qfi "mbrUL": "200 Mbps", "mbrDL": "200 Mbps", "gbrUL": "100 Mbps", "gbrDL": "100 Mbps" }) + data.ChargingDatas!.push({ + "snssai": sstSd, + "dnn": dnn, + "qfi": selectedQfi, + "filter": filter, + "chargingMethod": "Offline", + "quota": "0", + "unitCost": "1", + }) } setData({ ...data }); }; @@ -822,25 +921,35 @@ export default function SubscriberCreate() { event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { if (data.FlowRules !== undefined) { for (let i = 0; i < data.FlowRules!.length; i++) { - if (data.FlowRules![i].snssai === flowKey && data.FlowRules![i].dnn === dnn) { + if (data.FlowRules![i].snssai === flowKey && data.FlowRules![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { data.FlowRules![i].filter = event.target.value; setData({ ...data }); } } } + if (data.ChargingDatas !== undefined) { + for (let i = 0; i < data.ChargingDatas!.length; i++) { + if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn && data.ChargingDatas![i].qfi === qfi) { + data.ChargingDatas![i].filter = event.target.value; + setData({ ...data }); + } + } + } }; const handleChangePrecedence = ( event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { if (data.FlowRules !== undefined) { for (let i = 0; i < data.FlowRules!.length; i++) { - if (data.FlowRules![i].snssai === flowKey && data.FlowRules![i].dnn === dnn) { + if (data.FlowRules![i].snssai === flowKey && data.FlowRules![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { if (event.target.value == "") { data.FlowRules![i].precedence = undefined; } else { @@ -856,10 +965,11 @@ export default function SubscriberCreate() { event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { if (data.FlowRules !== undefined) { for (let i = 0; i < data.FlowRules!.length; i++) { - if (data.FlowRules![i].snssai === flowKey && data.FlowRules![i].dnn === dnn) { + if (data.FlowRules![i].snssai === flowKey && data.FlowRules![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { if (event.target.value == "") { data.FlowRules![i].qfi = undefined; } else { @@ -871,7 +981,7 @@ export default function SubscriberCreate() { } if (data.QosFlows !== undefined) { for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { + if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { if (event.target.value == "") { data.QosFlows![i].qfi = undefined; data.QosFlows![i]["5qi"] = undefined; @@ -889,10 +999,11 @@ export default function SubscriberCreate() { event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { if (data.QosFlows !== undefined) { for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { + if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { data.QosFlows![i].gbrUL = event.target.value; setData({ ...data }); } @@ -904,10 +1015,11 @@ export default function SubscriberCreate() { event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { if (data.QosFlows !== undefined) { for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { + if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { data.QosFlows![i].gbrDL = event.target.value; setData({ ...data }); } @@ -919,10 +1031,11 @@ export default function SubscriberCreate() { event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { if (data.QosFlows !== undefined) { for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { + if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { data.QosFlows![i].mbrUL = event.target.value; setData({ ...data }); } @@ -934,23 +1047,26 @@ export default function SubscriberCreate() { event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { if (data.QosFlows !== undefined) { for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { + if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { data.QosFlows![i].mbrDL = event.target.value; setData({ ...data }); } } } }; + const handleChangeChargingMethod = ( event: SelectChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { for (let i = 0; i < data.ChargingDatas!.length; i++) { - if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn) { + if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { data.ChargingDatas![i]!.chargingMethod = event.target.value; setData({ ...data }); } @@ -961,9 +1077,10 @@ export default function SubscriberCreate() { event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { for (let i = 0; i < data.FlowRules!.length; i++) { - if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn) { + if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { data.ChargingDatas![i]!.filter = event.target.value; setData({ ...data }); } @@ -974,9 +1091,10 @@ export default function SubscriberCreate() { event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { for (let i = 0; i < data.ChargingDatas!.length; i++) { - if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn) { + if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { data.ChargingDatas![i]!.quota = event.target.value; setData({ ...data }); } @@ -987,9 +1105,10 @@ export default function SubscriberCreate() { event: React.ChangeEvent, dnn: string, flowKey: string, + qfi: number ): void => { for (let i = 0; i < data.ChargingDatas!.length; i++) { - if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn) { + if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn && data.QosFlows![i].qfi === qfi) { data.ChargingDatas![i]!.unitCost = event.target.value; setData({ ...data }); } @@ -1016,11 +1135,11 @@ export default function SubscriberCreate() { setData({ ...data }); }; - const qosFlow = (flowKey: string, dnn: string, qfi: number | undefined): QosFlows | undefined => { + const qosFlow = (sstSd: string, dnn: string, qfi: number | undefined): QosFlows | undefined => { if (data.QosFlows !== undefined) { for (let i = 0; i < data.QosFlows?.length; i++) { const qos = data.QosFlows![i]; - if (qos.snssai === flowKey && qos.dnn === dnn && qos.qfi == qfi) { + if (qos.snssai === sstSd && qos.dnn === dnn && qos.qfi == qfi) { return qos; } } @@ -1029,77 +1148,76 @@ export default function SubscriberCreate() { const chargingConfig = (flow: any, dnn: string, snssai: Nssai) => { const flowKey = toHex(snssai.sst) + snssai.sd; - if (data.ChargingDatas !== undefined) { - for (let i = 0; i < data.ChargingDatas!.length; i++) { - const chargingData = data.ChargingDatas![i] - if (chargingData.snssai === flowKey && chargingData.dnn === dnn) { - return ( - - - -

Charging Config

- + for (let i = 0; i < data.ChargingDatas!.length; i++) { + const chargingData = data.ChargingDatas![i] + if (chargingData.snssai === flowKey && chargingData.dnn === dnn && chargingData.qfi === flow.qfi) { + return ( + + + +

Charging Config

 - - - - - Charging Method - - - - - - - handleChangeChargingFilter(ev, dnn, flowKey)} - /> - - - - - - handleChangeChargingQuota(ev, dnn, flowKey)} - /> - - - - - +
+ + + + Charging Method +
- - ) - } + value={chargingData.chargingMethod} + onChange={(ev) => handleChangeChargingMethod(ev, dnn, flowKey, flow.qfi!)} + > + Offline + Online + + + + + {/* + + + handleChangeChargingFilter(ev, dnn, flowKey, flow.qfi!)} + /> + + + */} + + + handleChangeChargingQuota(ev, dnn, flowKey, flow.qfi!)} + /> + + + + + handleChangeChargingUnitCost(ev, dnn, flowKey, flow.qfi!)} + /> + + + + + ) } } }; @@ -1112,10 +1230,10 @@ export default function SubscriberCreate() { .filter((flow) => flow.dnn === dnn && flow.snssai === flowKey) .map((flow) => (
- + -

Flow Rules

+

Flow Rules (QFI: {flow.qfi})

 @@ -1132,7 +1250,7 @@ export default function SubscriberCreate() { - + handleChangeFilter(ev, dnn, flowKey)} + onChange={(ev) => handleChangeFilter(ev, dnn, flowKey, flow.qfi!)} /> - + handleChangePrecedence(ev, dnn, flowKey)} + onChange={(ev) => handleChangePrecedence(ev, dnn, flowKey, flow.qfi!)} /> - + handleChange5QI(ev, dnn, flowKey)} + onChange={(ev) => handleChange5QI(ev, dnn, flowKey, flow.qfi!)} /> - + handleChangeUplinkGBR(ev, dnn, flowKey)} + onChange={(ev) => handleChangeUplinkGBR(ev, dnn, flowKey, flow.qfi!)} /> - + handleChangeDownlinkGBR(ev, dnn, flowKey)} + onChange={(ev) => handleChangeDownlinkGBR(ev, dnn, flowKey, flow.qfi!)} /> - + handleChangeUplinkMBR(ev, dnn, flowKey)} + onChange={(ev) => handleChangeUplinkMBR(ev, dnn, flowKey, flow.qfi!)} /> - + handleChangeDownlinkMBR(ev, dnn, flowKey)} + onChange={(ev) => handleChangeDownlinkMBR(ev, dnn, flowKey, flow.qfi!)} /> @@ -1344,7 +1462,7 @@ export default function SubscriberCreate() {
- + - + - + - + - + - + @@ -1435,7 +1553,7 @@ export default function SubscriberCreate() { - + - + @@ -1469,7 +1587,7 @@ export default function SubscriberCreate() { - + - + Subscribed UE AMBR
- + - +
- + - + - + Default S-NSSAI @@ -1628,7 +1746,7 @@ export default function SubscriberCreate() { - + - + - + onFlowRuleAdd(dnn, row.singleNssai!)} + variant="outlined" + onClick={() => onFlowRulesAdd(dnn, row.singleNssai!)} sx={{ m: 0 }} > - +FLOWRULE + +FLOW RULE {upSecurity(row.dnnConfigurations![dnn])} @@ -1723,9 +1841,16 @@ export default function SubscriberCreate() {
+ { + isNewSubscriber ? + : + + } ); diff --git a/frontend/src/pages/SubscriberList.tsx b/frontend/src/pages/SubscriberList.tsx index df2913cb..b6bc6c85 100644 --- a/frontend/src/pages/SubscriberList.tsx +++ b/frontend/src/pages/SubscriberList.tsx @@ -87,7 +87,7 @@ export default function SubscriberList() { }; const onCreate = () => { - navigation("/subscriber/create"); + navigation("/subscriber/create/0/0"); }; const handleModify = (subscriber: Subscriber) => { diff --git a/frontend/src/pages/SubscriberRead.tsx b/frontend/src/pages/SubscriberRead.tsx index 9008afb0..e2bf6062 100644 --- a/frontend/src/pages/SubscriberRead.tsx +++ b/frontend/src/pages/SubscriberRead.tsx @@ -46,7 +46,7 @@ export default function SubscriberRead() { }, [id]); const handleEdit = () => { - navigation("/subscriber/update/" + id + "/" + plmn); + navigation("/subscriber/create/" + id + "/" + plmn); }; const isDefaultNssai = (nssai: Nssai | undefined) => { @@ -118,11 +118,11 @@ export default function SubscriberRead() { return ""; }; - const qosFlow = (flowKey: string, dnn: string): QosFlows | undefined => { + const qosFlow = (sstSd: string, dnn: string, qfi: number | undefined): QosFlows | undefined => { if (data.QosFlows !== undefined) { for (let i = 0; i < data.QosFlows?.length; i++) { const qos = data.QosFlows![i]; - if (qos.snssai === flowKey && qos.dnn === dnn) { + if (qos.snssai === sstSd && qos.dnn === dnn && qos.qfi === qfi) { return qos; } } @@ -131,107 +131,110 @@ export default function SubscriberRead() { const chargingConfig = (flow: any, dnn: string, snssai: Nssai) => { const flowKey = toHex(snssai.sst) + snssai.sd; - if (data.ChargingDatas !== undefined) { - for (let i = 0; i < data.ChargingDatas!.length; i++) { - const chargingData = data.ChargingDatas![i] - if (chargingData.snssai === flowKey && chargingData.dnn === dnn) { - return ( - - - -

Charging Config

- + for (let i = 0; i < data.ChargingDatas!.length; i++) { + const chargingData = data.ChargingDatas![i] + console.log("data: ", data) + console.log("chargingData.qfi: ", chargingData.qfi) + if (chargingData.snssai === flowKey && chargingData.dnn === dnn && chargingData.qfi === flow.qfi) { + return ( + + + +

Charging Config

 -
- - Charging Method - {chargingData.chargingMethod} - - - Filter - {chargingData.filter} - - - Quota - {chargingData.quota} - - - Unit Cost - {chargingData.unitCost} - -
- - ) - } + + + + Charging Method + {chargingData.chargingMethod} + + {/* + + Filter + {chargingData.filter} + + */} + + Quota + {chargingData.quota} + + + Unit Cost + {chargingData.unitCost} + +
+ + ) } } + }; const flowRule = (dnn: string, snssai: Nssai) => { + console.log("in flowRule") + console.log(data.FlowRules) const flowKey = toHex(snssai.sst) + snssai.sd; if (data.FlowRules !== undefined) { - for (let i = 0; i < data.FlowRules?.length; i++) { - const flow = data.FlowRules![i]; - if (flow.snssai === flowKey && flow.dnn === dnn) { - const qos = qosFlow(flowKey, dnn); - return ( -
- -

Flow Rules

- - - - - IP Filter - {flow.filter} - - - - - Precedence - {flow.precedence} - - - - - 5QI - {flow.qfi} - - - - - Uplink GBR - {qos!.gbrUL} - - - - - Downlink GBR - {qos!.gbrDL} - - - - - Uplink MBR - {qos!.mbrUL} - - - - - Downlink MBR - {qos!.mbrDL} - - - - {chargingConfig(flow, dnn, snssai)} - -
- - -
- ); - } - } + return ( + data.FlowRules + .filter((flow) => flow.dnn === dnn && flow.snssai === flowKey) + .map((flow) => +
+ +

Flow Rules

+ + + + + IP Filter + {flow.filter} + + + + + Precedence + {flow.precedence} + + + + + 5QI + {flow.qfi} + + + + + Uplink GBR + {qosFlow(flowKey, dnn, flow.qfi!)?.gbrUL} + + + + + Downlink GBR + {qosFlow(flowKey, dnn, flow.qfi!)?.gbrDL} + + + + + Uplink MBR + {qosFlow(flowKey, dnn, flow.qfi!)?.mbrUL} + + + + + Downlink MBR + {qosFlow(flowKey, dnn, flow.qfi!)?.mbrDL} + + + + {chargingConfig(flow, dnn, snssai!)} + +
+ + +
+ ) + ) } return
; }; diff --git a/frontend/src/pages/SubscriberUpdate.tsx b/frontend/src/pages/SubscriberUpdate.tsx deleted file mode 100644 index ae69cd14..00000000 --- a/frontend/src/pages/SubscriberUpdate.tsx +++ /dev/null @@ -1,1491 +0,0 @@ -import React from "react"; -import { useState, useEffect } from "react"; -import { useNavigate, useParams } from "react-router-dom"; - -import axios from "../axios"; -import { - Subscription, - Nssai, - DnnConfiguration, - AccessAndMobilitySubscriptionData, - FlowRules, - QosFlows, -} from "../api/api"; - -import Dashboard from "../Dashboard"; -import { - Button, - Box, - Card, - Checkbox, - FormControl, - Grid, - InputLabel, - MenuItem, - Select, - SelectChangeEvent, - Table, - TableBody, - TableCell, - TableRow, - TextField, -} from "@mui/material"; - -export default function SubscriberUpdate() { - const { id, plmn } = useParams<{ - id: string; - plmn: string; - }>(); - const navigation = useNavigate(); - - const [data, setData] = useState({ - AuthenticationSubscription: { - authenticationMethod: "5G_AKA", - }, - }); - const [opcType, setOpcType] = useState("OPc"); - const [opcValue, setOpcValue] = useState("8e27b6af0e692e750f32667a3b14605d"); - const [dnnName, setDnnName] = useState([]); - - function toHex(v: number | undefined): string { - return ("00" + v?.toString(16).toUpperCase()).substr(-2); - }; - - useEffect(() => { - axios.get("/api/subscriber/" + id + "/" + plmn).then((res) => { - setData(res.data); - }); - }, [id]); - - const nssai2KeyString = (nssai: Nssai) => { - return toHex(nssai.sst) + nssai.sd; - }; - - const onUpdate = () => { - data.SmfSelectionSubscriptionData = { - subscribedSnssaiInfos: {}, - }; - data.SmPolicyData = { - smPolicySnssaiData: {}, - }; - for (let i = 0; i < data.SessionManagementSubscriptionData!.length; i++) { - const nssai = data.SessionManagementSubscriptionData![i]; - const key = nssai2KeyString(nssai.singleNssai!); - if (nssai.dnnConfigurations !== undefined) { - Object.keys(nssai.dnnConfigurations!).map((dnn) => { - if (data.SmfSelectionSubscriptionData!.subscribedSnssaiInfos![key] === undefined) { - data.SmfSelectionSubscriptionData!.subscribedSnssaiInfos![key] = { - dnnInfos: [{ dnn: dnn }], - }; - } else { - data.SmfSelectionSubscriptionData!.subscribedSnssaiInfos![key].dnnInfos!.push({ - dnn: dnn, - }); - } - if (data.SmPolicyData!.smPolicySnssaiData![key] === undefined) { - data.SmPolicyData!.smPolicySnssaiData![key] = { - snssai: nssai.singleNssai, - smPolicyDnnData: {}, - }; - } - data.SmPolicyData!.smPolicySnssaiData![key].smPolicyDnnData![dnn] = { - dnn: dnn, - }; - }); - } - } - axios - .put("/api/subscriber/" + data.ueId + "/" + data.plmnID, data) - .then((res) => { - navigation("/subscriber/" + data.ueId + "/" + data.plmnID); - }) - .catch((err) => { - if (err.response) { - if (err.response.data.cause) { - alert(err.response.data.cause); - } else { - alert(err.response.data); - } - } else { - alert(err.message); - } - }); - }; - - const onSnssai = () => { - if ( - data.SessionManagementSubscriptionData === undefined || - data.SessionManagementSubscriptionData!.length === 0 - ) { - data.SessionManagementSubscriptionData = [ - { - singleNssai: { - sst: 1, - sd: "010203", - }, - dnnConfigurations: {}, - }, - ]; - setData({ ...data }); - } else { - data.SessionManagementSubscriptionData.push({ - singleNssai: {}, - dnnConfigurations: {}, - }); - setData({ ...data }); - } - }; - - const onSnssaiDelete = (index: number) => { - if (data.SessionManagementSubscriptionData !== undefined) { - data.SessionManagementSubscriptionData.splice(index, 1); - setData({ ...data }); - } - }; - - const onDnn = (index: number) => { - if (data.SessionManagementSubscriptionData !== undefined) { - const name = dnnName[index]; - if (name === undefined || name === "") { - return; - } - const session = data.SessionManagementSubscriptionData![index]; - session.dnnConfigurations![name] = { - pduSessionTypes: { - defaultSessionType: "IPV4", - allowedSessionTypes: ["IPV4"], - }, - sscModes: { - defaultSscMode: "SSC_MODE_1", - allowedSscModes: ["SSC_MODE_2", "SSC_MODE_3"], - }, - "5gQosProfile": { - "5qi": 9, - arp: { - priorityLevel: 8, - preemptCap: "", - preemptVuln: "", - }, - priorityLevel: 8, - }, - sessionAmbr: {}, - }; - setData({ ...data }); - dnnName[index] = ""; - setDnnName({ ...dnnName }); - } - }; - - const onDnnDelete = (index: number, dnn: string) => { - if (data.SessionManagementSubscriptionData !== undefined) { - delete data.SessionManagementSubscriptionData![index].dnnConfigurations![dnn]; - setData({ ...data }); - } - }; - - const onFlowRules = (dnn: string, flowKey: string) => { - const flow: FlowRules = { - dnn: dnn, - snssai: flowKey, - filter: "permit out ip from 10.20.30.40 to 50.60.70.80", - precedence: 128, - qfi: 9, - }; - const qos: QosFlows = { - dnn: dnn, - snssai: flowKey, - qfi: 9, - "5qi": 9, - gbrUL: "100 Mbps", - gbrDL: "200 Mbps", - mbrUL: "100 Mbps", - mbrDL: "200 Mbps", - }; - if (data.FlowRules === undefined) { - data.FlowRules = [flow]; - } else { - data.FlowRules.push(flow); - } - if (data.QosFlows === undefined) { - data.QosFlows = [qos]; - } else { - data.QosFlows.push(qos); - } - setData({ ...data }); - }; - - const onFlowRulesDelete = (dnn: string, flowKey: string) => { - if (data.FlowRules !== undefined) { - for (let i = 0; i < data.FlowRules!.length; i++) { - if (data.FlowRules![i].dnn === dnn && data.FlowRules![i].snssai === flowKey) { - data.FlowRules!.splice(i, 1); - setData({ ...data }); - } - } - } - }; - - const onUpSecurity = (dnn: DnnConfiguration | undefined) => { - if (dnn !== undefined) { - dnn.upSecurity = {}; - } - setData({ ...data }); - }; - - const onUpSecurityDelete = (dnn: DnnConfiguration | undefined) => { - if (dnn !== undefined) { - dnn.upSecurity = undefined; - } - setData({ ...data }); - }; - - const isDefaultNssai = (nssai: Nssai | undefined) => { - if (nssai === undefined || data.AccessAndMobilitySubscriptionData === undefined) { - return false; - } else { - for ( - let i = 0; - i < data.AccessAndMobilitySubscriptionData!.nssai!.defaultSingleNssais!.length; - i++ - ) { - const defaultNssai = data.AccessAndMobilitySubscriptionData!.nssai!.defaultSingleNssais![i]; - if (defaultNssai.sd === nssai.sd && defaultNssai.sst === nssai.sst) { - return true; - } - } - return false; - } - }; - - const imsiValue = (imsi: string | undefined) => { - if (imsi === undefined) { - return ""; - } else { - return imsi.replace("imsi-", ""); - } - }; - - const msisdnValue = (subData: AccessAndMobilitySubscriptionData | undefined) => { - if (subData === undefined) { - return ""; - } else { - if (subData.gpsis !== undefined && subData.gpsis!.length !== 0) { - return subData.gpsis[0].replace("msisdn-", ""); - } else { - return ""; - } - } - }; - - const handleChangePlmnId = ( - event: React.ChangeEvent, - ): void => { - setData({ ...data, plmnID: event.target.value }); - }; - - const handleChangeUeId = ( - event: React.ChangeEvent, - ): void => { - setData({ ...data, ueId: "imsi-" + event.target.value }); - }; - - const handleChangeMsisdn = ( - event: React.ChangeEvent, - ): void => { - setData({ - ...data, - AccessAndMobilitySubscriptionData: { - ...data.AccessAndMobilitySubscriptionData, - gpsis: ["msisdn-" + event.target.value], - }, - }); - }; - - const handleChangeAuthenticationManagementField = ( - event: React.ChangeEvent, - ): void => { - setData({ - ...data, - AuthenticationSubscription: { - ...data.AuthenticationSubscription, - authenticationManagementField: event.target.value, - }, - }); - }; - - const handleChangeAuthenticationMethod = (event: SelectChangeEvent): void => { - setData({ - ...data, - AuthenticationSubscription: { - ...data.AuthenticationSubscription, - authenticationMethod: event.target.value, - }, - }); - }; - - const handleChangeK = ( - event: React.ChangeEvent, - ): void => { - setData({ - ...data, - AuthenticationSubscription: { - ...data.AuthenticationSubscription, - permanentKey: { - permanentKeyValue: event.target.value, - }, - }, - }); - }; - - const handleChangeOperatorCodeType = (event: SelectChangeEvent): void => { - if (event.target.value === "OP") { - setOpcType("OP"); - const tmp = { - ...data, - AuthenticationSubscription: { - ...data.AuthenticationSubscription, - milenage: { - op: { - opValue: opcValue, - }, - }, - opc: { - opcValue: "", - }, - }, - }; - setData(tmp); - } else { - setOpcType("OPc"); - const tmp = { - ...data, - AuthenticationSubscription: { - ...data.AuthenticationSubscription, - milenage: { - op: { - opValue: "", - }, - }, - opc: { - opcValue: opcValue, - }, - }, - }; - setData(tmp); - } - }; - - const handleChangeOperatorCodeValue = ( - event: React.ChangeEvent, - ): void => { - setOpcValue(event.target.value); - const auth = data.AuthenticationSubscription; - if (auth !== undefined) { - if (opcType === "OP") { - const tmp = { - ...data, - AuthenticationSubscription: { - ...data.AuthenticationSubscription, - milenage: { - op: { - opValue: event.target.value, - }, - }, - opc: { - opcValue: "", - }, - }, - }; - setData(tmp); - } else { - const tmp = { - ...data, - AuthenticationSubscription: { - ...data.AuthenticationSubscription, - milenage: { - op: { - opValue: "", - }, - }, - opc: { - opcValue: event.target.value, - }, - }, - }; - setData(tmp); - } - } - }; - - const handleChangeSQN = ( - event: React.ChangeEvent, - ): void => { - setData({ - ...data, - AuthenticationSubscription: { - ...data.AuthenticationSubscription, - sequenceNumber: event.target.value, - }, - }); - }; - - const handleChangeSubAmbrUplink = ( - event: React.ChangeEvent, - ): void => { - setData({ - ...data, - AccessAndMobilitySubscriptionData: { - ...data.AccessAndMobilitySubscriptionData, - subscribedUeAmbr: { - ...data.AccessAndMobilitySubscriptionData?.subscribedUeAmbr, - uplink: event.target.value, - }, - }, - }); - }; - - const handleChangeSubAmbrDownlink = ( - event: React.ChangeEvent, - ): void => { - setData({ - ...data, - AccessAndMobilitySubscriptionData: { - ...data.AccessAndMobilitySubscriptionData, - subscribedUeAmbr: { - ...data.AccessAndMobilitySubscriptionData?.subscribedUeAmbr, - downlink: event.target.value, - }, - }, - }); - }; - - const handleChangeSST = ( - event: React.ChangeEvent, - index: number, - ): void => { - if (event.target.value === "") { - data.SessionManagementSubscriptionData![index].singleNssai!.sst = undefined; - } else { - data.SessionManagementSubscriptionData![index].singleNssai!.sst! = Number(event.target.value); - } - setData({ ...data }); - }; - - const handleChangeSD = ( - event: React.ChangeEvent, - index: number, - ): void => { - data.SessionManagementSubscriptionData![index].singleNssai!.sd! = event.target.value; - setData({ ...data }); - }; - - const handleChangeDefaultSnssai = ( - _event: React.ChangeEvent, - nssai: Nssai | undefined, - ) => { - if (nssai === undefined) { - return; - } - let isDefault = false; - let def = undefined; - if (data.AccessAndMobilitySubscriptionData!.nssai!.defaultSingleNssais !== undefined) { - def = data.AccessAndMobilitySubscriptionData!.nssai!.defaultSingleNssais!; - for (let i = 0; i < def.length; i++) { - if (def[i].sd === nssai.sd && def[i].sst === nssai.sst) { - def.splice(i, 1); - isDefault = true; - } - } - } - let single = undefined; - if (data.AccessAndMobilitySubscriptionData!.nssai!.singleNssais !== undefined) { - single = data.AccessAndMobilitySubscriptionData!.nssai!.singleNssais!; - for (let i = 0; i < single.length; i++) { - if (single[i].sd === nssai.sd && single[i].sst === nssai.sst) { - single.splice(i, 1); - } - } - } - if (isDefault) { - if (single !== undefined) { - single.push(nssai); - } - } else { - if (def !== undefined) { - def.push(nssai); - } - } - data.AccessAndMobilitySubscriptionData!.nssai!.defaultSingleNssais = def; - data.AccessAndMobilitySubscriptionData!.nssai!.singleNssais = single; - setData({ ...data }); - }; - - const dnnValue = (index: number) => { - return dnnName[index]; - }; - - const handleChangeDNN = ( - event: React.ChangeEvent, - index: number, - ): void => { - dnnName[index] = event.target.value; - setDnnName({ ...dnnName }); - }; - - const handleChangeUplinkAMBR = ( - event: React.ChangeEvent, - index: number, - dnn: string, - ): void => { - data.SessionManagementSubscriptionData![index].dnnConfigurations![dnn].sessionAmbr!.uplink = - event.target.value; - setData({ ...data }); - }; - - const handleChangeDownlinkAMBR = ( - event: React.ChangeEvent, - index: number, - dnn: string, - ): void => { - data.SessionManagementSubscriptionData![index].dnnConfigurations![dnn].sessionAmbr!.downlink = - event.target.value; - setData({ ...data }); - }; - - const handleChangeDefault5QI = ( - event: React.ChangeEvent, - index: number, - dnn: string, - ): void => { - if (event.target.value === "") { - data.SessionManagementSubscriptionData![index].dnnConfigurations![dnn]["5gQosProfile"]![ - "5qi" - ] = undefined; - } else { - data.SessionManagementSubscriptionData![index].dnnConfigurations![dnn]["5gQosProfile"]![ - "5qi" - ] = Number(event.target.value); - } - setData({ ...data }); - }; - - const handleChangeFilter = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - if (data.FlowRules !== undefined) { - for (let i = 0; i < data.FlowRules!.length; i++) { - if (data.FlowRules![i].snssai === flowKey && data.FlowRules![i].dnn === dnn) { - data.FlowRules![i].filter = event.target.value; - setData({ ...data }); - } - } - } - }; - - const handleChangePrecedence = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - if (data.FlowRules !== undefined) { - for (let i = 0; i < data.FlowRules!.length; i++) { - if (data.FlowRules![i].snssai === flowKey && data.FlowRules![i].dnn === dnn) { - if (event.target.value == "") { - data.FlowRules![i].precedence = undefined; - } else { - data.FlowRules![i].precedence = Number(event.target.value); - } - setData({ ...data }); - } - } - } - }; - - const handleChange5QI = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - if (data.FlowRules !== undefined) { - for (let i = 0; i < data.FlowRules!.length; i++) { - if (data.FlowRules![i].snssai === flowKey && data.FlowRules![i].dnn === dnn) { - if (event.target.value == "") { - data.FlowRules![i].qfi = undefined; - } else { - data.FlowRules![i].qfi = Number(event.target.value); - } - setData({ ...data }); - } - } - } - if (data.QosFlows !== undefined) { - for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { - if (event.target.value == "") { - data.QosFlows![i].qfi = undefined; - data.QosFlows![i]["5qi"] = undefined; - } else { - data.QosFlows![i].qfi = Number(event.target.value); - data.QosFlows![i]["5qi"] = Number(event.target.value); - } - setData({ ...data }); - } - } - } - }; - - const handleChangeUplinkGBR = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - if (data.QosFlows !== undefined) { - for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { - data.QosFlows![i].gbrUL = event.target.value; - setData({ ...data }); - } - } - } - }; - - const handleChangeDownlinkGBR = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - if (data.QosFlows !== undefined) { - for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { - data.QosFlows![i].gbrDL = event.target.value; - setData({ ...data }); - } - } - } - }; - - const handleChangeUplinkMBR = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - if (data.QosFlows !== undefined) { - for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { - data.QosFlows![i].mbrUL = event.target.value; - setData({ ...data }); - } - } - } - }; - - const handleChangeDownlinkMBR = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - if (data.QosFlows !== undefined) { - for (let i = 0; i < data.QosFlows!.length; i++) { - if (data.QosFlows![i].snssai === flowKey && data.QosFlows![i].dnn === dnn) { - data.QosFlows![i].mbrDL = event.target.value; - setData({ ...data }); - } - } - } - }; - - const handleChangeChargingMethod = ( - event: SelectChangeEvent, - dnn: string, - flowKey: string, - ): void => { - for (let i = 0; i < data.ChargingDatas!.length; i++) { - if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn) { - data.ChargingDatas![i]!.chargingMethod = event.target.value; - setData({ ...data }); - } - } - }; - - const handleChangeChargingFilter = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - for (let i = 0; i < data.ChargingDatas!.length; i++) { - if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn) { - data.ChargingDatas![i]!.filter = event.target.value; - setData({ ...data }); - } - } - }; - - const handleChangeChargingQuota = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - for (let i = 0; i < data.ChargingDatas!.length; i++) { - if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn) { - data.ChargingDatas![i]!.quota = event.target.value; - setData({ ...data }); - } - } - }; - - const handleChangeChargingUnitCost = ( - event: React.ChangeEvent, - dnn: string, - flowKey: string, - ): void => { - for (let i = 0; i < data.ChargingDatas!.length; i++) { - if (data.ChargingDatas![i].snssai === flowKey && data.ChargingDatas![i].dnn === dnn) { - data.ChargingDatas![i]!.unitCost = event.target.value; - setData({ ...data }); - } - } - }; - - const handleChangeUpIntegrity = ( - event: SelectChangeEvent, - dnn: DnnConfiguration, - ): void => { - if (dnn.upSecurity !== undefined) { - dnn.upSecurity!.upIntegr = event.target.value; - } - setData({ ...data }); - }; - - const handleChangeUpConfidentiality = ( - event: SelectChangeEvent, - dnn: DnnConfiguration, - ): void => { - if (dnn.upSecurity !== undefined) { - dnn.upSecurity!.upConfid = event.target.value; - } - setData({ ...data }); - }; - - const qosFlow = (flowKey: string, dnn: string): QosFlows|undefined => { - if (data.QosFlows !== undefined) { - for (let i = 0; i < data.QosFlows?.length; i++) { - const qos = data.QosFlows![i]; - if (qos.snssai === flowKey && qos.dnn === dnn) { - return qos; - } - } - } - } - - const chargingConfig = (flow: any, dnn: string, snssai: Nssai) => { - const flowKey = toHex(snssai.sst) + snssai.sd; - if (data.ChargingDatas !== undefined) { - for (let i = 0; i < data.ChargingDatas!.length; i++) { - const chargingData = data.ChargingDatas![i] - if (chargingData.snssai === flowKey && chargingData.dnn === dnn) { - return ( - - - -

Charging Config

- - - - - - - Charging Method - - - - - - - handleChangeChargingFilter(ev, dnn, flowKey)} - /> - - - - - - handleChangeChargingQuota(ev, dnn, flowKey)} - /> - - - - - handleChangeChargingUnitCost(ev, dnn, flowKey)} - /> - - -
- - ) - } - } - } - }; - - const flowRule = (dnn: string, snssai: Nssai) => { - const flowKey = toHex(snssai.sst) + snssai.sd; - if (data.FlowRules !== undefined) { - for (let i = 0; i < data.FlowRules?.length; i++) { - const flow = data.FlowRules![i]; - if (flow.snssai === flowKey && flow.dnn === dnn) { - const qos = qosFlow(flowKey, dnn); - return ( -
- - - -

Flow Rules

- - - - - - - - - - - - - handleChangeFilter(ev, dnn, flowKey)} - /> - - - - - - - handleChangePrecedence(ev, dnn, flowKey)} - /> - - - - - - - handleChange5QI(ev, dnn, flowKey)} - /> - - - - - - - handleChangeUplinkGBR(ev, dnn, flowKey)} - /> - - - - - - - handleChangeDownlinkGBR(ev, dnn, flowKey)} - /> - - - - - - - handleChangeUplinkMBR(ev, dnn, flowKey)} - /> - - - - - - - handleChangeDownlinkMBR(ev, dnn, flowKey)} - /> - - - - - {chargingConfig(flow, dnn, snssai)} - -
- - -
- ); - } - } - } - return ( -
- - - - - - - - -
-
- ); - }; - - const upSecurity = (dnn: DnnConfiguration | undefined) => { - if (dnn !== undefined && dnn!.upSecurity !== undefined) { - const security = dnn!.upSecurity!; - return ( -
- - - -

UP Security

- - - - - - - - - - - - - - Integrity of UP Security - - - - - - - - - - Confidentiality of UP Security - - - - - -
- - -
- ); - } else { - return ( -
- - - - - - - - -
-
- ); - } - }; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Authentication Method - - - - - - - - - - - - - - - - - Operator Code Type - - - - - - - - - - - - - - - - - - - -
- -

Subscribed UE AMBR

- - - - - - - - - - - - - - - - -
- - {data.SessionManagementSubscriptionData?.map((row, index) => ( -
- - -

S-NSSAI Configuragtion

- - - - - - - - - - - - - handleChangeSST(ev, index)} - /> - - - - - - - handleChangeSD(ev, index)} - /> - - - - - - Default S-NSSAI - - handleChangeDefaultSnssai(ev, row.singleNssai)} - /> - - - -
- {row.dnnConfigurations && - Object.keys(row.dnnConfigurations!).map((dnn) => ( -
- - - -

DNN Configurations

- - - - - - - - - - - - - {dnn} - - - - - - - handleChangeUplinkAMBR(ev, index, dnn)} - /> - - - - - - - handleChangeDownlinkAMBR(ev, index, dnn)} - /> - - - - - - - handleChangeDefault5QI(ev, index, dnn)} - /> - - - -
- {flowRule(dnn, row.singleNssai!)} - {upSecurity(row.dnnConfigurations![dnn])} - - -
- ))} - - - - handleChangeDNN(ev, index)} - /> - - - - - - - - - -
- ))} -
- - - -
- - - - - ); -}