F #6718: add labels in rows (#3238) (#3239)

OpenNebula · Sep 23, 2024 · 80dc9b4 · 80dc9b4
1 parent 6893305
commit 80dc9b4
Show file tree

Hide file tree

Showing 16 changed files with 453 additions and 55 deletions.
diff --git 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 (
           <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
diff --git 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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
 
   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
@@ -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)

diff --git 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 <MultipleTags tags={labels} truncateText={10} />
+      },
+    },
   ]
   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
@@ -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,

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

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