mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-16 22:50:10 +03:00
F OpenNebula/one#5422: Fix datatables styles
This commit is contained in:
Sergio Betanzos
parent
cfac4c9c0c
commit
dc329b1f0c
@ -46,7 +46,7 @@ const GlobalFilter = ({ useTableProps }) => {
|
||||
*/
|
||||
const { setGlobalFilter, state: { globalFilter } } = useTableProps
|
||||
|
||||
const [value, setValue] = React.useState(globalFilter)
|
||||
const [value, setValue] = React.useState(() => globalFilter)
|
||||
|
||||
const handleChange = React.useCallback(
|
||||
// Set undefined to remove the filter entirely
|
||||
|
||||
@ -45,6 +45,7 @@ export default makeStyles(
|
||||
gap: '1em',
|
||||
gridTemplateColumns: 'minmax(0, 1fr)',
|
||||
gridAutoRows: 'max-content',
|
||||
paddingBlock: '0.8em',
|
||||
'& > [role=row]': {
|
||||
padding: '0.8em',
|
||||
cursor: 'pointer',
|
||||
|
||||
@ -15,7 +15,7 @@ const MarketplacesTable = () => {
|
||||
const { getMarketplaces } = useMarketplaceApi()
|
||||
const { filterPool } = useAuth()
|
||||
|
||||
const { fetchRequest, loading, reloading, STATUS } = useFetch(getMarketplaces)
|
||||
const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getMarketplaces)
|
||||
const { INIT, PENDING } = STATUS
|
||||
|
||||
useEffect(() => { fetchRequest() }, [filterPool])
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function Clusters () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.ClustersTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.ClustersTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function Datastores () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.DatastoresTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.DatastoresTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function Groups () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.GroupsTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.GroupsTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function Hosts () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.HostsTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.HostsTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function Images () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.ImagesTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.ImagesTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function MarketplaceApps () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.MarketplaceAppsTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.MarketplaceAppsTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function Marketplaces () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.MarketplacesTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.MarketplacesTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function Users () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.UsersTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.UsersTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function VirtualMachines () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.VmsTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.VmsTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { styled, Container as MContainer, Box } from '@material-ui/core'
|
||||
import { Container, Box } from '@material-ui/core'
|
||||
|
||||
import * as Tables from 'client/components/Tables'
|
||||
|
||||
const Container = styled(MContainer)`
|
||||
display: flex;
|
||||
flexDirection: column;
|
||||
height: 100%
|
||||
`
|
||||
|
||||
function VmTemplates () {
|
||||
return (
|
||||
<Container disableGutters>
|
||||
<Box py={2} overflow='auto'>
|
||||
<Tables.VmTemplatesTable />
|
||||
</Box>
|
||||
</Container>
|
||||
<Box
|
||||
height={1}
|
||||
py={2}
|
||||
overflow='auto'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
component={Container}
|
||||
>
|
||||
<Tables.VmTemplatesTable />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user