PNSPS-frontend-MaterialUI/src/pages/JVM/index.js

// 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 = `
    <style>
        pre {
            background-color: #333333;  /* Dark gray background */
            color: white;              /* White text */
            padding: 15px;             /* Add some padding */
            border-radius: 5px;        /* Rounded corners */
            overflow-x: auto;          /* Add horizontal scroll if needed */
            width: 90%;               /* 90% width */
        }
    </style>
    <div>
      <p>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.
      </p>
      <h2>Step 1: Java Code (Controller)</h2>
      <p>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).
      <p>
      <pre>
        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<String, Object> getJvmInfo() {
                Map<String, Object> 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);
            }
        }
      </pre>

      <h2>Step 2: Frontend UI (HTML + JavaScript)</h2>
      <p>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
      </p>
      <pre>
        &lt;!DOCTYPE html&gt;
        &lt;html lang="en"&gt;
        &lt;head&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
            &lt;title&gt;JVM Information&lt;/title&gt;
            &lt;style&gt;
                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;
                }
            &lt;/style&gt;
            &lt;script&gt;
                function fetchJvmInfo() {
                    fetch('/jvm-info')
                        .then(response =&gt; response.json())
                        .then(data =&gt; {
                            document.getElementById("jvmInfo").innerHTML = JSON.stringify(data, null, 2);
                        })
                        .catch(error =&gt; console.error('Error fetching JVM info:', error));
                }

                window.onload = fetchJvmInfo;
            &lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;div class="container"&gt;
                &lt;h1&gt;JVM Information&lt;/h1&gt;
                &lt;pre id="jvmInfo"&gt;Loading...&lt;/pre&gt;
            &lt;/div&gt;
        &lt;/body&gt;
        &lt;/html&gt;
      </pre>

      <h2>Breakdown of the Information Displayed</h2>
      <h3>1. Operating System Info:</h3>
      <ul>
          <li><strong>osName:</strong> The name of the operating system (e.g., Windows, Linux)</li>
          <li><strong>osVersion:</strong> The version of the operating system</li>
          <li><strong>osArch:</strong> The architecture of the operating system (e.g., x86_64)</li>
      </ul>

      <h3>2. Memory Usage Info:</h3>
      <ul>
          <li><strong>heapMemoryInitMB:</strong> The initial heap memory available to the JVM (in MB)</li>
          <li><strong>heapMemoryUsedMB:</strong> The current memory being used by the JVM (in MB)</li>
          <li><strong>heapMemoryMaxMB:</strong> The maximum heap memory that the JVM can use (in MB)</li>
          <li><strong>heapMemoryCommittedMB:</strong> The amount of memory committed by the JVM (in MB)</li>
      </ul>

      <h3>3. JVM Uptime:</h3>
      <ul>
          <li><strong>jvmUptimeMillis:</strong> The time the JVM has been running (in milliseconds)</li>
      </ul>

      <h2>Example JSON Output (after fetching data):</h2>
      <p>If the /jvm-info API returns the following JSON, it will be displayed on the UI:</p>
      <pre>
        {
          "osName": "Windows 10",
          "osVersion": "10.0",
          "osArch": "amd64",
          "heapMemoryInitMB": 128,
          "heapMemoryUsedMB": 50,
          "heapMemoryMaxMB": 1024,
          "heapMemoryCommittedMB": 512,
          "jvmUptimeMillis": 123456789
        }
      </pre>

      <h2>UI Display Example</h2>
      <p>On the webpage, this information will be displayed as follows in a neatly formatted block:</p>
      <pre>
        JVM Information
        {
          "osName": "Windows 10",
          "osVersion": "10.0",
          "osArch": "amd64",
          "heapMemoryInitMB": 128,
          "heapMemoryUsedMB": 50,
          "heapMemoryMaxMB": 1024,
          "heapMemoryCommittedMB": 512,
          "jvmUptimeMillis": 123456789
        }
      </pre>
      <h2>Styling and Functionality:</h2>
      <ol>
        <li><strong>Styling:</strong>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.</li>
        <li><strong>Dynamic Fetching:</strong>When the page loads, it automatically fetches the JVM information from the backend and updates the UI.</li>
      </ol>

      <h2>Optional Enhancements</h2>
      <ol>
          <li><strong>Graphical Visualization:</strong> You could use a library like Chart.js to visualize memory usage in graphs (e.g., pie charts for heap memory)</li>
          <li><strong>Auto-Refresh:</strong> You can add a refresh button or periodically fetch the data at a set interval (e.g., every 30 seconds) using setInterval() in JavaScript</li>
      </ol>
      <p>Let me know if you need further help with customization or any other features!</p>
    </div>
  `;

  return (
    <Grid container sx={{minHeight: '87vh', backgroundColor: "backgroundColor.default"}} direction="column">
      <Grid item xs={12}>
        <div style={BackgroundHead}>
          <Stack direction="row"  height='70px' justifyContent="flex-start" alignItems="center">
            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
              JVM Information
            </Typography>
          </Stack>
        </div>
      </Grid>
      <Grid item xs={12} ml={15} mb={2}>
        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
      </Grid>
    </Grid>
  );
};

export default JVMDefault;