EVEREST-1399 | bad resources toggle selection

ui/apps/everest/.e2e/pr/db-cluster/db-wizard/edit-db-cluster/resources-step.e2e.ts

@@ -27,6 +27,11 @@ test.describe('DB Cluster Editing Resources Step (Mongo)', () => {
       dbName: mongoDBName,
       dbType: DbType.Mongo,
       numberOfNodes: '5',
+      sharding: true,
+      cpu: 1,
+      memory: 4,
+      proxyCpu: 2,
+      proxyMemory: 4,
     });
   });
 
@@ -48,6 +53,13 @@ test.describe('DB Cluster Editing Resources Step (Mongo)', () => {
     await moveForward(page);
 
     await expect(page.getByTestId('toggle-button-nodes-5')).toBeVisible();
+    await expect(
+      page.getByTestId('node-resources-toggle-button-small')
+    ).toHaveAttribute('aria-pressed', 'true');
+    await page.getByTestId('proxies-accordion').click();
+    await expect(
+      page.getByTestId('router-resources-toggle-button-medium')
+    ).toHaveAttribute('aria-pressed', 'true');
     const a = page
       .getByRole('button', { pressed: true })
       .filter({ hasText: '5 nodes' });

ui/apps/everest/.e2e/utils/db-cluster.ts

@@ -14,11 +14,12 @@
 // limitations under the License.
 
 import { APIRequestContext, expect } from '@playwright/test';
-import { dbTypeToDbEngine } from '@percona/utils';
+import { dbTypeToDbEngine, dbTypeToProxyType } from '@percona/utils';
 import { getEnginesVersions } from './database-engines';
 import { getClusterDetailedInfo } from './storage-class';
 import { getTokenFromLocalStorage } from './localStorage';
 import { getNamespacesFn } from './namespaces';
+import { DbType } from '@percona/types';
 
 export const createDbClusterFn = async (
   request: APIRequestContext,
@@ -93,7 +94,12 @@ export const createDbClusterFn = async (
         // }),
       },
       proxy: {
-        replicas: +(customOptions?.numberOfNodes || 1),
+        type: dbTypeToProxyType(dbType),
+        replicas: +(customOptions?.numberOfProxies || 1),
+        resources: {
+          cpu: `${customOptions?.proxyCpu || 1}`,
+          memory: `${customOptions?.proxyMemory || 1}G`,
+        },
         expose: {
           type: customOptions?.externalAccess ? 'external' : 'internal',
           ...(!!customOptions?.externalAccess &&
@@ -104,6 +110,16 @@ export const createDbClusterFn = async (
             }),
         },
       },
+      ...(customOptions.sharding &&
+        dbType === DbType.Mongo && {
+          sharding: {
+            enabled: true,
+            shards: customOptions.shards || 1,
+            configServer: {
+              replicas: customOptions.configServerReplicas || 3,
+            },
+          },
+        }),
       // TODO return for backups tests
       // ...(backupDataSource?.dbClusterBackupName && {
       //     dataSource: {

ui/apps/everest/src/components/cluster-form/resources/constants.ts

@@ -15,19 +15,22 @@ const resourceToNumber = (minimum = 0) =>
   );
 
 export const matchFieldsValueToResourceSize = (
-  dbType: DbType,
+  sizes: Record<
+    Exclude<ResourceSize, ResourceSize.custom>,
+    Record<'cpu' | 'memory', number>
+  >,
   resources?: Resources
 ): ResourceSize => {
   if (!resources) {
     return ResourceSize.custom;
   }
   const memory = memoryParser(resources.memory.toString());
 
-  const res = Object.values(NODES_DEFAULT_SIZES[dbType]).findIndex(
+  const res = Object.values(sizes).findIndex(
     (item) => item.cpu === Number(resources.cpu) && item.memory === memory.value
   );
   return res !== -1
-    ? (Object.keys(NODES_DEFAULT_SIZES[dbType])[res] as ResourceSize)
+    ? (Object.keys(sizes)[res] as ResourceSize)
     : ResourceSize.custom;
 };
 

ui/apps/everest/src/components/cluster-form/resources/resources.tsx

@@ -189,13 +189,15 @@
       }
       setValue(memoryInputName, sizeOptions[resourceSizePerUnit].memory);
     }
   }, [resourceSizePerUnit, allowDiskInputUpdate, setValue]);
 
   useEffect(() => {
     if (diskCapacityExceeded) {
       setError(diskInputName, { type: 'custom' });
-    } else clearErrors(diskInputName);
+    } else {
+      clearErrors(diskInputName);
+    }
   }, [diskCapacityExceeded, clearErrors, setError]);
 
   useEffect(() => {
     if (
@@ -204,16 +206,17 @@
     ) {
       setValue(resourceSizePerUnitInputName, ResourceSize.custom);
     }
   }, [cpu, setValue]);
 
   useEffect(() => {
     if (
+      allowDiskInputUpdate &&
       resourceSizePerUnit !== ResourceSize.custom &&
       disk !== sizeOptions[resourceSizePerUnit].disk
     ) {
       setValue(resourceSizePerUnitInputName, ResourceSize.custom);
     }
-  }, [disk, setValue]);
+  }, [disk, allowDiskInputUpdate, setValue]);
 
   useEffect(() => {
     if (
@@ -222,7 +225,7 @@
     ) {
       setValue(resourceSizePerUnitInputName, ResourceSize.custom);
     }
   }, [memory, setValue]);
 
   return (
     <FormGroup sx={{ mt: 3 }}>
@@ -487,7 +490,14 @@
       setValue(DbWizardFormFields.numberOfProxies, CUSTOM_NR_UNITS_INPUT_VALUE);
       setValue(DbWizardFormFields.customNrOfProxies, customNrOfNodes);
     }
