Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NodesContainer: add more fields to table

Browse source
This commit is contained in:
Matthew Penner 2021-01-06 09:52:07 -07:00
parent a038b0733d
commit b4ec1fb45d
2 changed files with 59 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
resources/scripts/api/admin/nodes/getNodes.ts
View file

@ -1,6 +1,7 @@
import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
import { createContext, useContext } from 'react';
import useSWR from 'swr';
import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations';
export interface Node {
id: number;
@ -23,6 +24,10 @@ export interface Node {
daemonBase: string;
createdAt: Date;
updatedAt: Date;
relations: {
location: Location | undefined;
};
}
export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
@ -46,6 +51,10 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
daemonBase: attributes.daemon_base,
createdAt: new Date(attributes.created_at),
updatedAt: new Date(attributes.updated_at),
relations: {
location: attributes.relationships?.location !== undefined ? rawDataToLocation(attributes.relationships.location as FractalResponseData) : undefined,
},
});
interface ctx {
@ -55,11 +64,11 @@ interface ctx {
export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
export default () => {
export default (include: string[] = []) => {
const { page } = useContext(Context);
return useSWR<PaginatedResult<Node>>([ 'nodes', page ], async () => {
const { data } = await http.get('/api/application/nodes', { params: { page } });
const { data } = await http.get('/api/application/nodes', { params: { include: include.join(','), page } });
return ({
items: (data.data || []).map(rawDataToNode),

50
resources/scripts/components/admin/nodes/NodesContainer.tsx
View file

@ -9,6 +9,8 @@ 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);
@ -35,7 +37,7 @@ const NodesContainer = () => {
const { page, setPage } = useContext(NodesContext);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { data: nodes, error, isValidating } = getNodes();
const { data: nodes, error, isValidating } = getNodes([ 'location' ]);
useEffect(() => {
if (!error) {
@ -91,6 +93,11 @@ const NodesContainer = () => {
<TableHead>
<TableHeader name={'ID'}/>
<TableHeader name={'Name'}/>
<TableHeader name={'Location'}/>
<TableHeader name={'FQDN'}/>
<TableHeader name={'Total Memory'}/>
<TableHeader name={'Total Disk'}/>
<th css={tw`px-6 py-2`}/>
</TableHead>
<TableBody>
@ -101,12 +108,51 @@ const NodesContainer = () => {
<RowCheckbox id={node.id}/>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{node.id}</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={node.id.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.id}</code>
</CopyOnClick>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${node.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{node.name}
</NavLink>
</td>
{/* TODO: Have permission check for displaying location information. */}
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
<NavLink to={`/admin/locations/${node.relations.location?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
<div css={tw`text-sm text-neutral-200`}>
{node.relations.location?.short}
</div>
<div css={tw`text-sm text-neutral-400`}>
{node.relations.location?.long}
</div>
</NavLink>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={node.fqdn}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.fqdn}</code>
</CopyOnClick>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.memory))}</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.disk))}</td>
<td css={tw`px-6 whitespace-nowrap`}>
{ node.scheme === 'https' ?
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
Secure
</span>
:
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
Non-Secure
</span>
}
</td>
</TableRow>
))
}