Merge branch 'dev' into readme

Author: nanyi-deng

.dockerignore

@@ -6,7 +6,7 @@
 
 **/.classpath
 **/.dockerignore
-# **/.env
+**/.env
 **/.git
 **/.gitignore
 **/.project

client/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
 import Navbar from './components/Navbar';
@@ -7,30 +7,114 @@ import Home from './pages/Home';
 import EventsDashboard from './pages/EventsDashboard';
 import Login from './pages/Login';
 import SignUp from './pages/SignUp';
+import { AWSCredentials, UserDetails } from './types';
 
 const App: React.FC = () => {
   const [isDarkMode, setIsDarkMode] = useState(false); // Dark mode state
-  const [user, setUser] = useState<Record<string, string> | null>(null);
+  const [user, setUser] = useState<UserDetails | null>(null);
+
+  const updateCredentials = useCallback(
+    function (credentials: AWSCredentials): void {
+      const locallyStoredUser: UserDetails = JSON.parse(
+        window.localStorage.getItem('user')!
+      ) as UserDetails;
+      fetch('/credentials', {
+        method: 'POST',
+        body: JSON.stringify({
+          ...credentials,
+          username:
+            user?.username ?? locallyStoredUser.username ?? 'No Active User',
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+        .then((response) => {
+          if (!response.ok)
+            throw Error('Server Error while updating aws credentials');
+          return response.json();
+        })
+        .then((data: UserDetails) => {
+          setUser(data);
+          window.localStorage.setItem('user', JSON.stringify(data));
+        })
+        .catch((error: Error) => {
+          console.error(error);
+        });
+    },
+    // we don't want to update on user update, because it would create an infinte loop, only on app reload
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  // check for a user session and update the user if found
+  useEffect(() => {
+    if (window.localStorage.getItem('user')) {
+      const locallyStoredUser: UserDetails = JSON.parse(
+        window.localStorage.getItem('user')!
+      ) as UserDetails;
+      setUser(locallyStoredUser);
+    }
+  }, []);
 
   const toggleDarkMode = () => {
     setIsDarkMode((prev) => !prev);
     document.body.classList.toggle('dark-mode', !isDarkMode); // Toggle class based on state
   };
 
+  function checkLogin(component: ReactNode): ReactNode {
+    return user ? component : <p>You must login to see this page</p>;
+  }
+
+  function checkAWSCreds(component: ReactNode): ReactNode {
+    if (
+      user?.aws_access_key?.length &&
+      user?.aws_region?.length > 0 &&
+      user?.aws_secret_access_key?.length > 0
+    ) {
+      return component;
+    }
+    return (
+      <p>
+        You must enter your AWS credentials in the profile page to see any data
+        here.
+      </p>
+    );
+  }
+
   return (
     <Router>
-      <Navbar toggleDarkMode={toggleDarkMode} isDarkMode={isDarkMode} username={user?.username ?? null} setUser={setUser} />
+      <Navbar
+        toggleDarkMode={toggleDarkMode}
+        isDarkMode={isDarkMode}
+        username={user?.username ?? null}
+        setUser={setUser}
+      />
       <Routes>
+        <Route path="/" element={<Login setUser={setUser} />} />
         <Route path="/login" element={<Login setUser={setUser} />} />
         <Route path="/signup" element={<SignUp />} />
-        {/* {user !== null && <> */}
-          <Route path="/" element={<Home isDarkMode={isDarkMode} />} />
-        <Route path="/profile" element={<Profile isDarkMode={isDarkMode} user={user} />} />
+
+        <Route
+          path="/home"
+          element={checkLogin(checkAWSCreds(<Home isDarkMode={isDarkMode} />))}
+        />
+        <Route
+          path="/profile"
+          element={checkLogin(
+            <Profile
+              isDarkMode={isDarkMode}
+              user={user}
+              updateCredentials={updateCredentials}
+            />
+          )}
+        />
         <Route
           path="/events-dashboard"
-          element={<EventsDashboard isDarkMode={isDarkMode} />}
+          element={checkLogin(
+            checkAWSCreds(<EventsDashboard isDarkMode={isDarkMode} />)
+          )}
         />
-        {/* </>} */}
       </Routes>
     </Router>
   );

client/src/components/IpAccessCombined.tsx

@@ -13,11 +13,13 @@ export default function IpAccessCombined({
 
   useEffect(() => {
     fetch('/events?countOn=source_ip&includeLocation=true')
-      .then((response) => response.json())
-      .then((data: (IPLocation & CountedEvent)[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setIpLocCounts(() => data as (IPLocation & CountedEvent)[]);
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
       })
+      .then((data: (IPLocation & CountedEvent)[] | { err: string }) =>
+        setIpLocCounts(() => data as (IPLocation & CountedEvent)[])
+      )
       .catch((error) =>
         console.warn('IpAccessCombined: fetch error: ' + error)
       );

client/src/components/Navbar.tsx

@@ -4,7 +4,12 @@ import { NavbarProps } from '../types';
 import LOGO from '../assets/RAILGUIDE.png';
 //import '../index.scss';
 
-const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode, username, setUser }) => {
+const Navbar: React.FC<NavbarProps> = ({
+  toggleDarkMode,
+  isDarkMode,
+  username,
+  setUser,
+}) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
@@ -14,14 +19,17 @@ const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode, username, s
   };
 
   const handleLogout = () => {
-    console.log('User logged out');
     setUser(null);
+    window.localStorage.removeItem('user');
     navigate('/login');
   };
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
         setDropdownOpen(false);
       }
     };
@@ -34,26 +42,27 @@ const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode, username, s
 
   return (
     <nav className={isDarkMode ? 'dark-mode' : ''}>
-      <Link to="/" className="logo" title="Home">
+      <Link to="/home" className="logo" title="Home">
         <img src={LOGO} alt="Wood Plank T" className="logo-image" />
       </Link>
       <div className="nav-buttons">
         <Link to="/events-dashboard" className="nav-button">
-          EVENTS DASHBOARD
+          RECENT EVENTS
         </Link>
         <button onClick={toggleDarkMode} className="nav-button">
           {isDarkMode ? 'LIGHT MODE' : 'DARK MODE'}
         </button>
-        
-          <div
-            className="nav-button"
-            onClick={toggleDropdown}
-            aria-haspopup="true"
-            aria-expanded={dropdownOpen}
-          >
-            {username && typeof username === 'string' ? username.toUpperCase() : "USER"}
-          </div>
-        
+
+        <div
+          className="nav-button"
+          onClick={toggleDropdown}
+          aria-haspopup="true"
+          aria-expanded={dropdownOpen}
+        >
+          {username && typeof username === 'string'
+            ? username.toUpperCase()
+            : 'USER'}
+        </div>
       </div>
       {dropdownOpen && (
         <div className="dropdown" ref={dropdownRef}>

client/src/components/charts/AnomalyChart.tsx

@@ -8,7 +8,6 @@ import {
   Tooltip,
   ResponsiveContainer,
   Legend,
-  ScatterProps,
 } from 'recharts';
 
 interface DataPoint {
@@ -47,15 +46,19 @@ const AnomalyChart: React.FC = () => {
           fill="#8884d8"
           shape="circle"
         >
-          {dummyData.map((entry, index) => (
-            <circle
-              key={`dot-${index}`}
-              cx={entry.cx}
-              cy={entry.cy}
-              r={isAnomaly(entry.count) ? 8 : 4}
-              fill={isAnomaly(entry.count) ? '#FF0000' : '#0088FE'}
-            />
-          ))}
+          {dummyData.map((entry, index) => {
+            const x = new Date(entry.timestamp).getTime();
+            const y = entry.count;
+            return (
+              <circle
+                key={`dot-${index}`}
+                cx={x}
+                cy={y}
+                r={isAnomaly(entry.count) ? 8 : 4}
+                fill={isAnomaly(entry.count) ? '#FF0000' : '#0088FE'}
+              />
+            );
+          })}
         </Scatter>
       </ScatterChart>
     </ResponsiveContainer>

client/src/components/charts/EventSource.tsx

@@ -22,10 +22,12 @@ export default function EventSourceChart() {
   useEffect(() => {
     setLoading(true);
     fetch('/events?countOn=source')
-      .then((response) => response.json())
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
+      })
       .then((data: CountedEvent[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setEvents(data as CountedEvent[]);
+        setEvents(data as CountedEvent[]);
         setLoading(false);
       })
       .catch((error) =>

client/src/components/charts/EventType.tsx

@@ -21,20 +21,22 @@ export default function EventTypeChart() {
 
   useEffect(() => {
     setLoading(true);
-    fetch('/events?countOn=type')
-      .then((response) => response.json())
+    fetch('/events?countOn=name')
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
+      })
       .then((data: CountedEvent[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setEvents(
-            (data as CountedEvent[]).map((event) => ({
-              ...event,
-              type: event.type.replace(/([A-Z])/g, ' $1'),
-            }))
-          );
+        setEvents(
+          (data as CountedEvent[]).map((event) => ({
+            ...event,
+            name: event.name.replace(/([A-Z])/g, ' $1'),
+          }))
+        );
         setLoading(false);
       })
       .catch((error) =>
-        console.warn('Could not fetch event type counts: ', error)
+        console.warn('Could not fetch event name counts: ', error)
       );
   }, []);
 
@@ -64,7 +66,12 @@ export default function EventTypeChart() {
           angle={-30}
           textAnchor="end"
         />
-        <Bar dataKey="count" maxBarSize={35} minPointSize={5} style={{ cursor: 'pointer' }}>
+        <Bar
+          dataKey="count"
+          maxBarSize={35}
+          minPointSize={5}
+          style={{ cursor: 'pointer' }}
+        >
           {events.map((data, index) => (
             <Cell
               key={`cell-${index}`}

client/src/components/charts/HeatMap.tsx

@@ -25,11 +25,13 @@ const HeatMap: React.FC = () => {
       .catch((error) => console.error('Error fetching geoJSON:', error));
 
     fetch('/events?countOn=source_ip&includeLocation=true')
-      .then((response) => response.json())
-      .then((data: (IPLocation & CountedEvent)[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setIpData(() => data as (IPLocation & CountedEvent)[]);
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
       })
+      .then((data: (IPLocation & CountedEvent)[] | { err: string }) =>
+        setIpData(() => data as (IPLocation & CountedEvent)[])
+      )
       .catch((error) =>
         console.warn('Could not fetch event ip counts and locations: ', error)
       );

client/src/components/charts/IpAccessOverTime.tsx

@@ -13,10 +13,12 @@ export default function IpAccessOverTimeChart({
   useEffect(() => {
     setLoading(true); // Set loading to true before fetching data
     fetch('/events?countOn=time&groupTimeBy=minute')
-      .then((response) => response.json())
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
+      })
       .then((data: CountedEvent[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setIpTimes(() => data as CountedEvent[]);
+        setIpTimes(() => data as CountedEvent[]);
         setLoading(false); // Set loading to true before fetching data
       })
       .catch((error) =>