* Copyright (C) 2019 Red Hat, Inc.
* SPDX-License-Identifier: LGPL-2.1-or-later
*/
import cockpit from 'cockpit';
import React, { useState, useEffect } from 'react';
import {
ExpandableRowContent,
Table, Thead, Tbody, Tr, Th, Td,
SortByDirection,
} from '@patternfly/react-table';
import type {
TdProps, ThProps, TrProps, TableProps,
OnSelect,
} from '@patternfly/react-table';
import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from "@patternfly/react-core/dist/esm/components/EmptyState/index.js";
import { Content, ContentVariants } from "@patternfly/react-core/dist/esm/components/Content/index.js";
import './cockpit-components-table.scss';
const _ = cockpit.gettext;
* See https://www.patternfly.org/components/table/
* Properties (all optional unless specified otherwise):
* - caption
* - id: optional identifier
* - className: additional classes added to the Table
* - actions: additional listing-wide actions (displayed next to the list's title)
* - columns: { title: string, header: boolean, sortable: boolean }[] or string[]
* - rows: {
* columns: (React.Node or string or { title: string, key: string, ...extraProps: object}}[]
Through extraProps the consumers can pass arbitrary properties to the <td>
* props: { key: string, ...extraProps: object }
This property is mandatory and should contain a unique `key`, all additional properties are optional.
Through extraProps the consumers can pass arbitrary properties to the <tr>
* expandedContent: (React.Node)[])
* selected: boolean option if the row is selected
* initiallyExpanded : the entry will be initially rendered as expanded, but then behaves normally
* }[]
* - emptyCaption: header caption to show if list is empty
* - emptyCaptionDetail: extra details to show after emptyCaption if list is empty
* - emptyComponent: Whole empty state component to show if the list is empty
* - isEmptyStateInTable: if empty state is result of a filter function this should be set, otherwise false
* - loading: Set to string when the content is still loading. This string is shown.
* - variant: For compact tables pass 'compact'
* - gridBreakPoint: Specifies the grid breakpoints ('', 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl')
* - sortBy: { index: Number, direction: SortByDirection }
* - sortMethod: callback function used for sorting rows. Called with 3 parameters: sortMethod(rows, activeSortDirection, activeSortIndex)
* - style: object of additional css rules
* - afterToggle: function to be called when content is toggled
* - onExpand: function to be called when content is expanded
* - onSelect: function to be called when a checkbox is clicked. Called with 5 parameters:
* event, isSelected, rowIndex, rowData, extraData. rowData contains props with an id property of the clicked row.
* - onHeaderSelect: event, isSelected.
*/
interface ListingTableRowColumnProps {
title: React.ReactNode;
sortKey?: string;
props?: TdProps | ThProps;
}
type ListingTableRowColumn = React.ReactNode | ListingTableRowColumnProps;
function cell_is_props(cell: ListingTableRowColumn): cell is ListingTableRowColumnProps {
return typeof cell == "object" && (cell as ListingTableRowColumnProps).title !== undefined;
}
export interface ListingTableRowProps {
columns: ListingTableRowColumn[];
props?: TrProps;
expandedContent?: React.ReactNode;
selected?: boolean;
initiallyExpanded?: boolean;
hasPadding?: boolean;
}
export interface ListingTableColumnProps {
title: string;
header?: boolean;
sortable?: boolean;
props?: ThProps;
}
export type RowRecord = Record<string | number, boolean>;
export interface ListingTableProps extends Omit<TableProps, 'rows' | 'onSelect'> {
actions?: React.ReactNode[],
afterToggle?: (expanded: boolean) => void,
onExpand?: (rows: RowRecord) => void,
caption?: string,
className?: string,
columns: (string | ListingTableColumnProps)[],
emptyCaption?: React.ReactNode,
emptyCaptionDetail?: React.ReactNode,
emptyComponent?: React.ReactNode,
isEmptyStateInTable?: boolean,
loading?: string,
onRowClick?: (event: React.KeyboardEvent | React.MouseEvent | undefined, row: ListingTableRowProps) => void,
onSelect?: OnSelect;
onHeaderSelect?: OnSelect,
rows: ListingTableRowProps[],
showHeader?: boolean,
sortBy?: { index: number, direction: SortByDirection },
sortMethod?: (rows: ListingTableRowProps[], dir: SortByDirection, index: number) => ListingTableRowProps[],
}
export const ListingTable = ({
actions = [],
afterToggle,
onExpand,
caption = '',
className = '',
columns: cells = [],
emptyCaption = '',
emptyCaptionDetail,
emptyComponent,
isEmptyStateInTable = false,
loading = '',
onRowClick,
onSelect,
onHeaderSelect,
rows: tableRows = [],
showHeader = true,
sortBy,
sortMethod,
...extraProps
} : ListingTableProps) => {
let rows = [...tableRows];
const [expanded, setExpanded] = useState<RowRecord>({});
const [newItems, setNewItems] = useState<React.Key[]>([]);
const [currentRowsKeys, setCurrentRowsKeys] = useState<React.Key[]>([]);
const [activeSortIndex, setActiveSortIndex] = useState(sortBy?.index ?? 0);
const [activeSortDirection, setActiveSortDirection] = useState(sortBy?.direction ?? SortByDirection.asc);
const rowKeys = rows.map(row => row.props?.key)
.filter(key => key !== undefined);
const rowKeysStr = JSON.stringify(rowKeys);
const currentRowsKeysStr = JSON.stringify(currentRowsKeys);
useEffect(() => {
const _currentRowsKeys: React.Key[] = JSON.parse(currentRowsKeysStr);
const _rowKeys: React.Key[] = JSON.parse(rowKeysStr);
if (_currentRowsKeys.length !== 0) {
const new_keys = _rowKeys.filter(key => _currentRowsKeys.indexOf(key) === -1);
if (new_keys.length) {
setTimeout(() => setNewItems(items => items.filter(item => new_keys.indexOf(item) < 0)), 4000);
setNewItems(ni => [...ni, ...new_keys]);
}
}
setCurrentRowsKeys(crk => [...new Set([...crk, ..._rowKeys])]);
}, [currentRowsKeysStr, rowKeysStr]);
useEffect(() => {
if (onExpand)
onExpand(expanded);
}, [expanded, onExpand]);
const isSortable = cells.some(col => typeof col != "string" && col.sortable);
const isExpandable = rows.some(row => row.expandedContent);
const tableProps: TableProps = {
hasAnimations: true,
isExpandable
};
tableProps.className = "ct-table";
if (className)
tableProps.className = tableProps.className + " " + className;
if (rows.length === 0)
tableProps.className += ' ct-table-empty';
const header = (
(caption || actions.length !== 0)
? <header className='ct-table-header'>
<h3 className='ct-table-heading'> {caption} </h3>
{actions && <div className='ct-table-actions'> {actions} </div>}
</header>
: null
);
if (loading)
return <EmptyState>
<EmptyStateBody>
{loading}
</EmptyStateBody>
</EmptyState>;
if (rows.length === 0) {
let emptyState = null;
if (emptyComponent)
emptyState = emptyComponent;
else
emptyState = (
<EmptyState>
<EmptyStateBody>
<div>{emptyCaption}</div>
<Content component={ContentVariants.small}>
{emptyCaptionDetail}
</Content>
</EmptyStateBody>
{actions.length > 0 &&
<EmptyStateFooter>
<EmptyStateActions>{actions}</EmptyStateActions>
</EmptyStateFooter>}
</EmptyState>
);
if (!isEmptyStateInTable)
return emptyState;
const emptyStateCell = (
[{
props: { colSpan: cells.length },
title: emptyState
}]
);
rows = [{ columns: emptyStateCell }];
}
const sortRows = (): ListingTableRowProps[] => {
function sortkey(col: ListingTableRowColumn): string {
if (typeof col == "string")
return col;
if (cell_is_props(col)) {
if (col.sortKey)
return col.sortKey;
if (typeof col.title == "string")
return col.title;
}
return "";
}
const sortedRows = rows.sort((a, b) => {
const aitem = a.columns[activeSortIndex];
const bitem = b.columns[activeSortIndex];
return sortkey(aitem).localeCompare(sortkey(bitem));
});
return activeSortDirection === SortByDirection.asc ? sortedRows : sortedRows.reverse();
};
const onSort = (_event: unknown, index: number, direction: SortByDirection) => {
setActiveSortIndex(index);
setActiveSortDirection(direction);
};
const rowsComponents = (isSortable ? (sortMethod ? sortMethod(rows, activeSortDirection, activeSortIndex) : sortRows()) : rows).map((row, rowIndex) => {
const rowProps = row.props || {};
if (onRowClick) {
rowProps.isClickable = true;
rowProps.onRowClick = (event) => onRowClick(event, row);
}
if (rowProps.key && newItems.indexOf(rowProps.key) >= 0)
rowProps.className = (rowProps.className || "") + " ct-new-item";
cockpit.assert(typeof rowProps.key != "bigint");
const rowKey = rowProps.key || rowIndex;
const isExpanded = expanded[rowKey] === undefined ? !!row.initiallyExpanded : expanded[rowKey];
if (isExpandable) {
rowProps.isContentExpanded = Boolean(row.expandedContent) && isExpanded;
}
let columnSpanCnt = 0;
const rowPair = (
<React.Fragment key={rowKey + "-inner-row"}>
<Tr {...rowProps}>
{isExpandable
? (row.expandedContent
? <Td
data-ouia-component-id={`toggle-${rowKey.toString()}`}
expand={{
rowIndex,
isExpanded,
onToggle: () => {
if (afterToggle)
afterToggle(!expanded[rowKey]);
setExpanded({ ...expanded, [rowKey]: !expanded[rowKey] });
}
}} />
: <Td className="pf-v6-c-table__toggle" />)
: null
}
{onSelect &&
<Td select={{
rowIndex,
onSelect,
isSelected: !!row.selected,
props: {
id: rowKey
}
}} />
}
{row.columns.map(cell => {
let props: TdProps | ThProps;
let children: React.ReactNode;
if (cell_is_props(cell)) {
props = cell.props || {};
children = cell.title;
} else {
props = {};
children = cell;
}
const { key, ...cellProps } = props;
const headerCell = cells[columnSpanCnt];
const dataLabel = typeof headerCell == 'object' ? headerCell.title : headerCell;
const colKey = dataLabel || columnSpanCnt;
columnSpanCnt += cellProps.colSpan || 1;
if (typeof headerCell != "string" && headerCell?.header) {
return (
<Th key={key || `row_${rowKey}_cell_${colKey}`} dataLabel={dataLabel}
{...cellProps as ThProps}>
{children}
</Th>
);
}
return (
<Td key={key || `row_${rowKey}_cell_${colKey}`} dataLabel={dataLabel}
{...cellProps as TdProps}>
{children}
</Td>
);
})}
</Tr>
{row.expandedContent && <Tr id={"expanded-content" + rowIndex} isExpanded={isExpanded}>
<Td noPadding={row.hasPadding !== true} colSpan={row.columns.length + 1 + (onSelect ? 1 : 0)}>
<ExpandableRowContent>{row.expandedContent}</ExpandableRowContent>
</Td>
</Tr>}
</React.Fragment>
);
return <Tbody key={rowKey} isExpanded={Boolean(row.expandedContent) && isExpanded}>{rowPair}</Tbody>;
});
return (
<>
{header}
<Table {...extraProps} {...tableProps}>
{showHeader && <Thead>
<Tr>
{
We should probably be using screenReaderText instead of aria-label
for the first two here, but that will change the table layout.
*/}
{isExpandable && <Th aria-label={_("Row expansion")} />}
{!onHeaderSelect && onSelect && <Th aria-label={_("Row select")} />}
{onHeaderSelect && onSelect && <Th aria-label={_("Row select")} select={{
onSelect: onHeaderSelect,
isSelected: rows.every(r => r.selected)
}} />}
{cells.map((column, columnIndex) => {
const columnProps = typeof column == "string" ? {} : column.props;
const sortParams = (
(typeof column != "string" && column.sortable)
? {
sort: {
sortBy: {
index: activeSortIndex,
direction: activeSortDirection
},
onSort,
columnIndex
}
}
: {}
);
return (
<Th key={columnIndex} {...columnProps} {...sortParams}>
{typeof column == 'object' ? column.title : column}
</Th>
);
})}
</Tr>
</Thead>}
{rowsComponents}
</Table>
</>
);
};
