Skip to content

Commit

Permalink
refactor: extract flowRule/upSecurity/chargingConfig as additional co…
Browse files Browse the repository at this point in the history 
…mponent, which used by profileRead and subscriberRead
  • Loading branch information
@Alonza0314
Alonza0314 committed Nov 2, 2024
1 parent fc72c1f commit 458309a
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 233 deletions.
52 changes: 52 additions & 0 deletions frontend/src/pages/Component/ChargingCfg.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Box sx={{ m: 2 }}>
<Grid container spacing={2}>
<Grid item xs={12}>
<h4>Charging Config</h4>
</Grid>
</Grid>
<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Charging Method</TableCell>
<TableCell>{chargingData.chargingMethod}</TableCell>
</TableRow>
</TableBody>
{isOnlineCharging && (
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}> Quota </TableCell>
<TableCell>{chargingData.quota}</TableCell>
</TableRow>
</TableBody>
)}
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}> Unit Cost </TableCell>
<TableCell>{chargingData.unitCost}</TableCell>
</TableRow>
</TableBody>
</Table>
</Box>
);
};

export default ChargingCfg;
78 changes: 78 additions & 0 deletions frontend/src/pages/Component/FlowRule.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div key={flow.snssai}>
<Box sx={{ m: 2 }}>
<h4>Flow Rules</h4>
<Card variant="outlined">
<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>IP Filter</TableCell>
<TableCell>{flow.filter}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ width: "40%" }}>Precedence</TableCell>
<TableCell>{flow.precedence}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ width: "40%" }}>5QI</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef)?.["5qi"]}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ width: "40%" }}>Uplink GBR</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef!)?.gbrUL}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ width: "40%" }}>Downlink GBR</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef!)?.gbrDL}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ width: "40%" }}>Uplink MBR</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef!)?.mbrUL}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ width: "40%" }}>Downlink MBR</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef!)?.mbrDL}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ width: "40%" }}>Charging Characteristics</TableCell>
<TableCell>{chargingConfig(dnn, flow.snssai, flow.filter)}</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
</Box>
</div>
);
};

const toHex = (v: number | undefined): string => {
return ("00" + v?.toString(16).toUpperCase()).substr(-2);
};

export default FlowRule;
45 changes: 45 additions & 0 deletions frontend/src/pages/Component/UpSecurity.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 <div></div>;
}

const security = dnn.upSecurity;
return (
<div key={security.upIntegr}>
<Box sx={{ m: 2 }}>
<h4>UP Security</h4>
<Card variant="outlined">
<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Integrity of UP Security</TableCell>
<TableCell>{security.upIntegr}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ width: "40%" }}>Confidentiality of UP Security</TableCell>
<TableCell>{security.upConfid}</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
</Box>
</div>
);
};

export default UpSecurity;
128 changes: 14 additions & 114 deletions frontend/src/pages/ProfileRead.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
QosFlows,
DnnConfiguration
} from "../api/api";

import Dashboard from "../Dashboard";
import {
Button,
Expand All @@ -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 }>();
Expand Down Expand Up @@ -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 (
<Box sx={{ m: 2 }}>
<Grid container spacing={2}>
<Grid item xs={12}>
<h4>Charging Config</h4>
</Grid>
</Grid>
<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Charging Method</TableCell>
<TableCell>{chargingData.chargingMethod}</TableCell>
</TableRow>
</TableBody>
{isOnlineCharging ? (
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}> Quota </TableCell>
<TableCell>{chargingData.quota}</TableCell>
</TableRow>
</TableBody>
) : (
<></>
)}
<TableBody>
<TableCell style={{ width: "40%" }}> Unit Cost </TableCell>
<TableCell>{chargingData.unitCost}</TableCell>
</TableBody>
</Table>
</Box>
);
return <ChargingCfg chargingData={chargingData} />;
}
}
};
Expand All @@ -127,63 +99,14 @@ export default function ProfileRead() {
}
return data.FlowRules.filter((flow) => flow.dnn === dnn && flow.snssai === flowKey).map(
(flow) => (
<div key={flow.snssai}>
<Box sx={{ m: 2 }}>
<h4>Flow Rules</h4>
<Card variant="outlined">
<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>IP Filter</TableCell>
<TableCell>{flow.filter}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Precedence</TableCell>
<TableCell>{flow.precedence}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>5QI</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef)?.["5qi"]}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Uplink GBR</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef!)?.gbrUL}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Downlink GBR</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef!)?.gbrDL}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Uplink MBR</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef!)?.mbrUL}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Downlink MBR</TableCell>
<TableCell>{qosFlow(flowKey, dnn, flow.qosRef!)?.mbrDL}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Charging Characteristics</TableCell>
<TableCell>{chargingConfig(dnn, snssai!, flow.filter)}</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
</Box>
</div>
<FlowRule
key={flow.snssai}
flow={flow}
dnn={dnn}
data={data}
chargingConfig={chargingConfig}
qosFlow={qosFlow}
/>
),
);
};
Expand All @@ -192,30 +115,7 @@ export default function ProfileRead() {
if (dnn === undefined || dnn.upSecurity === undefined) {
return <div></div>;
}
const security = dnn!.upSecurity!;
return (
<div key={security.upIntegr}>
<Box sx={{ m: 2 }}>
<h4>UP Security</h4>
<Card variant="outlined">
<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Integrity of UP Security</TableCell>
<TableCell>{security.upIntegr}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow>
<TableCell style={{ width: "40%" }}>Confidentiality of UP Security</TableCell>
<TableCell>{security.upConfid}</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
</Box>
</div>
);
return <UpSecurity dnn={dnn} />;
};

return (
Expand Down
Loading

0 comments on commit 458309a

Please sign in to comment.