diff --git a/src/components/modals/quick-setup-modal/QuickSetupModal.tsx b/src/components/modals/quick-setup-modal/QuickSetupModal.tsx index 14875959..b9807a01 100644 --- 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([]); @@ -182,6 +182,8 @@ export default function QuickSetupModal(props: ModalProps) { [store.nodes, store.hostsCommonDetails, networkId], ); + // const networkNodes = props.networkNodes; + const clientGateways = useMemo(() => { return networkNodes .filter((node) => node.isingressgateway) diff --git a/src/pages/networks/NetworkDetailsPage.tsx b/src/pages/networks/NetworkDetailsPage.tsx index 13c3a785..a984e795 100644 --- 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(); + // const [networkNodes, setNetworkNodes] = useState([]); const isIpv4Watch = Form.useWatch('isipv4', form); const isIpv6Watch = Form.useWatch('isipv6', form); const [network, setNetwork] = useState(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([]); 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( () => networkNodes.filter((node) => @@ -3599,20 +3626,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; @@ -3994,6 +4007,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 index 7b175f36..0068c2d2 100644 --- 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; } -const createNodeSlice: StateCreator = (set) => ({ +const createNodeSlice: StateCreator = (set, get) => ({ nodes: [], isFetchingNodes: false, setNodes: (nodes: Node[]) => set(() => ({ nodes })), @@ -31,7 +32,17 @@ const createNodeSlice: StateCreator = (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);