From a792731abe00634a3c70826879d4473e3256f722 Mon Sep 17 00:00:00 2001 From: Maria Iriarte Date: Tue, 4 Feb 2025 14:38:28 +0100 Subject: [PATCH 01/13] Add path to emotion.d.ts in tsconfig --- .../chart_expressions/expression_legacy_metric/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/tsconfig.json b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/tsconfig.json index b5ac0c93d9e31..726bb8ed37514 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/tsconfig.json +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/tsconfig.json @@ -8,6 +8,7 @@ "common/**/*", "public/**/*", "server/**/*", + "../../../../../../typings/emotion.d.ts" ], "kbn_references": [ { "path": "../tsconfig.json" }, From ddc7ce9f0afabc7fd6899a0104260a6ed6baa3df Mon Sep 17 00:00:00 2001 From: Maria Iriarte Date: Tue, 4 Feb 2025 14:39:27 +0100 Subject: [PATCH 02/13] Replace legacyMtrVis css --- .../public/components/metric.scss | 12 ------------ .../metric_vis_renderer.tsx | 17 ++++++++++++++++- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss index 59d06546da494..c002276d1730e 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss @@ -5,18 +5,6 @@ // mtrChart__legend--small // mtrChart__legend-isLoading -.legacyMtrVis { - height: 100%; - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - flex-wrap: wrap; - overflow: auto; - @include euiScrollBar; -} - .legacyMtrVis__value { @include euiTextTruncate; font-weight: $euiFontWeightBold; diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx index 45573fbdd13b4..be0d8b3c00c35 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -27,9 +27,23 @@ import { extractContainerType, extractVisualizationType, } from '@kbn/chart-expressions-common'; +import { UseEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; import { ExpressionLegacyMetricPluginStart } from '../plugin'; import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig, VisParams } from '../../common'; +const legacyMtrVisCss = ({ euiTheme }: UseEuiTheme) => + css({ + height: '100%', + width: '100%', + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + flexWrap: 'wrap', + overflow: 'auto', + }); + // @ts-ignore const MetricVisComponent = lazy(() => import('../components/metric_component')); @@ -113,10 +127,11 @@ export const getMetricVisRenderer: ( Date: Tue, 4 Feb 2025 15:26:04 +0100 Subject: [PATCH 03/13] Delete .scss file --- .../public/components/metric.scss | 44 -------------- .../public/components/metric_value.tsx | 58 ++++++++++++++++--- 2 files changed, 50 insertions(+), 52 deletions(-) delete mode 100644 src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss deleted file mode 100644 index c002276d1730e..0000000000000 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Prefix all styles with "mtr" to avoid conflicts. -// Examples -// mtrChart -// mtrChart__legend -// mtrChart__legend--small -// mtrChart__legend-isLoading - -.legacyMtrVis__value { - @include euiTextTruncate; - font-weight: $euiFontWeightBold; -} - -.legacyMtrVis__container { - text-align: center; - padding: $euiSize; - display: flex; - flex-direction: column; -} - -.legacyMtrVis__container--light { - color: $euiColorEmptyShade; -} - -.legacyMtrVis__container-isfull { - min-height: 100%; - min-width: max-content; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - flex: 1 0 100%; -} - -.legacyMtrVis__container-isFilterable { - cursor: pointer; - transition: transform $euiAnimSpeedNormal $euiAnimSlightResistance; - transform: translate(0, 0); - - &:hover, - &:focus { - box-shadow: none; - transform: translate(0, -2px); - } -} \ No newline at end of file diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index 8199a2ec1f842..e1819f60739c2 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -8,10 +8,52 @@ */ import React, { CSSProperties, useLayoutEffect } from 'react'; -import classNames from 'classnames'; import { i18n } from '@kbn/i18n'; +import { UseEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; +import { euiTextTruncate } from '@elastic/eui'; import type { MetricOptions, MetricStyle, MetricVisParam } from '../../common/types'; +const legacyMtrVisValueCss = ({ euiTheme }: UseEuiTheme) => + css({ + fontWeight: euiTheme.font.weight.bold, + }); + +const legacyMtrVisContainerCss = ({ euiTheme }: UseEuiTheme) => + css({ + textAlign: 'center', + padding: euiTheme.size.base, + display: 'flex', + flexDirection: 'column', + }); + +const legacyMtrVisContainerLightCss = ({ euiTheme }: UseEuiTheme) => + css({ + color: euiTheme.colors.emptyShade, + }); + +const legacyMtrVisContainerIsFilterableCss = ({ euiTheme }: UseEuiTheme) => + css({ + cursor: 'pointer', + transition: `transform ${euiTheme.animation.normal} ${euiTheme.animation.resistance}`, + transform: 'translate(0, 0)', + '&:hover, &:focus': { + boxShadow: 'none', + transform: 'translate(0, -2px)', + }, + }); + +const legacyMtrVisContainerIsFullCss = () => + css({ + minHeight: '100%', + minWidth: 'max-content', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + flex: '1 0 100%', + }); + interface MetricVisValueProps { metric: MetricOptions; onFilter?: () => void; @@ -24,11 +66,6 @@ interface MetricVisValueProps { export const MetricVisValue = (props: MetricVisValueProps) => { const { style, metric, onFilter, labelConfig, colorFullBackground, autoScale } = props; - const containerClassName = classNames('legacyMtrVis__container', { - 'legacyMtrVis__container--light': metric.lightText, - 'legacyMtrVis__container-isfilterable': onFilter, - 'legacyMtrVis__container-isfull': !autoScale && colorFullBackground, - }); useLayoutEffect(() => { props.renderComplete?.(); @@ -37,12 +74,17 @@ export const MetricVisValue = (props: MetricVisValueProps) => { // for autoScale true we should add background to upper level so that correct colorize full container const metricComponent = (
Date: Tue, 4 Feb 2025 16:01:56 +0100 Subject: [PATCH 04/13] Delete scss import file --- .../public/components/metric_component.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx index e4e5078c84dd8..f7ae231413aea 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx @@ -24,8 +24,6 @@ import { formatValue, shouldApplyColor } from '../utils'; import { needsLightText } from '../utils/palette'; import { withAutoScale } from './with_auto_scale'; -import './metric.scss'; - export interface MetricVisComponentProps { visParams: Pick; visData: Datatable; From 06b0f7dde1a53f04f316631bffcc38334cd017e0 Mon Sep 17 00:00:00 2001 From: Maria Iriarte Date: Wed, 5 Feb 2025 15:11:38 +0100 Subject: [PATCH 05/13] Remove unused euiTheme --- .../public/components/metric_value.tsx | 19 ++++++++-------- .../metric_vis_renderer.tsx | 22 +++++++++---------- 2 files changed, 19 insertions(+), 22 deletions(-) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index e1819f60739c2..35d7c50b52517 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -43,16 +43,15 @@ const legacyMtrVisContainerIsFilterableCss = ({ euiTheme }: UseEuiTheme) => }, }); -const legacyMtrVisContainerIsFullCss = () => - css({ - minHeight: '100%', - minWidth: 'max-content', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - flex: '1 0 100%', - }); +const legacyMtrVisContainerIsFullCss = css({ + minHeight: '100%', + minWidth: 'max-content', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + flex: '1 0 100%', +}); interface MetricVisValueProps { metric: MetricOptions; diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx index be0d8b3c00c35..9f881ee4095b7 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -27,22 +27,20 @@ import { extractContainerType, extractVisualizationType, } from '@kbn/chart-expressions-common'; -import { UseEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; import { ExpressionLegacyMetricPluginStart } from '../plugin'; import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig, VisParams } from '../../common'; -const legacyMtrVisCss = ({ euiTheme }: UseEuiTheme) => - css({ - height: '100%', - width: '100%', - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - flexWrap: 'wrap', - overflow: 'auto', - }); +const legacyMtrVisCss = css({ + height: '100%', + width: '100%', + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + flexWrap: 'wrap', + overflow: 'auto', +}); // @ts-ignore const MetricVisComponent = lazy(() => import('../components/metric_component')); From 7d3e5a4a8e23ebf113619467544c77a998e146fb Mon Sep 17 00:00:00 2001 From: Maria Iriarte Date: Thu, 6 Feb 2025 16:02:07 +0100 Subject: [PATCH 06/13] Remove style property --- .../expression_legacy_metric/public/components/metric_value.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index 35d7c50b52517..0079e4b7ba0d9 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -78,8 +78,8 @@ export const MetricVisValue = (props: MetricVisValueProps) => { metric.lightText && legacyMtrVisContainerLightCss, onFilter && legacyMtrVisContainerIsFilterableCss, !autoScale && colorFullBackground && legacyMtrVisContainerIsFullCss, + css({ backgroundColor: !autoScale && colorFullBackground ? metric.bgColor : undefined }), ]} - style={autoScale && colorFullBackground ? {} : { backgroundColor: metric.bgColor }} >
Date: Thu, 6 Feb 2025 17:06:02 +0100 Subject: [PATCH 07/13] Delete test cases --- .../public/components/metric_value.test.tsx | 42 +------------------ .../public/components/metric_value.tsx | 1 + 2 files changed, 2 insertions(+), 41 deletions(-) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx index 5284241c87826..a64f1a668812b 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx @@ -21,6 +21,7 @@ const baseMetric: MetricOptions = { rowIndex: 0, colIndex: 0, }; + const font: MetricStyle = { spec: { fontSize: '12px' }, @@ -64,34 +65,6 @@ describe('MetricVisValue', () => { expect(component.find('button').exists()).toBe(false); }); - it('should add -isfilterable class if onFilter is provided', () => { - const onFilter = jest.fn(); - const component = shallow( - - ); - component.simulate('click'); - expect(component.find('.legacyMtrVis__container-isfilterable')).toHaveLength(1); - }); - - it('should not add -isfilterable class if onFilter is not provided', () => { - const component = shallow( - - ); - component.simulate('click'); - expect(component.find('.legacyMtrVis__container-isfilterable')).toHaveLength(0); - }); - it('should call onFilter callback if provided', () => { const onFilter = jest.fn(); const component = shallow( @@ -106,17 +79,4 @@ describe('MetricVisValue', () => { component.simulate('click'); expect(onFilter).toHaveBeenCalled(); }); - - it('should add correct class name if colorFullBackground is true', () => { - const component = shallow( - {}} - colorFullBackground={true} - labelConfig={labelConfig} - /> - ); - expect(component.find('.legacyMtrVis__container-isfull').exists()).toBe(true); - }); }); diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index 0079e4b7ba0d9..be7215b3b744d 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -37,6 +37,7 @@ const legacyMtrVisContainerIsFilterableCss = ({ euiTheme }: UseEuiTheme) => cursor: 'pointer', transition: `transform ${euiTheme.animation.normal} ${euiTheme.animation.resistance}`, transform: 'translate(0, 0)', + '&:hover, &:focus': { boxShadow: 'none', transform: 'translate(0, -2px)', From a4b3b7c54ef58859f198d9a607303abb5086f694 Mon Sep 17 00:00:00 2001 From: Maria Iriarte Date: Fri, 7 Feb 2025 11:33:37 +0100 Subject: [PATCH 08/13] Refactor styles --- .../public/components/metric_value.test.tsx | 42 +++++++- .../public/components/metric_value.tsx | 98 ++++++++++--------- 2 files changed, 91 insertions(+), 49 deletions(-) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx index a64f1a668812b..5284241c87826 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx @@ -21,7 +21,6 @@ const baseMetric: MetricOptions = { rowIndex: 0, colIndex: 0, }; - const font: MetricStyle = { spec: { fontSize: '12px' }, @@ -65,6 +64,34 @@ describe('MetricVisValue', () => { expect(component.find('button').exists()).toBe(false); }); + it('should add -isfilterable class if onFilter is provided', () => { + const onFilter = jest.fn(); + const component = shallow( + + ); + component.simulate('click'); + expect(component.find('.legacyMtrVis__container-isfilterable')).toHaveLength(1); + }); + + it('should not add -isfilterable class if onFilter is not provided', () => { + const component = shallow( + + ); + component.simulate('click'); + expect(component.find('.legacyMtrVis__container-isfilterable')).toHaveLength(0); + }); + it('should call onFilter callback if provided', () => { const onFilter = jest.fn(); const component = shallow( @@ -79,4 +106,17 @@ describe('MetricVisValue', () => { component.simulate('click'); expect(onFilter).toHaveBeenCalled(); }); + + it('should add correct class name if colorFullBackground is true', () => { + const component = shallow( + {}} + colorFullBackground={true} + labelConfig={labelConfig} + /> + ); + expect(component.find('.legacyMtrVis__container-isfull').exists()).toBe(true); + }); }); diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index be7215b3b744d..113805c9666e2 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -12,48 +12,9 @@ import { i18n } from '@kbn/i18n'; import { UseEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; import { euiTextTruncate } from '@elastic/eui'; +import classNames from 'classnames'; import type { MetricOptions, MetricStyle, MetricVisParam } from '../../common/types'; -const legacyMtrVisValueCss = ({ euiTheme }: UseEuiTheme) => - css({ - fontWeight: euiTheme.font.weight.bold, - }); - -const legacyMtrVisContainerCss = ({ euiTheme }: UseEuiTheme) => - css({ - textAlign: 'center', - padding: euiTheme.size.base, - display: 'flex', - flexDirection: 'column', - }); - -const legacyMtrVisContainerLightCss = ({ euiTheme }: UseEuiTheme) => - css({ - color: euiTheme.colors.emptyShade, - }); - -const legacyMtrVisContainerIsFilterableCss = ({ euiTheme }: UseEuiTheme) => - css({ - cursor: 'pointer', - transition: `transform ${euiTheme.animation.normal} ${euiTheme.animation.resistance}`, - transform: 'translate(0, 0)', - - '&:hover, &:focus': { - boxShadow: 'none', - transform: 'translate(0, -2px)', - }, - }); - -const legacyMtrVisContainerIsFullCss = css({ - minHeight: '100%', - minWidth: 'max-content', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - flex: '1 0 100%', -}); - interface MetricVisValueProps { metric: MetricOptions; onFilter?: () => void; @@ -67,6 +28,12 @@ interface MetricVisValueProps { export const MetricVisValue = (props: MetricVisValueProps) => { const { style, metric, onFilter, labelConfig, colorFullBackground, autoScale } = props; + const containerClassName = classNames('legacyMtrVis__container', { + 'legacyMtrVis__container--light': metric.lightText, + 'legacyMtrVis__container-isfilterable': onFilter, + 'legacyMtrVis__container-isfull': !autoScale && colorFullBackground, + }); + useLayoutEffect(() => { props.renderComplete?.(); }, [props]); @@ -74,17 +41,13 @@ export const MetricVisValue = (props: MetricVisValueProps) => { // for autoScale true we should add background to upper level so that correct colorize full container const metricComponent = (
{ return metricComponent; }; + +const styles = { + legacyMtrVisValue: ({ euiTheme }: UseEuiTheme) => + css` + ${euiTextTruncate()}; + font-weight: ${euiTheme.font.weight.bold}; + `, + legacyMtrVisContainer: ({ euiTheme }: UseEuiTheme) => + css({ + '&.legacyMtrVis__container': { + textAlign: 'center', + padding: euiTheme.size.base, + display: 'flex', + flexDirection: 'column', + }, + '&.legacyMtrVis__container--light': { + color: euiTheme.colors.emptyShade, + }, + '&.legacyMtrVis__container-isfilterable': { + cursor: 'pointer', + transition: `transform ${euiTheme.animation.normal} ${euiTheme.animation.resistance}`, + transform: 'translate(0, 0)', + + '&:hover, &:focus': { + boxShadow: 'none', + transform: 'translate(0, -2px)', + }, + }, + '&.legacyMtrVis__container-isfull': { + minHeight: '100%', + minWidth: 'max-content', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + flex: '1 0 100%', + }, + }), +}; From 0a29311f410bf6c93bc938aee9fd0d608b8b9701 Mon Sep 17 00:00:00 2001 From: Maria Iriarte Date: Fri, 7 Feb 2025 12:21:17 +0100 Subject: [PATCH 09/13] Refactor styles --- .../public/components/metric_value.tsx | 18 +++++++-------- .../metric_vis_renderer.tsx | 22 +++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index 113805c9666e2..b1e913b530a7e 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -110,6 +110,15 @@ const styles = { '&.legacyMtrVis__container--light': { color: euiTheme.colors.emptyShade, }, + '&.legacyMtrVis__container-isfull': { + minHeight: '100%', + minWidth: 'max-content', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + flex: '1 0 100%', + }, '&.legacyMtrVis__container-isfilterable': { cursor: 'pointer', transition: `transform ${euiTheme.animation.normal} ${euiTheme.animation.resistance}`, @@ -120,14 +129,5 @@ const styles = { transform: 'translate(0, -2px)', }, }, - '&.legacyMtrVis__container-isfull': { - minHeight: '100%', - minWidth: 'max-content', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - flex: '1 0 100%', - }, }), }; diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx index 9f881ee4095b7..42ae1197058f6 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -31,17 +31,6 @@ import { css } from '@emotion/react'; import { ExpressionLegacyMetricPluginStart } from '../plugin'; import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig, VisParams } from '../../common'; -const legacyMtrVisCss = css({ - height: '100%', - width: '100%', - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - flexWrap: 'wrap', - overflow: 'auto', -}); - // @ts-ignore const MetricVisComponent = lazy(() => import('../components/metric_component')); @@ -144,3 +133,14 @@ export const getMetricVisRenderer: ( ); }, }); + +const legacyMtrVisCss = css({ + height: '100%', + width: '100%', + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + flexWrap: 'wrap', + overflow: 'auto', +}); From 9415dd5e942d6f5b62621a92dbbbd09b92d949b4 Mon Sep 17 00:00:00 2001 From: Maria Iriarte Date: Thu, 13 Feb 2025 15:51:09 +0100 Subject: [PATCH 10/13] Fix import issue in metric_value --- .../public/components/metric_value.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index b1e913b530a7e..0b0ef5814503d 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -8,11 +8,10 @@ */ import React, { CSSProperties, useLayoutEffect } from 'react'; +import classNames from 'classnames'; import { i18n } from '@kbn/i18n'; -import { UseEuiTheme } from '@elastic/eui'; +import { UseEuiTheme, euiTextTruncate } from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiTextTruncate } from '@elastic/eui'; -import classNames from 'classnames'; import type { MetricOptions, MetricStyle, MetricVisParam } from '../../common/types'; interface MetricVisValueProps { From d25589a35d849e3303f4ccd775a4f7ed546f133f Mon Sep 17 00:00:00 2001 From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> Date: Mon, 17 Feb 2025 16:17:43 +0100 Subject: [PATCH 11/13] Update metric_vis_renderer.tsx the legacyMtrVis class is used for styling in observability app --- .../public/expression_renderers/metric_vis_renderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx index 42ae1197058f6..e086508040259 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -114,7 +114,7 @@ export const getMetricVisRenderer: ( Date: Mon, 17 Feb 2025 16:19:07 +0100 Subject: [PATCH 12/13] Update visualize_editor_page.ts do not use a class in the tests --- test/functional/page_objects/visualize_editor_page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts index 95ee763b7de11..b8391e298e140 100644 --- a/test/functional/page_objects/visualize_editor_page.ts +++ b/test/functional/page_objects/visualize_editor_page.ts @@ -504,7 +504,7 @@ export class VisualizeEditorPageObject extends FtrService { public async clickMetricByIndex(index: number) { const metrics = await this.find.allByCssSelector( - '[data-test-subj="visualizationLoader"] .legacyMtrVis .legacyMtrVis__container' + '[data-test-subj="visualizationLoader"] [data-test-subj="legacyMtrVis"] .legacyMtrVis__container' ); expect(metrics.length).greaterThan(index); await metrics[index].click(); From f677605716bd196e3c9802eaffa63d603fe95406 Mon Sep 17 00:00:00 2001 From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> Date: Tue, 18 Feb 2025 10:59:10 +0100 Subject: [PATCH 13/13] Update metric_value.tsx restore class used for styling via external --- .../expression_legacy_metric/public/components/metric_value.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index 0b0ef5814503d..e65d83f95794f 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -46,6 +46,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => { >