forked from Alex/Pterodactyl-Panel
ui(admin): implement user and node servers tab
This commit is contained in:
Matthew Penner
parent
bf9dfa87da
commit
11fc88c849
@ -47,7 +47,7 @@ class ServerController extends ApplicationApiController
|
||||
}
|
||||
|
||||
$servers = QueryBuilder::for(Server::query())
|
||||
->allowedFilters(['uuid', 'uuidShort', 'name', 'image', 'external_id'])
|
||||
->allowedFilters(['id', 'uuid', 'uuidShort', 'name', 'owner_id', 'node_id', 'external_id'])
|
||||
->allowedSorts(['id', 'uuid', 'uuidShort', 'name', 'owner_id', 'node_id', 'status'])
|
||||
->paginate($perPage);
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
|
||||
import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
|
||||
import { useContext } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { createContext } from '@/api/admin';
|
||||
import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
|
||||
import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
|
||||
import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
|
||||
import { User, rawDataToUser } from '@/api/admin/users/getUsers';
|
||||
|
||||
@ -104,8 +104,9 @@ export interface Filters {
|
||||
id?: string;
|
||||
uuid?: string;
|
||||
name?: string;
|
||||
image?: string;
|
||||
/* eslint-disable camelcase */
|
||||
owner_id?: string;
|
||||
node_id?: string;
|
||||
external_id?: string;
|
||||
/* eslint-enable camelcase */
|
||||
}
|
||||
|
||||
@ -8,9 +8,9 @@ import tw, { styled } from 'twin.macro';
|
||||
import { PaginatedResult, PaginationDataSet } from '@/api/http';
|
||||
import { ListContext as TableHooks } from '@/api/admin';
|
||||
|
||||
export function useTableHooks<T> (): TableHooks<T> {
|
||||
export function useTableHooks<T> (initialState?: T | (() => T)): TableHooks<T> {
|
||||
const [ page, setPage ] = useState<number>(1);
|
||||
const [ filters, setFilters ] = useState<T | null>(null);
|
||||
const [ filters, setFilters ] = useState<T | null>(initialState || null);
|
||||
const [ sort, setSortState ] = useState<string | null>(null);
|
||||
const [ sortDirection, setSortDirection ] = useState<boolean>(false);
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@ import NodeAboutContainer from '@/components/admin/nodes/NodeAboutContainer';
|
||||
import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
|
||||
import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
|
||||
import NodeAllocationContainer from '@/components/admin/nodes/NodeAllocationContainer';
|
||||
import NodeServers from '@/components/admin/nodes/NodeServers';
|
||||
|
||||
interface ctx {
|
||||
node: Node | undefined;
|
||||
@ -123,7 +124,7 @@ const NodeRouter = () => {
|
||||
</Route>
|
||||
|
||||
<Route path={`${match.path}/servers`} exact>
|
||||
<p>Servers</p>
|
||||
<NodeServers/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</AdminContentBlock>
|
||||
|
||||
13
resources/scripts/components/admin/nodes/NodeServers.tsx
Normal file
13
resources/scripts/components/admin/nodes/NodeServers.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import ServersTable from '@/components/admin/servers/ServersTable';
|
||||
import { Context } from '@/components/admin/nodes/NodeRouter';
|
||||
|
||||
function NodeServers () {
|
||||
const node = Context.useStoreState(state => state.node);
|
||||
|
||||
return (
|
||||
<ServersTable filters={{ node_id: node?.id?.toString() }}/>
|
||||
);
|
||||
}
|
||||
|
||||
export default NodeServers;
|
||||
@ -1,76 +1,14 @@
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
|
||||
import AdminCheckbox from '@/components/admin/AdminCheckbox';
|
||||
import AdminTable, { TableBody, TableHead, TableHeader, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } 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 React from 'react';
|
||||
import { NavLink, useRouteMatch } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import ServersTable from '@/components/admin/servers/ServersTable';
|
||||
import Button from '@/components/elements/Button';
|
||||
|
||||
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 (
|
||||
<AdminCheckbox
|
||||
name={id.toString()}
|
||||
checked={isChecked}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.currentTarget.checked) {
|
||||
appendSelectedServer(id);
|
||||
} else {
|
||||
removeSelectedServer(id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ServersContainer = () => {
|
||||
function ServersContainer () {
|
||||
const match = useRouteMatch();
|
||||
|
||||
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: servers, error, isValidating } = getServers([ 'node', 'user' ]);
|
||||
|
||||
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<HTMLInputElement>) => {
|
||||
setSelectedServers(e.currentTarget.checked ? (servers?.items?.map(server => server.id) || []) : []);
|
||||
};
|
||||
|
||||
const onSearch = (query: string): Promise<void> => {
|
||||
return new Promise((resolve) => {
|
||||
if (query.length < 2) {
|
||||
setFilters(null);
|
||||
} else {
|
||||
setFilters({ name: query });
|
||||
}
|
||||
return resolve();
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedServers([]);
|
||||
}, [ page ]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) {
|
||||
clearFlashes('servers');
|
||||
return;
|
||||
}
|
||||
|
||||
clearAndAddHttpError({ key: 'servers', error });
|
||||
}, [ error ]);
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Servers'}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
@ -90,117 +28,9 @@ const ServersContainer = () => {
|
||||
|
||||
<FlashMessageRender byKey={'servers'} css={tw`mb-4`}/>
|
||||
|
||||
<AdminTable>
|
||||
<ContentWrapper
|
||||
checked={selectedServerLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={servers} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'Identifier'} direction={sort === 'uuidShort' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('uuidShort')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Owner'} direction={sort === 'owner_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('owner_id')}/>
|
||||
<TableHeader name={'Node'} direction={sort === 'node_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('node_id')}/>
|
||||
<TableHeader name={'Status'} direction={sort === 'status' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('status')}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{ servers !== undefined && !error && !isValidating && length > 0 &&
|
||||
servers.items.map(server => (
|
||||
<tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={server.id}/>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={server.identifier}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{server.identifier}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${server.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{server.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
{/* TODO: Have permission check for displaying user information. */}
|
||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
||||
<NavLink to={`/admin/users/${server.relations.user?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
<div css={tw`text-sm text-neutral-200`}>
|
||||
Silly User
|
||||
</div>
|
||||
|
||||
<div css={tw`text-sm text-neutral-400`}>
|
||||
{server.relations.user?.email}
|
||||
</div>
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
{/* TODO: Have permission check for displaying node information. */}
|
||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
||||
<NavLink to={`/admin/nodes/${server.relations.node?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
<div css={tw`text-sm text-neutral-200`}>
|
||||
{server.relations.node?.name}
|
||||
</div>
|
||||
|
||||
<div css={tw`text-sm text-neutral-400`}>
|
||||
{server.relations.node?.fqdn}
|
||||
</div>
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
{server.status === 'installing' ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||
Installing
|
||||
</span>
|
||||
:
|
||||
server.status === 'transferring' ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||
Transferring
|
||||
</span>
|
||||
: server.status === 'suspended' ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
|
||||
Suspended
|
||||
</span>
|
||||
:
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||
Active
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ servers === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
<ServersTable/>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const hooks = useTableHooks<Filters>();
|
||||
|
||||
return (
|
||||
<ServersContext.Provider value={hooks}>
|
||||
<ServersContainer/>
|
||||
</ServersContext.Provider>
|
||||
);
|
||||
};
|
||||
export default ServersContainer;
|
||||
|
||||
189
resources/scripts/components/admin/servers/ServersTable.tsx
Normal file
189
resources/scripts/components/admin/servers/ServersTable.tsx
Normal file
@ -0,0 +1,189 @@
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
import { NavLink, useRouteMatch } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
|
||||
import AdminCheckbox from '@/components/admin/AdminCheckbox';
|
||||
import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader, useTableHooks } from '@/components/admin/AdminTable';
|
||||
import CopyOnClick from '@/components/elements/CopyOnClick';
|
||||
import { AdminContext } from '@/state/admin';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
|
||||
function 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 (
|
||||
<AdminCheckbox
|
||||
name={id.toString()}
|
||||
checked={isChecked}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.currentTarget.checked) {
|
||||
appendSelectedServer(id);
|
||||
} else {
|
||||
removeSelectedServer(id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface Props {
|
||||
filters?: Filters;
|
||||
}
|
||||
|
||||
function ServersTable ({ filters }: Props) {
|
||||
const match = useRouteMatch();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
|
||||
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
|
||||
const { data: servers, error, isValidating } = getServers([ 'node', 'user' ]);
|
||||
|
||||
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<HTMLInputElement>) => {
|
||||
setSelectedServers(e.currentTarget.checked ? (servers?.items?.map(server => server.id) || []) : []);
|
||||
};
|
||||
|
||||
const onSearch = (query: string): Promise<void> => {
|
||||
return new Promise((resolve) => {
|
||||
if (query.length < 2) {
|
||||
setFilters(filters || null);
|
||||
} else {
|
||||
setFilters({ ...filters, name: query });
|
||||
}
|
||||
return resolve();
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedServers([]);
|
||||
}, [ page ]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) {
|
||||
clearFlashes('servers');
|
||||
return;
|
||||
}
|
||||
|
||||
clearAndAddHttpError({ key: 'servers', error });
|
||||
}, [ error ]);
|
||||
|
||||
return (
|
||||
<AdminTable>
|
||||
<ContentWrapper
|
||||
checked={selectedServerLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={servers} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'Identifier'} direction={sort === 'uuidShort' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('uuidShort')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Owner'} direction={sort === 'owner_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('owner_id')}/>
|
||||
<TableHeader name={'Node'} direction={sort === 'node_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('node_id')}/>
|
||||
<TableHeader name={'Status'} direction={sort === 'status' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('status')}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{ servers !== undefined && !error && !isValidating && length > 0 &&
|
||||
servers.items.map(server => (
|
||||
<tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={server.id}/>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={server.identifier}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{server.identifier}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${server.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{server.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
{/* TODO: Have permission check for displaying user information. */}
|
||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
||||
<NavLink to={`/admin/users/${server.relations.user?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
<div css={tw`text-sm text-neutral-200`}>
|
||||
Silly User
|
||||
</div>
|
||||
|
||||
<div css={tw`text-sm text-neutral-400`}>
|
||||
{server.relations.user?.email}
|
||||
</div>
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
{/* TODO: Have permission check for displaying node information. */}
|
||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
||||
<NavLink to={`/admin/nodes/${server.relations.node?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
<div css={tw`text-sm text-neutral-200`}>
|
||||
{server.relations.node?.name}
|
||||
</div>
|
||||
|
||||
<div css={tw`text-sm text-neutral-400`}>
|
||||
{server.relations.node?.fqdn}
|
||||
</div>
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
{server.status === 'installing' ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||
Installing
|
||||
</span>
|
||||
:
|
||||
server.status === 'transferring' ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||
Transferring
|
||||
</span>
|
||||
: server.status === 'suspended' ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
|
||||
Suspended
|
||||
</span>
|
||||
:
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||
Active
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ servers === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default ({ filters }: Props) => {
|
||||
const hooks = useTableHooks<Filters>(filters);
|
||||
|
||||
return (
|
||||
<ServersContext.Provider value={hooks}>
|
||||
<ServersTable/>
|
||||
</ServersContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -10,6 +10,7 @@ import Spinner from '@/components/elements/Spinner';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { ApplicationStore } from '@/state';
|
||||
import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
|
||||
import UserServers from '@/components/admin/users/UserServers';
|
||||
|
||||
interface ctx {
|
||||
user: User | undefined;
|
||||
@ -89,7 +90,7 @@ const UserRouter = () => {
|
||||
</Route>
|
||||
|
||||
<Route path={`${match.path}/servers`} exact>
|
||||
<p>Servers</p>
|
||||
<UserServers/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</AdminContentBlock>
|
||||
|
||||
13
resources/scripts/components/admin/users/UserServers.tsx
Normal file
13
resources/scripts/components/admin/users/UserServers.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import ServersTable from '@/components/admin/servers/ServersTable';
|
||||
import { Context } from '@/components/admin/users/UserRouter';
|
||||
|
||||
function UserServers () {
|
||||
const user = Context.useStoreState(state => state.user);
|
||||
|
||||
return (
|
||||
<ServersTable filters={{ owner_id: user?.id?.toString() }}/>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserServers;
|
||||
Loading…
Reference in New Issue
Block a user