From 9162fdea146adadec05fa50f2cf4461bf19b7892 Mon Sep 17 00:00:00 2001 From: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com> Date: Tue, 19 Nov 2024 23:23:41 +0100 Subject: [PATCH] [ML] Migrate influencers list from SCSS to Emotion (#200019) ## Summary Part of: [#140695](https://github.com/elastic/kibana/issues/140695) Migrates SCSS to emotion for Influencers list. | Before | After | | ------------- | ------------- | | ![image](https://github.com/user-attachments/assets/1f85b2d1-5526-49b2-819d-525989b9c48d) | ![image](https://github.com/user-attachments/assets/e1e5745e-d00a-4a51-ab93-b29ff71d8aef) | | ![image](https://github.com/user-attachments/assets/f1e8d594-8a9d-4f08-98bb-156e21abd1c6) | ![image](https://github.com/user-attachments/assets/d55a2848-2c28-4b4b-88b2-ed1b98b16430) | --- .../plugins/ml/public/application/_index.scss | 1 - .../components/influencers_list/_index.scss | 1 - .../influencers_list/_influencers_list.scss | 109 ------------------ .../influencers_list/influencers_list.tsx | 27 +++-- .../influencers_list_styles.ts | 90 +++++++++++++++ 5 files changed, 103 insertions(+), 125 deletions(-) delete mode 100644 x-pack/plugins/ml/public/application/components/influencers_list/_index.scss delete mode 100644 x-pack/plugins/ml/public/application/components/influencers_list/_influencers_list.scss create mode 100644 x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss index 029a422afaa9f..91201434b20b1 100644 --- a/x-pack/plugins/ml/public/application/_index.scss +++ b/x-pack/plugins/ml/public/application/_index.scss @@ -11,7 +11,6 @@ @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly @import 'components/entity_cell/index'; - @import 'components/influencers_list/index'; @import 'components/job_selector/index'; @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly diff --git a/x-pack/plugins/ml/public/application/components/influencers_list/_index.scss b/x-pack/plugins/ml/public/application/components/influencers_list/_index.scss deleted file mode 100644 index 90ff743d162f0..0000000000000 --- a/x-pack/plugins/ml/public/application/components/influencers_list/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'influencers_list'; \ No newline at end of file diff --git a/x-pack/plugins/ml/public/application/components/influencers_list/_influencers_list.scss b/x-pack/plugins/ml/public/application/components/influencers_list/_influencers_list.scss deleted file mode 100644 index 1b091e4046c50..0000000000000 --- a/x-pack/plugins/ml/public/application/components/influencers_list/_influencers_list.scss +++ /dev/null @@ -1,109 +0,0 @@ -.ml-influencers-list { - line-height: 1.45; // SASSTODO: Calc proper value - - .field-label { - font-size: $euiFontSizeXS; - text-align: left; - max-height: $euiFontSizeS; - max-width: calc(100% - 102px); // SASSTODO: Calc proper value - - .field-value { - @include euiTextTruncate; - display: inline-block; - vertical-align: bottom; - } - } - - .progress { - display: inline-block; - width: calc(100% - 34px); // SASSTODO: Calc proper value - height: 22px; - min-width: 70px; - margin-bottom: 0; - color: $euiColorDarkShade; - background-color: transparent; - - .progress-bar-holder { - width: calc(100% - 28px); // SASSTODO: Calc proper value - } - - .progress-bar { - height: calc($euiSizeXS / 2); - margin-top: $euiSizeM; - text-align: right; - line-height: 18px; // SASSTODO: Calc proper value - display: inline-block; - transition: none; - } - } - - // SASSTODO: This range of color is too large, needs to be rewritten and variablized - .progress.critical { - .progress-bar { - background-color: $mlColorCritical; - } - - .score-label { - border-color: $mlColorCritical; - } - } - - .progress.major { - .progress-bar { - background-color: $mlColorMajor; - } - - .score-label { - border-color: $mlColorMajor; - } - } - - .progress.minor { - .progress-bar { - background-color: $mlColorMinor; - } - - .score-label { - border-color: $mlColorMinor; - } - } - - .progress.warning { - .progress-bar { - background-color: $mlColorWarning; - } - - .score-label { - border-color: $mlColorWarning; - } - } - - .score-label { - text-align: center; - line-height: 14px; - white-space: nowrap; - font-size: $euiFontSizeXS; - display: inline; - margin-left: $euiSizeXS; - } - - // SASSTODO: Brittle sizing - .total-score-label { - width: $euiSizeXL; - vertical-align: top; - text-align: center; - color: $euiColorDarkShade; - font-size: 11px; - line-height: 14px; - border-radius: $euiBorderRadius; - padding: calc($euiSizeXS / 2); - margin-top: $euiSizeXS; - display: inline-block; - border: $euiBorderThin; - } -} - -// SASSTODO: Can .eui-textBreakAll -.ml-influencers-list-tooltip { - word-break: break-all; -} diff --git a/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx index 39556dfe6a0f4..35f3bb83ebb10 100644 --- a/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx +++ b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list.tsx @@ -19,6 +19,7 @@ import { getSeverity, getFormattedSeverityScore } from '@kbn/ml-anomaly-utils'; import { abbreviateWholeNumber } from '../../formatters/abbreviate_whole_number'; import type { EntityCellFilter } from '../entity_cell'; import { EntityCell } from '../entity_cell'; +import { useInfluencersListStyles } from './influencers_list_styles'; export interface InfluencerValueData { influencerFieldValue: string; @@ -65,6 +66,7 @@ function getTooltipContent(maxScoreLabel: string, totalScoreLabel: string) { } const Influencer: FC = ({ influencerFieldName, influencerFilter, valueData }) => { + const styles = useInfluencersListStyles(); const maxScore = Math.floor(valueData.maxAnomalyScore); const maxScoreLabel = getFormattedSeverityScore(valueData.maxAnomalyScore); const severity = getSeverity(maxScore); @@ -73,29 +75,25 @@ const Influencer: FC = ({ influencerFieldName, influencerFilter // Ensure the bar has some width for 0 scores. const barScore = maxScore !== 0 ? maxScore : 1; - const barStyle = { - width: `${barScore}%`, - }; const tooltipContent = getTooltipContent(maxScoreLabel, totalScoreLabel); return (
-
+
-
-
-
+
+
+
-
+
@@ -103,10 +101,9 @@ const Influencer: FC = ({ influencerFieldName, influencerFilter
-
+
@@ -145,12 +142,14 @@ const InfluencersByName: FC = ({ }; export const InfluencersList: FC = ({ influencers, influencerFilter }) => { + const styles = useInfluencersListStyles(); + if (influencers === undefined || Object.keys(influencers).length === 0) { return ( - + - +

= ({ influencers, influen /> )); - return
{influencersByName}
; + return
{influencersByName}
; }; diff --git a/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts new file mode 100644 index 0000000000000..5a0732ceb8d70 --- /dev/null +++ b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts @@ -0,0 +1,90 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { css } from '@emotion/react'; +import { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme'; +import { mlColors } from '../../styles'; +import { useMlKibana } from '../../contexts/kibana'; + +export const useInfluencersListStyles = () => { + const { + services: { theme }, + } = useMlKibana(); + const { euiTheme } = useCurrentEuiThemeVars(theme); + + return { + influencersList: css({ + lineHeight: 1.45, + }), + fieldLabel: css({ + fontSize: euiTheme.euiFontSizeXS, + textAlign: 'left', + maxHeight: euiTheme.euiFontSizeS, + maxWidth: 'calc(100% - 102px)', + }), + progress: css({ + display: 'inline-block', + width: 'calc(100% - 34px)', + height: '22px', + minWidth: '70px', + marginBottom: 0, + color: euiTheme.euiColorDarkShade, + backgroundColor: 'transparent', + }), + progressBarHolder: css({ + width: `calc(100% - 28px)`, + }), + progressBar: (severity: string, barScore: number) => + css({ + height: `calc(${euiTheme.euiSizeXS} / 2)`, + float: 'left', + marginTop: euiTheme.euiSizeM, + textAlign: 'right', + lineHeight: '18px', + display: 'inline-block', + transition: 'none', + width: `${barScore}%`, + backgroundColor: + severity === 'critical' + ? mlColors.critical + : severity === 'major' + ? mlColors.major + : severity === 'minor' + ? mlColors.minor + : mlColors.warning, + }), + scoreLabel: (severity: string) => + css({ + textAlign: 'center', + lineHeight: '14px', + whiteSpace: 'nowrap', + fontSize: euiTheme.euiFontSizeXS, + marginLeft: euiTheme.euiSizeXS, + display: 'inline', + borderColor: + severity === 'critical' + ? mlColors.critical + : severity === 'major' + ? mlColors.major + : severity === 'minor' + ? mlColors.minor + : mlColors.warning, + }), + totalScoreLabel: css({ + width: euiTheme.euiSizeXL, + verticalAlign: 'top', + textAlign: 'center', + color: euiTheme.euiColorDarkShade, + fontSize: '11px', + lineHeight: '14px', + borderRadius: euiTheme.euiBorderRadius, + padding: `calc(${euiTheme.euiSizeXS} / 2)`, + display: 'inline-block', + border: euiTheme.euiBorderThin, + }), + }; +};