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

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

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

@@ -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 type 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/EngineOption.test.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, screen } from '@testing-library/react';
+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', () => {
+    renderWithThemeAndHookFormContext({
+      component: <EngineOption name={'engine_type'} />,
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Open' }));
+    expect(screen.getByRole('option', { name: 'MySQL' }));
+    expect(screen.getByRole('option', { name: 'PostgreSQL' }));
+  });
+  it('should be able to select an option', () => {
+    renderWithThemeAndHookFormContext({
+      component: <EngineOption name={'engine_type'} />,
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Open' }));
+    fireEvent.click(screen.getByRole('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.'));
+  });
+});

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
+import { useRegionsQuery } from 'src/queries/regions/regions';
+
+export interface CloudViewRegionSelectProps {
+  /**
+   * name used for the component to set in the form
+   */
+  name: string;
+}
+
+export const CloudPulseRegionSelect = (props: CloudViewRegionSelectProps) => {
+  const { name } = props;
+  const { data: regions, isError, isLoading } = useRegionsQuery();
+  const { control } = useFormContext();
+  return (
+    <Controller
+      render={({ field, fieldState }) => (
+        <RegionSelect
+          errorText={
+            fieldState.error?.message ??
+            (isError ? 'Failed to fetch Region.' : '')
+          }
+          onChange={(_, value) => {
+            field.onChange(value?.id);
+          }}
+          currentCapability={undefined}
+          disableClearable={false}
+          fullWidth
+          label="Region"
+          loading={isLoading}
+          placeholder="Select a Region"
+          regions={regions ?? []}
+          textFieldProps={{ onBlur: field.onBlur }}
+          value={field.value}
+        />
+      )}
+      control={control}
+      name={name}
+    />
+  );
+};