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": 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

@@ -1,11 +1,18 @@
 import { createAlertDefinitionSchema } from '@linode/validation';
 import Request, { setURL, setMethod, setData } from '../request';
-import { Alert, CreateAlertDefinitionPayload } from './types';
+import { Alert, AlertServiceType, 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: AlertServiceType
+) =>
   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

@@ -1,14 +1,15 @@
 export type AlertSeverityType = 0 | 1 | 2 | 3 | null;
 type MetricAggregationType = 'avg' | 'sum' | 'min' | 'max' | 'count' | null;
 type MetricOperatorType = 'eq' | 'gt' | 'lt' | 'gte' | 'lte' | null;
+export type AlertServiceType = 'linode' | 'dbaas' | null;
 type DimensionFilterOperatorType =
   | 'eq'
   | 'neq'
   | '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;
@@ -155,12 +156,6 @@ export interface CreateAlertDefinitionPayload {
   triggerCondition: TriggerCondition;
   channel_ids: number[];
 }
-export interface CreateAlertDefinitionForm
-  extends CreateAlertDefinitionPayload {
-  region: string;
-  service_type: string;
-  engine_type: string;
-}
 export interface MetricCriteria {
   metric: string;
   aggregation_type: MetricAggregationType;
@@ -187,7 +182,7 @@ export interface Alert {
   status: AlertStatusType;
   type: AlertDefinitionType;
   severity: AlertSeverityType;
-  service_type: string;
+  service_type: AlertServiceType;
   resource_ids: string[];
   rule_criteria: {
     rules: MetricCriteria[];

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,27 @@
+import Factory from 'src/factories/factoryProxy';
+
+import type { Alert } from '@linode/api-v4';
+
+export const alertFactory = Factory.Sync.makeFactory<Alert>({
+  channels: [],
+  created: new Date().toISOString(),
+  created_by: 'user1',
+  description: '',
+  id: Factory.each((i) => i),
+  label: Factory.each((id) => `Alert-${id}`),
+  resource_ids: ['0', '1', '2', '3'],
+  rule_criteria: {
+    rules: [],
+  },
+  service_type: 'linode',
+  severity: 0,
+  status: 'enabled',
+  triggerCondition: {
+    evaluation_period_seconds: 0,
+    polling_interval_seconds: 0,
+    trigger_occurrences: 0,
+  },
+  type: 'default',
+  updated: new Date().toISOString(),
+  updated_by: 'user1',
+});

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

@@ -1,6 +1,5 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Paper, TextField, Typography } from '@linode/ui';
-import { createAlertDefinitionSchema } from '@linode/validation';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
@@ -11,10 +10,14 @@ import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
 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 { CreateAlertDefinitionFormSchema } from './schemas';
+import { filterFormValues } from './utilities';
 
+import type { CreateAlertDefinitionForm } from './types';
 import type {
-  CreateAlertDefinitionForm,
-  CreateAlertDefinitionPayload,
   MetricCriteria,
   TriggerCondition,
 } from '@linode/api-v4/lib/cloudpulse/types';
@@ -35,12 +38,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,
 };
@@ -62,19 +65,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),
+    resolver: yupResolver(CreateAlertDefinitionFormSchema),
   });
 
-  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(filterFormValues(values));
       enqueueSnackbar('Alert successfully created', {
         variant: 'success',
       });
@@ -130,6 +143,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

@@ -5,10 +5,8 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 
 import { alertSeverityOptions } from '../../constants';
 
-import type {
-  AlertSeverityType,
-  CreateAlertDefinitionForm,
-} from '@linode/api-v4';
+import type { CreateAlertDefinitionForm } from '../types';
+import type { AlertSeverityType } from '@linode/api-v4';
 import type { FieldPathByValue } from 'react-hook-form';
 export interface CloudPulseAlertSeveritySelectProps {
   /**
@@ -41,7 +39,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 '../types';
+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}
+    />
+  );
+};