[ML] Anomaly Detection: Improves layout for custom URLs list by KodeRad · Pull Request #231751 · elastic/kibana

KodeRad · 2025-08-14T08:52:18Z

Summary

This PR fixes #115426.

Changes include:

Re-arranging the Custom URL list layout:
- Wrapping each Custom URL in an EuiPanel
- Changing the field order from Label, URL, Time Range → Label, Time Range, URL
- Moving the trash and test buttons to the top-right
- Moving the Add Custom URL button to the bottom
Fixing the width of the URL field
Displaying the Custom URL list vertically in the Create Job Wizard
Improving accessibility (a11y) throughout
Updating test snapshot

Fly-out:

Create Job Wizard:

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

See some risk examples
...

KodeRad · 2025-08-18T10:21:45Z

/ci

...tform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx

x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_urls.tsx

...onents/job_details_step/components/additional_section/components/custom_urls/description.tsx

elasticmachine · 2025-08-18T13:41:23Z

Pinging @elastic/ml-ui (:ml)

jgowdyelastic · 2025-08-18T13:57:10Z

...tform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx

  const customUrlRows = customUrls.map((customUrl, index) => {
    // Validate the label.
    const label = customUrl.url_name;
+    const effectiveLabel = label || `Custom URL ${index + 1}`;


I don't think label will be undefined here, unless you've see it when testing? The type says it is non-optional, so I don't think this effectiveLabel variable is needed.

If it is needed, the Custom URL ${index + 1} text will need to be translated.
Also we prefer to use the nullish coalescing operator ?? for checks for null/undefined like this.

If this variable is needed, we might need a different approach as I don't think it is good practice to combine two translated strings as is happening below 'URL value for {label}'

That's right. I re-checked and there is no need to guard against undefined label, as it is already done through TS. Thanks for pointing that out 👍

...tform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx

jgowdyelastic

Left a comment, but otherwise LGTM

jgowdyelastic · 2025-08-19T12:19:12Z

...onents/job_details_step/components/additional_section/components/custom_urls/description.tsx

-      },
-    },
-  });
+  const styles = {


nit, this could be wrapped in a useMemo

I intentionally skipped this as there are no computation going on in these styles. It is just a plain object with css. Do you think we still need to use useMemo in this particular case?

elasticmachine · 2025-08-19T13:56:33Z

💚 Build Succeeded

Buildkite Build
Commit: 5fc2324

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`ml`	5.3MB	5.3MB	+3.0KB

History

💛 Build #330684 was flaky e184ac2
💚 Build #330415 succeeded 10beca7
💚 Build #330357 succeeded 9c472a9

cc @KodeRad

peteharverson

Tested and LGTM.

) ## Summary Follow-up PR to the #231751 There is another place in which this component is used. It is located at **Data Frame Analytics** > **Create Job** wizard Screenshot with the fix: <img width="1011" height="430" alt="Screenshot 2025-08-22 at 10 08 02" src="https://github.com/user-attachments/assets/fcabbf2e-ca12-4141-93e0-d3751b848d9c" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...

…#231751) ## Summary This PR fixes elastic#115426. Changes include: - Re-arranging the **Custom URL list layout**: - Wrapping each Custom URL in an `EuiPanel` - Changing the field order from **Label, URL, Time Range** → **Label, Time Range, URL** - Moving the trash and test buttons to the top-right - Moving the **Add Custom URL** button to the bottom - Fixing the width of the URL field - Displaying the Custom URL list vertically in the **Create Job** Wizard - Improving accessibility (a11y) throughout - Updating test snapshot ## Fly-out: <img width="1226" height="485" alt="Screenshot 2025-08-18 at 10 30 50" src="https://github.com/user-attachments/assets/8025f17f-9a6a-48d6-b31a-a4a826756321" /> <img width="738" height="486" alt="Screenshot 2025-08-18 at 10 31 08" src="https://github.com/user-attachments/assets/a3e7dbda-04cd-4b57-aeed-b24016aab058" /> <img width="524" height="598" alt="Screenshot 2025-08-18 at 10 31 24" src="https://github.com/user-attachments/assets/259db332-587f-40d0-8030-d93b01a52443" /> <img width="417" height="740" alt="Screenshot 2025-08-18 at 10 31 40" src="https://github.com/user-attachments/assets/757c3640-ae9a-4f4b-b4f6-e9ca05e5ff94" /> ## Create Job Wizard: <img width="1048" height="932" alt="Screenshot 2025-08-18 at 15 31 59" src="https://github.com/user-attachments/assets/562930fb-0457-457c-8bde-c8ab0bbbf02c" /> <img width="618" height="477" alt="Screenshot 2025-08-18 at 15 32 28" src="https://github.com/user-attachments/assets/a548a078-d430-41e3-aed9-6815f2c8a32c" /> <img width="506" height="597" alt="Screenshot 2025-08-18 at 15 32 38" src="https://github.com/user-attachments/assets/4ee7657b-01b1-49c6-bc39-841d09252122" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...

