ZKUI-414: Refactor accounts locations and endpoints data retrieval

scality · Nov 17, 2023 · 16fc444 · 16fc444
1 parent f01fda3
commit 16fc444
Show file tree

Hide file tree

Showing 24 changed files with 352 additions and 259 deletions.
diff --git a/src/react/FederableApp.tsx b/src/react/FederableApp.tsx
@@ -9,7 +9,7 @@ import {
   useConfig,
 } from './next-architecture/ui/ConfigProvider';
 import { AuthProvider } from './next-architecture/ui/AuthProvider';
-import { AccountsAdapterProvider } from './next-architecture/ui/AccountAdapterProvider';
+import { AccountsLocationsEndpointsAdapterProvider } from './next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { AccessibleAccountsAdapterProvider } from './next-architecture/ui/AccessibleAccountsAdapterProvider';
 import MetricsAdapterProvider from './next-architecture/ui/MetricsAdapterProvider';
 import { LocationAdapterProvider } from './next-architecture/ui/LocationAdapterProvider';
@@ -39,7 +39,7 @@ const FederableApp = () => {
     <ConfigProvider>
       <InternalRouter>
         <AuthProvider>
-          <AccountsAdapterProvider>
+          <AccountsLocationsEndpointsAdapterProvider>
             <LocationAdapterProvider>
               <AccessibleAccountsAdapterProvider>
                 <MetricsAdapterProvider>
@@ -48,7 +48,7 @@ const FederableApp = () => {
                 </MetricsAdapterProvider>
               </AccessibleAccountsAdapterProvider>
             </LocationAdapterProvider>
-          </AccountsAdapterProvider>
+          </AccountsLocationsEndpointsAdapterProvider>
         </AuthProvider>
       </InternalRouter>
     </ConfigProvider>

diff --git a/src/react/account/AccountLocations.tsx b/src/react/account/AccountLocations.tsx
@@ -11,18 +11,17 @@ import { Warning } from '../ui-elements/Warning';
 import { Icon, Loader, Stack } from '@scality/core-ui';
 import { Table } from '@scality/core-ui/dist/next';
 import { Search } from '../ui-elements/Table';
-import { useAccountsAdapter } from '../next-architecture/ui/AccountAdapterProvider';
+import { useAccountsLocationsEndpointsAdapter } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { CenterredSecondaryText } from './iamAttachment/AttachmentTable';
 import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
 
 export function AccountLocations() {
-  const locationsAdapter = useLocationAdapter();
   const metricsAdapter = useMetricsAdapter();
-  const accountsAdapter = useAccountsAdapter();
+  const accountsLocationsEndpointsAdapter =
+    useAccountsLocationsEndpointsAdapter();
   const { locations } = useListLocationsForCurrentAccount({
-    locationsAdapter,
     metricsAdapter,
-    accountsAdapter,
+    accountsLocationsEndpointsAdapter,
   });
 
   const data = useMemo(() => {

diff --git a/src/react/account/details/properties/AccountInfo.tsx b/src/react/account/details/properties/AccountInfo.tsx
@@ -20,8 +20,8 @@ import SecretKeyModal from './SecretKeyModal';
 import { TitleRow } from '../../../ui-elements/TableKeyValue';
 import { formatDate } from '../../../utils';
 import { useAuthGroups, useRolePathName } from '../../../utils/hooks';
-import { queries } from '../../../next-architecture/domain/business/accounts';
-import { useAccountsAdapter } from '../../../next-architecture/ui/AccountAdapterProvider';
+import { useAccountsLocationsAndEndpoints } from '../../../next-architecture/domain/business/accounts';
+import { useAccountsLocationsEndpointsAdapter } from '../../../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { useInstanceId } from '../../../next-architecture/ui/AuthProvider';
 
 const TableContainer = styled.div`
@@ -47,7 +47,10 @@ function AccountInfo({ account }: Props) {
     dispatch(openAccountDeleteDialog());
   };
 
-  const accountsAdapter = useAccountsAdapter();
+  const accountsLocationsEndpointsAdapter =
+    useAccountsLocationsEndpointsAdapter();
+  const { refetchAccountsLocationsEndpoints } =
+    useAccountsLocationsAndEndpoints({ accountsLocationsEndpointsAdapter });
   const instanceId = useInstanceId();
   const deleteMutation = useMutation({
     mutationFn: () => {
@@ -63,7 +66,7 @@ function AccountInfo({ account }: Props) {
       );
     },
     onSuccess: () => {
-      queryClient.resetQueries(queries.listAccounts(accountsAdapter).queryKey);
+      refetchAccountsLocationsEndpoints();
     },
   });
 

diff --git a/src/react/databrowser/buckets/BucketCreate.tsx b/src/react/databrowser/buckets/BucketCreate.tsx
@@ -29,6 +29,8 @@ import {
   useChangeBucketVersionning,
   useCreateBucket,
 } from '../../next-architecture/domain/business/buckets';
+import { useAccountsLocationsEndpointsAdapter } from '../../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
+import { useAccountsLocationsAndEndpoints } from '../../next-architecture/domain/business/accounts';
 
 const helpNonAsyncLocation =
   'Selected Storage Location does not support Async Metadata updates.';
@@ -88,25 +90,35 @@ function BucketCreate() {
   const loading = useSelector(
     (state: AppState) => state.networkActivity.counter > 0,
   );
-  const locations = useSelector(
-    (state: AppState) => state.configuration.latest?.locations,
-  );
+  const accountsLocationsEndpointsAdapter =
+    useAccountsLocationsEndpointsAdapter();
+  const { accountsLocationsAndEndpoints, status: overlayStatus } =
+    useAccountsLocationsAndEndpoints({ accountsLocationsEndpointsAdapter });
+
   const capabilities = useSelector(
     (state: AppState) => state.instanceStatus.latest.state.capabilities,
   );
   const features = useSelector((state: AppState) => state.auth.config.features);
+  const watchedLocation = accountsLocationsAndEndpoints?.locations.find(
+    (l) => l.name === watchLocationName,
+  );
   const isAsyncNotificationReady = useMemo(
     () =>
       !!watchLocationName &&
-      !!locations &&
-      !!locations[watchLocationName] &&
-      isIngestLocation(locations[watchLocationName], capabilities),
-    [watchLocationName, locations, capabilities],
+      !!watchedLocation &&
+      isIngestLocation(watchedLocation, capabilities),
+    [watchLocationName, accountsLocationsAndEndpoints?.locations, capabilities],
   );
 
-  const isLocationAzureOrGcpSelected = (locationName: string) =>
-    locations?.[locationName]?.locationType === 'location-azure-v1' ||
-    locations?.[locationName]?.locationType === 'location-gcp-v1';
+  const isLocationAzureOrGcpSelected = (locationName: string) => {
+    const location = accountsLocationsAndEndpoints?.locations.find(
+      (l) => l.name === locationName,
+    );
+    return (
+      location?.type === 'location-azure-v1' ||
+      location?.type === 'location-gcp-v1'
+    );
+  };
 
   const isWatchedLocationAzureOrGCPSelected =
     isLocationAzureOrGcpSelected(watchLocationName);
@@ -323,16 +335,18 @@ function BucketCreate() {
                       value={locationName}
                       size="1"
                     >
-                      {locations &&
-                        Object.values(locations).map((location, i) => (
-                          <Select.Option
-                            key={i}
-                            value={location.name}
-                            disabled={location?.isCold}
-                          >
-                            {renderLocation(location)}
-                          </Select.Option>
-                        ))}
+                      {accountsLocationsAndEndpoints?.locations &&
+                        accountsLocationsAndEndpoints?.locations.map(
+                          (location, i) => (
+                            <Select.Option
+                              key={i}
+                              value={location.name}
+                              disabled={location?.isCold}
+                            >
+                              {renderLocation(location)}
+                            </Select.Option>
+                          ),
+                        )}
                     </Select>
                   );
                 }}

diff --git a/src/react/locations/LocationEditor.tsx b/src/react/locations/LocationEditor.tsx
@@ -34,6 +34,8 @@ import {
 import { useQueryClient } from 'react-query';
 import { queries } from '../next-architecture/domain/business/locations';
 import { useLocationAdapter } from '../next-architecture/ui/LocationAdapterProvider';
+import { useAccountsLocationsAndEndpoints } from '../next-architecture/domain/business/accounts';
+import { useAccountsLocationsEndpointsAdapter } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 
 //Temporary hack waiting for the layout
 const StyledForm = styled(Form)`
@@ -49,8 +51,6 @@ function LocationEditor() {
   const dispatch = useDispatch();
   const history = useHistory();
   const { locationName } = useParams<{ locationName: string }>();
-  const queryClient = useQueryClient();
-  const locationsAdapter = useLocationAdapter();
   const locationEditing = useSelector(
     (state: AppState) =>
       state.configuration.latest.locations[locationName || ''],
@@ -68,6 +68,10 @@ function LocationEditor() {
   const loading = useSelector(
     (state: AppState) => state.networkActivity.counter > 0,
   );
+  const accountsLocationsAndEndpointsAdapter =
+    useAccountsLocationsEndpointsAdapter();
+  const { refetchAccountsLocationsEndpoints } =
+    useAccountsLocationsAndEndpoints({ accountsLocationsAndEndpointsAdapter });
   const editingExisting = !!(locationEditing && locationEditing.objectId);
   const [location, setLocation] = useState(
     convertToForm({ ...newLocationDetails(), ...locationEditing }),
@@ -111,7 +115,7 @@ function LocationEditor() {
       };
     }
     dispatch(saveLocation(convertToLocation(submitLocation), history));
-    queryClient.resetQueries(queries.listLocations(locationsAdapter).queryKey);
+    refetchAccountsLocationsEndpoints();
   };
 
   const cancel = (e) => {

diff --git a/src/react/locations/LocationsList.tsx b/src/react/locations/LocationsList.tsx
@@ -3,11 +3,11 @@ import { useHistory } from 'react-router-dom';
 import { CellProps, CoreUIColumn } from 'react-table';
 import { useDispatch, useSelector } from 'react-redux';
 import { Icon, IconHelp, Stack, Wrap } from '@scality/core-ui';
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation } from 'react-query';
 
 import { Replication } from '../../types/config';
 import { HelpLocationTargetBucket } from '../ui-elements/Help';
-import { canDeleteLocation, canEditLocation } from './utils';
+import { canDeleteLocation } from './utils';
 import { deleteLocation } from '../actions';
 import type { AppState } from '../../types/state';
 import DeleteConfirmation from '../ui-elements/DeleteConfirmation';
@@ -19,16 +19,17 @@ import { ColdStorageIcon } from '../ui-elements/ColdStorageIcon';
 import { getLocationType } from '../utils/storageOptions';
 import { BucketWorkflowTransitionV2 } from '../../js/managementClient/api';
 import { PauseAndResume } from './PauseAndResume';
-import {
-  queries,
-  useListLocations,
-} from '../next-architecture/domain/business/locations';
+import { useListLocations } from '../next-architecture/domain/business/locations';
 import { useLocationAdapter } from '../next-architecture/ui/LocationAdapterProvider';
 import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvider';
 import { Location } from '../next-architecture/domain/entities/location';
-import { useListAccounts } from '../next-architecture/domain/business/accounts';
+import {
+  useAccountsLocationsAndEndpoints,
+  useListAccounts,
+} from '../next-architecture/domain/business/accounts';
 import { useAccessibleAccountsAdapter } from '../next-architecture/ui/AccessibleAccountsAdapterProvider';
 import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
+import { useAccountsLocationsEndpointsAdapter } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 
 const ActionButtons = ({
   rowValues,
@@ -42,24 +43,18 @@ const ActionButtons = ({
   const { name: locationName } = rowValues;
   const dispatch = useDispatch();
   const history = useHistory();
-  const locations = useSelector(
-    (state: AppState) => state.configuration.latest.locations,
-  );
   const buckets = useSelector((state: AppState) => state.stats.bucketList);
-  const endpoints = useSelector(
-    (state: AppState) => state.configuration.latest.endpoints,
-  );
   const [showModal, setShowModal] = useState(false);
-  const queryClient = useQueryClient();
-  const locationsAdapter = useLocationAdapter();
+  const accountsLocationsEndpointsAdapter =
+    useAccountsLocationsEndpointsAdapter();
+  const { accountsLocationsAndEndpoints, refetchAccountsLocationsEndpoints } =
+    useAccountsLocationsAndEndpoints({ accountsLocationsEndpointsAdapter });
 
   const deleteMutation = useMutation({
-    mutationFn: (locationName: string) =>
+    mutationFn: async (locationName: string) =>
       dispatch(deleteLocation(locationName)),
     onSuccess: () => {
-      queryClient.refetchQueries(
-        queries.listLocations(locationsAdapter).queryKey,
-      );
+      refetchAccountsLocationsEndpoints();
     },
   });
   const handleDeleteClick = useCallback(
@@ -68,12 +63,11 @@ const ActionButtons = ({
   );
 
   const isDeletionEnable = canDeleteLocation(
-    locationName,
-    locations,
+    rowValues,
     replications,
     transitions,
     buckets,
-    endpoints,
+    accountsLocationsAndEndpoints?.endpoints || [],
   );
 
   return (
@@ -98,7 +92,7 @@ const ActionButtons = ({
               overlay: 'Edit Location',
               placement: 'top',
             }}
-            disabled={!canEditLocation(locationName, locations)}
+            disabled={rowValues.isBuiltin}
           />
           <InlineButton
             icon={<Icon name="Delete" />}
@@ -123,9 +117,16 @@ export function LocationsList() {
   const dispatch = useDispatch();
   const history = useHistory();
   const workflowsQuery = useWorkflows();
-  const locationsAdapter = useLocationAdapter();
+  const accountsLocationsEndpointsAdapter =
+    useAccountsLocationsEndpointsAdapter();
   const metricsAdapter = useMetricsAdapter();
-  const { locations } = useListLocations({ locationsAdapter, metricsAdapter });
+  const { locations } = useListLocations({
+    accountsLocationsEndpointsAdapter,
+    metricsAdapter,
+  });
+  const { accountsLocationsAndEndpoints } = useAccountsLocationsAndEndpoints({
+    accountsLocationsEndpointsAdapter,
+  });
 
   const accessibleAccountsAdapter = useAccessibleAccountsAdapter();
 
@@ -135,9 +136,6 @@ export function LocationsList() {
   });
 
   const buckets = useSelector((state: AppState) => state.stats.bucketList);
-  const endpoints = useSelector(
-    (state: AppState) => state.configuration.latest.endpoints,
-  );
 
   const data = useMemo(() => {
     if (locations.status === 'success') return Object.values(locations.value);
@@ -270,10 +268,15 @@ export function LocationsList() {
     dispatch,
     locations,
     buckets,
-    endpoints,
+    accountsLocationsAndEndpoints?.endpoints,
     workflowsQuery.data?.replications,
     loading,
   ]);
+
+  if (locations.status === 'loading' || locations.status === 'unknown') {
+    return <>Loading...</>;
+  }
+
   if (data.length === 0) {
     return (
       <Warning