[ML] Remove data frame analytics scss files #199572

alvarezmelissa87 · 2024-11-09T02:46:57Z

Summary

Related meta issue: #140695

DFA map legend changes:

Job messages changes:

job messages in AD:

Checklist

Delete any items that are not applicable to this PR.

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
Flaky Test Runner was used on any tests changed
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

elasticmachine · 2024-11-09T02:53:07Z

Pinging @elastic/ml-ui (:ml)

jgowdyelastic · 2024-11-11T10:30:36Z

x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx

+            <span
+              data-test-subj="mlJobMapLegend__sourceNode"
+              css={{
+                height: `${euiSizeM}`,


most of these overrides have mostly the same content. They could be pulled out into an object with all the common props and reused.
e.g.something like

const cssOverrideBase = { height: `${euiSizeM}`, width: `${euiSizeM}`, backgroundColor: `${euiColorGhost}`, border: `${euiBorderWidthThick} solid ${theme.euiColorVis2}`, display: 'inline-block', }

then used like this:

css={{ ...cssOverrideBase transform: 'rotate(45deg)', }}

also, it's not necessary to wrap single values in template literals

Updated in 999a7c7

jgowdyelastic · 2024-11-11T10:35:54Z

...analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx

@@ -42,16 +42,17 @@ export const OverallDetails: FC<{
 }> = ({ overallDetails }) => (
  <EuiFlexGroup alignItems="center" wrap data-test-subj={overallDetails.dataTestSubj}>
    {overallDetails.items.map((item) => {
+      const key = `${item.title}`;


The template literal isn't needed

Updated in 999a7c7

jgowdyelastic · 2024-11-11T10:47:35Z

x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx

@@ -22,6 +23,12 @@ import { blurButtonOnClick } from '../../util/component_utils';
 import { JobIcon } from '../job_message_icon';
 import { useEnabledFeatures } from '../../contexts/ml';

+const cssOverride = css({
+  '.euiTable': {
+    backgroundColor: 'transparent',


By overriding this in the actual component, it means it's transparent for both places where it's used.
IMO in the AD jobs list it should be white and not transparent .

vs

Also it appears the padding has changed. Not a huge problem, I'm not sure which looks better.

Yeah, apparently there's no direct way to set the background for the entire EuiInMemoryTable (just the rows) so was experimenting with the best way to apply it the way we want in each location.
Agree that it's probably best to move the styling back so it only applies where intended. Updated in b8c999e

alvarezmelissa87 · 2024-11-11T15:39:07Z

@elasticmachine merge upstream

andreadelrio · 2024-11-12T19:38:35Z

...rame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx

@@ -20,7 +20,7 @@ export const BackToListPanel: FC = () => {
  return (
    <Fragment>
      <EuiCard
-        className="dfAnalyticsCreationWizard__card"
+        css={{ width: '300px' }}


Use an EUI size variable to calculate this.

andreadelrio · 2024-11-12T19:38:41Z

...rame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx

@@ -29,7 +29,7 @@ export const ViewResultsPanel: FC<Props> = ({ jobId, analysisType }) => {
  return (
    <Fragment>
      <EuiCard
-        className="dfAnalyticsCreationWizard__card"
+        css={{ width: '300px' }}


Use an EUI size variable to calculate this.

Thanks for taking a look, @andreadelrio 🙏
I'm not sure that would be the best solution here. The size variables I don't think are intended for this as even for the largest we'd have to multiply and do something like size.xl * 6.25, which doesn't seem ideal, especially considering we use set variables for larger values in other places throughout. 🤔 This would then be affected if/when the size variable changes, which I don't think we'd want. I think for larger set widths it's okay to keep it as is.

Could you explain why it would be a better practice to use the variable?

@alvarezmelissa87 In general we recommend not using any hardcoded values even for larger values. The idea is precisely that if the EUI variable were to changes (which is highly unlikely) all the layouts and containers in Kibana change their size according to the new value defined in the design system.

Here are some examples of this practice in our codebase. See:

@andreadelrio - Thanks for the response - updated to use eui size variable in 9ffc9a0

peteharverson

Tested (light and dark theme) and didn't spot any regressions. LGTM

jgowdyelastic

LGTM

alvarezmelissa87 · 2024-11-14T15:27:25Z

@elasticmachine merge upstream

andreadelrio

Style code changes LGTM.

alvarezmelissa87 · 2024-11-14T20:16:18Z

/ci

alvarezmelissa87 · 2024-11-14T20:31:44Z

@elasticmachine merge upstream

alvarezmelissa87 · 2024-11-18T15:33:19Z

@elasticmachine merge upstream

elasticmachine · 2024-11-18T17:25:51Z

💚 Build Succeeded

Buildkite Build
Commit: 90a1db0

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`ml`	2140	2135	-5

Async chunks

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

id	before	after	diff
`ml`	4.7MB	4.7MB	-2.6KB

History

💛 Build #251569 was flaky beefc58
💔 Build #251516 failed 9ffc9a0
💔 Build #251382 failed b985829
💔 Build #250154 failed b8c999e
💛 Build #250011 was flaky 2687d61
💚 Build #249770 succeeded 7bde084

cc @alvarezmelissa87

kibanamachine · 2024-11-18T19:09:49Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11899368023

## Summary Related meta issue: elastic#140695 DFA map legend changes: <img width="1160" alt="image" src="https://github.com/user-attachments/assets/9858e83f-8cf5-4b1c-97d3-2726808eaedc"> Job messages changes: <img width="1033" alt="image" src="https://github.com/user-attachments/assets/fff3cdb0-efad-4cfd-bc18-bf60deffad26"> job messages in AD: <img width="1231" alt="image" src="https://github.com/user-attachments/assets/4f880be2-1be6-4315-a086-45920c3cb35e"> ### Checklist Delete any items that are not applicable to this PR. - [ ] 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/packages/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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] 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 renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Elastic Machine <[email protected]> (cherry picked from commit 2c0825f)

kibanamachine · 2024-11-18T19:14:27Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Remove data frame analytics scss files (#199572)](#199572)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Melissa Alvarez <[email protected]>

## Summary Related meta issue: elastic#140695 DFA map legend changes: <img width="1160" alt="image" src="https://github.com/user-attachments/assets/9858e83f-8cf5-4b1c-97d3-2726808eaedc"> Job messages changes: <img width="1033" alt="image" src="https://github.com/user-attachments/assets/fff3cdb0-efad-4cfd-bc18-bf60deffad26"> job messages in AD: <img width="1231" alt="image" src="https://github.com/user-attachments/assets/4f880be2-1be6-4315-a086-45920c3cb35e"> ### Checklist Delete any items that are not applicable to this PR. - [ ] 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/packages/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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] 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 renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Elastic Machine <[email protected]>

remove dfa scss files

7bde084

alvarezmelissa87 requested review from a team as code owners November 9, 2024 02:46

alvarezmelissa87 self-assigned this Nov 9, 2024

alvarezmelissa87 added :ml release_note:skip Skip the PR/issue when compiling release notes backport:version Backport to applied version labels labels Nov 9, 2024

alvarezmelissa87 added Feature:Data Frame Analytics ML data frame analytics features v8.17.0 v9.0.0 labels Nov 9, 2024

peteharverson changed the title ~~remove dfa scss files~~ [ML] Remove data frame analytics scss files Nov 11, 2024

jgowdyelastic reviewed Nov 11, 2024

View reviewed changes

alvarezmelissa87 changed the title ~~[ML] Remove data frame analytics scss files~~ [ML] Data frame analytics: remove scss files Nov 11, 2024

alvarezmelissa87 changed the title ~~[ML] Data frame analytics: remove scss files~~ ML] Remove data frame analytics scss files Nov 11, 2024

Merge branch 'main' into ml-dfa-scss-updates

2687d61

alvarezmelissa87 marked this pull request as draft November 12, 2024 02:01

alvarezmelissa87 changed the title ~~ML] Remove data frame analytics scss files~~ [ML] Remove data frame analytics scss files Nov 12, 2024

alvarezmelissa87 added 2 commits November 11, 2024 19:07

update legend css overrides

999a7c7

ensure job messages style only applies where intended

b8c999e

alvarezmelissa87 marked this pull request as ready for review November 12, 2024 02:39

alvarezmelissa87 requested a review from peteharverson November 12, 2024 02:39

andreadelrio requested changes Nov 12, 2024

View reviewed changes

peteharverson mentioned this pull request Nov 13, 2024

[ML] Replace legacy SCSS overwrites with css-in-js #140695

Open

65 tasks

peteharverson approved these changes Nov 13, 2024

View reviewed changes

jgowdyelastic approved these changes Nov 14, 2024

View reviewed changes

elasticmachine and others added 2 commits November 14, 2024 16:27

Merge branch 'main' into ml-dfa-scss-updates

b985829

use eui variable for size calc

9ffc9a0

andreadelrio self-requested a review November 14, 2024 19:18

andreadelrio approved these changes Nov 14, 2024

View reviewed changes

Merge branch 'main' into ml-dfa-scss-updates

beefc58

Merge branch 'main' into ml-dfa-scss-updates

90a1db0

alvarezmelissa87 merged commit 2c0825f into elastic:main Nov 18, 2024
21 checks passed

alvarezmelissa87 deleted the ml-dfa-scss-updates branch November 18, 2024 19:09

kibanamachine mentioned this pull request Nov 18, 2024

[8.x] [ML] Remove data frame analytics scss files (#199572) #200639

Merged

kibanamachine mentioned this pull request Nov 18, 2024

[ES|QL] Starred queries in the editor #198362

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Remove data frame analytics scss files #199572

[ML] Remove data frame analytics scss files #199572

alvarezmelissa87 commented Nov 9, 2024 •

edited by kibanamachine

Loading

elasticmachine commented Nov 9, 2024

jgowdyelastic Nov 11, 2024 •

edited

Loading

alvarezmelissa87 Nov 12, 2024

jgowdyelastic Nov 11, 2024

alvarezmelissa87 Nov 12, 2024

jgowdyelastic Nov 11, 2024 •

edited

Loading

alvarezmelissa87 Nov 12, 2024 •

edited

Loading

alvarezmelissa87 commented Nov 11, 2024

andreadelrio Nov 12, 2024

andreadelrio Nov 12, 2024

alvarezmelissa87 Nov 13, 2024 •

edited

Loading

andreadelrio Nov 14, 2024

alvarezmelissa87 Nov 14, 2024

peteharverson left a comment

jgowdyelastic left a comment

alvarezmelissa87 commented Nov 14, 2024

andreadelrio left a comment

alvarezmelissa87 commented Nov 14, 2024

alvarezmelissa87 commented Nov 14, 2024

alvarezmelissa87 commented Nov 18, 2024

elasticmachine commented Nov 18, 2024

kibanamachine commented Nov 18, 2024

kibanamachine commented Nov 18, 2024

[ML] Remove data frame analytics scss files #199572

[ML] Remove data frame analytics scss files #199572

Conversation

alvarezmelissa87 commented Nov 9, 2024 • edited by kibanamachine Loading

Summary

Checklist

elasticmachine commented Nov 9, 2024

jgowdyelastic Nov 11, 2024 • edited Loading

Choose a reason for hiding this comment

alvarezmelissa87 Nov 12, 2024

Choose a reason for hiding this comment

jgowdyelastic Nov 11, 2024

Choose a reason for hiding this comment

alvarezmelissa87 Nov 12, 2024

Choose a reason for hiding this comment

jgowdyelastic Nov 11, 2024 • edited Loading

Choose a reason for hiding this comment

alvarezmelissa87 Nov 12, 2024 • edited Loading

Choose a reason for hiding this comment

alvarezmelissa87 commented Nov 11, 2024

andreadelrio Nov 12, 2024

Choose a reason for hiding this comment

andreadelrio Nov 12, 2024

Choose a reason for hiding this comment

alvarezmelissa87 Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

andreadelrio Nov 14, 2024

Choose a reason for hiding this comment

alvarezmelissa87 Nov 14, 2024

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

jgowdyelastic left a comment

Choose a reason for hiding this comment

alvarezmelissa87 commented Nov 14, 2024

andreadelrio left a comment

Choose a reason for hiding this comment

alvarezmelissa87 commented Nov 14, 2024

alvarezmelissa87 commented Nov 14, 2024

alvarezmelissa87 commented Nov 18, 2024

elasticmachine commented Nov 18, 2024

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

kibanamachine commented Nov 18, 2024

kibanamachine commented Nov 18, 2024

💚 All backports created successfully

Questions ?

alvarezmelissa87 commented Nov 9, 2024 •

edited by kibanamachine

Loading

jgowdyelastic Nov 11, 2024 •

edited

Loading

jgowdyelastic Nov 11, 2024 •

edited

Loading

alvarezmelissa87 Nov 12, 2024 •

edited

Loading

alvarezmelissa87 Nov 13, 2024 •

edited

Loading