KodeRad added 6 commits August 18, 2025 09:16

fix(ml): fix resizing of url label, change the layout

3d17f7a

fix(ml): move add button to bottom and add aria-label

692ec59

fix(ml): display CustomURLs vertically in Create Job wizard

500570b

fix(ml): widen Custom URLs, fix spacers

e3e3fd6

fix(ml): add aria-label update test snapshot

56ae8fa

fix(ml): change url field background color

59221ae

KodeRad force-pushed the fix-ml-custom-url-list-layout branch from d31b89d to 59221ae Compare August 18, 2025 07:59

fix(ml): fix mobile view in job creation wizard

309de71

KodeRad added bug Fixes for quality problems that affect the customer experience :ml Feature:Anomaly Detection ML anomaly detection usability cosmetic v9.2.0 labels Aug 18, 2025

Merge branch 'main' into fix-ml-custom-url-list-layout

9c472a9

jgowdyelastic reviewed Aug 18, 2025

View reviewed changes

...tform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx Outdated Show resolved Hide resolved

jgowdyelastic reviewed Aug 18, 2025

View reviewed changes

x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_urls.tsx Outdated Show resolved Hide resolved

x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_urls.tsx Outdated Show resolved Hide resolved

jgowdyelastic reviewed Aug 18, 2025

View reviewed changes

...onents/job_details_step/components/additional_section/components/custom_urls/description.tsx Outdated Show resolved Hide resolved

...onents/job_details_step/components/additional_section/components/custom_urls/description.tsx Outdated Show resolved Hide resolved

fix(ml): use i18n or FormattedMessage for text

8b14d92

KodeRad force-pushed the fix-ml-custom-url-list-layout branch from 5b112bb to 8b14d92 Compare August 18, 2025 12:44

KodeRad self-assigned this Aug 18, 2025

KodeRad marked this pull request as ready for review August 18, 2025 13:41

KodeRad requested a review from a team as a code owner August 18, 2025 13:41

KodeRad added release_note:fix backport:skip This PR does not require backporting labels Aug 18, 2025

jgowdyelastic reviewed Aug 18, 2025

View reviewed changes

fix(ml): remove important on styles and add margin to display shadow

3d8c871

KodeRad force-pushed the fix-ml-custom-url-list-layout branch from 10beca7 to daf6566 Compare August 19, 2025 07:59

fix(ml): simplify label and add missing formattedMessage

e184ac2

KodeRad force-pushed the fix-ml-custom-url-list-layout branch from daf6566 to e184ac2 Compare August 19, 2025 08:11

fix(ml): fix styling in create job wizard view

5fc2324

jgowdyelastic approved these changes Aug 19, 2025

View reviewed changes

KodeRad requested a review from peteharverson August 19, 2025 13:32

peteharverson changed the title ~~[ML] Anomaly Detection: Change layout for custom URLs list~~ Aug 19, 2025

peteharverson added release_note:enhancement enhancement New value added to drive a business result and removed release_note:fix bug Fixes for quality problems that affect the customer experience labels Aug 19, 2025

peteharverson approved these changes Aug 19, 2025

View reviewed changes

KodeRad merged commit 5253de2 into elastic:main Aug 20, 2025
18 checks passed

KodeRad mentioned this pull request Aug 22, 2025

[ML] Data Frame Analytics: Improves layout for custom URLs list #232575

Merged

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Anomaly Detection: Improves layout for custom URLs list#231751

[ML] Anomaly Detection: Improves layout for custom URLs list#231751
KodeRad merged 12 commits intoelastic:mainfrom
KodeRad:fix-ml-custom-url-list-layout

KodeRad commented Aug 14, 2025 •

edited

Loading

KodeRad commented Aug 18, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Aug 18, 2025

jgowdyelastic Aug 18, 2025 •

edited

Loading

KodeRad Aug 19, 2025

Uh oh!

jgowdyelastic left a comment

jgowdyelastic Aug 19, 2025

KodeRad Aug 19, 2025

elasticmachine commented Aug 19, 2025

peteharverson left a comment

Uh oh!

Labels

4 participants

Conversation

KodeRad commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Fly-out:

Create Job Wizard:

Checklist

Identify risks

KodeRad commented Aug 18, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Aug 18, 2025

jgowdyelastic Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

KodeRad Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

jgowdyelastic left a comment

Choose a reason for hiding this comment

jgowdyelastic Aug 19, 2025

Choose a reason for hiding this comment

KodeRad Aug 19, 2025

Choose a reason for hiding this comment

elasticmachine commented Aug 19, 2025

💚 Build Succeeded

Metrics [docs]

Async chunks

History

peteharverson left a comment

Choose a reason for hiding this comment

Uh oh!

Labels

4 participants

KodeRad commented Aug 14, 2025 •

edited

Loading

jgowdyelastic Aug 18, 2025 •

edited

Loading