From ee5315ca07b10d65e7489ff5eef4a2fdfd54a0fc Mon Sep 17 00:00:00 2001
From: Frederick Borges <fborges@opennebula.io>
Date: Tue, 28 Feb 2023 17:52:30 +0100
Subject: [PATCH] M #~: Improve way to see clusters in VNet cards (#2532)

---
 .../client/components/Cards/NetworkCard.js    | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/fireedge/src/client/components/Cards/NetworkCard.js b/src/fireedge/src/client/components/Cards/NetworkCard.js
index cfb630b43b..03466e61d2 100644
--- a/src/fireedge/src/client/components/Cards/NetworkCard.js
+++ b/src/fireedge/src/client/components/Cards/NetworkCard.js
@@ -23,7 +23,7 @@ import {
   Cloud,
   WarningCircledOutline as WarningIcon,
 } from 'iconoir-react'
-import { Box, Typography, Tooltip } from '@mui/material'
+import { Box, Stack, Typography, Tooltip } from '@mui/material'
 
 import { useViews } from 'client/features/Auth'
 import MultipleTags from 'client/components/MultipleTags'
@@ -86,10 +86,7 @@ const NetworkCard = memo(
     const leasesInfo = useMemo(() => getLeasesInfo(network), [network])
     const { percentOfUsed, percentLabel } = leasesInfo
 
-    const totalClusters = useMemo(
-      () => [CLUSTERS?.ID ?? []].flat().length || 0,
-      [CLUSTERS?.ID]
-    )
+    const clusters = useMemo(() => [CLUSTERS?.ID ?? []].flat(), [CLUSTERS?.ID])
 
     const labels = useMemo(
       () =>
@@ -136,10 +133,14 @@ const NetworkCard = memo(
               <Group />
               <span>{` ${GNAME}`}</span>
             </span>
-            <span title={`${Tr(T.TotalClusters)}: ${totalClusters}`}>
-              <Server />
-              <span>{` ${totalClusters}`}</span>
-            </span>
+            {!!clusters?.length && (
+              <span title={`${Tr(T.Clusters)}`}>
+                <Server />
+                <Stack direction="row" justifyContent="end" alignItems="center">
+                  <MultipleTags tags={clusters} />
+                </Stack>
+              </span>
+            )}
             {provisionId && (
               <span title={`${Tr(T.ProvisionId)}: #${provisionId}`}>
                 <Cloud />