Merge pull request #71 from projectsveltos/profiles-fix

Minor UI fixes
projectsveltos · Feb 9, 2025 · 24084e0 · 24084e0
2 parents 4c4ada3 + adb862d
commit 24084e0
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -13,8 +13,6 @@
     <title>Sveltos Dashboard</title>
   </head>
   <body class="min-h-screen">
-    <div data-tf-live="01HX9Q850M9T9MMPQW2GDCN5SK"></div>
-    <script src="//embed.typeform.com/next/embed.js"></script>
     <noscript> To use SveltosUI, please enable JavaScript. </noscript>
     <div id="root" class="relative flex min-h-screen flex-col"></div>
     <script type="module" src="/src/main.tsx"></script>

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/lib/components/layouts/AppLayout.tsx b/src/lib/components/layouts/AppLayout.tsx
@@ -1,11 +1,21 @@
 import { Outlet } from "react-router-dom";
 import { Header } from "./Header";
 import { Footer } from "./Footer";
+import { Logo } from "@/lib/components/assets/logo/logo";
+import { appConfig } from "@/config/app";
 
 export function Applayout() {
   return (
     <>
       <Header />
+      <a
+        href={appConfig.github.url}
+        target="_blank"
+        className="fixed right-2 top-1/2 -translate-y-1/2 bg-primary text-white px-6 py-2 rounded-lg shadow-lg rotate-90 flex items-center space-x-2"
+        rel="noreferrer"
+      >
+        <span>Powered by</span> <Logo />
+      </a>
       <div className="flex-grow flex flex-col">
         <div className="container px-4 md:px-8 flex-grow flex flex-col">
           <Outlet />

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/ProfileList.tsx b/src/modules/profiles/profiles-list/ProfileList.tsx
@@ -13,7 +13,7 @@ export function ProfileList() {
       <PageHeading
         title={"Profiles"}
         description={
-          "You can view all tiers , profiles and visualize dependants and dependencies "
+          "You can view all tiers , profiles and visualize dependents and dependencies "
         }
       />
       {(isLoading || isPreviousData) && <LoadingTier />}

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 @@