fix cluster info types

projectsveltos · May 9, 2024 · 1859ac0 · 1859ac0
1 parent 902c1c9
commit 1859ac0
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 35 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,7 +14,7 @@ export default function App() {
           toast.error(`Something went wrong: ${error.message}`);
         }
       },
-      staleTime: 10000,
+
       refetchOnWindowFocus: "always",
     },
   });

diff --git a/src/modules/clusters/cluster-information/ClusterInfo.tsx b/src/modules/clusters/cluster-information/ClusterInfo.tsx
@@ -13,7 +13,7 @@ import { ResourceTable } from "@/modules/clusters/cluster-information/components
 import { ClusterConfig } from "@/modules/clusters/cluster-information/components/ClusterConfig";
 import useClusterInfo from "@/modules/clusters/cluster-information/hooks/useClusterInfo";
 import { useParams } from "react-router-dom";
-import { ClusterType } from "@/types/cluster";
+import { ClusterInfoType, ClusterType, Label } from "@/types/cluster";
 import { useEffect, useState } from "react";
 
 export const data = {
@@ -89,13 +89,17 @@ export const data = {
 
 export function ClusterInfo() {
   const { tab: type, name, namespace } = useParams();
-  const [infoData, setInfoData] = useState(null);
+  const [infoData, setInfoData] = useState<ClusterInfoType | null>(null);
   const queries = useClusterInfo(namespace, name, type as ClusterType);
 
   const [resourcesQuery, helmChartQuery, InfoQuery] = queries;
   useEffect(() => {
-    if(resourcesQuery.isSuccess && helmChartQuery.isSuccess && InfoQuery.isSuccess){
-      setInfoData(InfoQuery.data.managedClusters[0])
+    if (
+      resourcesQuery.isSuccess &&
+      helmChartQuery.isSuccess &&
+      InfoQuery.isSuccess
+    ) {
+      setInfoData(InfoQuery.data.managedClusters[0]);
     }
   }, [InfoQuery]);
 
@@ -111,6 +115,7 @@ export function ClusterInfo() {
               <ClusterHeading
                 name={infoData.name}
                 status={infoData?.clusterInfo.ready}
+                namespace={infoData.namespace}
                 version={infoData?.clusterInfo.version}
               />
             )}
@@ -119,7 +124,7 @@ export function ClusterInfo() {
 
               <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
                 {InfoQuery.isSuccess && infoData && (
-                <LabelsCard labels={infoData?.clusterInfo?.labels} />
+                  <LabelsCard labels={infoData?.clusterInfo?.labels} />
                 )}
                 <ClusterConfig />
                 <Card x-chunk="dashboard-07-chunk-5">

diff --git a/src/modules/clusters/cluster-information/components/LabelsCard.tsx b/src/modules/clusters/cluster-information/components/LabelsCard.tsx
@@ -11,11 +11,9 @@ type LabelsCardProps = {
 export const LabelsCard = ({ labels }: LabelsCardProps) => {
   useEffect(() => {
     console.log("LabelsCard", labels);
-
   }, [labels]);
   const labelEntries = Object.entries(labels || {});
   return (
-
     <>
       <div>
         <Card x-chunk="dashboard-07-chunk-3">
@@ -28,16 +26,16 @@ export const LabelsCard = ({ labels }: LabelsCardProps) => {
 
           <CardContent>
             <div className="flex flex-wrap ">
-              {labelEntries.length>0 && labelEntries.map(([key, value]) => (
-                <Badge
-                  key={key}
-                  className={"m-2 p-2 rounded"}
-                  variant="secondary"
-                >
-
-                  <p>{`${key}: ${value}`}</p>
-                </Badge>
-              ))}
+              {labelEntries.length > 0 &&
+                labelEntries.map(([key, value]) => (
+                  <Badge
+                    key={key}
+                    className={"m-2 p-2 rounded"}
+                    variant="secondary"
+                  >
+                    <p>{`${key}: ${value}`}</p>
+                  </Badge>
+                ))}
             </div>
           </CardContent>
         </Card>

diff --git a/src/modules/clusters/cluster-information/components/clusterHeading.tsx b/src/modules/clusters/cluster-information/components/clusterHeading.tsx
@@ -8,12 +8,14 @@ type ClusterHeadingProps = {
   name: string;
   version: string;
   status: boolean;
+  namespace?: string;
 };
 
 export const ClusterHeading = ({
   name,
   version,
   status,
+  namespace,
 }: ClusterHeadingProps) => {
   const navigate = useNavigate();
   return (
@@ -37,13 +39,20 @@ export const ClusterHeading = ({
         >
           version : {version}
         </Badge>
+        <Badge
+          variant="outline"
+          className="ml-auto sm:ml-0  flex items-center "
+        >
+          namespace : {namespace}
+        </Badge>
         <Badge
           variant="outline"
           className={`ml-auto sm:ml-0 ${status ? "bg-main-500" : "bg-red-500"}  flex items-center text-white`}
         >
           <Icons.k8s className="w-4 h-4 mr-1" />
           {status ? "Healthy" : "Failed"}
         </Badge>
+
         <div className="hidden items-center gap-2 md:ml-auto md:flex">
           <Button variant="outline" size="sm">
             <RefreshCcw className={"w-3 h-3 mx-1"} /> Refresh

diff --git a/src/modules/clusters/clusters-list/ClustersPage.tsx b/src/modules/clusters/clusters-list/ClustersPage.tsx
@@ -25,11 +25,15 @@ export default function ClustersPage() {
   const [currentPage, setCurrentPage] = useState<number>(() => {
     return urlPage ? parseInt(urlPage) : defaultPage;
   });
-  const { data, isLoading, isError, isSuccess, error, refetch } = useClusters(
-    currentTab,
-    currentPage,
-    searchParams,
-  );
+  const {
+    data,
+    isLoading,
+    isPreviousData,
+    isError,
+    isSuccess,
+    error,
+    refetch,
+  } = useClusters(currentTab, currentPage, searchParams);
   const handleTabChange = (value: ClusterType) => {
     setCurrentTab(value);
     navigate(`/clusters/${value}/${currentPage}`);
@@ -65,7 +69,7 @@ export default function ClustersPage() {
         </TabsList>
       </Tabs>
       <SearchFields updateQueryParams={updateQueryParams} />
-      {isLoading && <LoadingCards />}
+      {(isLoading || isPreviousData) && <LoadingCards />}
       {isError && <ErrorQuery name={"clusters"} error={error} />}
       {isSuccess && data && (
         <>

diff --git a/src/types/cluster.d.ts → src/types/cluster.ts b/src/types/cluster.d.ts → src/types/cluster.ts
@@ -1,28 +1,23 @@
-export type Label = {
-  id?: number;
-  designation: string;
-};
-
 export type SveltosClusterType = "SveltosCluster";
 export type ClusterApiType = "ClusterAPI";
 export type ClusterType = SveltosClusterType | ClusterApiType;
 
-interface Label {
+export interface Label {
   [key: string]: string;
 }
 
-interface ClusterInfo {
+export interface ClusterInfoType {
   namespace: string;
   name: string;
   clusterInfo: {
-    labels?: Label[];
-    version?: string;
-    ready?: boolean;
+    labels: Label[];
+    version: string;
+    ready: boolean;
     failureMessage?: string | null;
   };
 }
 
 export type ClusterListResponse = {
   totalClusters: number;
-  managedClusters: ClusterInfo[];
+  managedClusters: ClusterInfoType[];
 };