use euiIconTip to mark unique pairs

elastic · Jan 10, 2023 · 1f5666f · 1f5666f
1 parent 0d4b8a7
commit 1f5666f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/x-pack/packages/ml/agg_utils/src/types.ts b/x-pack/packages/ml/agg_utils/src/types.ts
@@ -68,6 +68,7 @@ export interface ChangePoint extends FieldValuePair {
   pValue: number | null;
   normalizedScore: number;
   histogram?: ChangePointHistogramItem[];
+  unique?: boolean;
 }
 
 /**

diff --git a/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table.tsx b/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table.tsx
@@ -14,6 +14,7 @@ import {
   EuiBasicTable,
   EuiBasicTableColumn,
   EuiIcon,
+  EuiIconTip,
   EuiTableSortingType,
   EuiToolTip,
 } from '@elastic/eui';
@@ -34,6 +35,7 @@ import { useSpikeAnalysisTableRowContext } from './spike_analysis_table_row_prov
 
 const NARROW_COLUMN_WIDTH = '120px';
 const ACTIONS_COLUMN_WIDTH = '60px';
+const UNIQUE_COLUMN_WIDTH = '40px';
 const NOT_AVAILABLE = '--';
 
 const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50];
@@ -50,12 +52,14 @@ interface SpikeAnalysisTableProps {
   changePoints: ChangePoint[];
   dataViewId?: string;
   loading: boolean;
+  isExpandedRow?: boolean;
 }
 
 export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
   changePoints,
   dataViewId,
   loading,
+  isExpandedRow,
 }) => {
   const euiTheme = useEuiTheme();
   const primaryBackgroundColor = useEuiBackgroundColor('primary');
@@ -278,6 +282,34 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
     },
   ];
 
+  if (isExpandedRow === true) {
+    columns.unshift({
+      'data-test-subj': 'aiopsSpikeAnalysisTableColumnUnique',
+      width: UNIQUE_COLUMN_WIDTH,
+      field: 'unique',
+      name: '',
+      render: (_, { unique }) => {
+        if (unique) {
+          return (
+            <EuiIconTip
+              content={i18n.translate(
+                'xpack.aiops.explainLogRateSpikes.spikeAnalysisTable.uniqueColumnTooltip',
+                {
+                  defaultMessage: 'This field/value pair only appears in this group',
+                }
+              )}
+              position="top"
+              type="asterisk"
+            />
+          );
+        }
+        return '';
+      },
+      sortable: false,
+      valign: 'top',
+    });
+  }
+
   const onChange = useCallback((tableSettings) => {
     const { index, size } = tableSettings.page;
     const { field, direction } = tableSettings.sort;

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
@@ -84,14 +84,13 @@ export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
     useSpikeAnalysisTableRowContext();
 
   const pushExpandedTableItem = (
-    expandedTableItems: FieldValuePair[],
+    expandedTableItems: ChangePoint[],
     items: FieldValuePair[],
-    appendString?: string
+    unique = false
   ) => {
     for (const groupItem of items) {
       const { fieldName, fieldValue } = groupItem;
-
-      expandedTableItems.push({
+      const itemToPush = {
         ...(changePoints.find(
           (changePoint) =>
             (changePoint.fieldName === fieldName ||
@@ -100,8 +99,11 @@ export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
               changePoint.fieldValue === `${fieldValue}.keyword`)
         ) ?? {}),
         fieldName: `${fieldName}`,
-        fieldValue: `${fieldValue} ${appendString ? appendString : ''}`,
-      });
+        fieldValue: `${fieldValue}`,
+        unique,
+      } as ChangePoint;
+
+      expandedTableItems.push(itemToPush);
     }
     return expandedTableItems;
   };
@@ -112,16 +114,17 @@ export const SpikeAnalysisGroupsTable: FC<SpikeAnalysisTableProps> = ({
       delete itemIdToExpandedRowMapValues[item.id];
     } else {
       const { group, repeatedValues } = item;
-      const expandedTableItems: FieldValuePair[] = [];
+      const expandedTableItems: ChangePoint[] = [];
 
-      pushExpandedTableItem(expandedTableItems, group, '*');
+      pushExpandedTableItem(expandedTableItems, group, true);
       pushExpandedTableItem(expandedTableItems, repeatedValues);
 
       itemIdToExpandedRowMapValues[item.id] = (
         <SpikeAnalysisTable
           changePoints={expandedTableItems as ChangePoint[]}
           loading={loading}
           dataViewId={dataViewId}
+          isExpandedRow
         />
       );
     }