fix(NET-1599): use network stats endpoit to get host count per net

gravitl · Sep 16, 2024 · 780ceeb · 780ceeb
1 parent c447497
commit 780ceeb
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 37 deletions.
diff --git a/src/constants/ApiRoutes.ts b/src/constants/ApiRoutes.ts
@@ -4,6 +4,7 @@ export class ApiRoutes {
   static EXTERNAL_CLIENTS = '/extclients';
   static HOSTS = '/hosts';
   static NETWORKS = '/networks';
+  static NETWORKS_STATS = '/v1/networks/stats';
   static DNS = '/dns';
   static DNS_ADMIN = '/dns/adm';
   static LOGIN = '/users/adm/authenticate';

diff --git a/src/models/Network.ts b/src/models/Network.ts
@@ -32,3 +32,7 @@ export type NetworkPayload = Modify<
     defaultudpholepunch: 'no' | 'yes';
   }
 >;
+
+export type NetworkStat = Network & { hosts: number };
+
+export type NetworkStatPayload = NetworkPayload & { hosts: number };
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
@@ -150,14 +150,15 @@ export default function DashboardPage(props: PageProps) {
     },
     {
       title: 'Hosts Count',
-      render(_, network) {
-        const nodeCount = store.nodes?.filter((node) => node.network === network.netid).length ?? 0;
-        return (
-          <div onClick={(ev) => ev.stopPropagation()}>
-            <Typography.Text>{nodeCount}</Typography.Text>
-          </div>
-        );
-      },
+      dataIndex: 'hosts',
+      // render(_, network) {
+      //   const nodeCount = store.nodes?.filter((node) => node.network === network.netid).length ?? 0;
+      //   return (
+      //     <div onClick={(ev) => ev.stopPropagation()}>
+      //       <Typography.Text>{nodeCount}</Typography.Text>
+      //     </div>
+      //   );
+      // },
     },
     {
       title: 'Network Last Modified',

diff --git a/src/pages/networks/NetworksPage.tsx b/src/pages/networks/NetworksPage.tsx
@@ -1,4 +1,4 @@
-import { Network } from '@/models/Network';
+import { Network, NetworkStat } from '@/models/Network';
 import { AppRoutes } from '@/routes';
 import { InfoCircleOutlined, PlusOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 import {
@@ -76,7 +76,7 @@ export default function NetworksPage(props: PageProps) {
     [store.nodes],
   );
 
-  const tableColumns: TableColumnsType<Network> = [
+  const tableColumns: TableColumnsType<NetworkStat> = [
     {
       title: 'Name',
       dataIndex: 'netid',
@@ -111,14 +111,15 @@ export default function NetworksPage(props: PageProps) {
     },
     {
       title: 'Hosts Count',
-      render(_, network) {
-        const nodeCount = store.nodes?.filter((node) => node.network === network.netid).length ?? 0;
-        return (
-          <div onClick={(ev) => ev.stopPropagation()}>
-            <Typography.Text>{nodeCount}</Typography.Text>
-          </div>
-        );
-      },
+      dataIndex: 'hosts',
+      // render(_, network) {
+      //   const nodeCount = store.nodes?.filter((node) => node.network === network.netid).length ?? 0;
+      //   return (
+      //     <div onClick={(ev) => ev.stopPropagation()}>
+      //       <Typography.Text>{nodeCount}</Typography.Text>
+      //     </div>
+      //   );
+      // },
     },
     {
       title: 'Network Last Modified',

diff --git a/src/services/NetworksService.ts b/src/services/NetworksService.ts
@@ -2,17 +2,22 @@ import { NodeAclContainer } from '@/models/Acl';
 import { ApiRoutes } from '../constants/ApiRoutes';
 import { AccessKey } from '../models/AccessKey';
 import { DNS } from '../models/Dns';
-import { Network, NetworkPayload } from '../models/Network';
+import { Network, NetworkPayload, NetworkStatPayload } from '../models/Network';
 import { axiosService } from './BaseService';
 import { CreateAccessKeyDto } from './dtos/CreateAccessKeyDto';
 import { CreateNetworkDto } from './dtos/CreateNetworkDto';
 import { NetworkMetrics, NodeOrClientMetric } from '@/models/Metrics';
 import { ExternalClient } from '@/models/ExternalClient';
+import { GenericResponseDto } from './dtos/GenericDto';
 
 function getNetworks() {
   return axiosService.get<NetworkPayload[]>(`${ApiRoutes.NETWORKS}`);
 }
 
+function getNetworksWithStats() {
+  return axiosService.get<GenericResponseDto<NetworkStatPayload[]>>(`${ApiRoutes.NETWORKS_STATS}`);
+}
+
 function createNetwork(payload: CreateNetworkDto) {
   return axiosService.post<NetworkPayload>(`${ApiRoutes.NETWORKS}`, payload);
 }
@@ -79,6 +84,7 @@ function getClientMetrics(networkId: Network['netid']) {
 
 export const NetworksService = {
   getNetworks,
+  getNetworksWithStats,
   createNetwork,
   updateNetwork,
   deleteNetwork,

diff --git a/src/store/networks.ts b/src/store/networks.ts
@@ -1,19 +1,19 @@
 import { NetworksService } from '@/services/NetworksService';
 import { convertNetworkPayloadToUiNetwork } from '@/utils/NetworkUtils';
 import { StateCreator } from 'zustand';
-import { Network } from '../models/Network';
+import { Network, NetworkStat } from '../models/Network';
 
 export interface INetworkSlice {
   // state
-  networks: Network[];
+  networks: NetworkStat[];
   isFetchingNetworks: boolean;
 
   // actions
   fetchNetworks: () => Promise<void>;
-  setNetworks: (networks: Network[]) => void;
+  // setNetworks: (networks: Network[]) => void;
   addNetwork: (network: Network) => void;
   removeNetwork: (networkId: Network['netid']) => void;
-  updateNetwork: (networkId: Network['netid'], newNetwork: Network) => void;
+  // updateNetwork: (networkId: Network['netid'], newNetwork: Network) => void;
   deleteNetwork: (networkId: Network['netid']) => void;
 }
 
@@ -24,33 +24,33 @@ const createNetworkSlice: StateCreator<INetworkSlice, [], [], INetworkSlice> = (
   async fetchNetworks() {
     try {
       set(() => ({ isFetchingNetworks: true }));
-      const networks = (await NetworksService.getNetworks()).data ?? [];
+      const nets = (await NetworksService.getNetworksWithStats()).data.Response ?? [];
       set(() => ({
-        networks: networks.map((network) => convertNetworkPayloadToUiNetwork(network)),
+        networks: nets.map((ns) => ({ ...convertNetworkPayloadToUiNetwork(ns), hosts: ns.hosts })),
         isFetchingNetworks: false,
       }));
     } catch (err) {
       console.error(err);
       set(() => ({ isFetchingNetworks: false }));
     }
   },
-  setNetworks: (networks: Network[]) => set(() => ({ networks: networks })),
+  // setNetworks: (networks: Network[]) => set(() => ({ networks: networks })),
   addNetwork(network) {
-    set((state) => ({ networks: [...state.networks, network] }));
+    set((state) => ({ networks: [...state.networks, { ...network, hosts: 0 }] }));
   },
   removeNetwork(networkId) {
     set((state) => ({ networks: state.networks.filter((network) => network.netid !== networkId) }));
   },
-  updateNetwork(networkId, newNetwork) {
-    set((state) => ({
-      networks: state.networks.map((network) => {
-        if (network.netid === networkId) {
-          return newNetwork;
-        }
-        return network;
-      }),
-    }));
-  },
+  // updateNetwork(networkId, newNetwork) {
+  //   set((state) => ({
+  //     networks: state.networks.map((network) => {
+  //       if (network.netid === networkId) {
+  //         return newNetwork;
+  //       }
+  //       return network;
+  //     }),
+  //   }));
+  // },
   deleteNetwork(networkId) {
     set((state) => ({ networks: state.networks.filter((network) => network.netid !== networkId) }));
   },