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

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

## 📋 Описание

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

---

## Архитектура

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

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

---

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

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

#### CPU Usage
```typescript
<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
```typescript
<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
```typescript
<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. Контейнер компонента
```typescript
<div className="hidden lg:flex items-center gap-4">
  {/* CPU, RAM, Disk блоки */}
</div>
```

---

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

### Эмуляция системных данных
```typescript
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%)
```typescript
Math.floor(Math.random() * 30) + 20
// random(0-29) + 20 = диапазон 20-49%
```

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

#### Disk (фиксированное значение)
```typescript
disk: 75  // Постоянное значение 75%
```

---

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

### Структура каждого блока
```
[ИКОНКА] НАЗВАНИЕ: ЗНАЧЕНИЕ%
```

### Примеры отображения
```
🖥️ CPU: 35%    📊 RAM: 45%    💾 Disk: 75%
```

### Используемые иконки
- **CPU**: `<Cpu />` - иконка процессора
- **RAM**: `<Activity />` - иконка активности/графика
- **Disk**: `<HardDrive />` - иконка жесткого диска

---

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

### CSS классы
```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)
```css
/* Компонент полностью скрыт */
.hidden
```

#### Desktop (≥ 1024px)
```css  
/* Компонент отображается */
.lg:flex
```

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

---

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

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

### Разделитель
```typescript
<div className="hidden md:block h-4 w-px bg-gray-700" />
```
- Визуально отделяет подключения от системной информации
- Скрыт на мобильных устройствах

---

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

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

### 2. Интервал обновления
```typescript
10000 // 10 секунд
```
- Достаточно частое обновление для мониторинга
- Не создает излишнюю нагрузку на отрисовку
- Сбалансировано с другими таймерами футера

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

---

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

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

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

#### 2. Цветовая индикация нагрузки
```typescript
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. Тултипы с детальной информацией
```typescript
// Дополнительные данные при наведении
<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. Исторические данные
```typescript
// Мини-графики за последние несколько минут
interface SystemHistory {
  timestamps: number[];
  cpu: number[];
  memory: number[];
  disk: number[];
}
```

---

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

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

#### 1. Backend API эндпоинт
```typescript
GET /api/system-status
{
  "cpu": 35.2,
  "memory": 64.8, 
  "disk": 78.1,
  "timestamp": 1704722400000
}
```

#### 2. WebSocket поток
```typescript
// Через основное WebSocket соединение
{
  "do": "system-info",
  "data": {
    "cpu": 35.2,
    "memory": 64.8,
    "disk": 78.1
  }
}
```

#### 3. Отдельный мониторинговый сервис
```typescript
// Подключение к 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