Skip to content

Commit 37fceaf

Browse files
kdelemmekdelemme
authored
fix(slo): displayed tags (#224109)
1 parent a584b04 commit 37fceaf

File tree

12 files changed

+140
-99
lines changed

12 files changed

+140
-99
lines changed

‎x-pack/solutions/observability/plugins/slo/public/components/slo/slo_badges/slo_status_badge.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,11 @@ export function SloStatusBadge({ slo, isLoading }: SloStatusProps) {
7777

7878
{slo.summary.errorBudget.isEstimated && (
7979
<EuiFlexItem grow={false}>
80-
{/* Prevent badges from growing when inside an EuiFlexGroup by wrapping content with div */}
81-
<div>
82-
<EuiBadge color="default">
83-
{i18n.translate('xpack.slo.sloStatusBadge.forecasted', {
84-
defaultMessage: 'Forecasted',
85-
})}
86-
</EuiBadge>
87-
</div>
80+
<EuiBadge color="default">
81+
{i18n.translate('xpack.slo.sloStatusBadge.forecasted', {
82+
defaultMessage: 'Forecasted',
83+
})}
84+
</EuiBadge>
8885
</EuiFlexItem>
8986
)}
9087
</>

‎x-pack/solutions/observability/plugins/slo/public/components/slo/slo_badges/slo_tags_badge.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import { EuiBadge, EuiButtonEmpty, EuiFlexItem } from '@elastic/eui';
9+
import { i18n } from '@kbn/i18n';
10+
import { SLOWithSummaryResponse } from '@kbn/slo-schema';
11+
import React, { useState } from 'react';
12+
13+
interface Props {
14+
slo: SLOWithSummaryResponse;
15+
onClick?: (tag: string) => void;
16+
defaultVisibleTags?: number;
17+
}
18+
19+
const DEFAULT_VISIBLE_TAGS = 3;
20+
21+
export function SloTagsBadge({ slo, onClick, defaultVisibleTags = DEFAULT_VISIBLE_TAGS }: Props) {
22+
const [expanded, setExpanded] = useState(false);
23+
const tags = slo.tags;
24+
const visibleTags = expanded ? tags : tags.slice(0, defaultVisibleTags);
25+
const hasMore = tags.length > defaultVisibleTags;
26+
27+
const getClickProps = (tag: string) => {
28+
return onClick !== undefined
29+
? {
30+
onClickAriaLabel: i18n.translate('xpack.slo.sloTagsBadge.ariaLabel', {
31+
defaultMessage: 'Filter with {tag}',
32+
values: { tag },
33+
}),
34+
onClick: () => onClick(tag),
35+
}
36+
: {};
37+
};
38+
39+
if (!tags.length) return null;
40+
41+
return (
42+
<>
43+
{visibleTags.map((tag) => (
44+
<EuiFlexItem
45+
grow={false}
46+
key={tag}
47+
onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}
48+
>
49+
<EuiBadge {...getClickProps(tag)}>{tag}</EuiBadge>
50+
</EuiFlexItem>
51+
))}
52+
{hasMore && (
53+
<EuiFlexItem
54+
grow={false}
55+
onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}
56+
>
57+
<EuiButtonEmpty
58+
size="xs"
59+
color="text"
60+
onClick={() => setExpanded((v) => !v)}
61+
data-test-subj="sloTagsBadgeToggle"
62+
>
63+
{expanded
64+
? i18n.translate('xpack.slo.sloTagsBadge.showLess', {
65+
defaultMessage: 'Show less',
66+
})
67+
: i18n.translate('xpack.slo.sloTagsBadge.showMore', {
68+
defaultMessage: '+{count} more',
69+
values: { count: tags.length - defaultVisibleTags },
70+
})}
71+
</EuiButtonEmpty>
72+
</EuiFlexItem>
73+
)}
74+
</>
75+
);
76+
}

‎x-pack/solutions/observability/plugins/slo/public/pages/slo_details/components/header_title.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ import {
1212
EuiSkeletonText,
1313
EuiText,
1414
} from '@elastic/eui';
15-
import { SLOWithSummaryResponse } from '@kbn/slo-schema';
16-
import React from 'react';
17-
import { TagsList } from '@kbn/observability-shared-plugin/public';
1815
import { i18n } from '@kbn/i18n';
16+
import { SLOWithSummaryResponse } from '@kbn/slo-schema';
1917
import moment from 'moment';
18+
import React from 'react';
2019
import { SloStateBadge, SloStatusBadge, SloValueBadge } from '../../../components/slo/slo_badges';
20+
import { SloTagsBadge } from '../../../components/slo/slo_badges/slo_tags_badge';
2121
import { SloRemoteBadge } from '../../slos/components/badges/slo_remote_badge';
2222
import { SLOGroupings } from './groupings/slo_groupings';
2323

