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) {
|
if (query.length < 2) {
|
||||||
setFilters(null);
|
setFilters(null);
|
||||||
} else {
|
} else {
|
||||||
setFilters({ id: query, name: query, host: query });
|
setFilters({ name: query });
|
||||||
}
|
}
|
||||||
return resolve();
|
return resolve();
|
||||||
});
|
});
|
||||||
|
|
@ -91,63 +91,65 @@ const DatabasesContainer = () => {
|
||||||
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
|
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
|
||||||
|
|
||||||
<AdminTable>
|
<AdminTable>
|
||||||
{ databases === undefined || (error && isValidating) ?
|
<ContentWrapper
|
||||||
<Loading/>
|
checked={selectedDatabasesLength === (length === 0 ? -1 : length)}
|
||||||
:
|
onSelectAllClick={onSelectAllClick}
|
||||||
length < 1 ?
|
onSearch={onSearch}
|
||||||
<NoItems/>
|
>
|
||||||
:
|
<Pagination data={databases} onPageSelect={setPage}>
|
||||||
<ContentWrapper
|
<div css={tw`overflow-x-auto`}>
|
||||||
checked={selectedDatabasesLength === (length === 0 ? -1 : length)}
|
<table css={tw`w-full table-auto`}>
|
||||||
onSelectAllClick={onSelectAllClick}
|
<TableHead>
|
||||||
onSearch={onSearch}
|
<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')}/>
|
||||||
<Pagination data={databases} onPageSelect={setPage}>
|
<TableHeader name={'Address'}/>
|
||||||
<div css={tw`overflow-x-auto`}>
|
<TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
|
||||||
<table css={tw`w-full table-auto`}>
|
</TableHead>
|
||||||
<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>
|
<TableBody>
|
||||||
{
|
{ databases !== undefined && !error && !isValidating && length > 0 &&
|
||||||
databases.items.map(database => (
|
databases.items.map(database => (
|
||||||
<TableRow key={database.id}>
|
<TableRow key={database.id}>
|
||||||
<td css={tw`pl-6`}>
|
<td css={tw`pl-6`}>
|
||||||
<RowCheckbox id={database.id}/>
|
<RowCheckbox id={database.id}/>
|
||||||
</td>
|
</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`}>
|
||||||
<CopyOnClick text={database.id.toString()}>
|
<CopyOnClick text={database.id.toString()}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.id}</code>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.id}</code>
|
||||||
</CopyOnClick>
|
</CopyOnClick>
|
||||||
</td>
|
</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`}>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||||
<CopyOnClick text={database.getAddress()}>
|
<CopyOnClick text={database.getAddress()}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.getAddress()}</code>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.getAddress()}</code>
|
||||||
</CopyOnClick>
|
</CopyOnClick>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.username}</td>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.username}</td>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</Pagination>
|
{ databases === undefined || (error && isValidating) ?
|
||||||
</ContentWrapper>
|
<Loading/>
|
||||||
}
|
:
|
||||||
|
length < 1 ?
|
||||||
|
<NoItems/>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Pagination>
|
||||||
|
</ContentWrapper>
|
||||||
</AdminTable>
|
</AdminTable>
|
||||||
</AdminContentBlock>
|
</AdminContentBlock>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ const LocationsContainer = () => {
|
||||||
if (query.length < 2) {
|
if (query.length < 2) {
|
||||||
setFilters(null);
|
setFilters(null);
|
||||||
} else {
|
} else {
|
||||||
setFilters({ short: query, long: query });
|
setFilters({ short: query });
|
||||||
}
|
}
|
||||||
return resolve();
|
return resolve();
|
||||||
});
|
});
|
||||||
|
|
@ -87,56 +87,58 @@ const LocationsContainer = () => {
|
||||||
<FlashMessageRender byKey={'locations'} css={tw`mb-4`}/>
|
<FlashMessageRender byKey={'locations'} css={tw`mb-4`}/>
|
||||||
|
|
||||||
<AdminTable>
|
<AdminTable>
|
||||||
{ locations === undefined || (error && isValidating) ?
|
<ContentWrapper
|
||||||
<Loading/>
|
checked={selectedLocationsLength === (length === 0 ? -1 : length)}
|
||||||
:
|
onSelectAllClick={onSelectAllClick}
|
||||||
length < 1 ?
|
onSearch={onSearch}
|
||||||
<NoItems/>
|
>
|
||||||
:
|
<Pagination data={locations} onPageSelect={setPage}>
|
||||||
<ContentWrapper
|
<div css={tw`overflow-x-auto`}>
|
||||||
checked={selectedLocationsLength === (length === 0 ? -1 : length)}
|
<table css={tw`w-full table-auto`}>
|
||||||
onSelectAllClick={onSelectAllClick}
|
<TableHead>
|
||||||
onSearch={onSearch}
|
<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')}/>
|
||||||
<Pagination data={locations} onPageSelect={setPage}>
|
<TableHeader name={'Long Name'} direction={sort === 'long' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('long')}/>
|
||||||
<div css={tw`overflow-x-auto`}>
|
</TableHead>
|
||||||
<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>
|
<TableBody>
|
||||||
{
|
{ locations !== undefined && !error && !isValidating && length > 0 &&
|
||||||
locations.items.map(location => (
|
locations.items.map(location => (
|
||||||
<TableRow key={location.id}>
|
<TableRow key={location.id}>
|
||||||
<td css={tw`pl-6`}>
|
<td css={tw`pl-6`}>
|
||||||
<RowCheckbox id={location.id}/>
|
<RowCheckbox id={location.id}/>
|
||||||
</td>
|
</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`}>
|
||||||
<CopyOnClick text={location.id.toString()}>
|
<CopyOnClick text={location.id.toString()}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{location.id}</code>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{location.id}</code>
|
||||||
</CopyOnClick>
|
</CopyOnClick>
|
||||||
</td>
|
</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}/${location.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
<NavLink to={`${match.url}/${location.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||||
{location.short}
|
{location.short}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.long}</td>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{location.long}</td>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</Pagination>
|
{ locations === undefined || (error && isValidating) ?
|
||||||
</ContentWrapper>
|
<Loading/>
|
||||||
}
|
:
|
||||||
|
length < 1 ?
|
||||||
|
<NoItems/>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Pagination>
|
||||||
|
</ContentWrapper>
|
||||||
</AdminTable>
|
</AdminTable>
|
||||||
</AdminContentBlock>
|
</AdminContentBlock>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ const MountsContainer = () => {
|
||||||
if (query.length < 2) {
|
if (query.length < 2) {
|
||||||
setFilters(null);
|
setFilters(null);
|
||||||
} else {
|
} else {
|
||||||
setFilters({ id: query });
|
setFilters({ name: query });
|
||||||
}
|
}
|
||||||
return resolve();
|
return resolve();
|
||||||
});
|
});
|
||||||
|
|
@ -89,93 +89,96 @@ const MountsContainer = () => {
|
||||||
<FlashMessageRender byKey={'mounts'} css={tw`mb-4`}/>
|
<FlashMessageRender byKey={'mounts'} css={tw`mb-4`}/>
|
||||||
|
|
||||||
<AdminTable>
|
<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>
|
<ContentWrapper
|
||||||
{
|
checked={selectedMountsLength === (length === 0 ? -1 : length)}
|
||||||
mounts.items.map(mount => (
|
onSelectAllClick={onSelectAllClick}
|
||||||
<TableRow key={mount.id}>
|
onSearch={onSearch}
|
||||||
<td css={tw`pl-6`}>
|
>
|
||||||
<RowCheckbox id={mount.id}/>
|
<Pagination data={mounts} onPageSelect={setPage}>
|
||||||
</td>
|
<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`}>
|
<TableBody>
|
||||||
<CopyOnClick text={mount.id.toString()}>
|
{ mounts !== undefined && !error && !isValidating && length > 0 &&
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.id}</code>
|
mounts.items.map(mount => (
|
||||||
</CopyOnClick>
|
<TableRow key={mount.id}>
|
||||||
</td>
|
<td css={tw`pl-6`}>
|
||||||
|
<RowCheckbox id={mount.id}/>
|
||||||
|
</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}/${mount.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
<CopyOnClick text={mount.id.toString()}>
|
||||||
{mount.name}
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.id}</code>
|
||||||
</NavLink>
|
</CopyOnClick>
|
||||||
</td>
|
</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`}>
|
||||||
<CopyOnClick text={mount.source.toString()}>
|
<NavLink to={`${match.url}/${mount.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.source}</code>
|
{mount.name}
|
||||||
</CopyOnClick>
|
</NavLink>
|
||||||
</td>
|
</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`}>
|
||||||
<CopyOnClick text={mount.target.toString()}>
|
<CopyOnClick text={mount.source.toString()}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.target}</code>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.source}</code>
|
||||||
</CopyOnClick>
|
</CopyOnClick>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td css={tw`px-6 whitespace-nowrap`}>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||||
{ mount.readOnly ?
|
<CopyOnClick text={mount.target.toString()}>
|
||||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.target}</code>
|
||||||
Read Only
|
</CopyOnClick>
|
||||||
</span>
|
</td>
|
||||||
:
|
|
||||||
<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`}>
|
<td css={tw`px-6 whitespace-nowrap`}>
|
||||||
{ mount.userMountable ?
|
{ mount.readOnly ?
|
||||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||||
Mountable
|
Read Only
|
||||||
</span>
|
</span>
|
||||||
:
|
:
|
||||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||||
Admin Only
|
Writable
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
</td>
|
</td>
|
||||||
</TableRow>
|
|
||||||
))
|
<td css={tw`px-6 whitespace-nowrap`}>
|
||||||
}
|
{ mount.userMountable ?
|
||||||
</TableBody>
|
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||||
</table>
|
Mountable
|
||||||
</div>
|
</span>
|
||||||
</Pagination>
|
:
|
||||||
</ContentWrapper>
|
<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>
|
</AdminTable>
|
||||||
</AdminContentBlock>
|
</AdminContentBlock>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -70,56 +70,58 @@ const EggsTable = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AdminTable>
|
<AdminTable>
|
||||||
{ eggs === undefined || (error && isValidating) ?
|
<ContentWrapper
|
||||||
<Loading/>
|
checked={selectedEggsLength === (length === 0 ? -1 : length)}
|
||||||
:
|
onSelectAllClick={onSelectAllClick}
|
||||||
length < 1 ?
|
onSearch={onSearch}
|
||||||
<NoItems/>
|
>
|
||||||
:
|
<Pagination data={eggs} onPageSelect={setPage}>
|
||||||
<ContentWrapper
|
<div css={tw`overflow-x-auto`}>
|
||||||
checked={selectedEggsLength === (length === 0 ? -1 : length)}
|
<table css={tw`w-full table-auto`}>
|
||||||
onSelectAllClick={onSelectAllClick}
|
<TableHead>
|
||||||
onSearch={onSearch}
|
<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')}/>
|
||||||
<Pagination data={eggs} onPageSelect={setPage}>
|
<TableHeader name={'Description'}/>
|
||||||
<div css={tw`overflow-x-auto`}>
|
</TableHead>
|
||||||
<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>
|
<TableBody>
|
||||||
{
|
{ eggs !== undefined && !error && !isValidating && length > 0 &&
|
||||||
eggs.items.map(egg => (
|
eggs.items.map(egg => (
|
||||||
<TableRow key={egg.id}>
|
<TableRow key={egg.id}>
|
||||||
<td css={tw`pl-6`}>
|
<td css={tw`pl-6`}>
|
||||||
<RowCheckbox id={egg.id}/>
|
<RowCheckbox id={egg.id}/>
|
||||||
</td>
|
</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`}>
|
||||||
<CopyOnClick text={egg.id.toString()}>
|
<CopyOnClick text={egg.id.toString()}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{egg.id}</code>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{egg.id}</code>
|
||||||
</CopyOnClick>
|
</CopyOnClick>
|
||||||
</td>
|
</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}/eggs/${egg.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
<NavLink to={`${match.url}/eggs/${egg.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||||
{egg.name}
|
{egg.name}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{egg.description}</td>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{egg.description}</td>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</Pagination>
|
{ eggs === undefined || (error && isValidating) ?
|
||||||
</ContentWrapper>
|
<Loading/>
|
||||||
}
|
:
|
||||||
|
length < 1 ?
|
||||||
|
<NoItems/>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Pagination>
|
||||||
|
</ContentWrapper>
|
||||||
</AdminTable>
|
</AdminTable>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ const NestsContainer = () => {
|
||||||
if (query.length < 2) {
|
if (query.length < 2) {
|
||||||
setFilters(null);
|
setFilters(null);
|
||||||
} else {
|
} else {
|
||||||
setFilters({ id: query });
|
setFilters({ name: query });
|
||||||
}
|
}
|
||||||
return resolve();
|
return resolve();
|
||||||
});
|
});
|
||||||
|
|
@ -87,56 +87,58 @@ const NestsContainer = () => {
|
||||||
<FlashMessageRender byKey={'nests'} css={tw`mb-4`}/>
|
<FlashMessageRender byKey={'nests'} css={tw`mb-4`}/>
|
||||||
|
|
||||||
<AdminTable>
|
<AdminTable>
|
||||||
{ nests === undefined || (error && isValidating) ?
|
<ContentWrapper
|
||||||
<Loading/>
|
checked={selectedNestsLength === (length === 0 ? -1 : length)}
|
||||||
:
|
onSelectAllClick={onSelectAllClick}
|
||||||
length < 1 ?
|
onSearch={onSearch}
|
||||||
<NoItems/>
|
>
|
||||||
:
|
<Pagination data={nests} onPageSelect={setPage}>
|
||||||
<ContentWrapper
|
<div css={tw`overflow-x-auto`}>
|
||||||
checked={selectedNestsLength === (length === 0 ? -1 : length)}
|
<table css={tw`w-full table-auto`}>
|
||||||
onSelectAllClick={onSelectAllClick}
|
<TableHead>
|
||||||
onSearch={onSearch}
|
<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')}/>
|
||||||
<Pagination data={nests} onPageSelect={setPage}>
|
<TableHeader name={'Description'}/>
|
||||||
<div css={tw`overflow-x-auto`}>
|
</TableHead>
|
||||||
<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>
|
<TableBody>
|
||||||
{
|
{ nests !== undefined && !error && !isValidating && length > 0 &&
|
||||||
nests.items.map(nest => (
|
nests.items.map(nest => (
|
||||||
<TableRow key={nest.id}>
|
<TableRow key={nest.id}>
|
||||||
<td css={tw`pl-6`}>
|
<td css={tw`pl-6`}>
|
||||||
<RowCheckbox id={nest.id}/>
|
<RowCheckbox id={nest.id}/>
|
||||||
</td>
|
</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`}>
|
||||||
<CopyOnClick text={nest.id.toString()}>
|
<CopyOnClick text={nest.id.toString()}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{nest.id}</code>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{nest.id}</code>
|
||||||
</CopyOnClick>
|
</CopyOnClick>
|
||||||
</td>
|
</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}/${nest.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
<NavLink to={`${match.url}/${nest.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||||
{nest.name}
|
{nest.name}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.description}</td>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{nest.description}</td>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</Pagination>
|
{ nests === undefined || (error && isValidating) ?
|
||||||
</ContentWrapper>
|
<Loading/>
|
||||||
}
|
:
|
||||||
|
length < 1 ?
|
||||||
|
<NoItems/>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Pagination>
|
||||||
|
</ContentWrapper>
|
||||||
</AdminTable>
|
</AdminTable>
|
||||||
</AdminContentBlock>
|
</AdminContentBlock>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ export default () => {
|
||||||
const match = useRouteMatch<{ id: string }>();
|
const match = useRouteMatch<{ id: string }>();
|
||||||
|
|
||||||
const [ ips, setIPs ] = useState<Option[]>([]);
|
const [ ips, setIPs ] = useState<Option[]>([]);
|
||||||
const [ ports, setPorts ] = useState<Option[]>([]);
|
const [ ports ] = useState<Option[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getAllocations(match.params.id)
|
getAllocations(match.params.id)
|
||||||
|
|
|
||||||
|
|
@ -93,100 +93,103 @@ const NodesContainer = () => {
|
||||||
<FlashMessageRender byKey={'nodes'} css={tw`mb-4`}/>
|
<FlashMessageRender byKey={'nodes'} css={tw`mb-4`}/>
|
||||||
|
|
||||||
<AdminTable>
|
<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>
|
<ContentWrapper
|
||||||
{
|
checked={selectedNodesLength === (length === 0 ? -1 : length)}
|
||||||
nodes.items.map(node => (
|
onSelectAllClick={onSelectAllClick}
|
||||||
<TableRow key={node.id}>
|
onSearch={onSearch}
|
||||||
<td css={tw`pl-6`}>
|
>
|
||||||
<RowCheckbox id={node.id}/>
|
<Pagination data={nodes} onPageSelect={setPage}>
|
||||||
</td>
|
<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`}>
|
<TableBody>
|
||||||
<CopyOnClick text={node.id.toString()}>
|
{ nodes !== undefined && !error && !isValidating && length > 0 &&
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.id}</code>
|
nodes.items.map(node => (
|
||||||
</CopyOnClick>
|
<TableRow key={node.id}>
|
||||||
</td>
|
<td css={tw`pl-6`}>
|
||||||
|
<RowCheckbox id={node.id}/>
|
||||||
|
</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`}>
|
<CopyOnClick text={node.id.toString()}>
|
||||||
{node.name}
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.id}</code>
|
||||||
</NavLink>
|
</CopyOnClick>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
{/* TODO: Have permission check for displaying location information. */}
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
<NavLink to={`${match.url}/${node.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||||
<NavLink to={`/admin/locations/${node.relations.location?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
{node.name}
|
||||||
<div css={tw`text-sm text-neutral-200`}>
|
</NavLink>
|
||||||
{node.relations.location?.short}
|
</td>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div css={tw`text-sm text-neutral-400`}>
|
{/* TODO: Have permission check for displaying location information. */}
|
||||||
{node.relations.location?.long}
|
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
||||||
</div>
|
<NavLink to={`/admin/locations/${node.relations.location?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||||
</NavLink>
|
<div css={tw`text-sm text-neutral-200`}>
|
||||||
</td>
|
{node.relations.location?.short}
|
||||||
|
</div>
|
||||||
|
|
||||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
<div css={tw`text-sm text-neutral-400`}>
|
||||||
<CopyOnClick text={node.fqdn}>
|
{node.relations.location?.long}
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.fqdn}</code>
|
</div>
|
||||||
</CopyOnClick>
|
</NavLink>
|
||||||
</td>
|
</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`}>
|
||||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.disk))}</td>
|
<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`}>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.memory))}</td>
|
||||||
{node.scheme === 'https' ?
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.disk))}</td>
|
||||||
<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`}>
|
<td css={tw`px-6 whitespace-nowrap`}>
|
||||||
{/* TODO: Change color based off of online/offline status */}
|
{node.scheme === 'https' ?
|
||||||
<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` ]}>
|
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||||
<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" />
|
Secure
|
||||||
</svg>
|
</span>
|
||||||
</td>
|
:
|
||||||
</TableRow>
|
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
|
||||||
))
|
Non-Secure
|
||||||
}
|
</span>
|
||||||
</TableBody>
|
}
|
||||||
</table>
|
</td>
|
||||||
</div>
|
|
||||||
</Pagination>
|
<td css={tw`px-6 whitespace-nowrap`}>
|
||||||
</ContentWrapper>
|
{/* 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>
|
</AdminTable>
|
||||||
</AdminContentBlock>
|
</AdminContentBlock>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -87,56 +87,58 @@ const RolesContainer = () => {
|
||||||
<FlashMessageRender byKey={'roles'} css={tw`mb-4`}/>
|
<FlashMessageRender byKey={'roles'} css={tw`mb-4`}/>
|
||||||
|
|
||||||
<AdminTable>
|
<AdminTable>
|
||||||
{ roles === undefined || (error && isValidating) ?
|
<ContentWrapper
|
||||||
<Loading/>
|
checked={selectedRolesLength === (length === 0 ? -1 : length)}
|
||||||
:
|
onSelectAllClick={onSelectAllClick}
|
||||||
length < 1 ?
|
onSearch={onSearch}
|
||||||
<NoItems/>
|
>
|
||||||
:
|
<Pagination data={roles} onPageSelect={setPage}>
|
||||||
<ContentWrapper
|
<div css={tw`overflow-x-auto`}>
|
||||||
checked={selectedRolesLength === (length === 0 ? -1 : length)}
|
<table css={tw`w-full table-auto`}>
|
||||||
onSelectAllClick={onSelectAllClick}
|
<TableHead>
|
||||||
onSearch={onSearch}
|
<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')}/>
|
||||||
<Pagination data={roles} onPageSelect={setPage}>
|
<TableHeader name={'Description'}/>
|
||||||
<div css={tw`overflow-x-auto`}>
|
</TableHead>
|
||||||
<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>
|
<TableBody>
|
||||||
{
|
{ roles !== undefined && !error && !isValidating && length > 0 &&
|
||||||
roles.items.map(role => (
|
roles.items.map(role => (
|
||||||
<TableRow key={role.id}>
|
<TableRow key={role.id}>
|
||||||
<td css={tw`pl-6`}>
|
<td css={tw`pl-6`}>
|
||||||
<RowCheckbox id={role.id}/>
|
<RowCheckbox id={role.id}/>
|
||||||
</td>
|
</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`}>
|
||||||
<CopyOnClick text={role.id.toString()}>
|
<CopyOnClick text={role.id.toString()}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{role.id}</code>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{role.id}</code>
|
||||||
</CopyOnClick>
|
</CopyOnClick>
|
||||||
</td>
|
</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}/${role.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
<NavLink to={`${match.url}/${role.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||||
{role.name}
|
{role.name}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.description}</td>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{role.description}</td>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
</Pagination>
|
{ roles === undefined || (error && isValidating) ?
|
||||||
</ContentWrapper>
|
<Loading/>
|
||||||
}
|
:
|
||||||
|
length < 1 ?
|
||||||
|
<NoItems/>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Pagination>
|
||||||
|
</ContentWrapper>
|
||||||
</AdminTable>
|
</AdminTable>
|
||||||
</AdminContentBlock>
|
</AdminContentBlock>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useContext, useEffect, useState } from 'react';
|
import React, { useContext, useEffect, useState } from 'react';
|
||||||
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
|
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
|
||||||
import AdminCheckbox from '@/components/admin/AdminCheckbox';
|
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 Button from '@/components/elements/Button';
|
||||||
import CopyOnClick from '@/components/elements/CopyOnClick';
|
import CopyOnClick from '@/components/elements/CopyOnClick';
|
||||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||||
|
|
@ -36,7 +36,7 @@ const ServersContainer = () => {
|
||||||
|
|
||||||
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
|
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
|
||||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
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;
|
const length = servers?.items?.length || 0;
|
||||||
|
|
||||||
|
|
@ -96,97 +96,99 @@ const ServersContainer = () => {
|
||||||
onSelectAllClick={onSelectAllClick}
|
onSelectAllClick={onSelectAllClick}
|
||||||
onSearch={onSearch}
|
onSearch={onSearch}
|
||||||
>
|
>
|
||||||
{servers === undefined ?
|
<Pagination data={servers} onPageSelect={setPage}>
|
||||||
<Loading/>
|
<div css={tw`overflow-x-auto`}>
|
||||||
:
|
<table css={tw`w-full table-auto`}>
|
||||||
// length < 1 ?
|
<TableHead>
|
||||||
// <NoItems/>
|
<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')}/>
|
||||||
<Pagination data={servers} onPageSelect={setPage}>
|
<TableHeader name={'Owner'} direction={sort === 'owner_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('owner_id')}/>
|
||||||
<div css={tw`overflow-x-auto`}>
|
<TableHeader name={'Node'} direction={sort === 'node_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('node_id')}/>
|
||||||
<table css={tw`w-full table-auto`}>
|
<TableHeader name={'Status'} direction={sort === 'status' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('status')}/>
|
||||||
<TableHead>
|
</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>
|
<TableBody>
|
||||||
{
|
{ servers !== undefined && !error && !isValidating && length > 0 &&
|
||||||
servers?.items.map(server => (
|
servers.items.map(server => (
|
||||||
<tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}>
|
<tr key={server.id} css={tw`h-14 hover:bg-neutral-600`}>
|
||||||
<td css={tw`pl-6`}>
|
<td css={tw`pl-6`}>
|
||||||
<RowCheckbox id={server.id}/>
|
<RowCheckbox id={server.id}/>
|
||||||
</td>
|
</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`}>
|
||||||
<CopyOnClick text={server.identifier}>
|
<CopyOnClick text={server.identifier}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{server.identifier}</code>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{server.identifier}</code>
|
||||||
</CopyOnClick>
|
</CopyOnClick>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
<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`}>
|
<NavLink to={`${match.url}/${server.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
|
||||||
{server.name}
|
{server.name}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
{/* TODO: Have permission check for displaying user information. */}
|
{/* TODO: Have permission check for displaying user information. */}
|
||||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
<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`}>
|
<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`}>
|
<div css={tw`text-sm text-neutral-200`}>
|
||||||
{server.relations.user?.firstName} {server.relations.user?.lastName}
|
{server.relations.user?.firstName} {server.relations.user?.lastName}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div css={tw`text-sm text-neutral-400`}>
|
<div css={tw`text-sm text-neutral-400`}>
|
||||||
{server.relations.user?.email}
|
{server.relations.user?.email}
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
{/* TODO: Have permission check for displaying node information. */}
|
{/* TODO: Have permission check for displaying node information. */}
|
||||||
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
|
<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`}>
|
<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`}>
|
<div css={tw`text-sm text-neutral-200`}>
|
||||||
{server.relations.node?.name}
|
{server.relations.node?.name}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div css={tw`text-sm text-neutral-400`}>
|
<div css={tw`text-sm text-neutral-400`}>
|
||||||
{server.relations.node?.fqdn}
|
{server.relations.node?.fqdn}
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td css={tw`px-6 whitespace-nowrap`}>
|
<td css={tw`px-6 whitespace-nowrap`}>
|
||||||
{server.status === 'installing' ?
|
{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`}>
|
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
||||||
Installing
|
Transferring
|
||||||
</span>
|
</span>
|
||||||
:
|
: server.status === 'suspended' ?
|
||||||
server.status === 'transferring' ?
|
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
|
||||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
|
Suspended
|
||||||
Transferring
|
|
||||||
</span>
|
</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`}>
|
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||||
Suspended
|
Active
|
||||||
</span>
|
</span>
|
||||||
:
|
}
|
||||||
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
</td>
|
||||||
Active
|
</tr>
|
||||||
</span>
|
))
|
||||||
}
|
}
|
||||||
</td>
|
</TableBody>
|
||||||
</tr>
|
</table>
|
||||||
))
|
|
||||||
}
|
{ servers === undefined || (error && isValidating) ?
|
||||||
</TableBody>
|
<Loading/>
|
||||||
</table>
|
:
|
||||||
</div>
|
length < 1 ?
|
||||||
</Pagination>
|
<NoItems/>
|
||||||
}
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Pagination>
|
||||||
</ContentWrapper>
|
</ContentWrapper>
|
||||||
</AdminTable>
|
</AdminTable>
|
||||||
</AdminContentBlock>
|
</AdminContentBlock>
|
||||||
|
|
|
||||||
|
|
@ -91,80 +91,82 @@ const UsersContainer = () => {
|
||||||
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
|
<FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
|
||||||
|
|
||||||
<AdminTable>
|
<AdminTable>
|
||||||
{ users === undefined || (error && isValidating) ?
|
<ContentWrapper
|
||||||
<Loading/>
|
checked={selectedUserLength === (length === 0 ? -1 : length)}
|
||||||
:
|
onSelectAllClick={onSelectAllClick}
|
||||||
length < 1 ?
|
onSearch={onSearch}
|
||||||
<NoItems/>
|
>
|
||||||
:
|
<Pagination data={users} onPageSelect={setPage}>
|
||||||
<ContentWrapper
|
<div css={tw`overflow-x-auto`}>
|
||||||
checked={selectedUserLength === (length === 0 ? -1 : length)}
|
<table css={tw`w-full table-auto`}>
|
||||||
onSelectAllClick={onSelectAllClick}
|
<TableHead>
|
||||||
onSearch={onSearch}
|
<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')}/>
|
||||||
<Pagination data={users} onPageSelect={setPage}>
|
<TableHeader name={'Username'} direction={sort === 'username' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('username')}/>
|
||||||
<div css={tw`overflow-x-auto`}>
|
<TableHeader name={'Status'}/>
|
||||||
<table css={tw`w-full table-auto`}>
|
<TableHeader name={'Role'} direction={sort === 'admin_role_id' ? (sortDirection ? 1 : 2) : null} onClick={() => setSort('admin_role_id')}/>
|
||||||
<TableHead>
|
</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>
|
<TableBody>
|
||||||
{
|
{ users !== undefined && !error && !isValidating && length > 0 &&
|
||||||
users.items.map(user => (
|
users.items.map(user => (
|
||||||
<tr key={user.id} css={tw`h-14 hover:bg-neutral-600`}>
|
<tr key={user.id} css={tw`h-14 hover:bg-neutral-600`}>
|
||||||
<td css={tw`pl-6`}>
|
<td css={tw`pl-6`}>
|
||||||
<RowCheckbox id={user.id}/>
|
<RowCheckbox id={user.id}/>
|
||||||
</td>
|
</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`}>
|
||||||
<CopyOnClick text={user.id.toString()}>
|
<CopyOnClick text={user.id.toString()}>
|
||||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{user.id}</code>
|
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{user.id}</code>
|
||||||
</CopyOnClick>
|
</CopyOnClick>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td css={tw`px-6 whitespace-nowrap`}>
|
<td css={tw`px-6 whitespace-nowrap`}>
|
||||||
<NavLink to={`${match.url}/${user.id}`}>
|
<NavLink to={`${match.url}/${user.id}`}>
|
||||||
<div css={tw`flex items-center`}>
|
<div css={tw`flex items-center`}>
|
||||||
<div css={tw`flex-shrink-0 h-10 w-10`}>
|
<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'}/>
|
<img css={tw`h-10 w-10 rounded-full`} alt="" src={user.avatarURL + '?s=40'}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div css={tw`ml-4`}>
|
<div css={tw`ml-4`}>
|
||||||
<div css={tw`text-sm text-neutral-200`}>
|
<div css={tw`text-sm text-neutral-200`}>
|
||||||
{user.firstName} {user.lastName}
|
{user.firstName} {user.lastName}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div css={tw`text-sm text-neutral-400`}>
|
|
||||||
{user.email}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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`}>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.username}</td>
|
||||||
<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>
|
<td css={tw`px-6 whitespace-nowrap`}>
|
||||||
</tr>
|
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
|
||||||
))
|
Active
|
||||||
}
|
</span>
|
||||||
</TableBody>
|
</td>
|
||||||
</table>
|
|
||||||
</div>
|
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{user.roleName || 'None'}</td>
|
||||||
</Pagination>
|
</tr>
|
||||||
</ContentWrapper>
|
))
|
||||||
}
|
}
|
||||||
|
</TableBody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{ users === undefined || (error && isValidating) ?
|
||||||
|
<Loading/>
|
||||||
|
:
|
||||||
|
length < 1 ?
|
||||||
|
<NoItems/>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Pagination>
|
||||||
|
</ContentWrapper>
|
||||||
</AdminTable>
|
</AdminTable>
|
||||||
</AdminContentBlock>
|
</AdminContentBlock>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue