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

F #5422: Add better UX (#2018)

Browse Source 
Co-authored-by: Tino Vázquez <cvazquez@opennebula.io>
This commit is contained in:
Sergio Betanzos 2022-05-11 13:15:03 +02:00 committed by GitHub
parent aea52d52eb
commit 9ab5aa7869
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 77 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,7 @@ export const rowStyles = makeStyles(
color: palette.text.secondary,
marginTop: 4,
display: 'flex',
gap: '0.5em',
gap: '1em',
alignItems: 'center',
flexWrap: 'wrap',
wordWrap: 'break-word',

8
src/fireedge/src/client/components/Tabs/Vm/Info/information.js
View File

@ -16,11 +16,12 @@
import { ReactElement } from 'react'
import PropTypes from 'prop-types'
import { generatePath } from 'react-router-dom'
import { Stack } from '@mui/material'
import { useGetClusterQuery } from 'client/features/OneApi/cluster'
import { useRenameVmMutation } from 'client/features/OneApi/vm'
import { StatusChip } from 'client/components/Status'
import { StatusCircle, StatusChip } from 'client/components/Status'
import { List } from 'client/components/Tabs/Common'
import { Translate } from 'client/components/HOC'
import MultipleTags from 'client/components/MultipleTags'
@ -86,7 +87,10 @@ const InformationPanel = ({ vm = {}, actions }) => {
{
name: T.State,
value: (
<StatusChip dataCy="state" text={stateName} stateColor={stateColor} />
<Stack direction="row" alignItems="center" gap={1}>
<StatusCircle color={stateColor} tooltip={stateName} />
<StatusChip dataCy="state" text={stateName} stateColor={stateColor} />
</Stack>
),
},
{

60
src/fireedge/src/client/containers/VirtualMachines/index.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useState } from 'react'
import { Stack, Chip } from '@mui/material'
import { Container, Typography, Stack, Chip } from '@mui/material'
import { VmsTable } from 'client/components/Tables'
import VmActions from 'client/components/Tables/Vms/actions'
@ -34,30 +34,40 @@ function VirtualMachines() {
globalActions={actions}
/>
{selectedRows?.length > 0 && (
<Stack overflow="auto" data-cy={'detail'}>
{selectedRows?.length === 1 ? (
<VmTabs id={selectedRows[0]?.original.ID} />
) : (
<Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
<MultipleTags
limitTags={10}
tags={selectedRows?.map(
({ original, id, toggleRowSelected }) => (
<Chip
key={id}
variant="outlined"
label={original?.NAME ?? id}
onDelete={() => toggleRowSelected(false)}
/>
)
)}
/>
</Stack>
)}
</Stack>
)}
</SplitPane>
{selectedRows?.length > 0 && (
<Stack overflow="auto" data-cy={'detail'}>
{selectedRows?.length === 1 ? (
<>
<Typography color="text.primary" noWrap mb={1}>
{`#${selectedRows[0]?.original.ID} | ${selectedRows[0]?.original.NAME}`}
</Typography>
<VmTabs id={selectedRows[0]?.original.ID} />
</>
) : (
<Stack
direction="row"
flexWrap="wrap"
gap={1}
alignItems="center"
>
<MultipleTags
limitTags={10}
tags={selectedRows?.map(
({ original, id, toggleRowSelected }) => (
<Chip
key={id}
variant="outlined"
label={original?.NAME ?? id}
onDelete={() => toggleRowSelected(false)}
/>
)
)}
/>
</Stack>
)}
</Stack>
)}
</SplitPane>
)
}

60
src/fireedge/src/client/containers/VmTemplates/index.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useState } from 'react'
import { Stack, Chip } from '@mui/material'
import { Container, Typography, Stack, Chip } from '@mui/material'
import { VmTemplatesTable } from 'client/components/Tables'
import VmTemplateActions from 'client/components/Tables/VmTemplates/actions'
@ -34,30 +34,40 @@ function VmTemplates() {
globalActions={actions}
/>
{selectedRows?.length > 0 && (
<Stack overflow="auto">
{selectedRows?.length === 1 ? (
<VmTemplateTabs id={selectedRows[0]?.original.ID} />
) : (
<Stack direction="row" flexWrap="wrap" gap={1} alignItems="center">
<MultipleTags
limitTags={10}
tags={selectedRows?.map(
({ original, id, toggleRowSelected }) => (
<Chip
key={id}
variant="text"
label={original?.NAME ?? id}
onDelete={() => toggleRowSelected(false)}
/>
)
)}
/>
</Stack>
)}
</Stack>
)}
</SplitPane>
{selectedRows?.length > 0 && (
<Stack overflow="auto">
{selectedRows?.length === 1 ? (
<>
<Typography color="text.primary" noWrap mb={1}>
{`#${selectedRows[0]?.original.ID} | ${selectedRows[0]?.original.NAME}`}
</Typography>
<VmTemplateTabs id={selectedRows[0]?.original.ID} />
</>
) : (
<Stack
direction="row"
flexWrap="wrap"
gap={1}
alignItems="center"
>
<MultipleTags
limitTags={10}
tags={selectedRows?.map(
({ original, id, toggleRowSelected }) => (
<Chip
key={id}
variant="text"
label={original?.NAME ?? id}
onDelete={() => toggleRowSelected(false)}
/>
)
)}
/>
</Stack>
)}
</Stack>
)}
</SplitPane>
)
}