[DI-26882] - Handle integration of Object Storage in Metrics

packages/api-v4/.changeset/pr-12912-changed-1758782562755.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+CloudPulse-Metrics: Update `CloudPulseMetricsRequest` and `JWETokenPayLoad` type at `types.ts` ([#12912](https://github.com/linode/manager/pull/12912))

packages/api-v4/src/cloudpulse/types.ts

@@ -9,7 +9,6 @@ export type CloudPulseServiceType =
   | 'linode'
   | 'nodebalancer'
   | 'objectstorage';
-
 export type AlertClass = 'dedicated' | 'shared';
 export type DimensionFilterOperatorType =
   | 'endswith'
@@ -134,7 +133,7 @@ export interface Dimension {
 }
 
 export interface JWETokenPayLoad {
-  entity_ids: number[];
+  entity_ids?: number[];
 }
 
 export interface JWEToken {
@@ -149,7 +148,8 @@ export interface Metric {
 export interface CloudPulseMetricsRequest {
   absolute_time_duration: DateTimeWithPreset | undefined;
   associated_entity_region?: string;
-  entity_ids: number[];
+  entity_ids: number[] | string[];
+  entity_region?: string;
   filters?: Filters[];
   group_by?: string[];
   metrics: Metric[];

packages/manager/.changeset/pr-12912-upcoming-features-1758782466180.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+CloudPulse-Metrics: Handle special conditions for `objectstorage` service addition, add related filters at `FilterConfig.ts`, integrate related component `CloudPulseEndpointsSelect.tsx` ([#12912](https://github.com/linode/manager/pull/12912))

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx

@@ -17,7 +17,11 @@ import {
 } from '../Widget/CloudPulseWidgetRenderer';
 
 import type { CloudPulseMetricsAdditionalFilters } from '../Widget/CloudPulseWidget';
-import type { DateTimeWithPreset, JWETokenPayLoad } from '@linode/api-v4';
+import type {
+  CloudPulseServiceType,
+  DateTimeWithPreset,
+  JWETokenPayLoad,
+} from '@linode/api-v4';
 
 export interface DashboardProperties {
   /**
@@ -65,6 +69,11 @@ export interface DashboardProperties {
    */
   savePref?: boolean;
 
+  /**
+   * Selected service type for the dashboard
+   */
+  serviceType: CloudPulseServiceType;
+
   /**
    * Selected tags for the dashboard
    */
@@ -79,12 +88,18 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     manualRefreshTimeStamp,
     resources,
     savePref,
+    serviceType,
     groupBy,
     linodeRegion,
+    region,
   } = props;
 
   const { preferences } = useAclpPreference();
+
   const getJweTokenPayload = (): JWETokenPayLoad => {
+    if (serviceType === 'objectstorage') {
+      return {};
+    }
     return {
       entity_ids: resources?.map((resource) => Number(resource)) ?? [],
     };
@@ -169,6 +184,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
       manualRefreshTimeStamp={manualRefreshTimeStamp}
       metricDefinitions={metricDefinitions}
       preferences={preferences}
+      region={region}
       resourceList={resourceList}
       resources={resources}
       savePref={savePref}

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardRenderer.tsx

@@ -85,6 +85,7 @@ export const CloudPulseDashboardRenderer = React.memo(
             : []
         }
         savePref={true}
+        serviceType={dashboard.service_type}
         tags={
           filterValue[TAGS] && Array.isArray(filterValue[TAGS])
             ? (filterValue[TAGS] as string[])

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx

@@ -28,15 +28,19 @@ export interface CloudPulseDashboardWithFiltersProp {
    * The id of the dashboard that needs to be rendered
    */
   dashboardId: number;
+  /**
+   * The region for which the metrics will be listed
+   */
+  region?: string;
   /**
    * The resource id for which the metrics will be listed
    */
-  resource: number;
+  resource: number | string;
 }
 
 export const CloudPulseDashboardWithFilters = React.memo(
   (props: CloudPulseDashboardWithFiltersProp) => {
-    const { dashboardId, resource } = props;
+    const { dashboardId, resource, region } = props;
     const { data: dashboard, isError } =
       useCloudPulseDashboardByIdQuery(dashboardId);
     const [filterData, setFilterData] = React.useState<FilterData>({
@@ -122,6 +126,7 @@ export const CloudPulseDashboardWithFilters = React.memo(
       dashboardObj: dashboard,
       filterValue: filterData.id,
       resource,
+      region,
       timeDuration,
       groupBy,
     });
@@ -180,7 +185,13 @@ export const CloudPulseDashboardWithFilters = React.memo(
                 emitFilterChange={onFilterChange}
                 handleToggleAppliedFilter={toggleAppliedFilter}
                 isServiceAnalyticsIntegration
-                resource_ids={[resource]}
+                resource_ids={
+                  dashboard.service_type !== 'objectstorage'
+                    ? typeof resource === 'number'
+                      ? [resource]
+                      : undefined
+                    : undefined
+                }
               />
             )}
             <GridLegacy
@@ -206,6 +217,7 @@ export const CloudPulseDashboardWithFilters = React.memo(
               dashboardObj: dashboard,
               filterValue: filterData.id,
               resource,
+              region,
               timeDuration,
               groupBy,
             })}

packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.test.ts

@@ -1,9 +1,12 @@
 import { formatPercentage } from '@linode/utilities';
 
+import { widgetFactory } from 'src/factories';
+
 import {
   generateGraphData,
   generateMaxUnit,
   getDimensionName,
+  getEntityIds,
   getLabelName,
   getTimeDurationFromPreset,
   mapResourceIdToName,
@@ -261,4 +264,26 @@ describe('getTimeDurationFromPreset method', () => {
     const result = getTimeDurationFromPreset('15min');
     expect(result).toBe(undefined);
   });
+
+  describe('getEntityIds method', () => {
+    it('should return entity ids for linode service type', () => {
+      const result = getEntityIds(
+        [{ id: '123', label: 'linode-1' }],
+        ['123'],
+        widgetFactory.build(),
+        'linode'
+      );
+      expect(result).toEqual([123]);
+    });
+
+    it('should return entity ids for objectstorage service type', () => {
+      const result = getEntityIds(
+        [{ id: 'bucket-1', label: 'bucket-name-1' }],
+        ['bucket-1'],
+        widgetFactory.build(),
+        'objectstorage'
+      );
+      expect(result).toEqual(['bucket-1']);
+    });
+  });
 });

packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts

@@ -128,11 +128,21 @@ interface MetricRequestProps {
    */
   linodeRegion?: string;
 
+  /**
+   * selected region for the widget
+   */
+  region?: string;
+
   /**
    * list of CloudPulse resources available
    */
   resources: CloudPulseResources[];
 
+  /**
+   * service type of the widget
+   */
+  serviceType: CloudPulseServiceType;
+
   /**
    * widget filters for metrics data
    */
@@ -326,18 +336,23 @@ export const generateMaxUnit = (
 export const getCloudPulseMetricRequest = (
   props: MetricRequestProps
 ): CloudPulseMetricsRequest => {
-  const { duration, entityIds, resources, widget, groupBy, linodeRegion } =
-    props;
+  const {
+    duration,
+    entityIds,
+    resources,
+    widget,
+    groupBy,
+    linodeRegion,
+    region,
+    serviceType,
+  } = props;
   const preset = duration.preset;
-
   return {
     absolute_time_duration:
       preset !== 'reset' && preset !== 'this month' && preset !== 'last month'
         ? undefined
         : { end: duration.end, start: duration.start },
-    entity_ids: resources
-      ? entityIds.map((id) => parseInt(id, 10))
-      : widget.entity_ids.map((id) => parseInt(id, 10)),
+    entity_ids: getEntityIds(resources, entityIds, widget, serviceType),
     filters: undefined,
     group_by: !groupBy?.length ? undefined : groupBy,
     relative_time_duration: getTimeDurationFromPreset(preset),
@@ -355,9 +370,31 @@ export const getCloudPulseMetricRequest = (
             value: widget.time_granularity.value,
           },
     associated_entity_region: linodeRegion,
+    entity_region: serviceType === 'objectstorage' ? region : undefined,
   };
 };
 
+/**
+ *
+ * @param resources list of CloudPulse resources
+ * @param entityIds list of entity ids
+ * @param widget widget
+ * @returns transformed entity ids
+ */
+export const getEntityIds = (
+  resources: CloudPulseResources[],
+  entityIds: string[],
+  widget: Widgets,
+  serviceType: CloudPulseServiceType
+) => {
+  if (serviceType === 'objectstorage') {
+    return entityIds;
+  }
+  return resources
+    ? entityIds.map((id) => parseInt(id, 10))
+    : widget.entity_ids.map((id) => parseInt(id, 10));
+};
+
 /**
  *
  * @returns generated label name for graph dimension

packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts

@@ -13,6 +13,7 @@ import {
   filterBasedOnConfig,
   filterEndpointsUsingRegion,
   filterUsingDependentFilters,
+  getEndpointsProperties,
   getFilters,
   getTextFilterProperties,
 } from './FilterBuilder';
@@ -46,6 +47,13 @@ const firewallConfig = FILTER_CONFIG.get(4);
 
 const dbaasDashboard = dashboardFactory.build({ service_type: 'dbaas', id: 1 });
 
+const objectStorageBucketDashboard = dashboardFactory.build({
+  service_type: 'objectstorage',
+  id: 6,
+});
+
+const objectStorageBucketConfig = FILTER_CONFIG.get(6);
+
 it('test getRegionProperties method', () => {
   const regionConfig = linodeConfig?.filters.find(
     (filterObj) => filterObj.name === 'Region'
@@ -408,6 +416,46 @@ it('test getTextFilterProperties method for interface_id', () => {
   }
 });
 
+it('test getEndpointsProperties method', () => {
+  const endpointsConfig = objectStorageBucketConfig?.filters.find(
+    (filterObj) => filterObj.name === 'Endpoints'
+  );
+
+  expect(endpointsConfig).toBeDefined();
+
+  if (endpointsConfig) {
+    const endpointsProperties = getEndpointsProperties(
+      {
+        config: endpointsConfig,
+        dashboard: objectStorageBucketDashboard,
+        dependentFilters: { region: 'us-east' },
+        isServiceAnalyticsIntegration: false,
+      },
+      vi.fn()
+    );
+    const {
+      label,
+      serviceType,
+      disabled,
+      savePreferences,
+      handleEndpointsSelection,
+      defaultValue,
+      region,
+      xFilter,
+    } = endpointsProperties;
+
+    expect(endpointsProperties).toBeDefined();
+    expect(label).toEqual(endpointsConfig.configuration.name);
+    expect(serviceType).toEqual('objectstorage');
+    expect(savePreferences).toEqual(true);
+    expect(disabled).toEqual(false);
+    expect(handleEndpointsSelection).toBeDefined();
+    expect(defaultValue).toEqual(undefined);
+    expect(region).toEqual('us-east');
+    expect(xFilter).toEqual({ region: 'us-east' });
+  }
+});
+
 it('test getFiltersForMetricsCallFromCustomSelect method', () => {
   const result = getMetricsCallCustomFilters(
     {