Update readme and display errors properly. Minor cleanup.

rechecked · May 5, 2023 · f7bb221 · f7bb221
1 parent 6e613b1
commit f7bb221
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,17 @@
-ReChecked Viewer - ReChecked Agent viewing utility.
+[ReChecked Viewer](https://view.rechecked.io) - ReChecked Agent viewing utility.
+
+You can use the viewer to easily access information about your rcagents such as:
+- Graphical views of usage stats
+- Examples of how to build active (check_rcagent.py) and passive checks
+- Explore the status API using the API Viewer
+- Run plugins and view output and example checks
+
+Agent information used on the hosted site is only available in your browser and not stored on ReChecked servers.
+
+If you want to use your own hosted version locally or internally, you can build it by cloning the repo and using:
+```
+npm ci
+npm build
+```
+
+You can then serve the `build` directory however you choose, such as with nginx or apache.
diff --git a/src/components/modals/Connect.js b/src/components/modals/Connect.js
@@ -15,6 +15,7 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import Alert from '@mui/material/Alert';
 
 import { useDashboard } from '../../context/dashboard';
+import { buildApiURL} from '../../utils/network';
 
 function VerifySSLDialog({ url, open, onClose }) {
   return (
@@ -43,6 +44,7 @@ function Connect() {
   const [tokenHelperText, setTokenHelperText] = useState('');
   const [url, setUrl] = useState('');
   const [info, setInfo] = useState('');
+  const [error, setError] = useState('');
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -54,6 +56,8 @@ function Connect() {
 
   const handleSubmit = () => {
 
+    setError('');
+
     // Validate the form fields
     if (hostname === "") {
       setHostnameError(true);
@@ -69,10 +73,8 @@ function Connect() {
       token: token
     };
 
-    //console.log(agent);
-
     // Test connection and see if we are good to go
-    const url = `${agent.protocol}//${agent.hostname}:${agent.port}/status/system?token=${agent.token}`
+    const url = buildApiURL(agent, 'system');
     setUrl(url); // set url but maybe not needed to do this like this
     var start = window.performance.now();
     fetch(url)
@@ -102,7 +104,7 @@ function Connect() {
           var left = (window.innerWidth - 400) / 2;
           window.open(url,'_blank',`height=600,width=400,top=${top},left=${left},titlebar=Security Confirmation`);
         }
-        console.log(error.message);
+        setError("Could not connect to agent. Verify it is running and credentials are correct.");
       })
       .finally(() => {
         setLoading(false);
@@ -154,7 +156,8 @@ function Connect() {
             Enter agent information to conncet and view dashboard. Copy/paste the whole URL
             including token into the hostname to auto-complete the form.
           </DialogContentText>
-          {info && <Alert sx={{ marginBottom: 4 }} severity="info">{info}</Alert>}
+          {error && <Alert sx={{ mb: 4 }} severity="error">{error}</Alert>}
+          {info && <Alert sx={{ mb: 4 }} severity="info">{info}</Alert>}
           <Grid container spacing={2}>
             <Grid item xs="auto">
               <Box width={100}>

diff --git a/src/hooks/useAgent.js b/src/hooks/useAgent.js
@@ -1,20 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { isEmpty } from '../utils/common';
+import { buildApiURL} from '../utils/network';
 import { refreshRates } from '../config';
 
-const buildApiURL = (agent, path, args = {}) => {
-  const apiUrl = `${agent.protocol}//${agent.hostname}:${agent.port}/status/`;
-  const params = { token: agent.token, ...args };
-  const strParams = `?${Object.keys(params).map(i => {
-    if (Array.isArray(params[i])) {
-      return "arg="+params[i].join('&arg=');
-    }
-    return `${i}=${params[i]}`;
-  }).join('&')}`;
-  return apiUrl+path+strParams;
-};
-
 const fetchSystem = async (agent, signal) => {
   if (isEmpty(agent)) {
     return {};

diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
@@ -16,6 +16,7 @@ import Tab from '@mui/material/Tab';
 import TabContext from '@mui/lab/TabContext';
 import TabPanel from '@mui/lab/TabPanel';
 import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
 
 import Page from '../components/layout/Page';
 import Gauge from '../components/charts/Gauge';
@@ -25,10 +26,11 @@ import { useAgent, useAgentOverview } from '../hooks/useAgent';
 import { useDashboard } from '../context/dashboard';
 import { useAgents } from '../context/agents';
 import { isEmpty, ucFirst, platformName } from '../utils/common';
+import { buildApiURL} from '../utils/network';
 import { DashboardSettingsButton, ExampleCheckButton } from '../components/buttons';
 
 function Dashboard() {
-  const { dashboardAgent } = useDashboard();
+  const { dashboardAgent, setDashboardAgent } = useDashboard();
   const { editAgent } = useAgents();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -74,6 +76,16 @@ function Dashboard() {
     setSearchParams({ tab: tabVal });
   }
 
+  const handleCancel = () => {
+    setDashboardAgent({});
+  };
+
+  const handleReApprove = () => {
+    var top = (window.innerHeight - 600) / 2;
+    var left = (window.innerWidth - 400) / 2;
+    window.open(buildApiURL(dashboardAgent, 'system'),'_blank',`height=600,width=400,top=${top},left=${left},titlebar=Re-Approve Security Exception`);
+  };
+
   const agentUrl = `${dashboardAgent.protocol}//${dashboardAgent.hostname}:${dashboardAgent.port}`;
 
   return (
@@ -82,15 +94,21 @@ function Dashboard() {
         <Grid container alignItems="center" justifyContent="center" spacing={4}>
           <Grid item>
             {failureCount > 0 ? (
-              <Alert severity="error">
-                <AlertTitle>Could not connect to <Link color="inherit" href={agentUrl} target="_blank" rel="noopener noreferrer">{dashboardAgent.hostname}</Link></AlertTitle>
-                There are a few reasons that this could happen:
-                <ul style={{ margin: 0, padding: '5px 25px' }}>
-                  <li>No rcagent running on the host</li>
-                  <li>You are using a self-signed SSL certificate and need to re-approve the exception</li>
-                  <li>If you are using an IP address the host IP may have changed</li>
-                </ul>
-              </Alert>
+              <Stack spacing={4} alignItems="center">
+                <Alert severity="error">
+                  <AlertTitle>Could not connect to <Link color="inherit" href={agentUrl} target="_blank" rel="noopener noreferrer">{dashboardAgent.hostname}</Link></AlertTitle>
+                  There are a few reasons that this could happen:
+                  <ul style={{ margin: 0, padding: '5px 25px' }}>
+                    <li>No rcagent running on the host</li>
+                    <li>You are using a self-signed SSL certificate and need to re-approve the exception</li>
+                    <li>If you are using an IP address the host IP may have changed</li>
+                  </ul>
+                </Alert>
+                <Stack direction="row" spacing={2}>
+                  <Button variant="outlined" color="secondary" onClick={handleReApprove}>Re-Approve Exception</Button>
+                  <Button onClick={handleCancel}>Cancel</Button>
+                </Stack>
+              </Stack>
             ) : <CircularProgress color="secondary" />}
           </Grid>
         </Grid>