[ML] Explain Log Rate Spikes: improve the display of large groups (el…

…astic#145609)

## Summary

Related meta issue: elastic#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 <[email protected]>

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

@@ -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,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" />
             </>