diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx index f8a7f12364cf9..11ea137c95a1f 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx @@ -21,7 +21,6 @@ import { AnomaliesChart } from './chart'; export const AnomaliesTableExpandedRow: React.FunctionComponent<{ partitionId: string; - topAnomalyScore: number; results: LogEntryRateResults; setTimeRange: (timeRange: TimeRange) => void; timeRange: TimeRange; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx index 5cb5f3a993d48..a9090a90c0b92 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx @@ -8,7 +8,7 @@ import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui'; import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services'; import { i18n } from '@kbn/i18n'; import React, { useCallback, useMemo, useState } from 'react'; - +import { useSet } from 'react-use'; import { euiStyled } from '../../../../../../../observability/public'; import { TimeRange } from '../../../../../../common/http_api/shared/time_range'; import { @@ -64,9 +64,31 @@ export const AnomaliesTable: React.FunctionComponent<{ }); }, [results]); - const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState< - Record - >({}); + const [expandedDatasetIds, { add: expandDataset, remove: collapseDataset }] = useSet( + new Set() + ); + + const expandedDatasetRowContents = useMemo( + () => + [...expandedDatasetIds].reduce>( + (aggregatedDatasetRows, datasetId) => { + return { + ...aggregatedDatasetRows, + [getFriendlyNameForPartitionId(datasetId)]: ( + + ), + }; + }, + {} + ), + [expandedDatasetIds, jobId, results, setTimeRange, timeRange] + ); const [sorting, setSorting] = useState({ sort: { @@ -98,73 +120,43 @@ export const AnomaliesTable: React.FunctionComponent<{ return sorting.sort.direction === 'asc' ? sortedItems : sortedItems.reverse(); }, [tableItems, sorting]); - const expandItem = useCallback( - (item: TableItem) => { - const newItemIdToExpandedRowMap = { - ...itemIdToExpandedRowMap, - [item.partitionName]: ( - > = useMemo( + () => [ + { + field: 'partitionName', + name: partitionColumnName, + sortable: true, + truncateText: true, + }, + { + field: 'topAnomalyScore', + name: maxAnomalyScoreColumnName, + sortable: true, + truncateText: true, + dataType: 'number' as const, + }, + { + align: RIGHT_ALIGNMENT, + width: '40px', + isExpander: true, + render: (item: TableItem) => ( + ), - }; - setItemIdToExpandedRowMap(newItemIdToExpandedRowMap); - }, - [itemIdToExpandedRowMap, jobId, results, setTimeRange, timeRange] + }, + ], + [collapseDataset, expandDataset, expandedDatasetIds] ); - const collapseItem = useCallback( - (item: TableItem) => { - if (itemIdToExpandedRowMap[item.partitionName]) { - const { - [item.partitionName]: toggledItem, - ...remainingExpandedRowMap - } = itemIdToExpandedRowMap; - setItemIdToExpandedRowMap(remainingExpandedRowMap); - } - }, - [itemIdToExpandedRowMap] - ); - - const columns: Array> = [ - { - field: 'partitionName', - name: partitionColumnName, - sortable: true, - truncateText: true, - }, - { - field: 'topAnomalyScore', - name: maxAnomalyScoreColumnName, - sortable: true, - truncateText: true, - dataType: 'number' as const, - }, - { - align: RIGHT_ALIGNMENT, - width: '40px', - isExpander: true, - render: (item: TableItem) => ( - - ), - }, - ]; - return (