upcoming: [DI-23769] - multiple error handling #11874

santoshp210-akamai · 2025-03-18T15:35:54Z

Description 📝

Handling multiple error messages from API and displaying it in the form accordingly.

Changes 🔄

Introduced a new component AlertListNoticeMessages.tsx
Added a util method handleMultipleError to handle the error map logic
Added the AlertListNoticeMessages component in AddChannelListing & MetricCriteria components
Modified the handleSubmit method in Create and Edit flow to include the error handling
Relevant tests for the components and util methods

Target release date 🗓️

08/04/2025

Preview 📷

UX Mockups	Local

How to test 🧪

Prerequisites

(How to setup test environment)

In serverHandler.ts use the given snippet below as the return response for either
http.post('*/monitor/services/:service_type/alert-definitions') request
or
http.put('*/monitor/services/:serviceType/alert-definitions/:id') request

return HttpResponse.json(
      {
        errors: [
          { field: 'channel_ids', reason: 'Reason 1.' },
          {
            field: 'label',
            reason: 'Very long error primary message example',
          },
          {
            field: 'label',
            reason: 'Very long error secondary message example.',
          },
          {
            field: 'label',
            reason:
              'Very long error tertiary message example',
          },

          { field: 'severity', reason: 'Wrong field.' },
          { field: 'severity', reason: 'Wrong field.' },
          { reason: 'Failed.' },
          {
            field: 'rule_criteria.rules[0].aggregate_function',
            reason: 'Must be one of avg, sum, min, max, count',
          },
          {
            field: 'rule_criteria',
            reason: 'Must have at least one rule.',
          },
          {
            field: 'rule_criteria',
            reason: 'Must have at least one rule.',
          },
          {
            field: 'entity_ids', 
            reason: 'Entity_ids must be a list of string',
          },
          {
            field: 'entity_ids', 
            reason: 'Error 2',
          },
        ],
      },
      { status: 500 }
    );

Navigate to monitor, see the menu items displayed. They should be these 3 in the order shown - 'Metrics', 'Alerts', 'Longview'.
Click on Alerts, Under Alerts either Click on Create Alert or Click on Action Item for an Alert and choose Edit
Fill the Create or Edit Form
Click on submit, the errors should be visible.

Verification steps

(How to verify changes)

The errors for channel_ids, rule_criteria.rules should be shown in AlertListNoticeMessages component
The child errors for channel_ids, rule_criteria.rules should be captured shown in AlertListNoticeMessages component.
The AlertListNoticeMessages should show listed errors (bulleted) only when the errorMessages are multiple
The AlertListNoticeMessages should show single error (non-bulleted) when the errorMessages is a single string
The errors for other FieldValues except channel_ids, rule_criteria.rules should be displayed in the relevant errorText handlers of the components
The errors for other FieldValues except channel_ids, rule_criteria.rules should be concatenated if they are multiple with a space in between.
The errors displayed must be unique

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

…s in forms, Added a Notice based component to render list or single accordingly

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.tsx

packages/manager/src/features/CloudPulse/Alerts/Utils/utils.ts

venkymano-akamai · 2025-03-19T04:56:04Z

packages/manager/src/features/CloudPulse/Alerts/Utils/utils.ts

+      continue;
+    }
+
+    const errorField = error.field.split('.')[0];


@santoshp210-akamai , the function is good, lets add comments above each step, explaining what it does

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.test.tsx

venkymano-akamai

@santoshp210-akamai , Looks good, we can address minor comment I left

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.tsx

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

santoshp210-akamai · 2025-03-19T15:14:48Z

~~There seems to be a case that's missing from this and an existing component can be enhanced to work with new component and reduce redundancy. So converted to draft to work on it.~~

Fixed it.

…d the AlertListNoticeMessages to remove redundant components

pmakode-akamai

✅ Able to see multiple error messages for Create/Edit Alerts

Left a couple of comments. thank you!

Optional: I'm wondering if we can remove the extra top padding between the notices to match the consistent margin-bottom of 8px (seems to be the default for Notices) used elsewhere in CM. The current spacing used here looks too large.

pmakode-akamai · 2025-03-26T10:39:19Z

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

+              style={{
+                alignItems: 'center',
+                background: theme.tokens.alias.Background.Normal,
+                borderRadius: 1,
+                display: 'flex',
+                flexWrap: 'nowrap',
+                marginBottom: 0,
+                padding: theme.tokens.spacing.S16,
+              }}
+              errorMessage={errorText}
+              separator={MULTILINE_ERROR_SEPARATOR}
+              variant="error"
+            />
+          </Grid>
        )}
        {maxSelectionCount !== undefined && (
-          <AlertsNoticeMessage
-            text={`You can select up to ${maxSelectionCount} resources.`}
-            variant="warning"
-          />
+          <Grid item md={12}>
+            <AlertListNoticeMessages
+              style={{
+                alignItems: 'center',
+                background: theme.tokens.alias.Background.Normal,
+                borderRadius: 1,
+                display: 'flex',
+                flexWrap: 'nowrap',
+                marginBottom: 0,
+                padding: theme.tokens.spacing.S16,
+              }}


Instead of duplicating these styles, could we define them as constant and use it here or create a styled component to avoid importing useTheme?

pmakode-akamai · 2025-03-26T11:05:37Z

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.tsx

+        <List sx={{ listStyleType: 'disc', pl: 1.5 }}>
+          {errorList.map((error, index) => (
+            <ListItem
+              data-testid="alert_notice_message_list"
+              key={index}
+              sx={{ display: 'list-item', pl: 0.5, py: 0.5 }}
+            >
+              {error}
+            </ListItem>
+          ))}
+        </List>


Instead of hardcoding the values, can we use our theme.tokens.spacing.* here?

Nit: Or our new spacingFunction! https://linode.github.io/manager/development-guide/16-design-tokens.html#examples

santoshp210-akamai · 2025-03-27T08:42:50Z

✅ Able to see multiple error messages for Create/Edit Alerts

Left a couple of comments. thank you!

Optional: I'm wondering if we can remove the extra top padding between the notices to match the consistent margin-bottom of 8px (seems to be the default for Notices) used elsewhere in CM. The current spacing used here looks too large.

Hi, @pmakode-akamai . This was intentional as the spacing aligns with our UX Mockups.

And ideally the background color for the notice should be slightly different. I have attached screenshots to show what the desired styling should look. These are the screenshots from my localhost. Can you please confirm if the changes look the same for you ?

pmakode-akamai · 2025-03-27T10:40:23Z

Hi, @pmakode-akamai . This was intentional as the spacing aligns with our UX Mockups.

And ideally the background color for the notice should be slightly different. I have attached screenshots to show what the desired styling should look. These are the screenshots from my localhost. Can you please confirm if the changes look the same for you ?

Yeah, background color for the Notice looks good to me ✅

edit: All other suggestions/required fixes have been addressed async.

…across all window sizes

linode-gh-bot · 2025-03-27T13:09:53Z

Cloud Manager UI test results

🎉 534 passing tests on test run #17 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`534 Passing`	`4 Skipped`	`104m 52s`

santoshp210-akamai added 2 commits March 18, 2025 18:54

upcoming: [DI-23769] - Added util to handle and render Multiple Error…

0355dae

…s in forms, Added a Notice based component to render list or single accordingly

upcoming: [DI-23769] - Fixed linting issue

2f9d305

github-project-automation bot added this to Cloud Manager Mar 18, 2025

github-project-automation bot moved this to Review in Cloud Manager Mar 18, 2025

santoshp210-akamai added 3 commits March 18, 2025 22:02

upcoming: [DI-23769] - Typecheck fix

c433779

Merge branch 'develop' into feature/multiple-error-handling

f3325f6

upcoming: [DI-23769] - Added changeset

9810b63

santoshp210-akamai marked this pull request as ready for review March 18, 2025 17:09

santoshp210-akamai requested a review from a team as a code owner March 18, 2025 17:09

santoshp210-akamai requested review from cliu-akamai and hkhalil-akamai and removed request for a team March 18, 2025 17:09

ankita-akamai assigned santoshp210-akamai Mar 19, 2025

venkymano-akamai reviewed Mar 19, 2025

View reviewed changes

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.tsx Outdated Show resolved Hide resolved

venkymano-akamai reviewed Mar 19, 2025

View reviewed changes

packages/manager/src/features/CloudPulse/Alerts/Utils/utils.ts Outdated Show resolved Hide resolved

venkymano-akamai reviewed Mar 19, 2025

View reviewed changes

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.test.tsx Show resolved Hide resolved

venkymano-akamai approved these changes Mar 19, 2025

View reviewed changes

venkymano-akamai added Cloud Pulse Cloud Pulse - Alerting labels Mar 19, 2025

ankita-akamai reviewed Mar 19, 2025

View reviewed changes

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.tsx Outdated Show resolved Hide resolved

ankita-akamai reviewed Mar 19, 2025

View reviewed changes

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx Show resolved Hide resolved

Merge branch 'develop' into feature/multiple-error-handling

2d3c26d

ankita-akamai approved these changes Mar 19, 2025

View reviewed changes

santoshp210-akamai added the Work in Progress label Mar 19, 2025

santoshp210-akamai marked this pull request as draft March 19, 2025 15:13

upcoming: [DI-23769] - Removed AlertsNoticeMessage component, enhance…

a1b9f0a

…d the AlertListNoticeMessages to remove redundant components

santoshp210-akamai marked this pull request as ready for review March 24, 2025 12:52

santoshp210-akamai requested a review from venkymano-akamai March 24, 2025 12:54

merging latest linode/develop

52f50d7

santoshp210-akamai added the Work in Progress label Mar 24, 2025

upcoming: [DI-23769] - Fixing the failing tests

48e0dc7

santoshp210-akamai requested a review from a team as a code owner March 24, 2025 18:06

santoshp210-akamai requested review from dmcintyr-akamai and removed request for a team March 24, 2025 18:06

santoshp210-akamai removed the Work in Progress label Mar 24, 2025

Merge branch 'develop' into feature/multiple-error-handling

3478462

nikhagra-akamai added the Ready for Review label Mar 25, 2025

santoshp210-akamai added 2 commits March 25, 2025 12:22

upcoming: [DI-23769] - Removed the wrapper component

c854880

upcoming: [DI-23769] - Minor UI changes

63cf6f3

venkymano-akamai approved these changes Mar 25, 2025

View reviewed changes

Merge branch 'develop' into feature/multiple-error-handling

aa8a1e2

venkymano-akamai requested review from hasyed-akamai and pmakode-akamai March 26, 2025 08:44

pmakode-akamai approved these changes Mar 26, 2025

View reviewed changes

github-project-automation bot moved this from Review to Approved in Cloud Manager Mar 26, 2025

upcoming: [DI-23769] - Addressing review comments

13eccb3

Merge branch 'develop' into feature/multiple-error-handling

60d6cca

santoshp210-akamai added 2 commits March 27, 2025 17:09

upcoming: [DI-23769] - Fixing spacing inconsistency

6853775

upcoming: [DI-23769] - Fixed Error Notice message width in Resources …

4773618

…across all window sizes

jaalah-akamai added the Approved Multiple approvals and ready to merge! label Mar 27, 2025

dmcintyr-akamai approved these changes Mar 31, 2025

View reviewed changes

venkymano-akamai merged commit 7e23502 into linode:develop Apr 1, 2025
28 checks passed

github-project-automation bot moved this from Approved to Merged in Cloud Manager Apr 1, 2025

This was referenced Apr 3, 2025

Release v1.139.0 - release → staging #11960

Merged

Release v1.139.0 - staging → master #11980

Merged

upcoming: [DI-23769] - multiple error handling #11874

upcoming: [DI-23769] - multiple error handling #11874

Uh oh!

Conversation

santoshp210-akamai commented Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Uh oh!

Uh oh!

Uh oh!

venkymano-akamai Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

venkymano-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

santoshp210-akamai commented Mar 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pmakode-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

jaalah-akamai Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

santoshp210-akamai commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pmakode-akamai commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linode-gh-bot commented Mar 27, 2025

Cloud Manager UI test results

🎉 534 passing tests on test run #17 ↗︎

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

santoshp210-akamai commented Mar 18, 2025 •

edited

Loading

santoshp210-akamai commented Mar 19, 2025 •

edited

Loading

santoshp210-akamai commented Mar 27, 2025 •

edited

Loading

pmakode-akamai commented Mar 27, 2025 •

edited

Loading