[Logs UI] Fix log rate table row expansion (#60096)

This fixes the log rate table row expansion button, which broke in #54586 during a refactoring.
This commit is contained in:
Felix Stürmer 2020-03-16 19:47:56 +01:00 committed by GitHub
parent dfff4fd6fa
commit 6cd888f75f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiBasicTable } from '@elastic/eui';
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';
@ -20,8 +20,8 @@ import { LogEntryRateResults } from '../../use_log_entry_rate_results';
import { AnomaliesTableExpandedRow } from './expanded_row';
interface TableItem {
id: string;
partition: string;
partitionName: string;
partitionId: string;
topAnomalyScore: number;
}
@ -55,11 +55,10 @@ export const AnomaliesTable: React.FunctionComponent<{
const tableItems: TableItem[] = useMemo(() => {
return Object.entries(results.partitionBuckets).map(([key, value]) => {
return {
// Note: EUI's table expanded rows won't work with a key of '' in itemIdToExpandedRowMap, so we have to use the friendly name here
id: getFriendlyNameForPartitionId(key),
// The real ID
partitionId: key,
partition: getFriendlyNameForPartitionId(key),
// Note: EUI's table expanded rows won't work with a key of '' in itemIdToExpandedRowMap, so we have to use the friendly name here
partitionName: getFriendlyNameForPartitionId(key),
topAnomalyScore: formatAnomalyScore(value.topAnomalyScore),
};
});
@ -91,8 +90,8 @@ export const AnomaliesTable: React.FunctionComponent<{
const sortedTableItems = useMemo(() => {
let sortedItems: TableItem[] = [];
if (sorting.sort.field === 'partition') {
sortedItems = tableItems.sort((a, b) => (a.partition > b.partition ? 1 : -1));
if (sorting.sort.field === 'partitionName') {
sortedItems = tableItems.sort((a, b) => (a.partitionId > b.partitionId ? 1 : -1));
} else if (sorting.sort.field === 'topAnomalyScore') {
sortedItems = tableItems.sort((a, b) => a.topAnomalyScore - b.topAnomalyScore);
}
@ -100,10 +99,10 @@ export const AnomaliesTable: React.FunctionComponent<{
}, [tableItems, sorting]);
const expandItem = useCallback(
item => {
(item: TableItem) => {
const newItemIdToExpandedRowMap = {
...itemIdToExpandedRowMap,
[item.id]: (
[item.partitionName]: (
<AnomaliesTableExpandedRow
partitionId={item.partitionId}
results={results}
@ -120,18 +119,21 @@ export const AnomaliesTable: React.FunctionComponent<{
);
const collapseItem = useCallback(
item => {
if (itemIdToExpandedRowMap[item.id]) {
const { [item.id]: toggledItem, ...remainingExpandedRowMap } = itemIdToExpandedRowMap;
(item: TableItem) => {
if (itemIdToExpandedRowMap[item.partitionName]) {
const {
[item.partitionName]: toggledItem,
...remainingExpandedRowMap
} = itemIdToExpandedRowMap;
setItemIdToExpandedRowMap(remainingExpandedRowMap);
}
},
[itemIdToExpandedRowMap]
);
const columns = [
const columns: Array<EuiBasicTableColumn<TableItem>> = [
{
field: 'partition',
field: 'partitionName',
name: partitionColumnName,
sortable: true,
truncateText: true,
@ -149,8 +151,8 @@ export const AnomaliesTable: React.FunctionComponent<{
isExpander: true,
render: (item: TableItem) => (
<RowExpansionButton
isExpanded={item.id in itemIdToExpandedRowMap}
item={item.id}
isExpanded={item.partitionName in itemIdToExpandedRowMap}
item={item}
onExpand={expandItem}
onCollapse={collapseItem}
/>
@ -161,7 +163,7 @@ export const AnomaliesTable: React.FunctionComponent<{
return (
<StyledEuiBasicTable
items={sortedTableItems}
itemId="id"
itemId="partitionName"
itemIdToExpandedRowMap={itemIdToExpandedRowMap}
isExpandable={true}
hasActions={true}