add UI for logs

backend/src/api/app.ts

@@ -13,6 +13,7 @@ import * as search from './search';
 import * as vulnerabilities from './vulnerabilities';
 import * as organizations from './organizations';
 import * as scans from './scans';
+import * as logs from './logs';
 import * as users from './users';
 import * as scanTasks from './scan-tasks';
 import * as stats from './stats';
@@ -28,7 +29,7 @@ import * as jwt from 'jsonwebtoken';
 import { Request, Response, NextFunction } from 'express';
 import fetch from 'node-fetch';
 import * as searchOrganizations from './organizationSearch';
-import { Logger, RecordMessage } from '../tools/loggingMiddleware';
+import { Logger, RecordMessage } from '../tools/logger';
 
 const sanitizer = require('sanitizer');
 
@@ -287,11 +288,11 @@ app.post('/auth/okta-callback', async (req, res) => {
 
           res.cookie('id_token', signedToken, { httpOnly: true, secure: true });
 
-          logger.record('USER LOGIN', 'success', (req, user) => {
+          logger.record('USER LOGIN', 'success', (req, us) => {
+            console.log('HERE', { req, us });
             return {
               timestamp: new Date(),
-              stuff: 'hello',
-              userId: user?.data?.id
+              userId: user?.id
             };
           });
           return res.status(200).json({
@@ -590,6 +591,7 @@ authenticatedRoute.delete(
   handlerToExpress(savedSearches.del)
 );
 authenticatedRoute.get('/scans', handlerToExpress(scans.list));
+authenticatedRoute.get('/logs', handlerToExpress(logs.list));
 authenticatedRoute.get('/granularScans', handlerToExpress(scans.listGranular));
 authenticatedRoute.post('/scans', handlerToExpress(scans.create));
 authenticatedRoute.get('/scans/:scanId', handlerToExpress(scans.get));

backend/src/api/logs.ts

@@ -0,0 +1,13 @@
+import { Log } from '../models';
+import { wrapHandler } from './helpers';
+
+export const list = wrapHandler(async () => {
+  const logs = await Log.find();
+  return {
+    statusCode: 200,
+    body: JSON.stringify({
+      result: logs,
+      count: logs.length
+    })
+  };
+});

frontend/src/components/Logs/Logs.tsx

@@ -0,0 +1,82 @@
+import { Box } from '@mui/system';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { useAuthContext } from 'context';
+import { differenceInCalendarDays, parseISO } from 'date-fns';
+import React, { FC, useCallback, useEffect, useState } from 'react';
+
+interface LogsProps {}
+
+export const Logs: FC<LogsProps> = () => {
+  const { apiGet } = useAuthContext();
+  const [logs, setLogs] = useState<{ count: Number; result: [] }>({
+    count: 0,
+    result: []
+  });
+
+  const fetchLogs = useCallback(async () => {
+    const results = await apiGet('/logs');
+    setLogs(results);
+  }, []);
+
+  useEffect(() => {
+    fetchLogs();
+  }, []);
+
+  const logCols: GridColDef[] = [
+    {
+      field: 'eventType',
+      headerName: 'Event',
+      minWidth: 100,
+      flex: 1
+    },
+    {
+      field: 'result',
+      headerName: 'Result',
+      minWidth: 100,
+      flex: 1
+    },
+    {
+      field: 'createdAt',
+      headerName: 'Timestamp',
+      minWidth: 100,
+      flex: 1,
+      valueFormatter: (e) => {
+        return `${differenceInCalendarDays(
+          Date.now(),
+          parseISO(e.value)
+        )} days ago`;
+      }
+    },
+    {
+      field: 'payload',
+      headerName: 'Payload',
+      minWidth: 300,
+      flex: 2,
+      renderCell: (cellValues) => {
+        return (
+          <Box
+            sx={{
+              fontSize: '12px',
+              padding: 0,
+              margin: 0,
+              backgroundColor: 'black',
+              color: 'white',
+              width: '100%'
+            }}
+          >
+            <pre>{JSON.stringify(cellValues.row.payload, null, 2)}</pre>
+          </Box>
+        );
+      },
+      valueFormatter: (e) => {
+        return JSON.stringify(e.value, null, 2);
+      }
+    }
+  ];
+
+  return (
+    <Box>
+      <DataGrid rows={logs.result} columns={logCols} />
+    </Box>
+  );
+};

frontend/src/pages/AdminTools/AdminTools.tsx

@@ -5,6 +5,7 @@ import ScansView from 'pages/Scans/ScansView';
 import ScanTasksView from 'pages/Scans/ScanTasksView';
 import { Box, Container, Tab } from '@mui/material';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
+import { Logs } from 'components/Logs/Logs';
 
 export const AdminTools: React.FC = () => {
   const [value, setValue] = React.useState('1');
@@ -21,6 +22,7 @@ export const AdminTools: React.FC = () => {
               <Tab label="Scans" value="1" />
               <Tab label="Scan History" value="2" />
               <Tab label="Notifications" value="3" />
+              <Tab label="Logs" value="4" />
             </TabList>
           </Box>
           <TabPanel value="1">
@@ -33,6 +35,9 @@ export const AdminTools: React.FC = () => {
           <TabPanel value="3">
             <Notifications />
           </TabPanel>
+          <TabPanel value="4">
+            <Logs />
+          </TabPanel>
         </TabContext>
       </Box>
     </Container>