From 7fdd6925cedd7312fa9e8645f7a850f8e20588d6 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 22 Nov 2022 11:25:52 -0500
Subject: [PATCH] [8.6] [ML] Explain Log Rate Spikes: improve the display of
 large groups  (#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)](https://github.com/elastic/kibana/pull/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":"melissa.alvarez@elastic.co"},"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
<42973632+kibanamachine@users.noreply.github.com>","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
<42973632+kibanamachine@users.noreply.github.com>","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
<42973632+kibanamachine@users.noreply.github.com>","sha":"95dd36893232d9b6802799dc27ca911c59dee629"}}]}]
BACKPORT-->

Co-authored-by: Melissa Alvarez <melissa.alvarez@elastic.co>
---
 .../spike_analysis_table_groups.tsx           | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table_groups.tsx b/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table_groups.tsx
index 51f9e38704910..ad022de63bd2c 100644
--- a/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table_groups.tsx
+++ b/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table_groups.tsx
@@ -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';
@@ -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
@@ -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" />
             </>