| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Infrastructure | MedMIS</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .status-card { |
| transition: all 0.3s ease; |
| } |
| .status-card:hover { |
| transform: translateY(-3px); |
| } |
| .status-online { |
| background-color: #10b981; |
| } |
| .status-offline { |
| background-color: #ef4444; |
| } |
| .status-warning { |
| background-color: #f59e0b; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-white min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| <header class="mb-8"> |
| <div class="flex items-center mb-4"> |
| <button onclick="history.back()" class="mr-4 p-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition"> |
| <i data-feather="arrow-left" class="w-5 h-5"></i> |
| </button> |
| <div> |
| <h1 class="text-3xl font-bold" data-i18n="infrastructure.title">Панель инфраструктуры</h1> |
| <p class="text-gray-300" data-i18n="infrastructure.subtitle">Мониторинг системы и статус развертывания</p> |
| </div> |
| </div> |
| </header> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| <div class="status-card bg-gray-800 rounded-xl p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-xl font-semibold" data-i18n="infrastructure.servicesStatus.title">Статус сервисов</h3> |
| <p class="text-gray-300" data-i18n="infrastructure.servicesStatus.subtitle">Состояние микросервисов</p> |
| </div> |
| <div class="flex space-x-2"> |
| <span class="status-dot status-online"></span> |
| <span class="status-dot status-online"></span> |
| <span class="status-dot status-warning"></span> |
| </div> |
| </div> |
| <div class="mt-6 space-y-3"> |
| <div class="flex justify-between items-center"> |
| <span data-i18n="infrastructure.services.queue">QueueService</span> |
| <span class="text-green-400" data-i18n="infrastructure.status.online">Онлайн</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span data-i18n="infrastructure.services.mrt">MRTRoomService</span> |
| <span class="text-green-400" data-i18n="infrastructure.status.online">Онлайн</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span data-i18n="infrastructure.services.radiology">RadiologyWorkbench</span> |
| <span class="text-yellow-400" data-i18n="infrastructure.status.degraded">Деградировал</span> |
| </div> |
| </div> |
| </div> |
| <div class="status-card bg-gray-800 rounded-xl p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-xl font-semibold" data-i18n="infrastructure.messageBroker.title">Брокер сообщений</h3> |
| <p class="text-gray-300" data-i18n="infrastructure.messageBroker.subtitle">Связь через NATS</p> |
| </div> |
| <span class="status-dot status-online"></span> |
| </div> |
| <div class="mt-6"> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-400" data-i18n="infrastructure.messageBroker.messages">Сообщений:</span> |
| <span>1,245/сек</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-400" data-i18n="infrastructure.messageBroker.connections">Подключений:</span> |
| <span>18</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400" data-i18n="infrastructure.messageBroker.subscriptions">Подписок:</span> |
| <span>42</span> |
| </div> |
| </div> |
| </div> |
| <div class="status-card bg-gray-800 rounded-xl p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-xl font-semibold" data-i18n="infrastructure.database.title">База данных</h3> |
| <p class="text-gray-300" data-i18n="infrastructure.database.subtitle">Статус MongoDB</p> |
| </div> |
| <span class="status-dot status-online"></span> |
| </div> |
| <div class="mt-6"> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-400" data-i18n="infrastructure.database.operations">Операций:</span> |
| <span>560/сек</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-400" data-i18n="infrastructure.database.size">Размер:</span> |
| <span>12.4ГБ</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400" data-i18n="infrastructure.database.replica">Реплика:</span> |
| <span data-i18n="infrastructure.database.primary">Основная</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-gray-800 rounded-xl p-6"> |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="activity" class="w-5 h-5 mr-2"></i> |
| <span data-i18n="infrastructure.cicd.title">Статус CI/CD</span> |
| </h2> |
| <div class="space-y-4"> |
| <div class="flex justify-between items-center"> |
| <span data-i18n="infrastructure.cicd.lastDeployment">Последнее развертывание:</span> |
| <span data-i18n="infrastructure.cicd.timeAgo">15 минут назад</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span data-i18n="infrastructure.cicd.deploymentType">Тип развертывания:</span> |
| <span>Blue-Green</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span data-i18n="infrastructure.cicd.currentVersion">Текущая версия:</span> |
| <span>v1.3.2</span> |
| </div> |
| <div class="pt-4"> |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition" data-i18n="infrastructure.cicd.triggerButton"> |
| <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i> |
| Запустить развертывание |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-xl p-6"> |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="monitor" class="w-5 h-5 mr-2"></i> |
| <span data-i18n="infrastructure.monitoring.title">Ссылки на мониторинг</span> |
| </h2> |
| <div class="space-y-2"> |
| <a href="http://grafana:3000" target="_blank" class="flex items-center justify-between p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition"> |
| <div class="flex items-center"> |
| <i data-feather="bar-chart-2" class="w-4 h-4 mr-2"></i> |
| <span data-i18n="infrastructure.monitoring.grafana">Панель Grafana</span> |
| </div> |
| <i data-feather="external-link" class="w-4 h-4"></i> |
| </a> |
| <a href="http://prometheus:9090" target="_blank" class="flex items-center justify-between p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition"> |
| <div class="flex items-center"> |
| <i data-feather="database" class="w-4 h-4 mr-2"></i> |
| <span data-i18n="infrastructure.monitoring.prometheus">Метрики Prometheus</span> |
| </div> |
| <i data-feather="external-link" class="w-4 h-4"></i> |
| </a> |
| <a href="http://loki:3100" target="_blank" class="flex items-center justify-between p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition"> |
| <div class="flex items-center"> |
| <i data-feather="search" class="w-4 h-4 mr-2"></i> |
| <span data-i18n="infrastructure.monitoring.logs">Просмотр логов</span> |
| </div> |
| <i data-feather="external-link" class="w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-xl p-6"> |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="alert-triangle" class="w-5 h-5 mr-2"></i> |
| <span data-i18n="infrastructure.alerts.title">Недавние оповещения</span> |
| </h2> |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead> |
| <tr class="text-gray-300 border-b border-gray-700"> |
| <th class="py-3 px-4 text-left" data-i18n="infrastructure.alerts.time">Время</th> |
| <th class="py-3 px-4 text-left" data-i18n="infrastructure.alerts.severity">Серьезность</th> |
| <th class="py-3 px-4 text-left" data-i18n="infrastructure.alerts.service">Сервис</th> |
| <th class="py-3 px-4 text-left" data-i18n="infrastructure.alerts.message">Сообщение</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b border-gray-700"> |
| <td class="py-3 px-4">2023-06-15 14:30</td> |
| <td class="py-3 px-4"><span class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded text-xs" data-i18n="infrastructure.alerts.warning">Предупреждение</span></td> |
| <td class="py-3 px-4" data-i18n="infrastructure.services.radiology">RadiologyWorkbench</td> |
| <td class="py-3 px-4" data-i18n="infrastructure.alerts.highResponse">Высокое время отклика (2.4с)</td> |
| </tr> |
| <tr class="border-b border-gray-700"> |
| <td class="py-3 px-4">2023-06-15 12:45</td> |
| <td class="py-3 px-4"><span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs" data-i18n="infrastructure.alerts.info">Информация</span></td> |
| <td class="py-3 px-4" data-i18n="infrastructure.alerts.deployment">Развертывание</td> |
| <td class="py-3 px-4" data-i18n="infrastructure.alerts.newVersion">Новая версия v1.3.2 развернута</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| <script> |
| feather.replace(); |
| |
| |
| document.querySelector('.bg-blue-600').addEventListener('click', function() { |
| alert('Deployment triggered via CI/CD pipeline'); |
| }); |
| </script> |
| </body> |
| </html> |
