Async Queue for Fallback Excel with Email

src/pages/JVM/index.js

@@ -11,7 +11,7 @@ import {
   Button
 } from '@mui/material';
 import * as React from "react";
-import { GET_JVM_INFO } from "utils/ApiPathConst";
+import { GET_JVM_INFO, GET_NOTIFICATION_QUEUE_STATUS } from "utils/ApiPathConst";
 import axios from "axios";
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
@@ -20,7 +20,11 @@ const JVMDefault = () => {
   const [jvmInfo, setJvmInfo] = React.useState(null);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
-  
+
+  const [queueStatus, setQueueStatus] = React.useState(null);
+  const [queueLoading, setQueueLoading] = React.useState(false);
+  const [queueError, setQueueError] = React.useState(null);
+
   const fetchJvmInfo = () => {
     setLoading(true);
     setError(null);
@@ -37,6 +41,24 @@ const JVMDefault = () => {
       });
   };
 
+  const fetchNotificationQueueStatus = () => {
+    setQueueLoading(true);
+    setQueueError(null);
+    setQueueStatus(null);
+    axios.get(`${GET_NOTIFICATION_QUEUE_STATUS}`)
+      .then((response) => {
+        if (response.status === 200) {
+          setQueueStatus(response.data);
+        }
+      })
+      .catch(err => {
+        setQueueError(err);
+      })
+      .finally(() => {
+        setQueueLoading(false);
+      });
+  };
+
   React.useEffect(() => {
     localStorage.setItem('searchCriteria', "");
     setLoading(false);
@@ -66,25 +88,40 @@ const JVMDefault = () => {
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="space-between" alignItems="center">
             <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
-              JVM Information
+              System Background Status
             </Typography>
           </Stack>
         </div>
       </Grid>
       <Grid item xs={12} ml={15} mb={2} mt={2}>
-        <Button
-          size="large"
-          variant="contained"
-          type="submit"
-          sx={{
-              textTransform: 'capitalize',
-              alignItems: 'end'
-          }}
-          onClick={fetchJvmInfo}
-          disabled={loading}
-        >
-          <Typography variant="h5">JVM Info</Typography>
-        </Button>
+        <Stack direction="row" spacing={2}>
+          <Button
+            size="large"
+            variant="contained"
+            type="submit"
+            sx={{
+                textTransform: 'capitalize',
+                alignItems: 'end'
+            }}
+            onClick={fetchJvmInfo}
+            disabled={loading}
+          >
+            <Typography variant="h5">JVM Info</Typography>
+          </Button>
+          <Button
+            size="large"
+            variant="contained"
+            type="button"
+            sx={{
+                textTransform: 'capitalize',
+                alignItems: 'end'
+            }}
+            onClick={fetchNotificationQueueStatus}
+            disabled={queueLoading}
+          >
+            <Typography variant="h5">Notification Queue Status</Typography>
+          </Button>
+        </Stack>
       </Grid>
       <Grid item xs={12} ml={15} mb={2} mt={2}>
         <Paper elevation={3} sx={{ p: 2, bgcolor: 'background.paper' }}>
@@ -114,6 +151,35 @@ const JVMDefault = () => {
           )}
         </Paper>
       </Grid>
+      <Grid item xs={12} ml={15} mb={2} mt={2}>
+        <Paper elevation={3} sx={{ p: 2, bgcolor: 'background.paper' }}>
+          <Typography variant="h6" gutterBottom>Notification Queue Status</Typography>
+          {queueLoading ? (
+            <Box display="flex" justifyContent="center" alignItems="center" minHeight={120}>
+              <CircularProgress />
+            </Box>
+          ) : queueError ? (
+            <Typography color="error">Error: {queueError.message}</Typography>
+          ) : queueStatus ? (
+            <Box
+              component="pre"
+              sx={{
+                p: 2,
+                borderRadius: 1,
+                bgcolor: 'grey.100',
+                overflow: 'auto',
+                maxHeight: 300,
+                fontSize: '0.875rem',
+                lineHeight: 1.6
+              }}
+            >
+              {JSON.stringify(queueStatus, null, 2)}
+            </Box>
+          ) : (
+            <Typography color="text.secondary">Click &quot;Notification Queue Status&quot; to load data.</Typography>
+          )}
+        </Paper>
+      </Grid>
     </Grid>
   );
 };

src/routes/GLDUserRoutes.js

@@ -197,7 +197,7 @@ const GLDUserRoutes = {
         }:{},
         isGranted("MAINTAIN_SETTING")?
         {
-          path: '/jvm',
+          path: '/sys-status',
           element: <JVMDefault />
         }:{},
 

src/utils/ApiPathConst.js

@@ -253,3 +253,4 @@ export const GET_HOLIDAY_TEMPLATE = apiPath+'/holiday/export'; //GET
 
 
 export const GET_JVM_INFO = apiPath+'/jvm-info'; //GET
+export const GET_NOTIFICATION_QUEUE_STATUS = apiPath+'/notification-queue-status'; //GET