feat: support backup selection during database creation (labring#5252)

* fix db backup cron * feat: support backup selection during database creation * update terminationPolicy * update * update * update SelectTimeList * update style * update * support PVC_STORAGE_MAX
lingdie · Dec 9, 2024 · fd9542c · fd9542c
1 parent 5b10979
commit fd9542c
Show file tree

Hide file tree

Showing 27 changed files with 593 additions and 232 deletions.
diff --git a/frontend/providers/applaunchpad/data/config.yaml b/frontend/providers/applaunchpad/data/config.yaml
@@ -9,6 +9,7 @@ common:
   guideEnabled: false
   apiEnabled: false
 launchpad:
+  pvcStorageMax: 100
   eventAnalyze:
     enabled: false
     fastGPTKey: ""

diff --git a/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts b/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts
@@ -17,6 +17,7 @@ export type Response = {
   fileMangerConfig: FileMangerType;
   SEALOS_USER_DOMAINS: { name: string; secretName: string }[];
   DESKTOP_DOMAIN: string;
+  PVC_STORAGE_MAX: number;
 };
 
 export const defaultAppConfig: AppConfigType = {
@@ -38,6 +39,7 @@ export const defaultAppConfig: AppConfigType = {
   },
   launchpad: {
     currencySymbol: Coin.shellCoin,
+    pvcStorageMax: 20,
     eventAnalyze: {
       enabled: false,
       fastGPTKey: ''
@@ -93,7 +95,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         fileMangerConfig: global.AppConfig.launchpad.fileManger,
         CURRENCY: global.AppConfig.launchpad.currencySymbol || Coin.shellCoin,
         SEALOS_USER_DOMAINS: global.AppConfig.cloud.userDomains || [],
-        DESKTOP_DOMAIN: global.AppConfig.cloud.desktopDomain
+        DESKTOP_DOMAIN: global.AppConfig.cloud.desktopDomain,
+        PVC_STORAGE_MAX: global.AppConfig.launchpad.pvcStorageMax || 20
       }
     });
   } catch (error) {

diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/StoreModal.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/StoreModal.tsx
@@ -22,6 +22,7 @@ import MyFormControl from '@/components/FormControl';
 import { useTranslation } from 'next-i18next';
 import { pathToNameFormat } from '@/utils/tools';
 import { MyTooltip } from '@sealos/ui';
+import { PVC_STORAGE_MAX } from '@/store/static';
 
 export type StoreType = {
   id?: string;
@@ -82,8 +83,8 @@ const StoreModal = ({
               <Box mb={'8px'} fontSize={'14px'} fontWeight={500} color={'grayModern.900'}>
                 {t('capacity')}
               </Box>
-              <MyTooltip label={`${t('Storage Range')}: ${minVal}~20 Gi`}>
-                <NumberInput max={20} min={minVal} step={1} position={'relative'}>
+              <MyTooltip label={`${t('Storage Range')}: ${minVal}~${PVC_STORAGE_MAX} Gi`}>
+                <NumberInput max={PVC_STORAGE_MAX} min={minVal} step={1} position={'relative'}>
                   <Box
                     position={'absolute'}
                     right={10}
@@ -111,12 +112,12 @@ const StoreModal = ({
                         message: `${t('Min Storage Value')} ${minVal} Gi`
                       },
                       max: {
-                        value: 20,
-                        message: `${t('Max Storage Value')} 20 Gi`
+                        value: PVC_STORAGE_MAX,
+                        message: `${t('Max Storage Value')} ${PVC_STORAGE_MAX} Gi`
                       },
                       valueAsNumber: true
                     })}
-                    max={20}
+                    max={PVC_STORAGE_MAX}
                   />
                   <NumberInputStepper>
                     <NumberIncrementStepper />

diff --git a/frontend/providers/applaunchpad/src/store/static.ts b/frontend/providers/applaunchpad/src/store/static.ts
@@ -9,6 +9,7 @@ export let SHOW_EVENT_ANALYZE = false;
 export let CURRENCY = Coin.shellCoin;
 export let UPLOAD_LIMIT = 50;
 export let DOWNLOAD_LIMIT = 100;
+export let PVC_STORAGE_MAX = 20;
 
 export const loadInitData = async () => {
   try {
@@ -21,6 +22,7 @@ export const loadInitData = async () => {
     UPLOAD_LIMIT = res.fileMangerConfig.uploadLimit;
     DOWNLOAD_LIMIT = res.fileMangerConfig.downloadLimit;
     DESKTOP_DOMAIN = res.DESKTOP_DOMAIN;
+    PVC_STORAGE_MAX = res.PVC_STORAGE_MAX;
 
     return {
       SEALOS_DOMAIN,

diff --git a/frontend/providers/applaunchpad/src/types/index.d.ts b/frontend/providers/applaunchpad/src/types/index.d.ts
@@ -41,6 +41,7 @@ export type AppConfigType = {
   };
   launchpad: {
     currencySymbol: Coin;
+    pvcStorageMax: number;
     eventAnalyze: {
       enabled: boolean;
       fastGPTKey?: string;

diff --git a/frontend/providers/dbprovider/.vscode/settings.json b/frontend/providers/dbprovider/.vscode/settings.json
@@ -17,7 +17,6 @@
   "i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
   "i18n-ally.extract.targetPickingStrategy": "most-similar-by-key",
   "i18n-ally.translate.engines": [
-    "deepl",
     "google",
   ]
 }
diff --git a/frontend/providers/dbprovider/public/locales/en/common.json b/frontend/providers/dbprovider/public/locales/en/common.json
@@ -40,7 +40,7 @@
   "Running": "Running",
   "Saturday": "Sat",
   "Save": "Save",
-  "SaveTime": "Retention Period",
+  "SaveTime": "Retention",
   "Start": "Start",
   "Starting": "Starting",
   "Success": "succeeded",
@@ -80,6 +80,7 @@
   "backup_name_cannot_empty": "Must provide backup name",
   "backup_processing": "Saving Backup",
   "backup_running": "Saving Backup",
+  "backup_settings": "Backup",
   "backup_success_tip": "The backup task has been successfully created",
   "backup_time": "Backup Timestamp",
   "balance": "balance",
@@ -117,7 +118,7 @@
   "copy_success": "Copy succeeded",
   "covering_risks": "Coverage Risks",
   "cpu": "CPU",
-  "create_db": "Create New Database",
+  "create_db": "Create Database",
   "creation_time": "Creation Time",
   "current_connections": "Current Connections",
   "data_migration_config": "Data Migration Settings",
@@ -129,6 +130,7 @@
   "database_name": "Database Name",
   "database_name_cannot_empty": "Database name cannot be empty",
   "database_name_empty": "Application name is required",
+  "database_name_max_length": "Database name length cannot exceed {{length}} characters",
   "database_name_regex": "Start with a letter, only allow lowercase letters, numbers and -",
   "database_name_regex_error": "Database name can only contain lowercase letters, numbers, -, and must start with a letter.",
   "database_password_empty": "Please enter the database password",
@@ -201,6 +203,7 @@
   "guide_terminal_button": "Convenient terminal connection method improves data processing efficiency",
   "have_error": "Failed",
   "hits_ratio": "Hits Ratio",
+  "hour": "hour",
   "import_through_file": "Import via File",
   "important_tips_for_migrating": "Tip: Create a new database in sink DB if source_database and sink_database have overlapping data, to avoid conflicts",
   "innodb_buffer_pool": "InnoDB Buffer Pool",
@@ -289,6 +292,7 @@
   "start_hour": "Hour",
   "start_minute": "Minute",
   "start_success": "Database started. Please wait...",
+  "start_time": "Start Time",
   "status": "Status",
   "storage": "Storage",
   "storage_cannot_empty": "Please specify storage size",
@@ -300,6 +304,8 @@
   "successfully_closed_external_network_access": "Internet access disabled",
   "table_locks": "Table-level locks",
   "terminated_logs": "Terminated logs",
+  "termination_policy": "Delete Policy",
+  "termination_policy_tip": "Whether to keep a backup when deleting the database",
   "total_price": "total_price",
   "total_price_tip": "The estimated cost does not include port fees and traffic fees, and is subject to actual usage.",
   "turn_on": "Enable",
@@ -317,5 +323,8 @@
   "within_5_minutes": "Within 5 minutes",
   "yaml_file": "YAML",
   "you_have_successfully_deployed_database": "You have successfully deployed and created a database!",
-  "database_name_max_length": "Database name length cannot exceed {{length}} characters"
+  "delete_backup_with_db": "Keep Backups",
+  "delete_backup_with_db_tip": "Delete the databases but leave the backups as they are",
+  "wipeout_backup_with_db": "Discard Backups",
+  "wipeout_backup_with_db_tip": "Delete the databases and the backups"
 }
diff --git a/frontend/providers/dbprovider/public/locales/zh/common.json b/frontend/providers/dbprovider/public/locales/zh/common.json
@@ -80,6 +80,7 @@
   "backup_name_cannot_empty": "备份名称不能为空",
   "backup_processing": "备份中",
   "backup_running": "备份中",
+  "backup_settings": "备份设置",
   "backup_success_tip": "备份任务已经成功创建",
   "backup_time": "备份时间",
   "balance": "余额",
@@ -129,6 +130,7 @@
   "database_name": "新数据库名",
   "database_name_cannot_empty": "数据库名称不能为空",
   "database_name_empty": "应用名称不能为空",
+  "database_name_max_length": "数据库名长度不能超过 {{length}} 个字符",
   "database_name_regex": "字母开头，仅能包含小写字母、数字和 -",
   "database_name_regex_error": "数据库名只能包含小写字母、数字和 -,并且字母开头。",
   "database_password_empty": "缺少数据库密码",
@@ -201,6 +203,7 @@
   "guide_terminal_button": "便捷的终端连接方式，提升数据处理效率",
   "have_error": "出现异常",
   "hits_ratio": "命中率",
+  "hour": "时",
   "import_through_file": "文件导入",
   "important_tips_for_migrating": "如果 source 数据库中 source_database 和 sink 数据库中 sink_database 的数据库有重叠，应该在sink 数据库中新建 database，以免出现数据重叠",
   "innodb_buffer_pool": "InnoDB 缓冲池",
@@ -246,6 +249,7 @@
   "migration_successful": "迁移成功",
   "migration_task_created_successfully": "迁移任务创建成功",
   "min_replicas": "实例数最小为: ",
+  "minute": "分",
   "monitor_list": "实时监控",
   "multi_replica_redis_tip": "Redis 多副本包含 HA 节点，请悉知，预估价格已包含 HA 节点费用",
   "name": "名字",
@@ -289,6 +293,7 @@
   "start_hour": "小时",
   "start_minute": "分钟",
   "start_success": "数据库启动成功，请等待",
+  "start_time": "开始时间",
   "status": "状态",
   "storage": "磁盘",
   "storage_cannot_empty": "容量不能为空",
@@ -300,6 +305,8 @@
   "successfully_closed_external_network_access": "已关闭外网访问",
   "table_locks": "表锁",
   "terminated_logs": "中断前",
+  "termination_policy": "删除策略",
+  "termination_policy_tip": "删除数据库时是否保留备份",
   "total_price": "总价",
   "total_price_tip": "预估费用不包括端口费用和流量费用,以实际使用为准",
   "turn_on": "开启",
@@ -317,5 +324,8 @@
   "within_5_minutes": "五分钟内",
   "yaml_file": "YAML 文件",
   "you_have_successfully_deployed_database": "您已成功部署创建一个数据库！",
-  "database_name_max_length": "数据库名长度不能超过 {{length}} 个字符"
+  "delete_backup_with_db": "保留备份",
+  "delete_backup_with_db_tip": "在删除数据库时，保留其备份",
+  "wipeout_backup_with_db": "随数据库删除",
+  "wipeout_backup_with_db_tip": "在删除数据库时，删除其备份"
 }
diff --git a/frontend/providers/dbprovider/src/api/backup.ts b/frontend/providers/dbprovider/src/api/backup.ts
@@ -4,20 +4,6 @@ import { adaptBackup, adaptBackupByCluster, adaptDBDetail } from '@/utils/adapt'
 import { AutoBackupFormType } from '@/types/backup';
 import type { Props as UpdatePolicyProps } from '@/pages/api/backup/updatePolicy';
 
-/**
- * Deprecated API: This endpoint is no longer supported.
- *
- * The new method for obtaining backup policies is by querying the 'cluster spec backup' endpoint
- * for the specific database in the cluster.
- *
- * To update the auto-backup policy, use the PATCH operation on the 'cluster spec backup' resource.
- * @deprecated
- * @param data - Object containing information about the database, including dbName and dbType.
- * @returns {Promise<AutoBackupFormType>} - A promise resolving to the auto-backup configuration form.
- */
-export const getBackupPolicy = (data: { dbName: string; dbType: string }) =>
-  GET<AutoBackupFormType>(`/api/backup/policy`, data);
-
 export const createBackup = (data: CreateBackupPros) => POST('/api/backup/create', data);
 
 export const getBackupList = (dbName: string) =>

diff --git a/frontend/providers/dbprovider/src/components/Icon/icons/backupSettings.svg b/frontend/providers/dbprovider/src/components/Icon/icons/backupSettings.svg
diff --git a/frontend/providers/dbprovider/src/components/Icon/index.tsx b/frontend/providers/dbprovider/src/components/Icon/index.tsx
@@ -53,6 +53,7 @@ const map = {
   import: require('./icons/import.svg').default,
   file: require('./icons/file.svg').default,
   config: require('./icons/config.svg').default,
+  backupSettings: require('./icons/backupSettings.svg').default,
   monitor: require('./icons/monitor.svg').default,
   arrowDown: require('./icons/arrowDown.svg').default,
   docs: require('./icons/docs.svg').default

diff --git a/frontend/providers/dbprovider/src/constants/db.ts b/frontend/providers/dbprovider/src/constants/db.ts
@@ -7,6 +7,7 @@ import {
   DBSourceType
 } from '@/types/db';
 import { CpuSlideMarkList, MemorySlideMarkList } from './editApp';
+import { I18nCommonKey } from '@/types/i18next';
 
 export const crLabelKey = 'sealos-db-provider-cr';
 export const CloudMigraionLabel = 'sealos-db-provider-cr-migrate';
@@ -270,7 +271,17 @@ export const defaultDBEditValue: DBEditType = {
   cpu: CpuSlideMarkList[1].value,
   memory: MemorySlideMarkList[1].value,
   storage: 3,
-  labels: {}
+  labels: {},
+  autoBackup: {
+    start: true,
+    type: 'day',
+    week: [],
+    hour: '23',
+    minute: '00',
+    saveTime: 7,
+    saveType: 'd'
+  },
+  terminationPolicy: 'Delete'
 };
 
 export const defaultDBDetail: DBDetailType = {
@@ -428,3 +439,28 @@ export const DBSourceConfigs: Array<{
   { key: templateDeployKey, type: 'app_store' },
   { key: sealafDeployKey, type: 'sealaf' }
 ];
+
+export const SelectTimeList = new Array(60).fill(0).map((item, i) => {
+  const val = i < 10 ? `0${i}` : `${i}`;
+  return {
+    id: val,
+    label: val
+  };
+});
+
+export const WeekSelectList: { label: I18nCommonKey; id: string }[] = [
+  { label: 'Monday', id: '1' },
+  { label: 'Tuesday', id: '2' },
+  { label: 'Wednesday', id: '3' },
+  { label: 'Thursday', id: '4' },
+  { label: 'Friday', id: '5' },
+  { label: 'Saturday', id: '6' },
+  { label: 'Sunday', id: '0' }
+];
+
+export const BackupSupportedDBTypeList: DBType[] = [
+  'postgresql',
+  'mongodb',
+  'apecloud-mysql',
+  'redis'
+];
diff --git a/frontend/providers/dbprovider/src/constants/theme.ts b/frontend/providers/dbprovider/src/constants/theme.ts
@@ -1,5 +1,35 @@
 import { extendTheme } from '@chakra-ui/react';
 import { theme as SealosTheme } from '@sealos/ui';
+import { checkboxAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
+  checkboxAnatomy.keys
+);
+
+const checkbox = defineMultiStyleConfig({
+  baseStyle: {
+    control: {
+      borderWidth: '1px',
+      borderRadius: '4px',
+      _checked: {
+        bg: '#F0FBFF',
+        borderColor: '#219BF4',
+        boxShadow: ' 0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)',
+        _hover: {
+          bg: '#F0FBFF',
+          borderColor: '#219BF4'
+        }
+      },
+      _hover: {
+        bg: 'transparent'
+      }
+    },
+    icon: {
+      color: '#219BF4'
+    }
+  }
+});
 
 export const theme = extendTheme(SealosTheme, {
   styles: {
@@ -13,5 +43,6 @@ export const theme = extendTheme(SealosTheme, {
         minWidth: '700px'
       }
     }
-  }
+  },
+  components: { Checkbox: checkbox }
 });