[Fix][UI] Display the result page when the DB page has no data. (#10298)

(cherry picked from commit 2e6d3f51)

dolphinscheduler-ui/src/locales/en_US/monitor.ts

@@ -46,7 +46,10 @@ export default {
     health_state: 'Health State',
     max_connections: 'Max Connections',
     threads_connections: 'Threads Connections',
-    threads_running_connections: 'Threads Running Connections'
+    threads_running_connections: 'Threads Running Connections',
+    db_no_data_result_title: 'No DB Nodes Exist',
+    db_no_data_result_desc:
+      'Currently, there are no DB nodes exist, please create a DB node and refresh this page'
   },
   statistics: {
     command_number_of_waiting_for_running:

dolphinscheduler-ui/src/locales/zh_CN/monitor.ts

@@ -46,7 +46,10 @@ export default {
     health_state: '健康状态',
     max_connections: '最大连接数',
     threads_connections: '当前连接数',
-    threads_running_connections: '数据库当前活跃连接数'
+    threads_running_connections: '数据库当前活跃连接数',
+    db_no_data_result_title: 'DB节点不存在',
+    db_no_data_result_desc:
+      '目前没有任何DB节点，请先创建DB节点，再访问该页面'
   },
   statistics: {
     command_number_of_waiting_for_running: '待执行的命令数',

dolphinscheduler-ui/src/views/monitor/servers/db/index.tsx

@@ -21,6 +21,7 @@ import { useI18n } from 'vue-i18n'
 import { useDatabase } from '@/views/monitor/servers/db/use-database'
 import { CheckCircleOutlined, CloseCircleOutlined } from '@vicons/antd'
 import Card from '@/components/card'
+import Result from '@/components/result'
 import styles from './index.module.scss'
 import type { Ref } from 'vue'
 import type { DatabaseRes } from '@/service/modules/monitor/types'
@@ -37,7 +38,14 @@ const db = defineComponent({
   render() {
     const { t, databaseRef } = this
 
-    return (
+    return databaseRef.length < 1 ? (
+      <Result
+        title={t('monitor.db.db_no_data_result_title')}
+        description={t('monitor.db.db_no_data_result_desc')}
+        status={'info'}
+        size={'medium'}
+      />
+    ) : (
       <NGrid x-gap='12' y-gap='8' cols='2 2xl:4' responsive='screen'>
         <NGi>
           <Card title={t('monitor.db.health_state')}>