@@ -45,11 +45,7 @@ export function HeaderTitle({ isLoading, slo }: Props) {
4545
<SloStatusBadge slo={slo} isLoading={isLoading} />
4646
<SloStateBadge slo={slo} />
4747
<SloRemoteBadge slo={slo} />
48-
{!!slo?.tags?.length && (
49-
<EuiFlexItem grow={true}>
50-
<TagsList tags={slo.tags} />
51-
</EuiFlexItem>
52-
)}
48+
<SloTagsBadge slo={slo} />
5349
</EuiFlexGroup>
5450
{slo.description && (
5551
<EuiFlexItem grow={true}>

‎x-pack/solutions/observability/plugins/slo/public/pages/slos/components/badges/slo_badges.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
1111
import React from 'react';
1212
import { SloStateBadge, SloStatusBadge } from '../../../../components/slo/slo_badges';
1313
import { SloActiveAlertsBadge } from '../../../../components/slo/slo_badges/slo_active_alerts_badge';
14+
import { SloTagsBadge } from '../../../../components/slo/slo_badges/slo_tags_badge';
1415
import { BurnRateRuleParams } from '../../../../typings';
15-
import { SloTagsList } from '../common/slo_tags_list';
16+
import { useUrlSearchState } from '../../hooks/use_url_search_state';
1617
import { SloIndicatorTypeBadge } from './slo_indicator_type_badge';
1718
import { SloRemoteBadge } from './slo_remote_badge';
1819
import { SloRulesBadge } from './slo_rules_badge';
@@ -35,8 +36,16 @@ export function SloBadges({
3536
slo,
3637
onClickRuleBadge,
3738
}: SloBadgesProps) {
39+
const { onStateChange } = useUrlSearchState();
40+
41+
const handleTagClick = (tag: string) => {
42+
onStateChange({
43+
kqlQuery: `slo.tags: "${tag}"`,
44+
});
45+
};
46+
3847
return (
39-
<EuiFlexGroup direction="row" responsive={false} gutterSize="s" alignItems="center" wrap>
48+
<EuiFlexGroup direction="row" responsive gutterSize="s" alignItems="center" wrap>
4049
{isLoading ? (
4150
<LoadingBadges />
4251
) : (
@@ -48,7 +57,7 @@ export function SloBadges({
4857
<SloTimeWindowBadge slo={slo} />
4958
<SloRemoteBadge slo={slo} />
5059
<SloRulesBadge rules={rules} onClick={onClickRuleBadge} isRemote={!!slo.remote} />
51-
<SloTagsList tags={slo.tags} numberOfTagsToDisplay={1} color="default" ignoreEmpty />
60+
<SloTagsBadge slo={slo} onClick={handleTagClick} />
5261
</>
5362
)}
5463
</EuiFlexGroup>

‎x-pack/solutions/observability/plugins/slo/public/pages/slos/components/badges/slo_indicator_type_badge.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
* 2.0.
66
*/
77

8-
import { EuiBadge, EuiBadgeProps, EuiFlexItem, EuiToolTip } from '@elastic/eui';
8+
import { EuiBadge, EuiFlexItem, EuiToolTip } from '@elastic/eui';
99
import { i18n } from '@kbn/i18n';
1010
import {
11-
apmTransactionDurationIndicatorSchema,
12-
apmTransactionErrorRateIndicatorSchema,
11+
ALL_VALUE,
1312
SLODefinitionResponse,
1413
SLOWithSummaryResponse,
14+
apmTransactionDurationIndicatorSchema,
15+
apmTransactionErrorRateIndicatorSchema,
1516
} from '@kbn/slo-schema';
16-
import { euiLightVars } from '@kbn/ui-theme';
1717
import React, { MouseEvent } from 'react';
1818
import { useRouteMatch } from 'react-router-dom';
1919
import { SLOS_PATH } from '../../../../../common/locators/paths';
@@ -23,11 +23,10 @@ import { toIndicatorTypeLabel } from '../../../../utils/slo/labels';
2323
import { useUrlSearchState } from '../../hooks/use_url_search_state';
2424

2525
export interface Props {
26-
color?: EuiBadgeProps['color'];
2726
slo: SLOWithSummaryResponse | SLODefinitionResponse;
2827
}
2928

30-
export function SloIndicatorTypeBadge({ slo, color }: Props) {
29+
export function SloIndicatorTypeBadge({ slo }: Props) {
3130
const {
3231
application: { navigateToUrl },
3332
http: { basePath },
@@ -48,7 +47,6 @@ export function SloIndicatorTypeBadge({ slo, color }: Props) {
4847
<>
4948
<EuiFlexItem grow={false}>
5049
<EuiBadge
51-
color={color ?? euiLightVars.euiColorDisabled}
5250
onClick={(_) => {
5351
if (isSloPage) {
5452
onStateChange({
@@ -69,8 +67,9 @@ export function SloIndicatorTypeBadge({ slo, color }: Props) {
6967
</EuiFlexItem>
7068
{(apmTransactionDurationIndicatorSchema.is(slo.indicator) ||
7169
apmTransactionErrorRateIndicatorSchema.is(slo.indicator)) &&
72-
slo.indicator.params.service !== '' && (
73-
<EuiFlexItem grow={false} style={{ maxWidth: 100 }}>
70+
slo.indicator.params.service !== '' &&
71+
slo.indicator.params.service !== ALL_VALUE && (
72+
<EuiFlexItem grow={false} css={{ maxWidth: 100 }}>
7473
<EuiToolTip
7574
position="top"
7675
content={i18n.translate('xpack.slo.sloIndicatorTypeBadge.exploreInApm', {
@@ -79,7 +78,6 @@ export function SloIndicatorTypeBadge({ slo, color }: Props) {
7978
})}
8079
>
8180
<EuiBadge
82-
color={color ?? euiLightVars.euiColorDisabled}
8381
onClick={handleNavigateToApm}
8482
onMouseDown={(e: MouseEvent<HTMLButtonElement>) => {
8583
e.stopPropagation(); // stops propagation of metric onElementClick

‎x-pack/solutions/observability/plugins/slo/public/pages/slos/components/badges/slo_time_window_badge.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@
55
* 2.0.
66
*/
77

8-
import { EuiBadge, EuiBadgeProps, EuiFlexItem } from '@elastic/eui';
8+
import { EuiBadge, EuiFlexItem } from '@elastic/eui';
99
import { i18n } from '@kbn/i18n';
1010
import {
11-
rollingTimeWindowTypeSchema,
1211
SLODefinitionResponse,
1312
SLOWithSummaryResponse,
13+
rollingTimeWindowTypeSchema,
1414
} from '@kbn/slo-schema';
15-
import { euiLightVars } from '@kbn/ui-theme';
1615
import moment from 'moment';
1716
import React, { MouseEvent, useCallback } from 'react';
1817
import { useRouteMatch } from 'react-router-dom';
@@ -22,11 +21,10 @@ import { toDurationLabel } from '../../../../utils/slo/labels';
2221
import { useUrlSearchState } from '../../hooks/use_url_search_state';
2322

2423
export interface Props {
25-
color?: EuiBadgeProps['color'];
2624
slo: SLOWithSummaryResponse | SLODefinitionResponse;
2725
}
2826

29-
export function SloTimeWindowBadge({ slo, color }: Props) {
27+
export function SloTimeWindowBadge({ slo }: Props) {
3028
const { onStateChange } = useUrlSearchState();
3129
const isSloPage = useRouteMatch(SLOS_PATH)?.isExact ?? false;
3230

@@ -47,7 +45,6 @@ export function SloTimeWindowBadge({ slo, color }: Props) {
4745
defaultMessage: 'Click to filter by {timeWindow} SLOs',
4846
values: { timeWindow: toDurationLabel(slo.timeWindow.duration) },
4947
})}
50-
color={color ?? euiLightVars.euiColorDisabled}
5148
iconType="editorItemAlignRight"
5249
iconSide="left"
5350
onMouseDown={(e: MouseEvent<HTMLButtonElement>) => {
@@ -71,7 +68,7 @@ export function SloTimeWindowBadge({ slo, color }: Props) {
7168

7269
return (
7370
<EuiFlexItem grow={false}>
74-
<EuiBadge color={color ?? euiLightVars.euiColorDisabled} iconType="calendar" iconSide="left">
71+
<EuiBadge iconType="calendar" iconSide="left">
7572
{i18n.translate('xpack.slo.slo.timeWindow.calendar', {
7673
defaultMessage: '{elapsed}/{total} days',
7774
values: {

‎x-pack/solutions/observability/plugins/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ import { EuiFlexGroup } from '@elastic/eui';
99
import { css } from '@emotion/react';
1010
import { SLOWithSummaryResponse } from '@kbn/slo-schema';
1111
import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
12-
import React, { useCallback } from 'react';
12+
import React from 'react';
1313
import { SloStateBadge } from '../../../../components/slo/slo_badges';
1414
import { SloActiveAlertsBadge } from '../../../../components/slo/slo_badges/slo_active_alerts_badge';
15+
import { SloTagsBadge } from '../../../../components/slo/slo_badges/slo_tags_badge';
1516
import { BurnRateRuleParams } from '../../../../typings';
1617
import { useUrlSearchState } from '../../hooks/use_url_search_state';
1718
import { LoadingBadges } from '../badges/slo_badges';
1819
import { SloRemoteBadge } from '../badges/slo_remote_badge';
1920
import { SloRulesBadge } from '../badges/slo_rules_badge';
20-
import { SloTagsList } from '../common/slo_tags_list';
2121
import { SLOCardItemInstanceBadge } from './slo_card_item_instance_badge';
2222

2323
interface Props {
@@ -30,19 +30,10 @@ interface Props {
3030
export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }: Props) {
3131
const { onStateChange } = useUrlSearchState();
3232

33-
const onTagClick = useCallback(
34-
(tag: string) => {
35-
onStateChange({
36-
kqlQuery: `slo.tags: "${tag}"`,
37-
});
38-
},
39-
[onStateChange]
40-
);
41-
42-
const isRemote = !!slo.remote;
43-
44-
// in this case, there is more space to display tags
45-
const numberOfTagsToDisplay = !isRemote || (rules ?? []).length > 0 ? 2 : 1;
33+
const handleTagClick = (tag: string) =>
34+
onStateChange({
35+
kqlQuery: `slo.tags: "${tag}"`,
36+
});
4637

4738
return (
4839
<div
@@ -65,13 +56,7 @@ export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }
6556
<SLOCardItemInstanceBadge slo={slo} />
6657
<SloRulesBadge rules={rules} onClick={handleCreateRule} isRemote={!!slo.remote} />
6758
<SloRemoteBadge slo={slo} />
68-
<SloTagsList
69-
tags={slo.tags}
70-
numberOfTagsToDisplay={numberOfTagsToDisplay}
71-
color="default"
72-
ignoreEmpty
73-
onClick={onTagClick}
74-
/>
59+
<SloTagsBadge slo={slo} onClick={handleTagClick} defaultVisibleTags={1} />
7560
</>
7661
)}
7762
</EuiFlexGroup>

‎x-pack/solutions/observability/plugins/slo/public/pages/slos/components/common/slo_groupings.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function Entries({
101101
direction,
102102
gutterSize = 's',
103103
}: {
104-
entries: Array<[string, unknown]>;
104+
entries: Array<[string, string | number]>;
105105
direction: 'row' | 'column';
106106
gutterSize?: 'none' | 's';
107107
}) {
@@ -114,11 +114,11 @@ function Entries({
114114
<EuiText size="s">
115115
<span>
116116
{`${key}: `}
117-
<EuiCopy textToCopy={`${value}`}>
117+
<EuiCopy textToCopy={String(value)}>
118118
{(copy) => (
119119
<EuiLink
120120
data-test-subj="sloInstanceCopy"
121-
style={{
121+
css={{
122122
fontWeight: euiTheme.font.weight.semiBold,
123123
}}
124124
color="text"
@@ -127,7 +127,7 @@ function Entries({
127127
copy();
128128
}}
129129
>
130-
{`${value}`}
130+
{value}
131131
</EuiLink>
132132
)}
133133
</EuiCopy>

‎x-pack/solutions/observability/plugins/slo/public/pages/slos/components/common/slo_tags_list.tsx‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

0 commit comments

Comments
 (0)