new: STORIF-181 - Bucket metrics page created.

packages/manager/cypress/e2e/core/objectStorage/object-storage-errors.spec.ts

@@ -5,11 +5,14 @@
 import 'cypress-file-upload';
 import {
   mockGetBucketObjects,
+  mockGetBuckets,
   mockUploadBucketObject,
 } from 'support/intercepts/object-storage';
 import { makeError } from 'support/util/errors';
 import { randomItem, randomLabel, randomString } from 'support/util/random';
 
+import { objectStorageBucketFactory } from 'src/factories';
+
 describe('object storage failure paths', () => {
   /*
    * - Tests error UI when an object upload fails.
@@ -19,6 +22,12 @@ describe('object storage failure paths', () => {
   it('shows error upon object upload failure', () => {
     const bucketLabel = randomLabel();
     const bucketCluster = 'us-southeast-1';
+    const bucketMock = objectStorageBucketFactory.build({
+      cluster: bucketCluster,
+      hostname: `${bucketLabel}.${bucketCluster}.linodeobjects.com`,
+      label: bucketLabel,
+      objects: 0,
+    });
     const bucketFile = randomItem([
       'object-storage-files/1.txt',
       'object-storage-files/2.jpg',
@@ -29,6 +38,7 @@ describe('object storage failure paths', () => {
     const bucketFilename = bucketFile.split('/')[1];
 
     // Mock empty object list and failed object-url upload request.
+    mockGetBuckets([bucketMock]).as('getBuckets');
     mockGetBucketObjects(bucketLabel, bucketCluster, []).as('getBucketObjects');
     mockUploadBucketObject(
       bucketLabel,
@@ -73,7 +83,14 @@ describe('object storage failure paths', () => {
   it('shows error upon object list retrieval failure', () => {
     const bucketLabel = randomLabel();
     const bucketCluster = 'us-southeast-1';
+    const bucketMock = objectStorageBucketFactory.build({
+      cluster: bucketCluster,
+      hostname: `${bucketLabel}.${bucketCluster}.linodeobjects.com`,
+      label: bucketLabel,
+      objects: 0,
+    });
 
+    mockGetBuckets([bucketMock]).as('getBuckets');
     mockGetBucketObjects(
       bucketLabel,
       bucketCluster,

packages/manager/cypress/e2e/core/objectStorage/object-storage.smoke.spec.ts

@@ -88,18 +88,27 @@ describe('object storage smoke tests', () => {
   it('can upload, view, and delete bucket objects - smoke', () => {
     const bucketLabel = randomLabel();
     const bucketCluster = 'us-southeast-1';
+    const bucketMock = objectStorageBucketFactory.build({
+      cluster: bucketCluster,
+      hostname: `${bucketLabel}.${bucketCluster}.linodeobjects.com`,
+      label: bucketLabel,
+      objects: 0,
+    });
+
     const bucketContents = [
       'object-storage-files/1.txt',
       'object-storage-files/2.jpg',
       'object-storage-files/3.jpg',
       'object-storage-files/4.zip',
     ];
 
+    mockGetBuckets([bucketMock]).as('getBuckets');
     mockGetBucketObjects(bucketLabel, bucketCluster, []).as('getBucketObjects');
 
     cy.visitWithLogin(
       `/object-storage/buckets/${bucketCluster}/${bucketLabel}`
     );
+    cy.wait('@getBuckets');
     cy.wait('@getBucketObjects');
 
     cy.log('Upload bucket objects');

packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx → packages/manager/src/features/ObjectStorage/BucketDetail/AccessTab/AccessSelect.tsx

@@ -20,7 +20,7 @@ import {
 } from 'src/queries/object-storage/queries';
 import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
 
-import { bucketACLOptions, objectACLOptions } from '../utilities';
+import { bucketACLOptions, objectACLOptions } from '../../utilities';
 import { copy } from './AccessSelect.data';
 
 import type {

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { CloudPulseDashboardWithFilters } from 'src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters';
+
+interface Props {
+  bucketName: string;
+  clusterId: string;
+}
+
+export const MetricsTab = ({ bucketName, clusterId }: Props) => {
+  return (
+    <CloudPulseDashboardWithFilters
+      dashboardId={6}
+      region={clusterId}
+      resource={bucketName}
+    />
+  );
+};

packages/manager/src/features/ObjectStorage/BucketDetail/BucketBreadcrumb.tsx → packages/manager/src/features/ObjectStorage/BucketDetail/ObjectsTab/BucketBreadcrumb.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { useWindowDimensions } from 'src/hooks/useWindowDimensions';
 
-import { prefixArrayToString } from '../utilities';
+import { prefixArrayToString } from '../../utilities';
 import {
   StyledCopyTooltip,
   StyledLink,

packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx → packages/manager/src/features/ObjectStorage/BucketDetail/ObjectsTab/BucketDetail.tsx

@@ -30,14 +30,14 @@ import {
 import { fetchBucketAndUpdateCache } from 'src/queries/object-storage/utilities';
 import { sendDownloadObjectEvent } from 'src/utilities/analytics/customEventAnalytics';
 
-import { QuotasInfoNotice } from '../QuotasInfoNotice';
-import { deleteObject as _deleteObject } from '../requests';
+import { QuotasInfoNotice } from '../../QuotasInfoNotice';
+import { deleteObject as _deleteObject } from '../../requests';
 import {
   displayName,
   generateObjectUrl,
   isEmptyObjectForFolder,
   tableUpdateAction,
-} from '../utilities';
+} from '../../utilities';
 import { BucketBreadcrumb } from './BucketBreadcrumb';
 import {
   StyledCreateFolderButton,

packages/manager/src/features/ObjectStorage/BucketDetail/FolderTableRow.test.tsx → packages/manager/src/features/ObjectStorage/BucketDetail/ObjectsTab/FolderTableRow.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 
-import { FolderTableRow } from 'src/features/ObjectStorage/BucketDetail/FolderTableRow';
 import { renderWithTheme, wrapWithTableBody } from 'src/utilities/testHelpers';
 
-import type { FolderTableRowProps } from 'src/features/ObjectStorage/BucketDetail/FolderTableRow';
+import { FolderTableRow } from './FolderTableRow';
+
+import type { FolderTableRowProps } from './FolderTableRow';
 
 vi.mock('@tanstack/react-router', async () => {
   const actual = await vi.importActual('@tanstack/react-router');

packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx → packages/manager/src/features/ObjectStorage/BucketDetail/ObjectsTab/ObjectDetailsDrawer.tsx

@@ -10,7 +10,7 @@ import { useIsObjectStorageGen2Enabled } from 'src/features/ObjectStorage/hooks/
 import { useObjectStorageBuckets } from 'src/queries/object-storage/queries';
 import { formatDate } from 'src/utilities/formatDate';
 
-import { AccessSelect } from './AccessSelect';
+import { AccessSelect } from '../AccessTab/AccessSelect';
 
 export interface ObjectDetailsDrawerProps {
   bucketName: string;

packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableContent.tsx → packages/manager/src/features/ObjectStorage/BucketDetail/ObjectsTab/ObjectTableContent.tsx

@@ -6,7 +6,7 @@ import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { useWindowDimensions } from 'src/hooks/useWindowDimensions';
 
-import { displayName, isEmptyObjectForFolder, isFolder } from '../utilities';
+import { displayName, isEmptyObjectForFolder, isFolder } from '../../utilities';
 import { FolderTableRow } from './FolderTableRow';
 import { ObjectTableRow } from './ObjectTableRow';