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

DatabasesContainer: add more fields to table

Browse source
This commit is contained in:
Matthew Penner 2021-01-06 09:17:54 -07:00
parent ae6b8cba19
commit 231b8b40d6
2 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/scripts/api/admin/databases/getDatabases.ts
View file

@ -11,6 +11,8 @@ export interface Database {
maxDatabases: number; maxDatabases: number;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
getAddress (): string;
} }
export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database => ({ export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database => ({
@ -22,6 +24,8 @@ export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database
maxDatabases: attributes.max_databases, maxDatabases: attributes.max_databases,
createdAt: new Date(attributes.created_at), createdAt: new Date(attributes.created_at),
updatedAt: new Date(attributes.updated_at), updatedAt: new Date(attributes.updated_at),
getAddress: () => `${attributes.host}:${attributes.port}`,
}); });
interface ctx { interface ctx {

18
resources/scripts/components/admin/databases/DatabasesContainer.tsx
View file

@ -1,3 +1,4 @@
import CopyOnClick from '@/components/elements/CopyOnClick';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import getDatabases, { Context as DatabasesContext } from '@/api/admin/databases/getDatabases'; import getDatabases, { Context as DatabasesContext } from '@/api/admin/databases/getDatabases';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';
@ -92,6 +93,7 @@ const DatabasesContainer = () => {
<TableHeader name={'ID'}/> <TableHeader name={'ID'}/>
<TableHeader name={'Name'}/> <TableHeader name={'Name'}/>
<TableHeader name={'Address'}/> <TableHeader name={'Address'}/>
<TableHeader name={'Username'}/>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -102,13 +104,25 @@ const DatabasesContainer = () => {
<RowCheckbox id={database.id}/> <RowCheckbox id={database.id}/>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.id}</td> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={database.id.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.id}</code>
</CopyOnClick>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${database.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`${match.url}/${database.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{database.name} {database.name}
</NavLink> </NavLink>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.host}:{database.port}</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={database.getAddress()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.getAddress()}</code>
</CopyOnClick>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.username}</td>
</TableRow> </TableRow>
)) ))
} }