vue-pult/doc/ФУТЕР_SYSTEM_INFO.md

SYSTEM INFO - Системная информация футера

📋 Описание

SystemInfo - это часть футера, отображающая информацию о загрузке системных ресурсов в реальном времени. Показывает текущее использование CPU, RAM и дискового пространства.

---

Архитектура

Местоположение

• Компонент: Часть Footer.tsx
• Позиция: Левая часть футера, после индикаторов подключения
• Видимость: Только на больших экранах (lg и выше)

Структура данных

interface SystemInfo {
  cpu: number;     // Загрузка CPU в процентах
  memory: number;  // Использование RAM в процентах  
  disk: number;    // Использование диска в процентах
}

---

Функциональность

1. Отображение системной информации

CPU Usage

<div className="flex items-center gap-1">
  <Cpu className="w-3 h-3 text-gray-400" />
  <span className="text-xs text-gray-400">CPU: {systemInfo.cpu}%</span>
</div>

RAM Usage

<div className="flex items-center gap-1">
  <Activity className="w-3 h-3 text-gray-400" />
  <span className="text-xs text-gray-400">RAM: {systemInfo.memory}%</span>
</div>

Disk Usage

<div className="flex items-center gap-1">
  <HardDrive className="w-3 h-3 text-gray-400" />
  <span className="text-xs text-gray-400">Disk: {systemInfo.disk}%</span>
</div>

2. Контейнер компонента

<div className="hidden lg:flex items-center gap-4">
  {/* CPU, RAM, Disk блоки */}
</div>

---

Логика обновления данных

Эмуляция системных данных

useEffect(() => {
  const interval = setInterval(() => {
    setSystemInfo({
      cpu: Math.floor(Math.random() * 30) + 20,      // 20-50%
      memory: Math.floor(Math.random() * 40) + 30,   // 30-70%
      disk: 75                                       // Фиксированное значение
    });
  }, 10000); // Обновление каждые 10 секунд
  
  return () => clearInterval(interval);
}, []);

Алгоритм генерации значений

CPU (20-50%)

Math.floor(Math.random() * 30) + 20
// random(0-29) + 20 = диапазон 20-49%

RAM (30-70%)

Math.floor(Math.random() * 40) + 30
// random(0-39) + 30 = диапазон 30-69%

Disk (фиксированное значение)

disk: 75  // Постоянное значение 75%

---

Визуальное представление

Структура каждого блока

[ИКОНКА] НАЗВАНИЕ: ЗНАЧЕНИЕ%

Примеры отображения

🖥️ CPU: 35%    📊 RAM: 45%    💾 Disk: 75%

Используемые иконки

• CPU: <Cpu /> - иконка процессора
• RAM: <Activity /> - иконка активности/графика
• Disk: <HardDrive /> - иконка жесткого диска

---

Стили и адаптивность

CSS классы

/* Контейнер - скрыт до lg размера */
.hidden.lg:flex.items-center.gap-4

/* Каждый блок */  
.flex.items-center.gap-1

/* Иконки */
.w-3.h-3.text-gray-400

/* Текст */
.text-xs.text-gray-400

Адаптивное поведение

Mobile (< 1024px)

/* Компонент полностью скрыт */
.hidden

Desktop (≥ 1024px)

/* Компонент отображается */
.lg:flex

Обоснование скрытия на мобильных

• Ограниченное место на экране
• Менее критичная информация для мобильных пользователей
• Приоритет отдается статусам подключения

---

Позиционирование в футере

Расположение между элементами

[Подключения] [Разделитель] [СИСТЕМА] [     Пользователь     ] [Версия]
   Локальный       |         CPU: 35%        Пульт: #8         v1.0.0
   Внешний                  RAM: 45%      Админ: Иванов И.
                            Disk: 75%    Uptime: 02:15:30

Разделитель

<div className="hidden md:block h-4 w-px bg-gray-700" />

• Визуально отделяет подключения от системной информации
• Скрыт на мобильных устройствах

---

Особенности реализации

1. Эмуляция vs реальные данные

Текущая реализация: Эмулирует данные для демонстрации
Будущее развитие: Может быть заменена на реальные системные метрики

2. Интервал обновления

10000 // 10 секунд

• Достаточно частое обновление для мониторинга
• Не создает излишнюю нагрузку на отрисовку
• Сбалансировано с другими таймерами футера

3. Диапазоны значений

• CPU: 20-50% (имитация рабочей нагрузки)
• RAM: 30-70% (типичное использование памяти)
• Disk: 75% (константа, имитация заполненного диска)

---

Расширение функциональности

Потенциальные улучшения

1. Реальные системные метрики

// Интеграция с Node.js API или системными командами
const getSystemInfo = async () => {
  const response = await fetch('/api/system-info');
  return response.json();
};

2. Цветовая индикация нагрузки

const getUsageColor = (usage: number, type: 'cpu' | 'memory' | 'disk') => {
  const thresholds = {
    cpu: { warning: 70, critical: 90 },
    memory: { warning: 80, critical: 95 },
    disk: { warning: 85, critical: 95 }
  };
  
  if (usage >= thresholds[type].critical) return 'text-red-400';
  if (usage >= thresholds[type].warning) return 'text-yellow-400';
  return 'text-gray-400';
};

3. Тултипы с детальной информацией

// Дополнительные данные при наведении
<Tooltip content={`
  CPU: ${systemInfo.cpu}% (4 cores)
  Load Average: 1.2, 1.5, 1.8
`}>
  <div className="flex items-center gap-1">
    <Cpu className="w-3 h-3 text-gray-400" />
    <span className="text-xs text-gray-400">CPU: {systemInfo.cpu}%</span>
  </div>
</Tooltip>

4. Исторические данные

// Мини-графики за последние несколько минут
interface SystemHistory {
  timestamps: number[];
  cpu: number[];
  memory: number[];
  disk: number[];
}

---

Интеграция с мониторингом

Возможные источники данных

1. Backend API эндпоинт

GET /api/system-status
{
  "cpu": 35.2,
  "memory": 64.8, 
  "disk": 78.1,
  "timestamp": 1704722400000
}

2. WebSocket поток

// Через основное WebSocket соединение
{
  "do": "system-info",
  "data": {
    "cpu": 35.2,
    "memory": 64.8,
    "disk": 78.1
  }
}

3. Отдельный мониторинговый сервис

// Подключение к Prometheus, Grafana и т.д.
const systemMetrics = await prometheusClient.query('cpu_usage_percent');

---

Производительность

Оптимизации

1. Интервальное обновление: Не чаще чем каждые 10 секунд
2. Условная отрисовка: Скрывается на мобильных
3. Мемоизация: Компонент не перерисовывается при других изменениях

Влияние на производительность

• Минимальное: Простые вычисления и отрисовка текста
• Оптимизированное: Редкие обновления и условная видимость

---

Тестирование

Тестовые сценарии

1. Корректная генерация значений в заданных диапазонах
2. Обновление данных каждые 10 секунд
3. Скрытие на мобильных устройствах
4. Очистка интервалов при размонтировании компонента

---

Заключение

SystemInfo предоставляет пользователям важную информацию о состоянии системы в компактном формате. Хотя текущая реализация использует эмулированные данные, архитектура позволяет легко интегрировать реальные системные метрики в будущем.

---

Дата создания: 2025-01-09
Версия документации: 1.0
Родительский компонент: Footer.tsx