Add tables for almost every admin change, update composer dependencies
This commit is contained in:
Matthew Penner
parent
8f1a5bf0ab
commit
59de9576c9
42 changed files with 3327 additions and 1241 deletions
|
|
@ -1,23 +1,9 @@
|
|||
import NewApiKeyButton from '@/components/admin/api/NewApiKeyButton';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React from 'react';
|
||||
import tw from 'twin.macro';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
|
||||
interface Key {
|
||||
id: number,
|
||||
}
|
||||
import NewApiKeyButton from '@/components/admin/api/NewApiKeyButton';
|
||||
|
||||
export default () => {
|
||||
const [ loading, setLoading ] = useState<boolean>(true);
|
||||
const [ keys ] = useState<Key[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
|
|
@ -28,27 +14,6 @@ export default () => {
|
|||
|
||||
<NewApiKeyButton />
|
||||
</div>
|
||||
|
||||
<div css={tw`w-full flex flex-col`}>
|
||||
<div css={tw`w-full flex flex-col bg-neutral-700 rounded-lg shadow-md`}>
|
||||
{ loading ?
|
||||
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
|
||||
<Spinner size={'base'}/>
|
||||
</div>
|
||||
:
|
||||
keys.length < 1 ?
|
||||
<div css={tw`w-full flex flex-col items-center justify-center pb-6 py-2 sm:py-8 md:py-10 px-8`}>
|
||||
<div css={tw`h-64 flex`}>
|
||||
<img src={'/assets/svgs/not_found.svg'} alt={'No Items'} css={tw`h-full select-none`}/>
|
||||
</div>
|
||||
|
||||
<p css={tw`text-lg text-neutral-300 text-center font-normal sm:mt-8`}>No items could be found, it's almost like they are hiding.</p>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,67 @@
|
|||
import React from 'react';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import getDatabases, { Context as DatabasesContext } from '@/api/admin/databases/getDatabases';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { AdminContext } from '@/state/admin';
|
||||
import { NavLink, useRouteMatch } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
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';
|
||||
|
||||
export default () => {
|
||||
const RowCheckbox = ({ id }: { id: number}) => {
|
||||
const isChecked = AdminContext.useStoreState(state => state.databases.selectedDatabases.indexOf(id) >= 0);
|
||||
const appendSelectedDatabase = AdminContext.useStoreActions(actions => actions.databases.appendSelectedDatabase);
|
||||
const removeSelectedDatabase = AdminContext.useStoreActions(actions => actions.databases.removeSelectedDatabase);
|
||||
|
||||
return (
|
||||
<AdminCheckbox
|
||||
name={id.toString()}
|
||||
checked={isChecked}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.currentTarget.checked) {
|
||||
appendSelectedDatabase(id);
|
||||
} else {
|
||||
removeSelectedDatabase(id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const DatabasesContainer = () => {
|
||||
const match = useRouteMatch();
|
||||
|
||||
const { page, setPage } = useContext(DatabasesContext);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: databases, error, isValidating } = getDatabases();
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) {
|
||||
clearFlashes('databases');
|
||||
return;
|
||||
}
|
||||
|
||||
clearAndAddHttpError({ error, key: 'databases' });
|
||||
}, [ error ]);
|
||||
|
||||
const length = databases?.items?.length || 0;
|
||||
|
||||
const setSelectedDatabases = AdminContext.useStoreActions(actions => actions.databases.setSelectedDatabases);
|
||||
const selectedDatabasesLength = AdminContext.useStoreState(state => state.databases.selectedDatabases.length);
|
||||
|
||||
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedDatabases(e.currentTarget.checked ? (databases?.items?.map(database => database.id) || []) : []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedDatabases([]);
|
||||
}, [ page ]);
|
||||
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<div css={tw`w-full flex flex-row items-center`}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Databases</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>Database hosts that servers can have databases created on.</p>
|
||||
|
|
@ -16,6 +71,64 @@ export default () => {
|
|||
New Database
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
|
||||
|
||||
<AdminTable>
|
||||
{ databases === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
<ContentWrapper
|
||||
checked={selectedDatabasesLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
>
|
||||
<Pagination data={databases} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'}/>
|
||||
<TableHeader name={'Name'}/>
|
||||
<TableHeader name={'Address'}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
databases.items.map(database => (
|
||||
<TableRow key={database.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={database.id}/>
|
||||
</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`}>
|
||||
<NavLink to={`${match.url}/${database.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{database.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.host}:{database.port}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const [ page, setPage ] = useState<number>(1);
|
||||
|
||||
return (
|
||||
<DatabasesContext.Provider value={{ page, setPage }}>
|
||||
<DatabasesContainer/>
|
||||
</DatabasesContext.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,67 @@
|
|||
import React from 'react';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import getLocations, { Context as LocationsContext } from '@/api/admin/locations/getLocations';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { AdminContext } from '@/state/admin';
|
||||
import { NavLink, useRouteMatch } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
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';
|
||||
|
||||
export default () => {
|
||||
const RowCheckbox = ({ id }: { id: number}) => {
|
||||
const isChecked = AdminContext.useStoreState(state => state.locations.selectedLocations.indexOf(id) >= 0);
|
||||
const appendSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.appendSelectedLocation);
|
||||
const removeSelectedLocation = AdminContext.useStoreActions(actions => actions.locations.removeSelectedLocation);
|
||||
|
||||
return (
|
||||
<AdminCheckbox
|
||||
name={id.toString()}
|
||||
checked={isChecked}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.currentTarget.checked) {
|
||||
appendSelectedLocation(id);
|
||||
} else {
|
||||
removeSelectedLocation(id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const LocationsContainer = () => {
|
||||
const match = useRouteMatch();
|
||||
|
||||
const { page, setPage } = useContext(LocationsContext);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: locations, error, isValidating } = getLocations();
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) {
|
||||
clearFlashes('locations');
|
||||
return;
|
||||
}
|
||||
|
||||
clearAndAddHttpError({ error, key: 'locations' });
|
||||
}, [ error ]);
|
||||
|
||||
const length = locations?.items?.length || 0;
|
||||
|
||||
const setSelectedLocations = AdminContext.useStoreActions(actions => actions.locations.setSelectedLocations);
|
||||
const selectedLocationsLength = AdminContext.useStoreState(state => state.locations.selectedLocations.length);
|
||||
|
||||
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedLocations(e.currentTarget.checked ? (locations?.items?.map(location => location.id) || []) : []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedLocations([]);
|
||||
}, [ page ]);
|
||||
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<div css={tw`w-full flex flex-row items-center`}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Locations</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>All locations that nodes can be assigned to for easier categorization.</p>
|
||||
|
|
@ -16,6 +71,64 @@ export default () => {
|
|||
New Location
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'locations'} css={tw`mb-4`}/>
|
||||
|
||||
<AdminTable>
|
||||
{ locations === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
<ContentWrapper
|
||||
checked={selectedLocationsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
>
|
||||
<Pagination data={locations} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'}/>
|
||||
<TableHeader name={'Short Name'}/>
|
||||
<TableHeader name={'Long Name'}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
locations.items.map(location => (
|
||||
<TableRow key={location.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={location.id}/>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.id}</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${location.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{location.short}
|
||||
</NavLink>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.long}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const [ page, setPage ] = useState<number>(1);
|
||||
|
||||
return (
|
||||
<LocationsContext.Provider value={{ page, setPage }}>
|
||||
<LocationsContainer/>
|
||||
</LocationsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,67 @@
|
|||
import Button from '@/components/elements/Button';
|
||||
import React from 'react';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import getMounts, { Context as MountsContext } from '@/api/admin/mounts/getMounts';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { AdminContext } from '@/state/admin';
|
||||
import { NavLink, useRouteMatch } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
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';
|
||||
|
||||
const RowCheckbox = ({ id }: { id: number}) => {
|
||||
const isChecked = AdminContext.useStoreState(state => state.mounts.selectedMounts.indexOf(id) >= 0);
|
||||
const appendSelectedMount = AdminContext.useStoreActions(actions => actions.mounts.appendSelectedMount);
|
||||
const removeSelectedMount = AdminContext.useStoreActions(actions => actions.mounts.removeSelectedMount);
|
||||
|
||||
return (
|
||||
<AdminCheckbox
|
||||
name={id.toString()}
|
||||
checked={isChecked}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.currentTarget.checked) {
|
||||
appendSelectedMount(id);
|
||||
} else {
|
||||
removeSelectedMount(id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const MountsContainer = () => {
|
||||
const match = useRouteMatch();
|
||||
|
||||
const { page, setPage } = useContext(MountsContext);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: mounts, error, isValidating } = getMounts();
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) {
|
||||
clearFlashes('mounts');
|
||||
return;
|
||||
}
|
||||
|
||||
clearAndAddHttpError({ error, key: 'mounts' });
|
||||
}, [ error ]);
|
||||
|
||||
const length = mounts?.items?.length || 0;
|
||||
|
||||
const setSelectedMounts = AdminContext.useStoreActions(actions => actions.mounts.setSelectedMounts);
|
||||
const selectedMountsLength = AdminContext.useStoreState(state => state.mounts.selectedMounts.length);
|
||||
|
||||
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedMounts(e.currentTarget.checked ? (mounts?.items?.map(mount => mount.id) || []) : []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedMounts([]);
|
||||
}, [ page ]);
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<div css={tw`w-full flex flex-row items-center`}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Mounts</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>Configure and manage additional mount points for servers.</p>
|
||||
|
|
@ -16,6 +71,62 @@ export default () => {
|
|||
New Mount
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'mounts'} css={tw`mb-4`}/>
|
||||
|
||||
<AdminTable>
|
||||
{ mounts === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
<ContentWrapper
|
||||
checked={selectedMountsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
>
|
||||
<Pagination data={mounts} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'}/>
|
||||
<TableHeader name={'Name'}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
mounts.items.map(mount => (
|
||||
<TableRow key={mount.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={mount.id}/>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{mount.id}</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${mount.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{mount.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const [ page, setPage ] = useState<number>(1);
|
||||
|
||||
return (
|
||||
<MountsContext.Provider value={{ page, setPage }}>
|
||||
<MountsContainer/>
|
||||
</MountsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,67 @@
|
|||
import Button from '@/components/elements/Button';
|
||||
import React from 'react';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import getNodes, { Context as NodesContext } from '@/api/admin/nodes/getNodes';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { AdminContext } from '@/state/admin';
|
||||
import { NavLink, useRouteMatch } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
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';
|
||||
|
||||
const RowCheckbox = ({ id }: { id: number}) => {
|
||||
const isChecked = AdminContext.useStoreState(state => state.nodes.selectedNodes.indexOf(id) >= 0);
|
||||
const appendSelectedNode = AdminContext.useStoreActions(actions => actions.nodes.appendSelectedNode);
|
||||
const removeSelectedNode = AdminContext.useStoreActions(actions => actions.nodes.removeSelectedNode);
|
||||
|
||||
return (
|
||||
<AdminCheckbox
|
||||
name={id.toString()}
|
||||
checked={isChecked}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.currentTarget.checked) {
|
||||
appendSelectedNode(id);
|
||||
} else {
|
||||
removeSelectedNode(id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const NodesContainer = () => {
|
||||
const match = useRouteMatch();
|
||||
|
||||
const { page, setPage } = useContext(NodesContext);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: nodes, error, isValidating } = getNodes();
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) {
|
||||
clearFlashes('nodes');
|
||||
return;
|
||||
}
|
||||
|
||||
clearAndAddHttpError({ error, key: 'nodes' });
|
||||
}, [ error ]);
|
||||
|
||||
const length = nodes?.items?.length || 0;
|
||||
|
||||
const setSelectedNodes = AdminContext.useStoreActions(actions => actions.nodes.setSelectedNodes);
|
||||
const selectedNodesLength = AdminContext.useStoreState(state => state.nodes.selectedNodes.length);
|
||||
|
||||
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedNodes(e.currentTarget.checked ? (nodes?.items?.map(node => node.id) || []) : []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedNodes([]);
|
||||
}, [ page ]);
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<div css={tw`w-full flex flex-row items-center`}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nodes</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>All nodes available on the system.</p>
|
||||
|
|
@ -16,6 +71,62 @@ export default () => {
|
|||
New Node
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'nodes'} css={tw`mb-4`}/>
|
||||
|
||||
<AdminTable>
|
||||
{ nodes === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
<ContentWrapper
|
||||
checked={selectedNodesLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
>
|
||||
<Pagination data={nodes} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'}/>
|
||||
<TableHeader name={'Name'}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
nodes.items.map(node => (
|
||||
<TableRow key={node.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<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`}>
|
||||
<NavLink to={`${match.url}/${node.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{node.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const [ page, setPage ] = useState<number>(1);
|
||||
|
||||
return (
|
||||
<NodesContext.Provider value={{ page, setPage }}>
|
||||
<NodesContainer/>
|
||||
</NodesContext.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react';
|
||||
import tw from 'twin.macro';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Server</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>Add a new server to the panel.</p>
|
||||
</div>
|
||||
</div>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
@ -68,9 +68,11 @@ const UsersContainer = () => {
|
|||
<p css={tw`text-base text-neutral-400`}>All servers available on the system.</p>
|
||||
</div>
|
||||
|
||||
<Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`}>
|
||||
New Server
|
||||
</Button>
|
||||
<NavLink to={`${match.url}/new`} css={tw`ml-auto`}>
|
||||
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0`}>
|
||||
New Server
|
||||
</Button>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'servers'} css={tw`mb-4`}/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue