From 0452bb85d5a4cb2984d8ca1bba947b7997f28e04 Mon Sep 17 00:00:00 2001 From: Safouen Turki Date: Mon, 30 Sep 2024 22:06:02 +0100 Subject: [PATCH] fix issues --- manifests/dashboard.yaml | 8 ++-- src/api-client/apiClient.ts | 1 - .../cluster-information/ClusterInfoById.tsx | 6 +-- .../components/AddonsTable/Addons.tsx | 13 ++--- .../components/AddonsTable/AddonsTable.tsx | 48 ++++++++++++------- .../components/LabelsCard.tsx | 3 +- .../components/clusterHeading.tsx | 2 +- .../hooks/useClusterInfo.ts | 15 +++--- .../clusters/clusters-list/ClustersPage.tsx | 2 +- .../clusters-list/components/ClusterList.tsx | 13 ++--- 10 files changed, 59 insertions(+), 52 deletions(-) diff --git a/manifests/dashboard.yaml b/manifests/dashboard.yaml index c601349..5371fdf 100644 --- a/manifests/dashboard.yaml +++ b/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 diff --git a/src/api-client/apiClient.ts b/src/api-client/apiClient.ts index 12ef360..ff8eaa1 100644 --- a/src/api-client/apiClient.ts +++ b/src/api-client/apiClient.ts @@ -1,5 +1,4 @@ import axios from "axios"; -import { toast } from "sonner"; const client = axios.create({ baseURL: "/api", diff --git a/src/modules/clusters/cluster-information/ClusterInfoById.tsx b/src/modules/clusters/cluster-information/ClusterInfoById.tsx index 1c636f5..61bbc4c 100644 --- a/src/modules/clusters/cluster-information/ClusterInfoById.tsx +++ b/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 || [], diff --git a/src/modules/clusters/cluster-information/components/AddonsTable/Addons.tsx b/src/modules/clusters/cluster-information/components/AddonsTable/Addons.tsx index 8657fe5..06e4aed 100644 --- a/src/modules/clusters/cluster-information/components/AddonsTable/Addons.tsx +++ b/src/modules/clusters/cluster-information/components/AddonsTable/Addons.tsx @@ -5,7 +5,6 @@ import { Card, CardContent, CardDescription, - CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; @@ -13,7 +12,7 @@ import { 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"; @@ -21,16 +20,11 @@ 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.HELM); @@ -88,7 +82,6 @@ export function Addons({ 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(0); const [page, setUIPage] = useState(appConfig.defaultPage); const [rows, setRows] = useState([]); 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(failedOnly); + const handleCheckedChange = (checked: boolean) => { + setFailureCheck(checked); + searchParams.set("failure", checked.toString()); + navigate({ + search: searchParams.toString(), + }); + }; return ( <> @@ -115,10 +130,8 @@ export const AddonsTable = ({ {column.isCheckbox && ( { - toggleFailure(!!checked); - setFailureCheck(!!checked); - }} + checked={failureCheck} + onCheckedChange={handleCheckedChange} className={"mx-2 mb-2 text-center"} /> )} @@ -162,9 +175,12 @@ export const AddonsTable = ({ ) : ( - + - + )} @@ -188,22 +204,18 @@ export const AddonsTable = ({ {row.profileName ? row.profileName : row?.profileNames?.map((name: string) => ( - {name} +
{name}
))} {!isProfile && ( - - {" "} - {row.namespace} - + {row.namespace} )} {row.chartVersion || row.version || ( - {" "} {row.status} )} diff --git a/src/modules/clusters/cluster-information/components/LabelsCard.tsx b/src/modules/clusters/cluster-information/components/LabelsCard.tsx index 102f988..aae4300 100644 --- a/src/modules/clusters/cluster-information/components/LabelsCard.tsx +++ b/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[] | []; diff --git a/src/modules/clusters/cluster-information/components/clusterHeading.tsx b/src/modules/clusters/cluster-information/components/clusterHeading.tsx index 10c8cb1..d509cc9 100644 --- a/src/modules/clusters/cluster-information/components/clusterHeading.tsx +++ b/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"; diff --git a/src/modules/clusters/cluster-information/hooks/useClusterInfo.ts b/src/modules/clusters/cluster-information/hooks/useClusterInfo.ts index abb3a9b..4f7b8ee 100644 --- a/src/modules/clusters/cluster-information/hooks/useClusterInfo.ts +++ b/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,10 +124,10 @@ function useClusterInfo( queryKey: [ "profile", namespace, - toggleFailFilter, + failedOnly, clusterName, clusterType, - resourcePage, + profilePage, ], queryFn: () => getClusterProfileStatuses( @@ -132,7 +135,7 @@ function useClusterInfo( 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 }; diff --git a/src/modules/clusters/clusters-list/ClustersPage.tsx b/src/modules/clusters/clusters-list/ClustersPage.tsx index 05a2bb7..9002ba4 100644 --- a/src/modules/clusters/clusters-list/ClustersPage.tsx +++ b/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 >({}); diff --git a/src/modules/clusters/clusters-list/components/ClusterList.tsx b/src/modules/clusters/clusters-list/components/ClusterList.tsx index b13d2fe..5f408bb 100644 --- a/src/modules/clusters/clusters-list/components/ClusterList.tsx +++ b/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;