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

gravitl · Sep 16, 2024 · 72a736a · 72a736a
1 parent c447497
commit 72a736a
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 63 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/NetworkDetailsPage.tsx b/src/pages/networks/NetworkDetailsPage.tsx
@@ -3684,32 +3684,32 @@ export default function NetworkDetailsPage(props: PageProps) {
     loadMetrics,
   ]);
 
-  const onNetworkFormEdit = useCallback(async () => {
-    try {
-      const formData = await form.validateFields();
-      const network = store.networks.find((network) => network.netid === networkId);
-      if (!networkId || !network) {
-        throw new Error('Network not found');
-      }
-      const newNetwork = (
-        await NetworksService.updateNetwork(networkId, convertUiNetworkToNetworkPayload({ ...network, ...formData }))
-      ).data;
-      store.updateNetwork(networkId, convertNetworkPayloadToUiNetwork(newNetwork));
-      notify.success({ message: `Network ${networkId} updated` });
-      setIsEditingNetwork(false);
-    } catch (err) {
-      if (err instanceof AxiosError) {
-        notify.error({
-          message: 'Failed to save changes',
-          description: extractErrorMsg(err),
-        });
-      } else {
-        notify.error({
-          message: err instanceof Error ? err.message : 'Failed to save changes',
-        });
-      }
-    }
-  }, [form, networkId, notify, store]);
+  // const onNetworkFormEdit = useCallback(async () => {
+  //   try {
+  //     const formData = await form.validateFields();
+  //     const network = store.networks.find((network) => network.netid === networkId);
+  //     if (!networkId || !network) {
+  //       throw new Error('Network not found');
+  //     }
+  //     const newNetwork = (
+  //       await NetworksService.updateNetwork(networkId, convertUiNetworkToNetworkPayload({ ...network, ...formData }))
+  //     ).data;
+  //     store.updateNetwork(networkId, convertNetworkPayloadToUiNetwork(newNetwork));
+  //     notify.success({ message: `Network ${networkId} updated` });
+  //     setIsEditingNetwork(false);
+  //   } catch (err) {
+  //     if (err instanceof AxiosError) {
+  //       notify.error({
+  //         message: 'Failed to save changes',
+  //         description: extractErrorMsg(err),
+  //       });
+  //     } else {
+  //       notify.error({
+  //         message: err instanceof Error ? err.message : 'Failed to save changes',
+  //       });
+  //     }
+  //   }
+  // }, [form, networkId, notify, store]);
 
   const onNetworkDelete = useCallback(async () => {
     try {

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) }));
   },