Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Wimboro/server-monitoring

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

11 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Server Monitoring Dashboard

Aplikasi web monitoring server berbasis SSH yang modern dan real-time, terinspirasi dari SwiftServer.

Dukung Proyek

Donasi via Saweria Dukungan via QRIS Ko-fi untuk HiddenCyber Donasi via PayPal

πŸš€ Fitur Utama

βœ… Monitoring Real-time

  • CPU: Usage, load average, history chart
  • Memory: RAM & Swap usage dengan breakdown detail
  • Disk: Monitor semua partisi dengan usage percentage
  • Network: Traffic upload/download per interface
  • Processes: Top CPU & Memory processes
  • Docker: Container monitoring (optional)
  • GPU: NVIDIA GPU monitoring (optional)

πŸ–₯️ Multi-Server Support

  • Monitor unlimited servers secara bersamaan
  • Simple dashboard view: Hanya CPU & Memory di card
  • Detailed view: Klik server untuk lihat semua metrics lengkap
  • Independent SSH connections per server
  • Grid layout responsive (1-3 columns)

πŸ” Keamanan

  • Single-user authentication (password lokal)
  • JWT-based session management
  • Encrypted password storage (AES-256)
  • Server credentials stored in encrypted fields inside SQLite database (data/database.sqlite)
  • Private keys stored as .pem files dengan permissions 0600 (owner-only)
  • Private key files tersimpan di data/ssh-keys/ (excluded from git)
  • No agent installation on servers
  • SSH connection only
  • Atomic file operations untuk data persistence

⚑ Real-time Updates

  • WebSocket untuk live data streaming
  • Auto-refresh setiap 5 detik
  • Connection status indicator
  • Error handling & reconnection
  • Sequential SSH command execution

🎨 Modern UI

  • Dark mode support
  • Responsive design (desktop & mobile)
  • Beautiful charts & visualizations
  • Tailwind CSS styling
  • Two-level view: Simple cards + Detailed page

πŸ“‹ Requirements

  • Node.js v18 atau lebih baru
  • npm atau yarn
  • SSH access ke servers yang akan dimonitor

πŸ› οΈ Installation

1. Clone repository

git clone <repository-url>
cd server-monitoring

2. Install dependencies

npm run install:all

Atau manual:

# Install root dependencies
npm install

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

3. Configuration

Salin file contoh environment dan sesuaikan nilainya.

cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env

Backend (backend/.env)

Variable penting:

Key Keterangan
NODE_ENV Gunakan production saat deploy
PORT Port HTTP backend (default 3000)
JWT_SECRET String panjang random (β‰₯32 char) untuk menandatangani token
ENCRYPTION_KEY String panjang random (β‰₯32 char) untuk enkripsi credential
DEFAULT_ADMIN_PASSWORD Password awal login (wajib diganti setelah deploy)
CORS_ORIGIN Daftar origin yang diizinkan (pisahkan dengan koma)
SOCKET_PING_INTERVAL / SOCKET_PING_TIMEOUT (Opsional) tuning koneksi WebSocket

Generate secret secara cepat:

node -e "console.log(require('crypto').randomBytes(48).toString('hex'))"

Frontend (frontend/.env)

Key Keterangan
VITE_API_URL URL backend API (sertakan suffix /api)
VITE_SOCKET_URL URL untuk koneksi Socket.io (tanpa /socket.io)

4. Run Application

Development (both frontend & backend)

npm run dev

Atau jalankan terpisah:

Backend (Terminal 1):

cd backend
npm run dev

Frontend (Terminal 2):

cd frontend
npm run dev

Aplikasi akan berjalan di:

πŸ”‘ Default Login

  • Password awal: Nilai DEFAULT_ADMIN_PASSWORD pada backend/.env

PENTING: Ganti password dari halaman Settings β†’ Ubah Password segera setelah deploy!

πŸ“– Usage Guide

1. Login

Akses http://localhost:5173 dan login menggunakan password yang Anda set di DEFAULT_ADMIN_PASSWORD

2. Add Server

  • Klik tombol "Add Server"
  • Isi informasi server:
    • Name: Nama server (e.g., "Production Server 1")
    • Host: IP address atau hostname
    • Port: SSH port (default: 22)
    • Username: SSH username
    • Authentication: Pilih Password atau Private Key
    • Group: Kategori server (optional)
  • Klik "Add Server"

3. Monitor Server

Setelah server ditambahkan, monitoring akan dimulai secara otomatis:

  • CPU usage & load average
  • Memory & Swap usage
  • Disk partitions
  • Network interfaces
  • Top processes

