diff --git a/src/fireedge/src/client/components/Tables/Clusters/index.js b/src/fireedge/src/client/components/Tables/Clusters/index.js index 190f1c2148..30abae8bf2 100644 --- a/src/fireedge/src/client/components/Tables/Clusters/index.js +++ b/src/fireedge/src/client/components/Tables/Clusters/index.js @@ -4,7 +4,7 @@ import { useAuth } from 'client/features/Auth' import { useFetch } from 'client/hooks' import { useCluster, useClusterApi } from 'client/features/One' -import { EnhancedTable } from 'client/components/Tables' +import { SkeletonTable, EnhancedTable } from 'client/components/Tables' import ClusterColumns from 'client/components/Tables/Clusters/columns' import ClusterRow from 'client/components/Tables/Clusters/row' @@ -15,10 +15,14 @@ const ClustersTable = () => { const { getClusters } = useClusterApi() const { filterPool } = useAuth() - const { fetchRequest, loading, reloading } = useFetch(getClusters) + const { status, fetchRequest, loading, reloading } = useFetch(getClusters) useEffect(() => { fetchRequest() }, [filterPool]) + if (clusters?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( { const { getDatastores } = useDatastoreApi() const { filterPool } = useAuth() - const { fetchRequest, loading, reloading } = useFetch(getDatastores) + const { status, fetchRequest, loading, reloading } = useFetch(getDatastores) useEffect(() => { fetchRequest() }, [filterPool]) + if (datastores?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( ({ flexShrink: 0, display: 'flex', alignItems: 'center', + justifyContent: 'end', gap: '1em' }, loading: { diff --git a/src/fireedge/src/client/components/Tables/Enhanced/toolbar.js b/src/fireedge/src/client/components/Tables/Enhanced/toolbar.js index de79684ba1..6b9b0fd8fa 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/toolbar.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/toolbar.js @@ -18,9 +18,13 @@ const Toolbar = ({ useTableProps }) => { const classes = useToolbarStyles() const isMobile = useMediaQuery(theme => theme.breakpoints.down('sm')) + if (isMobile) { + return null + } + return (
- {!isMobile && } +
) } diff --git a/src/fireedge/src/client/components/Tables/Groups/index.js b/src/fireedge/src/client/components/Tables/Groups/index.js index 1cb62ed97a..fd2810a43e 100644 --- a/src/fireedge/src/client/components/Tables/Groups/index.js +++ b/src/fireedge/src/client/components/Tables/Groups/index.js @@ -3,7 +3,7 @@ import React, { useEffect } from 'react' import { useFetch } from 'client/hooks' import { useGroup, useGroupApi } from 'client/features/One' -import { EnhancedTable } from 'client/components/Tables' +import { SkeletonTable, EnhancedTable } from 'client/components/Tables' import GroupColumns from 'client/components/Tables/Groups/columns' import GroupRow from 'client/components/Tables/Groups/row' @@ -13,10 +13,14 @@ const GroupsTable = () => { const groups = useGroup() const { getGroups } = useGroupApi() - const { fetchRequest, loading, reloading } = useFetch(getGroups) + const { status, fetchRequest, loading, reloading } = useFetch(getGroups) useEffect(() => { fetchRequest() }, []) + if (groups?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( { const { getHosts } = useHostApi() const { filterPool } = useAuth() - const { fetchRequest, loading, reloading } = useFetch(getHosts) + const { status, fetchRequest, loading, reloading } = useFetch(getHosts) useEffect(() => { fetchRequest() }, [filterPool]) + if (hosts?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( { const { getImages } = useImageApi() const { filterPool } = useAuth() - const { fetchRequest, loading, reloading } = useFetch(getImages) + const { status, fetchRequest, loading, reloading } = useFetch(getImages) useEffect(() => { fetchRequest() }, [filterPool]) + if (images?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( { const { getMarketplaceApps } = useMarketplaceAppApi() const { filterPool } = useAuth() - const { fetchRequest, loading, reloading } = useFetch(getMarketplaceApps) + const { status, fetchRequest, loading, reloading } = useFetch(getMarketplaceApps) useEffect(() => { fetchRequest() }, [filterPool]) + if (marketplaceApps?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( { useEffect(() => { fetchRequest() }, [filterPool]) + if (marketplaces?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( { + const isMobile = useMediaQuery(theme => theme.breakpoints.down('sm')) + const classes = EnhancedTableStyles() + const rowClasses = rowStyles() + + const SkeletonCategory = ({ numberOfItems = 1 }) => ( + <> + + {[...new Array(numberOfItems)].map((_, idx) => ( + + ))} + + ) + + const SkeletonRow = () => ( + +
+
+ +
+
+ + + +
+
+ + ) + + return ( +
+
+ {!isMobile && } +
+ + + +
+
+
+ {isMobile ? ( + + ) : ( + + +
+ + +
+ + )} +
+ + + + + +
+
+
+ + ) +}) + +SkeletonTable.displayName = 'SkeletonTable' + +export default SkeletonTable diff --git a/src/fireedge/src/client/components/Tables/Users/index.js b/src/fireedge/src/client/components/Tables/Users/index.js index a2d57e9205..c1899e52f3 100644 --- a/src/fireedge/src/client/components/Tables/Users/index.js +++ b/src/fireedge/src/client/components/Tables/Users/index.js @@ -3,7 +3,7 @@ import React, { useEffect } from 'react' import { useFetch } from 'client/hooks' import { useUser, useUserApi } from 'client/features/One' -import { EnhancedTable } from 'client/components/Tables' +import { SkeletonTable, EnhancedTable } from 'client/components/Tables' import UserColumns from 'client/components/Tables/Users/columns' import UserRow from 'client/components/Tables/Users/row' @@ -13,10 +13,14 @@ const UsersTable = () => { const users = useUser() const { getUsers } = useUserApi() - const { fetchRequest, loading, reloading } = useFetch(getUsers) + const { status, fetchRequest, loading, reloading } = useFetch(getUsers) useEffect(() => { fetchRequest() }, []) + if (users?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( { const vmTemplates = useVmTemplate() const { getVmTemplates } = useVmTemplateApi() - const { fetchRequest, loading, reloading } = useFetch(getVmTemplates) + const { status, fetchRequest, loading, reloading } = useFetch(getVmTemplates) useEffect(() => { fetchRequest() }, []) + if (vmTemplates?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( { requests[status]?.() }, [filterPool, status, data]) + if (vms?.length === 0 && ['INIT', 'PENDING'].includes(status)) { + return + } + return ( MARKETPLACE_APP_TYPES[+TYPE] -export const getState = ({ STATE } = {}) => MARKETPLACE_APP_STATES[+STATE] +export const getState = ({ STATE = 0 } = {}) => MARKETPLACE_APP_STATES[+STATE]