From d6418132d9994dfc64f2fedeb50b9c88fa53e197 Mon Sep 17 00:00:00 2001 From: Hubert Date: Mon, 11 Aug 2025 09:33:40 +0200 Subject: [PATCH 1/2] fixing refreshing bug on graph --- public/locales/en.json | 2 +- src/components/Graphs/useGraph.ts | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index 6cf67f34..da3857bc 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -290,7 +290,7 @@ "Graphs": { "colorsProvider": "Provider", "colorsProviderConfig": "Provider Config", - "colorizedTitle": "Colorized Graph by: ", + "colorizedTitle": "Visualize: ", "loadingError": "Error loading graph data", "loadingGraph": "Loading graph data...", "noResources": "No resources to display" diff --git a/src/components/Graphs/useGraph.ts b/src/components/Graphs/useGraph.ts index 68593f22..a08939d2 100644 --- a/src/components/Graphs/useGraph.ts +++ b/src/components/Graphs/useGraph.ts @@ -1,4 +1,4 @@ -import { useMemo, useEffect, useState } from 'react'; +import { useMemo, useEffect, useRef, useState } from 'react'; import { useApiResource, useProvidersConfigResource } from '../../lib/api/useApiResource'; import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources'; import { resourcesInterval } from '../../lib/shared/constants'; @@ -92,11 +92,13 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt refreshInterval: resourcesInterval, }); - const loading = managedResourcesLoading || providerConfigsLoading; + const initialLoaded = useRef(false); + const isInitialLoading = (managedResourcesLoading || providerConfigsLoading) && !initialLoaded.current; const error = managedResourcesError || providerConfigsError; const treeData = useMemo(() => { if (!managedResources || !providerConfigsList) return []; + if (!initialLoaded.current) initialLoaded.current = true; const allNodesMap = new Map(); managedResources.forEach((group: ManagedResourceGroup) => { group.items?.forEach((item: ManagedResourceItem) => { @@ -160,7 +162,7 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt }); }); return Array.from(allNodesMap.values()); - }, [managedResources, providerConfigsList, onYamlClick]); + }, [managedResources, providerConfigsList, onYamlClick, initialLoaded]); const colorMap = useMemo(() => generateColorMap(treeData, colorBy), [treeData, colorBy]); @@ -178,5 +180,5 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt setEdges(edges); }, [treeData, colorBy, colorMap]); - return { nodes, edges, colorMap, loading, error }; + return { nodes, edges, colorMap, loading: isInitialLoading, error }; } From de65affd371db287d875cc20198609c5697af28c Mon Sep 17 00:00:00 2001 From: Hubert Date: Mon, 11 Aug 2025 10:19:02 +0200 Subject: [PATCH 2/2] fixing this in useProvidersConfigResource --- src/components/Graphs/useGraph.ts | 10 ++++------ src/lib/api/useApiResource.ts | 8 +++++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Graphs/useGraph.ts b/src/components/Graphs/useGraph.ts index a08939d2..68593f22 100644 --- a/src/components/Graphs/useGraph.ts +++ b/src/components/Graphs/useGraph.ts @@ -1,4 +1,4 @@ -import { useMemo, useEffect, useRef, useState } from 'react'; +import { useMemo, useEffect, useState } from 'react'; import { useApiResource, useProvidersConfigResource } from '../../lib/api/useApiResource'; import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources'; import { resourcesInterval } from '../../lib/shared/constants'; @@ -92,13 +92,11 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt refreshInterval: resourcesInterval, }); - const initialLoaded = useRef(false); - const isInitialLoading = (managedResourcesLoading || providerConfigsLoading) && !initialLoaded.current; + const loading = managedResourcesLoading || providerConfigsLoading; const error = managedResourcesError || providerConfigsError; const treeData = useMemo(() => { if (!managedResources || !providerConfigsList) return []; - if (!initialLoaded.current) initialLoaded.current = true; const allNodesMap = new Map(); managedResources.forEach((group: ManagedResourceGroup) => { group.items?.forEach((item: ManagedResourceItem) => { @@ -162,7 +160,7 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt }); }); return Array.from(allNodesMap.values()); - }, [managedResources, providerConfigsList, onYamlClick, initialLoaded]); + }, [managedResources, providerConfigsList, onYamlClick]); const colorMap = useMemo(() => generateColorMap(treeData, colorBy), [treeData, colorBy]); @@ -180,5 +178,5 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt setEdges(edges); }, [treeData, colorBy, colorMap]); - return { nodes, edges, colorMap, loading: isInitialLoading, error }; + return { nodes, edges, colorMap, loading, error }; } diff --git a/src/lib/api/useApiResource.ts b/src/lib/api/useApiResource.ts index ed52f187..42f304ef 100644 --- a/src/lib/api/useApiResource.ts +++ b/src/lib/api/useApiResource.ts @@ -1,4 +1,4 @@ -import { useContext, useEffect, useState } from 'react'; +import { useContext, useEffect, useState, useRef } from 'react'; import useSWR, { SWRConfiguration, useSWRConfig } from 'swr'; import { fetchApiServerJson } from './fetch'; import { ApiConfigContext } from '../../components/Shared/k8s'; @@ -120,17 +120,19 @@ export const useProvidersConfigResource = (config?: SWRConfiguration) => { }; const [configs, setConfigs] = useState([]); const [isLoading, setIsLoading] = useState(true); + const initialLoaded = useRef(false); useEffect(() => { const fetchDataAndUpdateState = async () => { - setIsLoading(true); + if (!initialLoaded.current) setIsLoading(true); try { await fetchProviderConfigsData(); const finalData = await fetchProviderConfigs(); setConfigs(finalData); - if (finalData.length > 0) { + if (!initialLoaded.current) { setIsLoading(false); + initialLoaded.current = true; } } catch (_) { setIsLoading(false);