14 |
15 | # Installation and Spin-Up
16 |
17 | - Make sure you have docker installed
18 | - Create your compose.yml file
19 | - (see our starter version in [Docker Hub](https://hub.docker.com/r/trailguide/trailguide-prod), or copy the one from this repo )
20 | - run `docker compose up` on the command line
21 |
22 | # Getting Start:
23 |
24 | 1. Use the signup link to create user
25 |
26 | 
27 |
28 | 2. Login
29 |
30 | 
31 |
32 | 3. Copy paste the aws credentials in the fields in the profile
33 |
34 | 
35 |
36 | ## Shoutouts :tada:
37 |
38 | Omnivore takes advantage of some great open source software:
39 |
40 | - [TypeScript](https://www.typescriptlang.org/) - Most of our backend and frontend are written in TypeScript.
41 | - [PostgreSQL](https://www.postgresql.org/)- For managing complex queries and storing event data, PostgreSQL is our go-to. Its reliability and performance are key to managing and analyzing extensive data, enhancing the robustness of our monitoring and analytics features.
42 | - [Docker](https://www.docker.com/)- Thanks to Docker, deploying our platform is seamless and consistent, whether locally or on the cloud. Docker allows us to containerize our ML models and backend services, ensuring reliable and scalable performance for our users.
43 | - [AWS](https://aws.amazon.com/)- AWS forms the backbone of TrailGuide, providing the infrastructure and data streams that allow us to offer real-time monitoring and security insights for AWS environments. CloudTrail logs enable us to dive deep into user activity and detect anomalies as they happen.
44 | - [Scikit-learn](https://scikit-learn.org/)- TrailGuide’s anomaly detection thrives with Scikit-learn's Isolation Forest, enabling real-time detection of unusual activity in CloudTrail logs with efficiency and accuracy.
45 | - And many more awesome libraries, just checkout our package files to see what we are using.
46 |
47 | ## Requirements for development
48 |
49 | TraildeGuide is written in TypeScript and JavaScript.
50 |
--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | You must login to see this page
; 67 | } 68 | 69 | function checkAWSCreds(component: ReactNode): ReactNode { 70 | if ( 71 | user?.aws_access_key?.length && 72 | user?.aws_region?.length > 0 && 73 | user?.aws_secret_access_key?.length > 0 74 | ) { 75 | return component; 76 | } 77 | return ( 78 |79 | You must enter your AWS credentials in the profile page to see any data 80 | here. 81 |
82 | ); 83 | } 84 | 85 | return ( 86 |
7 |
12 | );
13 | };
14 |
15 | export default Card;
16 |
--------------------------------------------------------------------------------
/client/src/components/EventCard.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { EventCardProps } from '../types'; // Ensure this matches the updated structure
3 |
4 | const EventCard: React.FC
8 |
10 | {title}
9 |{children}
11 |
13 |
23 | );
24 | };
25 |
26 | export default EventCard;
27 |
--------------------------------------------------------------------------------
/client/src/components/IpAccessCombined.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import AccessPerIpChart from './charts/AccessPerIp';
3 | import IpAccessOverTimeChart from './charts/IpAccessOverTime';
4 | import { CountedEvent, IPLocation, IpAccessCombinedProps } from '../types'; // Import the interface from types.ts
5 |
6 | export default function IpAccessCombined({
7 | currentIp,
8 | setCurrentIp,
9 | }: IpAccessCombinedProps): JSX.Element {
10 | const [ipLocCounts, setIpLocCounts] = useState<(IPLocation & CountedEvent)[]>(
11 | []
12 | );
13 |
14 | useEffect(() => {
15 | fetch('/events?countOn=source_ip&includeLocation=true')
16 | .then((response) => {
17 | if (response.ok) return response.json();
18 | throw new Error(response.status + ': ' + response.statusText);
19 | })
20 | .then((data: (IPLocation & CountedEvent)[] | { err: string }) =>
21 | setIpLocCounts(() => data as (IPLocation & CountedEvent)[])
22 | )
23 | .catch((error) =>
24 | console.warn('IpAccessCombined: fetch error: ' + error)
25 | );
26 | }, []);
27 |
28 | const currentIpLoc = ipLocCounts.find(
29 | ({ source_ip }) => source_ip === currentIp
30 | );
31 |
32 | return (
33 | <>
34 | Event: {event.name || 'N/A'}
14 |15 | Timestamp:{' '} 16 | {isValidDate ? eventDate.toLocaleString() : 'Invalid Date'} 17 |
18 |19 | User: {event.username ?? 'Unknown User'} 20 |
21 | 22 |
35 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/client/src/components/Modal.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ModalProps } from '../types';
3 |
4 | const Modal: React.FC43 | Location: 44 | {currentIpLoc?.city}, {currentIpLoc?.region},{' '} 45 | {currentIpLoc?.country} 46 |
47 | {/* Make sure the chart renders only when IP is selected */} 48 |
17 |
66 | );
67 | };
68 |
69 | export default Modal;
70 |
--------------------------------------------------------------------------------
/client/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react';
2 | import { Link, useNavigate } from 'react-router-dom';
3 | import { NavbarProps } from '../types';
4 | import LOGO from '../assets/RAILGUIDE.png';
5 | //import '../index.scss';
6 |
7 | const Navbar: React.FC e.stopPropagation()}
20 | >
21 |
65 |
22 |
30 | Event Details
23 | 29 |
31 |
56 | 32 | Event Type: {event.type ?? 'N/A'} 33 |
34 |35 | Event: {event.name ?? 'N/A'} 36 |
37 |38 | Timestamp:{' '} 39 | {event.time.toLocaleString() ?? 'Invalid Date'} 40 |
41 |42 | Source IP: {event.source_ip ?? 'N/A'} 43 |
44 |45 | User Type: {event.user_identity_type ?? 'N/A'} 46 |
47 |48 | Raw JSON Data: 49 |
50 |
53 |
55 | {JSON.stringify(event, null, 2)}
54 |
57 |
63 |
64 | Loading chart...
; 62 | 63 | return ( 64 |Loading chart...
; 39 | 40 | const handleClick = (source: string) => { 41 | setSelectedEventSource((prevSelected) => 42 | prevSelected === source ? null : source 43 | ); 44 | }; 45 | 46 | return ( 47 |
48 |
56 |
64 | {events.map((entry, index) => (
65 | handleClick(entry.source)} // Attach the click handler to each Cell
69 | style={{ cursor: 'pointer' }} // Add a pointer cursor to indicate clickability
70 | />
71 | ))}
72 | |
82 |
83 |
84 | {/* Display selected event source under the chart title */}
85 | {selectedEventSource && (
86 |
89 | );
90 | }
91 |
--------------------------------------------------------------------------------
/client/src/components/charts/EventType.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { Bar, BarChart, LabelList, XAxis, Cell } from 'recharts';
3 | import { CountedEvent } from '../../types';
4 |
5 | const COLORS = [
6 | '#0088FE',
7 | '#00C49F',
8 | '#FFBB28',
9 | '#FF8042',
10 | '#FF6666',
11 | '#FF99CC',
12 | '#FFCC99',
13 | ];
14 |
15 | export default function EventTypeChart() {
16 | const [events, setEvents] = useStateEvent Source: {selectedEventSource}
87 | )} 88 |Loading chart...
; 44 | 45 | const handleClick = (data: { name: string }) => { 46 | // Toggle selection: if already selected, deselect; otherwise, select 47 | setSelectedEventName((prevSelected) => 48 | prevSelected === data.name ? null : data.name 49 | ); 50 | }; 51 | 52 | return ( 53 |
54 |
62 |
75 | {events.map((data, index) => (
76 | handleClick(data)}
79 | fill={COLORS[index % COLORS.length]}
80 | />
81 | ))}
82 | |
92 |
93 |
94 | {/* Display selected event name under the chart title */}
95 | {selectedEventName && (
96 |
99 | );
100 | }
101 |
--------------------------------------------------------------------------------
/client/src/components/charts/HeatMap.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import {
3 | ComposableMap,
4 | Geographies,
5 | Geography,
6 | Marker,
7 | ZoomableGroup,
8 | } from 'react-simple-maps';
9 | import {
10 | CountedEvent,
11 | GeoJSONFeatureCollection,
12 | IPLocation,
13 | } from '../../types';
14 |
15 | const HeatMap: React.FC = () => {
16 | const [geoJSON, setGeoJSON] = useStateSelected Event: {selectedEventName}
97 | )} 98 |
42 | {geoJSON && (
43 |
48 |
49 |
50 | {({ geographies }) =>
51 | geographies.map((geo) => (
52 |
65 | {ipData.map(({ source_ip, lat, long, count }) => (
66 |
67 | {`Count: ${count}`}
73 |
74 | ))}
75 |
76 |
77 | )}
78 |
79 | );
80 | };
81 |
82 | export default HeatMap;
83 |
--------------------------------------------------------------------------------
/client/src/components/charts/IpAccessOverTime.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { AreaChart, XAxis, YAxis, Area } from 'recharts';
3 | import { CountedEvent } from '../../types';
4 |
5 | export default function IpAccessOverTimeChart({
6 | currentIp,
7 | }: {
8 | currentIp?: string;
9 | }): JSX.Element | null {
10 | const [ipTimes, setIpTimes] = useStateLoading chart...
; 31 | //reversed the times to show the most recent first 32 | return ( 33 |
44 |
69 | );
70 | };
71 |
72 | export default EventsDashboard;
73 |
--------------------------------------------------------------------------------
/client/src/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import {
3 | DragDropContext,
4 | Droppable,
5 | Draggable,
6 | DropResult,
7 | } from '@hello-pangea/dnd';
8 | import { CardState } from '../types';
9 | import UserActivityChart from '../components/charts/UserActivity';
10 | import EventTypeChart from '../components/charts/EventType';
11 | import EventSourceChart from '../components/charts/EventSource';
12 | import HeatMap from '../components/charts/HeatMap';
13 | import IpAccessCombined from '../components/IpAccessCombined';
14 | import AnomalyChart from '../components/charts/AnomalyChart';
15 | import Card from '../components/Card';
16 |
17 | const Home: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) => {
18 | // State to track the current IP (null means no IP selected)
19 | const [currentIp, setCurrentIp] = useStateRecent Events
45 | {loading &&Loading events...
} 46 | {error &&{error}
} 47 | {!loading && !error && ( 48 |
49 | {events.map((event) => (
50 |
58 | )}
59 |
60 | {modalOpen && selectedEvent && (
61 |
62 |
63 |
64 | {(provided) => (
65 |
94 |
95 |
96 | );
97 | };
98 |
99 | export default Home;
100 |
--------------------------------------------------------------------------------
/client/src/pages/Login.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { useNavigate, Link } from 'react-router-dom';
3 | import { UserDetails } from '../types';
4 |
5 | const Login: React.FC<{
6 | setUser: React.Dispatch
70 | <>
71 | {cards.map((card, index) => (
72 |
73 | {(provided, snapshot) => (
74 |
88 | ))}
89 |
90 | {provided.placeholder}
91 |
92 | )}
93 |
82 |
83 | {card.component}
84 |
85 |
86 | )}
87 |
63 |
111 | );
112 | };
113 |
114 | export default Login;
115 |
--------------------------------------------------------------------------------
/client/src/pages/Profile.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { AWSCredentials, ProfileProps, UserDetails } from '../types';
3 |
4 | const Profile: React.FCLogin
64 | {error && ( 65 |
66 | {error}
67 |
68 | )}
69 |
105 |
106 |
110 | 107 | Don't have an account? Sign up here 108 |
109 |
45 |
189 | );
190 | };
191 |
192 | export default Profile;
193 |
--------------------------------------------------------------------------------
/client/src/pages/SignUp.tsx:
--------------------------------------------------------------------------------
1 | // import { deepStrictEqual } from 'assert';
2 | import React, { useState } from 'react';
3 | import { useNavigate } from 'react-router-dom';
4 |
5 | const SignUp: React.FC = () => {
6 | const [username, setUsername] = useState('');
7 | const [displayName, setDisplayName] = useState('');
8 | const [work_email, setWorkEmail] = useState('');
9 | const [workPhone, setWorkPhone] = useState('');
10 | const [password, setPassword] = useState('');
11 | const [confirmPassword, setConfirmPassword] = useState('');
12 | const [error, setError] = useState
46 |
97 |
98 | {/*}
99 |
47 |
73 |
48 | 
52 |
53 |
52 |
54 | 
71 |
72 |
55 |
57 | Username: {user?.username ?? 'Not Logged In'}
56 |
58 |
60 | Display Name: {user?.display_name ?? 'Not Logged In'}
59 |
61 |
63 | Work Email: {user?.work_email ?? 'Not Logged In'}
62 |
64 |
66 | Work Phone: {user?.work_phone ?? 'Not Logged In'}
65 |
71 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
88 |
94 | AWS Log-in Information
95 |
96 |
100 |
187 | */}
188 |
101 |
186 | Alert Settings
102 |
103 |
105 |
106 | Settings related to alerts go here...
104 |AI Settings
107 |
108 |
110 |
111 | Settings related to AI features go here...
109 |Homepage Settings
112 |
113 |
185 |
114 |
115 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
146 |
128 |
134 |
135 |
136 |
137 |
143 |
144 |
145 |
147 |
148 |
167 |
149 |
155 |
156 |
157 |
158 |
164 |
165 |
166 |
168 |
169 |
170 |
171 |
172 |
173 |
179 |
180 |
181 |
182 |
183 |
184 |
65 |
133 | );
134 | };
135 |
136 | export default SignUp;
137 |
--------------------------------------------------------------------------------
/client/src/profile.css:
--------------------------------------------------------------------------------
1 | .profile-container {
2 | display: flex;
3 | flex-wrap: wrap;
4 | position: relative;
5 | min-height: 100vh;
6 | padding: 40px;
7 | background-color: #f3f4f6;
8 | gap: 20px;
9 | justify-content: center;
10 | }
11 |
12 | .left-container,
13 | .right-container {
14 | flex: 1 1 45%;
15 | min-width: 300px;
16 | border: none;
17 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
18 | padding: 30px;
19 | background-color: #ffffff;
20 | border-radius: 8px;
21 | transition: transform 0.2s, box-shadow 0.3s;
22 | display: flex;
23 | flex-direction: column;
24 | align-items: center;
25 | text-align: center;
26 | }
27 |
28 | .right-container {
29 | align-items: flex-start;
30 | }
31 |
32 | .left-container:hover,
33 | .right-container:hover {
34 | transform: scale(1.02);
35 | box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
36 | }
37 |
38 | .aws-login-button,
39 | .logout-button,
40 | .submit-button {
41 | width: 100%;
42 | font-size: 1rem;
43 | padding: 0.75rem 1.5rem;
44 | margin-top: 20px;
45 | border-radius: 8px;
46 | font-family: 'Fredoka', sans-serif;
47 | font-weight: 700;
48 | cursor: pointer;
49 | transition: background-color 0.3s ease, transform 0.2s, box-shadow 0.3s;
50 | }
51 |
52 | .submit-button {
53 | background: #ff9900;
54 | color: white;
55 | border: none;
56 | }
57 |
58 | .submit-button:hover {
59 | background-color: #e68a00;
60 | transform: scale(1.05);
61 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
62 | }
63 |
64 | .logout-button {
65 | background: #d13212;
66 | color: rgba(255, 255, 255, 0.917);
67 | border: none;
68 | }
69 |
70 | .logout-button:hover {
71 | background: #a4260b;
72 | transform: scale(1.05);
73 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
74 | }
75 |
76 | .aws-login-button {
77 | background: #ff9900;
78 | color: white;
79 | border: none;
80 | text-align: center;
81 | }
82 |
83 | .aws-login-button:hover {
84 | background-color: #e68a00;
85 | transform: scale(1.05);
86 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
87 | }
88 |
89 | .aws-login-button a {
90 | color: white;
91 | text-decoration: none;
92 | }
93 |
94 | .profile-picture img {
95 | width: 100px;
96 | height: 100px;
97 | border-radius: 50%;
98 | object-fit: cover;
99 | transition: transform 0.2s;
100 | }
101 |
102 | .profile-picture img:hover {
103 | transform: scale(1.05);
104 | }
105 |
106 | .aws-logo {
107 | width: 120px;
108 | height: auto;
109 | margin-bottom: 20px;
110 | }
111 |
112 | .profile-info {
113 | width: 100%;
114 | }
115 |
116 | .profile-info p {
117 | margin: 10px 0;
118 | color: #333;
119 | font-size: 1rem;
120 | }
121 |
122 | .profile-info .info-container {
123 | padding: 15px;
124 | margin-bottom: 15px;
125 | border: 1px solid #e1e4e8;
126 | border-radius: 8px;
127 | background-color: #fafbfc;
128 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
129 | width: 100%;
130 | text-align: left;
131 | }
132 |
133 | .input-container {
134 | width: 100%;
135 | margin-bottom: 20px;
136 | display: flex;
137 | flex-direction: column;
138 | align-items: flex-start;
139 | }
140 |
141 | .input-container label {
142 | margin-bottom: 8px;
143 | font-weight: bold;
144 | color: #333;
145 | font-size: 1rem;
146 | }
147 |
148 | .input-container input,
149 | .input-container select {
150 | width: 100%;
151 | padding: 12px;
152 | border: 1px solid #e1e4e8;
153 | border-radius: 8px;
154 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
155 | }
156 |
157 | .bordered {
158 | border: 2px solid #0073bb;
159 | padding: 15px;
160 | border-radius: 8px;
161 | margin-bottom: 15px;
162 | }
163 |
164 | .settings-section {
165 | width: 100%;
166 | }
167 |
168 | .settings-section h3 {
169 | margin-top: 20px;
170 | font-weight: bold;
171 | text-align: left;
172 | width: 100%;
173 | color: #232f3e;
174 | }
175 |
176 | .settings-section .info-container {
177 | padding: 15px;
178 | margin-bottom: 15px;
179 | border: 1px solid #e1e4e8;
180 | border-radius: 8px;
181 | background-color: #fafbfc;
182 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
183 | width: 100%;
184 | text-align: left;
185 | }
186 |
187 | .dark-mode .profile-container,
188 | .dark-mode .left-container,
189 | .dark-mode .right-container {
190 | background-color: #232f3e;
191 | border: 1px solid #444;
192 | color: lightgray;
193 | box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
194 | }
195 |
196 | .dark-mode .left-container:hover,
197 | .dark-mode .right-container:hover {
198 | transform: scale(1.02);
199 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
200 | }
201 |
202 | .dark-mode .aws-login-button {
203 | background: #ff9900;
204 | }
205 |
206 | .dark-mode .aws-login-button:hover {
207 | background-color: #e68a00;
208 | }
209 |
210 | .dark-mode .logout-button {
211 | background: #a4260b;
212 | color: white;
213 | }
214 |
215 | .dark-mode .logout-button:hover {
216 | background: #7b1e06;
217 | }
218 |
219 | .dark-mode .profile-info p {
220 | color: lightgray;
221 | }
222 |
223 | .dark-mode .profile-info .info-container {
224 | background-color: #3a3a3a;
225 | border: 1px solid #555;
226 | color: lightgray;
227 | }
228 |
229 | .dark-mode .settings-section h3 {
230 | color: lightgray;
231 | }
232 |
233 | .dark-mode .settings-section .info-container {
234 | background-color: #3a3a3a;
235 | border: 1px solid #555;
236 | color: lightgray;
237 | }
238 |
239 | .dark-mode .input-container label {
240 | color: lightgray;
241 | }
242 |
243 | .dark-mode .input-container input,
244 | .dark-mode .input-container select {
245 | background-color: #3a3a3a;
246 | border: 1px solid #555;
247 | color: lightgray;
248 | }
249 |
250 | .dark-mode .bordered {
251 | border: 2px solid #ff9900;
252 | }
253 |
--------------------------------------------------------------------------------
/client/src/types.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * =================================
3 | * CLIENT TYPES
4 | * =================================
5 | */
6 |
7 | export interface UserDetails extends AWSCredentials {
8 | username: string;
9 | display_name: string;
10 | work_email: string;
11 | work_phone: string;
12 | }
13 |
14 | export interface AWSCredentials {
15 | aws_access_key: string;
16 | aws_secret_access_key: string;
17 | aws_region: string;
18 | }
19 |
20 | /**
21 | * REACT PROPS TYPES
22 | */
23 |
24 | export interface ProfileProps {
25 | isDarkMode: boolean;
26 | user: UserDetails | null;
27 | updateCredentials: (credentials: AWSCredentials) => void;
28 | }
29 |
30 | export interface CardProps {
31 | title: string;
32 | children: React.ReactNode;
33 | isDarkMode: boolean;
34 | }
35 |
36 | export interface CardState {
37 | id: string;
38 | title: string;
39 | component: React.ReactNode;
40 | }
41 |
42 | export interface IpAccessCombinedProps {
43 | currentIp?: string;
44 | setCurrentIp: React.DispatchSign Up
66 | {error &&{error}
}
67 |
132 |