upcoming: [DI-21694] - Added Resource Select component to the Create-alert form

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

@@ -5,12 +5,12 @@ import { BETA_API_ROOT as API_ROOT } from 'src/constants';
 
 export const createAlertDefinition = (
   data: CreateAlertDefinitionPayload,
-  service_type: AlertServiceType
+  serviceType: AlertServiceType
 ) =>
   Request<Alert>(
     setURL(
       `${API_ROOT}/monitor/services/${encodeURIComponent(
-        service_type!
+        serviceType!
       )}/alert-definitions`
     ),
     setMethod('POST'),

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

@@ -143,7 +143,7 @@ export interface ServiceTypesList {
 export interface CreateAlertDefinitionPayload {
   label: string;
   description?: string;
-  resource_ids?: string[];
+  entity_ids?: string[];
   severity: AlertSeverityType;
   rule_criteria: {
     rules: MetricCriteria[];
@@ -174,11 +174,12 @@ export interface Alert {
   id: number;
   label: string;
   description: string;
+  has_more_resources: boolean;
   status: AlertStatusType;
   type: AlertDefinitionType;
   severity: AlertSeverityType;
   service_type: AlertServiceType;
-  resource_ids: string[];
+  entity_ids: string[];
   rule_criteria: {
     rules: MetricCriteria[];
   };

packages/manager/.changeset/pr-11331-added-1732627930598.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+ResourceMultiSelect component, along with UT. Changed case for few variables and properties ([#11331](https://github.com/linode/manager/pull/11331))

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

@@ -7,9 +7,10 @@ export const alertFactory = Factory.Sync.makeFactory<Alert>({
   created: new Date().toISOString(),
   created_by: 'user1',
   description: '',
+  entity_ids: ['0', '1', '2', '3'],
+  has_more_resources: true,
   id: Factory.each((i) => i),
   label: Factory.each((id) => `Alert-${id}`),
-  resource_ids: ['0', '1', '2', '3'],
   rule_criteria: {
     rules: [],
   },

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx

@@ -14,7 +14,7 @@ export const AlertDefinitionLanding = () => {
       />
       <Route
         component={() => <CreateAlertDefinition />}
-        path="/monitor/cloudpulse/alerts/definitions/create"
+        path="/monitor/alerts/definitions/create"
       />
     </Switch>
   );

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx

@@ -84,7 +84,6 @@ export const AlertsLanding = React.memo(() => {
         <Switch>
           <Route
             component={AlertDefinitionLanding}
-            exact
             path={'/monitor/alerts/definitions'}
           />
           <Redirect from="*" to="/monitor/alerts/definitions" />

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

@@ -34,5 +34,6 @@ describe('AlertDefinition Create', () => {
     expect(getByText('Severity is required.')).toBeVisible();
     expect(getByText('Service is required.')).toBeVisible();
     expect(getByText('Region is required.')).toBeVisible();
+    expect(getByText('At least one resource is needed.')).toBeVisible();
   });
 });

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

@@ -12,6 +12,7 @@ import { useCreateAlertDefinition } from 'src/queries/cloudpulse/alerts';
 import { CloudPulseAlertSeveritySelect } from './GeneralInformation/AlertSeveritySelect';
 import { EngineOption } from './GeneralInformation/EngineOption';
 import { CloudPulseRegionSelect } from './GeneralInformation/RegionSelect';
+import { CloudPulseMultiResourceSelect } from './GeneralInformation/ResourceMultiSelect';
 import { CloudPulseServiceSelect } from './GeneralInformation/ServiceTypeSelect';
 import { CreateAlertDefinitionFormSchema } from './schemas';
 import { filterFormValues, filterMetricCriteriaFormValues } from './utilities';
@@ -33,34 +34,33 @@ const criteriaInitialValues: MetricCriteriaForm = {
 };
 const initialValues: CreateAlertDefinitionForm = {
   channel_ids: [],
-  engine_type: null,
+  engineType: null,
+  entity_ids: [],
   label: '',
   region: '',
-  resource_ids: [],
   rule_criteria: {
     rules: filterMetricCriteriaFormValues(criteriaInitialValues),
   },
-  service_type: null,
+  serviceType: null,
   severity: null,
   triggerCondition: triggerConditionInitialValues,
 };
 
 const overrides = [
   {
     label: 'Definitions',
-    linkTo: '/monitor/cloudpulse/alerts/definitions',
+    linkTo: '/monitor/alerts/definitions',
     position: 1,
   },
   {
     label: 'Details',
-    linkTo: `/monitor/cloudpulse/alerts/definitions/create`,
+    linkTo: `/monitor/alerts/definitions/create`,
     position: 2,
   },
 ];
 export const CreateAlertDefinition = () => {
   const history = useHistory();
-  const alertCreateExit = () =>
-    history.push('/monitor/cloudpulse/alerts/definitions');
+  const alertCreateExit = () => history.push('/monitor/alerts/definitions');
 
   const formMethods = useForm<CreateAlertDefinitionForm>({
     defaultValues: initialValues,
@@ -78,10 +78,10 @@ export const CreateAlertDefinition = () => {
   } = formMethods;
   const { enqueueSnackbar } = useSnackbar();
   const { mutateAsync: createAlert } = useCreateAlertDefinition(
-    getValues('service_type')!
+    getValues('serviceType')!
   );
 
-  const serviceWatcher = watch('service_type');
+  const serviceWatcher = watch('serviceType');
   const onSubmit = handleSubmit(async (values) => {
     try {
       await createAlert(filterFormValues(values));
@@ -140,9 +140,15 @@ export const CreateAlertDefinition = () => {
             control={control}
             name="description"
           />
-          <CloudPulseServiceSelect name="service_type" />
-          {serviceWatcher === 'dbaas' && <EngineOption name="engine_type" />}
+          <CloudPulseServiceSelect name="serviceType" />
+          {serviceWatcher === 'dbaas' && <EngineOption name="engineType" />}
           <CloudPulseRegionSelect name="region" />
+          <CloudPulseMultiResourceSelect
+            engine={watch('engineType')}
+            name="entity_ids"
+            region={watch('region')}
+            serviceType={serviceWatcher}
+          />
           <CloudPulseAlertSeveritySelect name="severity" />
           <ActionsPanel
             primaryButtonProps={{

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

@@ -9,15 +9,15 @@ 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'} />,
+      component: <EngineOption name={'engineType'} />,
     });
     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'} />,
+      component: <EngineOption name={'engineType'} />,
     });
     user.click(screen.getByRole('button', { name: 'Open' }));
     expect(await screen.findByRole('option', { name: 'MySQL' }));
@@ -26,7 +26,7 @@ describe('EngineOption component tests', () => {
   it('should be able to select an option', async () => {
     const user = userEvent.setup();
     renderWithThemeAndHookFormContext({
-      component: <EngineOption name={'engine_type'} />,
+      component: <EngineOption name={'engineType'} />,
     });
     user.click(screen.getByRole('button', { name: 'Open' }));
     await user.click(await screen.findByRole('option', { name: 'MySQL' }));