diff --git a/resources/scripts/components/admin/databases/DatabasesContainer.tsx b/resources/scripts/components/admin/databases/DatabasesContainer.tsx index 478128e53..f9cb17d9a 100644 --- a/resources/scripts/components/admin/databases/DatabasesContainer.tsx +++ b/resources/scripts/components/admin/databases/DatabasesContainer.tsx @@ -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 = () => { - { databases === undefined || (error && isValidating) ? - - : - length < 1 ? - - : - - -
- - - setSort('id')}/> - setSort('name')}/> - - setSort('username')}/> - + + +
+
+ + setSort('id')}/> + setSort('name')}/> + + setSort('username')}/> + - - { - databases.items.map(database => ( - - + + { databases !== undefined && !error && !isValidating && length > 0 && + databases.items.map(database => ( + + - + - + - + - - - )) - } - -
- - + + - - {database.id} - - + + {database.id} + + - - {database.name} - - + + {database.name} + + - - {database.getAddress()} - - + + {database.getAddress()} + + {database.username}
-
- - - } + {database.username} + + )) + } + + + + { databases === undefined || (error && isValidating) ? + + : + length < 1 ? + + : + null + } + + + ); diff --git a/resources/scripts/components/admin/locations/LocationsContainer.tsx b/resources/scripts/components/admin/locations/LocationsContainer.tsx index a14903912..23dcb9405 100644 --- a/resources/scripts/components/admin/locations/LocationsContainer.tsx +++ b/resources/scripts/components/admin/locations/LocationsContainer.tsx @@ -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 = () => { - { locations === undefined || (error && isValidating) ? - - : - length < 1 ? - - : - - -
- - - setSort('id')}/> - setSort('short')}/> - setSort('long')}/> - + + +
+
+ + setSort('id')}/> + setSort('short')}/> + setSort('long')}/> + - - { - locations.items.map(location => ( - - + + { locations !== undefined && !error && !isValidating && length > 0 && + locations.items.map(location => ( + + - + - + - - - )) - } - -
- - + + - - {location.id} - - + + {location.id} + + - - {location.short} - - + + {location.short} + + {location.long}
-
- - - } + {location.long} + + )) + } + + + + { locations === undefined || (error && isValidating) ? + + : + length < 1 ? + + : + null + } + + + ); diff --git a/resources/scripts/components/admin/mounts/MountsContainer.tsx b/resources/scripts/components/admin/mounts/MountsContainer.tsx index 66d8c4043..8531120ae 100644 --- a/resources/scripts/components/admin/mounts/MountsContainer.tsx +++ b/resources/scripts/components/admin/mounts/MountsContainer.tsx @@ -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 = () => { - { mounts === undefined || (error && isValidating) ? - - : - length < 1 ? - - : - - -
- - - setSort('id')}/> - setSort('name')}/> - setSort('source')}/> - setSort('target')}/> - + + +
+
- - - - { - mounts.items.map(mount => ( - - - -
+ + setSort('id')}/> + setSort('name')}/> + setSort('source')}/> + setSort('target')}/> + + + { mounts !== undefined && !error && !isValidating && length > 0 && + mounts.items.map(mount => ( + + - + - + - + - + - - - )) - } - -
+ + - - - {mount.id} - - + + - - {mount.name} - - + + {mount.id} + + - - {mount.source} - - + + {mount.name} + + - - {mount.target} - - + + {mount.source} + + - { mount.readOnly ? - - Read Only - - : - - Writable - - } - + + {mount.target} + + - { mount.userMountable ? - - Mountable - - : - - Admin Only - - } -
-
- - - } + + { mount.readOnly ? + + Read Only + + : + + Writable + + } + + + + { mount.userMountable ? + + Mountable + + : + + Admin Only + + } + + + )) + } + + + + { mounts === undefined || (error && isValidating) ? + + : + length < 1 ? + + : + null + } + + + ); diff --git a/resources/scripts/components/admin/nests/NestEggTable.tsx b/resources/scripts/components/admin/nests/NestEggTable.tsx index e9afdf400..84342c038 100644 --- a/resources/scripts/components/admin/nests/NestEggTable.tsx +++ b/resources/scripts/components/admin/nests/NestEggTable.tsx @@ -70,56 +70,58 @@ const EggsTable = () => { return ( - { eggs === undefined || (error && isValidating) ? - - : - length < 1 ? - - : - - -
- - - setSort('id')}/> - setSort('name')}/> - - + + +
+
+ + setSort('id')}/> + setSort('name')}/> + + - - { - eggs.items.map(egg => ( - - + + { eggs !== undefined && !error && !isValidating && length > 0 && + eggs.items.map(egg => ( + + - + - + - - - )) - } - -
- - + + - - {egg.id} - - + + {egg.id} + + - - {egg.name} - - + + {egg.name} + + {egg.description}
-
- - - } + {egg.description} + + )) + } + + + + { eggs === undefined || (error && isValidating) ? + + : + length < 1 ? + + : + null + } + + + ); }; diff --git a/resources/scripts/components/admin/nests/NestsContainer.tsx b/resources/scripts/components/admin/nests/NestsContainer.tsx index 651016398..afb488ba6 100644 --- a/resources/scripts/components/admin/nests/NestsContainer.tsx +++ b/resources/scripts/components/admin/nests/NestsContainer.tsx @@ -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 = () => { - { nests === undefined || (error && isValidating) ? - - : - length < 1 ? - - : - - -
- - - setSort('id')}/> - setSort('name')}/> - - + + +
+
+ + setSort('id')}/> + setSort('name')}/> + + - - { - nests.items.map(nest => ( - - + + { nests !== undefined && !error && !isValidating && length > 0 && + nests.items.map(nest => ( + + - + - + - - - )) - } - -
- - + + - - {nest.id} - - + + {nest.id} + + - - {nest.name} - - + + {nest.name} + + {nest.description}
-
- - - } + {nest.description} + + )) + } + + + + { nests === undefined || (error && isValidating) ? + + : + length < 1 ? + + : + null + } + + + ); diff --git a/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx b/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx index 27edde883..d28f5ffc7 100644 --- a/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx +++ b/resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx @@ -21,7 +21,7 @@ export default () => { const match = useRouteMatch<{ id: string }>(); const [ ips, setIPs ] = useState([]); - const [ ports, setPorts ] = useState([]); + const [ ports ] = useState([]); useEffect(() => { getAllocations(match.params.id) diff --git a/resources/scripts/components/admin/nodes/NodesContainer.tsx b/resources/scripts/components/admin/nodes/NodesContainer.tsx index 824e8d400..85581cace 100644 --- a/resources/scripts/components/admin/nodes/NodesContainer.tsx +++ b/resources/scripts/components/admin/nodes/NodesContainer.tsx @@ -93,100 +93,103 @@ const NodesContainer = () => { - { nodes === undefined || (error && isValidating) ? - - : - length < 1 ? - - : - - -
- - - setSort('id')}/> - setSort('name')}/> - setSort('location_id')}/> - setSort('fqdn')}/> - setSort('memory')}/> - setSort('disk')}/> - - - - - { - nodes.items.map(node => ( - - + + +
+
- -
+ + setSort('id')}/> + setSort('name')}/> + setSort('location_id')}/> + setSort('fqdn')}/> + setSort('memory')}/> + setSort('disk')}/> + + + - + + { nodes !== undefined && !error && !isValidating && length > 0 && + nodes.items.map(node => ( + + - + - {/* TODO: Have permission check for displaying location information. */} - -
- {node.relations.location?.long} -
- - + {/* TODO: Have permission check for displaying location information. */} + +
+ {node.relations.location?.long} +
+ + - - + - + + - - - )) - } - -
- - {node.id} - - + + - - {node.name} - - + + {node.id} + + - -
- {node.relations.location?.short} -
+ 		+ + {node.name} + + + +
+ {node.relations.location?.short} +
- 		- - {node.fqdn} - - {bytesToHuman(megabytesToBytes(node.memory))}{bytesToHuman(megabytesToBytes(node.disk))} + + {node.fqdn} + + - {node.scheme === 'https' ? - - Secure - - : - - Non-Secure - - } - {bytesToHuman(megabytesToBytes(node.memory))}{bytesToHuman(megabytesToBytes(node.disk))} - {/* TODO: Change color based off of online/offline status */} - - - -
-
- - - } + + {node.scheme === 'https' ? + + Secure + + : + + Non-Secure + + } + + + + {/* TODO: Change color based off of online/offline status */} + + + + + + )) + } + + + + { nodes === undefined || (error && isValidating) ? + + : + length < 1 ? + + : + null + } + + + ); diff --git a/resources/scripts/components/admin/roles/RolesContainer.tsx b/resources/scripts/components/admin/roles/RolesContainer.tsx index cd15f6f72..5396c40b8 100644 --- a/resources/scripts/components/admin/roles/RolesContainer.tsx +++ b/resources/scripts/components/admin/roles/RolesContainer.tsx @@ -87,56 +87,58 @@ const RolesContainer = () => { - { roles === undefined || (error && isValidating) ? - - : - length < 1 ? - - : - - -
- - - setSort('id')}/> - setSort('name')}/> - - + + +
+
+ + setSort('id')}/> + setSort('name')}/> + + - - { - roles.items.map(role => ( - - + + { roles !== undefined && !error && !isValidating && length > 0 && + roles.items.map(role => ( + + - + - + - - - )) - } - -
- - + + - - {role.id} - - + + {role.id} + + - - {role.name} - - + + {role.name} + + {role.description}
-
- - - } + {role.description} + + )) + } + + + + { roles === undefined || (error && isValidating) ? + + : + length < 1 ? + + : + null + } + + + ); diff --git a/resources/scripts/components/admin/servers/ServersContainer.tsx b/resources/scripts/components/admin/servers/ServersContainer.tsx index cf2127c94..d38a1f668 100644 --- a/resources/scripts/components/admin/servers/ServersContainer.tsx +++ b/resources/scripts/components/admin/servers/ServersContainer.tsx @@ -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 ? - - : - // length < 1 ? - // - // : - -
- - - setSort('uuidShort')}/> - setSort('name')}/> - setSort('owner_id')}/> - setSort('node_id')}/> - setSort('status')}/> - + +
+
+ + setSort('uuidShort')}/> + setSort('name')}/> + setSort('owner_id')}/> + setSort('node_id')}/> + setSort('status')}/> + - - { - servers?.items.map(server => ( - - + + { servers !== undefined && !error && !isValidating && length > 0 && + servers.items.map(server => ( + + - + - + - {/* TODO: Have permission check for displaying user information. */} - +
+ {server.relations.user?.email} +
+ + - {/* TODO: Have permission check for displaying node information. */} - +
+ {server.relations.node?.fqdn} +
+ + - - - )) - } - -
- -
+ + - - {server.identifier} - - + + {server.identifier} + + - - {server.name} - - + + {server.name} + + - -
- {server.relations.user?.firstName} {server.relations.user?.lastName} -
+ {/* TODO: Have permission check for displaying user information. */} + 		+ +
+ {server.relations.user?.firstName} {server.relations.user?.lastName} +
-
- {server.relations.user?.email} -
- - 		- -
- {server.relations.node?.name} -
+ {/* TODO: Have permission check for displaying node information. */} + 		+ +
+ {server.relations.node?.name} +
-
- {server.relations.node?.fqdn} -
- - 		- {server.status === 'installing' ? + + {server.status === 'installing' ? + + Installing + + : + server.status === 'transferring' ? - Installing + Transferring - : - server.status === 'transferring' ? - - Transferring + : server.status === 'suspended' ? + + Suspended - : server.status === 'suspended' ? - - Suspended - - : - - Active - - } -
-
- - } + : + + Active + + } + + + )) + } + + + + { servers === undefined || (error && isValidating) ? + + : + length < 1 ? + + : + null + } + + diff --git a/resources/scripts/components/admin/users/UsersContainer.tsx b/resources/scripts/components/admin/users/UsersContainer.tsx index 66e9dfea9..2d67857c3 100644 --- a/resources/scripts/components/admin/users/UsersContainer.tsx +++ b/resources/scripts/components/admin/users/UsersContainer.tsx @@ -91,80 +91,82 @@ const UsersContainer = () => { - { users === undefined || (error && isValidating) ? - - : - length < 1 ? - - : - - -
- - - setSort('id')}/> - setSort('email')}/> - setSort('username')}/> - - setSort('admin_role_id')}/> - + + +
+
+ + setSort('id')}/> + setSort('email')}/> + setSort('username')}/> + + setSort('admin_role_id')}/> + - - { - users.items.map(user => ( - - + + { users !== undefined && !error && !isValidating && length > 0 && + users.items.map(user => ( + + - + - - +
+ {user.email} +
+ + + + - + - - - )) - } - -
- -
+ + - - {user.id} - - + + {user.id} + + - -
-
- -
+
+ +
+
+ +
-
-
- {user.firstName} {user.lastName} -
- -
- {user.email} -
-
+
+
+ {user.firstName} {user.lastName}
- -
{user.username} - - Active - - {user.username}{user.roleName || 'None'}
-
- - - } + + + Active + + + + {user.roleName || 'None'} + + )) + } + + + + { users === undefined || (error && isValidating) ? + + : + length < 1 ? + + : + null + } + + + );