Merge pull request #12 from projectsveltos/fix-01

fix issues

manifests/dashboard.yaml

@@ -14,10 +14,10 @@ spec:
         app: dashboard
     spec:
       containers:
-      - name: dashboard
-        image: projectsveltos/dashboard:dev
-        ports:
-        - containerPort: 5173
+        - name: dashboard
+          image: projectsveltos/dashboard:dev
+          ports:
+            - containerPort: 5173
 ---
 apiVersion: v1
 kind: Service

src/api-client/apiClient.ts

@@ -1,5 +1,4 @@
 import axios from "axios";
-import { toast } from "sonner";
 
 const client = axios.create({
   baseURL: "/api",

src/modules/clusters/cluster-information/ClusterInfoById.tsx

@@ -1,16 +1,17 @@
 import { ClusterHeading } from "@/modules/clusters/cluster-information/components/clusterHeading";
 import { LabelsCard } from "@/modules/clusters/cluster-information/components/LabelsCard";
 import { Addons } from "@/modules/clusters/cluster-information/components/AddonsTable/Addons";
-import useClusterInfo from "@/modules/clusters/cluster-information/hooks/useClusterInfo";
+
 import { useParams } from "react-router-dom";
 import { ClusterType } from "@/types/cluster.types";
 import { LoadingAddons } from "@/modules/clusters/cluster-information/components/AddonsTable/LoadingAddons";
 import { AddonTypes } from "@/types/addon.types";
 import { ErrorQuery } from "@/components/ui/errorQuery";
+import { useClusterInfo } from "@/modules/clusters/cluster-information/hooks/useClusterInfo";
 
 export function ClusterInfoById() {
   const { tab: type, name, namespace } = useParams();
-  const { queries, setPage, setToggleFailFilter } = useClusterInfo(
+  const { queries, setPage } = useClusterInfo(
     namespace as string,
     name as string,
     type as ClusterType,
@@ -62,7 +63,6 @@ export function ClusterInfoById() {
               resourcesQuery.data.isLoading ||
               profileQuery.data.isLoading
             }
-            toggleFailure={setToggleFailFilter}
             addonsData={{
               [AddonTypes.HELM]: helmChartQuery.data || [],
               [AddonTypes.RESOURCE]: resourcesQuery.data || [],

src/modules/clusters/cluster-information/components/AddonsTable/Addons.tsx

@@ -5,32 +5,26 @@ import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { AddonsTable } from "@/modules/clusters/cluster-information/components/AddonsTable/AddonsTable";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 
 import { addonTypes, AddonTypes } from "@/types/addon.types";
 import { appConfig } from "@/config/app";
 
 interface ResourceTableProps {
   addonsData: any;
   loading: boolean;
-  toggleFailure: (value: boolean) => void;
+
   setPage: (page: number, type: AddonTypes) => void;
 }
 
-export function Addons({
-  addonsData,
-  setPage,
-  loading,
-  toggleFailure,
-}: ResourceTableProps) {
+export function Addons({ addonsData, setPage, loading }: ResourceTableProps) {
   /* Bydefault we show helm charts , this will be hardcoded for now */
   const [activeTab, setActiveTab] = useState<AddonTypes>(AddonTypes.HELM);
 
@@ -88,7 +82,6 @@ export function Addons({
                 <TabsContent key={type} value={type}>
                   <AddonsTable
                     type={type}
-                    toggleFailure={toggleFailure}
                     loading={loading}
                     setPage={setPage}
                     data={addonsData[type]}

src/modules/clusters/cluster-information/components/AddonsTable/AddonsTable.tsx

@@ -17,9 +17,9 @@ import { Button } from "@/components/ui/button";
 import {
   Check,
   ExternalLink,
+  ImageOff,
   MoreHorizontal,
   ServerCrash,
-  Unplug,
 } from "lucide-react";
 import { EmptyData } from "@/components/ui/emptyData";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -31,27 +31,31 @@ import { LoadingTableRow } from "@/components/ui/loadingTableRow";
 import { Badge } from "@/components/ui/badge";
 import { colorFromStatus } from "@/lib/utils";
 import { Checkbox } from "@/components/ui/checkbox";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 export const AddonsTable = ({
   data,
   type,
   setPage,
   loading,
-  toggleFailure,
 }: {
   data: any;
   type: AddonTypes;
-  toggleFailure: (value: boolean) => void;
   setPage: (page: number, type: AddonTypes) => void;
   loading: boolean;
 }) => {
   const navigateRepoURL = (url: string) => {
     window.open(url, "_blank");
   };
+
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
   const [total, setTotal] = useState<number>(0);
   const [page, setUIPage] = useState<number>(appConfig.defaultPage);
   const [rows, setRows] = useState<any>([]);
   const isProfile = type == AddonTypes.PROFILE;
+  const failedOnly = searchParams.get("failure") === "true";
+
   useEffect(() => {
     switch (type) {
       case AddonTypes.HELM:
@@ -69,14 +73,18 @@ export const AddonsTable = ({
       default:
     }
   }, [data]);
+  useEffect(() => {
+    setFailureCheck(failedOnly);
+  }, [failedOnly]);
+
   const handlePageChange = (page: number) => {
-    setPage(page, type);
     setUIPage(page);
+    setPage(page, type);
   };
 
   const [PaginationUI] = usePagination(
     total,
-    page,
+    Number(page),
     handlePageChange,
     appConfig.defaultTableSize,
   );
@@ -103,8 +111,15 @@ export const AddonsTable = ({
 
     { label: "Actions", className: "", isSrOnly: true },
   ];
-  const [failureCheck, setFailureCheck] = useState(false);
+  const [failureCheck, setFailureCheck] = useState<boolean>(failedOnly);
 
+  const handleCheckedChange = (checked: boolean) => {
+    setFailureCheck(checked);
+    searchParams.set("failure", checked.toString());
+    navigate({
+      search: searchParams.toString(),
+    });
+  };
   return (
     <>
       <Table>
@@ -115,10 +130,8 @@ export const AddonsTable = ({
                 {column.isCheckbox && (
                   <Checkbox
                     id="filters"
-                    onCheckedChange={(checked) => {
-                      toggleFailure(!!checked);
-                      setFailureCheck(!!checked);
-                    }}
+                    checked={failureCheck}
+                    onCheckedChange={handleCheckedChange}
                     className={"mx-2 mb-2 text-center"}
                   />
                 )}
@@ -162,9 +175,12 @@ export const AddonsTable = ({
                         </Avatar>
                       ) : (
                         <Avatar>
-                          <AvatarImage src={row.icon} />
+                          <AvatarImage
+                            className="object-contain object-center"
+                            src={row.icon}
+                          />
                           <AvatarFallback>
-                            <Unplug className={"w-4 h-4"} />
+                            <ImageOff className={"w-4 h-4"} />
                           </AvatarFallback>
                         </Avatar>
                       )}
@@ -188,22 +204,18 @@ export const AddonsTable = ({
                       {row.profileName
                         ? row.profileName
                         : row?.profileNames?.map((name: string) => (
-                            <span key={name}>{name}</span>
+                            <div key={name}>{name}</div>
                           ))}
                     </TableCell>
                     {!isProfile && (
                       <TableCell content={row.namespace} className="py-4 ">
-                        <span className={"text-main-500"}>
-                          {" "}
-                          {row.namespace}
-                        </span>
+                        <span> {row.namespace}</span>
                       </TableCell>
                     )}
 
                     <TableCell className="hidden md:table-cell ">
                       {row.chartVersion || row.version || (
                         <Badge className={colorFromStatus(row.status)}>
-                          {" "}
                           {row.status}
                         </Badge>
                       )}

src/modules/clusters/cluster-information/components/LabelsCard.tsx

@@ -1,8 +1,7 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardTitle } from "@/components/ui/card";
 import { Tags } from "lucide-react";
 import { Label } from "@/types/cluster.types";
 import { Badge } from "@/components/ui/badge";
-import { useEffect } from "react";
 
 type LabelsCardProps = {
   labels: Label[] | [];

src/modules/clusters/cluster-information/components/clusterHeading.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { ChevronLeft, RefreshCcw, XCircle } from "lucide-react";
+import { ChevronLeft } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { useNavigate } from "react-router-dom";
 import { Icons } from "@/components/icons";

src/modules/clusters/cluster-information/hooks/useClusterInfo.ts

@@ -9,6 +9,7 @@ import { getItemsToSkip } from "@/api-client/util/getItemsToSkip";
 import { appConfig } from "@/config/app";
 import { useState } from "react";
 import { AddonTypes } from "@/types/addon.types";
+import { useParams, useSearchParams } from "react-router-dom";
 
 const { Endresources, EndhelmChart, EndprofileStatuses } = API_ENDPOINTS;
 
@@ -84,10 +85,12 @@ function useClusterInfo(
   clusterName: string,
   clusterType: ClusterType,
 ) {
+  const [searchParams] = useSearchParams();
+  const failedOnly = searchParams.get("failure") === "true";
   const [helmPage, setHelmPage] = useState(appConfig.defaultPage);
   const [resourcePage, setResourcePage] = useState(appConfig.defaultPage);
   const [profilePage, setProfilePage] = useState(appConfig.defaultPage);
-  const [toggleFailFilter, setToggleFailFilter] = useState(false);
+
   const setPage = (page: number, type: AddonTypes) => {
     switch (type) {
       case AddonTypes.HELM:
@@ -121,18 +124,18 @@ function useClusterInfo(
       queryKey: [
         "profile",
         namespace,
-        toggleFailFilter,
+        failedOnly,
         clusterName,
         clusterType,
-        resourcePage,
+        profilePage,
       ],
       queryFn: () =>
         getClusterProfileStatuses(
           namespace,
           clusterName,
           clusterType,
           profilePage,
-          toggleFailFilter,
+          failedOnly,
         ),
       enabled: !!namespace && !!clusterName && !!clusterType,
       placeholderData: { data: [], isLoading: true, error: null },
@@ -151,7 +154,7 @@ function useClusterInfo(
       placeholderData: { data: {}, isLoading: true, error: null },
     },
   ]);
-  return { queries, setPage, setToggleFailFilter };
+  return { queries, setPage };
 }
 
-export default useClusterInfo;
+export { useClusterInfo };

src/modules/clusters/clusters-list/ClustersPage.tsx

@@ -18,7 +18,7 @@ export default function ClustersPage() {
   const navigate = useNavigate();
   const defaultTab = appConfig.defaultType;
   const defaultPage = appConfig.defaultPage;
-  const { tab: urlTab, page: urlPage } = useParams();
+  const { tab: urlTab, pageNumber: urlPage } = useParams();
   const [searchParams, setSearchParams] = useState<
     Record<string, string | string[]>
   >({});

src/modules/clusters/clusters-list/components/ClusterList.tsx

@@ -1,10 +1,11 @@
-import { ClusterCard } from "@/modules/clusters/clusters-list/components/ClusterCard";
+import {ClusterCard} from "@/modules/clusters/clusters-list/components/ClusterCard";
+
+import {useNavigate, useParams} from "react-router-dom";
+import {ClusterInfoType, ClusterListResponse} from "@/types/cluster.types";
+import {EmptyData} from "@/components/ui/emptyData";
+import {usePagination} from "@/hooks/usePagination";
+import {FC} from "react";
 
-import { useLocation, useNavigate, useParams } from "react-router-dom";
-import { ClusterInfoType, ClusterListResponse } from "@/types/cluster.types";
-import { EmptyData } from "@/components/ui/emptyData";
-import { usePagination } from "@/hooks/usePagination";
-import { FC, useEffect, useState } from "react";
 type ClusterListProps = {
   data: ClusterListResponse;
   page: number;