Data akan di-update setiap 5 detik via WebSocket

4. Manage Servers

  • Refresh: Reload data server
  • Edit: Update credentials atau info server
  • Delete: Hapus server dari monitoring

πŸ—οΈ Architecture

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  React Frontend β”‚  ← Browser (localhost:5173)
β”‚  (Vite)         β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”˜
         β”‚ HTTP REST API + WebSocket
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Express.js API β”‚  ← Backend (localhost:3000)
β”‚  + Socket.io    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”˜
         β”‚ SSH (Port 22)
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β–Όβ”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚  Target Servers β”‚  ← Your servers
β”‚  (Linux)        β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

πŸ“ Project Structure

server-monitoring/
β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ server.js              # Main server
β”‚   β”‚   β”œβ”€β”€ routes/                # API routes
β”‚   β”‚   β”œβ”€β”€ services/              # Business logic
β”‚   β”‚   β”œβ”€β”€ middleware/            # Auth middleware
β”‚   β”‚   └── utils/                 # Utilities
β”‚   β”œβ”€β”€ data/                      # SQLite database & SSH key storage
β”‚   └── package.json
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ pages/                 # React pages
β”‚   β”‚   β”œβ”€β”€ components/            # React components
β”‚   β”‚   β”œβ”€β”€ services/              # API & Socket services
β”‚   β”‚   β”œβ”€β”€ store/                 # State management (Zustand)
β”‚   β”‚   └── App.jsx
β”‚   └── package.json
β”œβ”€β”€ package.json                   # Root package
└── README.md

πŸ”§ Tech Stack

Backend

  • Node.js + Express.js - REST API
  • Socket.io - WebSocket real-time
  • ssh2 - SSH client
  • bcryptjs - Password hashing
  • jsonwebtoken - JWT authentication
  • better-sqlite3 - Embedded SQLite database access

Frontend

  • React 18 - UI library
  • Vite - Build tool
  • Tailwind CSS - Styling
  • Recharts - Charts & graphs
  • Zustand - State management
  • Axios - HTTP client
  • Socket.io-client - WebSocket client
  • React Router - Routing
  • Lucide React - Icons

πŸ› Troubleshooting

Port sudah digunakan?

Jika port 3000 atau 5173 sudah digunakan, edit:

  • Backend port: backend/.env β†’ PORT=3001
  • Frontend port: frontend/vite.config.js β†’ server.port: 5174
  • Update juga: frontend/.env β†’ VITE_API_URL dan VITE_SOCKET_URL

SSH Connection Failed

  • Pastikan port SSH (22) terbuka di firewall
  • Verifikasi username & password/key correct
  • Test manual SSH: ssh username@host -p 22

WebSocket Not Connecting

  • Pastikan backend server running
  • Check browser console untuk errors
  • Verify CORS settings di backend

Data Not Updating

  • Check SSH connection status
  • Verify Linux commands available di server (top, free, df, iostat)
  • Check backend logs untuk errors

Module not found?

Jalankan ulang:

npm run install:all

πŸ“ Linux Commands Used

Aplikasi ini menggunakan command standar Linux:

  • top - CPU usage
  • free -m - Memory info
  • df -h - Disk usage
  • iostat - Disk I/O
  • ip / ifconfig - Network info
  • /proc/net/dev - Network statistics
  • ps aux - Process list
  • uptime - System uptime
  • hostname - Hostname
  • uname - System info

Optional (jika tersedia):

  • docker ps - Docker containers
  • docker stats - Container stats
  • nvidia-smi - GPU info (Nvidia)

πŸš€ Production Deployment

Backend

  1. Set NODE_ENV=production
  2. Ganti JWT_SECRET dan ENCRYPTION_KEY
  3. Setup reverse proxy (nginx/apache)
  4. Enable HTTPS
  5. Setup process manager (PM2):
npm install -g pm2
cd backend
pm2 start src/server.js --name server-monitoring
pm2 save
pm2 startup

Frontend

  1. Build production:
cd frontend
npm run build
  1. Deploy dist/ folder ke web server

πŸ“„ License

MIT License

🀝 Contributing

Contributions are welcome! Feel free to open issues or pull requests.

πŸ“§ Support

Jika ada pertanyaan atau issue, silakan buat issue di repository ini.


Happy Monitoring! πŸŽ‰

About

πŸ–₯️ Web-based server monitoring dashboard via SSH with real-time metrics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages