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

santoshp210-akamai · 2024-11-26T13:18:26Z

Description 📝

Added the Resource Multi Select component under General Information section to the Create alert form.

Changes 🔄

Added a MultiSelect Autocomplete component for selecting Resources
Added Unit Test for the Resource Multi Select component
Changed few variables and properties to camelCase

Target release date 🗓️

Please specify a release date (and environment, if applicable) to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed.

Preview 📷

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

The tabs are controlled by a featureFlag called aclpAlerting, the flag has been currently disabled. For testing enable the definitions part of the aclpAlerting flag to be true.
The API endpoints are not live yet, so use Legacy MSW Handlers for the mock responses.

Verification steps

(How to verify changes)

In Monitor (once the prerequisites are followed) , Alerts tab should be visible next to Dashboards.
Under that, Definition tab and a Create button should be visible.
On clicking Create, the Form Page should be visible.
The label of Resources component should change to Clusters if Service is Database

As an Author, I have 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

…hat, converted few variables from snake case to camel case

…thod

santoshp210-akamai · 2024-11-26T13:24:47Z

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/utilities.ts

    'severity',
  ]);
  // severity has a need for null in the form for edge-cases, so null-checking and returning it as an appropriate type
  const severity = formValues.severity!;
-  return { ...values, severity };
+  const resourceIds = formValues.resource_ids!;


Adding resourceIds here as resource_ids are optional as per the API-spec. Using FieldPathByValue on an optional property makes the name prop a never type in the ResourceMultiSelect component. cc: @bnussman-akamai , @jaalah-akamai

…d case for few variables and properties

santoshp210-akamai · 2024-11-26T13:34:04Z

As discussed with @jaalah-akamai , The properties that use snake_case right now are the the ones used for the API so haven't changed them to camelCase.

github-actions · 2024-11-26T13:53:12Z

Coverage Report: ✅
Base Coverage: 86.93%
Current Coverage: 86.93%

jaalah-akamai · 2024-11-26T21:15:11Z

...anager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/ResourceMultiSelect.tsx

+          textFieldProps={{
+            InputProps: {
+              sx: {
+                maxHeight: '60px',
+                overflow: 'auto',
+              },
+            },
+          }}


I know we did this for the dashboard filters since that design/layout was a little different. For the alerts, let's omit this and let it grow naturally. I've spoke with UX and we're in the process of coming up with a standard of how to address this, but the overflow UX is really poor and I don't think it's something we should be propagating

Okay, removed that styling.

…sourceMultiSelect and modified and added few properties for the Alert interfaces as per the latest API-spec

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

...r/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/ResourceMultiSelect.test.tsx

jaalah-akamai · 2024-11-27T15:49:41Z

...anager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/ResourceMultiSelect.tsx

+  React.useEffect(() => {
+    setValue(name, []);
+  }, [region, serviceType, engine, setValue, name]);


Suggested change

React.useEffect(() => {

setValue(name, []);

}, [region, serviceType, engine, setValue, name]);

~~After discussing, it seems this is an actual side effect. We want the resources to reset if region, serviceType, or engine changes. cc: @bnussman-akamai thoughts?~~

We can keep this, this will eventually get replaced with an entirely different component once that work is done - we can revisit then

...anager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/ResourceMultiSelect.tsx

…dynamic in the Unit Test, replaced the variable name from serviceWatcher to serviceTypeWatcher, added comment addressing need for useEffect()

coliu-akamai · 2024-11-27T18:08:09Z

...r/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/ResourceMultiSelect.test.tsx

+        />
+      ),
+    });
+    expect(getByLabelText('Cluster'));


will need to update this test depending on if label is changed to Clusters ^

and a small nitpick: if this test does need to be updated, could we also put a linebreak between each test while at it for better readability?

whoops looks like I submitted this comment early - meant to include it as part of my below review

Yeah @coliu-akamai , Clusters makes sense. I will make the changes and I'll add a linebreak too. Thank you for the approval

coliu-akamai

Thanks for the additional test coverage!

The label of Resources component should change to Clusters if Service is Database

should it be Cluster or Clusters?

…l to Clusters in case of Database service type

linode-gh-bot · 2024-11-27T19:07:43Z

Cloud Manager UI test results

🎉 455 passing tests on test run #5 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`455 Passing`	`2 Skipped`	`96m 47s`

cypress · 2024-11-27T20:06:27Z

Cloud Manager E2E Run #6896

Run Properties: Failed #6896 • 0285c7a67f: upcoming: [DI-21694] - Added Resource Select component to the Create-alert form ...

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Failed #6896`
Run duration	`35m 01s`
Commit	`0285c7a67f: upcoming: [DI-21694] - Added Resource Select component to the Create-alert form ...`
Committer	`santoshp210-akamai`
View all properties for this run ↗︎

Test results
Failures	`3`
Flaky	`6`
Pending	`2`
Skipped	`0`
Passing	`459`
View all changes introduced in this branch ↗︎

Tests for review

switch-linode-state.spec.ts • 1 failed test

View Output Video

Test		Artifacts
switch linode state > reboots a linode from landing page		`Screenshots` `Video`

update-linode-labels.spec.ts • 1 failed test

View Output Video

Test		Artifacts
update linode label > updates a linode label from details page		`Screenshots` `Video`

search-linodes.spec.ts • 1 failed test

