feat: database UI 2.0 (labring#5293)

* refactor: restructure database list component * bakups * update create db * update backups * update backups * fix launchpad status * overview * update data import * update * update styles * update app window * add icons page * update * update common.json * update td
bearslyricattack · Dec 20, 2024 · c7a8673 · c7a8673
1 parent 95ed066
commit c7a8673
Show file tree

Hide file tree

Showing 52 changed files with 1,596 additions and 687 deletions.
diff --git a/frontend/desktop/src/components/app_window/index.module.scss b/frontend/desktop/src/components/app_window/index.module.scss
@@ -34,15 +34,15 @@
 
   &[data-size='maxmin'] {
     top: 10%;
-    left: 20%;
-    width: 60%;
+    left: 15%;
+    width: 70%;
     height: 80%;
   }
 
   &[data-size='minimize'] {
     top: 10%;
-    left: 20%;
-    width: 60%;
+    left: 15%;
+    width: 70%;
     height: 80%;
     transform: scale(0.1) translate(0, 0) !important;
     transform-origin: bottom;

diff --git a/frontend/desktop/src/components/app_window/index.tsx b/frontend/desktop/src/components/app_window/index.tsx
@@ -47,10 +47,10 @@ export default function AppWindow(props: {
       setPosition({
         x:
           x < 0
-            ? x < -1.1 * appHeaderWidth // (0.8width + width/0.6*0.2)
+            ? x < -0.9 * appHeaderWidth // (0.8width + width/0.70*0.15)
               ? 0
               : x
-            : x > 1.1 * appHeaderWidth
+            : x > 0.9 * appHeaderWidth
             ? 0
             : x,
         y: y < upperBoundary ? upperBoundary : y > lowerBoundary ? 0 : y
@@ -92,7 +92,7 @@ export default function AppWindow(props: {
         <Flex
           cursor={'pointer'}
           h="28px"
-          background={'#F7F8FA'}
+          background={'grayModern.100'}
           className={'windowHeader'}
           borderRadius={'6px 6px 0 0'}
           onClick={() => {

diff --git a/frontend/providers/applaunchpad/src/utils/adapt.ts b/frontend/providers/applaunchpad/src/utils/adapt.ts
@@ -126,16 +126,16 @@ export const adaptPod = (pod: V1Pod): PodDetailType => {
       if (container.length > 0) {
         const stateObj = container[0].state;
         if (stateObj) {
-          const stateKeys = Object.keys(stateObj);
-          const key = stateKeys[0] as `${PodStatusEnum}`;
-          if (key === PodStatusEnum.running) {
-            return podStatusMap[PodStatusEnum.running];
-          }
-          if (key && podStatusMap[key]) {
-            return {
-              ...podStatusMap[key],
-              ...stateObj[key]
-            };
+          const status = [
+            PodStatusEnum.running,
+            PodStatusEnum.terminated,
+            PodStatusEnum.waiting
+          ].find((s) => stateObj[s]);
+
+          if (status) {
+            return status === PodStatusEnum.running
+              ? podStatusMap[PodStatusEnum.running]
+              : { ...podStatusMap[status], ...stateObj[status] };
           }
         }
       }
@@ -146,13 +146,16 @@ export const adaptPod = (pod: V1Pod): PodDetailType => {
       if (container.length > 0) {
         const lastStateObj = container[0].lastState;
         if (lastStateObj) {
-          const lastStateKeys = Object.keys(lastStateObj);
-          const key = lastStateKeys[0] as `${PodStatusEnum}`;
-          if (key && podStatusMap[key]) {
-            return {
-              ...podStatusMap[key],
-              ...lastStateObj[key]
-            };
+          const status = [
+            PodStatusEnum.running,
+            PodStatusEnum.terminated,
+            PodStatusEnum.waiting
+          ].find((s) => lastStateObj[s]);
+
+          if (status) {
+            return status === PodStatusEnum.running
+              ? podStatusMap[PodStatusEnum.running]
+              : { ...podStatusMap[status], ...lastStateObj[status] };
           }
         }
       }

diff --git a/frontend/providers/dbprovider/public/locales/en/common.json b/frontend/providers/dbprovider/public/locales/en/common.json
@@ -7,8 +7,8 @@
   "Continue": "Continue",
   "Creating": "Creating",
   "CronExpression": "Cycle Interval",
-  "DBList": "DataBases",
-  "DataBase": "DataBase",
+  "DBList": "Database",
+  "DataBase": "Database",
   "Day": "Day",
   "Delete": "Delete",
   "Deleting": "Deleting...",
@@ -66,16 +66,18 @@
     "storage_exceeds_quota": "Storage requested exceeds quota. Contact admin."
   },
   "app_store": "App Store",
-  "application_source": "Application Source",
+  "application_source": "Source",
   "are_you_sure_to_perform_database_migration": "Confirm database migration?",
   "are_you_sure_you_want_to_turn_off_automatic_backup": "Confirm disabling auto backup?",
   "auto_backup": "Automated Backup",
   "automatic_backup_is_turned_off": "Auto backup disabled",
+  "backup_center": "Backup Center",
+  "backup_center_search_tip": "Search backup name, notes",
   "backup_completed": "Backup completed",
   "backup_database": "Backup Database",
   "backup_deleting": "Purging Backup",
   "backup_failed": "Backup Failed",
-  "backup_list": "Data Backups",
+  "backup_list": "Backups",
   "backup_name": "Backup Name",
   "backup_name_cannot_empty": "Must provide backup name",
   "backup_processing": "Saving Backup",
@@ -121,6 +123,7 @@
   "create_db": "Create Database",
   "creation_time": "Creation Time",
   "current_connections": "Current Connections",
+  "data_import": "Data Import",
   "data_migration_config": "Data Migration Settings",
   "database_config": "parameters",
   "database_edit_config": "Update Parameters",
@@ -142,15 +145,15 @@
   "db_name": "DataBase Name",
   "db_table": "DataBase Table",
   "dbconfig": {
-    "change_history": "Modification history",
+    "change_history": "Modification History",
     "commit": "submit",
     "confirm_updates": "Please confirm the parameters you modified:",
     "get_config_err": "Failed to obtain configuration file",
     "modified_value": "Modify value",
     "modify_time": "Modify Time",
     "no_changes": "No modification yet",
     "original_value": "Original value",
-    "parameter": "Parameter Config",
+    "parameter": "Parameters",
     "parameter_name": "parameter name",
     "parameter_value": "Parameter value",
     "prompt": "Change notice",
@@ -161,6 +164,8 @@
   },
   "delete_anyway": "Force Delete",
   "delete_backup": "Delete Backup",
+  "delete_backup_with_db": "Keep Backups",
+  "delete_backup_with_db_tip": "Delete the databases but leave the backups as they are",
   "delete_failed": "Failed to delete",
   "delete_hint": "Warning: This will permanently delete all data in the database. Confirm to proceed.",
   "delete_sealaf_app_tip": "The database is deployed via cloud development. \nSimply deleting the database does not clear out all components of your app, which may still incur charges. \nTo completely uninstall the app and clean all related components, uninstall the entire app in cloud development.",
@@ -178,7 +183,7 @@
   "enable_external_network_access": "Allow public network access",
   "enter_save": "Press Enter to save. 'All' exports the entire database.",
   "error_log": {
-    "analysis": "Log Analysis",
+    "analysis": "Logs",
     "collection_time": "Collection Time",
     "content": "Information",
     "error_log": "Error Log",
@@ -204,7 +209,7 @@
   "have_error": "Failed",
   "hits_ratio": "Hits Ratio",
   "hour": "hour",
-  "import_through_file": "Import via File",
+  "import_through_file": "File Import",
   "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",
   "intranet_address": "Private Address",
@@ -215,7 +220,7 @@
   "limit_cpu": "CPU Limit",
   "limit_memory": "Memory Limit",
   "lost_file": "File Missing",
-  "manage_all_resources": "Manage all resources",
+  "manage_all_resources": "Manage",
   "manual_backup": "Manual Backup",
   "manual_backup_tip": "Tip: Backup during off-peak hours. Avoid DDL operations to prevent locking. Be patient if data size is large. Backup starts 1 min after confirmation.",
   "max_replicas": "Max Replicas: ",
@@ -255,8 +260,9 @@
   "no_data_available": "No Data Available",
   "no_logs_for_now": "No logs for now",
   "not_allow_standalone_use": "This application is not allowed to be used alone. Click OK to go to Sealos Desktop for use.",
-  "online_import": "Import Online",
+  "online_import": "Online Import",
   "operation": "Operation",
+  "overview": "Overview",
   "page_faults": "Page Faults",
   "pause_error": "Failed to pause the database",
   "pause_hint": "Pausing the service will stop the calculation of charges for CPU and memory, but charges for storage and external network ports will still apply. Would you like to pause now?",
@@ -318,13 +324,11 @@
   "upload_dump_file": "Upload Dump File",
   "use_docs": "Documentation",
   "version": "Version",
+  "wipeout_backup_with_db": "Discard Backups",
+  "wipeout_backup_with_db_tip": "Delete the databases and the backups",
   "within_1_day": "Within 1 day",
   "within_1_hour": "Within 1 hour",
   "within_5_minutes": "Within 5 minutes",
   "yaml_file": "YAML",
-  "you_have_successfully_deployed_database": "You have successfully deployed and created a database!",
-  "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"
+  "you_have_successfully_deployed_database": "You have successfully deployed and created a database!"
 }
diff --git a/frontend/providers/dbprovider/public/locales/zh/common.json b/frontend/providers/dbprovider/public/locales/zh/common.json
@@ -66,11 +66,13 @@
     "storage_exceeds_quota": "申请的 '存储' 超出限制，请联系管理员"
   },
   "app_store": "应用商店",
-  "application_source": "应用来源",
+  "application_source": "来源",
   "are_you_sure_to_perform_database_migration": "确定执行数据库迁移吗?",
   "are_you_sure_you_want_to_turn_off_automatic_backup": "确定关闭自动备份吗",
   "auto_backup": "自动备份",
   "automatic_backup_is_turned_off": "已关闭自动备份",
+  "backup_center": "备份中心",
+  "backup_center_search_tip": "搜索备份名称、备注",
   "backup_completed": "备份成功",
   "backup_database": "备份数据库",
   "backup_deleting": "删除中",
@@ -84,7 +86,7 @@
   "backup_success_tip": "备份任务已经成功创建",
   "backup_time": "备份时间",
   "balance": "余额",
-  "basic": "基础配置",
+  "basic": "基础信息",
   "billing_standards": "计费标准",
   "block_read_time": "读数据块时间",
   "block_write_time": "写数据块时间",
@@ -118,9 +120,10 @@
   "copy_success": "复制成功",
   "covering_risks": "覆盖风险",
   "cpu": "CPU",
-  "create_db": "新建数据库",
+  "create_db": "新建",
   "creation_time": "创建时间",
   "current_connections": "当前连接数",
+  "data_import": "数据导入",
   "data_migration_config": "数据迁移配置",
   "database_config": "数据库参数",
   "database_edit_config": "变更参数",
@@ -161,6 +164,8 @@
   },
   "delete_anyway": "仍要删除",
   "delete_backup": "删除备份",
+  "delete_backup_with_db": "保留备份",
+  "delete_backup_with_db_tip": "在删除数据库时，保留其备份",
   "delete_failed": "删除出现意外",
   "delete_hint": "如果确认要删除这个数据库吗？如果执行此操作，将删除该数据库的所有数据。",
   "delete_sealaf_app_tip": "该数据库是通过云开发部署的。仅删除数据库无法清除应用的所有组件，这些组件可能仍会产生费用。要彻底卸载应用并清理所有相关组件，请在云开发中卸载整个应用。",
@@ -258,6 +263,7 @@
   "not_allow_standalone_use": "该应用不允许单独使用，点击确认前往 Sealos Desktop 使用。",
   "online_import": "在线导入",
   "operation": "操作",
+  "overview": "概览",
   "page_faults": "页错误",
   "pause_error": "数据库暂停失败",
   "pause_hint": "暂停服务将停止计算 CPU 和内存等费用，但存储和外网端口仍将产生费用。是否现在暂停？",
@@ -319,13 +325,11 @@
   "upload_dump_file": "点击上传 Dump 文件",
   "use_docs": "使用文档",
   "version": "版本",
+  "wipeout_backup_with_db": "随数据库删除",
+  "wipeout_backup_with_db_tip": "在删除数据库时，删除其备份",
   "within_1_day": "一天内",
   "within_1_hour": "一小时内",
   "within_5_minutes": "五分钟内",
   "yaml_file": "YAML 文件",
-  "you_have_successfully_deployed_database": "您已成功部署创建一个数据库！",
-  "delete_backup_with_db": "保留备份",
-  "delete_backup_with_db_tip": "在删除数据库时，保留其备份",
-  "wipeout_backup_with_db": "随数据库删除",
-  "wipeout_backup_with_db_tip": "在删除数据库时，删除其备份"
-}
+  "you_have_successfully_deployed_database": "您已成功部署创建一个数据库！"
+}
diff --git a/frontend/providers/dbprovider/src/api/backup.ts b/frontend/providers/dbprovider/src/api/backup.ts
@@ -3,12 +3,15 @@ import type { Props as CreateBackupPros } from '@/pages/api/backup/create';
 import { adaptBackup, adaptBackupByCluster, adaptDBDetail } from '@/utils/adapt';
 import { AutoBackupFormType } from '@/types/backup';
 import type { Props as UpdatePolicyProps } from '@/pages/api/backup/updatePolicy';
+import { BackupItemType } from '@/types/db';
 
 export const createBackup = (data: CreateBackupPros) => POST('/api/backup/create', data);
 
 export const getBackupList = (dbName: string) =>
   GET('/api/backup/getBackupList', { dbName }).then((res) => res.map(adaptBackup));
 
+export const getBackups = () => GET<BackupItemType[]>('/api/backup/getBackups');
+
 export const deleteBackup = (backupName: string) =>
   DELETE(`/api/backup/delBackup?backupName=${backupName}`);