From 59ead9c243be66c8378ada1195c50a3d76d5e7d4 Mon Sep 17 00:00:00 2001 From: Safouen Turki Date: Sun, 9 Feb 2025 22:24:42 +0100 Subject: [PATCH] add helm chart add total dependents and total dependencies fix issue calling 2 requests at a time --- src/App.tsx | 3 ++- .../clusters-list/hooks/useClusters.ts | 1 - .../components/ProfileInfo/ProfileSpec.tsx | 24 ++++++++++++++++--- .../ProfileRelations/ProfileRelations.tsx | 20 ++++++++++++---- .../hooks/useProfileInfo.ts | 17 ++++++------- .../profiles-list/hooks/useProfiles.ts | 1 - 6 files changed, 45 insertions(+), 21 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5ceb18c..ef75c8c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,6 +14,7 @@ export default function App() { queryClient.setDefaultOptions({ queries: { retry: 2, + staleTime: 30 * 1000, onError: (error: unknown) => { if (error instanceof Error) { if ( @@ -38,7 +39,7 @@ export default function App() { if (token) { authenticate(token); } - }, [window.location.search]); + }, [authenticate]); return ( diff --git a/src/modules/clusters/clusters-list/hooks/useClusters.ts b/src/modules/clusters/clusters-list/hooks/useClusters.ts index d3d2392..84d1942 100644 --- a/src/modules/clusters/clusters-list/hooks/useClusters.ts +++ b/src/modules/clusters/clusters-list/hooks/useClusters.ts @@ -32,7 +32,6 @@ const useClusters = ( () => fetchClusters(type, page, searchParams), { keepPreviousData: false, - cacheTime: 0, }, ); }; diff --git a/src/modules/profiles/profile-information/components/ProfileInfo/ProfileSpec.tsx b/src/modules/profiles/profile-information/components/ProfileInfo/ProfileSpec.tsx index dabca25..212264c 100644 --- a/src/modules/profiles/profile-information/components/ProfileInfo/ProfileSpec.tsx +++ b/src/modules/profiles/profile-information/components/ProfileInfo/ProfileSpec.tsx @@ -15,6 +15,10 @@ type ProfileSpecCardProps = { env: string; }; }; + helmCharts?: { + chartName: string; + chartVersion: string; + }[]; syncMode: string; stopMatchingBehavior: string; policyRefs?: { @@ -31,7 +35,7 @@ export const ProfileSpecCard = ({ spec }: ProfileSpecCardProps) => { - Specs + Spec Profile specifications for the selected profile @@ -43,11 +47,13 @@ export const ProfileSpecCard = ({ spec }: ProfileSpecCardProps) => {
Cluster Selector
- {spec.clusterSelector.matchLabels.env} + {Object.entries(spec.clusterSelector.matchLabels).map( + ([key, value]) => `${key}: ${value}`, + )}
Sync Mode
-
{spec.syncMode}
+ {spec.syncMode} {spec?.policyRefs && ( <>
Policy Refs
@@ -60,6 +66,18 @@ export const ProfileSpecCard = ({ spec }: ProfileSpecCardProps) => { )} + {spec?.helmCharts && ( + <> +
Helm Charts
+
+ {spec.helmCharts.map((chart, index) => ( + + {chart.chartName} ({chart.chartVersion}) + + ))} +
+ + )} diff --git a/src/modules/profiles/profile-information/components/ProfileRelations/ProfileRelations.tsx b/src/modules/profiles/profile-information/components/ProfileRelations/ProfileRelations.tsx index 9462f5e..4fe108a 100644 --- a/src/modules/profiles/profile-information/components/ProfileRelations/ProfileRelations.tsx +++ b/src/modules/profiles/profile-information/components/ProfileRelations/ProfileRelations.tsx @@ -23,6 +23,7 @@ import { DependentsNode } from "@/modules/profiles/profile-information/component import { ClusterNode } from "@/modules/profiles/profile-information/components/ProfileRelations/Nodes/ClusterNode"; import { Button } from "@/lib/components/ui/button"; import { Dependency } from "@/types/profile.types"; +import { Badge } from "@/lib/components/ui/badge"; const nodeTypes = { custom: ClusterNode, @@ -76,7 +77,7 @@ export function ProfileRelations({ position: { x: 0, y: 0 }, }, ]; - // TODO if more than 4 clusters , should add it on bottom + const horizontalSpacing = 200; const verticalSpacing = 120; @@ -131,11 +132,20 @@ export function ProfileRelations({ Profile +
+ + Total dependents: {profile.dependents.length} + + + Total dependencies: {profile.dependencies.length} + +
- Profile specifications for the selected profile -
-
+ Profile associations with linked dependents and dependencies within + the cluster. +
+ -
+
diff --git a/src/modules/profiles/profile-information/hooks/useProfileInfo.ts b/src/modules/profiles/profile-information/hooks/useProfileInfo.ts index 94345e8..897c764 100644 --- a/src/modules/profiles/profile-information/hooks/useProfileInfo.ts +++ b/src/modules/profiles/profile-information/hooks/useProfileInfo.ts @@ -1,9 +1,9 @@ import { useQuery, UseQueryResult } from "react-query"; - import client from "@/api-client/apiClient"; - import { API_ENDPOINTS } from "@/api-client/endpoints"; import { ProfileInfo } from "@/types/profile.types"; +import { useMemo } from "react"; + const fetchProfileInfo = async (name: string, kind: string) => { const { data } = await client.get(API_ENDPOINTS.PROFILE, { params: { @@ -13,18 +13,15 @@ const fetchProfileInfo = async (name: string, kind: string) => { }); return data; }; + const useProfileInfo = ( name: string, kind: string, ): UseQueryResult => { - return useQuery( - ["profile-info", name, kind], - () => fetchProfileInfo(name, kind), - { - keepPreviousData: false, - cacheTime: 0, - }, - ); + const queryKey = useMemo(() => ["profile-info", name, kind], [name, kind]); + return useQuery(queryKey, () => fetchProfileInfo(name, kind), { + keepPreviousData: false, + }); }; export default useProfileInfo; diff --git a/src/modules/profiles/profiles-list/hooks/useProfiles.ts b/src/modules/profiles/profiles-list/hooks/useProfiles.ts index 71b6dcc..8773550 100644 --- a/src/modules/profiles/profiles-list/hooks/useProfiles.ts +++ b/src/modules/profiles/profiles-list/hooks/useProfiles.ts @@ -18,7 +18,6 @@ const fetchProfiles = async (): Promise> => { const useProfiles = (): UseQueryResult, Error> => { return useQuery(["profiles"], () => fetchProfiles(), { keepPreviousData: false, - cacheTime: 0, }); };