Skip to content
Snippets Groups Projects

Refactor data fetching and state management in MapsPage

Merged Mohammad Torkashvand requested to merge feature/NAT-574-add-axios-timeout into develop
4 files
+ 58
45
Compare changes
  • Side-by-side
  • Inline
Files
4
  • - Move data fetching logic from NetworkMap to MapsPage
    - Handle loading and error states in MapsPage
    - Remove loading and error handling from NetworkMap
    - Ensure separation of concerns between data fetching and presentation
    
    This refactor simplifies NetworkMap by focusing it solely on rendering the network map, while MapsPage handles data fetching, session management, and error handling.
import { NetworkTopologyData } from '@/types/types';
import {
EuiToolTip,
EuiSelect,
EuiLoadingSpinner,
EuiPanel,
EuiFormRow,
} from '@elastic/eui';
import { EuiToolTip, EuiSelect, EuiPanel, EuiFormRow } from '@elastic/eui';
import cytoscape, { ElementDefinition, Core } from 'cytoscape';
import fcose from 'cytoscape-fcose';
import React, { useEffect, useState, useRef } from 'react';
@@ -26,7 +20,6 @@ interface FcoseLayoutOptions {
const NetworkMap: React.FC<NetworkMapProps> = ({ data }) => {
const [elements, setElements] = useState<ElementDefinition[]>([]);
const [labelType, setLabelType] = useState('iptrunkIsisMetric');
const [loading, setLoading] = useState(true);
const [tooltipContent, setTooltipContent] = useState<JSX.Element | null>(
null,
);
@@ -40,7 +33,6 @@ const NetworkMap: React.FC<NetworkMapProps> = ({ data }) => {
if (data) {
const transformedElements = transformDataToElements(data);
setElements(transformedElements);
setLoading(false);
}
}, [data]);
@@ -295,11 +287,7 @@ const NetworkMap: React.FC<NetworkMapProps> = ({ data }) => {
return (
<EuiPanel>
{loading ? (
<EuiLoadingSpinner size="xl" />
) : (
<div id="container" style={{ height: '80vh', marginTop: '20px' }}></div>
)}
<div id="container" style={{ height: '80vh', marginTop: '20px' }}></div>
{tooltipContent && tooltipPosition && (
<div
style={{
Loading