View Output Video

Test		Artifacts
Search Linodes > create a linode and make sure it shows up in the table and is searchable in main search tool		`Screenshots` `Video`

linodes/switch-linode-state.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
switch linode state > reboots a linode from details page		`Screenshots` `Video`

linodes/clone-linode.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
clone linode > can clone a Linode from Linode details page		`Screenshots` `Video`

linodes/update-linode-labels.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
update linode label > updates a linode label from the "Settings" tab		`Screenshots` `Video`

linodes/backup-linode.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
linode backups > can enable backups		`Screenshots` `Video`

kubernetes/lke-create.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
LKE Cluster Creation > can create an LKE cluster		`Screenshots` `Video`

The first 5 flaky specs are shown, see all 6 specs in Cypress Cloud.

santoshp210-akamai added 3 commits November 26, 2024 15:12

upcoming: [DI-21694] - Added the Resources Select component, UT for t…

e812d13

…hat, converted few variables from snake case to camel case

upcoming: [DI-21694] - Added memoization to the resources fetching me…

c8b3e52

…thod

upcoming: [DI-21694] - Rendering resources component before Severity

a6c5807

santoshp210-akamai requested a review from a team as a code owner November 26, 2024 13:18

santoshp210-akamai requested review from coliu-akamai and pmakode-akamai and removed request for a team November 26, 2024 13:18

santoshp210-akamai self-assigned this Nov 26, 2024

santoshp210-akamai commented Nov 26, 2024

View reviewed changes

Added changeset: ResourceMultiSelect component, along with UT. Change…

10dad93

…d case for few variables and properties

jaalah-akamai reviewed Nov 26, 2024

View reviewed changes

upcoming: [DI-21694] - Removed the styling for the Autocomplete in Re…

2fc877a

…sourceMultiSelect and modified and added few properties for the Alert interfaces as per the latest API-spec

bnussman-akamai added the CloudPulse label Nov 27, 2024

jaalah-akamai reviewed Nov 27, 2024

View reviewed changes

jaalah-akamai added the Requires Changes label Nov 27, 2024

upcoming: [DI-21694] - Addressed the review changes: Made the values …

93c1c54

…dynamic in the Unit Test, replaced the variable name from serviceWatcher to serviceTypeWatcher, added comment addressing need for useEffect()

jaalah-akamai approved these changes Nov 27, 2024

View reviewed changes

jaalah-akamai added Add'tl Approval Needed Waiting on another approval! and removed Requires Changes labels Nov 27, 2024

coliu-akamai reviewed Nov 27, 2024

View reviewed changes

coliu-akamai approved these changes Nov 27, 2024

View reviewed changes

coliu-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Nov 27, 2024

upcoming: [DI-21694] - Addressed the review changes: Changed the Labe…

cfe24f6

…l to Clusters in case of Database service type

jaalah-akamai merged commit 0285c7a into linode:develop Nov 27, 2024
21 of 23 checks passed

dwiley-akamai mentioned this pull request Dec 5, 2024

Release v1.133.0 - release → staging #11377

Merged

dwiley-akamai mentioned this pull request Dec 5, 2024

Release v1.133.0 - staging → master #11378

Merged

jaalah-akamai added the Cloud Pulse - Alerting label Dec 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

santoshp210-akamai commented Nov 26, 2024

santoshp210-akamai Nov 26, 2024

santoshp210-akamai commented Nov 26, 2024

github-actions bot commented Nov 26, 2024 •

edited

Loading

jaalah-akamai Nov 26, 2024

santoshp210-akamai Nov 27, 2024

jaalah-akamai Nov 27, 2024

jaalah-akamai Nov 27, 2024 •

edited

Loading

coliu-akamai Nov 27, 2024 •

edited

Loading

coliu-akamai Nov 27, 2024

santoshp210-akamai Nov 27, 2024

coliu-akamai left a comment

linode-gh-bot commented Nov 27, 2024

cypress bot commented Nov 27, 2024

	React.useEffect(() => {
	setValue(name, []);
	}, [region, serviceType, engine, setValue, name]);

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

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

Conversation

santoshp210-akamai commented Nov 26, 2024

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author, I have considered 🤔

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

santoshp210-akamai Nov 26, 2024

Choose a reason for hiding this comment

santoshp210-akamai commented Nov 26, 2024

github-actions bot commented Nov 26, 2024 • edited Loading

jaalah-akamai Nov 26, 2024

Choose a reason for hiding this comment

santoshp210-akamai Nov 27, 2024

Choose a reason for hiding this comment

jaalah-akamai Nov 27, 2024

Choose a reason for hiding this comment

jaalah-akamai Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

coliu-akamai Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

coliu-akamai Nov 27, 2024

Choose a reason for hiding this comment

santoshp210-akamai Nov 27, 2024

Choose a reason for hiding this comment

coliu-akamai left a comment

Choose a reason for hiding this comment

linode-gh-bot commented Nov 27, 2024

Cloud Manager UI test results

🎉 455 passing tests on test run #5 ↗︎

cypress bot commented Nov 27, 2024

Cloud Manager E2E Run #6896

Tests for review

github-actions bot commented Nov 26, 2024 •

edited

Loading

jaalah-akamai Nov 27, 2024 •

edited

Loading

coliu-akamai Nov 27, 2024 •

edited

Loading