-  }, [setValue, getFieldState, customNrOfNodes, dbType, numberOfNodes]);
+  }, [
+    setValue,
+    getFieldState,
+    customNrOfNodes,
+    dbType,
+    numberOfNodes,
+    pairProxiesWithNodes,
+  ]);
 
   useEffect(() => {
     const { isTouched: isConfigServersTouched } = getFieldState(
@@ -510,11 +520,11 @@
     }
 
     trigger(DbWizardFormFields.shardConfigServers);
   }, [setValue, getFieldState, numberOfNodes, customNrOfNodes]);
 
   useEffect(() => {
     trigger();
   }, [numberOfNodes, customNrOfNodes]);
 
   return (
     <>

ui/apps/everest/src/hooks/api/db-cluster/utils.ts

@@ -1,7 +1,7 @@
 import { DbType } from '@percona/types';
+import { dbTypeToProxyType } from '@percona/utils';
 import { CUSTOM_NR_UNITS_INPUT_VALUE } from 'components/cluster-form';
 import { Proxy, ProxyExposeType } from 'shared-types/dbCluster.types';
-import { dbTypeToProxyType } from 'utils/db';
 
 export const getProxySpec = (
   dbType: DbType,
@@ -13,10 +13,7 @@ export const getProxySpec = (
   sharding: boolean,
   sourceRanges?: Array<{ sourceRange?: string }>
 ): Proxy | Record<string, never> => {
-  console.log('dbType', dbType);
-  console.log('sharding', sharding);
   if (dbType === DbType.Mongo && !sharding) {
-    console.log('returning empty object');
     return {};
   }
   const proxyNr = parseInt(

ui/apps/everest/src/pages/database-form/database-form.utils.ts

@@ -29,6 +29,8 @@ import {
   getDefaultNumberOfconfigServersByNumberOfNodes,
   matchFieldsValueToResourceSize,
   NODES_DB_TYPE_MAP,
+  NODES_DEFAULT_SIZES,
+  PROXIES_DEFAULT_SIZES,
 } from 'components/cluster-form';
 
 const replicasToNodes = (replicas: string, dbType: DbType): string => {
@@ -99,11 +101,11 @@ export const DbClusterPayloadToFormValues = (
     [DbWizardFormFields.customNrOfNodes]: replicas,
     [DbWizardFormFields.customNrOfProxies]: proxies,
     [DbWizardFormFields.resourceSizePerNode]: matchFieldsValueToResourceSize(
-      dbEngineToDbType(dbCluster?.spec?.engine?.type),
+      NODES_DEFAULT_SIZES[dbEngineToDbType(dbCluster?.spec?.engine?.type)],
       dbCluster?.spec?.engine?.resources
     ),
     [DbWizardFormFields.resourceSizePerProxy]: matchFieldsValueToResourceSize(
-      dbEngineToDbType(dbCluster?.spec?.engine?.type),
+      PROXIES_DEFAULT_SIZES[dbEngineToDbType(dbCluster?.spec?.engine?.type)],
       dbCluster?.spec?.proxy.resources
     ),
     [DbWizardFormFields.sharding]: dbCluster?.spec?.sharding?.enabled || false,

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

@@ -24,6 +24,8 @@ import {
   CUSTOM_NR_UNITS_INPUT_VALUE,
   matchFieldsValueToResourceSize,
   NODES_DB_TYPE_MAP,
+  NODES_DEFAULT_SIZES,
+  PROXIES_DEFAULT_SIZES,
   resourcesFormSchema,
 } from 'components/cluster-form';
 import OverviewSection from '../overview-section';
@@ -245,11 +247,11 @@ export const ResourcesDetails = ({
             customNrOfNodes: replicas,
             customNrOfProxies: proxies,
             resourceSizePerNode: matchFieldsValueToResourceSize(
-              dbType,
+              NODES_DEFAULT_SIZES[dbType],
               dbCluster.spec.engine.resources
             ),
             resourceSizePerProxy: matchFieldsValueToResourceSize(
-              dbType,
+              PROXIES_DEFAULT_SIZES[dbType],
               isProxy(dbCluster.spec.proxy)
                 ? dbCluster.spec.proxy.resources
                 : undefined

ui/apps/everest/src/shared-types/dbCluster.types.ts

@@ -12,7 +12,8 @@
 // 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 { DbEngineType, ProxyType } from './dbEngines.types';
+import { ProxyType } from '@percona/types';
+import { DbEngineType } from './dbEngines.types';
 
 export enum ProxyExposeType {
   internal = 'internal',

ui/apps/everest/src/shared-types/dbEngines.types.ts

@@ -107,5 +107,3 @@ export type OperatorsUpgradePlan = {
   upgrades: OperatorUpgradeTask[];
   pendingActions: OperatorUpgradePendingAction[];
 };
-
-export type ProxyType = 'mongos' | 'haproxy' | 'proxysql' | 'pgbouncer';

ui/apps/everest/src/utils/db.tsx

@@ -1,6 +1,5 @@
 import { MongoIcon, MySqlIcon, PostgreSqlIcon } from '@percona/ui-lib';
 import { DbType } from '@percona/types';
-import { ProxyType } from 'shared-types/dbEngines.types';
 import { Proxy } from 'shared-types/dbCluster.types';
 
 export const dbTypeToIcon = (dbType: DbType) => {
@@ -30,17 +29,6 @@ export const shortenOperatorName = (name: string) => {
   return name;
 };
 
-export const dbTypeToProxyType = (dbType: DbType): ProxyType => {
-  switch (dbType) {
-    case DbType.Mongo:
-      return 'mongos';
-    case DbType.Mysql:
-      return 'haproxy';
-    default:
-      return 'pgbouncer';
-  }
-};
-
 export const isProxy = (
   proxy: Proxy | Record<string, never>
 ): proxy is Proxy => {

ui/packages/types/src/db-type/index.ts

@@ -1,13 +1,15 @@
 enum DbType {
-  Postresql = 'postgresql',
-  Mongo = 'mongodb',
-  Mysql = 'mysql',
+  Postresql = "postgresql",
+  Mongo = "mongodb",
+  Mysql = "mysql",
 }
 
 enum DbEngineType {
-  PSMDB = 'psmdb',
-  PXC = 'pxc',
-  POSTGRESQL = 'postgresql',
+  PSMDB = "psmdb",
+  PXC = "pxc",
+  POSTGRESQL = "postgresql",
 }
 
+export type ProxyType = "mongos" | "haproxy" | "proxysql" | "pgbouncer";
+
 export { DbType, DbEngineType };

ui/packages/utils/src/db/db.ts

@@ -1,4 +1,4 @@
-import { DbType, DbEngineType } from '@percona/types';
+import { DbType, DbEngineType, ProxyType } from '@percona/types';
 
 export const dbEngineToDbType = (dbEngine: DbEngineType): DbType => {
   switch (dbEngine) {
@@ -32,3 +32,14 @@ export const beautifyDbTypeName = (dbType: DbType): string => {
       return 'PostgreSQL';
   }
 };
+
+export const dbTypeToProxyType = (dbType: DbType): ProxyType => {
+  switch (dbType) {
+    case DbType.Mongo:
+      return 'mongos';
+    case DbType.Mysql:
+      return 'haproxy';
+    default:
+      return 'pgbouncer';
+  }
+};