github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Explain Log Rate Spikes: improve the display of large groups (#145609)

Browse source 
## Summary

Related meta issue: https://github.com/elastic/kibana/issues/142626

Improves the display of large groups by limiting the badges displayed to
10 and updates the +more badge.

<img width="1066" alt="image (2)"
src="https://user-images.githubusercontent.com/6446462/202530438-210c7005-feb6-4e76-9bbd-48eb6b26293e.png">


### Checklist

Delete any items that are not applicable to this PR.
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Melissa Alvarez 2022-11-21 13:21:14 -07:00 • committed by GitHub
parent a74bfee93f
commit 95dd368932
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

28
x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table_groups.tsx
View file

@ -42,6 +42,7 @@ const NARROW_COLUMN_WIDTH = '120px';
const EXPAND_COLUMN_WIDTH = '40px';
const ACTIONS_COLUMN_WIDTH = '60px';
const NOT_AVAILABLE = '--';
const MAX_GROUP_BADGES = 10;
const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50];
const DEFAULT_SORT_FIELD = 'pValue';
@ -252,8 +253,11 @@ export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
),
render: (_, { group, repeatedValues }) => {
const valuesBadges = [];
const hasExtraBadges = Object.keys(group).length > MAX_GROUP_BADGES;
for (const fieldName in group) {
if (group.hasOwnProperty(fieldName)) {
if (valuesBadges.length === MAX_GROUP_BADGES) break;
valuesBadges.push(
<>
<EuiBadge
@ -269,7 +273,7 @@ export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
);
}
}
if (Object.keys(repeatedValues).length > 0) {
if (Object.keys(repeatedValues).length > 0 || hasExtraBadges) {
valuesBadges.push(
<>
<EuiBadge
@ -277,11 +281,23 @@ export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
data-test-subj="aiopsSpikeAnalysisGroupsTableColumnGroupBadge"
color="hollow"
>
+{Object.keys(repeatedValues).length}{' '}
<FormattedMessage
id="xpack.aiops.explainLogRateSpikes.spikeAnalysisTableGroups.moreLabel"
defaultMessage="more field/value pairs also appearing in other groups"
/>
{hasExtraBadges ? (
<>
<FormattedMessage
id="xpack.aiops.explainLogRateSpikes.spikeAnalysisTableGroups.moreLabel"
defaultMessage="+{count, plural, one {# more field/value pair} other {# more field/value pairs}}"
values={{ count: Object.keys(group).length - MAX_GROUP_BADGES }}
/>
<br />
</>
) : null}
{Object.keys(repeatedValues).length > 0 ? (
<FormattedMessage
id="xpack.aiops.explainLogRateSpikes.spikeAnalysisTableGroups.moreRepeatedLabel"
defaultMessage="+{count, plural, one {# more field/value pair} other {# more field/value pairs}} also appearing in other groups"
values={{ count: Object.keys(repeatedValues).length }}
/>
) : null}
</EuiBadge>
<EuiSpacer size="xs" />
</>