upcoming: [DI: 21998] - Added Service Type, Engine Option and Region Select component to Create Alert form

packages/api-v4/.changeset/pr-11286-changed-1732032917339.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Added service_type as parameter for the Create Alert POST request ([#11286](https://github.com/linode/manager/pull/11286))

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

@@ -3,9 +3,16 @@ import Request, { setURL, setMethod, setData } from '../request';
 import { Alert, CreateAlertDefinitionPayload } from './types';
 import { BETA_API_ROOT as API_ROOT } from 'src/constants';
 
-export const createAlertDefinition = (data: CreateAlertDefinitionPayload) =>
+export const createAlertDefinition = (
+  data: CreateAlertDefinitionPayload,
+  service_type: string
+) =>
   Request<Alert>(
-    setURL(`${API_ROOT}/monitor/alert-definitions`),
+    setURL(
+      `${API_ROOT}/monitor/services/${encodeURIComponent(
+        service_type
+      )}/alert-definitions`
+    ),
     setMethod('POST'),
     setData(data, createAlertDefinitionSchema)
   );

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

@@ -7,8 +7,8 @@ type DimensionFilterOperatorType =
   | 'startswith'
   | 'endswith'
   | null;
-type AlertDefinitionType = 'default' | 'custom';
-type AlertStatusType = 'enabled' | 'disabled';
+export type AlertDefinitionType = 'default' | 'custom';
+export type AlertStatusType = 'enabled' | 'disabled';
 export interface Dashboard {
   id: number;
   label: string;
@@ -158,8 +158,8 @@ export interface CreateAlertDefinitionPayload {
 export interface CreateAlertDefinitionForm
   extends CreateAlertDefinitionPayload {
   region: string;
-  service_type: string;
-  engine_type: string;
+  service_type: string | null;
+  engine_type: string | null;
 }
 export interface MetricCriteria {
   metric: string;

packages/manager/.changeset/pr-11286-added-1732032870588.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Service, Engine Option, Region components to the Create Alert form ([#11286](https://github.com/linode/manager/pull/11286))

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

@@ -0,0 +1,37 @@
+import Factory from 'src/factories/factoryProxy';
+
+import type {
+  Alert,
+  AlertDefinitionType,
+  AlertSeverityType,
+  AlertStatusType,
+} from '@linode/api-v4';
+
+const types: AlertDefinitionType[] = ['custom', 'default'];
+const status: AlertStatusType[] = ['enabled', 'disabled'];
+const severity: AlertSeverityType[] = [0, 1, 2, 3];
+const users = ['user1', 'user2', 'user3'];
+const serviceTypes = ['linode', 'dbaas'];
+export const alertFactory = Factory.Sync.makeFactory<Alert>({
+  channels: [],
+  created: new Date().toISOString(),
+  created_by: Factory.each((i) => users[i % users.length]),
+  description: '',
+  id: Factory.each(() => Math.floor(Math.random() * 1000000)),
+  label: Factory.each((id) => `Alert-${id}`),
+  resource_ids: ['0', '1', '2', '3'],
+  rule_criteria: {
+    rules: [],
+  },
+  service_type: Factory.each((i) => serviceTypes[i % serviceTypes.length]),
+  severity: Factory.each((i) => severity[i % severity.length]),
+  status: Factory.each((i) => status[i % status.length]),
+  triggerCondition: {
+    evaluation_period_seconds: 0,
+    polling_interval_seconds: 0,
+    trigger_occurrences: 0,
+  },
+  type: Factory.each((i) => types[i % types.length]),
+  updated: new Date().toISOString(),
+  updated_by: Factory.each((i) => users[(i + 3) % users.length]),
+});

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

@@ -1,23 +1,23 @@
-import { fireEvent, screen, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { CreateAlertDefinition } from './CreateAlertDefinition';
 describe('AlertDefinition Create', () => {
-  it('should render input components', () => {
+  it('should render input components', async () => {
     const { getByLabelText } = renderWithTheme(<CreateAlertDefinition />);
 
     expect(getByLabelText('Name')).toBeVisible();
     expect(getByLabelText('Description (optional)')).toBeVisible();
     expect(getByLabelText('Severity')).toBeVisible();
   });
-  it('should be able to enter a value in the textbox', () => {
+  it('should be able to enter a value in the textbox', async () => {
     const { getByLabelText } = renderWithTheme(<CreateAlertDefinition />);
     const input = getByLabelText('Name');
 
-    fireEvent.change(input, { target: { value: 'text' } });
+    await userEvent.type(input, 'text');
     const specificInput = within(screen.getByTestId('alert-name')).getByTestId(
       'textfield-input'
     );
@@ -30,7 +30,9 @@ describe('AlertDefinition Create', () => {
 
     await userEvent.click(submitButton!);
 
-    expect(getByText('Name is required')).toBeVisible();
-    expect(getByText('Severity is required')).toBeVisible();
+    expect(getByText('Name is required.')).toBeVisible();
+    expect(getByText('Severity is required.')).toBeVisible();
+    expect(getByText('Service is required.')).toBeVisible();
+    expect(getByText('Region is required.')).toBeVisible();
   });
 });

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

@@ -13,10 +13,13 @@ import { Typography } from 'src/components/Typography';
 import { useCreateAlertDefinition } from 'src/queries/cloudpulse/alerts';
 
 import { CloudPulseAlertSeveritySelect } from './GeneralInformation/AlertSeveritySelect';
+import { EngineOption } from './GeneralInformation/EngineOption';
+import { CloudPulseRegionSelect } from './GeneralInformation/RegionSelect';
+import { CloudPulseServiceSelect } from './GeneralInformation/ServiceTypeSelect';
+import { getCreateAlertPayload } from './utilities';
 
 import type {
   CreateAlertDefinitionForm,
-  CreateAlertDefinitionPayload,
   MetricCriteria,
   TriggerCondition,
 } from '@linode/api-v4/lib/cloudpulse/types';
@@ -37,12 +40,12 @@ const criteriaInitialValues: MetricCriteria[] = [
 ];
 const initialValues: CreateAlertDefinitionForm = {
   channel_ids: [],
-  engine_type: '',
+  engine_type: null,
   label: '',
   region: '',
   resource_ids: [],
   rule_criteria: { rules: criteriaInitialValues },
-  service_type: '',
+  service_type: null,
   severity: null,
   triggerCondition: triggerConditionInitialValues,
 };
@@ -64,19 +67,29 @@ export const CreateAlertDefinition = () => {
   const alertCreateExit = () =>
     history.push('/monitor/cloudpulse/alerts/definitions');
 
-  const formMethods = useForm<CreateAlertDefinitionPayload>({
+  const formMethods = useForm<CreateAlertDefinitionForm>({
     defaultValues: initialValues,
     mode: 'onBlur',
     resolver: yupResolver(createAlertDefinitionSchema),
   });
 
-  const { control, formState, handleSubmit, setError } = formMethods;
+  const {
+    control,
+    formState,
+    getValues,
+    handleSubmit,
+    setError,
+    watch,
+  } = formMethods;
   const { enqueueSnackbar } = useSnackbar();
-  const { mutateAsync: createAlert } = useCreateAlertDefinition();
+  const { mutateAsync: createAlert } = useCreateAlertDefinition(
+    getValues('service_type')!
+  );
 
+  const serviceWatcher = watch('service_type');
   const onSubmit = handleSubmit(async (values) => {
     try {
-      await createAlert(values);
+      await createAlert(getCreateAlertPayload(values));
       enqueueSnackbar('Alert successfully created', {
         variant: 'success',
       });
@@ -132,6 +145,9 @@ export const CreateAlertDefinition = () => {
             control={control}
             name="description"
           />
+          <CloudPulseServiceSelect name="service_type" />
+          {serviceWatcher === 'dbaas' && <EngineOption name={'engine_type'} />}
+          <CloudPulseRegionSelect name="region" />
           <CloudPulseAlertSeveritySelect name="severity" />
           <ActionsPanel
             primaryButtonProps={{

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/AlertSeveritySelect.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
@@ -13,20 +14,22 @@ describe('EngineOption component tests', () => {
     expect(getByLabelText('Severity')).toBeInTheDocument();
     expect(getByTestId('severity')).toBeInTheDocument();
   });
-  it('should render the options happy path', () => {
+  it('should render the options happy path', async () => {
     renderWithThemeAndHookFormContext({
       component: <CloudPulseAlertSeveritySelect name="severity" />,
     });
-    fireEvent.click(screen.getByRole('button', { name: 'Open' }));
-    expect(screen.getByRole('option', { name: 'Info' }));
+    userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    expect(await screen.findByRole('option', { name: 'Info' }));
     expect(screen.getByRole('option', { name: 'Low' }));
   });
-  it('should be able to select an option', () => {
+  it('should be able to select an option', async () => {
     renderWithThemeAndHookFormContext({
       component: <CloudPulseAlertSeveritySelect name="severity" />,
     });
-    fireEvent.click(screen.getByRole('button', { name: 'Open' }));
-    fireEvent.click(screen.getByRole('option', { name: 'Medium' }));
+    userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    await userEvent.click(
+      await screen.findByRole('option', { name: 'Medium' })
+    );
     expect(screen.getByRole('combobox')).toHaveAttribute('value', 'Medium');
   });
   it('should render the tooltip text', () => {
@@ -35,12 +38,12 @@ describe('EngineOption component tests', () => {
     });
 
     const severityContainer = container.getByTestId('severity');
-    fireEvent.click(severityContainer);
+    userEvent.click(severityContainer);
 
     expect(
       screen.getByRole('button', {
         name:
-          'Define a severity level associated with the alert to help you prioritize and manage alerts in the Recent activity tab',
+          'Define a severity level associated with the alert to help you prioritize and manage alerts in the Recent activity tab.',
       })
     ).toBeVisible();
   });

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/AlertSeveritySelect.tsx

@@ -41,7 +41,7 @@ export const CloudPulseAlertSeveritySelect = (
           }}
           textFieldProps={{
             labelTooltipText:
-              'Define a severity level associated with the alert to help you prioritize and manage alerts in the Recent activity tab',
+              'Define a severity level associated with the alert to help you prioritize and manage alerts in the Recent activity tab.',
           }}
           value={
             field.value !== null

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/EngineOption.test.tsx

@@ -0,0 +1,35 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
+
+import { EngineOption } from './EngineOption';
+
+describe('EngineOption component tests', () => {
+  it('should render the component when resource type is dbaas', () => {
+    const { getByLabelText, getByTestId } = renderWithThemeAndHookFormContext({
+      component: <EngineOption name={'engine_type'} />,
+    });
+    expect(getByLabelText('Engine Option')).toBeInTheDocument();
+    expect(getByTestId('engine-option')).toBeInTheDocument();
+  });
+  it('should render the options happy path', async () => {
+    const user = userEvent.setup();
+    renderWithThemeAndHookFormContext({
+      component: <EngineOption name={'engine_type'} />,
+    });
+    user.click(screen.getByRole('button', { name: 'Open' }));
+    expect(await screen.findByRole('option', { name: 'MySQL' }));
+    expect(screen.getByRole('option', { name: 'PostgreSQL' }));
+  });
+  it('should be able to select an option', async () => {
+    const user = userEvent.setup();
+    renderWithThemeAndHookFormContext({
+      component: <EngineOption name={'engine_type'} />,
+    });
+    user.click(screen.getByRole('button', { name: 'Open' }));
+    await user.click(await screen.findByRole('option', { name: 'MySQL' }));
+    expect(screen.getByRole('combobox')).toHaveAttribute('value', 'MySQL');
+  });
+});

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/EngineOption.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+
+import { engineTypeOptions } from '../../constants';
+
+import type { CreateAlertDefinitionForm } from '@linode/api-v4';
+import type { FieldPathByValue } from 'react-hook-form';
+
+interface EngineOptionProps {
+  /**
+   * name used for the component to set in the form
+   */
+  name: FieldPathByValue<CreateAlertDefinitionForm, null | string>;
+}
+export const EngineOption = (props: EngineOptionProps) => {
+  const { name } = props;
+  const { control } = useFormContext<CreateAlertDefinitionForm>();
+  return (
+    <Controller
+      render={({ field, fieldState }) => (
+        <Autocomplete
+          onChange={(_, selected: { label: string; value: string }, reason) => {
+            if (reason === 'selectOption') {
+              field.onChange(selected.value);
+            }
+            if (reason === 'clear') {
+              field.onChange(null);
+            }
+          }}
+          value={
+            field.value !== null
+              ? engineTypeOptions.find((option) => option.value === field.value)
+              : null
+          }
+          data-testid="engine-option"
+          errorText={fieldState.error?.message}
+          label="Engine Option"
+          onBlur={field.onBlur}
+          options={engineTypeOptions}
+          placeholder="Select an Engine"
+        />
+      )}
+      control={control}
+      name={name}
+    />
+  );
+};

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/RegionSelect.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import * as regions from 'src/queries/regions/regions';
+import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
+
+import { CloudPulseRegionSelect } from './RegionSelect';
+
+import type { Region } from '@linode/api-v4';
+
+describe('RegionSelect', () => {
+  vi.spyOn(regions, 'useRegionsQuery').mockReturnValue({
+    data: Array<Region>(),
+  } as ReturnType<typeof regions.useRegionsQuery>);
+
+  it('should render a RegionSelect component', () => {
+    const { getByTestId } = renderWithThemeAndHookFormContext({
+      component: <CloudPulseRegionSelect name="region" />,
+    });
+    expect(getByTestId('region-select')).toBeInTheDocument();
+  });
+  it('should render a Region Select component with proper error message on api call failure', () => {
+    vi.spyOn(regions, 'useRegionsQuery').mockReturnValue({
+      data: undefined,
+      isError: true,
+      isLoading: false,
+    } as ReturnType<typeof regions.useRegionsQuery>);
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: <CloudPulseRegionSelect name="region" />,
+    });
+
+    expect(getByText('Failed to fetch Region.'));
+  });
+});