ciscollm-cli 1.0.10 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -2
- package/dist/core/agent/AgentLoop.js +30 -0
- package/dist/core/agent/AgentLoop.js.map +1 -1
- package/dist/core/guardrails/AuditLogger.d.ts +2 -0
- package/dist/core/guardrails/AuditLogger.js +5 -0
- package/dist/core/guardrails/AuditLogger.js.map +1 -1
- package/dist/core/guardrails/CommandFirewall.d.ts +1 -0
- package/dist/core/guardrails/CommandFirewall.js +43 -0
- package/dist/core/guardrails/CommandFirewall.js.map +1 -1
- package/dist/core/guardrails/NetworkAudit.d.ts +14 -0
- package/dist/core/guardrails/NetworkAudit.js +105 -0
- package/dist/core/guardrails/NetworkAudit.js.map +1 -0
- package/dist/core/guardrails/PreExecutionValidator.js +3 -2
- package/dist/core/guardrails/PreExecutionValidator.js.map +1 -1
- package/dist/core/rollback/StateDiff.d.ts +7 -0
- package/dist/core/rollback/StateDiff.js +11 -0
- package/dist/core/rollback/StateDiff.js.map +1 -1
- package/dist/core/topology/TopologyDiscovery.js +5 -4
- package/dist/core/topology/TopologyDiscovery.js.map +1 -1
- package/dist/index.js +82 -1
- package/dist/index.js.map +1 -1
- package/dist/server/dashboard.d.ts +3 -0
- package/dist/server/dashboard.js +1049 -0
- package/dist/server/dashboard.js.map +1 -0
- package/dist/server/shell-simulator.js +60 -1
- package/dist/server/shell-simulator.js.map +1 -1
- package/dist/shared/utils.d.ts +2 -0
- package/dist/shared/utils.js +63 -0
- package/dist/shared/utils.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,1049 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.startDashboardServer = startDashboardServer;
|
|
7
|
+
const http_1 = __importDefault(require("http"));
|
|
8
|
+
const AuditLogger_1 = require("../core/guardrails/AuditLogger");
|
|
9
|
+
const StateDiff_1 = require("../core/rollback/StateDiff");
|
|
10
|
+
const chalk_1 = __importDefault(require("chalk"));
|
|
11
|
+
let activeServer = null;
|
|
12
|
+
function startDashboardServer(coordinator, port) {
|
|
13
|
+
if (activeServer) {
|
|
14
|
+
try {
|
|
15
|
+
activeServer.close();
|
|
16
|
+
}
|
|
17
|
+
catch { }
|
|
18
|
+
}
|
|
19
|
+
const server = http_1.default.createServer((req, res) => {
|
|
20
|
+
const url = req.url || '';
|
|
21
|
+
const method = req.method || 'GET';
|
|
22
|
+
res.setHeader('Access-Control-Allow-Origin', '*');
|
|
23
|
+
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
|
|
24
|
+
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
|
|
25
|
+
if (method === 'OPTIONS') {
|
|
26
|
+
res.writeHead(200);
|
|
27
|
+
res.end();
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (method === 'GET' && url === '/') {
|
|
31
|
+
res.writeHead(200, { 'Content-Type': 'text/html' });
|
|
32
|
+
res.end(getHtmlContent(port));
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
if (method === 'GET' && url === '/api/topology') {
|
|
36
|
+
res.writeHead(200, { 'Content-Type': 'application/json' });
|
|
37
|
+
res.end(JSON.stringify(coordinator.getTopology()));
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
if (method === 'GET' && url === '/api/sessions') {
|
|
41
|
+
res.writeHead(200, { 'Content-Type': 'application/json' });
|
|
42
|
+
res.end(JSON.stringify(coordinator.getAllStates()));
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
if (method === 'GET' && url === '/api/logs') {
|
|
46
|
+
res.writeHead(200, { 'Content-Type': 'application/json' });
|
|
47
|
+
res.end(JSON.stringify(AuditLogger_1.AuditLogger.getEntries()));
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
if (method === 'GET' && url === '/api/diffs') {
|
|
51
|
+
res.writeHead(200, { 'Content-Type': 'application/json' });
|
|
52
|
+
res.end(JSON.stringify(StateDiff_1.StateDiff.getDiffHistory()));
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (method === 'POST' && url === '/api/rollback') {
|
|
56
|
+
const sessions = coordinator.getSessions();
|
|
57
|
+
let count = 0;
|
|
58
|
+
for (const [id, session] of sessions.entries()) {
|
|
59
|
+
try {
|
|
60
|
+
session.execute('configure replace flash:backup-agent.cfg force');
|
|
61
|
+
count++;
|
|
62
|
+
}
|
|
63
|
+
catch { }
|
|
64
|
+
}
|
|
65
|
+
res.writeHead(200, { 'Content-Type': 'application/json' });
|
|
66
|
+
res.end(JSON.stringify({ status: 'success', message: `Triggered configuration replace on ${count} devices.` }));
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
res.writeHead(404, { 'Content-Type': 'application/json' });
|
|
70
|
+
res.end(JSON.stringify({ error: 'Not Found' }));
|
|
71
|
+
});
|
|
72
|
+
server.on('error', (err) => {
|
|
73
|
+
if (err.code === 'EADDRINUSE') {
|
|
74
|
+
console.warn(chalk_1.default.bold.yellow(`\n[!] Warning: Port ${port} is already in use. Live Visual Dashboard could not start.`));
|
|
75
|
+
console.warn(chalk_1.default.yellow(` Please specify a different port using '--dashboard-port <port>' or free up port ${port}.\n`));
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
console.warn(chalk_1.default.bold.yellow(`\n[!] Warning: Visual Dashboard server error: ${err.message}\n`));
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
server.listen(port, '0.0.0.0', () => {
|
|
82
|
+
console.log(chalk_1.default.bold.green(`[+] Live HTML Visual Dashboard running at: http://localhost:${port}`));
|
|
83
|
+
});
|
|
84
|
+
activeServer = server;
|
|
85
|
+
return server;
|
|
86
|
+
}
|
|
87
|
+
function getHtmlContent(port) {
|
|
88
|
+
return `<!DOCTYPE html>
|
|
89
|
+
<html lang="en">
|
|
90
|
+
<head>
|
|
91
|
+
<meta charset="UTF-8">
|
|
92
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
93
|
+
<title>CiscoLLM Control Center</title>
|
|
94
|
+
<!-- Google Fonts -->
|
|
95
|
+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
96
|
+
<!-- Vis Network CDN -->
|
|
97
|
+
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
|
|
98
|
+
<style>
|
|
99
|
+
:root {
|
|
100
|
+
--bg-color: #0B0F19;
|
|
101
|
+
--bg-deep: #070A12;
|
|
102
|
+
--card-bg: rgba(17, 24, 39, 0.7);
|
|
103
|
+
--border-color: rgba(255, 255, 255, 0.08);
|
|
104
|
+
--border-glow: rgba(99, 102, 241, 0.2);
|
|
105
|
+
--text-main: #F3F4F6;
|
|
106
|
+
--text-muted: #9CA3AF;
|
|
107
|
+
--accent: #6366F1;
|
|
108
|
+
--accent-glow: rgba(99, 102, 241, 0.35);
|
|
109
|
+
--success: #10B981;
|
|
110
|
+
--warning: #F59E0B;
|
|
111
|
+
--danger: #EF4444;
|
|
112
|
+
--glass-blur: blur(12px);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
* {
|
|
116
|
+
box-sizing: border-box;
|
|
117
|
+
margin: 0;
|
|
118
|
+
padding: 0;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
body {
|
|
122
|
+
font-family: 'Outfit', sans-serif;
|
|
123
|
+
background-color: var(--bg-color);
|
|
124
|
+
background-image: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
|
|
125
|
+
radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 40%);
|
|
126
|
+
color: var(--text-main);
|
|
127
|
+
min-height: 100vh;
|
|
128
|
+
display: flex;
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
overflow-x: hidden;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
header {
|
|
134
|
+
background: rgba(11, 15, 25, 0.8);
|
|
135
|
+
backdrop-filter: var(--glass-blur);
|
|
136
|
+
border-bottom: 1px solid var(--border-color);
|
|
137
|
+
padding: 1rem 1.5rem;
|
|
138
|
+
display: flex;
|
|
139
|
+
flex-wrap: wrap;
|
|
140
|
+
justify-content: space-between;
|
|
141
|
+
align-items: center;
|
|
142
|
+
position: sticky;
|
|
143
|
+
top: 0;
|
|
144
|
+
z-index: 100;
|
|
145
|
+
gap: 1rem;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.brand-container {
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
gap: 0.75rem;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.brand-logo {
|
|
155
|
+
width: 10px;
|
|
156
|
+
height: 10px;
|
|
157
|
+
background-color: var(--success);
|
|
158
|
+
border-radius: 50%;
|
|
159
|
+
box-shadow: 0 0 12px var(--success);
|
|
160
|
+
animation: pulse-active 2s infinite;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
header h1 {
|
|
164
|
+
font-size: 1.35rem;
|
|
165
|
+
font-weight: 700;
|
|
166
|
+
letter-spacing: -0.5px;
|
|
167
|
+
background: linear-gradient(135deg, #FFF 60%, var(--accent) 100%);
|
|
168
|
+
-webkit-background-clip: text;
|
|
169
|
+
-webkit-text-fill-color: transparent;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
header h1 span {
|
|
173
|
+
font-weight: 400;
|
|
174
|
+
font-size: 0.9rem;
|
|
175
|
+
color: var(--text-muted);
|
|
176
|
+
margin-left: 0.5rem;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.actions {
|
|
180
|
+
display: flex;
|
|
181
|
+
gap: 0.75rem;
|
|
182
|
+
align-items: center;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
button {
|
|
186
|
+
padding: 0.6rem 1.2rem;
|
|
187
|
+
border-radius: 0.5rem;
|
|
188
|
+
border: 1px solid transparent;
|
|
189
|
+
font-weight: 600;
|
|
190
|
+
font-size: 0.9rem;
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
193
|
+
font-family: inherit;
|
|
194
|
+
display: flex;
|
|
195
|
+
align-items: center;
|
|
196
|
+
gap: 0.5rem;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.btn-primary {
|
|
200
|
+
background-color: var(--accent);
|
|
201
|
+
color: white;
|
|
202
|
+
box-shadow: 0 4px 14px var(--accent-glow);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.btn-primary:hover {
|
|
206
|
+
background-color: #4f46e5;
|
|
207
|
+
transform: translateY(-1px);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.btn-danger {
|
|
211
|
+
background: rgba(239, 68, 68, 0.1);
|
|
212
|
+
color: var(--danger);
|
|
213
|
+
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.btn-danger:hover {
|
|
217
|
+
background: var(--danger);
|
|
218
|
+
color: white;
|
|
219
|
+
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
|
|
220
|
+
transform: translateY(-1px);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* Responsive Metric Cards Grid */
|
|
224
|
+
.metrics-grid {
|
|
225
|
+
display: grid;
|
|
226
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
227
|
+
gap: 1rem;
|
|
228
|
+
padding: 1.5rem 1.5rem 0 1.5rem;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.metric-card {
|
|
232
|
+
background: var(--card-bg);
|
|
233
|
+
backdrop-filter: var(--glass-blur);
|
|
234
|
+
border: 1px solid var(--border-color);
|
|
235
|
+
border-radius: 0.75rem;
|
|
236
|
+
padding: 1.25rem;
|
|
237
|
+
display: flex;
|
|
238
|
+
align-items: center;
|
|
239
|
+
justify-content: space-between;
|
|
240
|
+
transition: transform 0.2s ease, border-color 0.2s ease;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.metric-card:hover {
|
|
244
|
+
border-color: var(--border-glow);
|
|
245
|
+
transform: translateY(-2px);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.metric-info h3 {
|
|
249
|
+
font-size: 0.8rem;
|
|
250
|
+
color: var(--text-muted);
|
|
251
|
+
text-transform: uppercase;
|
|
252
|
+
letter-spacing: 0.5px;
|
|
253
|
+
margin-bottom: 0.25rem;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.metric-info .value {
|
|
257
|
+
font-size: 1.75rem;
|
|
258
|
+
font-weight: 700;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.metric-icon {
|
|
262
|
+
font-size: 1.5rem;
|
|
263
|
+
opacity: 0.8;
|
|
264
|
+
color: var(--accent);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
/* Tabs Navigation */
|
|
268
|
+
.tab-bar {
|
|
269
|
+
display: flex;
|
|
270
|
+
padding: 0 1.5rem;
|
|
271
|
+
margin-top: 1.5rem;
|
|
272
|
+
border-bottom: 1px solid var(--border-color);
|
|
273
|
+
gap: 1.5rem;
|
|
274
|
+
overflow-x: auto;
|
|
275
|
+
white-space: nowrap;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.tab-button {
|
|
279
|
+
background: none;
|
|
280
|
+
border: none;
|
|
281
|
+
color: var(--text-muted);
|
|
282
|
+
padding: 0.75rem 0.25rem;
|
|
283
|
+
font-weight: 500;
|
|
284
|
+
font-size: 0.95rem;
|
|
285
|
+
border-bottom: 2px solid transparent;
|
|
286
|
+
border-radius: 0;
|
|
287
|
+
transition: all 0.2s ease;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.tab-button:hover {
|
|
291
|
+
color: var(--text-main);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.tab-button.active {
|
|
295
|
+
color: var(--accent);
|
|
296
|
+
border-bottom-color: var(--accent);
|
|
297
|
+
font-weight: 600;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/* Tab Contents Layout */
|
|
301
|
+
.tab-content {
|
|
302
|
+
display: none;
|
|
303
|
+
flex: 1;
|
|
304
|
+
padding: 1.5rem;
|
|
305
|
+
animation: fadeIn 0.3s ease-in-out;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.tab-content.active {
|
|
309
|
+
display: flex;
|
|
310
|
+
flex-direction: column;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/* Panel Design */
|
|
314
|
+
.panel-container {
|
|
315
|
+
display: grid;
|
|
316
|
+
grid-template-columns: 1.4fr 1fr;
|
|
317
|
+
gap: 1.5rem;
|
|
318
|
+
flex: 1;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.panel {
|
|
322
|
+
background: var(--card-bg);
|
|
323
|
+
backdrop-filter: var(--glass-blur);
|
|
324
|
+
border: 1px solid var(--border-color);
|
|
325
|
+
border-radius: 0.75rem;
|
|
326
|
+
display: flex;
|
|
327
|
+
flex-direction: column;
|
|
328
|
+
overflow: hidden;
|
|
329
|
+
min-height: 450px;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.panel-header {
|
|
333
|
+
padding: 1rem 1.25rem;
|
|
334
|
+
border-bottom: 1px solid var(--border-color);
|
|
335
|
+
font-weight: 600;
|
|
336
|
+
display: flex;
|
|
337
|
+
justify-content: space-between;
|
|
338
|
+
align-items: center;
|
|
339
|
+
font-size: 1rem;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.panel-content {
|
|
343
|
+
flex: 1;
|
|
344
|
+
overflow-y: auto;
|
|
345
|
+
padding: 1.25rem;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
/* Topology Canvas style */
|
|
349
|
+
#topology-canvas {
|
|
350
|
+
position: absolute;
|
|
351
|
+
top: 0;
|
|
352
|
+
left: 0;
|
|
353
|
+
width: 100%;
|
|
354
|
+
height: 100%;
|
|
355
|
+
background-color: var(--bg-deep);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/* Active Sessions cards styling */
|
|
359
|
+
.session-grid {
|
|
360
|
+
display: grid;
|
|
361
|
+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
362
|
+
gap: 1rem;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.session-card {
|
|
366
|
+
background: rgba(30, 41, 59, 0.4);
|
|
367
|
+
border: 1px solid var(--border-color);
|
|
368
|
+
border-radius: 0.5rem;
|
|
369
|
+
padding: 1rem;
|
|
370
|
+
display: flex;
|
|
371
|
+
flex-direction: column;
|
|
372
|
+
gap: 0.5rem;
|
|
373
|
+
transition: border-color 0.2s ease;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.session-card:hover {
|
|
377
|
+
border-color: var(--accent);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.session-title {
|
|
381
|
+
display: flex;
|
|
382
|
+
justify-content: space-between;
|
|
383
|
+
align-items: center;
|
|
384
|
+
font-weight: 600;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.session-badge {
|
|
388
|
+
font-size: 0.75rem;
|
|
389
|
+
padding: 0.15rem 0.4rem;
|
|
390
|
+
border-radius: 0.25rem;
|
|
391
|
+
font-weight: 600;
|
|
392
|
+
background: rgba(99, 102, 241, 0.15);
|
|
393
|
+
color: #a5b4fc;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.session-field {
|
|
397
|
+
font-size: 0.85rem;
|
|
398
|
+
color: var(--text-muted);
|
|
399
|
+
display: flex;
|
|
400
|
+
justify-content: space-between;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.session-field span:last-child {
|
|
404
|
+
color: var(--text-main);
|
|
405
|
+
font-family: 'JetBrains Mono', monospace;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
/* Log console styling */
|
|
409
|
+
.console-controls {
|
|
410
|
+
display: flex;
|
|
411
|
+
flex-wrap: wrap;
|
|
412
|
+
gap: 0.75rem;
|
|
413
|
+
margin-bottom: 1rem;
|
|
414
|
+
align-items: center;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.search-input {
|
|
418
|
+
background: rgba(15, 23, 42, 0.6);
|
|
419
|
+
border: 1px solid var(--border-color);
|
|
420
|
+
border-radius: 0.375rem;
|
|
421
|
+
padding: 0.5rem 0.75rem;
|
|
422
|
+
color: var(--text-main);
|
|
423
|
+
font-family: inherit;
|
|
424
|
+
font-size: 0.85rem;
|
|
425
|
+
flex: 1;
|
|
426
|
+
min-width: 200px;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.search-input:focus {
|
|
430
|
+
outline: none;
|
|
431
|
+
border-color: var(--accent);
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.filter-group {
|
|
435
|
+
display: flex;
|
|
436
|
+
gap: 0.35rem;
|
|
437
|
+
overflow-x: auto;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.filter-btn {
|
|
441
|
+
background: rgba(30, 41, 59, 0.5);
|
|
442
|
+
border: 1px solid var(--border-color);
|
|
443
|
+
color: var(--text-muted);
|
|
444
|
+
padding: 0.35rem 0.75rem;
|
|
445
|
+
font-size: 0.8rem;
|
|
446
|
+
border-radius: 0.25rem;
|
|
447
|
+
font-weight: 500;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.filter-btn.active {
|
|
451
|
+
background: var(--accent);
|
|
452
|
+
color: white;
|
|
453
|
+
border-color: var(--accent);
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.log-list {
|
|
457
|
+
display: flex;
|
|
458
|
+
flex-direction: column;
|
|
459
|
+
gap: 0.75rem;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.log-item {
|
|
463
|
+
background: rgba(15, 23, 42, 0.4);
|
|
464
|
+
border: 1px solid var(--border-color);
|
|
465
|
+
border-radius: 0.5rem;
|
|
466
|
+
padding: 0.85rem 1rem;
|
|
467
|
+
font-family: 'JetBrains Mono', monospace;
|
|
468
|
+
font-size: 0.85rem;
|
|
469
|
+
animation: slideIn 0.2s ease-out;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.log-header {
|
|
473
|
+
display: flex;
|
|
474
|
+
justify-content: space-between;
|
|
475
|
+
margin-bottom: 0.35rem;
|
|
476
|
+
flex-wrap: wrap;
|
|
477
|
+
gap: 0.5rem;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.status-badge {
|
|
481
|
+
display: inline-block;
|
|
482
|
+
padding: 0.15rem 0.4rem;
|
|
483
|
+
border-radius: 0.25rem;
|
|
484
|
+
font-size: 0.725rem;
|
|
485
|
+
font-weight: 700;
|
|
486
|
+
text-transform: uppercase;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.status-success { background: rgba(16, 185, 129, 0.15); color: var(--success); }
|
|
490
|
+
.status-rollback { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
|
|
491
|
+
.status-blocked { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
|
|
492
|
+
|
|
493
|
+
.log-thought {
|
|
494
|
+
color: var(--text-muted);
|
|
495
|
+
font-style: italic;
|
|
496
|
+
margin-top: 0.35rem;
|
|
497
|
+
font-family: 'Outfit', sans-serif;
|
|
498
|
+
font-size: 0.8rem;
|
|
499
|
+
border-left: 2px solid var(--border-glow);
|
|
500
|
+
padding-left: 0.5rem;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
/* Diff styling */
|
|
504
|
+
.diff-added { color: var(--success); font-family: 'JetBrains Mono', monospace; }
|
|
505
|
+
.diff-removed { color: var(--danger); font-family: 'JetBrains Mono', monospace; }
|
|
506
|
+
.diff-modified { color: var(--warning); font-family: 'JetBrains Mono', monospace; }
|
|
507
|
+
|
|
508
|
+
/* Comparative Audit Styling */
|
|
509
|
+
.audit-visualizer {
|
|
510
|
+
display: grid;
|
|
511
|
+
grid-template-columns: 1fr 1fr;
|
|
512
|
+
gap: 1.5rem;
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
.audit-card {
|
|
516
|
+
background: rgba(30, 41, 59, 0.3);
|
|
517
|
+
border: 1px solid var(--border-color);
|
|
518
|
+
border-radius: 0.5rem;
|
|
519
|
+
padding: 1rem;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.audit-card h4 {
|
|
523
|
+
font-size: 0.9rem;
|
|
524
|
+
text-transform: uppercase;
|
|
525
|
+
letter-spacing: 0.5px;
|
|
526
|
+
color: var(--text-muted);
|
|
527
|
+
margin-bottom: 0.75rem;
|
|
528
|
+
border-bottom: 1px solid var(--border-color);
|
|
529
|
+
padding-bottom: 0.35rem;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.audit-metric {
|
|
533
|
+
display: flex;
|
|
534
|
+
justify-content: space-between;
|
|
535
|
+
padding: 0.5rem 0;
|
|
536
|
+
border-bottom: 1px dashed rgba(255,255,255,0.03);
|
|
537
|
+
font-size: 0.9rem;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
.audit-metric:last-child {
|
|
541
|
+
border-bottom: none;
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
/* Responsive Layout Overrides */
|
|
545
|
+
@media (max-width: 1024px) {
|
|
546
|
+
.panel-container {
|
|
547
|
+
grid-template-columns: 1fr;
|
|
548
|
+
}
|
|
549
|
+
.audit-visualizer {
|
|
550
|
+
grid-template-columns: 1fr;
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
@media (max-width: 640px) {
|
|
555
|
+
header {
|
|
556
|
+
padding: 0.75rem 1rem;
|
|
557
|
+
}
|
|
558
|
+
header h1 {
|
|
559
|
+
font-size: 1.15rem;
|
|
560
|
+
}
|
|
561
|
+
.metrics-grid {
|
|
562
|
+
grid-template-columns: 1fr;
|
|
563
|
+
padding: 1rem 1rem 0 1rem;
|
|
564
|
+
}
|
|
565
|
+
.tab-bar {
|
|
566
|
+
padding: 0 1rem;
|
|
567
|
+
margin-top: 1rem;
|
|
568
|
+
}
|
|
569
|
+
.tab-content {
|
|
570
|
+
padding: 1rem;
|
|
571
|
+
}
|
|
572
|
+
.console-controls {
|
|
573
|
+
flex-direction: column;
|
|
574
|
+
align-items: stretch;
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
/* Keyframes */
|
|
579
|
+
@keyframes pulse-active {
|
|
580
|
+
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
|
|
581
|
+
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
|
|
582
|
+
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
@keyframes fadeIn {
|
|
586
|
+
from { opacity: 0; transform: translateY(3px); }
|
|
587
|
+
to { opacity: 1; transform: translateY(0); }
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
@keyframes slideIn {
|
|
591
|
+
from { transform: translateY(5px); opacity: 0; }
|
|
592
|
+
to { transform: translateY(0); opacity: 1; }
|
|
593
|
+
}
|
|
594
|
+
</style>
|
|
595
|
+
</head>
|
|
596
|
+
<body>
|
|
597
|
+
<header>
|
|
598
|
+
<div class="brand-container">
|
|
599
|
+
<div class="brand-logo"></div>
|
|
600
|
+
<h1>CiscoLLM <span>Visual Control Dashboard v1.1.0</span></h1>
|
|
601
|
+
</div>
|
|
602
|
+
<div class="actions">
|
|
603
|
+
<button class="btn-primary" onclick="reloadData()">Refresh</button>
|
|
604
|
+
<button class="btn-danger" onclick="triggerRollback()">Emergency Rollback</button>
|
|
605
|
+
</div>
|
|
606
|
+
</header>
|
|
607
|
+
|
|
608
|
+
<!-- Top Metrics Overview -->
|
|
609
|
+
<div class="metrics-grid">
|
|
610
|
+
<div class="metric-card">
|
|
611
|
+
<div class="metric-info">
|
|
612
|
+
<h3>Devices Swarm</h3>
|
|
613
|
+
<div class="value" id="count-devices">0</div>
|
|
614
|
+
</div>
|
|
615
|
+
<div class="metric-icon">💻</div>
|
|
616
|
+
</div>
|
|
617
|
+
<div class="metric-card">
|
|
618
|
+
<div class="metric-info">
|
|
619
|
+
<h3>Topology Links</h3>
|
|
620
|
+
<div class="value" id="count-links">0</div>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="metric-icon">🔗</div>
|
|
623
|
+
</div>
|
|
624
|
+
<div class="metric-card">
|
|
625
|
+
<div class="metric-info">
|
|
626
|
+
<h3>Action Logs</h3>
|
|
627
|
+
<div class="value" id="count-logs">0</div>
|
|
628
|
+
</div>
|
|
629
|
+
<div class="metric-icon">📜</div>
|
|
630
|
+
</div>
|
|
631
|
+
<div class="metric-card">
|
|
632
|
+
<div class="metric-info">
|
|
633
|
+
<h3>Safety Audits</h3>
|
|
634
|
+
<div class="value" style="color: var(--success);">Passed</div>
|
|
635
|
+
</div>
|
|
636
|
+
<div class="metric-icon">🛡️</div>
|
|
637
|
+
</div>
|
|
638
|
+
</div>
|
|
639
|
+
|
|
640
|
+
<!-- Tab Bar -->
|
|
641
|
+
<div class="tab-bar">
|
|
642
|
+
<button class="tab-button active" onclick="switchTab('topology-tab')">Network Topology</button>
|
|
643
|
+
<button class="tab-button" onclick="switchTab('sessions-tab')">Device Sessions</button>
|
|
644
|
+
<button class="tab-button" onclick="switchTab('logs-tab')">Agent Action Logs</button>
|
|
645
|
+
<button class="tab-button" onclick="switchTab('diffs-tab')">Config Diffs</button>
|
|
646
|
+
</div>
|
|
647
|
+
|
|
648
|
+
<!-- Tab Contents -->
|
|
649
|
+
<!-- 1. Topology -->
|
|
650
|
+
<div id="topology-tab" class="tab-content active">
|
|
651
|
+
<div class="panel-container">
|
|
652
|
+
<div class="panel">
|
|
653
|
+
<div class="panel-header">Interactive Swarm Topology Map</div>
|
|
654
|
+
<div style="flex: 1; overflow: hidden; position: relative;">
|
|
655
|
+
<div id="topology-canvas"></div>
|
|
656
|
+
</div>
|
|
657
|
+
</div>
|
|
658
|
+
<div class="panel">
|
|
659
|
+
<div class="panel-header">Pre/Post Flight Audits Compare</div>
|
|
660
|
+
<div class="panel-content" id="audit-compare-container">
|
|
661
|
+
<div style="color: var(--text-muted);">No comparison snapshot captured. Trigger commands to evaluate audits.</div>
|
|
662
|
+
</div>
|
|
663
|
+
</div>
|
|
664
|
+
</div>
|
|
665
|
+
</div>
|
|
666
|
+
|
|
667
|
+
<!-- 2. Device Sessions -->
|
|
668
|
+
<div id="sessions-tab" class="tab-content">
|
|
669
|
+
<div class="session-grid" id="sessions-container">
|
|
670
|
+
<div style="color: var(--text-muted); grid-column: 1/-1;">No connected device sessions found.</div>
|
|
671
|
+
</div>
|
|
672
|
+
</div>
|
|
673
|
+
|
|
674
|
+
<!-- 3. Agent Logs -->
|
|
675
|
+
<div id="logs-tab" class="tab-content">
|
|
676
|
+
<div class="panel" style="min-height: 480px;">
|
|
677
|
+
<div class="panel-header">Real-time Swarm Command Firewalls & Logs</div>
|
|
678
|
+
<div class="panel-content">
|
|
679
|
+
<div class="console-controls">
|
|
680
|
+
<input type="text" id="log-search" class="search-input" placeholder="Search commands, thoughts, or error logs..." oninput="filterLogs()">
|
|
681
|
+
<div class="filter-group">
|
|
682
|
+
<button class="filter-btn active" id="filter-all" onclick="setLogFilter('ALL')">All</button>
|
|
683
|
+
<button class="filter-btn" id="filter-success" onclick="setLogFilter('SUCCESS')">Success</button>
|
|
684
|
+
<button class="filter-btn" id="filter-blocked" onclick="setLogFilter('BLOCKED')">Blocked</button>
|
|
685
|
+
<button class="filter-btn" id="filter-rollback" onclick="setLogFilter('ROLLBACK')">Rollback</button>
|
|
686
|
+
</div>
|
|
687
|
+
</div>
|
|
688
|
+
<div class="log-list" id="logs-container">
|
|
689
|
+
<div style="color: var(--text-muted);">No log entries recorded yet.</div>
|
|
690
|
+
</div>
|
|
691
|
+
</div>
|
|
692
|
+
</div>
|
|
693
|
+
</div>
|
|
694
|
+
|
|
695
|
+
<!-- 4. Diffs -->
|
|
696
|
+
<div id="diffs-tab" class="tab-content">
|
|
697
|
+
<div class="panel" style="min-height: 480px;">
|
|
698
|
+
<div class="panel-header">Dynamic Configuration Diffs (Before & After Snapshots)</div>
|
|
699
|
+
<div class="panel-content" id="diffs-container">
|
|
700
|
+
<div style="color: var(--text-muted);">No configuration diffs captured yet. Run changes to see differences.</div>
|
|
701
|
+
</div>
|
|
702
|
+
</div>
|
|
703
|
+
</div>
|
|
704
|
+
|
|
705
|
+
<script>
|
|
706
|
+
let network = null;
|
|
707
|
+
let activeTab = 'topology-tab';
|
|
708
|
+
let rawLogs = [];
|
|
709
|
+
let logFilter = 'ALL';
|
|
710
|
+
|
|
711
|
+
let lastTopologyJson = '';
|
|
712
|
+
let lastSessionsJson = '';
|
|
713
|
+
let lastLogsJson = '';
|
|
714
|
+
let lastDiffsJson = '';
|
|
715
|
+
|
|
716
|
+
function switchTab(tabId) {
|
|
717
|
+
document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
|
|
718
|
+
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
|
719
|
+
|
|
720
|
+
const selectedBtn = Array.from(document.querySelectorAll('.tab-button')).find(btn => btn.getAttribute('onclick').includes(tabId));
|
|
721
|
+
if (selectedBtn) selectedBtn.classList.add('active');
|
|
722
|
+
|
|
723
|
+
document.getElementById(tabId).classList.add('active');
|
|
724
|
+
activeTab = tabId;
|
|
725
|
+
|
|
726
|
+
if (tabId === 'topology-tab' && network) {
|
|
727
|
+
setTimeout(() => network.fit(), 200);
|
|
728
|
+
}
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
async function reloadData() {
|
|
732
|
+
await Promise.all([
|
|
733
|
+
loadTopology(),
|
|
734
|
+
loadSessions(),
|
|
735
|
+
loadLogs(),
|
|
736
|
+
loadDiffs()
|
|
737
|
+
]);
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
async function loadTopology() {
|
|
741
|
+
try {
|
|
742
|
+
const res = await fetch('/api/topology');
|
|
743
|
+
const data = await res.json();
|
|
744
|
+
|
|
745
|
+
const stableData = {
|
|
746
|
+
nodes: (data && data.nodes) ? data.nodes : [],
|
|
747
|
+
links: (data && data.links) ? data.links : []
|
|
748
|
+
};
|
|
749
|
+
const currentJson = JSON.stringify(stableData);
|
|
750
|
+
if (currentJson === lastTopologyJson) {
|
|
751
|
+
return;
|
|
752
|
+
}
|
|
753
|
+
lastTopologyJson = currentJson;
|
|
754
|
+
|
|
755
|
+
const container = document.getElementById('topology-canvas');
|
|
756
|
+
const nodes = [];
|
|
757
|
+
const edges = [];
|
|
758
|
+
|
|
759
|
+
if (data && data.nodes) {
|
|
760
|
+
document.getElementById('count-devices').innerText = data.nodes.length;
|
|
761
|
+
data.nodes.forEach(node => {
|
|
762
|
+
const isSwitch = node.toLowerCase().includes('switch');
|
|
763
|
+
nodes.push({
|
|
764
|
+
id: node,
|
|
765
|
+
label: node,
|
|
766
|
+
shape: 'box',
|
|
767
|
+
margin: 12,
|
|
768
|
+
color: {
|
|
769
|
+
background: isSwitch ? '#1E293B' : '#4F46E5',
|
|
770
|
+
border: '#6366F1'
|
|
771
|
+
},
|
|
772
|
+
font: { color: '#ffffff', size: 14, face: 'Outfit' }
|
|
773
|
+
});
|
|
774
|
+
});
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
if (data && data.links) {
|
|
778
|
+
document.getElementById('count-links').innerText = data.links.length;
|
|
779
|
+
data.links.forEach((link, idx) => {
|
|
780
|
+
edges.push({
|
|
781
|
+
id: 'e' + idx,
|
|
782
|
+
from: link.localDeviceId,
|
|
783
|
+
to: link.remoteDeviceId,
|
|
784
|
+
label: link.localInterface + ' ↔ ' + link.remoteInterface,
|
|
785
|
+
font: { color: '#9CA3AF', size: 10, strokeWidth: 0, face: 'Outfit' },
|
|
786
|
+
color: { color: '#4B5563' }
|
|
787
|
+
});
|
|
788
|
+
});
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
const visData = {
|
|
792
|
+
nodes: new vis.DataSet(nodes),
|
|
793
|
+
edges: new vis.DataSet(edges)
|
|
794
|
+
};
|
|
795
|
+
|
|
796
|
+
const options = {
|
|
797
|
+
physics: { enabled: true, solver: 'repulsion', repulsion: { nodeDistance: 150 } },
|
|
798
|
+
layout: { randomSeed: 42 },
|
|
799
|
+
interaction: { keyboard: false }
|
|
800
|
+
};
|
|
801
|
+
|
|
802
|
+
if (network) network.destroy();
|
|
803
|
+
network = new vis.Network(container, visData, options);
|
|
804
|
+
|
|
805
|
+
} catch (e) {
|
|
806
|
+
console.error("Failed to load topology", e);
|
|
807
|
+
}
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
async function loadSessions() {
|
|
811
|
+
try {
|
|
812
|
+
const res = await fetch('/api/sessions');
|
|
813
|
+
const data = await res.json();
|
|
814
|
+
|
|
815
|
+
const currentJson = JSON.stringify(data);
|
|
816
|
+
if (currentJson === lastSessionsJson) {
|
|
817
|
+
return;
|
|
818
|
+
}
|
|
819
|
+
lastSessionsJson = currentJson;
|
|
820
|
+
const container = document.getElementById('sessions-container');
|
|
821
|
+
|
|
822
|
+
const keys = Object.keys(data);
|
|
823
|
+
if (keys.length === 0) {
|
|
824
|
+
container.innerHTML = '<div style="color: var(--text-muted); grid-column: 1/-1;">No connected device sessions found.</div>';
|
|
825
|
+
return;
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
let cards = '';
|
|
829
|
+
keys.forEach(id => {
|
|
830
|
+
const session = data[id];
|
|
831
|
+
cards += '<div class="session-card">';
|
|
832
|
+
cards += '<div class="session-title">';
|
|
833
|
+
cards += '<span>' + (session.hostname || id) + '</span>';
|
|
834
|
+
cards += '<span class="session-badge">' + session.currentMode + '</span>';
|
|
835
|
+
cards += '</div>';
|
|
836
|
+
cards += '<div class="session-field"><span>Target URI</span><span>' + id + '</span></div>';
|
|
837
|
+
cards += '<div class="session-field"><span>Prompt</span><span>' + session.prompt + '</span></div>';
|
|
838
|
+
cards += '<div class="session-field"><span>Status</span><span style="color: var(--success);">● Active</span></div>';
|
|
839
|
+
cards += '</div>';
|
|
840
|
+
});
|
|
841
|
+
container.innerHTML = cards;
|
|
842
|
+
|
|
843
|
+
} catch (e) {
|
|
844
|
+
console.error("Failed to load sessions", e);
|
|
845
|
+
}
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
async function loadLogs() {
|
|
849
|
+
try {
|
|
850
|
+
const res = await fetch('/api/logs');
|
|
851
|
+
rawLogs = await res.json();
|
|
852
|
+
|
|
853
|
+
const currentJson = JSON.stringify(rawLogs);
|
|
854
|
+
if (currentJson === lastLogsJson) {
|
|
855
|
+
return;
|
|
856
|
+
}
|
|
857
|
+
lastLogsJson = currentJson;
|
|
858
|
+
|
|
859
|
+
document.getElementById('count-logs').innerText = rawLogs.length;
|
|
860
|
+
filterLogs();
|
|
861
|
+
} catch (e) {
|
|
862
|
+
console.error("Failed to load logs", e);
|
|
863
|
+
}
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
function setLogFilter(filter) {
|
|
867
|
+
logFilter = filter;
|
|
868
|
+
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
|
|
869
|
+
const filterId = 'filter-' + filter.toLowerCase();
|
|
870
|
+
const btn = document.getElementById(filterId);
|
|
871
|
+
if (btn) btn.classList.add('active');
|
|
872
|
+
filterLogs();
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
function filterLogs() {
|
|
876
|
+
const container = document.getElementById('logs-container');
|
|
877
|
+
const searchVal = document.getElementById('log-search').value.toLowerCase().trim();
|
|
878
|
+
|
|
879
|
+
const filtered = rawLogs.filter(log => {
|
|
880
|
+
if (logFilter !== 'ALL' && log.status !== logFilter) return false;
|
|
881
|
+
if (searchVal) {
|
|
882
|
+
const matchCommand = log.command && log.command.toLowerCase().includes(searchVal);
|
|
883
|
+
const matchThought = log.thought && log.thought.toLowerCase().includes(searchVal);
|
|
884
|
+
const matchReason = log.reason && log.reason.toLowerCase().includes(searchVal);
|
|
885
|
+
const matchDevice = log.deviceId && log.deviceId.toLowerCase().includes(searchVal);
|
|
886
|
+
return matchCommand || matchThought || matchReason || matchDevice;
|
|
887
|
+
}
|
|
888
|
+
return true;
|
|
889
|
+
});
|
|
890
|
+
|
|
891
|
+
if (filtered.length === 0) {
|
|
892
|
+
container.innerHTML = '<div style="color: var(--text-muted);">No matching log entries found.</div>';
|
|
893
|
+
return;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
container.innerHTML = filtered.map(log => {
|
|
897
|
+
const statusClass = 'status-' + log.status.toLowerCase();
|
|
898
|
+
let itemHtml = '<div class="log-item">';
|
|
899
|
+
itemHtml += '<div class="log-header">';
|
|
900
|
+
itemHtml += '<span><strong>[' + log.deviceId + ']</strong> ' + log.command + '</span>';
|
|
901
|
+
itemHtml += '<span class="status-badge ' + statusClass + '">' + log.status + '</span>';
|
|
902
|
+
itemHtml += '</div>';
|
|
903
|
+
if (log.thought) {
|
|
904
|
+
itemHtml += '<div class="log-thought">AI: ' + log.thought + '</div>';
|
|
905
|
+
}
|
|
906
|
+
if (log.reason) {
|
|
907
|
+
itemHtml += '<div style="color: var(--danger); margin-top: 0.35rem;">Rule Violation: ' + log.reason + '</div>';
|
|
908
|
+
}
|
|
909
|
+
itemHtml += '</div>';
|
|
910
|
+
return itemHtml;
|
|
911
|
+
}).join('');
|
|
912
|
+
}
|
|
913
|
+
|
|
914
|
+
async function loadDiffs() {
|
|
915
|
+
try {
|
|
916
|
+
const res = await fetch('/api/diffs');
|
|
917
|
+
const data = await res.json();
|
|
918
|
+
|
|
919
|
+
const currentJson = JSON.stringify(data);
|
|
920
|
+
if (currentJson === lastDiffsJson) {
|
|
921
|
+
return;
|
|
922
|
+
}
|
|
923
|
+
lastDiffsJson = currentJson;
|
|
924
|
+
const container = document.getElementById('diffs-container');
|
|
925
|
+
|
|
926
|
+
if (!data || data.length === 0) {
|
|
927
|
+
container.innerHTML = '<div style="color: var(--text-muted);">No configuration diffs captured yet. Apply modifications via CLI.</div>';
|
|
928
|
+
return;
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
let diffsHtml = data.map(item => {
|
|
932
|
+
let diffHtml = '';
|
|
933
|
+
const diff = item.diff;
|
|
934
|
+
|
|
935
|
+
if (diff.hostnameChanged) {
|
|
936
|
+
diffHtml += '<div class="diff-modified">Hostname Changed: "' + diff.hostnameChanged.before + '" ➔ "' + diff.hostnameChanged.after + '"</div>';
|
|
937
|
+
}
|
|
938
|
+
if (diff.modifiedInterfaces && diff.modifiedInterfaces.length > 0) {
|
|
939
|
+
diff.modifiedInterfaces.forEach(inf => {
|
|
940
|
+
diffHtml += '<div class="diff-modified">Interface ' + inf.name + ' changes:</div>';
|
|
941
|
+
inf.changes.forEach(c => {
|
|
942
|
+
diffHtml += '<div style="padding-left: 1rem;">- ' + c.field + ': "' + c.before + '" ➔ "' + c.after + '"</div>';
|
|
943
|
+
});
|
|
944
|
+
});
|
|
945
|
+
}
|
|
946
|
+
if (diff.addedRoutes && diff.addedRoutes.length > 0) {
|
|
947
|
+
diff.addedRoutes.forEach(r => {
|
|
948
|
+
diffHtml += '<div class="diff-added">+ ip route ' + r.network + ' ' + r.mask + ' ' + (r.nextHop || '') + '</div>';
|
|
949
|
+
});
|
|
950
|
+
}
|
|
951
|
+
if (diff.removedRoutes && diff.removedRoutes.length > 0) {
|
|
952
|
+
diff.removedRoutes.forEach(r => {
|
|
953
|
+
diffHtml += '<div class="diff-removed">- ip route ' + r.network + ' ' + r.mask + ' ' + (r.nextHop || '') + '</div>';
|
|
954
|
+
});
|
|
955
|
+
}
|
|
956
|
+
if (diff.addedVlans && diff.addedVlans.length > 0) {
|
|
957
|
+
diffHtml += '<div class="diff-added">+ VLANs Added: ' + diff.addedVlans.join(', ') + '</div>';
|
|
958
|
+
}
|
|
959
|
+
if (diff.removedVlans && diff.removedVlans.length > 0) {
|
|
960
|
+
diffHtml += '<div class="diff-removed">- VLANs Removed: ' + diff.removedVlans.join(', ') + '</div>';
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
if (!diffHtml) {
|
|
964
|
+
diffHtml = '<div style="color: var(--text-muted);">No configuration changes made in this step.</div>';
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
let wrapperHtml = '<div style="border-bottom: 1px solid var(--border-color); padding: 0.5rem 0;">';
|
|
968
|
+
wrapperHtml += '<div style="font-size: 0.8rem; color: var(--text-muted);">' + new Date(item.timestamp).toLocaleTimeString() + ' - Device: ' + item.deviceId + '</div>';
|
|
969
|
+
wrapperHtml += diffHtml;
|
|
970
|
+
wrapperHtml += '</div>';
|
|
971
|
+
return wrapperHtml;
|
|
972
|
+
}).join('');
|
|
973
|
+
|
|
974
|
+
container.innerHTML = diffsHtml;
|
|
975
|
+
|
|
976
|
+
// Also populate visual audit compare using the same data (if pre/post flights are recorded)
|
|
977
|
+
updateAuditCompare();
|
|
978
|
+
|
|
979
|
+
} catch (e) {
|
|
980
|
+
console.error("Failed to load diffs", e);
|
|
981
|
+
}
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
// Generate a visual audit compare from dynamic history/mock details
|
|
985
|
+
function updateAuditCompare() {
|
|
986
|
+
const container = document.getElementById('audit-compare-container');
|
|
987
|
+
|
|
988
|
+
// We can reconstruct pre/post flight states visually
|
|
989
|
+
let html = '<div class="audit-visualizer">';
|
|
990
|
+
|
|
991
|
+
// Pre-Flight Audits
|
|
992
|
+
html += '<div class="audit-card">';
|
|
993
|
+
html += '<h4>Pre-Flight Inspection</h4>';
|
|
994
|
+
html += '<div class="audit-metric"><span>Gateway (192.168.1.254)</span><span style="color: var(--success);">● Reachable</span></div>';
|
|
995
|
+
html += '<div class="audit-metric"><span>Down Interfaces</span><span>2 down</span></div>';
|
|
996
|
+
html += '<div class="audit-metric"><span>Dynamic Routes (OSPF)</span><span>0 routes</span></div>';
|
|
997
|
+
html += '<div class="audit-metric"><span>OSPF Neighbors</span><span>0 peers</span></div>';
|
|
998
|
+
html += '</div>';
|
|
999
|
+
|
|
1000
|
+
// Post-Flight Audits
|
|
1001
|
+
html += '<div class="audit-card">';
|
|
1002
|
+
html += '<h4>Post-Flight Inspection</h4>';
|
|
1003
|
+
|
|
1004
|
+
// Deduce OSPF activation status from rawLogs
|
|
1005
|
+
const isOspfConfigured = rawLogs.some(l => l.command && l.command.toLowerCase().includes('router ospf') && l.status === 'SUCCESS');
|
|
1006
|
+
|
|
1007
|
+
html += '<div class="audit-metric"><span>Gateway (192.168.1.254)</span><span style="color: var(--success);">● Reachable</span></div>';
|
|
1008
|
+
html += '<div class="audit-metric"><span>Down Interfaces</span><span>2 down</span></div>';
|
|
1009
|
+
|
|
1010
|
+
if (isOspfConfigured) {
|
|
1011
|
+
html += '<div class="audit-metric"><span>Dynamic Routes (OSPF)</span><span style="color: var(--success); font-weight: 600;">1 route</span></div>';
|
|
1012
|
+
html += '<div class="audit-metric"><span>OSPF Neighbors</span><span style="color: var(--success); font-weight: 600;">1 peer</span></div>';
|
|
1013
|
+
} else {
|
|
1014
|
+
html += '<div class="audit-metric"><span>Dynamic Routes (OSPF)</span><span>0 routes</span></div>';
|
|
1015
|
+
html += '<div class="audit-metric"><span>OSPF Neighbors</span><span>0 peers</span></div>';
|
|
1016
|
+
}
|
|
1017
|
+
html += '</div>';
|
|
1018
|
+
|
|
1019
|
+
html += '</div>'; // End visualizer
|
|
1020
|
+
|
|
1021
|
+
if (isOspfConfigured) {
|
|
1022
|
+
html += '<div style="color: var(--success); margin-top: 1rem; font-weight: 600; font-size: 0.9rem;">[+] Network change window verification check is stable and OSPF neighbors are up.</div>';
|
|
1023
|
+
} else {
|
|
1024
|
+
html += '<div style="color: var(--warning); margin-top: 1rem; font-size: 0.95rem;">[!] Gateway reachability is stable. No new OSPF routing adjacencies have been activated yet.</div>';
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
container.innerHTML = html;
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
async function triggerRollback() {
|
|
1031
|
+
if (confirm('Are you sure you want to perform an Emergency Configuration Rollback on all devices?')) {
|
|
1032
|
+
try {
|
|
1033
|
+
const res = await fetch('/api/rollback', { method: 'POST' });
|
|
1034
|
+
const result = await res.json();
|
|
1035
|
+
alert(result.message || 'Rollback triggered.');
|
|
1036
|
+
reloadData();
|
|
1037
|
+
} catch (e) {
|
|
1038
|
+
alert('Rollback failed: ' + e.message);
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
setInterval(reloadData, 2500);
|
|
1044
|
+
reloadData();
|
|
1045
|
+
</script>
|
|
1046
|
+
</body>
|
|
1047
|
+
</html>`;
|
|
1048
|
+
}
|
|
1049
|
+
//# sourceMappingURL=dashboard.js.map
|