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

// import { useState } from 'react';

// material-ui
import {
  Grid,
  Typography,
  Stack,
  Paper,
  Box,
  CircularProgress,
  Button
} from '@mui/material';
import * as React from "react";
import { GET_JVM_INFO, GET_NOTIFICATION_QUEUE_STATUS } from "utils/ApiPathConst";
import axios from "axios";

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

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);
    axios.get(`${GET_JVM_INFO}`)
      .then((response) => {
        if (response.status === 200) {
          console.log(response)
          setJvmInfo(response.data);
        }
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  };

  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);
  }, []);

  React.useEffect(() => {
    if(jvmInfo != null) {
      if (Object.keys(jvmInfo).length > 0 && jvmInfo !== undefined) {
        setLoading(false);
      }
    }
  }, [jvmInfo]);
  
  const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
  };

  return (
    <Grid container sx={{ minHeight: '87vh', backgroundColor: "backgroundColor.default" }} direction="column">
      <Grid item xs={12}>
        <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" }}>
              System Background Status
            </Typography>
          </Stack>
        </div>
      </Grid>
      <Grid item xs={12} ml={15} mb={2} mt={2}>
        <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' }}>
          {loading ? (
            <Box display="flex" justifyContent="center" alignItems="center" minHeight={200}>
              <CircularProgress />
            </Box>
          ) : error ? (
            <Typography color="error">Error: {error.message}</Typography>
          ) : jvmInfo ? (
            <Box 
              component="pre" 
              sx={{ 
                p: 2, 
                borderRadius: 1,
                bgcolor: 'grey.100',
                overflow: 'auto',
                maxHeight: 400,
                fontSize: '0.875rem',
                lineHeight: 1.6
              }}
            >
              {JSON.stringify(jvmInfo, null, 2)}
            </Box>
          ) : (
            <Typography>No data available</Typography>
          )}
        </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>
  );
};

export default JVMDefault;