DI-20837 - Handle new label property for services while selecting dashboard and Node-type filter update in DbasS

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

@@ -126,6 +126,7 @@ export interface CloudPulseMetricsList {
 
 export interface ServiceTypes {
   service_type: string;
+  label: string;
 }
 
 export interface ServiceTypesList {

packages/manager/src/factories/cloudpulse/services.ts

@@ -0,0 +1,8 @@
+import Factory from 'src/factories/factoryProxy';
+
+import type { ServiceTypes } from '@linode/api-v4';
+
+export const serviceTypesFactory = Factory.Sync.makeFactory<ServiceTypes>({
+  label: Factory.each((i) => `Factory ServiceType-${i}`),
+  service_type: Factory.each((i) => `Factory ServiceType-${i}`),
+});

packages/manager/src/factories/index.ts

@@ -52,6 +52,7 @@ export * from './vlans';
 export * from './volume';
 export * from './vpcs';
 export * from './dashboards';
+export * from './cloudpulse/services';
 
 // Convert factory output to our itemsById pattern
 export const normalizeEntities = (entities: any[]) => {

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

@@ -121,7 +121,7 @@ export const DBAAS_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
     },
     {
       configuration: {
-        filterKey: 'role',
+        filterKey: 'node_type',
         filterType: 'string',
         isFilterable: true, // isFilterable -- this determines whether you need to pass it metrics api
         isMetricsFilter: false, // if it is false, it will go as a part of filter params, else global filter

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

@@ -71,7 +71,7 @@ it('test checkMandatoryFiltersSelected method for role', () => {
 
   result = checkMandatoryFiltersSelected({
     dashboardObj: { ...mockDashboard, service_type: 'dbaas' },
-    filterValue: { region: 'us-east', role: 'primary' },
+    filterValue: { node_type: 'primary', region: 'us-east' },
     resource: 1,
     timeDuration: { unit: 'min', value: 30 },
   });
@@ -83,12 +83,12 @@ it('test constructDimensionFilters method', () => {
   mockDashboard.service_type = 'dbaas';
   const result = constructDimensionFilters({
     dashboardObj: mockDashboard,
-    filterValue: { role: 'primary' },
+    filterValue: { node_type: 'primary' },
     resource: 1,
   });
 
   expect(result.length).toEqual(1);
-  expect(result[0].filterKey).toEqual('role');
+  expect(result[0].filterKey).toEqual('node_type');
   expect(result[0].filterValue).toEqual('primary');
 });
 
@@ -99,13 +99,13 @@ it('test checkIfFilterNeededInMetricsCall method', () => {
   result = checkIfFilterNeededInMetricsCall('resource_id', 'linode');
   expect(result).toEqual(false); // not needed as dimension filter
 
-  result = checkIfFilterNeededInMetricsCall('role', 'dbaas');
+  result = checkIfFilterNeededInMetricsCall('node_type', 'dbaas');
   expect(result).toEqual(true);
 
   result = checkIfFilterNeededInMetricsCall('engine', 'dbaas');
   expect(result).toEqual(false);
 
-  result = checkIfFilterNeededInMetricsCall('role', 'xyz'); // xyz service type
+  result = checkIfFilterNeededInMetricsCall('node_type', 'xyz'); // xyz service type
   expect(result).toEqual(false);
 });
 

packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 
-import { dashboardFactory } from 'src/factories';
+import { dashboardFactory, serviceTypesFactory } from 'src/factories';
 import * as utils from 'src/features/CloudPulse/Utils/utils';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
@@ -19,6 +19,7 @@ const queryMocks = vi.hoisted(() => ({
   useCloudPulseServiceTypes: vi.fn().mockReturnValue({}),
 }));
 const mockDashboard = dashboardFactory.build();
+const mockServiceTypesList = serviceTypesFactory.build();
 
 vi.mock('src/queries/cloudpulse/dashboards', async () => {
   const actual = await vi.importActual('src/queries/cloudpulse/dashboards');
@@ -46,7 +47,7 @@ queryMocks.useCloudPulseDashboardsQuery.mockReturnValue({
 
 queryMocks.useCloudPulseServiceTypes.mockReturnValue({
   data: {
-    data: [{ service_type: 'linode' }],
+    data: [mockServiceTypesList],
   },
 });
 

packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx

@@ -30,6 +30,9 @@ export const CloudPulseDashboardSelect = React.memo(
     } = useCloudPulseServiceTypes(true);
 
     const serviceTypes: string[] = formattedServiceTypes(serviceTypesList);
+    const serviceTypeMap: Map<string, string> = new Map(
+      serviceTypesList?.data.map((item) => [item.service_type, item.label])
+    );
 
     const {
       data: dashboardsList,
@@ -66,6 +69,7 @@ export const CloudPulseDashboardSelect = React.memo(
         (a, b) => -b.service_type.localeCompare(a.service_type)
       );
     };
+
     // Once the data is loaded, set the state variable with value stored in preferences
     React.useEffect(() => {
       // only call this code when the component is rendered initially
@@ -90,11 +94,10 @@ export const CloudPulseDashboardSelect = React.memo(
         }}
         renderGroup={(params) => (
           <Box key={params.key}>
-            <Typography
-              sx={{ marginLeft: '3.5%', textTransform: 'capitalize' }}
-              variant="h3"
-            >
-              {params.group}
+            <Typography sx={{ marginLeft: '3.5%' }} variant="h3">
+              {serviceTypeMap.has(params.group)
+                ? serviceTypeMap.get(params.group)
+                : params.group}
             </Typography>
             {params.children}
           </Box>

packages/manager/src/mocks/serverHandlers.ts

@@ -85,6 +85,7 @@ import {
   promoFactory,
   regionAvailabilityFactory,
   securityQuestionsFactory,
+  serviceTypesFactory,
   stackScriptFactory,
   staticObjects,
   subnetFactory,
@@ -110,10 +111,12 @@ import { pickRandom } from 'src/utilities/random';
 import type {
   AccountMaintenance,
   CreateObjectStorageKeyPayload,
+  Dashboard,
   FirewallStatus,
   NotificationType,
   ObjectStorageEndpointTypes,
   SecurityQuestionsPayload,
+  ServiceTypesList,
   TokenRequest,
   UpdateImageRegionsPayload,
   User,
@@ -2306,25 +2309,40 @@ export const handlers = [
     return HttpResponse.json(response);
   }),
   http.get('*/monitor/services', () => {
-    const response = {
-      data: [{ service_type: 'linode' }],
+    const response: ServiceTypesList = {
+      data: [
+        serviceTypesFactory.build({
+          label: 'Linode',
+          service_type: 'linode',
+        }),
+        serviceTypesFactory.build({
+          label: 'Databases',
+          service_type: 'dbaas',
+        }),
+      ],
     };
 
     return HttpResponse.json(response);
   }),
-  http.get('*/monitor/services/:serviceType/dashboards', () => {
+  http.get('*/monitor/services/:serviceType/dashboards', ({ params }) => {
     const response = {
-      data: [
+      data: [] as Dashboard[],
+    };
+    if (params.serviceType === 'linode') {
+      response.data.push(
         dashboardFactory.build({
           label: 'Linode Dashboard',
           service_type: 'linode',
-        }),
+        })
+      );
+    } else if (params.serviceType === 'dbaas') {
+      response.data.push(
         dashboardFactory.build({
           label: 'DBaaS Dashboard',
           service_type: 'dbaas',
-        }),
-      ],
-    };
+        })
+      );
+    }
 
     return HttpResponse.json(response);
   }),