shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-16 22:50:10 +03:00
Code Releases Wiki Activity

F OpenNebula/one#5422: Fix minor styles

Browse Source
This commit is contained in:
Sergio Betanzos 2021-06-30 17:30:40 +02:00
parent 2631b867cf
commit 631360caca
No known key found for this signature in database
GPG Key ID: E3E704F097737136
16 changed files with 121 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/fireedge/src/client/components/Sidebar/styles.js
View File

@ -7,6 +7,7 @@ export default makeStyles(theme => ({
// -------------------------------
drawerPaper: {
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[1],
border: 'none',
width: 0,
visibility: 'hidden',

5
src/fireedge/src/client/components/Tables/Clusters/index.js
View File

@ -15,11 +15,12 @@ const ClustersTable = () => {
const { getClusters } = useClusterApi()
const { filterPool } = useAuth()
const { status, fetchRequest, loading, reloading } = useFetch(getClusters)
const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getClusters)
const { INIT, PENDING } = STATUS
useEffect(() => { fetchRequest() }, [filterPool])
if (clusters?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (clusters?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

5
src/fireedge/src/client/components/Tables/Datastores/index.js
View File

@ -15,11 +15,12 @@ const DatastoresTable = () => {
const { getDatastores } = useDatastoreApi()
const { filterPool } = useAuth()
const { status, fetchRequest, loading, reloading } = useFetch(getDatastores)
const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getDatastores)
const { INIT, PENDING } = STATUS
useEffect(() => { fetchRequest() }, [filterPool])
if (datastores?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (datastores?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

3
src/fireedge/src/client/components/Tables/Enhanced/index.js
View File

@ -191,7 +191,8 @@ EnhancedTable.propTypes = {
renderDetail: PropTypes.func,
RowComponent: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
PropTypes.node,
PropTypes.func
]),
showPageCount: PropTypes.bool
}

136
src/fireedge/src/client/components/Tables/Enhanced/styles.js
View File

@ -2,73 +2,75 @@ import { makeStyles } from '@material-ui/core'
import { addOpacityToColor } from 'client/utils'
export default makeStyles(({ palette, typography, breakpoints }) => ({
root: {
height: '100%',
display: 'flex',
flexDirection: 'column'
},
toolbar: {
...typography.body1,
marginBottom: 16,
display: 'flex',
gap: '1em',
alignItems: 'start',
justifyContent: 'space-between',
'& > div:first-child': {
flexGrow: 1
}
},
pagination: {
flexShrink: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'end',
gap: '1em'
},
loading: {
transition: '200ms'
},
table: {
display: 'grid',
gridTemplateColumns: 'minmax(auto, 300px) 1fr',
gap: 8,
overflow: 'auto',
[breakpoints.down('sm')]: {
gridTemplateColumns: 'minmax(0, 1fr)'
}
},
body: {
overflow: 'auto',
display: 'grid',
gap: '1em',
gridTemplateColumns: 'minmax(0, 1fr)',
gridAutoRows: 'max-content',
'& > [role=row]': {
padding: '0.8em',
cursor: 'pointer',
color: palette.text.primary,
backgroundColor: palette.background.paper,
fontWeight: typography.fontWeightMedium,
fontSize: '1em',
borderRadius: 6,
export default makeStyles(
({ palette, typography, breakpoints, shadows }) => ({
root: {
height: '100%',
display: 'flex',
gap: 8,
'&:hover': {
backgroundColor: palette.action.hover
},
'&.selected': {
backgroundColor: addOpacityToColor(palette.secondary.main, 0.2),
border: `1px solid ${palette.secondary.main}`
flexDirection: 'column'
},
toolbar: {
...typography.body1,
marginBottom: 16,
display: 'flex',
gap: '1em',
alignItems: 'start',
justifyContent: 'space-between',
'& > div:first-child': {
flexGrow: 1
}
},
pagination: {
flexShrink: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'end',
gap: '1em'
},
loading: {
transition: '200ms'
},
table: {
display: 'grid',
gridTemplateColumns: 'minmax(auto, 300px) 1fr',
gap: 8,
overflow: 'auto',
[breakpoints.down('sm')]: {
gridTemplateColumns: 'minmax(0, 1fr)'
}
},
body: {
overflow: 'auto',
display: 'grid',
gap: '1em',
gridTemplateColumns: 'minmax(0, 1fr)',
gridAutoRows: 'max-content',
'& > [role=row]': {
padding: '0.8em',
cursor: 'pointer',
color: palette.text.primary,
backgroundColor: palette.background.paper,
fontWeight: typography.fontWeightMedium,
fontSize: '1em',
borderRadius: 6,
display: 'flex',
gap: 8,
boxShadow: shadows[1],
'&:hover': {
backgroundColor: palette.action.hover
},
'&.selected': {
backgroundColor: addOpacityToColor(palette.secondary.main, 0.2),
border: `2px solid ${palette.secondary.main}`
}
}
},
noDataMessage: {
...typography.h6,
color: palette.text.hint,
display: 'inline-flex',
alignItems: 'center',
gap: 6,
padding: '1em'
}
},
noDataMessage: {
...typography.h6,
color: palette.text.hint,
display: 'inline-flex',
alignItems: 'center',
gap: 6,
padding: '1em'
}
}))
}))

5
src/fireedge/src/client/components/Tables/Groups/index.js
View File

@ -13,11 +13,12 @@ const GroupsTable = () => {
const groups = useGroup()
const { getGroups } = useGroupApi()
const { status, fetchRequest, loading, reloading } = useFetch(getGroups)
const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getGroups)
const { INIT, PENDING } = STATUS
useEffect(() => { fetchRequest() }, [])
if (groups?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (groups?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

5
src/fireedge/src/client/components/Tables/Hosts/index.js
View File

@ -16,11 +16,12 @@ const HostsTable = () => {
const { getHosts } = useHostApi()
const { filterPool } = useAuth()
const { status, fetchRequest, loading, reloading } = useFetch(getHosts)
const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getHosts)
const { INIT, PENDING } = STATUS
useEffect(() => { fetchRequest() }, [filterPool])
if (hosts?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (hosts?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

5
src/fireedge/src/client/components/Tables/Images/index.js
View File

@ -16,11 +16,12 @@ const ImagesTable = () => {
const { getImages } = useImageApi()
const { filterPool } = useAuth()
const { status, fetchRequest, loading, reloading } = useFetch(getImages)
const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getImages)
const { INIT, PENDING } = STATUS
useEffect(() => { fetchRequest() }, [filterPool])
if (images?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (images?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

5
src/fireedge/src/client/components/Tables/MarketplaceApps/index.js
View File

@ -15,11 +15,12 @@ const MarketplaceAppsTable = () => {
const { getMarketplaceApps } = useMarketplaceAppApi()
const { filterPool } = useAuth()
const { status, fetchRequest, loading, reloading } = useFetch(getMarketplaceApps)
const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getMarketplaceApps)
const { INIT, PENDING } = STATUS
useEffect(() => { fetchRequest() }, [filterPool])
if (marketplaceApps?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (marketplaceApps?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

5
src/fireedge/src/client/components/Tables/Marketplaces/index.js
View File

@ -15,11 +15,12 @@ const MarketplacesTable = () => {
const { getMarketplaces } = useMarketplaceApi()
const { filterPool } = useAuth()
const { fetchRequest, loading, reloading } = useFetch(getMarketplaces)
const { fetchRequest, loading, reloading, STATUS } = useFetch(getMarketplaces)
const { INIT, PENDING } = STATUS
useEffect(() => { fetchRequest() }, [filterPool])
if (marketplaces?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (marketplaces?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

5
src/fireedge/src/client/components/Tables/Users/index.js
View File

@ -13,11 +13,12 @@ const UsersTable = () => {
const users = useUser()
const { getUsers } = useUserApi()
const { status, fetchRequest, loading, reloading } = useFetch(getUsers)
const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getUsers)
const { INIT, PENDING } = STATUS
useEffect(() => { fetchRequest() }, [])
if (users?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (users?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

5
src/fireedge/src/client/components/Tables/VmTemplates/index.js
View File

@ -14,11 +14,12 @@ const VmTemplatesTable = () => {
const vmTemplates = useVmTemplate()
const { getVmTemplates } = useVmTemplateApi()
const { status, fetchRequest, loading, reloading } = useFetch(getVmTemplates)
const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getVmTemplates)
const { INIT, PENDING } = STATUS
useEffect(() => { fetchRequest() }, [])
if (vmTemplates?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (vmTemplates?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

5
src/fireedge/src/client/components/Tables/Vms/index.js
View File

@ -19,7 +19,8 @@ const VmsTable = () => {
const { getVms } = useVmApi()
const { filterPool } = useAuth()
const { status, data, fetchRequest, loading, reloading, error } = useFetch(getVms)
const { status, data, fetchRequest, loading, reloading, error, STATUS } = useFetch(getVms)
const { INIT, PENDING } = STATUS
useEffect(() => {
const requests = {
@ -43,7 +44,7 @@ const VmsTable = () => {
requests[status]?.()
}, [filterPool, status, data])
if (vms?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
if (vms?.length === 0 && [INIT, PENDING].includes(status)) {
return <SkeletonTable />
}

2
src/fireedge/src/client/components/Tables/styles.js
View File

@ -1,7 +1,7 @@
import { makeStyles } from '@material-ui/core'
export const rowStyles = makeStyles(
({ palette, typography, breakpoints }) => ({
({ palette, typography, breakpoints, shadows }) => ({
main: {
flex: 'auto',
overflow: 'hidden'

9
src/fireedge/src/client/hooks/useFetch.js
View File

@ -69,9 +69,9 @@ const useFetch = (request, socket) => {
}, [])
const doFetch = useCallback(async (payload, reload = false) => {
!cancelRequest.current && dispatch({ type: ACTIONS.REQUEST, reload })
try {
dispatch({ type: ACTIONS.REQUEST, reload })
const response = await request(payload)
if (response === undefined) throw response
@ -85,7 +85,7 @@ const useFetch = (request, socket) => {
dispatch({ type: ACTIONS.FAILURE, payload: errorMessage })
}
}, [request])
}, [request, cancelRequest.current, dispatch])
const fetchRequest = useCallback((payload, options = {}) => {
const { reload = false, delay = 0 } = options
@ -99,6 +99,7 @@ const useFetch = (request, socket) => {
fakeDelay(delay).then(() => doFetch(payload, reload))
}, [request])
return { ...state, fetchRequest }
return { ...state, fetchRequest, STATUS, ACTIONS, INITIAL_STATE }
}
export default useFetch

24
src/fireedge/src/client/hooks/useFetchAll.js
View File

@ -24,11 +24,13 @@ const INITIAL_STATE = {
const fetchReducer = (state, action) => {
const { type, payload, reload = false } = action
const { data: currentData } = state
return {
[ACTIONS.REQUEST]: {
...INITIAL_STATE,
status: STATUS.PENDING,
data: currentData,
[reload ? 'reloading' : 'loading']: true
},
[ACTIONS.SUCCESS]: {
@ -39,6 +41,7 @@ const fetchReducer = (state, action) => {
[ACTIONS.FAILURE]: {
...INITIAL_STATE,
status: STATUS.ERROR,
data: currentData,
error: payload
}
}[type] ?? state
@ -48,17 +51,15 @@ const useFetchAll = () => {
const cancelRequest = useRef(false)
const [state, dispatch] = useReducer(fetchReducer, INITIAL_STATE)
useEffect(() => {
return () => {
cancelRequest.current = true
}
useEffect(() => () => {
cancelRequest.current = true
}, [])
const doFetches = useCallback(async (requests, reload = false) => {
dispatch({ type: ACTIONS.REQUEST, reload })
const doFetches = async (requests, reload = false) => {
try {
const response = Promise.all(requests)
dispatch({ type: ACTIONS.REQUEST, reload })
const response = await Promise.all(requests)
if (response === undefined) throw response
if (cancelRequest.current) return
@ -71,9 +72,9 @@ const useFetchAll = () => {
dispatch({ type: ACTIONS.FAILURE, payload: errorMessage })
}
}, [])
}
const fetchRequest = useCallback((requests, options = {}) => {
const fetchRequestAll = useCallback((requests, options = {}) => {
const { reload = false, delay = 0 } = options
if (!(Number.isInteger(delay) && delay >= 0)) {
@ -85,6 +86,7 @@ const useFetchAll = () => {
fakeDelay(delay).then(() => doFetches(requests, reload))
}, [])
return { ...state, fetchRequest }
return { ...state, fetchRequestAll, STATUS, ACTIONS, INITIAL_STATE }
}
export default useFetchAll