diff --git a/x-pack/platform/plugins/shared/ml/public/application/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/_index.scss index d3babbcc2f267..01e164e2c9d8c 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/_index.scss +++ b/x-pack/platform/plugins/shared/ml/public/application/_index.scss @@ -1,9 +1,6 @@ // Protect the rest of Kibana from ML generic namespacing // SASSTODO: Prefix ml selectors instead .ml-app { - // Sub applications - @import 'explorer/index'; // SASSTODO: This file needs to be rewritten - // Components @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly @import 'components/job_selector/index'; diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/_explorer.scss b/x-pack/platform/plugins/shared/ml/public/application/explorer/_explorer.scss deleted file mode 100644 index 5214624851945..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/_explorer.scss +++ /dev/null @@ -1,14 +0,0 @@ -.mlSwimLaneContainer { - /* Override legend styles */ - .echLegendListContainer { - height: 34px !important; - } - - .echLegendList { - display: flex !important; - justify-content: space-between !important; - flex-wrap: nowrap; - position: absolute; - right: 0; - } -} diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/explorer/_index.scss deleted file mode 100644 index 4afbcda2f616c..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'explorer'; -@import 'explorer_charts/index'; \ No newline at end of file diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_chart_info_tooltip.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_chart_info_tooltip.test.js.snap index b331c5e496c26..edaeb6008c31b 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_chart_info_tooltip.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_chart_info_tooltip.test.js.snap @@ -2,7 +2,15 @@ exports[`ExplorerChartTooltip Render tooltip based on infoTooltip data. 1`] = `
* { - margin-top: $euiSizeXS; -} - -.ml-explorer-chart-info-tooltip .mlDescriptionList { - display: grid; - grid-template-columns: max-content auto; - - .mlDescriptionList__title { - color: $euiColorGhost; - font-size: $euiFontSizeXS; - font-weight: normal; - white-space: nowrap; - grid-column-start: 1; - } - - .mlDescriptionList__description { - color: $euiColorGhost; - font-size: $euiFontSizeXS; - font-weight: bold; - padding-left: $euiSizeS; - max-width: 256px; - grid-column-start: 2; - } -} diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/_index.scss deleted file mode 100644 index 62ef4c05e1f7a..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'components/explorer_chart_label/index'; diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap index 3e30127f6eb98..8eeb075b1b0a2 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap @@ -2,12 +2,8 @@ exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = ` - - + + high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)  –  @@ -22,11 +18,8 @@ exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = ` />   - + } + css={ + Object { + "maxWidth": "none", + } + } position="top" size="s" /> @@ -52,20 +50,13 @@ exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = ` exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = ` - - + + high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)   - + } + css={ + Object { + "maxWidth": "none", + } + } position="top" size="s" /> + } position="top" size="s" @@ -77,10 +79,18 @@ export function ExplorerChartLabel({ ); + const { euiTheme } = useEuiTheme(); + + const badgesStyles = css({ + display: 'flex', + alignItems: 'center', + marginTop: euiTheme.size.xs, + }); + return ( <> - - + + {detectorLabel} {labelSeparator} @@ -91,7 +101,7 @@ export function ExplorerChartLabel({ )} - {wrapLabel && {entityFieldBadges}} + {wrapLabel && {entityFieldBadges}} ); } diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.js b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.js index 92cbed0865395..2d64513282a48 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.js +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.js @@ -5,13 +5,13 @@ * 2.0. */ -import './_explorer_chart_tooltip.scss'; import PropTypes from 'prop-types'; import React from 'react'; import { CHART_TYPE } from '../explorer_constants'; import { i18n } from '@kbn/i18n'; +import { useExplorerChartTooltipStyles } from './explorer_chart_tooltip_styles'; const CHART_DESCRIPTION = { [CHART_TYPE.EVENT_DISTRIBUTION]: i18n.translate( @@ -36,12 +36,18 @@ const CHART_DESCRIPTION = { import { EuiSpacer } from '@elastic/eui'; function TooltipDefinitionList({ toolTipData }) { + const { + title: titleStyle, + description: descriptionStyle, + descriptionList, + } = useExplorerChartTooltipStyles(); + return ( -
+
{toolTipData.map(({ title, description }) => ( -
{title}
-
{description}
+
{title}
+
{description}
 ))}
@@ -55,6 +61,8 @@ export const ExplorerChartInfoTooltip = ({ chartType, entityFields = [], }) => { + const { tooltip, chartDescription: chartDescriptionStyle } = useExplorerChartTooltipStyles(); + const chartDescription = CHART_DESCRIPTION[chartType]; const toolTipData = [ @@ -86,12 +94,12 @@ export const ExplorerChartInfoTooltip = ({ }); return ( -
+
{chartDescription && ( -
{chartDescription}
+
{chartDescription}
 )}
diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_tooltip_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_tooltip_styles.ts new file mode 100644 index 0000000000000..dceda53fbb12a --- /dev/null +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_tooltip_styles.ts @@ -0,0 +1,50 @@ +/* + * 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 { useEuiFontSize, useEuiTheme } from '@elastic/eui'; +import { useMemo } from 'react'; +import { css } from '@emotion/react'; + +export const useExplorerChartTooltipStyles = () => { + const { euiTheme } = useEuiTheme(); + const euiFontSizeXS = useEuiFontSize('xs').fontSize; + + return useMemo( + () => ({ + tooltip: css({ + maxWidth: '384px', + }), + descriptionList: css({ + display: 'grid', + gridTemplateColumns: 'max-content auto', + '& > *': { + marginTop: euiTheme.size.xs, + }, + }), + title: css({ + color: euiTheme.colors.ghost, + fontSize: euiFontSizeXS, + fontWeight: 'normal', + whiteSpace: 'nowrap', + gridColumnStart: 1, + }), + description: css({ + color: euiTheme.colors.ghost, + fontSize: euiFontSizeXS, + fontWeight: 'bold', + paddingLeft: euiTheme.size.s, + maxWidth: '256px', + gridColumnStart: 2, + }), + chartDescription: css({ + fontSize: euiFontSizeXS, + fontStyle: 'italic', + }), + }), + [euiFontSizeXS, euiTheme] + ); +}; diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_charts_container.js b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_charts_container.js index 2f8a2cbbfcc09..a9baf5dbd60d8 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_charts_container.js +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_charts_container.js @@ -4,8 +4,6 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import './_index.scss'; - import React, { useEffect, useState, useCallback, useRef } from 'react'; import { diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/swimlane_container.tsx b/x-pack/platform/plugins/shared/ml/public/application/explorer/swimlane_container.tsx index 4b4ffbe7ff37a..7fc776502d1bc 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/swimlane_container.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/swimlane_container.tsx @@ -54,7 +54,6 @@ import type { SwimlaneType } from './explorer_constants'; import { SWIMLANE_TYPE } from './explorer_constants'; import { mlEscape } from '../util/string_utils'; import { FormattedTooltip } from '../components/chart_tooltip/chart_tooltip'; -import './_explorer.scss'; import { EMPTY_FIELD_VALUE_LABEL } from '../timeseriesexplorer/components/entity_control/entity_control'; import { SWIM_LANE_LABEL_WIDTH, Y_AXIS_LABEL_PADDING } from './constants'; @@ -418,7 +417,18 @@ export const SwimlaneContainer: FC = ({ if (noSwimLaneData) { onRenderComplete?.(); } - + const swimlaneStyles = css({ + '.echLegendListContainer': { + height: '34px !important', + }, + '.echLegendList': { + display: 'flex !important', + justifyContent: 'space-between !important', + flexWrap: 'nowrap', + position: 'absolute', + right: 0, + }, + }); // A resize observer is required to compute the bucket span based on the chart width to fetch the data accordingly return ( @@ -452,86 +462,91 @@ export const SwimlaneContainer: FC = ({ hidden={noSwimLaneData} > {showSwimlane && !isLoading && ( - - - { - if (isRendered && onRenderComplete) { - onRenderComplete(); - } - }} - /> - - + + + { + if (isRendered && onRenderComplete) { + onRenderComplete(); + } + }} + /> + + { - return laneLabel === '' ? EMPTY_FIELD_VALUE_LABEL : String(laneLabel); - }} - xAxisLabelFormatter={(v) => { - timeBuckets.setInterval(`${swimlaneData.interval}s`); - const scaledDateFormat = timeBuckets.getScaledDateFormat(); - return moment(v).format(scaledDateFormat); - }} - /> - + }} + ySortPredicate="dataIndex" + yAxisLabelFormatter={(laneLabel) => { + return laneLabel === '' ? EMPTY_FIELD_VALUE_LABEL : String(laneLabel); + }} + xAxisLabelFormatter={(v) => { + timeBuckets.setInterval(`${swimlaneData.interval}s`); + const scaledDateFormat = timeBuckets.getScaledDateFormat(); + return moment(v).format(scaledDateFormat); + }} + /> + +
)} {isLoading && ( diff --git a/x-pack/test/functional/services/ml/anomaly_explorer.ts b/x-pack/test/functional/services/ml/anomaly_explorer.ts index 6774bd097f001..7f9cc1a7e7b03 100644 --- a/x-pack/test/functional/services/ml/anomaly_explorer.ts +++ b/x-pack/test/functional/services/ml/anomaly_explorer.ts @@ -160,7 +160,7 @@ export function MachineLearningAnomalyExplorerProvider( }); // changing to the dashboard app might take some time const embeddable = await testSubjects.find('mlAnomalySwimlaneEmbeddableWrapper', 30 * 1000); - const swimlane = await embeddable.findByClassName('mlSwimLaneContainer'); + const swimlane = await embeddable.findByTestSubject('mlSwimLaneContainer'); expect(await swimlane.isDisplayed()).to.eql( true, 'Anomaly swim lane should be displayed in dashboard'