Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Fixes dark mode in flyouts and modals #164399

Merged
merged 18 commits into from
Aug 23, 2023

Conversation

jgowdyelastic
Copy link
Member

@jgowdyelastic jgowdyelastic commented Aug 22, 2023

A recent EUI change has caused a problem with the theme when using the deprecated toMountPoint inside overlays.openFlyout to create flyouts.
This causes the contents of the rendered flyout to not know the current theme, this is obvious when running in dark mode.

The fix is to switch to the non-deprecated version of toMountPoint.

Flyouts:
Create anomaly detection job from Lens flyout in Dashboard.
Anomaly swim lane and anomaly chart job embeddables job selection flyout in Dashboard.
Log pattern analysis flyout in Discover.

Modals:
Trained models start deployment modal.
Trained models force stop deployment modal.
Trained models stop deployment modal when there are multiple deployments.

Misc:
Page not found banner.
Jobs list header, which contains the settings button.
DFA clone job warning toast when the original data view no longer exists.
Components in ml's date picker package

Fixes #164379

@jgowdyelastic jgowdyelastic added non-issue Indicates to automation that a pull request should not appear in the release notes :ml release_note:skip Skip the PR/issue when compiling release notes Feature:ML/AIOps ML AIOps features: Change Point Detection, Log Pattern Analysis, Log Rate Analysis v8.10.0 v8.11.0 labels Aug 22, 2023
@jgowdyelastic jgowdyelastic self-assigned this Aug 22, 2023
@jgowdyelastic jgowdyelastic requested a review from a team as a code owner August 22, 2023 08:34
@elasticmachine
Copy link
Contributor

Pinging @elastic/ml-ui (:ml)

Copy link
Contributor

@darnautov darnautov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

