You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.3 KiB
132 lines
3.3 KiB
import Head from 'next/head'; |
|
import { FC, useState } from 'react'; |
|
import { Box, Divider } from '@mui/material'; |
|
|
|
import API_BASE_URL from '../lib/consts/API_BASE_URL'; |
|
import { DIVIDER } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
import { Preview } from '../components/Display'; |
|
import Header from '../components/Header'; |
|
import OutlinedInput from '../components/OutlinedInput'; |
|
import { Panel, PanelHeader } from '../components/Panels'; |
|
import periodicFetch from '../lib/fetchers/periodicFetch'; |
|
import Spinner from '../components/Spinner'; |
|
|
|
const createServerPreviewContainer = (servers: ServerOverviewMetadata[]) => ( |
|
<Box |
|
sx={{ |
|
display: 'flex', |
|
flexDirection: 'row', |
|
flexWrap: 'wrap', |
|
|
|
'& > *': { |
|
width: { xs: '20em', md: '30em' }, |
|
}, |
|
}} |
|
> |
|
{servers.map(({ serverName, serverUUID }) => ( |
|
<Preview |
|
key={`server-preview-${serverUUID}`} |
|
isShowControls={false} |
|
isUseInnerPanel |
|
serverName={serverName} |
|
uuid={serverUUID} |
|
/> |
|
))} |
|
</Box> |
|
); |
|
|
|
const filterServers = ( |
|
allServers: ServerOverviewMetadata[], |
|
searchTerm: string, |
|
) => |
|
searchTerm === '' |
|
? { |
|
exclude: allServers, |
|
include: [], |
|
} |
|
: allServers.reduce<{ |
|
exclude: ServerOverviewMetadata[]; |
|
include: ServerOverviewMetadata[]; |
|
}>( |
|
(reduceContainer, server) => { |
|
const { serverName } = server; |
|
|
|
if (serverName.includes(searchTerm)) { |
|
reduceContainer.include.push(server); |
|
} else { |
|
reduceContainer.exclude.push(server); |
|
} |
|
|
|
return reduceContainer; |
|
}, |
|
{ exclude: [], include: [] }, |
|
); |
|
|
|
const Dashboard: FC = () => { |
|
const [allServers, setAllServers] = useState<ServerOverviewMetadata[]>([]); |
|
const [excludeServers, setExcludeServers] = useState< |
|
ServerOverviewMetadata[] |
|
>([]); |
|
const [includeServers, setIncludeServers] = useState< |
|
ServerOverviewMetadata[] |
|
>([]); |
|
|
|
const [inputSearchTerm, setInputSearchTerm] = useState<string>(''); |
|
|
|
const updateServerList = ( |
|
...filterArgs: Parameters<typeof filterServers> |
|
) => { |
|
const { exclude, include } = filterServers(...filterArgs); |
|
|
|
setExcludeServers(exclude); |
|
setIncludeServers(include); |
|
}; |
|
|
|
const { isLoading } = periodicFetch<ServerOverviewMetadata[]>( |
|
`${API_BASE_URL}/server`, |
|
{ |
|
onSuccess: (data = []) => { |
|
setAllServers(data); |
|
|
|
updateServerList(data, inputSearchTerm); |
|
}, |
|
refreshInterval: 60000, |
|
}, |
|
); |
|
|
|
return ( |
|
<Box> |
|
<Head> |
|
<title>Dashboard</title> |
|
</Head> |
|
<Header /> |
|
<Panel> |
|
{isLoading ? ( |
|
<Spinner /> |
|
) : ( |
|
<> |
|
<PanelHeader> |
|
<OutlinedInput |
|
placeholder="Search by server name" |
|
onChange={({ target: { value } }) => { |
|
setInputSearchTerm(value); |
|
|
|
updateServerList(allServers, value); |
|
}} |
|
value={inputSearchTerm} |
|
/> |
|
</PanelHeader> |
|
{createServerPreviewContainer(includeServers)} |
|
{includeServers.length > 0 && ( |
|
<Divider sx={{ backgroundColor: DIVIDER }} /> |
|
)} |
|
{createServerPreviewContainer(excludeServers)} |
|
</> |
|
)} |
|
</Panel> |
|
</Box> |
|
); |
|
}; |
|
|
|
export default Dashboard;
|
|
|