mirror of
				https://github.com/owncast/owncast.git
				synced 2025-11-01 02:44:31 +08:00 
			
		
		
		
	 b10ba1dcc2
			
		
	
	b10ba1dcc2
	
	
	
		
			
			* First pass at displaying user data in admin * Hide chat blurb on home page if chat is disabled * Hide sidebar chat section if chat is disabled * Block/unblock user interface for https://github.com/owncast/owncast/issues/1096 * Simplify past display name handling * Updates to reflect the api access token change * Update paths * Clean up the new access token page * Fix linter * Update linter workflow action * Cleanup * Fix exception rendering table row * Commit next-env file that seems to be required with next 11 * chat refactor - admin adjustments (#250) * add useragent parser; clean up some html; * some ui changes - use modal instead of popover to confirm block/unblock user - update styles, table styles for consistency - rename some user/chat labels in nav and content * format user info modal a bit * add some sort of mild treatment and delay while processing ban of users * rename button to 'ban' * add some notes * Prettified Code! * fix disableChat toggle for nav bar * Support sorting the disabled user list * Fix linter error around table sorting * No longer restoring messages on unban so change message prompt * Standardize on forbiddenUsername terminology * The linter broke the webhooks page. Fixed it. Linter is probably pissed. * Move chat welcome message to chat config * Other submenus don't have icons so remove these ones Co-authored-by: gingervitis <omqmail@gmail.com> Co-authored-by: gabek <gabek@users.noreply.github.com>
		
			
				
	
	
		
			81 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			81 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| import { Table } from 'antd';
 | |
| import { SortOrder } from 'antd/lib/table/interface';
 | |
| import { ColumnsType } from 'antd/es/table';
 | |
| 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) => a.user.displayName - b.user.displayName,
 | |
|       sortDirections: ['descend', 'ascend'] as SortOrder[],
 | |
|     },
 | |
|     {
 | |
|       title: 'Messages sent',
 | |
|       dataIndex: 'messageCount',
 | |
|       key: 'messageCount',
 | |
|       className: 'number-col',
 | |
|       sorter: (a: any, b: any) => a.messageCount - b.messageCount,
 | |
|       sortDirections: ['descend', 'ascend'] as SortOrder[],
 | |
|     },
 | |
|     {
 | |
|       title: 'Connected Time',
 | |
|       dataIndex: 'connectedAt',
 | |
|       key: 'connectedAt',
 | |
|       defaultSortOrder: 'ascend',
 | |
|       render: (time: Date) => formatDistanceToNow(new Date(time)),
 | |
|       sorter: (a: any, b: any) =>
 | |
|         new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(),
 | |
|       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[];
 | |
| }
 |