github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-06-25 07:45:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

HOTFIX: [FE] Avoid overlap only for service map including under 10 services

Browse Source 
HOTFIX: [FE] Avoid overlap only for service map including under 10 services #patch
This commit is contained in:
lirazyehezkel 2022-03-30 15:11:08 +03:00 committed by GitHub
commit f8c0ddd69a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/src/components/ServiceMapModal/ServiceMapModal.tsx
View File

@ -100,6 +100,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
const commonClasses = useCommonStyles(); const commonClasses = useCommonStyles();
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [graphData, setGraphData] = useState<GraphData>({ nodes: [], edges: [] }); const [graphData, setGraphData] = useState<GraphData>({ nodes: [], edges: [] });
const [graphOptions, setGraphOptions] = useState(ServiceMapOptions);
const getServiceMapData = useCallback(async () => { const getServiceMapData = useCallback(async () => {
try { try {
@ -149,6 +150,14 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
// eslint-disable-next-line // eslint-disable-next-line
}, [isOpen]) }, [isOpen])
useEffect(() => {
if(graphData?.nodes?.length === 0) return;
let options = {...graphOptions};
options.physics.barnesHut.avoidOverlap = graphData?.nodes?.length > 10 ? 0 : 1;
setGraphOptions(options);
// eslint-disable-next-line
},[graphData?.nodes?.length])
useEffect(() => { useEffect(() => {
getServiceMapData(); getServiceMapData();
return () => setGraphData({ nodes: [], edges: [] }) return () => setGraphData({ nodes: [], edges: [] })
@ -180,7 +189,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
<div style={{ display: "flex", justifyContent: "space-between" }}> <div style={{ display: "flex", justifyContent: "space-between" }}>
<div> <div>
<Button <Button
startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight: "8%" }}></img>} startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight: "8%" }}/>}
size="medium" size="medium"
variant="contained" variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton} className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
@ -189,20 +198,20 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
Refresh Refresh
</Button> </Button>
</div> </div>
<img src={close} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}></img> <img src={close} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}/>
</div> </div>
<Graph <Graph
graph={graphData} graph={graphData}
options={ServiceMapOptions} options={graphOptions}
/> />
<div className='legend-scale'> <div className='legend-scale'>
<ul className='legend-labels'> <ul className='legend-labels'>
<li><span style={{ background: '#205cf5' }}></span>HTTP</li> <li><span style={{ background: '#205cf5' }}/>HTTP</li>
<li><span style={{ background: '#244c5a' }}></span>HTTP/2</li> <li><span style={{ background: '#244c5a' }}/>HTTP/2</li>
<li><span style={{ background: '#244c5a' }}></span>gRPC</li> <li><span style={{ background: '#244c5a' }}/>gRPC</li>
<li><span style={{ background: '#ff6600' }}></span>AMQP</li> <li><span style={{ background: '#ff6600' }}/>AMQP</li>
<li><span style={{ background: '#000000' }}></span>KAFKA</li> <li><span style={{ background: '#000000' }}/>KAFKA</li>
<li><span style={{ background: '#a41e11' }}></span>REDIS</li> <li><span style={{ background: '#a41e11' }}/>REDIS</li>
</ul> </ul>
</div> </div>
</div>} </div>}
@ -211,4 +220,4 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
</Modal> </Modal>
); );
} }

4
ui/src/components/ServiceMapModal/ServiceMapOptions.ts
View File

@ -148,7 +148,7 @@ const ServiceMapOptions = {
springLength: 180, springLength: 180,
springConstant: 0.04, springConstant: 0.04,
damping: 0.2, damping: 0.2,
avoidOverlap: 1 avoidOverlap: 0
}, },
}, },
layout: { layout: {
@ -171,4 +171,4 @@ const ServiceMapOptions = {
}, },
}; };
export default ServiceMapOptions export default ServiceMapOptions