Merge pull request #741 from gravitl/kwesi/net-1436-nmui-switch-to-pe…

…r-network-node-route fix(NET-1436): load node info per network
gravitl · Sep 11, 2024 · e6b9fdd · e6b9fdd
2 parents 6eda91a + 278b0a0
commit e6b9fdd
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 21 deletions.
diff --git a/src/components/modals/quick-setup-modal/QuickSetupModal.tsx b/src/components/modals/quick-setup-modal/QuickSetupModal.tsx
@@ -49,7 +49,7 @@ import { UsersService } from '@/services/UsersService';
 import AddUserModal from '../add-user-modal/AddUserModal';
 import { useServerLicense } from '@/utils/Utils';
 
-interface ModalProps {
+interface QuickSetupModalProps {
   isModalOpen: boolean;
   handleCancel: () => void;
   notify: NotificationInstance;
@@ -151,7 +151,7 @@ const NodeSelectDropdownChecks = [
 
 const NodeSelectDropdownChecks2 = ['gateway_users'];
 
-export default function QuickSetupModal(props: ModalProps) {
+export default function QuickSetupModal(props: QuickSetupModalProps) {
   const store = useStore();
   const { currentTheme } = store;
   const [userQuestionsAsked, setUserQuestionsAsked] = useState<UsecaseQuestionAndAnswer[]>([]);
@@ -182,6 +182,8 @@ export default function QuickSetupModal(props: ModalProps) {
     [store.nodes, store.hostsCommonDetails, networkId],
   );
 
+  // const networkNodes = props.networkNodes;
+
   const clientGateways = useMemo<ExtendedNode[]>(() => {
     return networkNodes
       .filter((node) => node.isingressgateway)

diff --git a/src/pages/networks/NetworkDetailsPage.tsx b/src/pages/networks/NetworkDetailsPage.tsx
@@ -96,7 +96,7 @@ import UpdateClientModal from '@/components/modals/update-client-modal/UpdateCli
 import { NULL_HOST, NULL_NODE } from '@/constants/Types';
 import UpdateNodeModal from '@/components/modals/update-node-modal/UpdateNodeModal';
 import VirtualisedTable from '@/components/VirtualisedTable';
-import { NETWORK_GRAPH_SIGMA_CONTAINER_ID } from '@/constants/AppConstants';
+import { APP_UPDATE_POLL_INTERVAL, NETWORK_GRAPH_SIGMA_CONTAINER_ID } from '@/constants/AppConstants';
 import UpdateIngressUsersModal from '@/components/modals/update-ingress-users-modal/UpdateIngressUsersModal';
 import getNodeImageProgram from 'sigma/rendering/webgl/programs/node.image';
 import { HOST_HEALTH_STATUS } from '@/models/NodeConnectivityStatus';
@@ -172,11 +172,12 @@ export default function NetworkDetailsPage(props: PageProps) {
   const [notify, notifyCtx] = notification.useNotification();
   const { token: themeToken } = theme.useToken();
   const branding = useBranding();
-
   const storeFetchNodes = store.fetchNodes;
   const storeDeleteNode = store.deleteNode;
   const { isServerEE } = useServerLicense();
+
   const [form] = Form.useForm<Network>();
+  // const [networkNodes, setNetworkNodes] = useState<ExtendedNode[]>([]);
   const isIpv4Watch = Form.useWatch('isipv4', form);
   const isIpv6Watch = Form.useWatch('isipv6', form);
   const [network, setNetwork] = useState<Network | null>(null);
@@ -246,7 +247,6 @@ export default function NetworkDetailsPage(props: PageProps) {
   });
   const [isSetNetworkFailoverModalOpen, setIsSetNetworkFailoverModalOpen] = useState(false);
   const [isAddInternetGatewayModalOpen, setIsAddInternetGatewayModalOpen] = useState(false);
-  // const [networkNodes, setNetworkNodes] = useState<ExtendedNode[]>([]);
 
   const overviewTabContainerRef = useRef(null);
   const hostsTabContainerTableRef = useRef(null);
@@ -320,6 +320,33 @@ export default function NetworkDetailsPage(props: PageProps) {
     [store.nodes, store.hostsCommonDetails, networkId],
   );
 
+  // const loadNetworkNodes = useCallback(async () => {
+  //   try {
+  //     if (!networkId) return;
+  //     const nodes = (await NodesService.getNetworkNodes(networkId)).data;
+  //     setNetworkNodes(nodes.map((n) => getExtendedNode(n, store.hostsCommonDetails)));
+  //   } catch (err) {
+  //     if (err instanceof AxiosError && err.response?.status === 403) return;
+  //     notify.error({
+  //       message: 'Error loading network nodes',
+  //       description: extractErrorMsg(err as any),
+  //     });
+  //   }
+  // }, [networkId, notify, store.hostsCommonDetails]);
+
+  // const updateNode = useCallback(
+  //   (nodeId: Node['id'], newNode: Node) => {
+  //     setNetworkNodes((prev) =>
+  //       prev.map((n) => (n.id === nodeId ? getExtendedNode(newNode, store.hostsCommonDetails) : n)),
+  //     );
+  //   },
+  //   [store.hostsCommonDetails],
+  // );
+
+  // const deleteNode = useCallback((nodeId: Node['id']) => {
+  //   setNetworkNodes((prev) => prev.filter((n) => n.id !== nodeId));
+  // }, []);
+
   const filteredNetworkNodes = useMemo<ExtendedNode[]>(
     () =>
       networkNodes.filter((node) =>
@@ -3604,20 +3631,6 @@ export default function NetworkDetailsPage(props: PageProps) {
     }
   }, [networkId, notify]);
 
-  // const loadNetworkNodes = useCallback(async () => {
-  //   try {
-  //     if (!networkId) return;
-  //     const nodes = (await NodesService.getNetworkNodes(networkId)).data;
-  //     setNetworkNodes(nodes);
-  //   } catch (err) {
-  //     if (err instanceof AxiosError && err.response?.status === 403) return;
-  //     notify.error({
-  //       message: 'Error loading network nodes',
-  //       description: extractErrorMsg(err as any),
-  //     });
-  //   }
-  // }, [networkId, notify]);
-
   const loadNetworkDnses = useCallback(async () => {
     try {
       if (!networkId) return;
@@ -3999,6 +4012,14 @@ export default function NetworkDetailsPage(props: PageProps) {
     // setIsTourOpen(true);
   }, [loadNetwork]);
 
+  // useEffect(() => {
+  //   const handle = setInterval(() => {
+  //     loadNetworkNodes();
+  //   }, APP_UPDATE_POLL_INTERVAL);
+
+  //   return () => clearInterval(handle);
+  // }, [loadNetworkNodes]);
+
   // refresh form to prevent stick network data across different network details pages
   useEffect(() => {
     if (!network) return;

diff --git a/src/store/nodes.ts b/src/store/nodes.ts
@@ -1,6 +1,7 @@
 import { NodesService } from '@/services/NodesService';
 import { StateCreator } from 'zustand';
 import { Node } from '../models/Node';
+import { useStore } from './store';
 
 export interface INodeSlice {
   nodes: Node[];
@@ -11,7 +12,7 @@ export interface INodeSlice {
   fetchNodes: () => Promise<void>;
 }
 
-const createNodeSlice: StateCreator<INodeSlice, [], [], INodeSlice> = (set) => ({
+const createNodeSlice: StateCreator<INodeSlice, [], [], INodeSlice> = (set, get) => ({
   nodes: [],
   isFetchingNodes: false,
   setNodes: (nodes: Node[]) => set(() => ({ nodes })),
@@ -31,7 +32,17 @@ const createNodeSlice: StateCreator<INodeSlice, [], [], INodeSlice> = (set) => (
   async fetchNodes() {
     try {
       set(() => ({ isFetchingNodes: true }));
-      const nodes = (await NodesService.getNodes()).data ?? [];
+      // const nodes = (await NodesService.getNodes()).data ?? [];
+
+      const networks = useStore.getState().networks;
+      const res = await Promise.allSettled(networks.map((network) => NodesService.getNetworkNodes(network.netid)));
+      const nodes: Node[] = [];
+      res.forEach((result) => {
+        if (result.status === 'fulfilled') {
+          nodes.push(...result.value.data);
+        }
+      });
+
       set(() => ({ nodes, isFetchingNodes: false }));
     } catch (err) {
       console.error(err);