Adding a server status dialog.

diff --git a/src/app/components/VPN/VPNContext.jsx b/src/app/components/VPN/VPNContext.jsx
index 266f25fff3bf0609a2280fe193fe3c1ba809e7b1..6cad695107eb340a0329fde786725383d1b25593 100644 (file)
--- a/src/app/components/VPN/VPNContext.jsx
+++ b/src/app/components/VPN/VPNContext.jsx
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { VPNService } from '../../services';
-import { ConfirmRevoke, CreateVPNClientDialog, VPNStatusDialog } from '../index';
+import { ConfirmRevoke, CreateVPNClientDialog } from '../index';
 
 const VPNContext = createContext( undefined );
 
@@ -88,8 +88,5 @@ export const VPNProvider = ( { children } ) => {
     { createOpen && <CreateVPNClientDialog open={ createOpen }
                                            onClose={ () => setCreateOpen( false ) }
                                            onCreate={ handleCreateClientSubmit }/> }
-    { statusOpen && <VPNStatusDialog open={ statusOpen }
-                                     onClose={ () => setStatusOpen( false ) }
-                                     status={ serverStatus }/> }
     { children }</VPNContext.Provider>;
 };

diff --git a/src/app/components/VPN/VPNStatusDialog.jsx b/src/app/components/VPN/VPNStatusDialog.jsx
deleted file mode 100644 (file)
index 3a25266..0000000
--- a/src/app/components/VPN/VPNStatusDialog.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button} from '@mui/material';
-
-export default function VPNStatusDialog( { open, onClose, status } ) {
-       return (
-               <Dialog open={ open } onClose={ onClose } >
-                       <DialogTitle>VPN Status</DialogTitle>
-                       <DialogContent>{ status }</DialogContent>
-                       <DialogActions>
-                               <Button onClick={ onClose }>OK</Button>
-                       </DialogActions>
-               </Dialog>
-       );
-};
\ No newline at end of file

diff --git a/src/app/components/index.js b/src/app/components/index.js
index 7e4e52ed7e16877c7832fae793635ac1760c934d..8925720ed5c129358b9730b14ee20ccd21c99219 100644 (file)
--- a/src/app/components/index.js
+++ b/src/app/components/index.js
@@ -1,6 +1,5 @@
 import ConfirmRevoke from './VPN/ConfirmRevoke';
 import CreateVPNClientDialog from './VPN/CreateVPNClientDialog';
-import VPNStatusDialog from './VPN/VPNStatusDialog';
 export * from './VPN/VPNContext';
 
-export { ConfirmRevoke, CreateVPNClientDialog, VPNStatusDialog };
\ No newline at end of file
+export { ConfirmRevoke, CreateVPNClientDialog };
\ No newline at end of file

diff --git a/src/app/views/VPN/VPN.jsx b/src/app/views/VPN/VPN.jsx
index 6fdfefbbfdf3734273078e3b7091e70f8f764d7e..03f4d19ab067eeca574a9edefa70cfc6baaccbb7 100644 (file)
--- a/src/app/views/VPN/VPN.jsx
+++ b/src/app/views/VPN/VPN.jsx
@@ -9,7 +9,7 @@ const VPN = () => {
     availableClients,
     message,
     setCreateOpen,
-    setStatusOpen } = useVPN();
+    serverStatus } = useVPN();
   const clientTable = useMaterialReactTable( {
     columns: [
       { accessorKey: 'name', header: 'Name' },
@@ -69,19 +69,13 @@ const VPN = () => {
                 onClick={ () => setCreateOpen( true ) }>
           Create Client
         </Button>
-        <Button variant='contained'
-                color='warning'
-                size='small'
-                onClick={ () => setStatusOpen( true ) }>
-          Show VPN Status
-        </Button>
       </>
     )
   });
 
   return (
     <Container>
-      <Typography variant="h5" className="mt-6">Available OpenVPN Clients</Typography>
+      <Typography variant="h5" className="mt-6">Available OpenVPN Clients<small>Status: <small style={{ color: serverStatus ? '#00FF00' : '#FF0000' }}>{ serverStatus ? 'Active' : 'Inactive' }</small></small></Typography>
       <MaterialReactTable table={ availableTable } />
 
       <Typography variant="h5" className="mt-6">Connected OpenVPN Clients</Typography>