From 4593351cf33e00a3cdd9bf3dbed0765f92c11d2d Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Mon, 30 May 2022 19:28:36 +0800
Subject: [PATCH] [Fix][UI] Display the result page when the DB page has no
 data. (#10298)

(cherry picked from commit 2e6d3f5190f5ce576094d6d5ea294f118be66ed3)
---
 dolphinscheduler-ui/src/locales/en_US/monitor.ts       |  5 ++++-
 dolphinscheduler-ui/src/locales/zh_CN/monitor.ts       |  5 ++++-
 .../src/views/monitor/servers/db/index.tsx             | 10 +++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/dolphinscheduler-ui/src/locales/en_US/monitor.ts b/dolphinscheduler-ui/src/locales/en_US/monitor.ts
index d94d6e913c..85d2f13834 100644
--- a/dolphinscheduler-ui/src/locales/en_US/monitor.ts
+++ b/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:
diff --git a/dolphinscheduler-ui/src/locales/zh_CN/monitor.ts b/dolphinscheduler-ui/src/locales/zh_CN/monitor.ts
index 4b2b4f0c67..62fd110b1a 100644
--- a/dolphinscheduler-ui/src/locales/zh_CN/monitor.ts
+++ b/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: '待执行的命令数',
diff --git a/dolphinscheduler-ui/src/views/monitor/servers/db/index.tsx b/dolphinscheduler-ui/src/views/monitor/servers/db/index.tsx
index ed20f667bd..0338eb987b 100644
--- a/dolphinscheduler-ui/src/views/monitor/servers/db/index.tsx
+++ b/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')}>