wrapWithTheme,
KibanaContextProvider,
} from '@kbn/kibana-react-plugin/public';
import { wrapWithTheme, KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { wrapWithTheme, KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wrapWithTheme is still needed as it needs to be passed to the DatePickerContextProvider component.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's no longer needed after this change 9b8e1e6

@jgowdyelastic jgowdyelastic changed the title [ML] Fixing dark mode in flyouts [ML] Fixing dark mode in flyouts and modals Aug 22, 2023
@peteharverson peteharverson changed the title [ML] Fixing dark mode in flyouts and modals [ML] Fixes dark mode in flyouts and modals Aug 22, 2023
Copy link
Contributor

@peteharverson peteharverson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested (with per-user dark mode) and LGTM. Just have a few type errors to fix I think.

@jgowdyelastic jgowdyelastic requested a review from a team as a code owner August 22, 2023 16:53
@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
dataVisualizer 540 554 +14
ml 1793 1807 +14
transform 365 379 +14
total +42

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
@kbn/ml-date-picker 4 0 -4

Async chunks

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

id before after diff
aiops 595.3KB 593.5KB -1.8KB
dataVisualizer 605.0KB 606.3KB +1.3KB
infra 2.0MB 2.0MB +7.0B
ml 3.5MB 3.5MB +1.4KB
transform 404.7KB 406.2KB +1.4KB
total +2.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
dataVisualizer 23.0KB 23.0KB +56.0B
transform 17.8KB 17.8KB +56.0B
total +112.0B
Unknown metric groups

API count

id before after diff
@kbn/ml-date-picker 52 47 -5
aiops 60 61 +1
total -4

References to deprecated APIs

id before after diff
@kbn/ml-date-picker 1 0 -1
aiops 19 6 -13
dataVisualizer 31 25 -6
ml 176 156 -20
transform 64 62 -2
total -42

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @jgowdyelastic

Copy link
Contributor

@benakansara benakansara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AO changes LGTM

Copy link
Contributor

@walterra walterra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM.

@jgowdyelastic jgowdyelastic merged commit af440aa into elastic:main Aug 23, 2023
@jgowdyelastic jgowdyelastic deleted the fixing-dark-mode-in-flyouts branch August 23, 2023 10:47
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Aug 23, 2023
A recent EUI change has caused a problem with the theme when using the
deprecated `toMountPoint` inside `overlays.openFlyout` to create
flyouts.
This causes the contents of the rendered flyout to not know the current
theme, this is obvious when running in dark mode.

The fix is to switch to the non-deprecated version of `toMountPoint`.

Flyouts:
Create anomaly detection job from Lens flyout in Dashboard.
Anomaly swim lane and anomaly chart job embeddables job selection flyout
in Dashboard.
Log pattern analysis flyout in Discover.

Modals:
Trained models start deployment modal.
Trained models force stop deployment modal.
Trained models stop deployment modal when there are multiple
deployments.

Misc:
Page not found banner.
Jobs list header, which contains the settings button.
DFA clone job warning toast when the original data view no longer
exists.
Components in ml's date picker package

Fixes elastic#164379

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Dima Arnautov <[email protected]>
(cherry picked from commit af440aa)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.10

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

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Aug 23, 2023
# Backport

This will backport the following commits from `main` to `8.10`:
- [[ML] Fixes dark mode in flyouts and modals
(#164399)](#164399)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"James
Gowdy","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-08-23T10:47:18Z","message":"[ML]
Fixes dark mode in flyouts and modals (#164399)\n\nA recent EUI change
has caused a problem with the theme when using the\r\ndeprecated
`toMountPoint` inside `overlays.openFlyout` to
create\r\nflyouts.\r\nThis causes the contents of the rendered flyout to
not know the current\r\ntheme, this is obvious when running in dark
mode.\r\n\r\nThe fix is to switch to the non-deprecated version of
`toMountPoint`.\r\n\r\nFlyouts:\r\nCreate anomaly detection job from
Lens flyout in Dashboard.\r\nAnomaly swim lane and anomaly chart job
embeddables job selection flyout\r\nin Dashboard.\r\nLog pattern
analysis flyout in Discover.\r\n\r\nModals:\r\nTrained models start
deployment modal.\r\nTrained models force stop deployment
modal.\r\nTrained models stop deployment modal when there are
multiple\r\ndeployments.\r\n\r\nMisc:\r\nPage not found banner.\r\nJobs
list header, which contains the settings button.\r\nDFA clone job
warning toast when the original data view no
longer\r\nexists.\r\nComponents in ml's date picker package\r\n\r\nFixes
https://github.com/elastic/kibana/issues/164379\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>\r\nCo-authored-by:
Dima Arnautov
<[email protected]>","sha":"af440aae4b55e3090dc6a7983105fd98e16402ab","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["non-issue",":ml","release_note:skip","Feature:ML/AIOps","v8.10.0","v8.11.0"],"number":164399,"url":"https://github.com/elastic/kibana/pull/164399","mergeCommit":{"message":"[ML]
Fixes dark mode in flyouts and modals (#164399)\n\nA recent EUI change
has caused a problem with the theme when using the\r\ndeprecated
`toMountPoint` inside `overlays.openFlyout` to
create\r\nflyouts.\r\nThis causes the contents of the rendered flyout to
not know the current\r\ntheme, this is obvious when running in dark
mode.\r\n\r\nThe fix is to switch to the non-deprecated version of
`toMountPoint`.\r\n\r\nFlyouts:\r\nCreate anomaly detection job from
Lens flyout in Dashboard.\r\nAnomaly swim lane and anomaly chart job
embeddables job selection flyout\r\nin Dashboard.\r\nLog pattern
analysis flyout in Discover.\r\n\r\nModals:\r\nTrained models start
deployment modal.\r\nTrained models force stop deployment
modal.\r\nTrained models stop deployment modal when there are
multiple\r\ndeployments.\r\n\r\nMisc:\r\nPage not found banner.\r\nJobs
list header, which contains the settings button.\r\nDFA clone job
warning toast when the original data view no
longer\r\nexists.\r\nComponents in ml's date picker package\r\n\r\nFixes
https://github.com/elastic/kibana/issues/164379\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>\r\nCo-authored-by:
Dima Arnautov
<[email protected]>","sha":"af440aae4b55e3090dc6a7983105fd98e16402ab"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164399","number":164399,"mergeCommit":{"message":"[ML]
Fixes dark mode in flyouts and modals (#164399)\n\nA recent EUI change
has caused a problem with the theme when using the\r\ndeprecated
`toMountPoint` inside `overlays.openFlyout` to
create\r\nflyouts.\r\nThis causes the contents of the rendered flyout to
not know the current\r\ntheme, this is obvious when running in dark
mode.\r\n\r\nThe fix is to switch to the non-deprecated version of
`toMountPoint`.\r\n\r\nFlyouts:\r\nCreate anomaly detection job from
Lens flyout in Dashboard.\r\nAnomaly swim lane and anomaly chart job
embeddables job selection flyout\r\nin Dashboard.\r\nLog pattern
analysis flyout in Discover.\r\n\r\nModals:\r\nTrained models start
deployment modal.\r\nTrained models force stop deployment
modal.\r\nTrained models stop deployment modal when there are
multiple\r\ndeployments.\r\n\r\nMisc:\r\nPage not found banner.\r\nJobs
list header, which contains the settings button.\r\nDFA clone job
warning toast when the original data view no
longer\r\nexists.\r\nComponents in ml's date picker package\r\n\r\nFixes
https://github.com/elastic/kibana/issues/164379\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>\r\nCo-authored-by:
Dima Arnautov
<[email protected]>","sha":"af440aae4b55e3090dc6a7983105fd98e16402ab"}}]}]
BACKPORT-->

Co-authored-by: James Gowdy <[email protected]>
jloleysens added a commit to jloleysens/kibana that referenced this pull request Aug 23, 2023
* main: (150 commits)
  Fixes unnecessary autocompletes on HTTP methods (elastic#163233)
  [Defend Workflows] Convert filterQuery to kql  (elastic#161806)
  [Fleet] copy `inactivity_timeout` when duplicating agent policy (elastic#164544)
  Fix 7.17 forward compatibility with 8.2+ (elastic#164274)
  [ML] Fixes dark mode in flyouts and modals (elastic#164399)
  [Defend Workflows]Changes to policy settings are not persistent until a refresh (elastic#164403)
  [Security Solution][Endpoint] Fixes kibana crash when going back to policy details page (elastic#164329)
  Prepare the Security domain HTTP APIs for Serverless (elastic#162087)
  skip failing test suite (elastic#160986)
  [Security Solution] Fix flaky Event Filters test (elastic#164473)
  [EDR workflows] Osquery serverless tests (elastic#163795)
  [Fleet] Only show agent dashboard links if there is more than one non-server agent and if the dashboards exist (elastic#164469)
  [Chrome UI] Fix background color in serverless (elastic#164419)
  [DOCS] Saved objects - resolve import errors API (elastic#162825)
  Remove 'Create Rule' button from Rule Group page (elastic#164167)
  [Security Solution] expandable flyout - fix infinite loop in correlations (elastic#163450)
  [Remote Clusters] Update copy about port help text (elastic#164442)
  [api-docs] 2023-08-23 Daily api_docs build (elastic#164524)
  [data views] Disable scripted fields in serverless environment (elastic#163228)
  [Reporting] Fix - show diagnostic only when image reporting is enabled (elastic#164336)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:ML/AIOps ML AIOps features: Change Point Detection, Log Pattern Analysis, Log Rate Analysis :ml non-issue Indicates to automation that a pull request should not appear in the release notes release_note:skip Skip the PR/issue when compiling release notes v8.10.0 v8.11.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create anomaly detection job panel is not in dark theme when user is in dark mode
8 participants