import React, { useContext, useEffect, useState } from 'react'; import getServers, { Context as ServersContext } from '@/api/admin/servers/getServers'; import AdminCheckbox from '@/components/admin/AdminCheckbox'; import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader } from '@/components/admin/AdminTable'; import Button from '@/components/elements/Button'; import CopyOnClick from '@/components/elements/CopyOnClick'; import FlashMessageRender from '@/components/FlashMessageRender'; import useFlash from '@/plugins/useFlash'; import { AdminContext } from '@/state/admin'; import { NavLink, useRouteMatch } from 'react-router-dom'; import tw from 'twin.macro'; import AdminContentBlock from '@/components/admin/AdminContentBlock'; const RowCheckbox = ({ id }: { id: number }) => { const isChecked = AdminContext.useStoreState(state => state.servers.selectedServers.indexOf(id) >= 0); const appendSelectedServer = AdminContext.useStoreActions(actions => actions.servers.appendSelectedServer); const removeSelectedServer = AdminContext.useStoreActions(actions => actions.servers.removeSelectedServer); return ( ) => { if (e.currentTarget.checked) { appendSelectedServer(id); } else { removeSelectedServer(id); } }} /> ); }; const UsersContainer = () => { const match = useRouteMatch(); const { page, setPage } = useContext(ServersContext); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { data: servers, error, isValidating } = getServers([ 'node', 'user' ]); useEffect(() => { if (!error) { clearFlashes('servers'); return; } clearAndAddHttpError({ key: 'servers', error }); }, [ error ]); const length = servers?.items?.length || 0; const setSelectedServers = AdminContext.useStoreActions(actions => actions.servers.setSelectedServers); const selectedServerLength = AdminContext.useStoreState(state => state.servers.selectedServers.length); const onSelectAllClick = (e: React.ChangeEvent) => { setSelectedServers(e.currentTarget.checked ? (servers?.items?.map(server => server.id) || []) : []); }; useEffect(() => { setSelectedServers([]); }, [ page ]); return (

Servers

All servers available on the system.

{ servers === undefined || (error && isValidating) ? : length < 1 ? :
{ servers.items.map(server => ( {/* TODO: Have permission check for displaying user information. */} {/* TODO: Have permission check for displaying node information. */} )) }
{server.identifier} {server.name}
{server.relations.user?.firstName} {server.relations.user?.lastName}
{server.relations.user?.email}
{server.relations.node?.name}
{server.relations.node?.fqdn}:{server.relations.node?.daemonListen}
{ server.isInstalling ? Installing : server.isTransferring ? Transferring : server.isSuspended ? Suspended : Active }
}
); }; export default () => { const [ page, setPage ] = useState(1); return ( ); };