owncast/web/components/client-table.tsx

99 lines
3.2 KiB
TypeScript
Raw Normal View History

import { Input, Table } from 'antd';
import { FilterDropdownProps, SortOrder } from 'antd/lib/table/interface';
2021-07-20 08:02:02 +03:00
import { ColumnsType } from 'antd/es/table';
import { SearchOutlined } from '@ant-design/icons';
2021-07-20 08:02:02 +03:00
import { formatDistanceToNow } from 'date-fns';
import { Client } from '../types/chat';
import UserPopover from './user-popover';
import BanUserButton from './ban-user-button';
import { formatUAstring } from '../utils/format';
export default function ClientTable({ data }: ClientTableProps) {
const columns: ColumnsType<Client> = [
{
title: 'Display Name',
key: 'username',
// eslint-disable-next-line react/destructuring-assignment
render: (client: Client) => {
const { user, connectedAt, messageCount, userAgent } = client;
const connectionInfo = { connectedAt, messageCount, userAgent };
return (
<UserPopover user={user} connectionInfo={connectionInfo}>
<span className="display-name">{user.displayName}</span>
</UserPopover>
);
},
sorter: (a: any, b: any) => b.user.displayName.localeCompare(a.user.displayName),
filterIcon: <SearchOutlined />,
// eslint-disable-next-line react/no-unstable-nested-components
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }: FilterDropdownProps) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search display names..."
value={selectedKeys[0]}
onChange={e => {
setSelectedKeys(e.target.value ? [e.target.value] : []);
confirm({ closeDropdown: false });
}}
/>
</div>
),
onFilter: (value: string, record: Client) => record.user.displayName.includes(value),
2021-07-20 08:02:02 +03:00
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: 'Messages sent',
dataIndex: 'messageCount',
key: 'messageCount',
className: 'number-col',
Admin social features (#408) * ActivityPub admin pages for configuration * Fix dev build * Add support for requiring follow approval. Closes https://github.com/owncast/owncast/issues/1208 * Point at admin version of followers endpoint * Add setting for toggling displaying fediverse engagement in admin. https://github.com/owncast/owncast/issues/1404 * Add instance URL textfield to federation config and disable federation if it is empty * If instance URL is not https disable federation * Tweak federation toggle text. Make go live message optional * Add federation info modal. Closes https://github.com/owncast/owncast/issues/1544 * Add support for blocked federated domains. For https://github.com/owncast/owncast/issues/1209 * Simplify fediverse post input * Add placeholder Fediverse icon * Tweak federation logo in admin menu. Closes https://github.com/owncast/owncast/issues/1603 * Add global button for composing a fediverse post. Closes https://github.com/owncast/owncast/issues/1610 * Federation -> Social * Add page for listing federated actions. Closes https://github.com/owncast/owncast/issues/1573 * Auto-close social post modal after success * Make user modal action buttons look nicer * Center and reduce width and center count column. Closes https://github.com/owncast/owncast/issues/1580 * Update the followers table to be clearer * Fix exception thrown when passing undefined * Disable federation settings if feature is disabled * Update enable social modal. For https://github.com/owncast/owncast/issues/1594 * Fix type props * Quiet, linter * Move compose button to the left * Add tooltip for compose button * Add NSFW toggle to federation config. Closes https://github.com/owncast/owncast/issues/1628 * Add support for blocking/removing followers. For https://github.com/owncast/owncast/issues/1630 * Allow editing the server url field even when federation is disabled * Continue to update the copy around the social features * Use relative path to action images. Fixes https://github.com/owncast/owncast/issues/1646 * Link IRIs and make action verbse present tense * Update caniuse
2022-01-13 00:52:37 +03:00
width: '12%',
2021-07-20 08:02:02 +03:00
sorter: (a: any, b: any) => a.messageCount - b.messageCount,
sortDirections: ['descend', 'ascend'] as SortOrder[],
Admin social features (#408) * ActivityPub admin pages for configuration * Fix dev build * Add support for requiring follow approval. Closes https://github.com/owncast/owncast/issues/1208 * Point at admin version of followers endpoint * Add setting for toggling displaying fediverse engagement in admin. https://github.com/owncast/owncast/issues/1404 * Add instance URL textfield to federation config and disable federation if it is empty * If instance URL is not https disable federation * Tweak federation toggle text. Make go live message optional * Add federation info modal. Closes https://github.com/owncast/owncast/issues/1544 * Add support for blocked federated domains. For https://github.com/owncast/owncast/issues/1209 * Simplify fediverse post input * Add placeholder Fediverse icon * Tweak federation logo in admin menu. Closes https://github.com/owncast/owncast/issues/1603 * Add global button for composing a fediverse post. Closes https://github.com/owncast/owncast/issues/1610 * Federation -> Social * Add page for listing federated actions. Closes https://github.com/owncast/owncast/issues/1573 * Auto-close social post modal after success * Make user modal action buttons look nicer * Center and reduce width and center count column. Closes https://github.com/owncast/owncast/issues/1580 * Update the followers table to be clearer * Fix exception thrown when passing undefined * Disable federation settings if feature is disabled * Update enable social modal. For https://github.com/owncast/owncast/issues/1594 * Fix type props * Quiet, linter * Move compose button to the left * Add tooltip for compose button * Add NSFW toggle to federation config. Closes https://github.com/owncast/owncast/issues/1628 * Add support for blocking/removing followers. For https://github.com/owncast/owncast/issues/1630 * Allow editing the server url field even when federation is disabled * Continue to update the copy around the social features * Use relative path to action images. Fixes https://github.com/owncast/owncast/issues/1646 * Link IRIs and make action verbse present tense * Update caniuse
2022-01-13 00:52:37 +03:00
render: (count: number) => <div style={{ textAlign: 'center' }}>{count}</div>,
2021-07-20 08:02:02 +03:00
},
{
title: 'Connected Time',
dataIndex: 'connectedAt',
key: 'connectedAt',
defaultSortOrder: 'ascend',
render: (time: Date) => formatDistanceToNow(new Date(time)),
sorter: (a: any, b: any) =>
new Date(b.connectedAt).getTime() - new Date(a.connectedAt).getTime(),
2021-07-20 08:02:02 +03:00
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: 'User Agent',
dataIndex: 'userAgent',
key: 'userAgent',
render: (ua: string) => formatUAstring(ua),
},
{
title: 'Location',
dataIndex: 'geo',
key: 'geo',
render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),
},
{
title: '',
key: 'block',
className: 'actions-col',
render: (_, row) => <BanUserButton user={row.user} isEnabled={!row.user.disabledAt} />,
},
];
return (
<Table
className="table-container"
pagination={{ hideOnSinglePage: true }}
columns={columns}
dataSource={data}
size="small"
rowKey="id"
/>
);
}
interface ClientTableProps {
data: Client[];
}