[Fix-16903] Fix monitor page cannot display well

Author: ruanwenjun

dolphinscheduler-api/src/main/java/org/apache/dolphinscheduler/api/controller/MonitorController.java

@@ -65,7 +65,7 @@ public class MonitorController extends BaseController {
     @ResponseStatus(HttpStatus.OK)
     @ApiException(LIST_MASTERS_ERROR)
     public Result<List<Server>> listServer(@PathVariable("nodeType") RegistryNodeType nodeType) {
-        List<Server> servers = monitorService.listServer(nodeType);
+        final List<Server> servers = monitorService.listServer(nodeType);
         return Result.success(servers);
     }
 

dolphinscheduler-meter/src/main/java/org/apache/dolphinscheduler/meter/metrics/DefaultMetricsProvider.java

@@ -65,6 +65,9 @@ public SystemMetrics getSystemMetrics() {
         long totalSystemMemory = OSUtils.getTotalSystemMemory();
         long systemMemoryAvailable = OSUtils.getSystemAvailableMemoryUsed();
 
+        double diskToTalBytes = meterRegistry.get("disk.total").gauge().value();
+        double diskFreeBytes = meterRegistry.get("disk.free").gauge().value();
+
         systemMetrics = SystemMetrics.builder()
                 .systemCpuUsagePercentage(systemCpuUsage)
                 .jvmCpuUsagePercentage(processCpuUsage)
@@ -74,6 +77,9 @@ public SystemMetrics getSystemMetrics() {
                 .systemMemoryUsed(totalSystemMemory - systemMemoryAvailable)
                 .systemMemoryMax(totalSystemMemory)
                 .systemMemoryUsedPercentage((double) (totalSystemMemory - systemMemoryAvailable) / totalSystemMemory)
+                .diskUsed(diskToTalBytes - diskFreeBytes)
+                .diskTotal(diskToTalBytes)
+                .diskUsedPercentage((diskToTalBytes - diskFreeBytes) / diskToTalBytes)
                 .build();
         lastRefreshTime = System.currentTimeMillis();
         return systemMetrics;

dolphinscheduler-registry/dolphinscheduler-registry-plugins/dolphinscheduler-registry-jdbc/src/main/java/org/apache/dolphinscheduler/plugin/registry/jdbc/server/JdbcRegistryDataManager.java

@@ -147,12 +147,12 @@ public Optional<JdbcRegistryDataDTO> getRegistryDataByKey(String key) {
     }
 
     @Override
-    public List<JdbcRegistryDataDTO> listJdbcRegistryDataChildren(String key) {
+    public List<JdbcRegistryDataDTO> listJdbcRegistryDataChildren(final String key) {
         checkNotNull(key);
+        final String keyAbsolutePath = key.endsWith("/") ? key : key + "/";
         return jdbcRegistryDataRepository.selectAll()
                 .stream()
-                .filter(jdbcRegistryDataDTO -> jdbcRegistryDataDTO.getDataKey().startsWith(key)
-                        && !jdbcRegistryDataDTO.getDataKey().equals(key))
+                .filter(jdbcRegistryDataDTO -> jdbcRegistryDataDTO.getDataKey().startsWith(keyAbsolutePath))
                 .collect(Collectors.toList());
     }
 

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

@@ -19,8 +19,7 @@ export default {
   master: {
     cpu_usage: 'CPU Usage',
     memory_usage: 'Memory Usage',
-    disk_available: 'Disk Available',
-    load_average: 'Load Average',
+    disk_usage: 'Disk Usage',
     create_time: 'Create Time',
     last_heartbeat_time: 'Last Heartbeat Time',
     directory_detail: 'Directory Detail',
@@ -33,8 +32,7 @@ export default {
   worker: {
     cpu_usage: 'CPU Usage',
     memory_usage: 'Memory Usage',
-    disk_available: 'Disk Available',
-    load_average: 'Load Average',
+    disk_usage: 'Disk Usage',
     thread_pool_usage: 'Thread Pool Usage',
     create_time: 'Create Time',
     last_heartbeat_time: 'Last Heartbeat Time',

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

@@ -19,8 +19,7 @@ export default {
   master: {
     cpu_usage: '处理器使用量',
     memory_usage: '内存使用量',
-    disk_available: '磁盘可用容量',
-    load_average: '平均负载量',
+    disk_usage: '磁盘使用量',
     create_time: '创建时间',
     last_heartbeat_time: '最后心跳时间',
     directory_detail: '目录详情',
@@ -33,8 +32,7 @@ export default {
   worker: {
     cpu_usage: '处理器使用量',
     memory_usage: '内存使用量',
-    disk_available: '磁盘可用容量',
-    load_average: '平均负载量',
+    disk_usage: '磁盘使用量',
     thread_pool_usage: '线程池使用量',
     create_time: '创建时间',
     last_heartbeat_time: '最后心跳时间',

dolphinscheduler-ui/src/service/modules/monitor/types.ts

@@ -31,8 +31,8 @@ interface ServerNode {
   id: number
   host: string
   port: number
-  zkDirectory: string
-  resInfo: string
+  serverDirectory: string
+  heartBeatInfo: string
   createTime: string
   lastHeartbeatTime: string
 }

dolphinscheduler-ui/src/views/monitor/servers/alert_server/index.module.scss

@@ -27,11 +27,6 @@
   @include base;
 }
 
-.load-average {
-  @include base;
-  color: var(--n-color-target);
-}
-
 .link-btn {
   color: var(--n-color-target);
   cursor: pointer;

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

@@ -16,7 +16,7 @@
  */
 
 import { defineComponent, onMounted, ref, toRefs } from 'vue'
-import { NGrid, NGi, NCard, NNumberAnimation, NSpace, NTag } from 'naive-ui'
+import { NGrid, NGi, NCard, NSpace, NTag } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useServerNode } from './use-server-node'
 import styles from './index.module.scss'
@@ -64,7 +64,7 @@ const alertServer = defineComponent({
       this
 
     const renderNodeServerStatusTag = (item: AlertNode) => {
-      const serverStatus = JSON.parse(item.resInfo)?.serverStatus
+      const serverStatus = JSON.parse(item.heartBeatInfo)?.serverStatus
 
       if (!serverStatus) return ''
 
@@ -103,7 +103,7 @@ const alertServer = defineComponent({
                       }`}</span>
                       <span
                         class={styles['link-btn']}
-                        onClick={() => clickDetails(item.zkDirectory)}
+                        onClick={() => clickDetails(item.serverDirectory)}
                       >
                         {t('monitor.master.directory_detail')}
                       </span>
@@ -125,7 +125,7 @@ const alertServer = defineComponent({
                         {item && (
                           <Gauge
                             data={(
-                              JSON.parse(item.resInfo).cpuUsage * 100
+                              JSON.parse(item.heartBeatInfo).cpuUsage * 100
                             ).toFixed(2)}
                           />
                         )}
@@ -138,34 +138,21 @@ const alertServer = defineComponent({
                         {item && (
                           <Gauge
                             data={(
-                              JSON.parse(item.resInfo).memoryUsage * 100
+                              JSON.parse(item.heartBeatInfo).memoryUsage * 100
                             ).toFixed(2)}
                           />
                         )}
                       </div>
                     </Card>
                   </NGi>
                   <NGi>
-                    <Card title={t('monitor.master.disk_available')}>
-                      <div class={[styles.card, styles['load-average']]}>
+                    <Card title={t('monitor.master.disk_usage')}>
+                      <div class={[styles.card]}>
                         {item && (
-                          <NNumberAnimation
-                            precision={2}
-                            from={0}
-                            to={JSON.parse(item.resInfo).diskAvailable}
-                          />
-                        )}
-                      </div>
-                    </Card>
-                  </NGi>
-                  <NGi>
-                    <Card title={t('monitor.master.load_average')}>
-                      <div class={[styles.card, styles['load-average']]}>
-                        {item && (
-                          <NNumberAnimation
-                            precision={2}
-                            from={0}
-                            to={JSON.parse(item.resInfo).loadAverage}
+                          <Gauge
+                            data={(
+                              JSON.parse(item.heartBeatInfo).diskUsage * 100
+                            ).toFixed(2)}
                           />
                         )}
                       </div>

dolphinscheduler-ui/src/views/monitor/servers/master/index.module.scss

@@ -27,11 +27,6 @@
   @include base;
 }
 
-.load-average {
-  @include base;
-  color: var(--n-color-target);
-}
-
 .link-btn {
   color: var(--n-color-target);
   cursor: pointer;

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

@@ -16,7 +16,7 @@
  */
 
 import { defineComponent, onMounted, ref, toRefs } from 'vue'
-import { NGrid, NGi, NCard, NNumberAnimation, NSpace, NTag } from 'naive-ui'
+import { NGrid, NGi, NCard, NSpace, NTag } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useMaster } from './use-master'
 import styles from './index.module.scss'
@@ -64,7 +64,7 @@ const master = defineComponent({
       this
 
     const renderNodeServerStatusTag = (item: MasterNode) => {
-      const serverStatus = JSON.parse(item.resInfo)?.serverStatus
+      const serverStatus = JSON.parse(item.heartBeatInfo)?.serverStatus
 
       if (!serverStatus) return ''
 
@@ -103,7 +103,7 @@ const master = defineComponent({
                       }`}</span>
                       <span
                         class={styles['link-btn']}
-                        onClick={() => clickDetails(item.zkDirectory)}
+                        onClick={() => clickDetails(item.serverDirectory)}
                       >
                         {t('monitor.master.directory_detail')}
                       </span>
@@ -125,7 +125,7 @@ const master = defineComponent({
                         {item && (
                           <Gauge
                             data={(
-                              JSON.parse(item.resInfo).cpuUsage * 100
+                              JSON.parse(item.heartBeatInfo).cpuUsage * 100
                             ).toFixed(2)}
                           />
                         )}
@@ -138,34 +138,21 @@ const master = defineComponent({
                         {item && (
                           <Gauge
                             data={(
-                              JSON.parse(item.resInfo).memoryUsage * 100
+                              JSON.parse(item.heartBeatInfo).memoryUsage * 100
                             ).toFixed(2)}
                           />
                         )}
                       </div>
                     </Card>
                   </NGi>
                   <NGi>
-                    <Card title={t('monitor.master.disk_available')}>
-                      <div class={[styles.card, styles['load-average']]}>
+                    <Card title={t('monitor.master.disk_usage')}>
+                      <div class={[styles.card]}>
                         {item && (
-                          <NNumberAnimation
-                            precision={2}
-                            from={0}
-                            to={JSON.parse(item.resInfo).diskAvailable}
-                          />
-                        )}
-                      </div>
-                    </Card>
-                  </NGi>
-                  <NGi>
-                    <Card title={t('monitor.master.load_average')}>
-                      <div class={[styles.card, styles['load-average']]}>
-                        {item && (
-                          <NNumberAnimation
-                            precision={2}
-                            from={0}
-                            to={JSON.parse(item.resInfo).loadAverage}
+                          <Gauge
+                            data={(
+                              JSON.parse(item.heartBeatInfo).diskUsage * 100
+                            ).toFixed(2)}
                           />
                         )}
                       </div>