feat(pci-kuberbetes): display cluster status (#13802)

ref: TAPC-1516 Signed-off-by: Pierre-Philippe <[email protected]> Co-authored-by: CDS Translator Agent <[email protected]>
ovh · Nov 15, 2024 · 2949940 · 2949940
1 parent 63f52c4
commit 2949940
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 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
@@ -14,6 +14,7 @@ export const getKubernetesCluster = async (
 export const getAllKube = async (projectId: string): Promise<TKube[]> => {
   const { data } = await fetchIcebergV6<TKube>({
     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
@@ -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<UndefinedInitialDataOptions<TKube[]>>,
+) =>
   useQuery({
     queryKey: getAllKubeQueryKey(projectId),
     queryFn: (): Promise<Required<TKube[]>> => 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<UndefinedInitialDataOptions<TKube>>,
+) =>
   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,15 +228,19 @@ export const useUpdateKubePolicy = ({
   };
 };
 
-export const useKubeDetail = (projectId: string, kubeId: string) => {
+export const useKubeDetail = (
+  projectId: string,
+  kubeId: string,
+  options?: Partial<UndefinedInitialDataOptions<TKube>>,
+) => {
   const { t } = useTranslation('listing');
 
   const {
     data: kubeDetail,
     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
@@ -1,5 +1,7 @@
 import { PaginationState } from '@ovh-ux/manager-react-components';
 
+export const REFETCH_INTERVAL_DURATION = 15_000;
+
 export const compareFunction = <T>(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
@@ -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
@@ -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
@@ -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<TKube>[] = [
     {
@@ -58,6 +59,15 @@ export const useDatagridColumn = () => {
       ),
       label: t('kube_list_version'),
     },
+    {
+      id: 'status',
+      cell: (props: TKube) => (
+        <DataGridTextCell>
+          <ClusterStatus status={props.status} />
+        </DataGridTextCell>
+      ),
+      label: t('kube:kube_service_cluster_status'),
+    },
     {
       id: 'actions',
       cell: (props: TKube) => (