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

F OpenNebula/one#6718: add labels in rows (#3238)

Browse Source
This commit is contained in:
Jorge Miguel Lobo Escalona 2024-09-23 19:00:43 +02:00 committed by GitHub
parent 9d7b9b107e
commit 4d5fbea058
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 450 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/fireedge/src/client/components/MultipleTags/index.js
View File

@ -14,12 +14,26 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { Stack, Tooltip, Typography, styled } from '@mui/material'
import PropTypes from 'prop-types'
import { ReactElement, isValidElement, useMemo } from 'react'
import { Translate } from 'client/components/HOC'
import { StatusChip } from 'client/components/Status'
import { T } from 'client/constants'
import PropTypes from 'prop-types'
import { ReactElement, isValidElement, useMemo } from 'react'
/**
* Truncate string.
*
* @param {string} label - string.
* @param {number} [maxLength] - max lenght.
* @returns {string} - string truncated
*/
const truncateLabel = (label, maxLength) => {
if (label.length > maxLength) {
return `${label.substring(0, maxLength)}...`
}
return label
}
const StyledText = styled(Typography)(({ theme }) => ({
'&': {
@ -40,9 +54,15 @@ const StyledText = styled(Typography)(({ theme }) => ({
* @param {string[]|TagType} props.tags - Tags to display
* @param {number} [props.limitTags] - Limit the number of tags to display
* @param {boolean} [props.clipboard] - If true, the chip will be clickable
* @param {false|number} [props.truncateText] - number by truncate the string
* @returns {ReactElement} - Tag list
*/
const MultipleTags = ({ tags, limitTags = 1, clipboard = false }) => {
const MultipleTags = ({
tags,
limitTags = 1,
clipboard = false,
truncateText = false,
}) => {
if (tags?.length === 0) {
return null
}
@ -53,6 +73,7 @@ const MultipleTags = ({ tags, limitTags = 1, clipboard = false }) => {
if (isValidElement(tag)) return tag
const text = tag.text ?? tag
truncateText && (tag.text = truncateLabel(text, truncateText))
return (
<StatusChip
@ -92,9 +113,11 @@ const MultipleTags = ({ tags, limitTags = 1, clipboard = false }) => {
}
MultipleTags.propTypes = {
tags: PropTypes.array,
clipboard: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
tags: PropTypes.any,
limitTags: PropTypes.number,
clipboard: PropTypes.bool,
truncateText: PropTypes.bool,
}
MultipleTags.displayName = 'MultipleTags'
export default MultipleTags

33
src/fireedge/src/client/components/Tables/BackupJobs/index.js
View File

@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import MultipleTags from 'client/components/MultipleTags'
import { StatusCircle } from 'client/components/Status'
import BackupJobsColumns from 'client/components/Tables/BackupJobs/columns'
import BackupJobsRow from 'client/components/Tables/BackupJobs/row'
@ -21,9 +22,13 @@ import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import Timer from 'client/components/Timer'
import { RESOURCE_NAMES, T } from 'client/constants'
import COLOR from 'client/constants/color'
import { useViews } from 'client/features/Auth'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetBackupJobsQuery } from 'client/features/OneApi/backupjobs'
import { timeFromMilliseconds } from 'client/models/Helper'
import {
getColorFromString,
getUniqueLabels,
timeFromMilliseconds,
} from 'client/models/Helper'
import { ReactElement, useMemo } from 'react'
const DEFAULT_DATA_CY = 'backupjobs'
@ -126,6 +131,30 @@ const BackupJobsTable = (props) => {
}
},
},
{
header: T.Labels,
id: 'labels',
accessor: ({ TEMPLATE: { LABELS } = {} }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(BackupJobsRow)

33
src/fireedge/src/client/components/Tables/Backups/index.js
View File

@ -13,17 +13,18 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import MultipleTags from 'client/components/MultipleTags'
import { StatusCircle } from 'client/components/Status'
import { useViews } from 'client/features/Auth'
import { useGetBackupsQuery } from 'client/features/OneApi/image'
import { ReactElement, useMemo } from 'react'
import backupColumns from 'client/components/Tables/Backups/columns'
import BackupRow from 'client/components/Tables/Backups/row'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import { RESOURCE_NAMES, T } from 'client/constants'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetBackupsQuery } from 'client/features/OneApi/image'
import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
import { getState, getType } from 'client/models/Image'
import { ReactElement, useMemo } from 'react'
const DEFAULT_DATA_CY = 'backups'
@ -105,6 +106,30 @@ const BackupsTable = (props) => {
{ header: T.Group, id: 'group', accessor: 'GNAME' },
{ header: T.Datastore, id: 'datastore', accessor: 'DATASTORE' },
{ header: T.Type, id: 'type', accessor: (template) => getType(template) },
{
header: T.Labels,
id: 'labels',
accessor: (_, { label: LABELS = [] }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(BackupRow)

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

@ -13,11 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
import { useViews } from 'client/features/Auth'
import { useGetDatastoresQuery } from 'client/features/OneApi/datastore'
import MultipleTags from 'client/components/MultipleTags'
import { LinearProgressWithLabel, StatusCircle } from 'client/components/Status'
import DatastoreColumns from 'client/components/Tables/Datastores/columns'
import DatastoreRow from 'client/components/Tables/Datastores/row'
@ -28,7 +24,11 @@ import {
} from 'client/components/Tables/Enhanced/Utils/DataTableUtils'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import { DS_THRESHOLD, RESOURCE_NAMES, T } from 'client/constants'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetDatastoresQuery } from 'client/features/OneApi/datastore'
import { getCapacityInfo, getState, getType } from 'client/models/Datastore'
import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
import { useFormContext } from 'react-hook-form'
const DEFAULT_DATA_CY = 'datastores'
@ -187,6 +187,30 @@ const DatastoresTable = (props) => {
id: 'type',
accessor: (template) => getType(template),
},
{
header: T.Labels,
id: 'labels',
accessor: ({ TEMPLATE: { LABELS } = {} }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(DatastoreRow)

4
src/fireedge/src/client/components/Tables/Enhanced/WrapperRow.js
View File

@ -38,6 +38,7 @@ const RowStyle = memo(
original,
value,
onClickLabel,
onDeleteLabel,
globalErrors,
headerList = [],
className,
@ -52,7 +53,7 @@ const RowStyle = memo(
case 'string':
return <TableCell key={id}>{get(original, accessor)}</TableCell>
case 'function':
return <TableCell key={id}>{accessor(original)}</TableCell>
return <TableCell key={id}>{accessor(original, value)}</TableCell>
default:
return ''
}
@ -67,6 +68,7 @@ RowStyle.propTypes = {
original: PropTypes.object,
value: PropTypes.object,
onClickLabel: PropTypes.func,
onDeleteLabel: PropTypes.func,
globalErrors: PropTypes.array,
headerList: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
className: PropTypes.string,

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

@ -157,7 +157,7 @@ DataListPerPage.propTypes = {
messageValues: PropTypes.array,
setFilter: PropTypes.func,
state: PropTypes.any,
disableRowSelect: PropTypes.func,
disableRowSelect: PropTypes.bool,
onRowClick: PropTypes.func,
readOnly: PropTypes.bool,
singleSelect: PropTypes.bool,

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

@ -16,6 +16,7 @@
import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
import { Tr } from 'client/components/HOC'
import MultipleTags from 'client/components/MultipleTags'
import { LinearProgressWithLabel, StatusCircle } from 'client/components/Status'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import {
@ -26,8 +27,9 @@ import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import HostColumns from 'client/components/Tables/Hosts/columns'
import HostRow from 'client/components/Tables/Hosts/row'
import { HOST_THRESHOLD, RESOURCE_NAMES, T } from 'client/constants'
import { useViews } from 'client/features/Auth'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetHostsQuery } from 'client/features/OneApi/host'
import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
import { getAllocatedInfo, getState } from 'client/models/Host'
import { useFormContext } from 'react-hook-form'
@ -195,6 +197,31 @@ const HostsTable = (props) => {
)
},
},
{
header: T.Labels,
id: 'labels',
accessor: ({ TEMPLATE: { LABELS } = {} }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(HostRow)

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

@ -13,17 +13,18 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { ReactElement, useMemo } from 'react'
import MultipleTags from 'client/components/MultipleTags'
import { StatusCircle } from 'client/components/Status'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import ImageColumns from 'client/components/Tables/Images/columns'
import ImageRow from 'client/components/Tables/Images/row'
import { RESOURCE_NAMES, T } from 'client/constants'
import { useViews } from 'client/features/Auth'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetImagesQuery } from 'client/features/OneApi/image'
import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
import { getState, getType } from 'client/models/Image'
import { ReactElement, useMemo } from 'react'
const DEFAULT_DATA_CY = 'images'
@ -65,6 +66,30 @@ const ImagesTable = (props) => {
{ header: T.Datastore, id: 'datastore', accessor: 'DATASTORE' },
{ header: T.Type, id: 'type', accessor: (template) => getType(template) },
{ header: T.VMs, id: 'vms', accessor: 'RUNNING_VMS' },
{
header: T.Labels,
id: 'labels',
accessor: (_, onClickLabel, onDeleteLabel, { label: LABELS = [] }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS, onDeleteLabel, onClickLabel]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(ImageRow)

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

@ -13,14 +13,16 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import MultipleTags from 'client/components/MultipleTags'
import { StatusCircle } from 'client/components/Status'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import MarketplaceAppColumns from 'client/components/Tables/MarketplaceApps/columns'
import MarketplaceAppRow from 'client/components/Tables/MarketplaceApps/row'
import { RESOURCE_NAMES, T } from 'client/constants'
import { useViews } from 'client/features/Auth'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetMarketplaceAppsQuery } from 'client/features/OneApi/marketplaceApp'
import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
import { getState, getType } from 'client/models/MarketplaceApp'
import { prettyBytes } from 'client/utils'
import { ReactElement, useMemo } from 'react'
@ -89,6 +91,30 @@ const MarketplaceAppsTable = (props) => {
accessor: 'MARKETPLACE',
},
{ header: T.Zone, id: 'zone', accessor: 'ZONE_ID' },
{
header: T.Labels,
id: 'labels',
accessor: ({ TEMPLATE: { LABELS } = {} }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(MarketplaceAppRow)

32
src/fireedge/src/client/components/Tables/SecurityGroups/index.js
View File

@ -13,15 +13,16 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { ReactElement, useMemo } from 'react'
import MultipleTags from 'client/components/MultipleTags'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import SecurityGroupColumns from 'client/components/Tables/SecurityGroups/columns'
import SecurityGroupsRow from 'client/components/Tables/SecurityGroups/row'
import { RESOURCE_NAMES, T } from 'client/constants'
import { useViews } from 'client/features/Auth'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetSecGroupsQuery } from 'client/features/OneApi/securityGroup'
import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
import { ReactElement, useMemo } from 'react'
const DEFAULT_DATA_CY = 'secgroup'
@ -56,6 +57,31 @@ const SecurityGroupsTable = (props) => {
{ header: T.Name, id: 'name', accessor: 'NAME' },
{ header: T.Owner, id: 'owner', accessor: 'UNAME' },
{ header: T.Group, id: 'group', accessor: 'GNAME' },
{
header: T.Labels,
id: 'labels',
accessor: ({ TEMPLATE: { LABELS } = {} }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(SecurityGroupsRow)

66
src/fireedge/src/client/components/Tables/ServiceTemplates/index.js
View File

@ -13,17 +13,23 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { useMemo, ReactElement } from 'react'
import { Alert } from '@mui/material'
import { useViews } from 'client/features/Auth'
import { useGetServiceTemplatesQuery } from 'client/features/OneApi/serviceTemplate'
import { Translate } from 'client/components/HOC'
import MultipleTags from 'client/components/MultipleTags'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import ServiceTemplateColumns from 'client/components/Tables/ServiceTemplates/columns'
import ServiceTemplateRow from 'client/components/Tables/ServiceTemplates/row'
import { Translate } from 'client/components/HOC'
import { T, RESOURCE_NAMES } from 'client/constants'
import Timer from 'client/components/Timer'
import { RESOURCE_NAMES, T } from 'client/constants'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetServiceTemplatesQuery } from 'client/features/OneApi/serviceTemplate'
import {
getColorFromString,
getUniqueLabels,
timeFromMilliseconds,
} from 'client/models/Helper'
import { ReactElement, useMemo } from 'react'
const DEFAULT_DATA_CY = 'service-templates'
@ -53,6 +59,49 @@ const ServiceTemplatesTable = (props) => {
[view]
)
const listHeader = [
{ header: T.ID, id: 'id', accessor: 'ID' },
{ header: T.Owner, id: 'owner', accessor: 'UNAME' },
{ header: T.Group, id: 'group', accessor: 'GNAME' },
{ header: T.Name, id: 'name', accessor: 'NAME' },
{
header: T.StartTime,
id: 'start-time',
accessor: ({
TEMPLATE: { BODY: { registration_time: regTime } = {} },
}) => {
const time = useMemo(() => timeFromMilliseconds(+regTime), [regTime])
return <Timer translateWord={T.RegisteredAt} initial={time} />
},
},
{
header: T.Labels,
id: 'labels',
accessor: ({ TEMPLATE: { BODY: { labels: LABELS = {} } = {} } }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(ServiceTemplateRow)
return (
<EnhancedTable
columns={columns}
@ -62,7 +111,6 @@ const ServiceTemplatesTable = (props) => {
refetch={refetch}
isLoading={isFetching}
getRowId={(row) => String(row.ID)}
RowComponent={ServiceTemplateRow}
noDataMessage={
error?.status === 500 && (
<Alert severity="error" variant="outlined">
@ -70,6 +118,8 @@ const ServiceTemplatesTable = (props) => {
</Alert>
)
}
RowComponent={component}
headerList={header && listHeader}
{...rest}
/>
)

49
src/fireedge/src/client/components/Tables/Services/index.js
View File

@ -13,17 +13,20 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { useMemo, ReactElement } from 'react'
import { Alert } from '@mui/material'
import { useViews } from 'client/features/Auth'
import { useGetServicesQuery } from 'client/features/OneApi/service'
import { Translate } from 'client/components/HOC'
import { StatusCircle } from 'client/components/Status'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import ServiceColumns from 'client/components/Tables/Services/columns'
import ServiceRow from 'client/components/Tables/Services/row'
import { Translate } from 'client/components/HOC'
import { T, RESOURCE_NAMES } from 'client/constants'
import Timer from 'client/components/Timer'
import { RESOURCE_NAMES, T } from 'client/constants'
import { useViews } from 'client/features/Auth'
import { useGetServicesQuery } from 'client/features/OneApi/service'
import { timeFromMilliseconds } from 'client/models/Helper'
import { getState } from 'client/models/Service'
import { ReactElement, useMemo } from 'react'
const DEFAULT_DATA_CY = 'services'
@ -48,6 +51,35 @@ const ServicesTable = (props) => {
[view]
)
const listHeader = [
{
header: '',
id: 'status-icon',
accessor: (service) => {
const { color: stateColor, name: stateName } = getState(service)
return <StatusCircle color={stateColor} tooltip={stateName} />
},
},
{ header: T.ID, id: 'id', accessor: 'ID' },
{ header: T.Owner, id: 'owner', accessor: 'UNAME' },
{ header: T.Group, id: 'group', accessor: 'GNAME' },
{ header: T.Name, id: 'name', accessor: 'NAME' },
{
header: T.StartTime,
id: 'start-time',
accessor: ({ TEMPLATE: { BODY: { start_time: startTime } = {} } }) => {
const time = useMemo(
() => timeFromMilliseconds(+startTime),
[startTime]
)
return <Timer translateWord={T.RegisteredAt} initial={time} />
},
},
]
const { component, header } = WrapperRow(ServiceRow)
return (
<EnhancedTable
columns={columns}
@ -57,7 +89,6 @@ const ServicesTable = (props) => {
refetch={refetch}
isLoading={isFetching}
getRowId={(row) => String(row.ID)}
RowComponent={ServiceRow}
noDataMessage={
error?.status === 500 && (
<Alert severity="error" variant="outlined">
@ -65,6 +96,8 @@ const ServicesTable = (props) => {
</Alert>
)
}
RowComponent={component}
headerList={header && listHeader}
{...rest}
/>
)

29
src/fireedge/src/client/components/Tables/VNetworks/index.js
View File

@ -14,6 +14,7 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { Tr } from 'client/components/HOC'
import MultipleTags from 'client/components/MultipleTags'
import { LinearProgressWithLabel, StatusCircle } from 'client/components/Status'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import {
@ -24,8 +25,9 @@ import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import VNetworkColumns from 'client/components/Tables/VNetworks/columns'
import VNetworkRow from 'client/components/Tables/VNetworks/row'
import { RESOURCE_NAMES, T, VNET_THRESHOLD } from 'client/constants'
import { useViews } from 'client/features/Auth'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetVNetworksQuery } from 'client/features/OneApi/network'
import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
import { getLeasesInfo, getState } from 'client/models/VirtualNetwork'
import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
import { useFormContext } from 'react-hook-form'
@ -183,6 +185,31 @@ const VNetworksTable = (props) => {
)
},
},
{
header: T.Labels,
id: 'labels',
accessor: ({ TEMPLATE: { LABELS } = {} }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(VNetworkRow)

31
src/fireedge/src/client/components/Tables/VirtualDataCenters/index.js
View File

@ -13,15 +13,16 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { ReactElement, useMemo } from 'react'
import MultipleTags from 'client/components/MultipleTags'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import VDCColumns from 'client/components/Tables/VirtualDataCenters/columns'
import VDCRow from 'client/components/Tables/VirtualDataCenters/row'
import { ALL_SELECTED, RESOURCE_NAMES, T } from 'client/constants'
import { useViews } from 'client/features/Auth'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetVDCsQuery } from 'client/features/OneApi/vdc'
import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
import { ReactElement, useMemo } from 'react'
const DEFAULT_DATA_CY = 'vdcs'
@ -115,6 +116,30 @@ const VDCsTable = (props) => {
return isAllSelected(datastoresArray) ? T.All : datastoresArray.length
}, [DATASTORES.DATASTORE]),
},
{
header: T.Labels,
id: 'labels',
accessor: ({ TEMPLATE: { LABELS } }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(VDCRow)

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

@ -13,16 +13,20 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { ReactElement, useEffect, useMemo } from 'react'
import MultipleTags from 'client/components/MultipleTags'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
import VmTemplateColumns from 'client/components/Tables/VmTemplates/columns'
import VmTemplateRow from 'client/components/Tables/VmTemplates/row'
import { RESOURCE_NAMES, T } from 'client/constants'
import { useViews } from 'client/features/Auth'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetTemplatesQuery } from 'client/features/OneApi/vmTemplate'
import { timeToString } from 'client/models/Helper'
import {
getColorFromString,
getUniqueLabels,
timeToString,
} from 'client/models/Helper'
import { ReactElement, useEffect, useMemo } from 'react'
const DEFAULT_DATA_CY = 'vm-templates'
@ -58,6 +62,31 @@ const VmTemplatesTable = (props) => {
id: 'registration-time',
accessor: (vm) => timeToString(vm.REGTIME),
},
{
header: T.Labels,
id: 'labels',
accessor: ({ TEMPLATE: { LABELS } = {} }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(VmTemplateRow)

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

@ -15,10 +15,11 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useMemo } from 'react'
import { useViews } from 'client/features/Auth'
import { useAuth, useViews } from 'client/features/Auth'
import { useGetVmsQuery } from 'client/features/OneApi/vm'
import { ConsoleButton } from 'client/components/Buttons'
import MultipleTags from 'client/components/MultipleTags'
import { StatusCircle } from 'client/components/Status'
import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced'
import WrapperRow from 'client/components/Tables/Enhanced/WrapperRow'
@ -32,6 +33,7 @@ import {
VM_EXTENDED_POOL,
VM_STATES,
} from 'client/constants'
import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
import { getIps, getLastHistory, getState } from 'client/models/VirtualMachine'
const DEFAULT_DATA_CY = 'vms'
@ -182,6 +184,31 @@ const VmsTable = (props) => {
</>
),
},
{
header: T.Labels,
id: 'labels',
accessor: ({ USER_TEMPLATE: { LABELS } = {} }) => {
const { labels: userLabels } = useAuth()
const labels = useMemo(
() =>
getUniqueLabels(LABELS).reduce((acc, label) => {
if (userLabels?.includes(label)) {
acc.push({
text: label,
dataCy: `label-${label}`,
stateColor: getColorFromString(label),
})
}
return acc
}, []),
[LABELS]
)
return <MultipleTags tags={labels} truncateText={10} />
},
},
]
const { component, header } = WrapperRow(VmRow)