Skip to content

Commit

Permalink
[8.6] [ML] Explain Log Rate Spikes: improve the display of large grou…
Browse files Browse the repository at this point in the history 
…ps (#145609) (#145934)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[ML] Explain Log Rate Spikes: improve the display of large groups
(#145609)](#145609)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Melissa
Alvarez","email":"[email protected]"},"sourceCommit":{"committedDate":"2022-11-21T20:21:14Z","message":"[ML]
Explain Log Rate Spikes: improve the display of large groups
(#145609)\n\n## Summary\r\n\r\nRelated meta issue:
https://github.com/elastic/kibana/issues/142626\r\n\r\nImproves the
display of large groups by limiting the badges displayed to\r\n10 and
updates the +more badge.\r\n\r\n<img width=\"1066\" alt=\"image
(2)\"\r\nsrc=\"https://user-images.githubusercontent.com/6446462/202530438-210c7005-feb6-4e76-9bbd-48eb6b26293e.png\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn
more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"95dd36893232d9b6802799dc27ca911c59dee629","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","cosmetic","release_note:skip","Feature:ML/AIOps","v8.6.0","v8.7.0"],"number":145609,"url":"https://github.com/elastic/kibana/pull/145609","mergeCommit":{"message":"[ML]
Explain Log Rate Spikes: improve the display of large groups
(#145609)\n\n## Summary\r\n\r\nRelated meta issue:
https://github.com/elastic/kibana/issues/142626\r\n\r\nImproves the
display of large groups by limiting the badges displayed to\r\n10 and
updates the +more badge.\r\n\r\n<img width=\"1066\" alt=\"image
(2)\"\r\nsrc=\"https://user-images.githubusercontent.com/6446462/202530438-210c7005-feb6-4e76-9bbd-48eb6b26293e.png\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn
more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"95dd36893232d9b6802799dc27ca911c59dee629"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145609","number":145609,"mergeCommit":{"message":"[ML]
Explain Log Rate Spikes: improve the display of large groups
(#145609)\n\n## Summary\r\n\r\nRelated meta issue:
https://github.com/elastic/kibana/issues/142626\r\n\r\nImproves the
display of large groups by limiting the badges displayed to\r\n10 and
updates the +more badge.\r\n\r\n<img width=\"1066\" alt=\"image
(2)\"\r\nsrc=\"https://user-images.githubusercontent.com/6446462/202530438-210c7005-feb6-4e76-9bbd-48eb6b26293e.png\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn
more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n\r\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"95dd36893232d9b6802799dc27ca911c59dee629"}}]}]
BACKPORT-->

Co-authored-by: Melissa Alvarez <[email protected]>
  • Loading branch information
@kibanamachine @alvarezmelissa87
kibanamachine and alvarezmelissa87 authored Nov 22, 2022
1 parent c26fc86 commit 7fdd692
Showing 1 changed file with 22 additions and 6 deletions.
28 changes: 22 additions & 6 deletions x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table_groups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,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';
Expand Down Expand Up @@ -250,8 +251,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
Expand All @@ -269,19 +273,31 @@ export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
);
}
}
if (Object.keys(repeatedValues).length > 0) {
if (Object.keys(repeatedValues).length > 0 || hasExtraBadges) {
valuesBadges.push(
<>
<EuiBadge
key={`$more-id`}
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" />
</>
Expand Down

0 comments on commit 7fdd692

Please sign in to comment.