ui(admin): fix tables being covered by no items message
This commit is contained in:
Matthew Penner
parent
c0e9f1adee
commit
779b0eca67
10 changed files with 574 additions and 554 deletions
|
|
@ -61,7 +61,7 @@ const DatabasesContainer = () => {
|
|||
if (query.length < 2) {
|
||||
setFilters(null);
|
||||
} else {
|
||||
setFilters({ id: query, name: query, host: query });
|
||||
setFilters({ name: query });
|
||||
}
|
||||
return resolve();
|
||||
});
|
||||
|
|
@ -91,63 +91,65 @@ const DatabasesContainer = () => {
|
|||
<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}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={databases} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Address'}/>
|
||||
<TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
|
||||
</TableHead>
|
||||
<ContentWrapper
|
||||
checked={selectedDatabasesLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={databases} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Address'}/>
|
||||
<TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
databases.items.map(database => (
|
||||
<TableRow key={database.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={database.id}/>
|
||||
</td>
|
||||
<TableBody>
|
||||
{ databases !== undefined && !error && !isValidating && length > 0 &&
|
||||
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`}>
|
||||
<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`}>
|
||||
<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`}>
|
||||
<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`}>
|
||||
<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`}>
|
||||
<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`}>
|
||||
<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>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.username}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ databases === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const LocationsContainer = () => {
|
|||
if (query.length < 2) {
|
||||
setFilters(null);
|
||||
} else {
|
||||
setFilters({ short: query, long: query });
|
||||
setFilters({ short: query });
|
||||
}
|
||||
return resolve();
|
||||
});
|
||||
|
|
@ -87,56 +87,58 @@ const LocationsContainer = () => {
|
|||
<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}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={locations} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Short Name'} direction={sort === 'short' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('short')}/>
|
||||
<TableHeader name={'Long Name'} direction={sort === 'long' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('long')}/>
|
||||
</TableHead>
|
||||
<ContentWrapper
|
||||
checked={selectedLocationsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={locations} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Short Name'} direction={sort === 'short' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('short')}/>
|
||||
<TableHeader name={'Long Name'} direction={sort === 'long' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('long')}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
locations.items.map(location => (
|
||||
<TableRow key={location.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={location.id}/>
|
||||
</td>
|
||||
<TableBody>
|
||||
{ locations !== undefined && !error && !isValidating && length > 0 &&
|
||||
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`}>
|
||||
<CopyOnClick text={location.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{location.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={location.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{location.id}</code>
|
||||
</CopyOnClick>
|
||||
</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`}>
|
||||
<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>
|
||||
}
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.long}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ locations === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const MountsContainer = () => {
|
|||
if (query.length < 2) {
|
||||
setFilters(null);
|
||||
} else {
|
||||
setFilters({ id: query });
|
||||
setFilters({ name: query });
|
||||
}
|
||||
return resolve();
|
||||
});
|
||||
|
|
@ -89,93 +89,96 @@ const MountsContainer = () => {
|
|||
<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}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={mounts} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Source Path'} direction={sort === 'source' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('source')}/>
|
||||
<TableHeader name={'Target Path'} direction={sort === 'target' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('target')}/>
|
||||
<th css={tw`px-6 py-2`}/>
|
||||
<th css={tw`px-6 py-2`}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
mounts.items.map(mount => (
|
||||
<TableRow key={mount.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={mount.id}/>
|
||||
</td>
|
||||
<ContentWrapper
|
||||
checked={selectedMountsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={mounts} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Source Path'} direction={sort === 'source' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('source')}/>
|
||||
<TableHeader name={'Target Path'} direction={sort === 'target' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('target')}/>
|
||||
<th css={tw`px-6 py-2`}/>
|
||||
<th css={tw`px-6 py-2`}/>
|
||||
</TableHead>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={mount.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
<TableBody>
|
||||
{ mounts !== undefined && !error && !isValidating && length > 0 &&
|
||||
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`}>
|
||||
<NavLink to={`${match.url}/${mount.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{mount.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={mount.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={mount.source.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.source}</code>
|
||||
</CopyOnClick>
|
||||
</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>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={mount.target.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.target}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={mount.source.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.source}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
{ mount.readOnly ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||
Read Only
|
||||
</span>
|
||||
:
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||
Writable
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={mount.target.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.target}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
{ mount.userMountable ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||
Mountable
|
||||
</span>
|
||||
:
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||
Admin Only
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
{ mount.readOnly ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||
Read Only
|
||||
</span>
|
||||
:
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||
Writable
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
{ mount.userMountable ?
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||
Mountable
|
||||
</span>
|
||||
:
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||
Admin Only
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ mounts === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -70,56 +70,58 @@ const EggsTable = () => {
|
|||
|
||||
return (
|
||||
<AdminTable>
|
||||
{ eggs === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
<ContentWrapper
|
||||
checked={selectedEggsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={eggs} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Description'}/>
|
||||
</TableHead>
|
||||
<ContentWrapper
|
||||
checked={selectedEggsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={eggs} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Description'}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
eggs.items.map(egg => (
|
||||
<TableRow key={egg.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={egg.id}/>
|
||||
</td>
|
||||
<TableBody>
|
||||
{ eggs !== undefined && !error && !isValidating && length > 0 &&
|
||||
eggs.items.map(egg => (
|
||||
<TableRow key={egg.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={egg.id}/>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={egg.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{egg.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={egg.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{egg.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/eggs/${egg.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{egg.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/eggs/${egg.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{egg.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{egg.description}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{egg.description}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ eggs === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const NestsContainer = () => {
|
|||
if (query.length < 2) {
|
||||
setFilters(null);
|
||||
} else {
|
||||
setFilters({ id: query });
|
||||
setFilters({ name: query });
|
||||
}
|
||||
return resolve();
|
||||
});
|
||||
|
|
@ -87,56 +87,58 @@ const NestsContainer = () => {
|
|||
<FlashMessageRender byKey={'nests'} css={tw`mb-4`}/>
|
||||
|
||||
<AdminTable>
|
||||
{ nests === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
<ContentWrapper
|
||||
checked={selectedNestsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={nests} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Description'}/>
|
||||
</TableHead>
|
||||
<ContentWrapper
|
||||
checked={selectedNestsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={nests} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Description'}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
nests.items.map(nest => (
|
||||
<TableRow key={nest.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={nest.id}/>
|
||||
</td>
|
||||
<TableBody>
|
||||
{ nests !== undefined && !error && !isValidating && length > 0 &&
|
||||
nests.items.map(nest => (
|
||||
<TableRow key={nest.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={nest.id}/>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={nest.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{nest.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={nest.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{nest.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${nest.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{nest.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${nest.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{nest.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.description}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.description}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ nests === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default () => {
|
|||
const match = useRouteMatch<{ id: string }>();
|
||||
|
||||
const [ ips, setIPs ] = useState<Option[]>([]);
|
||||
const [ ports, setPorts ] = useState<Option[]>([]);
|
||||
const [ ports ] = useState<Option[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getAllocations(match.params.id)
|
||||
|
|
|
|||
|
|
@ -93,100 +93,103 @@ const NodesContainer = () => {
|
|||
<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}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={nodes} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Location'} direction={sort === 'location_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('location_id')}/>
|
||||
<TableHeader name={'FQDN'} direction={sort === 'fqdn' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('fqdn')}/>
|
||||
<TableHeader name={'Total Memory'} direction={sort === 'memory' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('memory')}/>
|
||||
<TableHeader name={'Total Disk'} direction={sort === 'disk' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('disk')}/>
|
||||
<TableHeader/>
|
||||
<TableHeader/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
nodes.items.map(node => (
|
||||
<TableRow key={node.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={node.id}/>
|
||||
</td>
|
||||
<ContentWrapper
|
||||
checked={selectedNodesLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={nodes} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Location'} direction={sort === 'location_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('location_id')}/>
|
||||
<TableHeader name={'FQDN'} direction={sort === 'fqdn' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('fqdn')}/>
|
||||
<TableHeader name={'Total Memory'} direction={sort === 'memory' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('memory')}/>
|
||||
<TableHeader name={'Total Disk'} direction={sort === 'disk' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('disk')}/>
|
||||
<TableHeader/>
|
||||
<TableHeader/>
|
||||
</TableHead>
|
||||
|
||||
<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>
|
||||
<TableBody>
|
||||
{ nodes !== undefined && !error && !isValidating && length > 0 &&
|
||||
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`}>
|
||||
<NavLink to={`${match.url}/${node.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{node.name}
|
||||
</NavLink>
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
<div css={tw`text-sm text-neutral-400`}>
|
||||
{node.relations.location?.long}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<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`}>{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 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 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>
|
||||
<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`}>
|
||||
{/* TODO: Change color based off of online/offline status */}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={[ tw`h-5 w-5`, node.scheme === 'https' ? tw`text-green-200` : tw`text-red-300` ]}>
|
||||
<path clipRule="evenodd" fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
|
||||
</svg>
|
||||
</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
<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>
|
||||
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
{/* TODO: Change color based off of online/offline status */}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={[ tw`h-5 w-5`, node.scheme === 'https' ? tw`text-green-200` : tw`text-red-300` ]}>
|
||||
<path clipRule="evenodd" fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
|
||||
</svg>
|
||||
</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ nodes === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -87,56 +87,58 @@ const RolesContainer = () => {
|
|||
<FlashMessageRender byKey={'roles'} css={tw`mb-4`}/>
|
||||
|
||||
<AdminTable>
|
||||
{ roles === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
<ContentWrapper
|
||||
checked={selectedRolesLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={roles} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Description'}/>
|
||||
</TableHead>
|
||||
<ContentWrapper
|
||||
checked={selectedRolesLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={roles} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'name' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('name')}/>
|
||||
<TableHeader name={'Description'}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
roles.items.map(role => (
|
||||
<TableRow key={role.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={role.id}/>
|
||||
</td>
|
||||
<TableBody>
|
||||
{ roles !== undefined && !error && !isValidating && length > 0 &&
|
||||
roles.items.map(role => (
|
||||
<TableRow key={role.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={role.id}/>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={role.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{role.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={role.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{role.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${role.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{role.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${role.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||
{role.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.description}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.description}</td>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ roles === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
|
||||
import AdminCheckbox from '@/components/admin/AdminCheckbox';
|
||||
import AdminTable, { ContentWrapper, Loading, Pagination, TableBody, TableHead, TableHeader } from '@/components/admin/AdminTable';
|
||||
import AdminTable, { ContentWrapper, Loading, NoItems, Pagination, TableBody, TableHead, TableHeader } from '@/components/admin/AdminTable';
|
||||
import Button from '@/components/elements/Button';
|
||||
import CopyOnClick from '@/components/elements/CopyOnClick';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
|
|
@ -36,7 +36,7 @@ const ServersContainer = () => {
|
|||
|
||||
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: servers, error } = getServers([ 'node', 'user' ]);
|
||||
const { data: servers, error, isValidating } = getServers([ 'node', 'user' ]);
|
||||
|
||||
const length = servers?.items?.length || 0;
|
||||
|
||||
|
|
@ -96,97 +96,99 @@ const ServersContainer = () => {
|
|||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
{servers === undefined ?
|
||||
<Loading/>
|
||||
:
|
||||
// length < 1 ?
|
||||
// <NoItems/>
|
||||
// :
|
||||
<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>
|
||||
<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?.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>
|
||||
<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-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>
|
||||
<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`}>
|
||||
{server.relations.user?.firstName} {server.relations.user?.lastName}
|
||||
</div>
|
||||
{/* 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`}>
|
||||
{server.relations.user?.firstName} {server.relations.user?.lastName}
|
||||
</div>
|
||||
|
||||
<div css={tw`text-sm text-neutral-400`}>
|
||||
{server.relations.user?.email}
|
||||
</div>
|
||||
</NavLink>
|
||||
</td>
|
||||
<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>
|
||||
{/* 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>
|
||||
<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' ?
|
||||
<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`}>
|
||||
Installing
|
||||
Transferring
|
||||
</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
|
||||
: 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>
|
||||
: 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>
|
||||
</div>
|
||||
</Pagination>
|
||||
}
|
||||
:
|
||||
<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>
|
||||
</AdminContentBlock>
|
||||
|
|
|
|||
|
|
@ -91,80 +91,82 @@ const UsersContainer = () => {
|
|||
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
|
||||
|
||||
<AdminTable>
|
||||
{ users === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
<ContentWrapper
|
||||
checked={selectedUserLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={users} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'email' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('email')}/>
|
||||
<TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
|
||||
<TableHeader name={'Status'}/>
|
||||
<TableHeader name={'Role'} direction={sort === 'admin_role_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('admin_role_id')}/>
|
||||
</TableHead>
|
||||
<ContentWrapper
|
||||
checked={selectedUserLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={users} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader name={'ID'} direction={sort === 'id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('id')}/>
|
||||
<TableHeader name={'Name'} direction={sort === 'email' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('email')}/>
|
||||
<TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
|
||||
<TableHeader name={'Status'}/>
|
||||
<TableHeader name={'Role'} direction={sort === 'admin_role_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('admin_role_id')}/>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{
|
||||
users.items.map(user => (
|
||||
<tr key={user.id} css={tw`h-14 hover:bg-neutral-600`}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={user.id}/>
|
||||
</td>
|
||||
<TableBody>
|
||||
{ users !== undefined && !error && !isValidating && length > 0 &&
|
||||
users.items.map(user => (
|
||||
<tr key={user.id} css={tw`h-14 hover:bg-neutral-600`}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={user.id}/>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={user.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{user.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={user.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{user.id}</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${user.id}`}>
|
||||
<div css={tw`flex items-center`}>
|
||||
<div css={tw`flex-shrink-0 h-10 w-10`}>
|
||||
<img css={tw`h-10 w-10 rounded-full`} alt="" src={user.avatarURL + '?s=40'}/>
|
||||
</div>
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
<NavLink to={`${match.url}/${user.id}`}>
|
||||
<div css={tw`flex items-center`}>
|
||||
<div css={tw`flex-shrink-0 h-10 w-10`}>
|
||||
<img css={tw`h-10 w-10 rounded-full`} alt="" src={user.avatarURL + '?s=40'}/>
|
||||
</div>
|
||||
|
||||
<div css={tw`ml-4`}>
|
||||
<div css={tw`text-sm text-neutral-200`}>
|
||||
{user.firstName} {user.lastName}
|
||||
</div>
|
||||
|
||||
<div css={tw`text-sm text-neutral-400`}>
|
||||
{user.email}
|
||||
</div>
|
||||
</div>
|
||||
<div css={tw`ml-4`}>
|
||||
<div css={tw`text-sm text-neutral-200`}>
|
||||
{user.firstName} {user.lastName}
|
||||
</div>
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.username}</td>
|
||||
<div css={tw`text-sm text-neutral-400`}>
|
||||
{user.email}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.username}</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.roleName || 'None'}</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
}
|
||||
<td css={tw`px-6 whitespace-nowrap`}>
|
||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.roleName || 'None'}</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{ users === undefined || (error && isValidating) ?
|
||||
<Loading/>
|
||||
:
|
||||
length < 1 ?
|
||||
<NoItems/>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue