mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Migrate influencers list from SCSS to Emotion (#200019)](https://github.com/elastic/kibana/pull/200019) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Robert Jaszczurek","email":"92210485+rbrtj@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-19T22:23:41Z","message":"[ML] Migrate influencers list from SCSS to Emotion (#200019)\n\n## Summary\r\n\r\nPart of: [#140695](https://github.com/elastic/kibana/issues/140695)\r\nMigrates SCSS to emotion for Influencers list.\r\n\r\n| Before | After |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|","sha":"9162fdea146adadec05fa50f2cf4461bf19b7892","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","v9.0.0","Team:ML","backport:version","v8.17.0"],"title":"[ML] Migrate influencers list from SCSS to Emotion","number":200019,"url":"https://github.com/elastic/kibana/pull/200019","mergeCommit":{"message":"[ML] Migrate influencers list from SCSS to Emotion (#200019)\n\n## Summary\r\n\r\nPart of: [#140695](https://github.com/elastic/kibana/issues/140695)\r\nMigrates SCSS to emotion for Influencers list.\r\n\r\n| Before | After |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|","sha":"9162fdea146adadec05fa50f2cf4461bf19b7892"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200019","number":200019,"mergeCommit":{"message":"[ML] Migrate influencers list from SCSS to Emotion (#200019)\n\n## Summary\r\n\r\nPart of: [#140695](https://github.com/elastic/kibana/issues/140695)\r\nMigrates SCSS to emotion for Influencers list.\r\n\r\n| Before | After |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|","sha":"9162fdea146adadec05fa50f2cf4461bf19b7892"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>
This commit is contained in:
Kibana Machine
GitHub
parent
a65e130a31
commit
2298269001
5 changed files with 103 additions and 125 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import 'influencers_list';
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
.ml-influencers-list {
|
||||
line-height: 1.45; // SASSTODO: Calc proper value
|
||||
|
||||
.field-label {
|
||||
font-size: $euiFontSizeXS;
|
||||
text-align: left;
|
||||
max-height: $euiFontSizeS;
|
||||
max-width: calc(100% - 102px); // SASSTODO: Calc proper value
|
||||
|
||||
.field-value {
|
||||
@include euiTextTruncate;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: inline-block;
|
||||
width: calc(100% - 34px); // SASSTODO: Calc proper value
|
||||
height: 22px;
|
||||
min-width: 70px;
|
||||
margin-bottom: 0;
|
||||
color: $euiColorDarkShade;
|
||||
background-color: transparent;
|
||||
|
||||
.progress-bar-holder {
|
||||
width: calc(100% - 28px); // SASSTODO: Calc proper value
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: calc($euiSizeXS / 2);
|
||||
margin-top: $euiSizeM;
|
||||
text-align: right;
|
||||
line-height: 18px; // SASSTODO: Calc proper value
|
||||
display: inline-block;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
// SASSTODO: This range of color is too large, needs to be rewritten and variablized
|
||||
.progress.critical {
|
||||
.progress-bar {
|
||||
background-color: $mlColorCritical;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
border-color: $mlColorCritical;
|
||||
}
|
||||
}
|
||||
|
||||
.progress.major {
|
||||
.progress-bar {
|
||||
background-color: $mlColorMajor;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
border-color: $mlColorMajor;
|
||||
}
|
||||
}
|
||||
|
||||
.progress.minor {
|
||||
.progress-bar {
|
||||
background-color: $mlColorMinor;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
border-color: $mlColorMinor;
|
||||
}
|
||||
}
|
||||
|
||||
.progress.warning {
|
||||
.progress-bar {
|
||||
background-color: $mlColorWarning;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
border-color: $mlColorWarning;
|
||||
}
|
||||
}
|
||||
|
||||
.score-label {
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
white-space: nowrap;
|
||||
font-size: $euiFontSizeXS;
|
||||
display: inline;
|
||||
margin-left: $euiSizeXS;
|
||||
}
|
||||
|
||||
// SASSTODO: Brittle sizing
|
||||
.total-score-label {
|
||||
width: $euiSizeXL;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
color: $euiColorDarkShade;
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
border-radius: $euiBorderRadius;
|
||||
padding: calc($euiSizeXS / 2);
|
||||
margin-top: $euiSizeXS;
|
||||
display: inline-block;
|
||||
border: $euiBorderThin;
|
||||
}
|
||||
}
|
||||
|
||||
// SASSTODO: Can .eui-textBreakAll
|
||||
.ml-influencers-list-tooltip {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -73,29 +75,25 @@ 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}
|
||||
>
|
||||
|
|
@ -103,10 +101,9 @@ const Influencer: FC<InfluencerProps> = ({ influencerFieldName, influencerFilter
|
|||
</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}
|
||||
>
|
||||
|
|
@ -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"
|
||||
|
|
@ -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>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}),
|
||||
};
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue