From f9699a50af2b8129299f83f5d317b705a89e25dd Mon Sep 17 00:00:00 2001 From: tianhai Date: Mon, 23 Dec 2024 17:19:15 +0800 Subject: [PATCH 1/3] fix: resources topology interactive --- .../components/topologyMap/index.tsx | 28 +++++-------------- ui/src/pages/insightDetail/resource/index.tsx | 4 ++- 2 files changed, 10 insertions(+), 22 deletions(-) diff --git a/ui/src/pages/insightDetail/components/topologyMap/index.tsx b/ui/src/pages/insightDetail/components/topologyMap/index.tsx index ab5d05ba..bb4f0a21 100644 --- a/ui/src/pages/insightDetail/components/topologyMap/index.tsx +++ b/ui/src/pages/insightDetail/components/topologyMap/index.tsx @@ -15,7 +15,6 @@ import transferImg from '@/assets/transfer.png' import { ICON_MAP } from '@/utils/images' import styles from './style.module.less' - interface NodeConfig extends ModelConfig { data?: { name?: string @@ -151,6 +150,8 @@ type IProps = { clusterOptions?: string[] } +let graph: IAbstractGraph | null = null + const TopologyMap = ({ onTopologyNodeClick, topologyData, @@ -164,7 +165,6 @@ const TopologyMap = ({ const { t } = useTranslation() const ref = useRef(null) const graphRef = useRef() - let graph: IAbstractGraph | null = null const location = useLocation() const { from, type, query } = queryString.parse(location?.search) const navigate = useNavigate() @@ -227,20 +227,6 @@ const TopologyMap = ({ name: 'node-container', }) - // Add background - group.addShape('rect', { - attrs: { - x: 0, - y: 0, - width: nodeWidth, - height: 48, - radius: 6, - fill: isHighLight ? '#f0f5ff' : '#ffffff', - opacity: 0.8, - }, - name: 'node-background', - }) - // Add side accent group.addShape('rect', { attrs: { @@ -475,7 +461,7 @@ const TopologyMap = ({ shadowOffsetY: 2, cursor: 'pointer', }, - draggable: true, + // draggable: true, }, defaultEdge: { type: 'running-edge', @@ -564,10 +550,10 @@ const TopologyMap = ({ } return () => { try { - if (graph) { - graph.destroy() - graphRef.current = null - } + // if (graph) { + // graph.destroy() + // graphRef.current = null + // } } catch (error) {} } // eslint-disable-next-line diff --git a/ui/src/pages/insightDetail/resource/index.tsx b/ui/src/pages/insightDetail/resource/index.tsx index c4515741..c2d9e3fa 100644 --- a/ui/src/pages/insightDetail/resource/index.tsx +++ b/ui/src/pages/insightDetail/resource/index.tsx @@ -337,7 +337,9 @@ const ClusterDetail = () => { }, [from, key, cluster, kind, namespace, name, i18n?.language]) function onTopologyNodeClick(node: any) { - const { resourceGroup } = node || {} + const { + data: { resourceGroup }, + } = node || {} const paramsObj = { apiVersion: resourceGroup?.apiVersion, cluster: resourceGroup?.cluster, From b4031c94784161a2b6747557284d1ecbc2438746 Mon Sep 17 00:00:00 2001 From: tianhai Date: Mon, 23 Dec 2024 17:32:01 +0800 Subject: [PATCH 2/3] fix: resources topology interactive --- .../insightDetail/components/topologyMap/index.tsx | 12 ------------ ui/src/utils/request.ts | 2 +- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/ui/src/pages/insightDetail/components/topologyMap/index.tsx b/ui/src/pages/insightDetail/components/topologyMap/index.tsx index bb4f0a21..c1ac35ff 100644 --- a/ui/src/pages/insightDetail/components/topologyMap/index.tsx +++ b/ui/src/pages/insightDetail/components/topologyMap/index.tsx @@ -178,7 +178,6 @@ const TopologyMap = ({ function handleMouseEnter(evt) { graph.setItemState(evt.item, 'hoverState', true) - // graph.setItemState(evt.item, 'hoverState', true) const bbox = evt.item.getBBox() const point = graph.getCanvasByPoint(bbox.centerX, bbox.minY) if (bbox) { @@ -414,7 +413,6 @@ const TopologyMap = ({ const height = container?.scrollHeight || 400 const toolbar = new G6.ToolBar() if (!graph && container) { - // eslint-disable-next-line graphRef.current = graph = new G6.Graph({ container, width, @@ -461,7 +459,6 @@ const TopologyMap = ({ shadowOffsetY: 2, cursor: 'pointer', }, - // draggable: true, }, defaultEdge: { type: 'running-edge', @@ -493,7 +490,6 @@ const TopologyMap = ({ }, nodeStateStyles: { selected: { - // fill: '#e6f4ff', stroke: '#1677ff', shadowColor: 'rgba(22,119,255,0.12)', fill: '#f0f5ff', @@ -548,14 +544,6 @@ const TopologyMap = ({ } } } - return () => { - try { - // if (graph) { - // graph.destroy() - // graphRef.current = null - // } - } catch (error) {} - } // eslint-disable-next-line }, [topologyData, tableName]) diff --git a/ui/src/utils/request.ts b/ui/src/utils/request.ts index 838f8332..1a3698be 100644 --- a/ui/src/utils/request.ts +++ b/ui/src/utils/request.ts @@ -4,7 +4,7 @@ import { useState, useEffect } from 'react' import { useDispatch } from 'react-redux' import { setIsLogin } from '@/store/modules/globalSlice' -export const HOST = '' +export const HOST = 'https://karpor-demo.kusionstack.io/' axios.defaults.baseURL = HOST axios.interceptors.request.use( From ca2f2a298ff3032521d81d7284839314393c42fa Mon Sep 17 00:00:00 2001 From: tianhai Date: Mon, 23 Dec 2024 17:32:14 +0800 Subject: [PATCH 3/3] fix: resources topology interactive --- ui/src/utils/request.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/utils/request.ts b/ui/src/utils/request.ts index 1a3698be..838f8332 100644 --- a/ui/src/utils/request.ts +++ b/ui/src/utils/request.ts @@ -4,7 +4,7 @@ import { useState, useEffect } from 'react' import { useDispatch } from 'react-redux' import { setIsLogin } from '@/store/modules/globalSlice' -export const HOST = 'https://karpor-demo.kusionstack.io/' +export const HOST = '' axios.defaults.baseURL = HOST axios.interceptors.request.use(