new: STORIF-234 - ACLP Service availability check added to the volume metrics tab. (#13321)

Description:
ACLP Service availability check added to the volume metrics tab.

Testing instructions:
Run pnpm dev
Navigate to /volumes/<volume>
Observe "Metrics Tab" button, it should be hidden when
ACLP service is unavailable.

Author: dchyrva-akamai

packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx

@@ -49,10 +49,8 @@ export const BucketDetailLanding = React.memo(() => {
 
   const { aclpServices, objectStorageContextualMetrics } = useFlags();
   const { isObjectStorageGen2Enabled } = useIsObjectStorageGen2Enabled();
-  const { isError: aclpServiceError } = useCloudPulseServiceByServiceType(
-    'objectstorage',
-    true
-  );
+  const { isError: aclpServiceError, isLoading: aclServiceLoading } =
+    useCloudPulseServiceByServiceType('objectstorage', true);
 
   const {
     data: bucketsData,
@@ -94,7 +92,7 @@ export const BucketDetailLanding = React.memo(() => {
     },
   ]);
 
-  if (isPending || isLoading) {
+  if (isPending || isLoading || aclServiceLoading) {
     return <CircleProgress />;
   }
 

packages/manager/src/features/Volumes/VolumeDetails/VolumeDetails.tsx

@@ -9,6 +9,7 @@ import { Tabs } from 'src/components/Tabs/Tabs';
 import { TanStackTabLinkList } from 'src/components/Tabs/TanStackTabLinkList';
 import { useFlags } from 'src/hooks/useFlags';
 import { useTabs } from 'src/hooks/useTabs';
+import { useCloudPulseServiceByServiceType } from 'src/queries/cloudpulse/services';
 
 import { VolumeDrawers } from '../VolumeDrawers/VolumeDrawers';
 import { VolumeDetailsHeader } from './VolumeDetailsHeader';
@@ -18,6 +19,9 @@ export const VolumeDetails = () => {
 
   const { volumeSummaryPage, aclpServices, blockStorageContextualMetrics } =
     useFlags();
+  const { isError: aclpServiceError, isLoading: aclServiceLoading } =
+    useCloudPulseServiceByServiceType('blockstorage', true);
+
   const { volumeId } = useParams({ from: '/volumes/$volumeId' });
   const { data: volume, isLoading, error } = useVolumeQuery(volumeId);
   const { tabs, handleTabChange, tabIndex } = useTabs([
@@ -29,8 +33,9 @@ export const VolumeDetails = () => {
       to: '/volumes/$volumeId/metrics',
       title: 'Metrics',
       hide:
-        !aclpServices?.blockstorage?.metrics?.enabled ||
-        !blockStorageContextualMetrics,
+        aclpServiceError ||
+        !blockStorageContextualMetrics ||
+        !aclpServices?.blockstorage?.metrics?.enabled,
       chip: aclpServices?.blockstorage?.metrics?.beta ? <BetaChip /> : null,
     },
   ]);
@@ -39,7 +44,7 @@ export const VolumeDetails = () => {
     return <ErrorState errorText={error?.[0].reason ?? 'Not found'} />;
   }
 
-  if (isLoading || !volume) {
+  if (isLoading || aclServiceLoading || !volume) {
     return <CircleProgress />;
   }