diff --git a/src/fireedge/src/client/components/MultipleTags/index.js b/src/fireedge/src/client/components/MultipleTags/index.js index 5c2731a046..fb09ea2319 100644 --- a/src/fireedge/src/client/components/MultipleTags/index.js +++ b/src/fireedge/src/client/components/MultipleTags/index.js @@ -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 ( { } 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 diff --git a/src/fireedge/src/client/components/Tables/BackupJobs/index.js b/src/fireedge/src/client/components/Tables/BackupJobs/index.js index c64d3fa84f..eeb72a5450 100644 --- a/src/fireedge/src/client/components/Tables/BackupJobs/index.js +++ b/src/fireedge/src/client/components/Tables/BackupJobs/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(BackupJobsRow) diff --git a/src/fireedge/src/client/components/Tables/Backups/index.js b/src/fireedge/src/client/components/Tables/Backups/index.js index 9b085a3b4a..373ff6b609 100644 --- a/src/fireedge/src/client/components/Tables/Backups/index.js +++ b/src/fireedge/src/client/components/Tables/Backups/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(BackupRow) diff --git a/src/fireedge/src/client/components/Tables/Datastores/index.js b/src/fireedge/src/client/components/Tables/Datastores/index.js index 9180108743..8ce4bde8c0 100644 --- a/src/fireedge/src/client/components/Tables/Datastores/index.js +++ b/src/fireedge/src/client/components/Tables/Datastores/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(DatastoreRow) diff --git a/src/fireedge/src/client/components/Tables/Enhanced/WrapperRow.js b/src/fireedge/src/client/components/Tables/Enhanced/WrapperRow.js index 3b4162b40a..43a6c6e1aa 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/WrapperRow.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/WrapperRow.js @@ -38,6 +38,7 @@ const RowStyle = memo( original, value, onClickLabel, + onDeleteLabel, globalErrors, headerList = [], className, @@ -52,7 +53,7 @@ const RowStyle = memo( case 'string': return {get(original, accessor)} case 'function': - return {accessor(original)} + return {accessor(original, value)} 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, diff --git a/src/fireedge/src/client/components/Tables/Enhanced/index.js b/src/fireedge/src/client/components/Tables/Enhanced/index.js index d8eb9edffc..344459f32a 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/index.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js @@ -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, diff --git a/src/fireedge/src/client/components/Tables/Hosts/index.js b/src/fireedge/src/client/components/Tables/Hosts/index.js index 9f36e44d7c..8e7bcaac6f 100644 --- a/src/fireedge/src/client/components/Tables/Hosts/index.js +++ b/src/fireedge/src/client/components/Tables/Hosts/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(HostRow) diff --git a/src/fireedge/src/client/components/Tables/Images/index.js b/src/fireedge/src/client/components/Tables/Images/index.js index f42cb0815d..3d03fa585e 100644 --- a/src/fireedge/src/client/components/Tables/Images/index.js +++ b/src/fireedge/src/client/components/Tables/Images/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(ImageRow) diff --git a/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js b/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js index aa3fcca496..2bce8ac2b5 100644 --- a/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js +++ b/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(MarketplaceAppRow) diff --git a/src/fireedge/src/client/components/Tables/SecurityGroups/index.js b/src/fireedge/src/client/components/Tables/SecurityGroups/index.js index 12f476dea3..9baf61ab24 100644 --- a/src/fireedge/src/client/components/Tables/SecurityGroups/index.js +++ b/src/fireedge/src/client/components/Tables/SecurityGroups/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(SecurityGroupsRow) diff --git a/src/fireedge/src/client/components/Tables/ServiceTemplates/index.js b/src/fireedge/src/client/components/Tables/ServiceTemplates/index.js index 2bd71526a3..534827535d 100644 --- a/src/fireedge/src/client/components/Tables/ServiceTemplates/index.js +++ b/src/fireedge/src/client/components/Tables/ServiceTemplates/index.js @@ -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 + }, + }, + { + 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 + }, + }, + ] + const { component, header } = WrapperRow(ServiceTemplateRow) + return ( { refetch={refetch} isLoading={isFetching} getRowId={(row) => String(row.ID)} - RowComponent={ServiceTemplateRow} noDataMessage={ error?.status === 500 && ( @@ -70,6 +118,8 @@ const ServiceTemplatesTable = (props) => { ) } + RowComponent={component} + headerList={header && listHeader} {...rest} /> ) diff --git a/src/fireedge/src/client/components/Tables/Services/index.js b/src/fireedge/src/client/components/Tables/Services/index.js index 2cbe8e49e9..aba408ce48 100644 --- a/src/fireedge/src/client/components/Tables/Services/index.js +++ b/src/fireedge/src/client/components/Tables/Services/index.js @@ -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 + }, + }, + { 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 + }, + }, + ] + const { component, header } = WrapperRow(ServiceRow) + return ( { refetch={refetch} isLoading={isFetching} getRowId={(row) => String(row.ID)} - RowComponent={ServiceRow} noDataMessage={ error?.status === 500 && ( @@ -65,6 +96,8 @@ const ServicesTable = (props) => { ) } + RowComponent={component} + headerList={header && listHeader} {...rest} /> ) diff --git a/src/fireedge/src/client/components/Tables/VNetworks/index.js b/src/fireedge/src/client/components/Tables/VNetworks/index.js index 8ce4436652..b881d90667 100644 --- a/src/fireedge/src/client/components/Tables/VNetworks/index.js +++ b/src/fireedge/src/client/components/Tables/VNetworks/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(VNetworkRow) diff --git a/src/fireedge/src/client/components/Tables/VirtualDataCenters/index.js b/src/fireedge/src/client/components/Tables/VirtualDataCenters/index.js index e3aea79be1..a22d760c4d 100644 --- a/src/fireedge/src/client/components/Tables/VirtualDataCenters/index.js +++ b/src/fireedge/src/client/components/Tables/VirtualDataCenters/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(VDCRow) diff --git a/src/fireedge/src/client/components/Tables/VmTemplates/index.js b/src/fireedge/src/client/components/Tables/VmTemplates/index.js index c7391d27f5..d8683842fd 100644 --- a/src/fireedge/src/client/components/Tables/VmTemplates/index.js +++ b/src/fireedge/src/client/components/Tables/VmTemplates/index.js @@ -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 + }, + }, ] const { component, header } = WrapperRow(VmTemplateRow) diff --git a/src/fireedge/src/client/components/Tables/Vms/index.js b/src/fireedge/src/client/components/Tables/Vms/index.js index efa6140b2c..0a9fc0aa14 100644 --- a/src/fireedge/src/client/components/Tables/Vms/index.js +++ b/src/fireedge/src/client/components/Tables/Vms/index.js @@ -15,7 +15,11 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useMemo } from 'react' +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' @@ -29,9 +33,7 @@ import { VM_EXTENDED_POOL, VM_STATES, } from 'client/constants' -import { useViews } from 'client/features/Auth' -import { useGeneral } from 'client/features/General' -import { useGetVmsQuery } from 'client/features/OneApi/vm' +import { getColorFromString, getUniqueLabels } from 'client/models/Helper' import { getIps, getLastHistory, getState } from 'client/models/VirtualMachine' const DEFAULT_DATA_CY = 'vms' @@ -185,8 +187,33 @@ 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 + }, + }, + ] const { component, header } = WrapperRow(VmRow) return (