NodesContainer: add more fields to table
This commit is contained in:
Matthew Penner
parent
a038b0733d
commit
b4ec1fb45d
2 changed files with 59 additions and 4 deletions
|
|
@ -1,6 +1,7 @@
|
||||||
import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
|
import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
|
||||||
import { createContext, useContext } from 'react';
|
import { createContext, useContext } from 'react';
|
||||||
import useSWR from 'swr';
|
import useSWR from 'swr';
|
||||||
|
import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations';
|
||||||
|
|
||||||
export interface Node {
|
export interface Node {
|
||||||
id: number;
|
id: number;
|
||||||
|
|
@ -23,6 +24,10 @@ export interface Node {
|
||||||
daemonBase: string;
|
daemonBase: string;
|
||||||
createdAt: Date;
|
createdAt: Date;
|
||||||
updatedAt: Date;
|
updatedAt: Date;
|
||||||
|
|
||||||
|
relations: {
|
||||||
|
location: Location | undefined;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
|
export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
|
||||||
|
|
@ -46,6 +51,10 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
|
||||||
daemonBase: attributes.daemon_base,
|
daemonBase: attributes.daemon_base,
|
||||||
createdAt: new Date(attributes.created_at),
|
createdAt: new Date(attributes.created_at),
|
||||||
updatedAt: new Date(attributes.updated_at),
|
updatedAt: new Date(attributes.updated_at),
|
||||||
|
|
||||||
|
relations: {
|
||||||
|
location: attributes.relationships?.location !== undefined ? rawDataToLocation(attributes.relationships.location as FractalResponseData) : undefined,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
interface ctx {
|
interface ctx {
|
||||||
|
|
@ -55,11 +64,11 @@ interface ctx {
|
||||||
|
|
||||||
export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
|
export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
|
||||||
|
|
||||||
export default () => {
|
export default (include: string[] = []) => {
|
||||||
const { page } = useContext(Context);
|
const { page } = useContext(Context);
|
||||||
|
|
||||||
return useSWR<PaginatedResult<Node>>([ 'nodes', page ], async () => {
|
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 ({
|
return ({
|
||||||
items: (data.data || []).map(rawDataToNode),
|
items: (data.data || []).map(rawDataToNode),
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,8 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
import AdminCheckbox from '@/components/admin/AdminCheckbox';
|
import AdminCheckbox from '@/components/admin/AdminCheckbox';
|
||||||
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
|
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
|
||||||
import Button from '@/components/elements/Button';
|
import Button from '@/components/elements/Button';
|
||||||
|
import CopyOnClick from '@/components/elements/CopyOnClick';
|
||||||
|
import { bytesToHuman, megabytesToBytes } from '@/helpers';
|
||||||
|
|
||||||
const RowCheckbox = ({ id }: { id: number}) => {
|
const RowCheckbox = ({ id }: { id: number}) => {
|
||||||
const isChecked = AdminContext.useStoreState(state => state.nodes.selectedNodes.indexOf(id) >= 0);
|
const isChecked = AdminContext.useStoreState(state => state.nodes.selectedNodes.indexOf(id) >= 0);
|
||||||
|
|
@ -35,7 +37,7 @@ const NodesContainer = () => {
|
||||||
|
|
||||||
const { page, setPage } = useContext(NodesContext);
|
const { page, setPage } = useContext(NodesContext);
|
||||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||||
const { data: nodes, error, isValidating } = getNodes();
|
const { data: nodes, error, isValidating } = getNodes([ 'location' ]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!error) {
|
if (!error) {
|
||||||
|
|
@ -91,6 +93,11 @@ const NodesContainer = () => {
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableHeader name={'ID'}/>
|
<TableHeader name={'ID'}/>
|
||||||
<TableHeader name={'Name'}/>
|
<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>
|
</TableHead>
|
||||||
|
|
||||||
<TableBody>
|
<TableBody>
|
||||||
|
|
@ -101,12 +108,51 @@ const NodesContainer = () => {
|
||||||
<RowCheckbox id={node.id}/>
|
<RowCheckbox id={node.id}/>
|
||||||
</td>
|
</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`}>
|
<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`}>
|
<NavLink to={`${match.url}/${node.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||||
{node.name}
|
{node.name}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</td>
|
</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>
|
</TableRow>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue