From 2c10becc76feafea06389fc4fa2c6544b1983ab1 Mon Sep 17 00:00:00 2001 From: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com> Date: Mon, 7 Apr 2025 16:23:17 +0200 Subject: [PATCH] [ML] Replace legacy SCSS overwrites (#216698) Part of https://github.com/elastic/kibana/issues/140695 This PR replaces all remaining SCSS overrides in ML. > ml/public/application/_index.scss > ./job_selector/_index.scss > ./job_selector/_job_selector.scss > ./rule_editor/_index.scss > ./rule_editor/_rule_editor.scss > ./anomalies_table/_index.scss > ./anomalies_table/_anomalies_table.scss > data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart.scss > data_visualizer/public/application/common/components/field_type_icon/_index.scss > data_visualizer/public/application/common/components/field_type_icon/_field_type_icon.scss > x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.scss There are minor color changes in the `dual brush` and `GanttBar` in the Job Selector. | Before | After | | ------------- | ------------- | | dual-brush-before-light | dual-brush-after-light | | dual-brush-before-dark | dual-brush-after-dark | | job_selector_before_light | job_selector_after_light | | job_selector_before_dark | job_selector_after_dark | | role_editor_before_light | rule_editor_after_light | | role_editor_before_dark | rule_editor_after_dark | | quick_role_editor_before_light | quick_role_editor_after_light | | quick_role_editor_before_dark | quick_role_editor_after_dark | | discover_vis_before_light | discover-vis-after-light | | discover-vis-before-dark | discover-viz-after-dark | | anomalies_table_before_light | anomalies_table_after_light | | anomalies_table_before_dark | anomalies_table_after_dark | | category_examples_before | category_examples_after | (cherry picked from commit 9f932a099b3b7202931aa59ec390a57642c4ad16) --- .../src/dual_brush/dual_brush.scss | 11 --- .../src/dual_brush/dual_brush.tsx | 21 ++++- .../field_type_icon/_field_type_icon.scss | 4 - .../components/field_type_icon/_index.scss | 1 - .../field_type_icon/field_type_icon.tsx | 8 +- .../field_data_row/column_chart.scss | 33 -------- .../field_data_row/column_chart.tsx | 12 +-- .../field_data_row/column_chart_styles.ts | 42 ++++++++++ .../field_data_row/number_content_preview.tsx | 15 ++-- .../field_data_row/use_column_chart.test.tsx | 36 +++++++-- .../field_data_row/use_column_chart.tsx | 12 ++- .../metric_distribution_chart.tsx | 8 +- .../shared/ml/public/application/_index.scss | 9 --- .../shared/ml/public/application/app.tsx | 1 - .../anomalies_table/_anomalies_table.scss | 56 ------------- .../components/anomalies_table/_index.scss | 1 - .../anomalies_table/anomalies_table.tsx | 2 +- .../anomalies_table_columns.js | 14 +++- .../anomalies_table/anomaly_details.tsx | 46 ++++++++--- .../anomalies_table/detector_cell.js | 10 ++- .../severity_cell/severity_cell.tsx | 4 +- .../components/job_selector/_index.scss | 1 - .../job_selector/_job_selector.scss | 35 -------- .../components/job_selector/job_selector.tsx | 1 - .../job_selector/job_selector_flyout.tsx | 2 +- .../timerange_bar/timerange_bar.js | 16 ++-- .../timerange_bar/timerange_bar.test.js | 10 +-- .../timerange_bar/timerange_bar_styles.ts | 44 ++++++++++ .../rule_editor_flyout.test.js.snap | 7 -- .../scope_expression.test.js.snap | 32 ++++++-- .../components/rule_editor/_index.scss | 1 - .../components/rule_editor/_rule_editor.scss | 81 ------------------- .../rule_editor/rule_editor_flyout.js | 8 +- .../rule_editor/scope_expression.js | 8 +- .../edit_condition_link.test.js.snap | 3 - .../select_rule_action/edit_condition_link.js | 2 +- .../select_rule_action/rule_action_panel.js | 2 +- 37 files changed, 265 insertions(+), 334 deletions(-) delete mode 100644 x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.scss delete mode 100644 x-pack/platform/plugins/private/data_visualizer/public/application/common/components/field_type_icon/_field_type_icon.scss delete mode 100644 x-pack/platform/plugins/private/data_visualizer/public/application/common/components/field_type_icon/_index.scss delete mode 100644 x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart.scss create mode 100644 x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart_styles.ts delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/_index.scss delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/_anomalies_table.scss delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/_index.scss delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/job_selector/_index.scss delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/job_selector/_job_selector.scss create mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar_styles.ts delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_index.scss delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_rule_editor.scss diff --git a/x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.scss b/x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.scss deleted file mode 100644 index a97dec29ecd62..0000000000000 --- a/x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.scss +++ /dev/null @@ -1,11 +0,0 @@ -.aiops-dual-brush { - .handle { - fill: $euiColorDarkShade; - } - - .brush .selection { - stroke: none; - fill: $euiColorDarkShade !important; - opacity: .5 !important; - } -} diff --git a/x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.tsx b/x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.tsx index 932f509e164de..c10ad9b0ff9b3 100644 --- a/x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.tsx +++ b/x-pack/platform/packages/private/ml/aiops_components/src/dual_brush/dual_brush.tsx @@ -8,7 +8,7 @@ import { isEqual } from 'lodash'; import React, { useEffect, useMemo, useRef, type FC } from 'react'; -import { htmlIdGenerator } from '@elastic/eui'; +import { htmlIdGenerator, useEuiTheme } from '@elastic/eui'; import * as d3Brush from 'd3-brush'; import * as d3Scale from 'd3-scale'; @@ -18,7 +18,7 @@ import * as d3Transition from 'd3-transition'; import { getSnappedWindowParameters } from '@kbn/aiops-log-rate-analysis'; import type { WindowParameters } from '@kbn/aiops-log-rate-analysis'; -import './dual_brush.scss'; +import { css } from '@emotion/react'; const { brush, brushSelection, brushX } = d3Brush; const { scaleLinear } = d3Scale; @@ -113,6 +113,7 @@ export const DualBrush: FC = (props) => { width, nonInteractive, } = props; + const { euiTheme } = useEuiTheme(); const d3BrushContainer = useRef(null); const brushes = useRef([]); @@ -130,6 +131,20 @@ export const DualBrush: FC = (props) => { const { baselineMin, baselineMax, deviationMin, deviationMax } = windowParameters; + const cssOverrides = useMemo( + () => + css({ + '.handle': { + fill: euiTheme.colors.vis.euiColorVisGrey2, + }, + '.brush .selection': { + stroke: 'none', + fill: euiTheme.colors.vis.euiColorVisGrey2, + }, + }), + [euiTheme.colors.vis.euiColorVisGrey2] + ); + useEffect(() => { if (d3BrushContainer.current && width > 0) { const gBrushes = d3.select(d3BrushContainer.current); @@ -380,7 +395,7 @@ export const DualBrush: FC = (props) => { <> {width > 0 && ( = ({ tooltipEnabled = false, if (tooltipEnabled === true) { return ( = ({ isNumeric, }) => { const { data, legendText } = useColumnChart(chartData, columnType, maxChartColumns, isNumeric); + const styles = useColumnChartStyles(); return (
@@ -83,12 +82,7 @@ export const ColumnChart: FC = ({ /> )} -
+
{legendText}
{!hideLabel &&
{columnType.id}
} diff --git a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart_styles.ts b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart_styles.ts new file mode 100644 index 0000000000000..649b7f55ce60f --- /dev/null +++ b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart_styles.ts @@ -0,0 +1,42 @@ +/* + * 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 { useEuiTheme, useEuiFontSize, euiTextTruncate } from '@elastic/eui'; +import { css } from '@emotion/react'; + +export const useColumnChartStyles = () => { + const { euiTheme } = useEuiTheme(); + const { fontSize: euiFontSizeL } = useEuiFontSize('l'); + + return { + histogram: css({ + width: '100%', + }), + legend: css` + ${euiTextTruncate()}; + color: ${euiTheme.colors.textSubdued}; + display: block; + overflow-x: hidden; + font-style: italic; + font-weight: ${euiTheme.font.weight.regular}; + text-align: left; + line-height: 1.1; + font-size: calc(${euiFontSizeL} / 2); + `, + legendNumeric: css({ + textAlign: 'right', + }), + legendBoolean: css` + width: calc(${euiTheme.size.xs} * 2.5); + `, + dataGridHeader: css({ + '.euiDataGridHeaderCell__content': { + marginTop: 'auto', + }, + }), + }; +}; diff --git a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/number_content_preview.tsx b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/number_content_preview.tsx index 744e838bfeabb..5513613bb1702 100644 --- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/number_content_preview.tsx +++ b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/number_content_preview.tsx @@ -11,6 +11,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { MetricDistributionChart, buildChartDataFromStats } from '../metric_distribution_chart'; import type { FieldVisConfig } from '../../types'; import { kibanaFieldFormat, formatSingleValue } from '../../../utils'; +import { useColumnChartStyles } from './column_chart_styles'; const METRIC_DISTRIBUTION_CHART_WIDTH = 100; const METRIC_DISTRIBUTION_CHART_HEIGHT = 10; @@ -20,6 +21,7 @@ export interface NumberContentPreviewProps { } export const IndexBasedNumberContentPreview: FC = ({ config }) => { + const styles = useColumnChartStyles(); const { stats, fieldFormat, fieldName } = config; const dataTestSubj = `dataVisualizerDataGridChart-${fieldName}`; @@ -43,7 +45,7 @@ export const IndexBasedNumberContentPreview: FC = ({ return (
-
+
= ({ hideXAxis={true} />
-
+
{legendText && ( <> = ({ responsive={false} gutterSize="m" > - + {kibanaFieldFormat(legendText.min, fieldFormat)} - - {kibanaFieldFormat(legendText.max, fieldFormat)} - + {kibanaFieldFormat(legendText.max, fieldFormat)} )} diff --git a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.test.tsx b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.test.tsx index 55346af2b49ca..105b374f64e50 100644 --- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.test.tsx +++ b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.test.tsx @@ -14,6 +14,9 @@ import type { NumericChartData, OrdinalChartData, UnsupportedChartData } from '@ import { isNumericChartData, isOrdinalChartData, isUnsupportedChartData } from '@kbn/ml-data-grid'; import { getFieldType, getLegendText, getXScaleType, useColumnChart } from './use_column_chart'; +import type { useColumnChartStyles } from './column_chart_styles'; + +const styles = {} as ReturnType; describe('getFieldType()', () => { it('should return the Kibana field type for a given EUI data grid schema', () => { @@ -95,10 +98,12 @@ describe('isUnsupportedChartData()', () => { describe('getLegendText()', () => { it('should return the chart legend text for unsupported chart types', () => { - expect(getLegendText(validUnsupportedChartData, 20)).toBe('Chart not supported.'); + expect(getLegendText(validUnsupportedChartData, 20, false, styles)).toBe( + 'Chart not supported.' + ); }); it('should return the chart legend text for empty datasets', () => { - expect(getLegendText(validNumericChartData, 20)).toBe(''); + expect(getLegendText(validNumericChartData, 20, false, styles)).toBe(''); }); it('should return the chart legend text for boolean chart types', () => { const { getByText } = render( @@ -113,7 +118,9 @@ describe('getLegendText()', () => { id: 'the-id', type: 'boolean', }, - 20 + 20, + false, + styles )} ); @@ -122,7 +129,12 @@ describe('getLegendText()', () => { }); it('should return the chart legend text for ordinal chart data with less than max categories', () => { expect( - getLegendText({ ...validOrdinalChartData, data: [{ key: 'cat', doc_count: 10 }] }, 20) + getLegendText( + { ...validOrdinalChartData, data: [{ key: 'cat', doc_count: 10 }] }, + 20, + false, + styles + ) ).toBe('10 categories'); }); it('should return the chart legend text for ordinal chart data with more than max categories', () => { @@ -133,7 +145,9 @@ describe('getLegendText()', () => { cardinality: 30, data: [{ key: 'cat', doc_count: 10 }], }, - 20 + 20, + false, + styles ) ).toBe('top 20 of 30 categories'); }); @@ -145,7 +159,9 @@ describe('getLegendText()', () => { data: [{ key: 1, doc_count: 10 }], stats: [1, 100], }, - 20 + 20, + false, + styles ) ).toBe('1 - 100'); expect( @@ -155,7 +171,9 @@ describe('getLegendText()', () => { data: [{ key: 1, doc_count: 10 }], stats: [100, 100], }, - 20 + 20, + false, + styles ) ).toBe('100'); expect( @@ -165,7 +183,9 @@ describe('getLegendText()', () => { data: [{ key: 1, doc_count: 10 }], stats: [1.2345, 6.3456], }, - 20 + 20, + false, + styles ) ).toBe('1.23 - 6.35'); }); diff --git a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.tsx b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.tsx index c2662d3abf986..5abd7a4c23f1d 100644 --- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.tsx +++ b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/use_column_chart.tsx @@ -24,6 +24,7 @@ import { type NumericDataItem, type OrdinalDataItem, } from '@kbn/ml-data-grid'; +import { useColumnChartStyles } from './column_chart_styles'; const NON_AGGREGATABLE = 'non-aggregatable'; @@ -77,7 +78,8 @@ type LegendText = string | JSX.Element; export const getLegendText = ( chartData: ChartData, maxChartColumns: number, - isNumeric = false + isNumeric = false, + styles: ReturnType ): LegendText => { if (chartData.type === 'unsupported') { return i18n.translate('xpack.dataVisualizer.dataGridChart.histogramNotAvailable', { @@ -95,12 +97,12 @@ export const getLegendText = ( {chartData.data[0] !== undefined && ( - + {chartData.data[0].key_as_string?.slice(0, 1) ?? ''} )} {chartData.data[1] !== undefined && ( - + {chartData.data[1].key_as_string?.slice(0, 1) ?? ''} )} @@ -163,6 +165,8 @@ export const useColumnChart = ( const xScaleType = getXScaleType(fieldType); + const styles = useColumnChartStyles(); + const getColor = (d: ChartDataItem) => { if (hoveredRow === undefined || hoveredRow === null) { return BAR_COLOR; @@ -219,7 +223,7 @@ export const useColumnChart = ( return { data, - legendText: getLegendText(chartData, maxChartColumns, isNumeric), + legendText: getLegendText(chartData, maxChartColumns, isNumeric, styles), xScaleType, }; }; diff --git a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx index f760bd054b7aa..903e84f47b0bf 100644 --- a/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx +++ b/x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx @@ -26,6 +26,7 @@ import { import { MetricDistributionChartTooltipHeader } from './metric_distribution_chart_tooltip_header'; import { kibanaFieldFormat } from '../../../utils'; import { useDataVizChartTheme } from '../../hooks'; +import { useColumnChartStyles } from '../field_data_row/column_chart_styles'; export interface MetricDistributionChartData { x: number; @@ -64,6 +65,8 @@ export const MetricDistributionChart: FC = ({ const theme = useDataVizChartTheme(); + const styles = useColumnChartStyles(); + const headerFormatter: TooltipHeaderFormatter = (tooltipData) => { const xValue = tooltipData.value; const chartPoint: MetricDistributionChartData | undefined = chartData.find( @@ -80,10 +83,7 @@ export const MetricDistributionChart: FC = ({ }; return ( -
+
= React.memo( unsetShowFunction={handleUnsetShowFunction} /> >} diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomalies_table_columns.js b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomalies_table_columns.js index b0c0e9472c16f..eb5ca0a214590 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomalies_table_columns.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomalies_table_columns.js @@ -318,12 +318,22 @@ export function getColumns( const examples = get(examplesByJobId, [item.jobId, item.entityValue], []); return ( toggleRow(item, ANOMALIES_TABLE_TABS.CATEGORY_EXAMPLES)} > {examples.map((example, i) => { return ( - + {example} ); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomaly_details.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomaly_details.tsx index 67da37de7480f..b5cb20ef9b06a 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomaly_details.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomaly_details.tsx @@ -122,20 +122,23 @@ const Contents: FC<{ filter?: EntityCellFilter; influencerFilter?: EntityCellFilter; }> = ({ anomaly, isAggregatedData, filter, influencersLimit, influencerFilter, job }) => { - const { - euiTheme: { colors }, - } = useEuiTheme(); + const { euiTheme } = useEuiTheme(); const dividerStyle = useMemo(() => { return isPopulatedObject(anomaly.source.anomaly_score_explanation) - ? { borderRight: `1px solid ${colors.lightShade}` } + ? { borderRight: `1px solid ${euiTheme.colors.lightShade}` } : {}; - }, [colors, anomaly]); + }, [euiTheme.colors, anomaly]); return ( -
+
@@ -210,7 +213,11 @@ const Details: FC<{ {isInterimResult === true && ( <> - + { + const { euiTheme } = useEuiTheme(); return ( {definition !== undefined && definition.terms && ( <> -

+

{i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.termsTitle', { defaultMessage: 'Terms', })} @@ -352,7 +366,11 @@ const CategoryExamples: FC<{ definition?: CategoryDefinition; examples: string[] <> -

+

{i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.regexTitle', { defaultMessage: 'Regex', })} @@ -396,7 +414,13 @@ const CategoryExamples: FC<{ definition?: CategoryDefinition; examples: string[]

)} - {example} + + {example} + ); })} diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/detector_cell.js b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/detector_cell.js index 1ef9f8724f86e..2401216460ce9 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/detector_cell.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/detector_cell.js @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { EuiIcon, EuiToolTip } from '@elastic/eui'; +import { EuiIcon, EuiToolTip, useEuiTheme } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; /* @@ -16,6 +16,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; * description of the detector, and an icon if rules have been configured for the detector. */ export function DetectorCell({ detectorDescription, numberOfRules }) { + const { euiTheme } = useEuiTheme(); let rulesIcon; if (numberOfRules !== undefined && numberOfRules > 0) { rulesIcon = ( @@ -27,7 +28,12 @@ export function DetectorCell({ detectorDescription, numberOfRules }) { /> } > - + ); } diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/severity_cell/severity_cell.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/severity_cell/severity_cell.tsx index 3d1be614bf04e..af526e90259f1 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/severity_cell/severity_cell.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/severity_cell/severity_cell.tsx @@ -41,6 +41,8 @@ export const SeverityCell: FC = memo(({ score, isMultiBucketA {severity} ) : ( - {severity} + + {severity} + ); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/_index.scss deleted file mode 100644 index b8c64ab8cda67..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'job_selector'; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/_job_selector.scss b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/_job_selector.scss deleted file mode 100644 index fdd10b847c4e1..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/_job_selector.scss +++ /dev/null @@ -1,35 +0,0 @@ -.mlJobSelectorFlyoutBody>.euiFlyoutBody__overflow { - padding-top: $euiSizeS; -} - -.mlJobSelector__ganttBar { - background-color: #79ADDA; - height: $euiSizeM; - border-radius: 2px; -} - -.mlJobSelector__ganttBarBackEdge { - height: $euiSize; - border-left: 1px solid #D6D6D6; - border-right: 1px solid #D6D6D6; - margin-bottom: -14px; - padding-top: $euiSizeS; -} - -.mlJobSelector__ganttBarDashed { - height: 1px; - border-top: 1px dashed #D6D6D6; -} - -.mlJobSelector__ganttBarRunning { - background-image: linear-gradient(45deg, - rgba(255, 255, 255, .15) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, .15) 50%, - rgba(255, 255, 255, .15) 75%, - transparent 75%, - transparent); - background-size: $euiSizeXXL $euiSizeXXL; - animation: progress-bar-stripes 2s linear infinite; -} diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector.tsx index fd26e2baa2fab..322b71be20229 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector.tsx @@ -10,7 +10,6 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react'; import { EuiButtonEmpty, EuiFlexItem, EuiFlexGroup, EuiHorizontalRule } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import './_index.scss'; import { ML_PAGES } from '../../../locator'; import type { Dictionary } from '../../../../common/types/common'; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector_flyout.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector_flyout.tsx index 0fec01c82c0a1..d978c5078d0ac 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector_flyout.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector_flyout.tsx @@ -202,7 +202,7 @@ export const JobSelectorFlyoutContent: FC = ({ - + {(resizeRef) => (
-
-
+
+
-
+
); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar.test.js index e40e2ba58a642..bac93fc658392 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar.test.js @@ -18,17 +18,15 @@ describe('TimeRangeBar', () => { test('Renders gantt bar when isRunning is false', () => { const wrapper = mount(); - const ganttBar = wrapper.find('.mlJobSelector__ganttBar'); + const ganttBar = wrapper.find('[data-test-subj="mlJobSelectorGanttBar"]'); - expect( - ganttBar.containsMatchingElement(
) - ).toBeTruthy(); + expect(ganttBar).toHaveLength(1); }); test('Renders running animation bar when isRunning is true', () => { const wrapper = mount(); - const runningBar = wrapper.find('.mlJobSelector__ganttBarRunning'); + const runningBar = wrapper.find('[data-test-subj="mlJobSelectorGanttBarRunning"]'); - expect(runningBar.length).toEqual(1); + expect(runningBar).toHaveLength(1); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar_styles.ts new file mode 100644 index 0000000000000..41f5989023adf --- /dev/null +++ b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar_styles.ts @@ -0,0 +1,44 @@ +/* + * 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 { useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; + +export const useTimerangeBarStyles = () => { + const { euiTheme } = useEuiTheme(); + + return { + ganttBar: css({ + backgroundColor: euiTheme.colors.vis.euiColorVis2, + height: euiTheme.size.m, + borderRadius: '2px', + }), + ganttBarBackEdge: css({ + height: euiTheme.size.base, + borderLeft: `1px solid ${euiTheme.colors.borderBasePlain}`, + borderRight: `1px solid ${euiTheme.colors.borderBasePlain}`, + marginBottom: '-14px', + paddingTop: euiTheme.size.s, + }), + ganttBarDashed: css({ + height: '1px', + borderTop: `1px dashed ${euiTheme.colors.borderBasePlain}`, + }), + ganttBarRunning: css({ + backgroundImage: `linear-gradient(45deg, + rgba(255, 255, 255, .15) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, .15) 50%, + rgba(255, 255, 255, .15) 75%, + transparent 75%, + transparent)`, + backgroundSize: `${euiTheme.size.xxl} ${euiTheme.size.xxl}`, + animation: 'progress-bar-stripes 2s linear infinite', + }), + }; +}; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap index d36d1c2b6a5c8..d3dce871eb9ed 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap @@ -8,7 +8,6 @@ exports[`RuleEditorFlyout renders the flyout after adding a condition to a rule @@ -143,7 +142,6 @@ exports[`RuleEditorFlyout renders the flyout after adding a condition to a rule /> @@ -392,7 +389,6 @@ exports[`RuleEditorFlyout renders the flyout after setting the rule to edit 1`] /> @@ -627,7 +622,6 @@ exports[`RuleEditorFlyout renders the flyout for creating a rule with conditions /> +

@@ -571,7 +567,6 @@ class RuleEditorFlyoutUI extends Component { flyout = ( @@ -648,7 +643,6 @@ class RuleEditorFlyoutUI extends Component { {conditionSupported === true ? ( - + + event.preventDefault()} /> diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/edit_condition_link.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/edit_condition_link.test.js.snap index 22f1e1e059043..e3add7cfbb44e 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/edit_condition_link.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/edit_condition_link.test.js.snap @@ -23,7 +23,6 @@ exports[`EditConditionLink renders for a condition using actual 1`] = ` - + +