From cadb28a8349f40b5e9f304a11dc900a15f3a5c49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Silva?= Date: Wed, 30 Oct 2024 11:26:19 +0000 Subject: [PATCH] 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 --- .../database-preview.test.tsx | 2 +- .../database-preview.types.ts | 4 +-- .../database-preview/preview-section.tsx | 2 ++ .../sections/resources-section.tsx | 32 ++++++++++++++++++ .../pages/databases/DbClusterView.utils.ts | 3 ++ .../pages/databases/dbClusterView.types.ts | 3 ++ .../databases/expandedRow/ExpandedRow.tsx | 33 ++++++++++++++++++- .../cards/resources-details.tsx | 23 +++++++++++++ .../src/utils/k8ResourceParser/index.ts | 2 +- 9 files changed, 99 insertions(+), 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 index 33c32450e..a80a1c337 100644 --- 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 index 6c3a84ebe..9333e10e6 100644 --- 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 index b22608ca1..d736bc60d 100644 --- 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,6 +85,7 @@ export const PreviewSection = ({ export const PreviewContentText = ({ text, dataTestId, + ...typographyProps }: PreviewContentTextProps) => ( {text} 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 index 4c1683ea8..c6fbeec7b 100644 --- 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 = ({ + + + ); }; diff --git a/ui/apps/everest/src/pages/databases/DbClusterView.utils.ts b/ui/apps/everest/src/pages/databases/DbClusterView.utils.ts index dd25080c2..d56d4cf69 100644 --- 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 index 42efe92e3..4f9ceae06 100644 --- 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 index 4485f23c2..82ef8644a 100644 --- 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,6 +28,8 @@ import { getTotalResourcesDetailedString, memoryParser, } from 'utils/k8ResourceParser'; +import { getProxyUnitNamesFromDbType } from 'components/cluster-form/resources/utils'; +import { dbEngineToDbType } from '@percona/utils'; export const ExpandedRow = ({ row, @@ -35,10 +37,14 @@ export const ExpandedRow = ({ row: MRT_Row; }) => { 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} /> + + + + + + 1 ? 'plural' : 'singular']}`} + loading={loading} + > + + + {openEditModal && ( diff --git a/ui/apps/everest/src/utils/k8ResourceParser/index.ts b/ui/apps/everest/src/utils/k8ResourceParser/index.ts index d373d88a8..d202642fd 100644 --- 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}`; };