diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json index 09d029aadf792..6dd8c1ea5403d 100644 --- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json +++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json @@ -25871,10 +25871,8 @@ "xpack.ml.anomaliesTable.hideDetailsAriaLabel": "Masquer les détails", "xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel": "Ajouter un filtre", "xpack.ml.anomaliesTable.influencersCell.addFilterTooltip": "Ajouter un filtre", - "xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText": "et {othersCount} de plus", "xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel": "Supprimer le filtre", "xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip": "Supprimer le filtre", - "xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText": "afficher moins", "xpack.ml.anomaliesTable.influencersColumnName": "Influencé par", "xpack.ml.anomaliesTable.jobIdColumnName": "ID tâche", "xpack.ml.anomaliesTable.linksMenu.autoGeneratedDiscoverLinkErrorMessage": "Liaison avec Discover impossible ; aucune vue de données n’existe pour le modèle d'index \"{index}\"", diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json index 6651f416d039d..edd19f7ca95ce 100644 --- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json +++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json @@ -25737,10 +25737,8 @@ "xpack.ml.anomaliesTable.hideDetailsAriaLabel": "詳細を非表示", "xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel": "フィルターを追加します", "xpack.ml.anomaliesTable.influencersCell.addFilterTooltip": "フィルターを追加します", - "xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText": "他 {othersCount} 件", "xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel": "フィルターを削除", "xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip": "フィルターを削除", - "xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText": "縮小表示", "xpack.ml.anomaliesTable.influencersColumnName": "影響因子：", "xpack.ml.anomaliesTable.jobIdColumnName": "ジョブID", "xpack.ml.anomaliesTable.linksMenu.autoGeneratedDiscoverLinkErrorMessage": "Discoverにリンクできません。インデックスパターン''{index}''のデータビューが存在しません", diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json index 4c944837ad693..8bf71b752bb03 100644 --- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json +++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json @@ -25301,10 +25301,8 @@ "xpack.ml.anomaliesTable.hideDetailsAriaLabel": "隐藏详情", "xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel": "添加筛选", "xpack.ml.anomaliesTable.influencersCell.addFilterTooltip": "添加筛选", - "xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText": "及另外 {othersCount} 个", "xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel": "移除筛选", "xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip": "移除筛选", - "xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText": "显示更少", "xpack.ml.anomaliesTable.influencersColumnName": "影响因素", "xpack.ml.anomaliesTable.jobIdColumnName": "作业 ID", "xpack.ml.anomaliesTable.linksMenu.configureRulesLabel": "配置作业规则", 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 66b04a8ff0e78..d3babbcc2f267 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/_index.scss +++ b/x-pack/platform/plugins/shared/ml/public/application/_index.scss @@ -5,9 +5,7 @@ @import 'explorer/index'; // SASSTODO: This file needs to be rewritten // Components - @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/job_selector/index'; @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap index 98026a92071b9..af099b8be528d 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap @@ -2,7 +2,6 @@ exports[`AnnotationDescriptionList Initialization with annotation. 1`] = ` ( -
- {influencer.influencerFieldName}: {influencer.influencerFieldValue} - {influencerFilter !== undefined && ( - - - } - > - { - influencerFilter( - influencer.influencerFieldName, - influencer.influencerFieldValue, - '+' - ); - })} - iconType="plusInCircle" - aria-label={i18n.translate( - 'xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel', - { - defaultMessage: 'Add filter', - } - )} - /> - - - } - > - { - influencerFilter( - influencer.influencerFieldName, - influencer.influencerFieldValue, - '-' - ); - })} - iconType="minusInCircle" - aria-label={i18n.translate( - 'xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel', - { - defaultMessage: 'Remove filter', - } - )} - /> - - - )} -
- )); - - return ( - - {displayRows} - {this.renderOthers(influencers.length, othersCount)} - - ); - } - - renderOthers(totalCount, othersCount) { - if (othersCount > 0) { - return ( -
- this.toggleAllInfluencers()}> - - -
- ); - } else if (totalCount > this.props.limit + 1) { - return ( -
- this.toggleAllInfluencers()}> - - -
- ); - } - } - - render() { - const recordInfluencers = this.props.influencers || []; - - const influencers = []; - recordInfluencers.forEach((influencer) => { - each(influencer, (influencerFieldValue, influencerFieldName) => { - influencers.push({ - influencerFieldName, - influencerFieldValue, - }); - }); - }); - - return ( -
- {this.renderInfluencers(influencers)} - {this.renderOthers(influencers)} -
- ); - } -} - -InfluencersCell.propTypes = { - influencerFilter: PropTypes.func, - influencers: PropTypes.array, - limit: PropTypes.number, -}; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.tsx new file mode 100644 index 0000000000000..f07d3c5248a87 --- /dev/null +++ b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.tsx @@ -0,0 +1,157 @@ +/* + * 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 type { FC } from 'react'; +import React, { useState } from 'react'; + +import { EuiLink, EuiButtonIcon, EuiToolTip } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { i18n } from '@kbn/i18n'; +import { useEntityCellStyles } from '../entity_cell/entity_cell_styles'; +import { blurButtonOnClick } from '../../util/component_utils'; + +type InfluencerCellFilter = ( + influencerFieldName: string, + influencerFieldValue: string, + direction: '+' | '-' +) => void; + +interface Influencer { + influencerFieldName: string; + influencerFieldValue: string; +} + +interface InfluencerCellProps { + influencerFilter: InfluencerCellFilter | undefined; + influencers: Influencer[] | undefined; + limit: number; +} + +/* + * Component for rendering a list of record influencers inside a cell in the anomalies table. + * Truncates long lists of influencers to the supplied limit, with the full list of influencers + * expanded or collapsed via 'and x more' / 'show less' links. + */ +export const InfluencersCell: FC = ({ + influencers = [], + influencerFilter, + limit, +}) => { + const { filterButton } = useEntityCellStyles(); + + const [showAllInfluencers, setShowAllInfluencers] = useState(false); + const toggleAllInfluencers = () => setShowAllInfluencers((prev) => !prev); + + let numberToDisplay = showAllInfluencers === false ? limit : influencers.length; + let othersCount = 0; + if (influencers !== undefined) { + othersCount = Math.max(influencers.length - numberToDisplay, 0); + } + if (othersCount === 1) { + // Display the additional influencer. + numberToDisplay++; + othersCount = 0; + } + + const displayInfluencers = influencers + .reduce((acc, influencer) => { + const [influencerFieldName, influencerFieldValue] = Object.entries(influencer)[0] ?? []; + if (typeof influencerFieldName === 'string' && typeof influencerFieldValue === 'string') { + acc.push({ + influencerFieldName, + influencerFieldValue, + }); + } + return acc; + }, []) + .slice(0, numberToDisplay); + + return ( +
+ {displayInfluencers.map((influencer, index) => ( +
+ {influencer.influencerFieldName}: {influencer.influencerFieldValue} + {influencerFilter !== undefined && ( + <> + + } + > + { + influencerFilter( + influencer.influencerFieldName, + influencer.influencerFieldValue, + '+' + ); + })} + iconType="plusInCircle" + aria-label={i18n.translate( + 'xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel', + { + defaultMessage: 'Add filter', + } + )} + /> + + + } + > + { + influencerFilter( + influencer.influencerFieldName, + influencer.influencerFieldValue, + '-' + ); + })} + iconType="minusInCircle" + aria-label={i18n.translate( + 'xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel', + { + defaultMessage: 'Remove filter', + } + )} + /> + + + )} +
+ ))} + {othersCount > 0 && ( + toggleAllInfluencers()}> + + + )} + {numberToDisplay > limit + 1 && ( + toggleAllInfluencers()}> + + + )} +
+ ); +}; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/_index.scss deleted file mode 100644 index 04497c63a4642..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'entity_cell'; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.scss b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.scss deleted file mode 100644 index fc9cf14910138..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.scss +++ /dev/null @@ -1,26 +0,0 @@ -.field-value-short { - @include euiTextTruncate; - display: inline-block; - vertical-align: bottom; -} - -.field-value-long { - overflow-wrap: break-word; -} - -.filter-button { - opacity: .5; - width: $euiSize; - height: $euiSize; - -webkit-transform: translateY(-1px); - transform: translateY(-1px); - - .euiIcon { - width: $euiFontSizeXS; - height: $euiFontSizeXS; - } -} - -.filter-button:hover { - opacity: 1; -} diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.tsx index 19948cdb074eb..a33c7a1147eb0 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.tsx @@ -12,6 +12,7 @@ import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@ import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; import { ML_ENTITY_FIELD_OPERATIONS, MLCATEGORY } from '@kbn/ml-anomaly-utils'; +import { useEntityCellStyles } from './entity_cell_styles'; import { EMPTY_FIELD_VALUE_LABEL } from '../../timeseriesexplorer/components/entity_control/entity_control'; import { blurButtonOnClick } from '../../util/component_utils'; @@ -28,61 +29,69 @@ interface EntityCellProps { wrapText?: boolean; } -function getAddFilter({ entityName, entityValue, filter }: EntityCellProps) { - if (filter !== undefined) { - return ( - - } - > - { - filter(entityName, entityValue, ML_ENTITY_FIELD_OPERATIONS.ADD); - })} - iconType="plusInCircle" - aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.addFilterAriaLabel', { - defaultMessage: 'Add filter', - })} - /> - - ); +const AddFilter: FC = ({ entityName, entityValue, filter }) => { + const { filterButton } = useEntityCellStyles(); + + if (filter === undefined) { + return null; } -} -function getRemoveFilter({ entityName, entityValue, filter }: EntityCellProps) { - if (filter !== undefined) { - return ( - - } - > - { - filter(entityName, entityValue, ML_ENTITY_FIELD_OPERATIONS.REMOVE); - })} - iconType="minusInCircle" - aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.removeFilterAriaLabel', { - defaultMessage: 'Remove filter', - })} + return ( + - - ); + } + > + { + filter(entityName, entityValue, ML_ENTITY_FIELD_OPERATIONS.ADD); + })} + iconType="plusInCircle" + aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.addFilterAriaLabel', { + defaultMessage: 'Add filter', + })} + /> + + ); +}; + +const RemoveFilter: FC = ({ entityName, entityValue, filter }) => { + const { filterButton } = useEntityCellStyles(); + + if (filter === undefined) { + return null; } -} + + return ( + + } + > + { + filter(entityName, entityValue, ML_ENTITY_FIELD_OPERATIONS.REMOVE); + })} + iconType="minusInCircle" + aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.removeFilterAriaLabel', { + defaultMessage: 'Remove filter', + })} + /> + + ); +}; /* * Component for rendering an entity, displaying the value @@ -100,20 +109,21 @@ export const EntityCell: FC = ({ valueText = `${MLCATEGORY} ${valueText}`; } + const { fieldValueShort, fieldValueLong } = useEntityCellStyles(); const textStyle = { maxWidth: '100%' }; - const textWrapperClass = wrapText ? 'field-value-long' : 'field-value-short'; + const textWrapperCss = wrapText ? fieldValueLong : fieldValueShort; const shouldDisplayIcons = filter !== undefined && entityName !== undefined && entityValue !== undefined; if (wrapText === true) { return (
- {valueText} + {valueText} {shouldDisplayIcons && ( - - {getAddFilter({ entityName, entityValue, filter })} - {getRemoveFilter({ entityName, entityValue, filter })} - + <> + + + )}
); @@ -121,7 +131,7 @@ export const EntityCell: FC = ({ return ( - + {valueText} @@ -129,10 +139,10 @@ export const EntityCell: FC = ({ - {getAddFilter({ entityName, entityValue, filter })} + - {getRemoveFilter({ entityName, entityValue, filter })} + diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell_styles.ts new file mode 100644 index 0000000000000..19bedf04823eb --- /dev/null +++ b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell_styles.ts @@ -0,0 +1,38 @@ +/* + * 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 { useEuiTheme, euiTextTruncate } from '@elastic/eui'; + +export const useEntityCellStyles = () => { + const { euiTheme } = useEuiTheme(); + + return { + fieldValueShort: css` + ${euiTextTruncate()}; + display: inline-block; + vertical-align: bottom; + `, + fieldValueLong: css({ + overflowWrap: 'break-word', + }), + filterButton: css({ + opacity: 0.5, + width: euiTheme.size.base, + height: euiTheme.size.base, + transform: 'translateY(-1px)', + '&:hover': { + opacity: 1, + }, + '.euiIcon': { + width: euiTheme.size.m, + height: euiTheme.size.m, + }, + }), + }; +}; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.scss b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.scss deleted file mode 100644 index 31b54bf5a675f..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.scss +++ /dev/null @@ -1,9 +0,0 @@ -.mlHelpPopover__panel { - max-width: $euiSize * 30; -} - -.mlHelpPopover__content { - max-height: 40vh; - padding: $euiSizeS; - @include euiYScrollWithShadows; -} diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.tsx index eccfe901d3c3b..bf374b9e59bd5 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.tsx @@ -10,12 +10,11 @@ import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; import type { EuiLinkButtonProps, EuiPopoverProps } from '@elastic/eui'; import { EuiButtonIcon, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui'; -import './help_popover.scss'; +import { useHelpPopoverStyles } from './help_popover_styles'; export const HelpPopoverButton: FC<{ onClick: EuiLinkButtonProps['onClick'] }> = ({ onClick }) => { return ( > = ({ title, }) => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const { helpPopoverPanel, helpPopoverContent } = useHelpPopoverStyles(); return ( } - className="mlHelpPopover" closePopover={setIsPopoverOpen.bind(null, false)} isOpen={isPopoverOpen} ownFocus - panelClassName="mlHelpPopover__panel" + panelProps={{ css: helpPopoverPanel }} panelPaddingSize="none" > {title && {title}} - + {children} diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover_styles.ts new file mode 100644 index 0000000000000..930bdd8bfb420 --- /dev/null +++ b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover_styles.ts @@ -0,0 +1,25 @@ +/* + * 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 { useEuiTheme, useEuiOverflowScroll } from '@elastic/eui'; + +export const useHelpPopoverStyles = () => { + const { euiTheme } = useEuiTheme(); + + return { + helpPopoverPanel: css({ + maxWidth: `${euiTheme.base * 30}px`, + }), + helpPopoverContent: css` + ${useEuiOverflowScroll('y', true)}; + max-height: 40vh; + padding: ${euiTheme.size.s}; + `, + }; +}; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/influencers_list/influencers_list_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/components/influencers_list/influencers_list_styles.ts index e6cfd5b3f66fa..5d70a00fdbbca 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/influencers_list/influencers_list_styles.ts +++ b/x-pack/platform/plugins/shared/ml/public/application/components/influencers_list/influencers_list_styles.ts @@ -14,7 +14,7 @@ import { ML_SEVERITY_COLORS } from '@kbn/ml-anomaly-utils'; export const useInfluencersListStyles = () => { const { euiTheme } = useEuiTheme(); const euiFontSizeXS = useEuiFontSize('xs').fontSize; - const euiFontSizeS = useEuiFontSize('s').fontSize; + const euiFontSizeM = useEuiFontSize('m').fontSize; return { influencersList: css({ @@ -23,7 +23,7 @@ export const useInfluencersListStyles = () => { fieldLabel: css({ fontSize: euiFontSizeXS, textAlign: 'left', - maxHeight: euiFontSizeS, + maxHeight: euiFontSizeM, maxWidth: 'calc(100% - 102px)', }), progress: css({ diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_index.scss index cff43ee98bc08..75b456083b5b5 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_index.scss +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_index.scss @@ -1,3 +1 @@ @import 'rule_editor'; - -@import 'components/detector_description_list/index'; \ No newline at end of file diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_rule_editor.scss b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_rule_editor.scss index 41f21fc98a381..e8bf6742db5f7 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_rule_editor.scss +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_rule_editor.scss @@ -2,10 +2,6 @@ .ml-rule-editor-flyout { font-size: $euiFontSizeS; - .select-rule-action .rule-detector-description-list { - padding-left: $euiSize; - } - .select-rule-action-panel { padding: $euiSizeS 0; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap index a2dd5d750c068..f0f00cc5136b4 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap @@ -2,7 +2,6 @@ exports[`DetectorDescriptionList render for detector with anomaly values 1`] = ` - ); + return ; } DetectorDescriptionList.propTypes = { job: PropTypes.object.isRequired, diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/select_rule_action.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/select_rule_action.js index 7e3944b817778..4b4bb2f2c785e 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/select_rule_action.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/select_rule_action.js @@ -50,7 +50,7 @@ export function SelectRuleAction({ } return ( -
+
{rules.length > 0 && ( diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap index 55b4dc35063b0..46bee0c3fb3c0 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap @@ -1,12 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ExplorerChartLabelBadge Render entity label badge. 1`] = ` - + nginx.access.remote_ip diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss deleted file mode 100644 index b540efd6c77f7..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss +++ /dev/null @@ -1,9 +0,0 @@ -/* - Resets the badge's default strong font-weight so it's possible - to put custom emphasis inside the badge only on a part of it. - Used in the Explorer Chart label badge to display an entity's - field_name as `normal` and field_value as `strong`. -*/ -.ml-reset-font-weight { - font-weight: normal; -} diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_index.scss index d112b834f09ad..43747a513aa61 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_index.scss +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_index.scss @@ -1,2 +1 @@ -@import 'explorer_chart_label'; -@import 'explorer_chart_label_badge'; \ No newline at end of file +@import 'explorer_chart_label'; \ No newline at end of file diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/_entity_filter.scss b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/_entity_filter.scss deleted file mode 100644 index 800c33e50689d..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/_entity_filter.scss +++ /dev/null @@ -1,17 +0,0 @@ -.filter-button { - opacity: .5; - width: $euiSize; - height: $euiSize; - - -webkit-transform: translateY(-1px); - transform: translateY(-1px); - - .euiIcon { - width: $euiFontSizeXS; - height: $euiFontSizeXS; - } -} - -.filter-button:hover { - opacity: 1; -} diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx index e3554dd04b0b4..dc5a505182c9a 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx @@ -11,8 +11,8 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; import type { MlEntityFieldOperation } from '@kbn/ml-anomaly-utils'; import { ML_ENTITY_FIELD_OPERATIONS } from '@kbn/ml-anomaly-utils'; +import { useEntityFilterStyles } from './entity_filter_styles'; import { blurButtonOnClick } from '../../../../../util/component_utils'; -import './_entity_filter.scss'; interface EntityFilterProps { onFilter: (params: { @@ -30,6 +30,8 @@ export const EntityFilter: FC = ({ influencerFieldValue, isEmbeddable, }) => { + const { filterButton } = useEntityFilterStyles(); + return ( = ({ > { onFilter({ influencerFieldName, @@ -74,7 +76,7 @@ export const EntityFilter: FC = ({ > { onFilter({ influencerFieldName, diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter_styles.ts new file mode 100644 index 0000000000000..44232c9ac3b2b --- /dev/null +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter_styles.ts @@ -0,0 +1,30 @@ +/* + * 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 { useEuiTheme } from '@elastic/eui'; + +export const useEntityFilterStyles = () => { + const { euiTheme } = useEuiTheme(); + + return { + filterButton: css({ + opacity: 0.5, + width: euiTheme.size.base, + height: euiTheme.size.base, + transform: 'translateY(-1px)', + '&:hover': { + opacity: 1, + }, + '.euiIcon': { + width: euiTheme.size.m, + height: euiTheme.size.m, + }, + }), + }; +}; diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js index 3c88ca66ddfad..988b36bf44b46 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js @@ -9,11 +9,17 @@ import PropTypes from 'prop-types'; import React from 'react'; import { EuiBadge } from '@elastic/eui'; +import { css } from '@emotion/react'; export function ExplorerChartLabelBadge({ entity }) { + // Resets the badge's default strong font-weight so it's possible + // to put custom emphasis inside the badge only on a part of it. + // The entity's field_name will be styled as `normal` and field_value as `strong`. + const resetFontWeightCss = css({ fontWeight: 'normal' }); + return ( - - + + {entity.fieldName} {entity.fieldValue}