update jvm page

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 = `
+    <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;

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: <AuditLogPage />
         }:{},
+        isGranted("MAINTAIN_SETTING")?
+        {
+          path: '/jvm',
+          element: <JVMDefault />
+        }:{},
 
         {
           path: '/user/changePassword',

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 = {