add helm chart

add total dependents and total dependencies fix issue calling 2 requests at a time
projectsveltos · Feb 9, 2025 · 59ead9c · 59ead9c
1 parent 4c4ada3
commit 59ead9c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 21 deletions.
diff --git 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 (
     <ThemeProvider>

diff --git 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
@@ -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) => {
     <Card className="overflow-hidden">
       <CardHeader>
         <CardTitle className={"flex items-center"}>
-          <FileSliders className={"w-4 h-4 mx-0.5"} /> Specs
+          <FileSliders className={"w-4 h-4 mx-0.5"} /> Spec
         </CardTitle>
         <CardDescription>
           Profile specifications for the selected profile
@@ -43,11 +47,13 @@ export const ProfileSpecCard = ({ spec }: ProfileSpecCardProps) => {
             <dt className="text-sm text-muted-foreground">Cluster Selector</dt>
             <dd className="font-medium">
               <Badge variant={"outline"}>
-                {spec.clusterSelector.matchLabels.env}
+                {Object.entries(spec.clusterSelector.matchLabels).map(
+                  ([key, value]) => `${key}: ${value}`,
+                )}
               </Badge>
             </dd>
             <dt className="text-sm text-muted-foreground">Sync Mode</dt>
-            <dd className="text-sm font-medium">{spec.syncMode}</dd>
+            <Badge className="text-sm font-medium">{spec.syncMode}</Badge>
             {spec?.policyRefs && (
               <>
                 <dt className="text-sm text-muted-foreground">Policy Refs</dt>
@@ -60,6 +66,18 @@ export const ProfileSpecCard = ({ spec }: ProfileSpecCardProps) => {
                 </dd>
               </>
             )}
+            {spec?.helmCharts && (
+              <>
+                <dt className="text-sm text-muted-foreground">Helm Charts</dt>
+                <dd>
+                  {spec.helmCharts.map((chart, index) => (
+                    <Badge key={index} variant={"outline"}>
+                      {chart.chartName} ({chart.chartVersion})
+                    </Badge>
+                  ))}
+                </dd>
+              </>
+            )}
           </dl>
         </div>
       </CardContent>

diff --git 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({
         <CardHeader>
           <CardTitle className={"flex items-center"}>
             <Cable className={"w-4 h-4 mx-0.5"} /> Profile
+            <div className=" flex ml-auto gap-2 ">
+              <Badge variant={"label"} className={" "}>
+                Total dependents: {profile.dependents.length}
+              </Badge>
+              <Badge variant={"label"}>
+                Total dependencies: {profile.dependencies.length}
+              </Badge>
+            </div>
           </CardTitle>
           <CardDescription>
-            Profile specifications for the selected profile
-            <div className="flex items-center">
-              <div className="ml-auto flex items-center gap-2">
+            Profile associations with linked dependents and dependencies within
+            the cluster.
+            <div className="flex items-center my-2">
+              <span className={"ml-auto flex items-center gap-2"}>
                 <Button size="sm" variant="outline" className="h-7 gap-1">
                   <File className="h-3.5 w-3.5" />
                   <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
@@ -153,7 +163,7 @@ export function ProfileRelations({
                     Drag And Drop
                   </span>
                 </Button>
-              </div>
+              </span>
             </div>
           </CardDescription>
         </CardHeader>

diff --git 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<ProfileInfo, Error> => {
-  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
@@ -18,7 +18,6 @@ const fetchProfiles = async (): Promise<Array<TierData>> => {
 const useProfiles = (): UseQueryResult<Array<TierData>, Error> => {
   return useQuery(["profiles"], () => fetchProfiles(), {
     keepPreviousData: false,
-    cacheTime: 0,
   });
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,6 @@ const useClusters = ( @@
         () => fetchClusters(type, page, searchParams),
         {
           keepPreviousData: false,
-          cacheTime: 0,
         },
       );
     };
@@ Expand Down @@