Everest-1546 | Proxy resources (#794)

* feat: add proxy resources to db preview sidebar * feat: show proxy resources on expanded row * feat: add dividers to db details row * feat: show proxy resources on db details page * fix: test * fix: default value * fix: test --------- Co-authored-by: Diana Birsan <[email protected]>
percona · Oct 30, 2024 · cadb28a · cadb28a
1 parent 36d02d2
commit cadb28a
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 5 deletions.
diff --git a/ui/apps/everest/src/pages/database-form/database-preview/database-preview.test.tsx b/ui/apps/everest/src/pages/database-form/database-preview/database-preview.test.tsx
@@ -84,7 +84,7 @@ describe('DatabasePreview', () => {
     expect(screen.getByText('Version: 1.0.0')).toBeInTheDocument();
 
     expect(screen.getByText('Nº nodes: 1')).toBeInTheDocument();
-    expect(screen.getByText('CPU: 1.00 CPU')).toBeInTheDocument();
+    expect(screen.getAllByText('CPU: 1.00 CPU').length).toBeGreaterThan(1);
     expect(screen.getByText('Disk: 30.00 Gi')).toBeInTheDocument();
   });
 

diff --git a/ui/apps/everest/src/pages/database-form/database-preview/database-preview.types.ts b/ui/apps/everest/src/pages/database-form/database-preview/database-preview.types.ts
@@ -12,7 +12,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { StackProps } from '@mui/material';
+import { StackProps, TypographyProps } from '@mui/material';
 
 export type DatabasePreviewProps = {
   // zero indexed
@@ -35,4 +35,4 @@ export type PreviewSectionProps = {
 export type PreviewContentTextProps = {
   text: string;
   dataTestId?: string;
-};
+} & TypographyProps;
diff --git a/ui/apps/everest/src/pages/database-form/database-preview/preview-section.tsx b/ui/apps/everest/src/pages/database-form/database-preview/preview-section.tsx
@@ -85,13 +85,15 @@ export const PreviewSection = ({
 export const PreviewContentText = ({
   text,
   dataTestId,
+  ...typographyProps
 }: PreviewContentTextProps) => (
   <Typography
     variant="caption"
     color="text.secondary"
     data-testid={
       dataTestId ? `${dataTestId}-preview-content` : 'preview-content'
     }
+    {...typographyProps}
   >
     {text}
   </Typography>

diff --git a/ui/apps/everest/src/pages/database-form/database-preview/sections/resources-section.tsx b/ui/apps/everest/src/pages/database-form/database-preview/sections/resources-section.tsx
@@ -1,31 +1,49 @@
 import { CUSTOM_NR_UNITS_INPUT_VALUE } from 'components/cluster-form';
 import { PreviewContentText } from '../preview-section';
 import { SectionProps } from './section.types';
+import { getProxyUnitNamesFromDbType } from 'components/cluster-form/resources/utils';
 
 export const ResourcesPreviewSection = ({
+  dbType,
   numberOfNodes,
   customNrOfNodes,
+  numberOfProxies,
+  customNrOfProxies,
   cpu,
   disk,
   diskUnit,
   memory,
+  proxyCpu,
+  proxyMemory,
   sharding,
   shardNr,
   shardConfigServers,
 }: SectionProps) => {
+  const proxyUnitNames = getProxyUnitNamesFromDbType(dbType);
   if (numberOfNodes === CUSTOM_NR_UNITS_INPUT_VALUE) {
     numberOfNodes = customNrOfNodes || '';
   }
 
+  if (numberOfProxies === CUSTOM_NR_UNITS_INPUT_VALUE) {
+    numberOfProxies = customNrOfProxies || '';
+  }
+
   let intNumberOfNodes = Math.max(parseInt(numberOfNodes, 10), 0);
+  let intNumberOfProxies = Math.max(parseInt(numberOfProxies, 10), 0);
 
   if (Number.isNaN(intNumberOfNodes)) {
     intNumberOfNodes = 0;
   }
 
+  if (Number.isNaN(intNumberOfProxies)) {
+    intNumberOfProxies = 0;
+  }
+
   const parsedCPU = Number(cpu) * intNumberOfNodes;
   const parsedDisk = Number(disk) * intNumberOfNodes;
   const parsedMemory = Number(memory) * intNumberOfNodes;
+  const parsedProxyCPU = Number(proxyCpu) * intNumberOfProxies;
+  const parsedProxyMemory = Number(proxyMemory) * intNumberOfProxies;
 
   return (
     <>
@@ -49,6 +67,20 @@ export const ResourcesPreviewSection = ({
       <PreviewContentText
         text={`Disk: ${Number.isNaN(parsedDisk) ? '' : `${parsedDisk.toFixed(2)} ${diskUnit}`}`}
       />
+      <PreviewContentText
+        text={`Nº ${proxyUnitNames.plural}: ${intNumberOfProxies}`}
+        mt={2}
+      />
+      <PreviewContentText
+        text={`CPU: ${Number.isNaN(parsedProxyCPU) ? '' : `${parsedProxyCPU.toFixed(2)} CPU`}`}
+      />
+      <PreviewContentText
+        text={`Memory: ${
+          Number.isNaN(parsedProxyMemory)
+            ? ''
+            : `${parsedProxyMemory.toFixed(2)} GB`
+        }`}
+      />
     </>
   );
 };
diff --git a/ui/apps/everest/src/pages/databases/DbClusterView.utils.ts b/ui/apps/everest/src/pages/databases/DbClusterView.utils.ts
@@ -55,6 +55,9 @@ export const convertDbClusterPayloadToTableFormat = (
           memory: cluster.spec.engine.resources?.memory || '',
           storage: cluster.spec.engine.storage.size,
           nodes: cluster.spec.engine.replicas,
+          proxies: cluster.spec.proxy.replicas || 0,
+          proxyCpu: cluster.spec.proxy.resources?.cpu || '',
+          proxyMemory: cluster.spec.proxy.resources?.memory || '',
           hostName: cluster.status ? cluster.status.hostname : '',
           exposetype: isProxy(cluster.spec.proxy)
             ? cluster.spec.proxy.expose.type

diff --git a/ui/apps/everest/src/pages/databases/dbClusterView.types.ts b/ui/apps/everest/src/pages/databases/dbClusterView.types.ts
@@ -35,7 +35,10 @@ export interface DbClusterTableElement {
   cpu: string | number;
   memory: string | number;
   storage: string | number;
+  proxyCpu: string | number;
+  proxyMemory: string | number;
   nodes: number;
+  proxies: number;
   hostName: string;
   port?: number;
   exposetype?: ProxyExposeType;

diff --git a/ui/apps/everest/src/pages/databases/expandedRow/ExpandedRow.tsx b/ui/apps/everest/src/pages/databases/expandedRow/ExpandedRow.tsx
@@ -13,7 +13,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Box, Skeleton, Typography } from '@mui/material';
+import { Box, Divider, Skeleton, Typography } from '@mui/material';
 import { CopyToClipboardButton } from '@percona/ui-lib';
 import { HiddenPasswordToggle } from 'components/hidden-row';
 import { useDbClusterCredentials } from 'hooks/api/db-cluster/useCreateDbCluster';
@@ -28,17 +28,23 @@ import {
   getTotalResourcesDetailedString,
   memoryParser,
 } from 'utils/k8ResourceParser';
+import { getProxyUnitNamesFromDbType } from 'components/cluster-form/resources/utils';
+import { dbEngineToDbType } from '@percona/utils';
 
 export const ExpandedRow = ({
   row,
 }: {
   row: MRT_Row<DbClusterTableElement>;
 }) => {
   const {
+    dbType,
     cpu,
     memory,
     storage,
     nodes,
+    proxies,
+    proxyCpu,
+    proxyMemory,
     exposetype,
     namespace,
     databaseName,
@@ -48,16 +54,27 @@ export const ExpandedRow = ({
   } = row.original;
   const parsedDiskValues = memoryParser(storage.toString());
   const parsedMemoryValues = memoryParser(memory.toString());
+  const parsedProxyMemoryValues = memoryParser(proxyMemory.toString());
   const cpuResourcesStr = getTotalResourcesDetailedString(
     cpuParser(cpu.toString() || '0'),
     nodes,
     'CPU'
   );
+  const cpuProxyResourcesStr = getTotalResourcesDetailedString(
+    cpuParser(proxyCpu.toString() || '0'),
+    proxies,
+    'CPU'
+  );
   const memoryResourcesStr = getTotalResourcesDetailedString(
     parsedMemoryValues.value,
     nodes,
     parsedMemoryValues.originalUnit
   );
+  const memoryProxyResourcesStr = getTotalResourcesDetailedString(
+    parsedProxyMemoryValues.value,
+    proxies,
+    parsedProxyMemoryValues.originalUnit
+  );
   const storageResourcesStr = getTotalResourcesDetailedString(
     parsedDiskValues.value,
     nodes,
@@ -151,6 +168,20 @@ export const ExpandedRow = ({
           label={Messages.expandedRow.disk}
           value={storageResourcesStr}
         />
+        <Divider sx={{ margin: '10px 0' }} />
+        <LabelValue
+          label={`Nº ${getProxyUnitNamesFromDbType(dbEngineToDbType(dbType)).plural}`}
+          value={nodes}
+        />
+        <LabelValue
+          label={Messages.expandedRow.cpu}
+          value={cpuProxyResourcesStr}
+        />
+        <LabelValue
+          label={Messages.expandedRow.memory}
+          value={memoryProxyResourcesStr}
+        />
+        <Divider sx={{ margin: '10px 0' }} />
         <LabelValue
           label={Messages.expandedRow.externalAccess}
           value={

diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/resources-details.tsx b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/resources-details.tsx
@@ -40,6 +40,7 @@ import { dbEngineToDbType } from '@percona/utils';
 import { DB_CLUSTER_QUERY, useUpdateDbClusterResources } from 'hooks';
 import { DbType } from '@percona/types';
 import { isProxy } from 'utils/db';
+import { getProxyUnitNamesFromDbType } from 'components/cluster-form/resources/utils';
 
 export const ResourcesDetails = ({
   dbCluster,
@@ -57,6 +58,7 @@ export const ResourcesDetails = ({
   const disk = dbCluster.spec.engine.storage.size;
   const parsedDiskValues = memoryParser(disk.toString());
   const parsedMemoryValues = memoryParser(memory.toString());
+  const parsedProxyMemoryValues = memoryParser(proxyMemory.toString());
   const dbType = dbEngineToDbType(dbCluster.spec.engine.type);
   const replicas = dbCluster.spec.engine.replicas.toString();
   const proxies = isProxy(dbCluster.spec.proxy)
@@ -193,6 +195,27 @@ export const ResourcesDetails = ({
               )}
             />
           </OverviewSection>
+          <OverviewSection
+            title={`${proxies} ${getProxyUnitNamesFromDbType(dbEngineToDbType(dbCluster.spec.engine.type))[+proxies > 1 ? 'plural' : 'singular']}`}
+            loading={loading}
+          >
+            <OverviewSectionRow
+              label={Messages.fields.cpu}
+              contentString={getTotalResourcesDetailedString(
+                cpuParser(proxyCpu.toString() || '0'),
+                parseInt(proxies, 10),
+                'CPU'
+              )}
+            />
+            <OverviewSectionRow
+              label={Messages.fields.memory}
+              contentString={getTotalResourcesDetailedString(
+                parsedProxyMemoryValues.value,
+                parseInt(proxies, 10),
+                parsedProxyMemoryValues.originalUnit
+              )}
+            />
+          </OverviewSection>
         </Stack>
       </OverviewCard>
       {openEditModal && (

diff --git a/ui/apps/everest/src/utils/k8ResourceParser/index.ts b/ui/apps/everest/src/utils/k8ResourceParser/index.ts
@@ -78,5 +78,5 @@ export const getTotalResourcesDetailedString = (
 
   const totalResources = value * numberOfNodes;
 
-  return `${numberOfNodes} x ${value} ${unit} = ${totalResources} ${unit}`;
+  return `${numberOfNodes} x ${value} ${unit} = ${totalResources.toFixed(2)} ${unit}`;
 };