upcoming: [DI-25353] - Fetching the alerting time intervals from /services api (linode#12466)

* upcoming: [DI-25353] - Fetching the alerting time intervals from /services api

* upcoming: [Di-25353] - Add unit test for the convert util

* add changeset

* upcoming: [DI-25353] - Add timeout to failing unit test

---------

Co-authored-by: Nikhil Agrawal <[email protected]>

Author: santoshp210-akamai

packages/api-v4/.changeset/pr-12466-changed-1751546788440.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+ACLP:Alerting - fixed the typo from evaluation_periods_seconds to evaluation_period_seconds ([#12466](https://github.com/linode/manager/pull/12466))

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

@@ -168,7 +168,7 @@ export interface CloudPulseMetricsList {
 }
 
 export interface ServiceAlert {
-  evaluation_periods_seconds: number[];
+  evaluation_period_seconds: number[];
   polling_interval_seconds: number[];
   scope: AlertDefinitionScope[];
 }

packages/manager/.changeset/pr-12466-upcoming-features-1751546680834.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+ACLP-Alerting: using latest /services api data to fetch the evaluation period and polling interval time options ([#12466](https://github.com/linode/manager/pull/12466))

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

@@ -4,8 +4,8 @@ import { Factory } from '@linode/utilities';
 import type { ServiceAlert } from '@linode/api-v4';
 
 export const serviceAlertFactory = Factory.Sync.makeFactory<ServiceAlert>({
-  polling_interval_seconds: [1, 5, 10, 15],
-  evaluation_periods_seconds: [5, 10, 15, 20],
+  evaluation_period_seconds: [300, 900, 1800, 3600],
+  polling_interval_seconds: [300, 900, 1800, 3600],
   scope: ['entity', 'region', 'account'],
 });
 

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.test.tsx

@@ -114,38 +114,47 @@ describe('AlertDefinition Create', () => {
     },
   });
 
-  it('should render client side validation errors for threshold and trigger occurences text field', async () => {
-    const user = userEvent.setup();
-    const container = await renderWithThemeAndRouter(<CreateAlertDefinition />);
+  it(
+    'should render client side validation errors for threshold and trigger occurences text field',
+    async () => {
+      const user = userEvent.setup();
+      const container = await renderWithThemeAndRouter(
+        <CreateAlertDefinition />
+      );
 
-    const serviceTypeInput = container.getByPlaceholderText('Select a Service');
-    await user.click(serviceTypeInput);
+      const serviceTypeInput =
+        container.getByPlaceholderText('Select a Service');
+      await user.click(serviceTypeInput);
 
-    await user.click(container.getByText('Linode'));
+      await user.click(container.getByText('Linode'));
 
-    const dataFieldContainer = container.getByPlaceholderText(
-      'Select a Data Field'
-    );
+      const dataFieldContainer = container.getByPlaceholderText(
+        'Select a Data Field'
+      );
 
-    await user.click(dataFieldContainer);
-    await user.click(container.getByText('CPU utilization'));
+      await user.click(dataFieldContainer);
+      await user.click(container.getByText('CPU utilization'));
 
-    const submitButton = container.getByText('Submit');
+      const submitButton = container.getByText('Submit');
 
-    await user.click(submitButton);
+      await user.click(submitButton);
 
-    expect(container.getAllByText('Enter a positive value.').length).toBe(2);
+      expect(container.getAllByText('Enter a positive value.').length).toBe(2);
 
-    const thresholdInput = container.getByLabelText('Threshold');
-    const triggerOccurrences = container.getByTestId('trigger-occurences');
-    await user.clear(thresholdInput);
-    await user.clear(within(triggerOccurrences).getByTestId('textfield-input'));
-    await user.click(submitButton!);
+      const thresholdInput = container.getByLabelText('Threshold');
+      const triggerOccurrences = container.getByTestId('trigger-occurences');
+      await user.clear(thresholdInput);
+      await user.clear(
+        within(triggerOccurrences).getByTestId('textfield-input')
+      );
+      await user.click(submitButton!);
 
-    expect(container.getAllByText('The value should be a number.').length).toBe(
-      2
-    );
-  });
+      expect(
+        container.getAllByText('The value should be a number.').length
+      ).toBe(2);
+    },
+    { timeout: 10000 }
+  );
 
   it('should render the client side validation error messages for the form', async () => {
     const errorMessage = 'This field is required.';

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx

@@ -11,6 +11,7 @@ import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { useFlags } from 'src/hooks/useFlags';
 import { useCreateAlertDefinition } from 'src/queries/cloudpulse/alerts';
+import { useCloudPulseServiceByServiceType } from 'src/queries/cloudpulse/services';
 
 import {
   CREATE_ALERT_ERROR_FIELD_MAP,
@@ -111,6 +112,14 @@ export const CreateAlertDefinition = () => {
   );
 
   const serviceTypeWatcher = useWatch({ control, name: 'serviceType' });
+  const {
+    data: serviceMetadata,
+    isLoading: serviceMetadataLoading,
+    error: serviceMetadataError,
+  } = useCloudPulseServiceByServiceType(
+    serviceTypeWatcher ?? '',
+    !!serviceTypeWatcher
+  );
 
   const [maxScrapeInterval, setMaxScrapeInterval] = React.useState<number>(0);
 
@@ -221,6 +230,9 @@ export const CreateAlertDefinition = () => {
             <TriggerConditions
               maxScrapingInterval={maxScrapeInterval}
               name="trigger_conditions"
+              serviceMetadata={serviceMetadata?.alert ?? undefined}
+              serviceMetadataError={serviceMetadataError}
+              serviceMetadataLoading={serviceMetadataLoading}
             />
             <AddChannelListing name="channel_ids" />
             <ActionsPanel