From eb89e8a0be225eb1d0a1edda454852c600cfebab Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Thu, 26 Jun 2025 23:34:15 +0800 Subject: [PATCH] update jvm page --- src/pages/JVM/index.js | 236 ++++++++++++++++++++++++++++++++++++ src/routes/GLDUserRoutes.js | 6 + src/routes/LoginRoutes.js | 2 - 3 files changed, 242 insertions(+), 2 deletions(-) create mode 100644 src/pages/JVM/index.js diff --git a/src/pages/JVM/index.js b/src/pages/JVM/index.js new file mode 100644 index 0000000..561b6d8 --- /dev/null +++ b/src/pages/JVM/index.js @@ -0,0 +1,236 @@ +// import { useState } from 'react'; + +// material-ui +import { + Grid, + Typography, + Stack +} from '@mui/material'; +import * as React from "react"; + +import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' +// ==============================|| DASHBOARD - DEFAULT ||============================== // + +const JVMDefault = () => { + // const userData = JSON.parse(localStorage.getItem("userData")); + + React.useEffect(() => { + localStorage.setItem('searchCriteria',"") + }, []) + + const BackgroundHead = { + backgroundImage: `url(${titleBackgroundImg})`, + width: '100%', + height: '100%', + backgroundSize:'contain', + backgroundRepeat: 'no-repeat', + backgroundColor: '#0C489E', + backgroundPosition: 'right' + } + + const htmlContent = ` + +
+

Certainly! Here's the complete implementation, showing both the updated Java controller to provide JVM + information in MB, and the corresponding UI code that will display the information. +

+

Step 1: Java Code (Controller)

+

This Spring Boot controller exposes the JVM information (including heap memory usage, operating system + details, and uptime) in MB, and it provides it via a REST API (/jvm-info). +

+ 

+        import org.springframework.web.bind.annotation.GetMapping;
+        import org.springframework.web.bind.annotation.RestController;
+
+        import java.lang.management.ManagementFactory;
+        import java.lang.management.MemoryMXBean;
+        import java.lang.management.MemoryUsage;
+        import java.lang.management.OperatingSystemMXBean;
+        import java.util.HashMap;
+        import java.util.Map;
+
+        @RestController
+        public class JvmInfoController {
+
+            @GetMapping("/jvm-info")
+            public Map getJvmInfo() {
+                Map jvmInfo = new HashMap<>();
+
+                // Get the Operating System MXBean for system-related info
+                OperatingSystemMXBean osBean = ManagementFactory.getOperatingSystemMXBean();
+                jvmInfo.put("osName", osBean.getName());
+                jvmInfo.put("osVersion", osBean.getVersion());
+                jvmInfo.put("osArch", osBean.getArch());
+
+                // Get memory info and convert bytes to MB
+                MemoryMXBean memoryBean = ManagementFactory.getMemoryMXBean();
+                MemoryUsage heapMemoryUsage = memoryBean.getHeapMemoryUsage();
+                jvmInfo.put("heapMemoryInitMB", bytesToMB(heapMemoryUsage.getInit()));
+                jvmInfo.put("heapMemoryUsedMB", bytesToMB(heapMemoryUsage.getUsed()));
+                jvmInfo.put("heapMemoryMaxMB", bytesToMB(heapMemoryUsage.getMax()));
+                jvmInfo.put("heapMemoryCommittedMB", bytesToMB(heapMemoryUsage.getCommitted()));
+
+                // Get JVM uptime and other stats
+                long uptime = ManagementFactory.getRuntimeMXBean().getUptime();
+                jvmInfo.put("jvmUptimeMillis", uptime);
+
+                return jvmInfo;
+            }
+
+            // Helper function to convert bytes to MB
+            private long bytesToMB(long bytes) {
+                return bytes / (1024 * 1024);
+            }
+        }
+
+ +

Step 2: Frontend UI (HTML + JavaScript)

+

Here’s the frontend HTML page that will display the JVM information in a clean and readable format. It + uses JavaScript (fetch API) to get data from the /jvm-info endpoint and display it in a pre block +

