Machine learning convert Less to Scss #23387

snide · 2018-09-21T07:15:21Z

This PR removes the LESS files for the Machine Learning plugin and replaces them with Sass.

Process taken

The src/core_plugins/machine_learning/index.js file was updated to build x-pack/plugins/ml/public/index.scss into a css file.
- That index file imports styling_constants.scss from ui/public/styles in Kibana. This a placeholder file that includes all theming and invisible sass globals from EUI.
- Any sass files under that line can now use the functions, mixins and variables from EUI. Although the theme is hardcoded, it will be relatively easy to switch themes based on this import later.
All Less files in the x-pack/plugins/ml/public/... directory were replaced with sass counterparts.
- The sass files now live with separated _index.scss and _component_names.scss files next to the components or views they live next to.
- The Less files were then deleted entirely.
- The new sass files use EUI variables whenever possible. The most important being color and sizing variables.
- ~~The selectors were all changed to match EUI's BEM formatting. This means the html/js templating was touched as well.~~
- ~~Additionally, a three-letter prefix mch was added to all selectors to namespace them and avoid conflicts.~~

ML css / design layer cleanup plan of attack

THIS PR: Convert ML Less to Sass
- Straight conversion, try not to touch the template layer, don't focus on design
- Introduce EUI variables where easy, but avoid anything major. Hex values and pixels still remain in spots.
- Don't focus on selectors. Use #ml-app to sandbox.
PR 2: Introduce BEM naming
- Replace selectors across ML, prefix everything to avoid conflicts. Remove sandboxing.
PR 3: Focus on css code duplication / eui overwriting
- Remove all the copy/paste CSS and try to cut the footprint down
- Remove and replace the EUI overwrites with something less brittle
PR 3+: Design
- Potentially do a similar reskinning like we did with canvas. Likely a large project.
- Could be done in pieces as pages are converted to React so design team can step in to help

Major visual changes

I went ahead and made the job list table act similar to our other selections so that it didn't have the awkward gap to the left of the search area. Later, we should do a pass to use the button dropdown pattern to deal with sections + actions.

elasticmachine · 2018-09-25T18:33:21Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

snide · 2018-09-26T06:45:33Z

@peteharverson @walterra @jgowdyelastic

I'm sure there are plenty of breaks in here still, but at this point I could prolly use a visual review so I can start fixing things. Takes screens of whatever you notice and I'll do another pass.

Note that I'm really trying NOT to touch layouts or designs too much. This is really just a base run to get the code workable so it has some level of variable scoping. Colors will be be slightly different in places, and in many cases this fixes a lot of color contrast accessibility issues in ML, but if something looks really off, it's likely a mistake on my part.

I don't think much of the chart coloring should change (other than the grays) and I've introduced a small ML specific variable layer into the sass so things are at least consistent till my team can do more work in here.

elasticmachine · 2018-09-26T07:57:43Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

peteharverson · 2018-09-26T11:44:28Z

For the most part this is looking great @snide! I have taken a first quick(ish) run through all the pages, and the only areas which have significant breaks are the Single and Multi-metric job wizards. Some issues on other pages, but those are all fairly minor I think.

I have saved a bunch of screenshots from my review - will be in contact to point you at the doc.

elasticmachine · 2018-09-26T11:44:53Z

Pinging @elastic/ml-ui

snide · 2018-09-27T04:13:29Z

OK @peteharverson. Think I got most everything from your list. Have some small issues around the bootstrap autocomplete placeholders, but I think we're close to what master looks like now.

elasticmachine · 2018-09-27T05:32:57Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

peteharverson · 2018-09-27T10:19:30Z

Tested your latest fixes @snide. Getting very close to master I think. I am still seeing the issue with the layout of the top card in the Population Job wizard. I have also added one extra item to the end of the doc related to the z-index of the severity control in relation to the job picker in the Anomaly Explorer which I fixed recently in #23189.

elasticmachine · 2018-09-27T19:01:58Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-09-27T23:27:50Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

snide · 2018-09-27T23:37:50Z

@cchaos I know this is a big blob to review so I don't expect a line by line review. The ML team covered most of the visual stuff so I'm pretty sure this looks pretty similar to how it used to. Can you do a quick scan of at least the sandboxing, sass importing and general structure of the code? Since ML is an app in transition, you'll often find folders with titles like old and new. Sometimes the component directories are in named component directories, and sometimes they are nested in other folders. I kept the organization similar to how it was, generally removing stuff like folder/styles/main.scss and replacing it with folder/_index.scss and folder/_folder.scss, using import chains as I went.

snide · 2018-09-27T23:41:53Z

