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

…alert form (#11331) * upcoming: [DI-21694] - Added the Resources Select component, UT for that, converted few variables from snake case to camel case * upcoming: [DI-21694] - Added memoization to the resources fetching method * upcoming: [DI-21694] - Rendering resources component before Severity * Added changeset: ResourceMultiSelect component, along with UT. Changed case for few variables and properties * upcoming: [DI-21694] - Removed the styling for the Autocomplete in ResourceMultiSelect and modified and added few properties for the Alert interfaces as per the latest API-spec * upcoming: [DI-21694] - Addressed the review changes: Made the values dynamic in the Unit Test, replaced the variable name from serviceWatcher to serviceTypeWatcher, added comment addressing need for useEffect() * upcoming: [DI-21694] - Addressed the review changes: Changed the Label to Clusters in case of Database service type
linode · Nov 27, 2024 · 0285c7a · 0285c7a
1 parent f690633
commit 0285c7a
Show file tree

Hide file tree

Showing 17 changed files with 384 additions and 37 deletions.
diff --git a/packages/api-v4/src/cloudpulse/alerts.ts b/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'),

diff --git a/packages/api-v4/src/cloudpulse/types.ts b/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[];
   };

diff --git a/packages/manager/.changeset/pr-11331-added-1732627930598.md b/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))
diff --git a/packages/manager/src/factories/cloudpulse/alerts.ts b/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: [],
   },

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx b/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>
   );

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx b/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" />

diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.test.tsx b/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();
   });
 });
diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx b/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 serviceTypeWatcher = 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" />
+          {serviceTypeWatcher === 'dbaas' && <EngineOption name="engineType" />}
           <CloudPulseRegionSelect name="region" />
+          <CloudPulseMultiResourceSelect
+            engine={watch('engineType')}
+            name="entity_ids"
+            region={watch('region')}
+            serviceType={serviceTypeWatcher}
+          />
           <CloudPulseAlertSeveritySelect name="severity" />
           <ActionsPanel
             primaryButtonProps={{

diff --git a/...nager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/EngineOption.test.tsx b/...nager/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' }));