+ 
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>JVM Information</title>
+            <style>
+                body {
+                    font-family: Arial, sans-serif;
+                    margin: 20px;
+                }
+                h1 {
+                    color: #333;
+                }
+                pre {
+                    background-color: #f4f4f4;
+                    padding: 10px;
+                    border-radius: 5px;
+                    font-size: 14px;
+                    line-height: 1.6;
+                    color: #333;
+                    max-height: 400px;
+                    overflow-y: scroll;
+                }
+                .container {
+                    max-width: 800px;
+                    margin: 0 auto;
+                }
+            </style>
+            <script>
+                function fetchJvmInfo() {
+                    fetch('/jvm-info')
+                        .then(response => response.json())
+                        .then(data => {
+                            document.getElementById("jvmInfo").innerHTML = JSON.stringify(data, null, 2);
+                        })
+                        .catch(error => console.error('Error fetching JVM info:', error));
+                }
+
+                window.onload = fetchJvmInfo;
+            </script>
+        </head>
+        <body>
+            <div class="container">
+                <h1>JVM Information</h1>
+                <pre id="jvmInfo">Loading...</pre>
+            </div>
+        </body>
+        </html>
+
+ +

Breakdown of the Information Displayed

+

1. Operating System Info:

+ + +

2. Memory Usage Info:

+ + +

3. JVM Uptime:

+ + +

Example JSON Output (after fetching data):

+

If the /jvm-info API returns the following JSON, it will be displayed on the UI:

+ 
+        {
+          "osName": "Windows 10",
+          "osVersion": "10.0",
+          "osArch": "amd64",
+          "heapMemoryInitMB": 128,
+          "heapMemoryUsedMB": 50,
+          "heapMemoryMaxMB": 1024,
+          "heapMemoryCommittedMB": 512,
+          "jvmUptimeMillis": 123456789
+        }
+
+ +

UI Display Example

+

On the webpage, this information will be displayed as follows in a neatly formatted block:

+ 
+        JVM Information
+        {
+          "osName": "Windows 10",
+          "osVersion": "10.0",
+          "osArch": "amd64",
+          "heapMemoryInitMB": 128,
+          "heapMemoryUsedMB": 50,
+          "heapMemoryMaxMB": 1024,
+          "heapMemoryCommittedMB": 512,
+          "jvmUptimeMillis": 123456789
+        }
+
+

Styling and Functionality:

+
    +
  1. Styling:The page has simple, clean styling with a scrollable pre block to display the JSON output in an organized manner. You can easily tweak the look and feel using CSS.
    2. +
  2. Dynamic Fetching:When the page loads, it automatically fetches the JVM information from the backend and updates the UI.
    3. +
+ +

Optional Enhancements

+
    +
  1. Graphical Visualization: You could use a library like Chart.js to visualize memory usage in graphs (e.g., pie charts for heap memory)
    2. +
  2. Auto-Refresh: You can add a refresh button or periodically fetch the data at a set interval (e.g., every 30 seconds) using setInterval() in JavaScript
    3. +
+

Let me know if you need further help with customization or any other features!

+
+ `; + + return ( + + +
+ + + JVM Information + + +
+ + +
+ + + ); +}; + +export default JVMDefault; diff --git a/src/routes/GLDUserRoutes.js b/src/routes/GLDUserRoutes.js index 1cdcfcc..1d10174 100644 --- a/src/routes/GLDUserRoutes.js +++ b/src/routes/GLDUserRoutes.js @@ -33,6 +33,7 @@ const DrImport = Loadable(lazy(() => import('pages/Setting/DrImport'))); const AuditLogPage = Loadable(lazy(() => import('pages/AuditLog/index'))); const ReconReportPage = Loadable(lazy(() => import('pages/Recon'))); const ChangePasswordPage = Loadable(lazy(() => import('pages/User/ChangePasswordPage'))); +const JVMDefault = Loadable(lazy(() => import('pages/JVM'))); // ==============================|| MAIN ROUTING ||============================== // @@ -192,6 +193,11 @@ const GLDUserRoutes = { path: '/setting/auditLog', element: }:{}, + isGranted("MAINTAIN_SETTING")? + { + path: '/jvm', + element: + }:{}, { path: '/user/changePassword', diff --git a/src/routes/LoginRoutes.js b/src/routes/LoginRoutes.js index 683b609..65b776d 100644 --- a/src/routes/LoginRoutes.js +++ b/src/routes/LoginRoutes.js @@ -41,8 +41,6 @@ const IAmSmart_PleaseLoginCallback = Loadable(lazy(() => import('pages/iAmSmart/ const VerifyPage = Loadable(lazy(() => import('pages/authentication/Verify'))); const Testfps = Loadable(lazy(() => import('pages/Payment/FPS/FPSTest'))); const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback'))); - - // ==============================|| AUTH ROUTING ||============================== // const LoginRoutes = {