diff --git a/frontend/src/pages/Component/ChargingCfg.tsx b/frontend/src/pages/Component/ChargingCfg.tsx new file mode 100644 index 0000000..397443a --- /dev/null +++ b/frontend/src/pages/Component/ChargingCfg.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { + Box, + Grid, + Table, + TableBody, + TableCell, + TableRow, +} from "@mui/material"; +import { ChargingData } from "../../api/api"; + +const ChargingCfg = ({ + chargingData, +}: { + chargingData: ChargingData; +}) => { + const isOnlineCharging = chargingData.chargingMethod === "Online"; + + return ( + + + +

Charging Config

+ + + + + + Charging Method + {chargingData.chargingMethod} + + + {isOnlineCharging && ( + + + Quota + {chargingData.quota} + + + )} + + + Unit Cost + {chargingData.unitCost} + + +
+ + ); +}; + +export default ChargingCfg; \ No newline at end of file diff --git a/frontend/src/pages/Component/FlowRule.tsx b/frontend/src/pages/Component/FlowRule.tsx new file mode 100644 index 0000000..3e302f9 --- /dev/null +++ b/frontend/src/pages/Component/FlowRule.tsx @@ -0,0 +1,78 @@ +import React from "react"; +import { + Box, + Card, + Table, + TableBody, + TableRow, + TableCell, +} from "@mui/material"; +import { QosFlows, Nssai } from "../../api/api"; + +const FlowRule = ({ + dnn, + flow, + data, + chargingConfig, + qosFlow, +}: { + dnn: string; + flow: any; + data: any; + chargingConfig: (dnn: string, snssai: Nssai, filter: string | undefined) => JSX.Element | undefined; + qosFlow: (sstSd: string, dnn: string, qosRef: number | undefined) => QosFlows | undefined; +}) => { + const flowKey = toHex(flow.sst) + flow.sd; + + return ( +
+ +

Flow Rules

+ + + + + IP Filter + {flow.filter} + + + Precedence + {flow.precedence} + + + 5QI + {qosFlow(flowKey, dnn, flow.qosRef)?.["5qi"]} + + + Uplink GBR + {qosFlow(flowKey, dnn, flow.qosRef!)?.gbrUL} + + + Downlink GBR + {qosFlow(flowKey, dnn, flow.qosRef!)?.gbrDL} + + + Uplink MBR + {qosFlow(flowKey, dnn, flow.qosRef!)?.mbrUL} + + + Downlink MBR + {qosFlow(flowKey, dnn, flow.qosRef!)?.mbrDL} + + + Charging Characteristics + {chargingConfig(dnn, flow.snssai, flow.filter)} + + +
+ + +
+ ); +}; + +const toHex = (v: number | undefined): string => { + return ("00" + v?.toString(16).toUpperCase()).substr(-2); +}; + +export default FlowRule; diff --git a/frontend/src/pages/Component/UpSecurity.tsx b/frontend/src/pages/Component/UpSecurity.tsx new file mode 100644 index 0000000..f2fd42a --- /dev/null +++ b/frontend/src/pages/Component/UpSecurity.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import { + Box, + Card, + Table, + TableBody, + TableRow, + TableCell, +} from "@mui/material"; +import { DnnConfiguration } from "../../api/api"; + +const UpSecurity = ({ + dnn, +}: { + dnn: DnnConfiguration; +}) => { + if (dnn.upSecurity === undefined) { + return
; + } + + const security = dnn.upSecurity; + return ( +
+ +

UP Security

+ + + + + Integrity of UP Security + {security.upIntegr} + + + Confidentiality of UP Security + {security.upConfid} + + +
+ + +
+ ); +}; + +export default UpSecurity; \ No newline at end of file diff --git a/frontend/src/pages/ProfileRead.tsx b/frontend/src/pages/ProfileRead.tsx index afce3b6..308bbb4 100644 --- a/frontend/src/pages/ProfileRead.tsx +++ b/frontend/src/pages/ProfileRead.tsx @@ -9,6 +9,7 @@ import { QosFlows, DnnConfiguration } from "../api/api"; + import Dashboard from "../Dashboard"; import { Button, @@ -21,6 +22,9 @@ import { TableCell, TableRow, } from "@mui/material"; +import FlowRule from "./Component/FlowRule"; +import ChargingCfg from "./Component/ChargingCfg"; +import UpSecurity from "./Component/UpSecurity"; export default function ProfileRead() { const { profileName } = useParams<{ profileName: string }>(); @@ -78,44 +82,12 @@ export default function ProfileRead() { const chargingConfig = (dnn: string, snssai: Nssai, filter: string | undefined) => { const flowKey = toHex(snssai.sst) + snssai.sd; for (const chargingData of data?.ChargingDatas ?? []) { - const isOnlineCharging = chargingData.chargingMethod === "Online"; - if ( chargingData.snssai === flowKey && chargingData.dnn === dnn && chargingData.filter === filter ) { - return ( - - - -

Charging Config

- - - - - - Charging Method - {chargingData.chargingMethod} - - - {isOnlineCharging ? ( - - - Quota - {chargingData.quota} - - - ) : ( - <> - )} - - Unit Cost - {chargingData.unitCost} - -
- - ); + return ; } } }; @@ -127,63 +99,14 @@ export default function ProfileRead() { } return data.FlowRules.filter((flow) => flow.dnn === dnn && flow.snssai === flowKey).map( (flow) => ( -
- -

Flow Rules

- - - - - IP Filter - {flow.filter} - - - - - Precedence - {flow.precedence} - - - - - 5QI - {qosFlow(flowKey, dnn, flow.qosRef)?.["5qi"]} - - - - - Uplink GBR - {qosFlow(flowKey, dnn, flow.qosRef!)?.gbrUL} - - - - - Downlink GBR - {qosFlow(flowKey, dnn, flow.qosRef!)?.gbrDL} - - - - - Uplink MBR - {qosFlow(flowKey, dnn, flow.qosRef!)?.mbrUL} - - - - - Downlink MBR - {qosFlow(flowKey, dnn, flow.qosRef!)?.mbrDL} - - - - - Charging Characteristics - {chargingConfig(dnn, snssai!, flow.filter)} - - -
- - -
+ ), ); }; @@ -192,30 +115,7 @@ export default function ProfileRead() { if (dnn === undefined || dnn.upSecurity === undefined) { return
; } - const security = dnn!.upSecurity!; - return ( -
- -

UP Security

- - - - - Integrity of UP Security - {security.upIntegr} - - - - - Confidentiality of UP Security - {security.upConfid} - - -
- - -
- ); + return ; }; return ( diff --git a/frontend/src/pages/SubscriberRead.tsx b/frontend/src/pages/SubscriberRead.tsx index 74dad2f..e63ba18 100644 --- a/frontend/src/pages/SubscriberRead.tsx +++ b/frontend/src/pages/SubscriberRead.tsx @@ -24,7 +24,9 @@ import { TableCell, TableRow, } from "@mui/material"; - +import FlowRule from "./Component/FlowRule"; +import ChargingCfg from "./Component/ChargingCfg"; +import UpSecurity from "./Component/UpSecurity"; export default function SubscriberRead() { const { id, plmn } = useParams<{ id: string; @@ -132,43 +134,15 @@ export default function SubscriberRead() { } }; - const chargingConfig = (dnn: string | undefined, snssai: Nssai, filter: string | undefined) => { + const chargingConfig = (dnn: string, snssai: Nssai, filter: string | undefined) => { const flowKey = toHex(snssai.sst) + snssai.sd; for (const chargingData of data?.ChargingDatas ?? []) { - const isOnlineCharging = chargingData.chargingMethod === "Online"; - if ( chargingData.snssai === flowKey && chargingData.dnn === dnn && chargingData.filter === filter ) { - return ( - - - -

Charging Config

- - - - - Charging Method - {chargingData.chargingMethod} - - {isOnlineCharging ? ( - - Quota - {chargingData.quota} - - ) : ( - <> - )} - - Unit Cost - {chargingData.unitCost} - -
- - ); + return ; } } }; @@ -176,100 +150,28 @@ export default function SubscriberRead() { const flowRule = (dnn: string, snssai: Nssai) => { const flowKey = toHex(snssai.sst) + snssai.sd; if (data?.FlowRules === undefined) { - return
; + return
; } return data.FlowRules.filter((flow) => flow.dnn === dnn && flow.snssai === flowKey).map( - (flow) => ( -
- -

Flow Rules

- - - - - IP Filter - {flow.filter} - - - - - Precedence - {flow.precedence} - - - - - 5QI - {qosFlow(flowKey, dnn, flow.qosRef)?.["5qi"]} - - - - - Uplink GBR - {qosFlow(flowKey, dnn, flow.qosRef!)?.gbrUL} - - - - - Downlink GBR - {qosFlow(flowKey, dnn, flow.qosRef!)?.gbrDL} - - - - - Uplink MBR - {qosFlow(flowKey, dnn, flow.qosRef!)?.mbrUL} - - - - - Downlink MBR - {qosFlow(flowKey, dnn, flow.qosRef!)?.mbrDL} - - - - - Charging Characteristics - {chargingConfig(dnn, snssai!, flow.filter)} - - -
- - -
- ), + (flow) => ( + + ), ); -}; + }; -const upSecurity = (dnn: DnnConfiguration | undefined) => { + const upSecurity = (dnn: DnnConfiguration | undefined) => { if (dnn === undefined || dnn.upSecurity === undefined) { - return
; + return
; } - const security = dnn!.upSecurity!; - return ( -
- -

UP Security

- - - - - Integrity of UP Security - {security.upIntegr} - - - - - Confidentiality of UP Security - {security.upConfid} - - -
- - -
- ); -}; + return ; + }; return ( {}}>