import { Filters } from '@/api/admin/servers/getServers'; import React, { useContext, useEffect, useState } from 'react'; import getNodes, { Context as NodesContext } from '@/api/admin/nodes/getNodes'; 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'; import AdminCheckbox from '@/components/admin/AdminCheckbox'; import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable'; import Button from '@/components/elements/Button'; import CopyOnClick from '@/components/elements/CopyOnClick'; import { bytesToHuman, megabytesToBytes } from '@/helpers'; const RowCheckbox = ({ id }: { id: number}) => { const isChecked = AdminContext.useStoreState(state => state.nodes.selectedNodes.indexOf(id) >= 0); const appendSelectedNode = AdminContext.useStoreActions(actions => actions.nodes.appendSelectedNode); const removeSelectedNode = AdminContext.useStoreActions(actions => actions.nodes.removeSelectedNode); return ( ) => { if (e.currentTarget.checked) { appendSelectedNode(id); } else { removeSelectedNode(id); } }} /> ); }; const NodesContainer = () => { const match = useRouteMatch(); const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(NodesContext); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { data: nodes, error, isValidating } = getNodes([ 'location' ]); useEffect(() => { if (!error) { clearFlashes('nodes'); return; } clearAndAddHttpError({ key: 'nodes', error }); }, [ error ]); const length = nodes?.items?.length || 0; const setSelectedNodes = AdminContext.useStoreActions(actions => actions.nodes.setSelectedNodes); const selectedNodesLength = AdminContext.useStoreState(state => state.nodes.selectedNodes.length); const onSelectAllClick = (e: React.ChangeEvent) => { setSelectedNodes(e.currentTarget.checked ? (nodes?.items?.map(node => node.id) || []) : []); }; const onSearch = (query: string): Promise => { return new Promise((resolve) => { if (query.length < 2) { setFilters(null); } else { setFilters({ name: query }); } return resolve(); }); }; useEffect(() => { setSelectedNodes([]); }, [ page ]); return (

Nodes

All nodes available on the system.

{ nodes === undefined || (error && isValidating) ? : length < 1 ? :
setSort('id')}/> setSort('name')}/> setSort('location_id')}/> setSort('fqdn')}/> setSort('memory')}/> setSort('disk')}/> { nodes.items.map(node => ( {/* TODO: Have permission check for displaying location information. */} )) }
{node.id} {node.name}
{node.relations.location?.short}
{node.relations.location?.long}
{node.fqdn} {bytesToHuman(megabytesToBytes(node.memory))} {bytesToHuman(megabytesToBytes(node.disk))} {node.scheme === 'https' ? Secure : Non-Secure } {/* TODO: Change color based off of online/offline status */}
}
); }; export default () => { const [ page, setPage ] = useState(1); const [ filters, setFilters ] = useState(null); const [ sort, setSortState ] = useState(null); const [ sortDirection, setSortDirection ] = useState(false); const setSort = (newSort: string | null) => { if (sort === newSort) { setSortDirection(!sortDirection); } else { setSortState(newSort); setSortDirection(false); } }; return ( ); };