From 29499404f7a24071e9cd58e2cb1550c36d65173a Mon Sep 17 00:00:00 2001 From: Pierre-Philippe Prevost Date: Fri, 15 Nov 2024 07:42:20 +0100 Subject: [PATCH] feat(pci-kuberbetes): display cluster status (#13802) ref: TAPC-1516 Signed-off-by: Pierre-Philippe Co-authored-by: CDS Translator Agent --- .../pci-kubernetes/src/api/data/kubernetes.ts | 1 + .../src/api/hooks/useKubernetes.ts | 35 +++++++++++---- .../apps/pci-kubernetes/src/helpers/index.ts | 2 + .../src/pages/detail/Detail.page.tsx | 5 ++- .../src/pages/list/useDatagridColumn.spec.tsx | 45 +++++++++---------- .../src/pages/list/useDatagridColumn.tsx | 12 ++++- 6 files changed, 65 insertions(+), 35 deletions(-) diff --git a/packages/manager/apps/pci-kubernetes/src/api/data/kubernetes.ts b/packages/manager/apps/pci-kubernetes/src/api/data/kubernetes.ts index 3302ba0ce48d..e30e8aa76c4e 100644 --- a/packages/manager/apps/pci-kubernetes/src/api/data/kubernetes.ts +++ b/packages/manager/apps/pci-kubernetes/src/api/data/kubernetes.ts @@ -14,6 +14,7 @@ export const getKubernetesCluster = async ( export const getAllKube = async (projectId: string): Promise => { const { data } = await fetchIcebergV6({ route: `/cloud/project/${projectId}/kube`, + disableCache: true, }); return data; }; diff --git a/packages/manager/apps/pci-kubernetes/src/api/hooks/useKubernetes.ts b/packages/manager/apps/pci-kubernetes/src/api/hooks/useKubernetes.ts index b1f6045800ad..83d27a967db5 100644 --- a/packages/manager/apps/pci-kubernetes/src/api/hooks/useKubernetes.ts +++ b/packages/manager/apps/pci-kubernetes/src/api/hooks/useKubernetes.ts @@ -1,11 +1,15 @@ import { applyFilters, Filter } from '@ovh-ux/manager-core-api'; import { PaginationState } from '@ovh-ux/manager-react-components'; -import { useMutation, useQuery } from '@tanstack/react-query'; +import { + UndefinedInitialDataOptions, + useMutation, + useQuery, +} from '@tanstack/react-query'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { TKube } from '@/types'; import queryClient from '@/queryClient'; -import { paginateResults } from '@/helpers'; +import { paginateResults, REFETCH_INTERVAL_DURATION } from '@/helpers'; import { STATUS } from '@/constants'; import { addOidcProvider, @@ -40,10 +44,16 @@ export const getAllKubeQueryKey = (projectId: string) => [ 'kube', ]; -export const useAllKube = (projectId: string) => +export const useAllKube = ( + projectId: string, + options?: Partial>, +) => useQuery({ queryKey: getAllKubeQueryKey(projectId), queryFn: (): Promise> => getAllKube(projectId), + refetchOnMount: 'always', + refetchOnReconnect: 'always', + ...(options || {}), }); export const useKubes = ( @@ -58,7 +68,7 @@ export const useKubes = ( error: allKubeError, isLoading: isAllKubeLoading, isPending: isAllKubePending, - } = useAllKube(projectId); + } = useAllKube(projectId, { refetchInterval: REFETCH_INTERVAL_DURATION }); const { data: privateNetworks, @@ -102,11 +112,15 @@ export function getKubernetesClusterQuery(projectId: string, kubeId: string) { return ['project', projectId, 'kube', kubeId]; } -export const useKubernetesCluster = (projectId: string, kubeId: string) => +export const useKubernetesCluster = ( + projectId: string, + kubeId: string, + options?: Partial>, +) => useQuery({ queryKey: getKubernetesClusterQuery(projectId, kubeId), queryFn: () => getKubernetesCluster(projectId, kubeId), - select: (data) => { + select: (data: TKube) => { const { admissionPlugins } = data.customization.apiServer || {}; const plugins = mapPluginsFromArrayToObject(admissionPlugins); return { @@ -117,6 +131,7 @@ export const useKubernetesCluster = (projectId: string, kubeId: string) => }), }; }, + ...(options || {}), }); type RenameKubernetesClusterProps = { @@ -213,7 +228,11 @@ export const useUpdateKubePolicy = ({ }; }; -export const useKubeDetail = (projectId: string, kubeId: string) => { +export const useKubeDetail = ( + projectId: string, + kubeId: string, + options?: Partial>, +) => { const { t } = useTranslation('listing'); const { @@ -221,7 +240,7 @@ export const useKubeDetail = (projectId: string, kubeId: string) => { error: kubeError, isLoading: isKubeLoading, isPending: isKubePending, - } = useKubernetesCluster(projectId, kubeId); + } = useKubernetesCluster(projectId, kubeId, options); const { data: privateNetworks, diff --git a/packages/manager/apps/pci-kubernetes/src/helpers/index.ts b/packages/manager/apps/pci-kubernetes/src/helpers/index.ts index 62d628f90c2c..91baea6d9f5e 100644 --- a/packages/manager/apps/pci-kubernetes/src/helpers/index.ts +++ b/packages/manager/apps/pci-kubernetes/src/helpers/index.ts @@ -1,5 +1,7 @@ import { PaginationState } from '@ovh-ux/manager-react-components'; +export const REFETCH_INTERVAL_DURATION = 15_000; + export const compareFunction = (key: keyof T) => (a: T, b: T) => { const aValue = a[key] || ''; const bValue = b[key] || ''; diff --git a/packages/manager/apps/pci-kubernetes/src/pages/detail/Detail.page.tsx b/packages/manager/apps/pci-kubernetes/src/pages/detail/Detail.page.tsx index 6b3d97dc3fb9..165bf30c6b3f 100644 --- a/packages/manager/apps/pci-kubernetes/src/pages/detail/Detail.page.tsx +++ b/packages/manager/apps/pci-kubernetes/src/pages/detail/Detail.page.tsx @@ -20,6 +20,7 @@ import TabsPanel from '@/components/detail/TabsPanel.component'; import { useKubeDetail } from '@/api/hooks/useKubernetes'; import { TRACKING_TABS } from '@/tracking.constants'; import { useAppStore } from '@/store'; +import { REFETCH_INTERVAL_DURATION } from '@/helpers'; export default function DetailPage() { const { t } = useTranslation('listing'); @@ -74,7 +75,9 @@ export default function DetailPage() { }, ]; - const { data: kubeDetail } = useKubeDetail(projectId, kubeId); + const { data: kubeDetail } = useKubeDetail(projectId, kubeId, { + refetchInterval: REFETCH_INTERVAL_DURATION, + }); useEffect(() => { const activeTab = tabs.find((tab) => location.pathname.startsWith(tab.to)); diff --git a/packages/manager/apps/pci-kubernetes/src/pages/list/useDatagridColumn.spec.tsx b/packages/manager/apps/pci-kubernetes/src/pages/list/useDatagridColumn.spec.tsx index 301ddae13666..679f9ecfef20 100644 --- a/packages/manager/apps/pci-kubernetes/src/pages/list/useDatagridColumn.spec.tsx +++ b/packages/manager/apps/pci-kubernetes/src/pages/list/useDatagridColumn.spec.tsx @@ -1,36 +1,31 @@ import { renderHook } from '@testing-library/react'; import { useDatagridColumn } from './useDatagridColumn'; +const test = [ + ['name', 'kube_list_name'], + ['id', 'kube_list_id'], + ['region', 'kube_list_region'], + ['attachedTo', 'kube_list_network_attached'], + ['version', 'kube_list_version'], + ['status', 'kube:kube_service_cluster_status'], + ['actions', ''], +]; +const columnCount = test.length; + describe('useDatagridColumn', () => { - it('should return the correct columns', () => { + it.each(test)('should return the correct column for %s', (id, label) => { const { result } = renderHook(() => useDatagridColumn()); - const columns = result.current; - expect(columns).toHaveLength(6); - - const nameColumn = columns.find((col) => col.id === 'name'); - expect(nameColumn).toBeDefined(); - expect(nameColumn?.label).toBe('kube_list_name'); - - const idColumn = columns.find((col) => col.id === 'id'); - expect(idColumn).toBeDefined(); - expect(idColumn?.label).toBe('kube_list_id'); - - const regionColumn = columns.find((col) => col.id === 'region'); - expect(regionColumn).toBeDefined(); - expect(regionColumn?.label).toBe('kube_list_region'); - - const attachedToColumn = columns.find((col) => col.id === 'attachedTo'); - expect(attachedToColumn).toBeDefined(); - expect(attachedToColumn?.label).toBe('kube_list_network_attached'); + const column = columns.find((col) => col.id === id); + expect(column).toBeDefined(); + expect(column.label).toBe(label); + }); - const versionColumn = columns.find((col) => col.id === 'version'); - expect(versionColumn).toBeDefined(); - expect(versionColumn?.label).toBe('kube_list_version'); + it(`should return ${columnCount} columns`, () => { + const { result } = renderHook(() => useDatagridColumn()); + const columns = result.current; - const actionsColumn = columns.find((col) => col.id === 'actions'); - expect(actionsColumn).toBeDefined(); - expect(actionsColumn?.label).toBe(''); + expect(columns).toHaveLength(columnCount); }); }); diff --git a/packages/manager/apps/pci-kubernetes/src/pages/list/useDatagridColumn.tsx b/packages/manager/apps/pci-kubernetes/src/pages/list/useDatagridColumn.tsx index e2a7a17c1d00..f76131478da9 100644 --- a/packages/manager/apps/pci-kubernetes/src/pages/list/useDatagridColumn.tsx +++ b/packages/manager/apps/pci-kubernetes/src/pages/list/useDatagridColumn.tsx @@ -9,9 +9,10 @@ import { useTranslation } from 'react-i18next'; import { useHref } from 'react-router-dom'; import ActionsComponent from '@/components/listing/actions.component'; import { TKube } from '@/types'; +import ClusterStatus from '@/components/service/ClusterStatus.component'; export const useDatagridColumn = () => { - const { t } = useTranslation('listing'); + const { t } = useTranslation(['listing', 'kube']); const columns: DatagridColumn[] = [ { @@ -58,6 +59,15 @@ export const useDatagridColumn = () => { ), label: t('kube_list_version'), }, + { + id: 'status', + cell: (props: TKube) => ( + + + + ), + label: t('kube:kube_service_cluster_status'), + }, { id: 'actions', cell: (props: TKube) => (