Vue Server Monitoring Dashboard

Реальный проект мониторинга сервера. Отображает нагрузку CPU, использование памяти, состояние дисков и сетевую активность в реальном времени.

О проекте

🛠 Технологии

  • Vue 3 (Composition API)
  • WebSocket для real-time обновлений
  • AJAX запросы к серверу
  • Адаптивная верстка

📊 Метрики

  • Загрузка CPU по ядрам
  • Использование RAM
  • Состояние дисков
  • Сетевая активность

⚡ Особенности

  • Автообновление каждые 5 сек
  • График истории CPU
  • Цветовая индикация
  • Без готовых UI библиотек

Структура проекта

Vue компонент находится в /assets/js/vue-app.js и подключается через functions.php

Ключевые части кода:


// 1. Получение данных с сервера через AJAX
const fetchServerStats = async () => {
    const response = await fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            action: 'get_server_stats',
            type: 'all'
        })
    });
    const data = await response.json();
    return data.data;
};

// 2. Реактивные данные в Vue
const serverStats = ref({
    cpu: [],
    memory: {},
    disk: [],
    load: [],
    uptime: 0
});

// 3. Автоматическое обновление
let timer = setInterval(async () => {
    const stats = await fetchServerStats();
    serverStats.value = stats;
}, 5000);