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

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 (
           <StatusChip
@@ -92,9 +113,11 @@ const MultipleTags = ({ tags, limitTags = 1, clipboard = false }) => {
 }
 
 MultipleTags.propTypes = {
-  tags: PropTypes.array,
+  tags: PropTypes.any,
-  clipboard: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   limitTags: PropTypes.number,
+  clipboard: PropTypes.bool,
+  truncateText: PropTypes.bool,
 }
+MultipleTags.displayName = 'MultipleTags'
 
 export default MultipleTags

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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
 
   const { component, header } = WrapperRow(BackupJobsRow)

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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
 
   const { component, header } = WrapperRow(BackupRow)

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 MultipleTags from 'client/components/MultipleTags'
-
-import { useViews } from 'client/features/Auth'
-import { useGetDatastoresQuery } from 'client/features/OneApi/datastore'
-
 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)
 

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 <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,

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,

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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
   const { component, header } = WrapperRow(HostRow)
 

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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
 
   const { component, header } = WrapperRow(ImageRow)

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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
 
   const { component, header } = WrapperRow(MarketplaceAppRow)

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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
 
   const { component, header } = WrapperRow(SecurityGroupsRow)

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 { Translate } from 'client/components/HOC'
-import { useViews } from 'client/features/Auth'
+import MultipleTags from 'client/components/MultipleTags'
-import { useGetServiceTemplatesQuery } from 'client/features/OneApi/serviceTemplate'
-
 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 Timer from 'client/components/Timer'
-import { T, RESOURCE_NAMES } from 'client/constants'
+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}
     />
   )

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 { Translate } from 'client/components/HOC'
-import { useViews } from 'client/features/Auth'
+import { StatusCircle } from 'client/components/Status'
-import { useGetServicesQuery } from 'client/features/OneApi/service'
-
 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 Timer from 'client/components/Timer'
-import { T, RESOURCE_NAMES } from 'client/constants'
+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}
     />
   )

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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
 
   const { component, header } = WrapperRow(VNetworkRow)

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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
   const { component, header } = WrapperRow(VDCRow)
 

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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
 
   const { component, header } = WrapperRow(VmTemplateRow)

src/fireedge/src/client/components/Tables/Vms/index.js

@@ -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)