fix(nms): Initially load count of subscribers correctly

Fixes a bug where the number of subscribers shown in the KPI panel depends on the pagination of the subscriber table. Does not handle changes to the number without reload. Signed-off-by: Sebastian Thomas <sebastian.thomas@tngtech.com>
magma · Apr 5, 2022 · 51113e7 · 51113e7
1 parent 51f5c7b
commit 51113e7
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 2 deletions.
diff --git a/nms/packages/magmalte/app/components/context/SubscriberContext.js b/nms/packages/magmalte/app/components/context/SubscriberContext.js
@@ -43,6 +43,7 @@ export type SubscriberContextType = {
   forbiddenNetworkTypes: {[string]: core_network_types},
   metrics?: {[string]: Metrics},
   gwSubscriberMap: {[gateway_id]: Array<subscriber_id>},
+  totalCount: number,
   setState?: (
     key: string,
     val?: mutable_subscriber | mutable_subscribers,

diff --git a/nms/packages/magmalte/app/components/lte/LteContext.js b/nms/packages/magmalte/app/components/lte/LteContext.js
@@ -245,6 +245,7 @@ export function SubscriberContextProvider(props: Props) {
   const [sessionState, setSessionState] = useState({});
   const [subscriberMetrics, setSubscriberMetrics] = useState({});
   const [isLoading, setIsLoading] = useState(true);
+  const [totalCount, setTotalCount] = useState(0);
   const enqueueSnackbar = useEnqueueSnackbar();
   useEffect(() => {
     const fetchLteState = async () => {
@@ -257,6 +258,7 @@ export function SubscriberContextProvider(props: Props) {
         setForbiddenNetworkTypes,
         setSubscriberMetrics,
         setSessionState,
+        setTotalCount,
         enqueueSnackbar,
       }),
         setIsLoading(false);
@@ -275,6 +277,7 @@ export function SubscriberContextProvider(props: Props) {
         state: subscriberMap,
         metrics: subscriberMetrics,
         sessionState: sessionState,
+        totalCount: totalCount,
         gwSubscriberMap: getGatewaySubscriberMap(sessionState),
         setState: (
           key: subscriber_id,

diff --git a/nms/packages/magmalte/app/state/lte/SubscriberState.js b/nms/packages/magmalte/app/state/lte/SubscriberState.js
@@ -50,7 +50,8 @@ type InitSubscriberStateProps = {
   networkId: network_id,
   setSubscriberMap: ({[string]: subscriber}) => void,
   setSessionState: ({[string]: subscriber_state}) => void,
-  setSubscriberMetrics?: ({[string]: Metrics}) => void,
+  setSubscriberMetrics: ({[string]: Metrics}) => void,
+  setTotalCount: number => void,
   enqueueSnackbar?: (
     msg: string,
     cfg: EnqueueSnackbarOptions,
@@ -156,6 +157,7 @@ export default async function InitSubscriberState(
     setSubscriberMap,
     setSubscriberMetrics,
     setSessionState,
+    setTotalCount,
     enqueueSnackbar,
   } = props;
   const subscriberResponse = await FetchSubscribers({
@@ -164,6 +166,7 @@ export default async function InitSubscriberState(
   });
   if (subscriberResponse) {
     setSubscriberMap(subscriberResponse.subscribers);
+    setTotalCount(subscriberResponse.total_count);
   }
 
   const state = await FetchSubscriberState({networkId, enqueueSnackbar});

diff --git a/nms/packages/magmalte/app/views/network/NetworkKPIs.js b/nms/packages/magmalte/app/views/network/NetworkKPIs.js
@@ -52,7 +52,7 @@ export default function NetworkKPI() {
       {
         icon: PeopleIcon,
         category: 'Subscribers',
-        value: Object.keys(subscriberCtx.state).length,
+        value: subscriberCtx.totalCount,
       },
       {
         icon: LibraryBooksIcon,

diff --git a/nms/packages/magmalte/app/views/network/__tests__/NetworkTest.js b/nms/packages/magmalte/app/views/network/__tests__/NetworkTest.js
@@ -317,6 +317,7 @@ describe('<NetworkDashboard />', () => {
     const subscriberCtx = {
       state: subscribers,
       forbidden_network_types: subscribers,
+      totalCount: 1,
       forbiddenNetworkTypes: {},
       gwSubscriberMap: {},
       sessionState: {},

diff --git a/nms/packages/magmalte/app/views/subscriber/__tests__/SubscriberAddEditTest.js b/nms/packages/magmalte/app/views/subscriber/__tests__/SubscriberAddEditTest.js
@@ -237,6 +237,7 @@ describe('<AddSubscriberButton />', () => {
       forbiddenNetworkTypes: forbiddenNetworkTypes,
       gwSubscriberMap: {},
       sessionState: sessionState,
+      totalCount: 2,
       setState: async (key, value?) =>
         setSubscriberState({
           networkId: 'test',
@@ -350,6 +351,7 @@ describe('<AddSubscriberButton />', () => {
                       gwSubscriberMap: {},
                       forbiddenNetworkTypes: forbiddenNetworkTypes,
                       sessionState: sessionState,
+                      totalCount: 1,
                       setState: (key, value?) =>
                         setSubscriberState({
                           networkId: 'test',

diff --git a/nms/packages/magmalte/app/views/subscriber/__tests__/SubscriberTest.js b/nms/packages/magmalte/app/views/subscriber/__tests__/SubscriberTest.js
@@ -104,6 +104,7 @@ describe('<SubscriberDashboard />', () => {
       forbiddenNetworkTypes: {},
       gwSubscriberMap: {},
       sessionState: {},
+      totalCount: 2,
     };
 
     return (