source: templates/dashboard_fixed.html@ 505f39a

Last change on this file since 505f39a was 640ed89, checked in by istevanoska <ilinastevanoska@…>, 7 months ago

Initial commit
  • Property mode set to 100644
File size: 13.6 KB
RevLine 
[640ed89]1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Sysmon Dashboard - Fixed</title>
7 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10 <style>
11 body { background-color: #f5f7fa; }
12 .card { margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,.05); }
13 .stat-card { border-left: 4px solid; }
14 .event-item { padding: 10px; border-left: 3px solid; margin-bottom: 5px; background: white; }
15 .event-dns { border-left-color: #3498db; }
16 .event-process { border-left-color: #2ecc71; }
17 .event-network { border-left-color: #e74c3c; }
18 .tab-content { padding-top: 20px; }
19 </style>
20</head>
21<body>
22 <nav class="navbar navbar-dark bg-dark">
23 <div class="container-fluid">
24 <span class="navbar-brand">
25 <i class="fas fa-shield-alt"></i> Sysmon Dashboard
26 </span>
27 <span class="navbar-text" id="currentTime"></span>
28 </div>
29 </nav>
30
31 <div class="container-fluid mt-3">
32 <!-- Stats -->
33 <div class="row mb-3">
34 <div class="col-md-2">
35 <div class="card stat-card border-left-primary">
36 <div class="card-body">
37 <h6>Total Events</h6>
38 <h3 id="totalEvents">0</h3>
39 </div>
40 </div>
41 </div>
42 <div class="col-md-2">
43 <div class="card stat-card border-left-success">
44 <div class="card-body">
45 <h6>Computers</h6>
46 <h3><span id="onlineComputers">0</span>/<span id="totalComputers">0</span></h3>
47 </div>
48 </div>
49 </div>
50 <div class="col-md-2">
51 <div class="card stat-card border-left-info">
52 <div class="card-body">
53 <h6>DNS Queries</h6>
54 <h3 id="dnsCount">0</h3>
55 </div>
56 </div>
57 </div>
58 <div class="col-md-2">
59 <div class="card stat-card border-left-warning">
60 <div class="card-body">
61 <h6>Processes</h6>
62 <h3 id="processCount">0</h3>
63 </div>
64 </div>
65 </div>
66 <div class="col-md-2">
67 <div class="card stat-card border-left-danger">
68 <div class="card-body">
69 <h6>Network</h6>
70 <h3 id="networkCount">0</h3>
71 </div>
72 </div>
73 </div>
74 <div class="col-md-2">
75 <div class="card stat-card border-left-secondary">
76 <div class="card-body">
77 <h6>Last Update</h6>
78 <h6 id="lastUpdate">Just now</h6>
79 </div>
80 </div>
81 </div>
82 </div>
83
84 <!-- Tabs -->
85 <ul class="nav nav-tabs">
86 <li class="nav-item">
87 <a class="nav-link active" data-bs-toggle="tab" href="#events">
88 <i class="fas fa-list"></i> All Events
89 </a>
90 </li>
91 <li class="nav-item">
92 <a class="nav-link" data-bs-toggle="tab" href="#dns">
93 <i class="fas fa-globe"></i> DNS
94 </a>
95 </li>
96 <li class="nav-item">
97 <a class="nav-link" data-bs-toggle="tab" href="#processes">
98 <i class="fas fa-cogs"></i> Processes
99 </a>
100 </li>
101 <li class="nav-item">
102 <a class="nav-link" data-bs-toggle="tab" href="#network">
103 <i class="fas fa-wifi"></i> Network
104 </a>
105 </li>
106 </ul>
107
108 <div class="tab-content">
109 <!-- Events Tab -->
110 <div id="events" class="tab-pane active">
111 <div class="card">
112 <div class="card-header">
113 <h5>Recent Events</h5>
114 </div>
115 <div class="card-body">
116 <div id="eventsList">Loading...</div>
117 </div>
118 </div>
119 </div>
120
121 <!-- DNS Tab -->
122 <div id="dns" class="tab-pane">
123 <div class="card">
124 <div class="card-header">
125 <h5>DNS Queries</h5>
126 </div>
127 <div class="card-body">
128 <table class="table table-sm">
129 <thead>
130 <tr>
131 <th>Time</th>
132 <th>Computer</th>
133 <th>Domain</th>
134 <th>Results</th>
135 <th>Process</th>
136 </tr>
137 </thead>
138 <tbody id="dnsTable">
139 </tbody>
140 </table>
141 </div>
142 </div>
143 </div>
144
145 <!-- Processes Tab -->
146 <div id="processes" class="tab-pane">
147 <div class="card">
148 <div class="card-header">
149 <h5>Process Executions</h5>
150 </div>
151 <div class="card-body">
152 <table class="table table-sm">
153 <thead>
154 <tr>
155 <th>Time</th>
156 <th>Computer</th>
157 <th>Process</th>
158 <th>User</th>
159 <th>Command</th>
160 </tr>
161 </thead>
162 <tbody id="processesTable">
163 </tbody>
164 </table>
165 </div>
166 </div>
167 </div>
168
169 <!-- Network Tab -->
170 <div id="network" class="tab-pane">
171 <div class="card">
172 <div class="card-header">
173 <h5>Network Connections</h5>
174 </div>
175 <div class="card-body">
176 <table class="table table-sm">
177 <thead>
178 <tr>
179 <th>Time</th>
180 <th>Computer</th>
181 <th>Process</th>
182 <th>Destination</th>
183 <th>Port</th>
184 </tr>
185 </thead>
186 <tbody id="networkTable">
187 </tbody>
188 </table>
189 </div>
190 </div>
191 </div>
192 </div>
193 </div>
194
195 <!-- Bootstrap JS -->
196 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
197
198 <script>
199 // Popraveni API endpoints
200 const API_ENDPOINTS = {
201 stats: '/api/stats',
202 events: '/api/detailed_events',
203 dns: '/api/dns_queries',
204 processes: '/api/process_creations',
205 network: '/api/network_connections',
206 computers: '/api/computers'
207 };
208
209 $(document).ready(function() {
210 updateTime();
211 loadAllData();
212 setInterval(loadAllData, 10000);
213 setInterval(updateTime, 1000);
214 });
215
216 function updateTime() {
217 $('#currentTime').text(new Date().toLocaleString());
218 }
219
220 function loadAllData() {
221 loadStats();
222 loadEvents();
223 loadDNS();
224 loadProcesses();
225 loadNetwork();
226 }
227
228 function loadStats() {
229 $.get(API_ENDPOINTS.stats, function(data) {
230 $('#totalEvents').text(data.total_events);
231 $('#totalComputers').text(data.total_computers);
232 $('#onlineComputers').text(data.online_computers);
233 $('#dnsCount').text(data.dns_queries);
234 $('#processCount').text(data.process_creations);
235 $('#networkCount').text(data.network_connections);
236 $('#lastUpdate').text(new Date().toLocaleTimeString());
237 });
238 }
239
240 function loadEvents() {
241 $.get(API_ENDPOINTS.events + '?limit=20', function(data) {
242 let html = '';
243 data.events.forEach(event => {
244 let badge = '';
245 let text = '';
246
247 if (event.event_id === 22 && event.dns_query) {
248 badge = '<span class="badge bg-info me-2">DNS</span>';
249 text = `Query: <strong>${event.dns_query}</strong> → ${event.dns_results || 'No results'} (Process: ${event.dns_process || 'Unknown'})`;
250 }
251 else if (event.event_id === 1 && event.process_name) {
252 badge = '<span class="badge bg-success me-2">PROCESS</span>';
253 const procName = event.process_name.split('\').pop();
254 text = `Process: <strong>${procName}</strong> | User: ${event.process_user || 'Unknown'} | Cmd: ${event.command_line ? event.command_line.substring(0, 80) + '...' : 'N/A'}`;
255 }
256 else if (event.event_id === 3 && event.dest_ip) {
257 badge = '<span class="badge bg-danger me-2">NETWORK</span>';
258 const procName = event.process_name ? event.process_name.split('\').pop() : 'Unknown';
259 text = `Connection: <strong>${procName}</strong> → ${event.dest_ip}:${event.dest_port}`;
260 }
261 else {
262 badge = `<span class="badge bg-secondary me-2">${event.event_type}</span>`;
263 text = event.event_type;
264 }
265
266 html += `
267 <div class="event-item">
268 <div class="small text-muted">${formatTime(event.timestamp)} | ${event.computer}</div>
269 <div>${badge} ${text}</div>
270 </div>
271 `;
272 });
273 $('#eventsList').html(html);
274 });
275 }
276
277 function loadDNS() {
278 $.get(API_ENDPOINTS.dns + '?limit=20', function(data) {
279 let html = '';
280 data.dns_queries.forEach(query => {
281 const process = query.dns_process ? query.dns_process.split('\').pop() : 'Unknown';
282 html += `
283 <tr>
284 <td>${formatTime(query.timestamp)}</td>
285 <td>${query.computer}</td>
286 <td><strong>${query.dns_query}</strong></td>
287 <td>${query.dns_results || 'N/A'}</td>
288 <td>${process}</td>
289 </tr>
290 `;
291 });
292 $('#dnsTable').html(html);
293 });
294 }
295
296 function loadProcesses() {
297 $.get(API_ENDPOINTS.processes + '?limit=20', function(data) {
298 let html = '';
299 data.process_creations.forEach(proc => {
300 const processName = proc.process_name ? proc.process_name.split('\').pop() : 'Unknown';
301 html += `
302 <tr>
303 <td>${formatTime(proc.timestamp)}</td>
304 <td>${proc.computer}</td>
305 <td><strong>${processName}</strong></td>
306 <td>${proc.process_user || 'N/A'}</td>
307 <td><small>${proc.command_line ? proc.command_line.substring(0, 80) + '...' : 'N/A'}</small></td>
308 </tr>
309 `;
310 });
311 $('#processesTable').html(html);
312 });
313 }
314
315 function loadNetwork() {
316 $.get(API_ENDPOINTS.network + '?limit=20', function(data) {
317 let html = '';
318 data.network_connections.forEach(conn => {
319 const processName = conn.process_name ? conn.process_name.split('\').pop() : 'Unknown';
320 html += `
321 <tr>
322 <td>${formatTime(conn.timestamp)}</td>
323 <td>${conn.computer}</td>
324 <td>${processName}</td>
325 <td>${conn.dest_ip}</td>
326 <td>${conn.dest_port}</td>
327 </tr>
328 `;
329 });
330 $('#networkTable').html(html);
331 });
332 }
333
334 function formatTime(timestamp) {
335 if (!timestamp) return 'N/A';
336 const date = new Date(timestamp);
337 return date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
338 }
339 </script>
340</body>
341</html>
Note: See TracBrowser for help on using the repository browser.