[UI] EVEREST-1889 Fix resources display in overview page and expanded row

ui/apps/everest/src/pages/databases/dbClusterView.messages.tsx

@@ -45,11 +45,14 @@ export const Messages = {
     cpu: 'CPU',
     memory: 'Memory',
     disk: 'Disk',
-    nodes: 'Nº nodes',
     externalAccess: 'External Access',
     monitoring: 'Monitoring',
     enabled: 'Enabled',
     disabled: 'Disabled',
+    shardingStatus: 'Status',
+    sharding: 'Sharding',
+    nrOfShards: 'Nº shards',
+    configServers: 'Config servers',
   },
   dbCluster: {
     noData:

ui/apps/everest/src/pages/databases/expandedRow/ExpandedRow.tsx

@@ -25,11 +25,12 @@ import { LabelValue } from './LabelValue';
 import { useRBACPermissions } from 'hooks/rbac';
 import {
   cpuParser,
-  getTotalResourcesDetailedString,
+  getResourcesDetailedString,
   memoryParser,
 } from 'utils/k8ResourceParser';
 import { getProxyUnitNamesFromDbType } from 'components/cluster-form/resources/utils';
 import { dbEngineToDbType } from '@percona/utils';
+import { DbEngineType } from '@percona/types';
 
 export const ExpandedRow = ({
   row,
@@ -52,33 +53,28 @@ export const ExpandedRow = ({
     port,
     raw,
   } = row.original;
-
+  const sharding = raw.spec.sharding;
   const parsedDiskValues = memoryParser(storage.toString());
-  const parsedMemoryValues = memoryParser(memory.toString());
-  const parsedProxyMemoryValues = memoryParser(proxyMemory.toString());
-  const cpuResourcesStr = getTotalResourcesDetailedString(
+  const parsedMemoryValues = memoryParser(memory.toString(), 'G');
+  const parsedProxyMemoryValues = memoryParser(proxyMemory.toString(), 'G');
+  const cpuResourcesStr = getResourcesDetailedString(
     cpuParser(cpu.toString() || '0'),
-    nodes,
-    'CPU'
+    ''
   );
-  const cpuProxyResourcesStr = getTotalResourcesDetailedString(
+  const cpuProxyResourcesStr = getResourcesDetailedString(
     cpuParser(proxyCpu.toString() || '0'),
-    proxies,
-    'CPU'
+    ''
   );
-  const memoryResourcesStr = getTotalResourcesDetailedString(
+  const memoryResourcesStr = getResourcesDetailedString(
     parsedMemoryValues.value,
-    nodes,
-    parsedMemoryValues.originalUnit
+    'GB'
   );
-  const memoryProxyResourcesStr = getTotalResourcesDetailedString(
+  const memoryProxyResourcesStr = getResourcesDetailedString(
     parsedProxyMemoryValues.value,
-    proxies,
-    parsedProxyMemoryValues.originalUnit
+    'GB'
   );
-  const storageResourcesStr = getTotalResourcesDetailedString(
+  const storageResourcesStr = getResourcesDetailedString(
     parsedDiskValues.value,
-    nodes,
     parsedDiskValues.originalUnit
   );
   const isExpanded = row.getIsExpanded();
@@ -159,7 +155,35 @@ export const ExpandedRow = ({
         >
           {Messages.expandedRow.dbClusterParams}
         </Typography>
-        <LabelValue label={Messages.expandedRow.nodes} value={nodes} />
+        <Box>
+          {dbType === DbEngineType.PSMDB && (
+            <Box>
+              <Typography sx={{ fontWeight: 'bold', paddingBottom: 1 }}>
+                {Messages.expandedRow.sharding}
+              </Typography>
+              <LabelValue
+                label={Messages.expandedRow.shardingStatus}
+                value={
+                  sharding?.enabled
+                    ? Messages.expandedRow.enabled
+                    : Messages.expandedRow.disabled
+                }
+              />
+              <LabelValue
+                label={Messages.expandedRow.nrOfShards}
+                value={sharding?.shards}
+              />
+              <LabelValue
+                label={Messages.expandedRow.configServers}
+                value={sharding?.configServer.replicas}
+              />
+            </Box>
+          )}
+        </Box>
+        <Divider sx={{ margin: '10px 0' }} />
+        <Typography sx={{ fontWeight: 'bold', paddingBottom: 1 }}>
+          {`${nodes} node${+nodes > 1 ? 's' : ''} ${dbType === DbEngineType.PSMDB ? 'per shard' : ''}`}
+        </Typography>
         <LabelValue label={Messages.expandedRow.cpu} value={cpuResourcesStr} />
         <LabelValue
           label={Messages.expandedRow.memory}
@@ -172,10 +196,9 @@ export const ExpandedRow = ({
         <Divider sx={{ margin: '10px 0' }} />
         {proxies > 0 && (
           <>
-            <LabelValue
-              label={`Nº ${getProxyUnitNamesFromDbType(dbEngineToDbType(dbType)).plural}`}
-              value={proxies}
-            />
+            <Typography sx={{ fontWeight: 'bold', paddingBottom: 1 }}>
+              {`${proxies} ${getProxyUnitNamesFromDbType(dbEngineToDbType(dbType))[proxies > 1 ? 'plural' : 'singular']} ${dbType === DbEngineType.PSMDB ? 'per shard' : ''}`}
+            </Typography>
             <LabelValue
               label={Messages.expandedRow.cpu}
               value={cpuProxyResourcesStr}

ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/resources-details.tsx

@@ -34,7 +34,7 @@ import { Messages } from '../cluster-overview.messages';
 import { ResourcesEditModal } from './resources';
 import {
   cpuParser,
-  getTotalResourcesDetailedString,
+  getResourcesDetailedString,
   memoryParser,
 } from 'utils/k8ResourceParser';
 import { dbEngineToDbType } from '@percona/utils';
@@ -67,8 +67,8 @@ export const ResourcesDetails = ({
     : 0;
   const disk = dbCluster.spec.engine.storage.size;
   const parsedDiskValues = memoryParser(disk.toString());
-  const parsedMemoryValues = memoryParser(memory.toString());
-  const parsedProxyMemoryValues = memoryParser(proxyMemory.toString());
+  const parsedMemoryValues = memoryParser(memory.toString(), 'G');
+  const parsedProxyMemoryValues = memoryParser(proxyMemory.toString(), 'G');
   const dbType = dbEngineToDbType(dbCluster.spec.engine.type);
   const replicas = dbCluster.spec.engine.replicas.toString();
   const proxies = isProxy(dbCluster.spec.proxy)
@@ -78,10 +78,7 @@ export const ResourcesDetails = ({
   const numberOfNodes = NODES_DB_TYPE_MAP[dbType].includes(replicas)
     ? replicas
     : CUSTOM_NR_UNITS_INPUT_VALUE;
-  const numberOfNodesStr =
-    sharding?.enabled && sharding?.shards
-      ? (+numberOfNodes * sharding?.shards).toString()
-      : numberOfNodes;
+  const numberOfNodesStr = numberOfNodes;
   const numberOfProxiesStr = NODES_DB_TYPE_MAP[dbType].includes(proxies)
     ? proxies
     : CUSTOM_NR_UNITS_INPUT_VALUE;
@@ -185,61 +182,50 @@ export const ResourcesDetails = ({
             </OverviewSection>
           )}
           <OverviewSection
-            title={`${numberOfNodesStr} node${+numberOfNodesStr > 1 ? 's' : ''}`}
+            title={`${numberOfNodesStr} node${+numberOfNodesStr > 1 ? 's' : ''} ${dbType === DbType.Mongo ? 'per shard' : ''}`}
             loading={loading}
           >
             <OverviewSectionRow
               dataTestId="node-cpu"
               label={Messages.fields.cpu}
-              contentString={getTotalResourcesDetailedString(
+              contentString={getResourcesDetailedString(
                 cpuParser(cpu.toString() || '0'),
-                parseInt(replicas, 10),
-                'CPU',
-                sharding?.shards,
-                sharding?.enabled
+                ''
               )}
             />
             <OverviewSectionRow
               label={Messages.fields.memory}
-              contentString={getTotalResourcesDetailedString(
+              contentString={getResourcesDetailedString(
                 parsedMemoryValues.value,
-                parseInt(replicas, 10),
-                parsedMemoryValues.originalUnit,
-                sharding?.shards,
-                sharding?.enabled
+                'GB'
               )}
             />
             <OverviewSectionRow
               label={Messages.fields.disk}
-              contentString={getTotalResourcesDetailedString(
+              contentString={getResourcesDetailedString(
                 parsedDiskValues.value,
-                parseInt(replicas, 10),
-                parsedDiskValues.originalUnit,
-                sharding?.shards,
-                sharding?.enabled
+                parsedDiskValues.originalUnit
               )}
             />
           </OverviewSection>
           {numberOfProxiesInt > 0 && (
             <OverviewSection
-              title={`${proxies} ${getProxyUnitNamesFromDbType(dbEngineToDbType(dbCluster.spec.engine.type))[numberOfProxiesInt > 1 ? 'plural' : 'singular']}`}
+              title={`${proxies} ${getProxyUnitNamesFromDbType(dbEngineToDbType(dbCluster.spec.engine.type))[numberOfProxiesInt > 1 ? 'plural' : 'singular']} ${dbType === DbType.Mongo ? 'per shard' : ''}`}
               loading={loading}
             >
               <OverviewSectionRow
                 dataTestId={`${getProxyUnitNamesFromDbType(dbEngineToDbType(dbCluster.spec.engine.type))[numberOfProxiesInt > 1 ? 'plural' : 'singular']}-cpu`}
                 label={Messages.fields.cpu}
-                contentString={getTotalResourcesDetailedString(
+                contentString={getResourcesDetailedString(
                   cpuParser(proxyCpu.toString() || '0'),
-                  parseInt(proxies, 10),
-                  'CPU'
+                  ''
                 )}
               />
               <OverviewSectionRow
                 label={Messages.fields.memory}
-                contentString={getTotalResourcesDetailedString(
+                contentString={getResourcesDetailedString(
                   parsedProxyMemoryValues.value,
-                  parseInt(proxies, 10),
-                  parsedProxyMemoryValues.originalUnit
+                  'GB'
                 )}
               />
             </OverviewSection>

ui/apps/everest/src/utils/k8ResourceParser/index.ts

@@ -67,21 +67,6 @@ export const memoryParser = (
   };
 };
 
-export const getTotalResourcesDetailedString = (
-  value: number,
-  numberOfNodes: number,
-  unit: string,
-  shardNr?: number,
-  sharding?: boolean
-) => {
-  if (numberOfNodes === 1 && !sharding) {
-    return `${value.toFixed(2)} ${unit}`;
-  }
-
-  const totalResources =
-    sharding && shardNr
-      ? value * numberOfNodes * shardNr
-      : value * numberOfNodes;
-
-  return `${totalResources.toFixed(2)} ${unit}`;
+export const getResourcesDetailedString = (value: number, unit: string) => {
+  return `${value} ${unit}`;
 };