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:

osName: The name of the operating system (e.g., Windows, Linux)
osVersion: The version of the operating system
osArch: The architecture of the operating system (e.g., x86_64)

2. Memory Usage Info:

heapMemoryInitMB: The initial heap memory available to the JVM (in MB)
heapMemoryUsedMB: The current memory being used by the JVM (in MB)
heapMemoryMaxMB: The maximum heap memory that the JVM can use (in MB)
heapMemoryCommittedMB: The amount of memory committed by the JVM (in MB)

3. JVM Uptime:

jvmUptimeMillis: The time the JVM has been running (in milliseconds)

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:

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.
Dynamic Fetching:When the page loads, it automatically fetches the JVM information from the backend and updates the UI.

Optional Enhancements

Graphical Visualization: You could use a library like Chart.js to visualize memory usage in graphs (e.g., pie charts for heap memory)
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

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