feat(deploy): configurable CPU/RAM/disk for app databases

Let users size the database workload from the deploy wizard the same way Redis/RabbitMQ are configured: a resource card (CPU request/limit, memory request/limit, storage) on the Resources step, stored in optionalServiceResources.database. - entity/DTO: add `database` to optionalServiceResources - k8s: resolveDatabaseResources() applies user-selected resources on both the Helm and K8s-API deploy paths (was hardcoded 100m/256Mi→500m/512Mi) - billing: bill database CPU/RAM as a separate line on top of the app's resources; merge it through the upgrade path too - wizard: db resource card on the Resources step, disk moved into the card, cost preview + review summary include the database resources Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-16 01:20:33 +03:30
parent e53fc8e2ff
commit 901a20eb01
11 changed files with 198 additions and 74 deletions
@@ -36,9 +36,16 @@ function sanitizePayloadForWordPressRuntime(payload: CreateApplicationDto): Crea
  };
 }

-type OptionalServiceKey = 'redis' | 'rabbitmq';
+type OptionalServiceKey = 'database' | 'redis' | 'rabbitmq';

 const FALLBACK_OPTIONAL_RESOURCES: Record<OptionalServiceKey, OptionalServiceResourceConfig> = {
+  database: {
+    cpuRequest: '100m',
+    cpuLimit: '500m',
+    memoryRequest: '256Mi',
+    memoryLimit: '512Mi',
+    storageGi: 1,
+  },
  redis: {
    cpuRequest: '50m',
    cpuLimit: '200m',
@@ -313,6 +320,22 @@ export default function DeployPage() {
    return Math.max(1, minGiToFitFileBytes(dbDumpFile.size));
  }, [form.databaseType, dbDumpFile]);

+  /** Keep the database workload's storageGi in lockstep with the dbStorageSize disk field. */
+  const dbSyncedOptionalResources = (): OptionalServiceResourcesMap | undefined => {
+    const osr = form.optionalServiceResources;
+    if (!osr) return osr;
+    if (form.databaseType === 'none') {
+      // Drop any leftover database entry when no database is selected.
+      const { database: _drop, ...rest } = osr;
+      return rest;
+    }
+    if (!osr.database) return osr;
+    return {
+      ...osr,
+      database: { ...osr.database, storageGi: parseInt(form.dbStorageSize || '1', 10) || 1 },
+    };
+  };
+
  const { data: clusters = [] } = useQuery<ClusterPublic[]>({
    queryKey: ['clusters-public'],
    queryFn: () => api.get('/clusters/public').then((r) => r.data),
@@ -373,6 +396,8 @@ export default function DeployPage() {
    enableRedis: form.runtime === 'wordpress' ? false : form.enableRedis,
    enableRabbitmq: form.runtime === 'wordpress' ? false : form.enableRabbitmq,
    enableElasticsearch: form.runtime === 'wordpress' ? false : form.enableElasticsearch,
+    databaseResources:
+      form.databaseType !== 'none' ? form.optionalServiceResources?.database : undefined,
    redisResources:
      form.runtime !== 'wordpress' && form.enableRedis ? form.optionalServiceResources?.redis : undefined,
    rabbitmqResources:
@@ -410,6 +435,7 @@ export default function DeployPage() {
      setDeployStage('creating');
      const payload = sanitizePayloadForWordPressRuntime({
        ...form,
+        optionalServiceResources: dbSyncedOptionalResources(),
        ...(form.databaseType !== 'none' && form.dbStorageSize
          ? { dbStorageSize: `${parseInt(form.dbStorageSize, 10) || 1}Gi` }
          : {}),
@@ -492,6 +518,7 @@ export default function DeployPage() {
      setDeployStage('creating');
      const payload = sanitizePayloadForWordPressRuntime({
        ...form,
+        optionalServiceResources: dbSyncedOptionalResources(),
        ...(form.databaseType !== 'none' && form.dbStorageSize
          ? { dbStorageSize: `${parseInt(form.dbStorageSize, 10) || 1}Gi` }
          : {}),
@@ -645,7 +672,7 @@ export default function DeployPage() {

  const handleSubmit = () => {
    if (!validateRestoreStorageOrShowModal()) return;
-    const payload = { ...form };
+    const payload = { ...form, optionalServiceResources: dbSyncedOptionalResources() };
    // Format dbStorageSize with Gi suffix
    if (payload.databaseType !== 'none' && payload.dbStorageSize) {
      payload.dbStorageSize = `${parseInt(payload.dbStorageSize, 10) || 1}Gi`;
@@ -1477,7 +1504,20 @@ export default function DeployPage() {
                      else if (opt.value === 'mysql') dbVersion = '8.0';
                      else if (opt.value === 'mariadb') dbVersion = '11.4';
                      else if (opt.value === 'mongodb') dbVersion = '7.0';
-                      setForm({ ...form, databaseType: opt.value as any, dbVersion });
+                      const hasDb = opt.value !== 'none';
+                      setForm({
+                        ...form,
+                        databaseType: opt.value as any,
+                        dbVersion,
+                        optionalServiceResources: hasDb
+                          ? {
+                              ...form.optionalServiceResources,
+                              database:
+                                form.optionalServiceResources?.database ??
+                                optionalDefaultsFromCatalog(pricingCatalog, 'database'),
+                            }
+                          : form.optionalServiceResources,
+                      });
                    }}
                    className={`p-4 rounded-xl border-2 text-center transition-colors ${
                      form.databaseType === opt.value ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
@@ -1665,59 +1705,13 @@ export default function DeployPage() {
                  </div>
                </div>

-                {/* Database Storage Size */}
-                <div className="pt-2">
-                  <label className="block text-xs text-gray-500 mb-2">{dw.databaseStorageSize}</label>
-                  <div className="flex items-center gap-3">
-                    <div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
-                      <button
-                        type="button"
-                        onClick={() => {
-                          const current = parseInt(form.dbStorageSize || '1', 10);
-                          const min = minDbGiFromRestoreDump;
-                          if (current > min) setForm({ ...form, dbStorageSize: String(current - 1) });
-                        }}
-                        disabled={parseInt(form.dbStorageSize || '1', 10) <= minDbGiFromRestoreDump}
-                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-                      >
-                        −
-                      </button>
-                      <input
-                        type="number"
-                        min={minDbGiFromRestoreDump}
-                        max={100}
-                        value={form.dbStorageSize || '1'}
-                        onChange={(e) => {
-                          const min = minDbGiFromRestoreDump;
-                          const val = Math.max(min, Math.min(100, parseInt(e.target.value, 10) || min));
-                          setForm({ ...form, dbStorageSize: String(val) });
-                        }}
-                        className="w-16 text-center py-2 border-x border-gray-300 text-sm font-semibold focus:outline-none"
-                      />
-                      <button
-                        type="button"
-                        onClick={() => {
-                          const current = parseInt(form.dbStorageSize || '1', 10);
-                          if (current < 100) setForm({ ...form, dbStorageSize: String(current + 1) });
-                        }}
-                        disabled={parseInt(form.dbStorageSize || '1', 10) >= 100}
-                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-                      >
-                        +
-                      </button>
-                    </div>
-                    <span className="text-sm font-medium text-gray-700">GB</span>
-                    {dbDumpFile && (
-                      <span className="text-xs text-blue-500">
-                        Suggested based on dump size ({(dbDumpFile.size / (1024 * 1024 * 1024)).toFixed(2)} GB)
-                      </span>
-                    )}
-                  </div>
-                  <p className="mt-1 text-xs text-gray-400">
-                    Minimum {minDbGiFromRestoreDump} GB for this configuration
-                    {dbDumpFile ? ' (must fit the uploaded dump)' : ''} • Only expansion is allowed after creation
-                  </p>
-                </div>
+                {/* CPU, RAM and disk for the database are configured on the Resources step. */}
+                <p className="text-xs text-gray-400 pt-1">
+                  {dw.databaseResourcesHint}
+                  {dbDumpFile
+                    ? ` (${dw.databaseStorageSize} ≥ ${minDbGiFromRestoreDump} GB)`
+                    : ''}
+                </p>
              </div>
            )}

@@ -2444,6 +2438,48 @@ export default function DeployPage() {

            </div>

+            {form.databaseType !== 'none' && form.optionalServiceResources?.database && (
+              <div className="space-y-4 pt-2 border-t border-gray-200">
+                <h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wide">{dw.databaseResources}</h3>
+                <WorkloadResourceFields
+                  title={
+                    form.databaseType === 'postgresql' ? 'PostgreSQL'
+                      : form.databaseType === 'mysql' ? 'MySQL'
+                      : form.databaseType === 'mariadb' ? 'MariaDB'
+                      : 'MongoDB'
+                  }
+                  accentClass="text-blue-500"
+                  borderClass="border-blue-200"
+                  bgClass="bg-blue-50/50"
+                  config={{
+                    ...form.optionalServiceResources.database,
+                    storageGi: parseInt(form.dbStorageSize || '1', 10) || 1,
+                  }}
+                  onChange={(patch) => {
+                    const { storageGi, ...res } = patch;
+                    setForm((prev) => {
+                      const nextStorage =
+                        storageGi !== undefined
+                          ? Math.max(minDbGiFromRestoreDump, storageGi)
+                          : parseInt(prev.dbStorageSize || '1', 10) || 1;
+                      return {
+                        ...prev,
+                        dbStorageSize: String(nextStorage),
+                        optionalServiceResources: {
+                          ...prev.optionalServiceResources,
+                          database: {
+                            ...prev.optionalServiceResources!.database!,
+                            ...res,
+                            storageGi: nextStorage,
+                          },
+                        },
+                      };
+                    });
+                  }}
+                />
+              </div>
+            )}
+
            {form.runtime !== 'wordpress' && (form.enableRedis || form.enableRabbitmq) && (
              <div className="space-y-4 pt-2 border-t border-gray-200">
                <h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wide">{dw.optionalServices}</h3>
@@ -2529,6 +2565,16 @@ export default function DeployPage() {
                    <span className="text-sm text-gray-500">{dw.dbStorage}</span>
                    <span className="text-sm font-medium">{form.dbStorageSize || '1'} GB</span>
                  </div>
+                  {form.optionalServiceResources?.database && (
+                    <div className="flex justify-between">
+                      <span className="text-sm text-gray-500">{dw.databaseResources}</span>
+                      <span className="text-sm font-medium">
+                        {form.optionalServiceResources.database.cpuRequest} / {form.optionalServiceResources.database.cpuLimit}
+                        {' · '}
+                        {form.optionalServiceResources.database.memoryRequest} / {form.optionalServiceResources.database.memoryLimit}
+                      </span>
+                    </div>
+                  )}
                  {dbDumpFile && (
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-500">{dw.dbDump}</span>
@@ -1231,6 +1231,8 @@ const en: Dictionary = {
      databaseCredentials: 'Database Credentials',
      dbUsername: 'DB Username', dbPassword: 'DB Password', dbStorage: 'DB Storage', dbDump: 'DB Dump',
      databaseStorageSize: 'Database Storage Size',
+      databaseResources: 'Database resources',
+      databaseResourcesHint: 'Configure the database CPU, RAM and disk on the Resources step.',
      username: 'Username', password: 'Password', autoGenerated: 'Auto-generated',
      generatePassword: 'Generate random password',
      dbCredsNote: 'These credentials are used for internal cluster communication only. The database is not exposed externally.',
@@ -1243,6 +1243,8 @@ const fa = {
      databaseCredentials: 'اطلاعات ورود دیتابیس',
      dbUsername: 'نام کاربری دیتابیس', dbPassword: 'رمز دیتابیس', dbStorage: 'فضای دیتابیس', dbDump: 'dump دیتابیس',
      databaseStorageSize: 'اندازهٔ فضای ذخیرهٔ دیتابیس',
+      databaseResources: 'منابع دیتابیس',
+      databaseResourcesHint: 'پردازنده، حافظه و دیسک دیتابیس را در مرحلهٔ منابع پیکربندی کن.',
      username: 'نام کاربری', password: 'رمز عبور', autoGenerated: 'تولید خودکار',
      generatePassword: 'تولید رمز تصادفی',
      dbCredsNote: 'این اطلاعات فقط برای ارتباط داخلی کلاستر استفاده می‌شوند. دیتابیس به‌صورت خارجی expose نمی‌شود.',
@@ -7,6 +7,13 @@ import type {
 export type OptionalServiceKey = keyof OptionalServiceResourcesMap;

 const FALLBACK_OPTIONAL_RESOURCES: Record<OptionalServiceKey, OptionalServiceResourceConfig> = {
+  database: {
+    cpuRequest: '100m',
+    cpuLimit: '500m',
+    memoryRequest: '256Mi',
+    memoryLimit: '512Mi',
+    storageGi: 1,
+  },
  redis: {
    cpuRequest: '50m',
    cpuLimit: '200m',
@@ -267,6 +267,7 @@ export interface OptionalServiceResourceConfig {
 }

 export interface OptionalServiceResourcesMap {
+  database?: OptionalServiceResourceConfig;
  redis?: OptionalServiceResourceConfig;
  rabbitmq?: OptionalServiceResourceConfig;
 }