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

M #~: Minor fixes on the container pages (#2126)

Browse Source
This commit is contained in:
Sergio Betanzos 2022-06-02 18:24:26 +02:00 committed by GitHub
parent 0fb903aafb
commit 275c6adf88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,8 +15,8 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
import { Pin as GotoIcon, RefreshDouble } from 'iconoir-react'
import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Pin as GotoIcon, RefreshDouble, Cancel } from 'iconoir-react'
import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
import { useLazyGetVmQuery } from 'client/features/OneApi/vm'
@ -59,6 +59,7 @@ function VirtualMachines() {
<InfoTabs
vm={selectedRows[0]?.original}
gotoPage={selectedRows[0]?.gotoPage}
unselect={() => selectedRows[0]?.toggleRowSelected(false)}
/>
)}
</>
@ -74,9 +75,10 @@ function VirtualMachines() {
*
* @param {VM} vm - VM to display
* @param {Function} [gotoPage] - Function to navigate to a page of a VM
* @param {Function} [unselect] - Function to unselect a VM
* @returns {ReactElement} VM details
*/
const InfoTabs = memo(({ vm, gotoPage }) => {
const InfoTabs = memo(({ vm, gotoPage, unselect }) => {
const [getVm, { isFetching }] = useLazyGetVmQuery()
return (
@ -87,25 +89,37 @@ const InfoTabs = memo(({ vm, gotoPage }) => {
icon={<RefreshDouble />}
tooltip={Tr(T.Refresh)}
isSubmitting={isFetching}
onClick={() => getVm({ id: vm.ID })}
onClick={() => getVm({ id: vm?.ID })}
/>
{gotoPage && (
<IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
<GotoIcon />
</IconButton>
{typeof gotoPage === 'function' && (
<SubmitButton
data-cy="locate-on-table"
icon={<GotoIcon />}
tooltip={Tr(T.LocateOnTable)}
onClick={() => gotoPage()}
/>
)}
{typeof unselect === 'function' && (
<SubmitButton
data-cy="unselect"
icon={<Cancel />}
tooltip={Tr(T.Close)}
onClick={() => unselect()}
/>
)}
<Typography color="text.primary" noWrap>
{`#${vm.ID} | ${vm.NAME}`}
{`#${vm?.ID} | ${vm?.NAME}`}
</Typography>
</Stack>
<VmTabs id={vm.ID} />
<VmTabs id={vm?.ID} />
</Stack>
)
})
InfoTabs.propTypes = {
vm: PropTypes.object.isRequired,
vm: PropTypes.object,
gotoPage: PropTypes.func,
unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'

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

@ -15,18 +15,19 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
import { BookmarkEmpty } from 'iconoir-react'
import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Pin as GotoIcon, RefreshDouble, Cancel } from 'iconoir-react'
import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
import vmTemplateApi from 'client/features/OneApi/vmTemplate'
import { useLazyGetTemplateQuery } from 'client/features/OneApi/vmTemplate'
import { VmTemplatesTable } from 'client/components/Tables'
import VmTemplateActions from 'client/components/Tables/VmTemplates/actions'
import VmTemplateTabs from 'client/components/Tabs/VmTemplate'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
import { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'
import { T, VmTemplate } from 'client/constants'
/**
* Displays a list of VM Templates with a split pane between the list and selected row(s).
@ -56,8 +57,9 @@ function VmTemplates() {
<GroupedTags tags={selectedRows} />
) : (
<InfoTabs
id={selectedRows[0]?.original?.ID}
template={selectedRows[0]?.original}
gotoPage={selectedRows[0]?.gotoPage}
unselect={() => selectedRows[0]?.toggleRowSelected(false)}
/>
)}
</>
@ -71,39 +73,53 @@ function VmTemplates() {
/**
* Displays details of a VM Template.
*
* @param {string} id - VM Template id to display
* @param {VmTemplate} template - VM Template id to display
* @param {Function} [gotoPage] - Function to navigate to a page of a VM Template
* @param {Function} [unselect] - Function to unselect a VM Template
* @returns {ReactElement} VM Template details
*/
const InfoTabs = memo(({ id, gotoPage }) => {
const vmTemplate = vmTemplateApi.endpoints.getTemplates.useQueryState(
undefined,
{
selectFromResult: ({ data = [] }) =>
data.find((item) => +item.ID === +id),
}
)
const InfoTabs = memo(({ template, gotoPage, unselect }) => {
const [getTemplate, { isFetching }] = useLazyGetTemplateQuery()
return (
<Stack overflow="auto">
<Stack direction="row" alignItems="center" gap={1} mb={1}>
<Typography color="text.primary" noWrap>
{`#${id} | ${vmTemplate.NAME}`}
</Typography>
{gotoPage && (
<IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
<BookmarkEmpty />
</IconButton>
<SubmitButton
data-cy="detail-refresh"
icon={<RefreshDouble />}
tooltip={Tr(T.Refresh)}
isSubmitting={isFetching}
onClick={() => getTemplate({ id: template?.ID })}
/>
{typeof gotoPage === 'function' && (
<SubmitButton
data-cy="locate-on-table"
icon={<GotoIcon />}
tooltip={Tr(T.LocateOnTable)}
onClick={() => gotoPage()}
/>
)}
{typeof unselect === 'function' && (
<SubmitButton
data-cy="unselect"
icon={<Cancel />}
tooltip={Tr(T.Close)}
onClick={() => unselect()}
/>
)}
<Typography color="text.primary" noWrap>
{`#${template?.ID} | ${template?.NAME}`}
</Typography>
</Stack>
<VmTemplateTabs id={id} />
<VmTemplateTabs id={template?.ID} />
</Stack>
)
})
InfoTabs.propTypes = {
id: PropTypes.string.isRequired,
template: PropTypes.object,
gotoPage: PropTypes.func,
unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'