cbom-builder/cbom-builder-front
0
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Integrations Management - EY Quantum Safe</title>8 <script src="https://cdn.tailwindcss.com"></script>9 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">10 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>12 <script src="https://unpkg.com/feather-icons"></script>13 <style>14 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');15 16 body {17 font-family: 'Inter', sans-serif;18 background-color: #f9fafb;19 }20 21 .sidebar {22 transition: all 0.3s ease;23 }24 25 .card-hover:hover {26 transform: translateY(-2px);27 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);28 }29 30 .tab-active {31 border-bottom: 3px solid #F59E0B;32 color: #111827;33 }34 35 .status-connected {36 border-left: 4px solid #10B981;37 }38 39 .status-disconnected {40 border-left: 4px solid #EF4444;41 }42 43 .status-pending {44 border-left: 4px solid #F59E0B;45 }46 47 .pulse-animation {48 animation: pulse 2s infinite;49 }50 51 @keyframes pulse {52 53 0%,54 100% {55 opacity: 1;56 }57 58 50% {59 opacity: 0.7;60 }61 }62 </style>63</head>64 65<body class="flex h-screen overflow-hidden">66 <!-- Sidebar -->67 <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">68 <div class="p-4 border-b border-gray-700">69 <div class="flex items-center space-x-3">70 <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center">71 <i data-feather="shield" class="text-gray-900"></i>72 </div>73 <h1 class="text-xl font-bold">EY Quantum Safe</h1>74 </div>75 </div>76 77 <nav class="flex-1 overflow-y-auto p-4 space-y-1">78 <a href="index.html"79 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">80 <i data-feather="layout" class="w-5 h-5"></i>81 <span>Dashboard</span>82 </a>83 <a href="cboms.html"84 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">85 <i data-feather="file-text" class="w-5 h-5"></i>86 <span>CBOMs</span>87 </a>88 <a href="assets.html"89 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">90 <i data-feather="lock" class="w-5 h-5"></i>91 <span>Assets</span>92 </a>93 <a href="integrations.html" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400">94 <i data-feather="link" class="w-5 h-5"></i>95 <span>Integrations</span>96 </a>97 <a href="analytics.html"98 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">99 <i data-feather="bar-chart-2" class="w-5 h-5"></i>100 <span>Analytics</span>101 </a>102 </nav>103 104 <div class="p-4 border-t border-gray-700">105 <div class="flex items-center space-x-3">106 <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">107 <i data-feather="user" class="text-gray-300"></i>108 </div>109 <div>110 <p class="text-sm font-medium">Josep Mateu</p>111 <p class="text-xs text-gray-400">Administrator</p>112 </div>113 </div>114 </div>115 </div>116 117 <!-- Main Content -->118 <div class="flex-1 flex flex-col overflow-hidden">119 <!-- Top Navigation -->120 <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">121 <div class="flex items-center space-x-4">122 <button class="md:hidden text-gray-500">123 <i data-feather="menu"></i>124 </button>125 <h2 class="text-xl font-semibold text-gray-800">Integrations Management</h2>126 </div>127 128 <div class="flex items-center space-x-4">129 <div class="relative">130 <i data-feather="search"131 class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>132 <input type="text" placeholder="Search integrations..."133 class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">134 </div>135 <button136 class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg font-medium hover:bg-yellow-500 transition-colors">137 <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>138 Add Integration139 </button>140 </div>141 </header>142 143 <!-- Main Content Area -->144 <main class="flex-1 overflow-y-auto p-6 bg-gray-50">145 <!-- Tabs Navigation -->146 <div class="bg-white rounded-xl shadow-sm mb-6">147 <div class="flex border-b border-gray-200">148 <button class="px-6 py-4 font-medium tab-active">Active Integrations</button>149 <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Available</button>150 <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Configuration</button>151 <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Logs</button>152 </div>153 </div>154 155 <!-- Integration Statistics -->156 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">157 <div class="bg-white rounded-xl shadow-sm p-4 text-center">158 <div159 class="w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-3">160 <i data-feather="check-circle" class="w-6 h-6"></i>161 </div>162 <p class="text-2xl font-bold text-gray-800">3</p>163 <p class="text-sm text-gray-600">Active Integrations</p>164 </div>165 166 <div class="bg-white rounded-xl shadow-sm p-4 text-center">167 <div168 class="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3">169 <i data-feather="x-circle" class="w-6 h-6"></i>170 </div>171 <p class="text-2xl font-bold text-gray-800">1</p>172 <p class="text-sm text-gray-600">Failed Connections</p>173 </div>174 175 <div class="bg-white rounded-xl shadow-sm p-4 text-center">176 <div177 class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mx-auto mb-3">178 <i data-feather="clock" class="w-6 h-6"></i>179 </div>180 <p class="text-2xl font-bold text-gray-800">2</p>181 <p class="text-sm text-gray-600">Pending Setup</p>182 </div>183 184 <div class="bg-white rounded-xl shadow-sm p-4 text-center">185 <div186 class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3">187 <i data-feather="activity" class="w-6 h-6"></i>188 </div>189 <p class="text-2xl font-bold text-gray-800">15.2k</p>190 <p class="text-sm text-gray-600">Events Today</p>191 </div>192 </div>193 194 <!-- Integration Cards Grid -->195 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">196 <!-- Active Integrations -->197 <div class="space-y-6">198 <h3 class="font-semibold text-lg text-gray-800">Active Integrations</h3>199 200 <!-- Venafi Integration -->201 <div class="bg-white rounded-xl shadow-sm p-6 status-connected">202 <div class="flex items-center justify-between mb-4">203 <div class="flex items-center space-x-4">204 <div205 class="w-12 h-12 bg-purple-100 text-purple-600 rounded-lg flex items-center justify-center">206 <i data-feather="cpu" class="w-6 h-6"></i>207 </div>208 <div>209 <h4 class="font-semibold text-lg">Venafi</h4>210 <p class="text-sm text-gray-500">Certificate Management Platform</p>211 </div>212 </div>213 <div class="flex items-center space-x-2">214 <span215 class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>216 <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>217 </div>218 </div>219 220 <div class="grid grid-cols-2 gap-4 mb-4">221 <div class="text-center p-3 bg-gray-50 rounded-lg">222 <p class="text-xl font-bold text-gray-800">247</p>223 <p class="text-xs text-gray-600">Certificates Synced</p>224 </div>225 <div class="text-center p-3 bg-gray-50 rounded-lg">226 <p class="text-xl font-bold text-gray-800">99.8%</p>227 <p class="text-xs text-gray-600">Uptime</p>228 </div>229 </div>230 231 <div class="flex items-center justify-between text-sm text-gray-500 mb-4">232 <span>Last sync: 5 minutes ago</span>233 <span>Next sync: 1 hour</span>234 </div>235 236 <div class="flex space-x-2">237 <button238 class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">239 <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>240 Configure241 </button>242 <button243 class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">244 <i data-feather="activity" class="w-4 h-4 inline mr-2"></i>245 View Logs246 </button>247 </div>248 </div>249 250 <!-- Tanium Integration -->251 <div class="bg-white rounded-xl shadow-sm p-6 status-connected">252 <div class="flex items-center justify-between mb-4">253 <div class="flex items-center space-x-4">254 <div255 class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center">256 <i data-feather="server" class="w-6 h-6"></i>257 </div>258 <div>259 <h4 class="font-semibold text-lg">Tanium</h4>260 <p class="text-sm text-gray-500">Endpoint Management Platform</p>261 </div>262 </div>263 <div class="flex items-center space-x-2">264 <span265 class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>266 <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>267 </div>268 </div>269 270 <div class="grid grid-cols-2 gap-4 mb-4">271 <div class="text-center p-3 bg-gray-50 rounded-lg">272 <p class="text-xl font-bold text-gray-800">1,842</p>273 <p class="text-xs text-gray-600">Assets Discovered</p>274 </div>275 <div class="text-center p-3 bg-gray-50 rounded-lg">276 <p class="text-xl font-bold text-gray-800">97.2%</p>277 <p class="text-xs text-gray-600">Uptime</p>278 </div>279 </div>280 281 <div class="flex items-center justify-between text-sm text-gray-500 mb-4">282 <span>Last scan: 2 hours ago</span>283 <span>Next scan: 6 hours</span>284 </div>285 286 <div class="flex space-x-2">287 <button288 class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">289 <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>290 Configure291 </button>292 <button293 class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">294 <i data-feather="activity" class="w-4 h-4 inline mr-2"></i>295 View Logs296 </button>297 </div>298 </div>299 </div>300 301 <!-- Pending/Failed Integrations -->302 <div class="space-y-6">303 <h3 class="font-semibold text-lg text-gray-800">Pending & Failed Integrations</h3>304 305 <!-- SandboxAQ Integration - Failed -->306 <div class="bg-white rounded-xl shadow-sm p-6 status-disconnected">307 <div class="flex items-center justify-between mb-4">308 <div class="flex items-center space-x-4">309 <div310 class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-lg flex items-center justify-center">311 <i data-feather="shield" class="w-6 h-6"></i>312 </div>313 <div>314 <h4 class="font-semibold text-lg">SandboxAQ</h4>315 <p class="text-sm text-gray-500">Quantum Security Assessment</p>316 </div>317 </div>318 <div class="flex items-center space-x-2">319 <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Failed</span>320 <div class="w-3 h-3 bg-red-500 rounded-full"></div>321 </div>322 </div>323 324 <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">325 <div class="flex items-start space-x-3">326 <i data-feather="alert-circle" class="w-5 h-5 text-red-600 mt-0.5"></i>327 <div>328 <p class="text-sm font-medium text-red-800">Connection Failed</p>329 <p class="text-xs text-red-600 mt-1">Authentication credentials expired. Please330 update API key.</p>331 </div>332 </div>333 </div>334 335 <div class="flex items-center justify-between text-sm text-gray-500 mb-4">336 <span>Last attempt: 1 hour ago</span>337 <span>Failed attempts: 3</span>338 </div>339 340 <div class="flex space-x-2">341 <button342 class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">343 <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>344 Retry Connection345 </button>346 <button347 class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">348 <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>349 Configure350 </button>351 </div>352 </div>353 354 <!-- AWS KMS Integration - Pending -->355 <div class="bg-white rounded-xl shadow-sm p-6 status-pending">356 <div class="flex items-center justify-between mb-4">357 <div class="flex items-center space-x-4">358 <div359 class="w-12 h-12 bg-gray-100 text-gray-600 rounded-lg flex items-center justify-center">360 <i data-feather="cloud" class="w-6 h-6"></i>361 </div>362 <div>363 <h4 class="font-semibold text-lg">AWS KMS</h4>364 <p class="text-sm text-gray-500">Key Management Service</p>365 </div>366 </div>367 <div class="flex items-center space-x-2">368 <span369 class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>370 <div class="w-3 h-3 bg-yellow-500 rounded-full pulse-animation"></div>371 </div>372 </div>373 374 <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">375 <div class="flex items-start space-x-3">376 <i data-feather="clock" class="w-5 h-5 text-yellow-600 mt-0.5"></i>377 <div>378 <p class="text-sm font-medium text-yellow-800">Setup Required</p>379 <p class="text-xs text-yellow-600 mt-1">Complete configuration to activate this380 integration.</p>381 </div>382 </div>383 </div>384 385 <div class="flex items-center justify-between text-sm text-gray-500 mb-4">386 <span>Added: 2 days ago</span>387 <span>Progress: 60%</span>388 </div>389 390 <div class="flex space-x-2">391 <button392 class="flex-1 px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500 transition-colors">393 <i data-feather="play" class="w-4 h-4 inline mr-2"></i>394 Complete Setup395 </button>396 <button397 class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">398 <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>399 Remove400 </button>401 </div>402 </div>403 404 <!-- HashiCorp Vault Integration - Pending -->405 <div class="bg-white rounded-xl shadow-sm p-6 status-pending">406 <div class="flex items-center justify-between mb-4">407 <div class="flex items-center space-x-4">408 <div409 class="w-12 h-12 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center">410 <i data-feather="key" class="w-6 h-6"></i>411 </div>412 <div>413 <h4 class="font-semibold text-lg">HashiCorp Vault</h4>414 <p class="text-sm text-gray-500">Secrets Management</p>415 </div>416 </div>417 <div class="flex items-center space-x-2">418 <span419 class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>420 <div class="w-3 h-3 bg-yellow-500 rounded-full pulse-animation"></div>421 </div>422 </div>423 424 <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">425 <div class="flex items-start space-x-3">426 <i data-feather="info" class="w-5 h-5 text-blue-600 mt-0.5"></i>427 <div>428 <p class="text-sm font-medium text-blue-800">Ready to Configure</p>429 <p class="text-xs text-blue-600 mt-1">Integration template is ready. Configure430 connection settings.</p>431 </div>432 </div>433 </div>434 435 <div class="flex items-center justify-between text-sm text-gray-500 mb-4">436 <span>Added: 3 hours ago</span>437 <span>Progress: 25%</span>438 </div>439 440 <div class="flex space-x-2">441 <button442 class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">443 <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>444 Configure Now445 </button>446 <button447 class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">448 <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>449 Remove450 </button>451 </div>452 </div>453 </div>454 </div>455 456 <!-- Recent Activity -->457 <div class="bg-white rounded-xl shadow-sm p-6 mt-6">458 <div class="flex items-center justify-between mb-4">459 <h3 class="font-semibold text-lg">Recent Integration Activity</h3>460 <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button>461 </div>462 463 <div class="space-y-4">464 <div class="flex items-start space-x-3 p-4 bg-green-50 rounded-lg">465 <div class="p-2 rounded-full bg-green-100 text-green-600 mt-1">466 <i data-feather="check-circle" class="w-4 h-4"></i>467 </div>468 <div class="flex-1">469 <p class="font-medium">Venafi sync completed successfully</p>470 <p class="text-sm text-gray-500">247 certificates updated, 3 new certificates added</p>471 <p class="text-xs text-gray-400 mt-1">5 minutes ago</p>472 </div>473 </div>474 475 <div class="flex items-start space-x-3 p-4 bg-blue-50 rounded-lg">476 <div class="p-2 rounded-full bg-blue-100 text-blue-600 mt-1">477 <i data-feather="server" class="w-4 h-4"></i>478 </div>479 <div class="flex-1">480 <p class="font-medium">Tanium asset discovery completed</p>481 <p class="text-sm text-gray-500">1,842 assets scanned, 15 new cryptographic assets found</p>482 <p class="text-xs text-gray-400 mt-1">2 hours ago</p>483 </div>484 </div>485 486 <div class="flex items-start space-x-3 p-4 bg-red-50 rounded-lg">487 <div class="p-2 rounded-full bg-red-100 text-red-600 mt-1">488 <i data-feather="alert-circle" class="w-4 h-4"></i>489 </div>490 <div class="flex-1">491 <p class="font-medium">SandboxAQ connection failed</p>492 <p class="text-sm text-gray-500">Authentication error: API key expired</p>493 <p class="text-xs text-gray-400 mt-1">1 hour ago</p>494 </div>495 </div>496 </div>497 </div>498 </main>499 </div>500 501 <script>502 AOS.init();503 feather.replace();504 505 // Tab switching functionality506 document.querySelectorAll('.flex button').forEach(button => {507 button.addEventListener('click', function () {508 document.querySelectorAll('.flex button').forEach(btn => {509 btn.classList.remove('tab-active');510 btn.classList.add('text-gray-500', 'hover:text-gray-700');511 });512 this.classList.add('tab-active');513 this.classList.remove('text-gray-500', 'hover:text-gray-700');514 });515 });516 517 // Pulse animation control518 document.addEventListener('DOMContentLoaded', function () {519 const pulseElements = document.querySelectorAll('.pulse-animation');520 pulseElements.forEach(element => {521 setInterval(() => {522 element.style.opacity = element.style.opacity === '0.7' ? '1' : '0.7';523 }, 1000);524 });525 });526 </script>527</body>528 529</html>