x-pack/plugins/ml/public/_app.scss

+.ml-icon-severity-minor,
+.ml-icon-severity-warning,
+.ml-icon-severity-unknown {
+  text-shadow: 1px 1px 1px $euiColorLightestShade;


Just a note for review. I avoided touching shadows on this pass. A lot of ML uses text shadows and drops that I didn't have a quick 1 to 1 parallel for. Mostly I'd change the color to match against the EUI counterpart and then move forward. Rest can be handled on a 2nd pass.

This particular one looks like the EUI counterpart is significantly lighter. The original being #BBBBBB and this one equates to #F5F5F5, but I'm also not looking at it visually.

elasticmachine · 2018-09-28T00:18:55Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-09-28T01:25:42Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

peteharverson · 2018-09-28T11:18:12Z

@snide I tested out the latest edits, and the layout of the top card in the Population wizard looks good. I have added a couple of extra items to the bottom of the doc - one for padding around the population wizard charts, and one for a suggestion to switch the border color used in the population wizards to euiColorLightShade.

cchaos

So I just went through looking at the conversions, I didn't look at anything visually, so you can ignore what you may be "fixing".

Also here is a screenshot of what I found to be still existing .less files you may want to double-check.

cchaos · 2018-09-28T14:56:03Z

x-pack/plugins/ml/public/_app.scss

+.ml-icon-severity-minor,
+.ml-icon-severity-warning,
+.ml-icon-severity-unknown {
+  text-shadow: 1px 1px 1px $euiColorLightestShade;


This particular one looks like the EUI counterpart is significantly lighter. The original being #BBBBBB and this one equates to #F5F5F5, but I'm also not looking at it visually.

cchaos · 2018-09-28T15:07:16Z

x-pack/plugins/ml/public/components/chart_tooltip/_chart_tooltip.scss

-
-  .centered-text {
-    text-align: center;
+    background-color: $euiBorderColor;


Do you think this is a bit bright on top of the dark tooltip background? Original color was: #95a5a6

cchaos · 2018-09-28T15:10:12Z

x-pack/plugins/ml/public/components/controls/controls_select/_controls_select.scss

@@ -18,28 +18,30 @@ ml-controls-select {
  }


$euiFontSizeXS?

cchaos · 2018-09-28T15:11:28Z

x-pack/plugins/ml/public/components/controls/controls_select/_controls_select.scss

    text-decoration: none;
  }

+  // SASSTODO: Needs more specific selectors
  .dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:active,
  .dropdown-menu > li > a:focus {


Maybe move these up under the previous selector .dropdown-menu > li > a using &:hover, etc...

x-pack/plugins/ml/public/components/documentation_help_link/_documentation_help_link.scss

cchaos · 2018-09-28T16:31:25Z

...ugins/ml/public/jobs/new_job/simple/components/general_job_details/_general_job_details.scss

-    background-color: #F9F9F9;
+    background-color: $euiColorLightestShade;
+
+    // SASSTODO: Needs a proper selector
    label {
      font-weight: normal;


$euiFontWeightRegular

cchaos · 2018-09-28T16:35:44Z

x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss

+
+  .form-controls, .charts-container {
+    margin: 0px;
+    margin-right: $euiSizeS;


Supposed to be negative, original: -10px

cchaos · 2018-09-28T16:36:02Z

x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss

+
+    // SASSTODO: Proper selector
+    & > div {
+      border: $euiColorLightestShade;


$euiBorderThin

cchaos · 2018-09-28T16:40:22Z

x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/_create_jobs.scss

+
+    // SASSTODO: Proper selector
+    label {
+      font-weight: normal;


$euiFontWeightRegular

cchaos · 2018-09-28T19:21:51Z

x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/_events_list.scss

 .events-list {
  .actions-col {
    width: 90px;
    min-width: 90px;
  }
  .asterisk {
-    color: @kibanaRed1;
+    color: $euiColorDanger;
    font-weight: bold;


$euiFontWeightBold

cchaos · 2018-09-28T19:55:10Z

x-pack/plugins/ml/public/index.scss

+  @import 'components/confirm_modal/index';
+  @import 'components/controls/index';
+  @import 'components/data_recognizer/index';
+  @import 'components/data_recognizer/index';


Duplicate import

cchaos · 2018-09-28T19:55:58Z

x-pack/plugins/ml/public/index.scss

+  @import 'components/field_title_bar/index';
+  @import 'components/field_type_icon/index';
+  @import 'components/form_filter_input/index'; // SASSTODO: This file needs to be rewritten
+  @import 'components/form_filter_input/index'; // SASSTODO: This file needs to be rewritten


Another duplicate

x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss

x-pack/plugins/ml/public/settings/scheduled_events/_index.scss

snide · 2018-09-29T02:22:41Z

OK. I think I got to all of the review feedback.

THANK YOU @cchaos for the detail on such a mighty PR. 🥇

elasticmachine · 2018-09-29T02:48:25Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-10-01T04:08:40Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

snide · 2018-10-01T16:02:30Z

jenkins, test this

elasticmachine · 2018-10-01T16:30:53Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-10-05T05:04:04Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

snide · 2018-11-13T00:53:50Z

Replaced with #25574

snide force-pushed the sass/machine_learning branch 2 times, most recently from 0ed7362 to 22d7b10 Compare September 25, 2018 16:58

snide force-pushed the sass/machine_learning branch from 22d7b10 to 3f75189 Compare September 26, 2018 04:37

peteharverson added :ml Feature:Anomaly Detection ML anomaly detection Feature:ml-results legacy - do not use labels Sep 26, 2018

snide force-pushed the sass/machine_learning branch from a3dab88 to e848718 Compare September 27, 2018 02:27

snide mentioned this pull request Sep 27, 2018

[META] Moving Kibana off Less and using EUI global CSS scope #19748

Closed

30 tasks

snide force-pushed the sass/machine_learning branch from d166a7a to 27a4805 Compare September 27, 2018 21:49

snide requested a review from cchaos September 27, 2018 23:32

snide commented Sep 27, 2018

View reviewed changes

snide changed the title ~~[WIP] Machine learning convert Less to Scss~~ Machine learning convert Less to Scss Sep 28, 2018

cchaos reviewed Sep 28, 2018

View reviewed changes

x-pack/plugins/ml/public/jobs/jobs_list_old/_index.scss Show resolved Hide resolved

cchaos reviewed Sep 28, 2018

View reviewed changes

x-pack/plugins/ml/public/settings/scheduled_events/_index.scss Show resolved Hide resolved

cchaos reviewed Sep 28, 2018

View reviewed changes

x-pack/plugins/ml/public/settings/scheduled_events/_index.scss Show resolved Hide resolved

cchaos reviewed Sep 28, 2018

View reviewed changes

x-pack/plugins/ml/public/settings/scheduled_events/_index.scss Show resolved Hide resolved

snide added 17 commits October 4, 2018 20:22

ml less to sass

18aa32d

add in new css compile system

8361227

selector protect kibana from ml

1d0b2cc

introduce ML variables

e09788f

timeseries explorer

33eb085

forecasting modal

55cd79c

import job wizard sass files correctly

45105c8

missing import for event rate chart

c03fe56

more feedback fixes

2de9b82

fix for chart overflow

063a4be

ml code cleanup

0b28e2c

code cleanup

ecf2004

more review

e0439a6

forgot to delete some less files

9369d9e

feedback

a89fe6d

remove last of less files

7d4d2a2

bad import

b30be74

snide force-pushed the sass/machine_learning branch from 9a6cdb8 to b30be74 Compare October 5, 2018 03:24

snide mentioned this pull request Nov 13, 2018

[ML] convert Less to Scss #25574

Merged

snide closed this Nov 13, 2018

Machine learning convert Less to Scss #23387

Machine learning convert Less to Scss #23387

Conversation

snide commented Sep 21, 2018 • edited Loading

Process taken

ML css / design layer cleanup plan of attack

Major visual changes

elasticmachine commented Sep 25, 2018

💚 Build Succeeded

snide commented Sep 26, 2018

elasticmachine commented Sep 26, 2018

💚 Build Succeeded

peteharverson commented Sep 26, 2018

elasticmachine commented Sep 26, 2018

snide commented Sep 27, 2018

elasticmachine commented Sep 27, 2018

💔 Build Failed

peteharverson commented Sep 27, 2018

elasticmachine commented Sep 27, 2018

💔 Build Failed

elasticmachine commented Sep 27, 2018

💚 Build Succeeded

snide commented Sep 27, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Sep 28, 2018

💔 Build Failed

elasticmachine commented Sep 28, 2018

💚 Build Succeeded

peteharverson commented Sep 28, 2018

cchaos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide commented Sep 29, 2018

elasticmachine commented Sep 29, 2018

💔 Build Failed

elasticmachine commented Oct 1, 2018

💔 Build Failed

snide commented Oct 1, 2018

elasticmachine commented Oct 1, 2018

💔 Build Failed

elasticmachine commented Oct 5, 2018

💔 Build Failed

snide commented Nov 13, 2018

snide commented Sep 21, 2018 •

edited

Loading