upcoming: [DI-23237] - Alerting bug fixes (#11610)

* upcoming: [DI-23237] - Alerting UI bug fixes * upcoming: [DI-23237] - Add changesets * upcoming: [DI-23316] - Review changes * upcoming: [DI-23316] - Avoiding nested await
linode · Feb 6, 2025 · bbf396d · bbf396d
1 parent 03462e7
commit bbf396d
Show file tree

Hide file tree

Showing 28 changed files with 143 additions and 76 deletions.
diff --git a/packages/api-v4/.changeset/pr-11610-upcoming-features-1738690472155.md b/packages/api-v4/.changeset/pr-11610-upcoming-features-1738690472155.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+changed attribute names in NotificationChannel,MetricCriteria types to reflect the latest API specification ([#11610](https://github.com/linode/manager/pull/11610))
diff --git a/packages/api-v4/src/cloudpulse/services.ts b/packages/api-v4/src/cloudpulse/services.ts
@@ -1,21 +1,33 @@
 import { BETA_API_ROOT as API_ROOT } from 'src/constants';
-import Request, { setData, setMethod, setURL } from '../request';
+import Request, {
+  setData,
+  setMethod,
+  setParams,
+  setURL,
+  setXFilter,
+} from '../request';
 import {
   JWEToken,
   JWETokenPayLoad,
   MetricDefinition,
   ServiceTypesList,
 } from './types';
-import { ResourcePage } from 'src/types';
+import { Filter, Params, ResourcePage } from 'src/types';
 
-export const getMetricDefinitionsByServiceType = (serviceType: string) => {
+export const getMetricDefinitionsByServiceType = (
+  serviceType: string,
+  params?: Params,
+  filters?: Filter
+) => {
   return Request<ResourcePage<MetricDefinition>>(
     setURL(
       `${API_ROOT}/monitor/services/${encodeURIComponent(
         serviceType
       )}/metric-definitions`
     ),
-    setMethod('GET')
+    setMethod('GET'),
+    setParams(params),
+    setXFilter(filters)
   );
 };
 

diff --git a/packages/api-v4/src/cloudpulse/types.ts b/packages/api-v4/src/cloudpulse/types.ts
@@ -111,6 +111,7 @@ export interface MetricDefinition {
   scrape_interval: string;
   available_aggregate_functions: string[];
   dimensions: Dimension[];
+  is_alertable: boolean;
 }
 
 export interface Dimension {
@@ -180,7 +181,7 @@ export interface CreateAlertDefinitionPayload {
 }
 export interface MetricCriteria {
   metric: string;
-  aggregation_type: MetricAggregationType;
+  aggregate_function: MetricAggregationType;
   operator: MetricOperatorType;
   threshold: number;
   dimension_filters?: DimensionFilter[];
@@ -222,11 +223,11 @@ export interface Alert {
     rules: AlertDefinitionMetricCriteria[];
   };
   trigger_conditions: TriggerCondition;
-  channels: {
-    id: string;
+  alert_channels: {
+    id: number;
     label: string;
     url: string;
-    type: 'channel';
+    type: 'alert-channel';
   }[];
   created_by: string;
   updated_by: string;

diff --git a/packages/manager/.changeset/pr-11610-upcoming-features-1738690296967.md b/packages/manager/.changeset/pr-11610-upcoming-features-1738690296967.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Modified setValue method for the `DimensionFilterField`, `Metric` components. Capitalized the Dimension Filter values in ShowDetails and Create features  ([#11610](https://github.com/linode/manager/pull/11610))
diff --git a/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts
@@ -181,10 +181,10 @@ describe('Integration Tests for Alert Show Detail Page', () => {
           .eq(index)
           .within(() => {
             cy.get(
-              `[data-qa-chip="${aggregationTypeMap[rule.aggregation_type]}"]`
+              `[data-qa-chip="${aggregationTypeMap[rule.aggregate_function]}"]`
             )
               .should('be.visible')
-              .should('have.text', aggregationTypeMap[rule.aggregation_type]);
+              .should('have.text', aggregationTypeMap[rule.aggregate_function]);
 
             cy.get(`[data-qa-chip="${rule.label}"]`)
               .should('be.visible')

diff --git a/packages/manager/src/factories/cloudpulse/alerts.ts b/packages/manager/src/factories/cloudpulse/alerts.ts
@@ -17,7 +17,7 @@ export const alertDimensionsFactory = Factory.Sync.makeFactory<AlertDefinitionDi
 
 export const alertRulesFactory = Factory.Sync.makeFactory<AlertDefinitionMetricCriteria>(
   {
-    aggregation_type: 'avg',
+    aggregate_function: 'avg',
     dimension_filters: alertDimensionsFactory.buildList(1),
     label: 'CPU Usage',
     metric: 'cpu_usage',
@@ -28,17 +28,17 @@ export const alertRulesFactory = Factory.Sync.makeFactory<AlertDefinitionMetricC
 );
 
 export const alertFactory = Factory.Sync.makeFactory<Alert>({
-  channels: [
+  alert_channels: [
     {
-      id: '1',
+      id: 1,
       label: 'sample1',
-      type: 'channel',
+      type: 'alert-channel',
       url: '',
     },
     {
-      id: '2',
+      id: 2,
       label: 'sample2',
-      type: 'channel',
+      type: 'alert-channel',
       url: '',
     },
   ],

diff --git a/packages/manager/src/factories/dashboards.ts b/packages/manager/src/factories/dashboards.ts
@@ -1,10 +1,10 @@
 import Factory from 'src/factories/factoryProxy';
 
 import type {
-  MetricDefinition,
   CloudPulseMetricsResponse,
   CloudPulseMetricsResponseData,
   Dashboard,
+  MetricDefinition,
   Widgets,
 } from '@linode/api-v4';
 import type { ChartVariant } from 'src/components/AreaChart/AreaChart';
@@ -56,6 +56,7 @@ export const dashboardMetricFactory = Factory.Sync.makeFactory<MetricDefinition>
   {
     available_aggregate_functions: ['min', 'max', 'avg', 'sum'],
     dimensions: [],
+    is_alertable: true,
     label: Factory.each((i) => `widget_label_${i}`),
     metric: Factory.each((i) => `widget_metric_${i}`),
     metric_type: 'gauge',

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx
@@ -136,7 +136,7 @@ export const AlertDetail = () => {
           data-qa-section="Notification Channels"
         >
           <AlertDetailNotification
-            channelIds={alertDetails.channels.map(({ id }) => id)}
+            channelIds={alertDetails.alert_channels.map(({ id }) => id)}
           />
         </Box>
       </Box>

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.test.tsx
@@ -16,7 +16,7 @@ describe('AlertDetailCriteria component tests', () => {
     const alertDetails = alertFactory.build({
       rule_criteria: {
         rules: alertRulesFactory.buildList(2, {
-          aggregation_type: 'avg',
+          aggregate_function: 'avg',
           dimension_filters: alertDimensionsFactory.buildList(2),
           label: 'CPU Usage',
           metric: 'cpu_usage',

diff --git a/...ages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.test.tsx b/...ages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.test.tsx
@@ -39,7 +39,7 @@ beforeEach(() => {
 describe('AlertDetailNotification component tests', () => {
   it('should render the alert detail notification channels successfully', () => {
     const { getAllByText, getByText } = renderWithTheme(
-      <AlertDetailNotification channelIds={['1', '2', '3']} />
+      <AlertDetailNotification channelIds={[1, 2, 3]} />
     );
 
     expect(getByText(notificationChannel)).toBeInTheDocument();
@@ -59,7 +59,7 @@ describe('AlertDetailNotification component tests', () => {
       isFetching: false,
     });
     const { getByText } = renderWithTheme(
-      <AlertDetailNotification channelIds={['1', '2', '3']} />
+      <AlertDetailNotification channelIds={[1, 2, 3]} />
     );
 
     expect(getByText(notificationChannel)).toBeInTheDocument();
@@ -73,7 +73,7 @@ describe('AlertDetailNotification component tests', () => {
       isFetching: false,
     });
     const { getByText } = renderWithTheme(
-      <AlertDetailNotification channelIds={['1', '2', '3']} />
+      <AlertDetailNotification channelIds={[1, 2, 3]} />
     );
 
     expect(getByText(notificationChannel)).toBeInTheDocument();

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx
@@ -19,7 +19,7 @@ interface NotificationChannelProps {
    * List of channel IDs associated with the alert.
    * These IDs are used to fetch and display notification channels.
    */
-  channelIds: string[];
+  channelIds: number[];
 }
 export const AlertDetailNotification = React.memo(
   (props: NotificationChannelProps) => {

diff --git a/.../manager/src/features/CloudPulse/Alerts/AlertsDetail/RenderAlertsMetricsAndDimensions.tsx b/.../manager/src/features/CloudPulse/Alerts/AlertsDetail/RenderAlertsMetricsAndDimensions.tsx
@@ -3,6 +3,7 @@ import { Grid } from '@mui/material';
 import React from 'react';
 
 import NullComponent from 'src/components/NullComponent';
+import { capitalize } from 'src/utilities/capitalize';
 
 import {
   aggregationTypeMap,
@@ -33,7 +34,7 @@ export const RenderAlertMetricsAndDimensions = React.memo(
     return ruleCriteria.rules.map(
       (
         {
-          aggregation_type: aggregationType,
+          aggregate_function: aggregationType,
           dimension_filters: dimensionFilters,
           label,
           operator,
@@ -68,7 +69,7 @@ export const RenderAlertMetricsAndDimensions = React.memo(
                   }) => [
                     dimensionLabel,
                     dimensionOperatorTypeMap[dimensionOperator],
-                    value,
+                    capitalize(value),
                   ]
                 )}
                 label="Dimension Filter"

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx
@@ -53,7 +53,12 @@ export const AlertsListTable = React.memo((props: AlertsListTableProps) => {
   };
 
   return (
-    <OrderBy data={alerts} order="asc" orderBy="service">
+    <OrderBy
+      data={alerts}
+      order="asc"
+      orderBy="service"
+      preferenceKey="alerts-landing"
+    >
       {({ data: orderedData, handleOrderChange, order, orderBy }) => (
         <Paginate data={orderedData}>
           {({

diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx
@@ -34,7 +34,7 @@ const triggerConditionInitialValues: TriggerConditionForm = {
   trigger_occurrences: 0,
 };
 const criteriaInitialValues: MetricCriteriaForm = {
-  aggregation_type: null,
+  aggregate_function: null,
   dimension_filters: [],
   metric: null,
   operator: null,

diff --git a/...ages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.test.tsx b/...ages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.test.tsx
@@ -38,6 +38,7 @@ const mockData: MetricDefinition[] = [
         values: [],
       },
     ],
+    is_alertable: true,
     label: 'CPU utilization',
     metric: 'system_cpu_utilization_percent',
     metric_type: 'gauge',

diff --git a/...manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.test.tsx b/...manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.test.tsx
@@ -2,6 +2,7 @@ import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+import { capitalize } from 'src/utilities/capitalize';
 import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
 
 import { dimensionOperatorOptions } from '../../constants';
@@ -39,6 +40,7 @@ const mockData: MetricDefinition[] = [
         values: [],
       },
     ],
+    is_alertable: true,
     label: 'CPU utilization',
     metric: 'system_cpu_utilization_percent',
     metric_type: 'gauge',
@@ -47,6 +49,7 @@ const mockData: MetricDefinition[] = [
   },
 ];
 
+const dataFieldId = 'data-field';
 const dimensionFieldMockData = mockData[0].dimensions;
 describe('Dimension filter field component', () => {
   const user = userEvent.setup();
@@ -95,7 +98,7 @@ describe('Dimension filter field component', () => {
         },
       }
     );
-    const dataFieldContainer = container.getByTestId('data-field');
+    const dataFieldContainer = container.getByTestId(dataFieldId);
     const dataFieldInput = within(dataFieldContainer).getByRole('button', {
       name: 'Open',
     });
@@ -140,6 +143,15 @@ describe('Dimension filter field component', () => {
         },
       }
     );
+    const dataFieldContainer = container.getByTestId('data-field');
+    const dataFieldInput = within(dataFieldContainer).getByRole('button', {
+      name: 'Open',
+    });
+    await user.click(dataFieldInput);
+    const option = await container.findByRole('option', {
+      name: dimensionFieldMockData[1].label,
+    });
+    await user.click(option);
     const operatorContainer = container.getByTestId('operator');
     const operatorInput = within(operatorContainer).getByRole('button', {
       name: 'Open',
@@ -186,10 +198,11 @@ describe('Dimension filter field component', () => {
         },
       }
     );
-    const dataFieldContainer = container.getByTestId('data-field');
+    const dataFieldContainer = container.getByTestId(dataFieldId);
     const dataFieldInput = within(dataFieldContainer).getByRole('button', {
       name: 'Open',
     });
+    const valueLabel = capitalize(dimensionFieldMockData[1].values[0]);
     await user.click(dataFieldInput);
     await user.click(
       await container.findByRole('option', {
@@ -204,25 +217,25 @@ describe('Dimension filter field component', () => {
     user.click(valueInput);
     expect(
       await container.findByRole('option', {
-        name: dimensionFieldMockData[1].values[0],
+        name: valueLabel,
       })
     );
 
     expect(
       await container.findByRole('option', {
-        name: dimensionFieldMockData[1].values[1],
+        name: valueLabel,
       })
     );
 
     await user.click(
       container.getByRole('option', {
-        name: dimensionFieldMockData[1].values[0],
+        name: valueLabel,
       })
     );
 
     expect(within(valueContainer).getByRole('combobox')).toHaveAttribute(
       'value',
-      dimensionFieldMockData[1].values[0]
+      valueLabel
     );
   });
 });