Skip to content

Commit

Permalink
[ML] Migrate influencers list from SCSS to Emotion (elastic#200019)
Browse files Browse the repository at this point in the history
  • Loading branch information
rbrtj authored and CAWilson94 committed Dec 12, 2024
1 parent 7f50d68 commit a6766ba
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 125 deletions.
1 change: 0 additions & 1 deletion x-pack/plugins/ml/public/application/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
@import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly
@import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly
@import 'components/entity_cell/index';
@import 'components/influencers_list/index';
@import 'components/job_selector/index';
@import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly

Expand Down

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { getSeverity, getFormattedSeverityScore } from '@kbn/ml-anomaly-utils';
import { abbreviateWholeNumber } from '../../formatters/abbreviate_whole_number';
import type { EntityCellFilter } from '../entity_cell';
import { EntityCell } from '../entity_cell';
import { useInfluencersListStyles } from './influencers_list_styles';

export interface InfluencerValueData {
influencerFieldValue: string;
Expand Down Expand Up @@ -65,6 +66,7 @@ function getTooltipContent(maxScoreLabel: string, totalScoreLabel: string) {
}

const Influencer: FC<InfluencerProps> = ({ influencerFieldName, influencerFilter, valueData }) => {
const styles = useInfluencersListStyles();
const maxScore = Math.floor(valueData.maxAnomalyScore);
const maxScoreLabel = getFormattedSeverityScore(valueData.maxAnomalyScore);
const severity = getSeverity(maxScore);
Expand All @@ -73,40 +75,35 @@ const Influencer: FC<InfluencerProps> = ({ influencerFieldName, influencerFilter

// Ensure the bar has some width for 0 scores.
const barScore = maxScore !== 0 ? maxScore : 1;
const barStyle = {
width: `${barScore}%`,
};

const tooltipContent = getTooltipContent(maxScoreLabel, totalScoreLabel);

return (
<div data-test-subj={`mlInfluencerEntry field-${influencerFieldName}`}>
<div className="field-label" data-test-subj="mlInfluencerEntryFieldLabel">
<div css={styles.fieldLabel} data-test-subj="mlInfluencerEntryFieldLabel">
<EntityCell
entityName={influencerFieldName}
entityValue={valueData.influencerFieldValue}
filter={influencerFilter}
/>
</div>
<div className={`progress ${severity.id}`}>
<div className="progress-bar-holder">
<div className="progress-bar" style={barStyle} />
<div css={styles.progress}>
<div css={styles.progressBarHolder}>
<div css={styles.progressBar(severity.id, barScore)} />
</div>
<div className="score-label">
<div css={styles.scoreLabel(severity.id)}>
<EuiToolTip
position="right"
className="ml-influencers-list-tooltip"
title={`${influencerFieldName}: ${valueData.influencerFieldValue}`}
content={tooltipContent}
>
<span>{maxScoreLabel}</span>
</EuiToolTip>
</div>
</div>
<div className="total-score-label">
<div css={styles.totalScoreLabel}>
<EuiToolTip
position="right"
className="ml-influencers-list-tooltip"
title={`${influencerFieldName}: ${valueData.influencerFieldValue}`}
content={tooltipContent}
>
Expand Down Expand Up @@ -145,12 +142,14 @@ const InfluencersByName: FC<InfluencersByNameProps> = ({
};

export const InfluencersList: FC<InfluencersListProps> = ({ influencers, influencerFilter }) => {
const styles = useInfluencersListStyles();

if (influencers === undefined || Object.keys(influencers).length === 0) {
return (
<EuiFlexGroup justifyContent="spaceAround" className="ml-influencers-list">
<EuiFlexGroup justifyContent="spaceAround" css={styles.influencersList}>
<EuiFlexItem grow={false}>
<EuiSpacer size="xxl" />
<EuiTitle size="xxs" className="influencer-title">
<EuiTitle size="xxs">
<h3>
<FormattedMessage
id="xpack.ml.influencersList.noInfluencersFoundTitle"
Expand All @@ -172,5 +171,5 @@ export const InfluencersList: FC<InfluencersListProps> = ({ influencers, influen
/>
));

return <div className="ml-influencers-list">{influencersByName}</div>;
return <div css={styles.influencersList}>{influencersByName}</div>;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import { css } from '@emotion/react';
import { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme';
import { mlColors } from '../../styles';
import { useMlKibana } from '../../contexts/kibana';

export const useInfluencersListStyles = () => {
const {
services: { theme },
} = useMlKibana();
const { euiTheme } = useCurrentEuiThemeVars(theme);

return {
influencersList: css({
lineHeight: 1.45,
}),
fieldLabel: css({
fontSize: euiTheme.euiFontSizeXS,
textAlign: 'left',
maxHeight: euiTheme.euiFontSizeS,
maxWidth: 'calc(100% - 102px)',
}),
progress: css({
display: 'inline-block',
width: 'calc(100% - 34px)',
height: '22px',
minWidth: '70px',
marginBottom: 0,
color: euiTheme.euiColorDarkShade,
backgroundColor: 'transparent',
}),
progressBarHolder: css({
width: `calc(100% - 28px)`,
}),
progressBar: (severity: string, barScore: number) =>
css({
height: `calc(${euiTheme.euiSizeXS} / 2)`,
float: 'left',
marginTop: euiTheme.euiSizeM,
textAlign: 'right',
lineHeight: '18px',
display: 'inline-block',
transition: 'none',
width: `${barScore}%`,
backgroundColor:
severity === 'critical'
? mlColors.critical
: severity === 'major'
? mlColors.major
: severity === 'minor'
? mlColors.minor
: mlColors.warning,
}),
scoreLabel: (severity: string) =>
css({
textAlign: 'center',
lineHeight: '14px',
whiteSpace: 'nowrap',
fontSize: euiTheme.euiFontSizeXS,
marginLeft: euiTheme.euiSizeXS,
display: 'inline',
borderColor:
severity === 'critical'
? mlColors.critical
: severity === 'major'
? mlColors.major
: severity === 'minor'
? mlColors.minor
: mlColors.warning,
}),
totalScoreLabel: css({
width: euiTheme.euiSizeXL,
verticalAlign: 'top',
textAlign: 'center',
color: euiTheme.euiColorDarkShade,
fontSize: '11px',
lineHeight: '14px',
borderRadius: euiTheme.euiBorderRadius,
padding: `calc(${euiTheme.euiSizeXS} / 2)`,
display: 'inline-block',
border: euiTheme.euiBorderThin,
}),
};
};

0 comments on commit a6766ba

Please sign in to comment.