From f94e3cf09a791b2243d3c7df97624539287ceed9 Mon Sep 17 00:00:00 2001 From: rbrtj Date: Wed, 13 Nov 2024 15:40:36 +0100 Subject: [PATCH] migrate scss to emotion --- .../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 | 92 +++++++++++++++ 5 files changed, 105 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 95fbbf4cb112a..1ad58332f7394 100644 --- a/x-pack/plugins/ml/public/application/_index.scss +++ b/x-pack/plugins/ml/public/application/_index.scss @@ -12,7 +12,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..1b7e2c9c3ae2f 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..e5dd95a8461e0 --- /dev/null +++ b/x-pack/plugins/ml/public/application/components/influencers_list/influencers_list_styles.ts @@ -0,0 +1,92 @@ +/* + * 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: (barScore: number) => + css({ + width: `${barScore}%`, + display: 'inline-block', + maxWidth: `calc(100% - 28px)`, + }), + progressBar: (severity: string) => + css({ + height: `calc(${euiTheme.euiSizeXS} / 2)`, + marginTop: euiTheme.euiSizeM, + textAlign: 'right', + lineHeight: '18px', + display: 'inline-block', + transition: 'none', + width: `100%`, + 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-block', + 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, + }), + }; +};