Merge pull request #75 from andy89923/fix/charging

Fix: fix charging UI and bugs

frontend/src/pages/Charging/ChargingList.tsx

@@ -35,7 +35,13 @@ const ChargingList: React.FC<{
 
     return (
       <>
-        <TableCell>{chargingRecordMatch ? chargingRecordMatch.Usage : "-"}</TableCell>
+        <TableCell>
+          {chargingRecordMatch
+            ? props.chargingMethod === "Online"
+              ? chargingRecordMatch.QuotaLeft
+              : chargingRecordMatch.Usage
+            : "-"}
+        </TableCell>
         <TableCell>{chargingRecordMatch ? chargingRecordMatch.TotalVol : "-"}</TableCell>
         <TableCell>{chargingRecordMatch ? chargingRecordMatch.UlVol : "-"}</TableCell>
         <TableCell>{chargingRecordMatch ? chargingRecordMatch.DlVol : "-"}</TableCell>
@@ -73,7 +79,7 @@ const ChargingList: React.FC<{
   return (
     <Table>
       <TableHead>
-        <h3>Offline Charging</h3>
+        <h3>{props.chargingMethod} Charging</h3>
         <TableRow>
           {tableColumnNames.map((colName, idx) => {
             return <TableCell key={idx}>{colName}</TableCell>;

frontend/src/pages/SubscriberCreate.tsx

@@ -472,11 +472,21 @@ export default function SubscriberCreate() {
     }
   };
 
-  const onDnnDelete = (index: number, dnn: string) => {
+  const onDnnDelete = (index: number, dnn: string, slice: string) => {
     if (data.SessionManagementSubscriptionData !== undefined) {
       delete data.SessionManagementSubscriptionData![index].dnnConfigurations![dnn];
       setData({ ...data });
     }
+    // Remove all flow-based charging rule in this DNN
+    if (data.ChargingDatas !== undefined) {
+      for (let i = 0; i < data.ChargingDatas!.length; i++) {
+        if (data.ChargingDatas![i].dnn === dnn && data.ChargingDatas![i].snssai === slice) {
+          data.ChargingDatas!.splice(i, 1);
+          i--;
+        }
+      }
+    }
+    setData({ ...data });
   };
 
   const onFlowRulesDelete = (dnn: string, flowKey: string, qosRef: number | undefined) => {
@@ -504,6 +514,14 @@ export default function SubscriberCreate() {
         }
       }
     }
+    if (data.ChargingDatas !== undefined) {
+      for (let i = 0; i < data.ChargingDatas!.length; i++) {
+        if (data.ChargingDatas![i].qosRef === qosRef) {
+          data.ChargingDatas!.splice(i, 1);
+          i--;
+        }
+      }
+    }
     setData({ ...data });
   };
 
@@ -1722,7 +1740,13 @@ export default function SubscriberCreate() {
                           <Button
                             color="secondary"
                             variant="contained"
-                            onClick={() => onDnnDelete(index, dnn)}
+                            onClick={() =>
+                              onDnnDelete(
+                                index,
+                                dnn,
+                                toHex(row.singleNssai!.sst!) + row.singleNssai!.sd!,
+                              )
+                            }
                             sx={{
                               m: 2,
                               backgroundColor: "red",