Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Mar 16, 2020
Merged

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac64b4f
Pass the whole item to the row expansion callback
weltenwort Mar 13, 2020
33c631d
Merge branch 'master' into logs-ui-log-rate-fix-table-row-expansion
elasticmachine Mar 16, 2020
bb43610
Correctly type the `TableItem` and callbacks
weltenwort Mar 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 20 additions & 18 deletions x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
}

Expand Down Expand Up @@ -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),
};
});
Expand Down Expand Up @@ -91,19 +90,19 @@ 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);
}
return sorting.sort.direction === 'asc' ? sortedItems : sortedItems.reverse();
}, [tableItems, sorting]);

const expandItem = useCallback(
item => {
(item: TableItem) => {
const newItemIdToExpandedRowMap = {
...itemIdToExpandedRowMap,
[item.id]: (
[item.partitionName]: (
<AnomaliesTableExpandedRow
partitionId={item.partitionId}
results={results}
Expand All @@ -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,
Expand All @@ -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}
/>
Expand All @@ -161,7 +163,7 @@ export const AnomaliesTable: React.FunctionComponent<{
return (
<StyledEuiBasicTable
items={sortedTableItems}
itemId="id"
itemId="partitionName"
itemIdToExpandedRowMap={itemIdToExpandedRowMap}
isExpandable={true}
hasActions={true}
Expand Down