feat(hpc-vmware-managed-vcd): add auto refresh on updates

desc: new hook, refacto Signed-off-by: Paul Dickerson <[email protected]>
ovh · Oct 4, 2024 · e886218 · e886218
1 parent 0d364f1
commit e886218
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 16 deletions.
diff --git a/.../hpc-vmware-managed-vcd/src/components/datagrid/container/DatagridContainer.component.tsx b/.../hpc-vmware-managed-vcd/src/components/datagrid/container/DatagridContainer.component.tsx
@@ -11,26 +11,32 @@ import { useNavigate } from 'react-router-dom';
 import Loading from '@/components/loading/Loading.component';
 import TDatagridRoute from '@/types/datagrid-route.type';
 import { icebergListingQueryKey } from './DatagridContainer.constants';
+import { useAutoRefetch } from '@/data/hooks/useAutoRefetch';
+import {
+  hasResourceUpdatingTargetSpec,
+  UpdatableResource,
+} from '@/utils/getRefetchConditions';
 
 export type TDatagridContainerProps = {
   route: TDatagridRoute;
   title: string;
   isEmbedded?: boolean;
-  containerId: string;
+  queryKey: string[];
   columns: any[];
   orderButton?: React.JSX.Element;
 };
 
 export default function DatagridContainer({
   title,
-  containerId,
+  queryKey,
   isEmbedded = false,
   route: { api, onboarding },
   columns,
   orderButton,
 }: Readonly<TDatagridContainerProps>) {
   const [flattenData, setFlattenData] = useState<Record<string, unknown>[]>([]);
   const navigate = useNavigate();
+  const listingQueryKey = [...queryKey, icebergListingQueryKey];
 
   const {
     data,
@@ -44,7 +50,15 @@ export default function DatagridContainer({
     setSorting,
   } = useResourcesIcebergV2({
     route: api,
-    queryKey: [icebergListingQueryKey, containerId],
+    queryKey: listingQueryKey,
+  });
+
+  useAutoRefetch({
+    queryKeys: listingQueryKey,
+    condition: hasResourceUpdatingTargetSpec(
+      (flattenData as unknown) as UpdatableResource[],
+    ),
+    interval: 4000,
   });
 
   useEffect(() => {

diff --git a/.../apps/hpc-vmware-managed-vcd/src/components/datagrid/container/DatagridContainer.spec.tsx b/.../apps/hpc-vmware-managed-vcd/src/components/datagrid/container/DatagridContainer.spec.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { DataGridTextCell } from '@ovh-ux/manager-react-components';
 import { render } from '@testing-library/react';
 import { describe, vi } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import DatagridContainer, {
   TDatagridContainerProps,
 } from './DatagridContainer.component';
@@ -40,7 +41,12 @@ vi.mock('@ovh-ux/manager-react-components', async (managerComonents) => {
 });
 
 const renderComponent = (props: TDatagridContainerProps) => {
-  return render(<DatagridContainer {...props} />);
+  const queryClient = new QueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <DatagridContainer {...props} />
+    </QueryClientProvider>,
+  );
 };
 
 describe('DatagridContainer component unit test suite', () => {
@@ -56,7 +62,7 @@ describe('DatagridContainer component unit test suite', () => {
           api: 'stubapi',
           onboarding: 'onboarding',
         },
-        containerId: 'containerId',
+        queryKey: ['containerId'],
         columns: [
           {
             id: 'id',

diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/data/hooks/useAutoRefetch.ts b/packages/manager/apps/hpc-vmware-managed-vcd/src/data/hooks/useAutoRefetch.ts
@@ -0,0 +1,39 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+type AutoRefetchProps = {
+  queryKeys: string[] | string[][];
+  condition: boolean;
+  interval?: number;
+};
+
+export const useAutoRefetch = ({
+  queryKeys,
+  condition,
+  interval = 10_000,
+}: AutoRefetchProps) => {
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (!condition) return;
+
+    const refetchQueries = () => {
+      if (Array.isArray(queryKeys[0])) {
+        (queryKeys as string[][]).forEach((queryKey) =>
+          queryClient.invalidateQueries({ queryKey }),
+        );
+      } else {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys as string[],
+        });
+      }
+    };
+
+    const refetchInterval = setInterval(() => refetchQueries(), interval);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      clearInterval(refetchInterval);
+    };
+  }, [condition, interval, queryKeys, queryClient]);
+};
diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/data/hooks/useUpdateVcdDatacentre.ts b/packages/manager/apps/hpc-vmware-managed-vcd/src/data/hooks/useUpdateVcdDatacentre.ts
@@ -5,9 +5,11 @@ import {
   updateVdcDetails,
 } from '../api/hpc-vmware-managed-vcd-datacentre';
 import { VCD_ORGANIZATION_ROUTE } from '../api/hpc-vmware-managed-vcd.constants';
-import { getVcdDatacentreQueryKey } from './useManagedVcdDatacentres';
+import {
+  getVcdDatacentreQueryKey,
+  getVcdDatacentresQueryKey,
+} from './useManagedVcdDatacentres';
 import { icebergListingQueryKey } from '@/components/datagrid/container/DatagridContainer.constants';
-import { getVdcListingContainerId } from '@/pages/listing/datacentres/datacentres.page';
 
 const updateVdcDetailsQueryKey = ({
   id,
@@ -38,7 +40,7 @@ export const useUpdateVdcDetails = ({
         queryKey: getVcdDatacentreQueryKey(id, vdcId),
       });
       queryClient.invalidateQueries({
-        queryKey: [icebergListingQueryKey, getVdcListingContainerId(id)],
+        queryKey: [...getVcdDatacentresQueryKey(id), icebergListingQueryKey],
         exact: true,
       });
       onSuccess?.();

diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/data/hooks/useUpdateVcdOrganization.ts b/packages/manager/apps/hpc-vmware-managed-vcd/src/data/hooks/useUpdateVcdOrganization.ts
@@ -33,7 +33,7 @@ export const useUpdateVcdOrganizationDetails = ({
         queryKey: getVcdOrganizationQueryKey(id),
       });
       queryClient.invalidateQueries({
-        queryKey: [icebergListingQueryKey, organizationListingContainerId],
+        queryKey: [organizationListingContainerId, icebergListingQueryKey],
         exact: true,
       });
       onSuccess?.();

diff --git a/...r/apps/hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/DatacentreDashboard.page.tsx b/...r/apps/hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/DatacentreDashboard.page.tsx
@@ -3,15 +3,30 @@ import { useParams, useResolvedPath } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { BreadcrumbItem } from '@/hooks/breadcrumb/useBreadcrumb';
 import VcdDashboardLayout from '@/components/dashboard/layout/VcdDashboardLayout.component';
-import { useManagedVcdDatacentre } from '@/data/hooks/useManagedVcdDatacentres';
+import {
+  getVcdDatacentreQueryKey,
+  getVcdDatacentresQueryKey,
+  useManagedVcdDatacentre,
+} from '@/data/hooks/useManagedVcdDatacentres';
 import useManagedVcdOrganization from '@/data/hooks/useManagedVcdOrganization';
 import { COMPUTE_TITLE, STORAGE_TITLE } from './DatacentreDashboard.constant';
+import { useAutoRefetch } from '@/data/hooks/useAutoRefetch';
+import { isUpdatingTargetSpec } from '@/utils/getRefetchConditions';
+import { icebergListingQueryKey } from '@/components/datagrid/container/DatagridContainer.constants';
 
 function DatacentreDashboardPage() {
   const { id, vdcId } = useParams();
   const { t } = useTranslation('dashboard');
   const { data: vcdDatacentre } = useManagedVcdDatacentre(id, vdcId);
   const { data: vcdOrganization } = useManagedVcdOrganization({ id });
+  useAutoRefetch({
+    queryKeys: [
+      getVcdDatacentreQueryKey(id, vdcId),
+      [...getVcdDatacentresQueryKey(id), icebergListingQueryKey],
+    ],
+    condition: isUpdatingTargetSpec(vcdDatacentre?.data),
+    interval: 4000,
+  });
 
   const tabsList = [
     {

diff --git a/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/compute/DatacentreCompute.page.tsx b/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/compute/DatacentreCompute.page.tsx
@@ -86,7 +86,7 @@ export default function ComputeListingPage() {
   return (
     <DatagridContainer
       title={VHOSTS_TITLE}
-      containerId={`compute-${id}-${vdcId}`}
+      queryKey={[`compute-${id}-${vdcId}`]}
       columns={columns}
       route={{
         api: getVcdDatacentreComputeRoute(id, vdcId),

diff --git a/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/storage/DatacentreStorage.page.tsx b/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/storage/DatacentreStorage.page.tsx
@@ -95,7 +95,7 @@ export default function StorageListingPage() {
   return (
     <DatagridContainer
       title={STORAGE_TITLE}
-      containerId={`storage-${id}-${vdcId}`}
+      queryKey={[`storage-${id}-${vdcId}`]}
       columns={columns}
       route={{
         api: getVcdDatacentreStorageRoute(id, vdcId),

diff --git a/...es/manager/apps/hpc-vmware-managed-vcd/src/pages/listing/datacentres/datacentres.page.tsx b/...es/manager/apps/hpc-vmware-managed-vcd/src/pages/listing/datacentres/datacentres.page.tsx
@@ -8,8 +8,7 @@ import DatagridContainer, {
 import { urls } from '@/routes/routes.constant';
 import IVcdDatacentre from '@/types/vcd-datacenter.interface';
 import { getVcdDatacentresRoute } from '@/data/api/hpc-vmware-managed-vcd-datacentre';
-
-export const getVdcListingContainerId = (id: string) => `vdcs-${id}`;
+import { getVcdDatacentresQueryKey } from '@/data/hooks/useManagedVcdDatacentres';
 
 /* ========= datagrid cells ========= */
 const DatagridIdCell = (vcdDatacentre: IVcdDatacentre) => {
@@ -105,7 +104,7 @@ export default function DatacentresListing() {
 
   const datagridProps: TDatagridContainerProps = {
     title: tVdc('managed_vcd_vdc_title'),
-    containerId: getVdcListingContainerId(id),
+    queryKey: getVcdDatacentresQueryKey(id),
     isEmbedded: true,
     route: {
       api: getVcdDatacentresRoute(id),

diff --git a/...anager/apps/hpc-vmware-managed-vcd/src/pages/listing/organizations/Organizations.page.tsx b/...anager/apps/hpc-vmware-managed-vcd/src/pages/listing/organizations/Organizations.page.tsx
@@ -81,7 +81,7 @@ export default function Listing() {
 
   const datagridProps: TDatagridContainerProps = {
     title: t('managed_vcd_listing_title'),
-    containerId: organizationListingContainerId,
+    queryKey: [organizationListingContainerId],
     route: {
       api: VCD_ORGANIZATION_ROUTE,
       onboarding: urls.onboarding,

diff --git a/packages/manager/apps/hpc-vmware-managed-vcd/src/utils/getRefetchConditions.ts b/packages/manager/apps/hpc-vmware-managed-vcd/src/utils/getRefetchConditions.ts
@@ -0,0 +1,12 @@
+import IVcdDatacentre from '@/types/vcd-datacenter.interface';
+import IVcdOrganization from '@/types/vcd-organization.interface';
+
+export type UpdatableResource = IVcdOrganization | IVcdDatacentre;
+
+const targetSpecKey = 'configure-target-spec';
+
+export const isUpdatingTargetSpec = (resource: UpdatableResource) =>
+  !!resource?.currentTasks?.some((task) => task.type === targetSpecKey);
+
+export const hasResourceUpdatingTargetSpec = (resources: UpdatableResource[]) =>
+  !!resources?.some((resource) => isUpdatingTargetSpec(resource));