vtl-appliance/docs/WEB_UI_SYSTEM_MONITORING.md

🖥️ Web UI System Monitoring & Management

📋 Overview

Added comprehensive system monitoring and appliance management features to the MHVTL Web UI, including real-time health monitoring, service status tracking, and power management controls.

---

✨ New Features

1. System Health Dashboard 💚

Real-time monitoring of all VTL components with automatic refresh every 30 seconds.

Displays:

• Overall system health status (Healthy/Degraded/Critical)
• Health score percentage
• System uptime
• Service status (mhvtl, apache2, tgt)
• Component status (vtltape, vtllibrary)
• SCSI device detection (library, drives)
• Detailed drive information

Health Levels:

• 🟢 HEALTHY (100%) - All systems operational
• 🟡 DEGRADED (66-99%) - Some components need attention
• 🔴 CRITICAL (0-65%) - Multiple components offline

2. Service Monitoring 📊

Tracks all critical services:

• mhvtl - Virtual Tape Library service
• apache2 - Web UI server
• tgt - iSCSI target service

For each service shows:

• Running status (🟢 Running / 🔴 Stopped)
• Auto-start configuration (✅ Enabled / ❌ Disabled)

3. Component Monitoring 🔧

Monitors MHVTL components:

• vtltape - Tape drive processes (shows count)
• vtllibrary - Library/changer process

4. Device Monitoring 💾

Displays SCSI device status:

• Library (Changer) - Detection status and details
• Tape Drives - Count and detailed information

5. Power Management ⚡

Safe appliance power controls with confirmation dialogs:

Restart Appliance 🔄

• Reboots the entire system
• Shows countdown timer (60 seconds)
• Auto-reload prompt when system is back online

Shutdown Appliance ⏻

• Powers off the system completely
• Double confirmation required
• Shows countdown timer (30 seconds)
• Warns about physical access requirement

---

🎨 User Interface

System Tab

New "System" tab added to navigation menu (first tab):

[System] [Library] [Drives] [Tapes] [Manage Tapes] [iSCSI] [Export]

Dashboard Layout

╔════════════════════════════════════════════════════════╗
║  🖥️ System Monitoring & Management                     ║
╠════════════════════════════════════════════════════════╣
║                                                        ║
║  💚 System Health Dashboard         [🔄 Refresh]      ║
║  ┌──────────────────────────────────────────────────┐ ║
║  │ ✅ System Status: HEALTHY                        │ ║
║  │ All systems operational                          │ ║
║  │ Health Score: 6/6 (100%)                         │ ║
║  │ Uptime: up 2 hours, 15 minutes                   │ ║
║  └──────────────────────────────────────────────────┘ ║
║                                                        ║
║  📊 Services                                           ║
║  ┌──────────────┬──────────────┬──────────────────┐   ║
║  │ Service      │ Status       │ Auto-Start       │   ║
║  ├──────────────┼──────────────┼──────────────────┤   ║
║  │ mhvtl        │ 🟢 Running   │ ✅ Enabled       │   ║
║  │ apache2      │ 🟢 Running   │ ✅ Enabled       │   ║
║  │ tgt          │ 🟢 Running   │ ✅ Enabled       │   ║
║  └──────────────┴──────────────┴──────────────────┘   ║
║                                                        ║
║  🔧 Components                                         ║
║  💾 SCSI Devices                                       ║
║  ...                                                   ║
║                                                        ║
║  ⚡ Power Management                                   ║
║  ⚠️ Warning: These actions will affect the entire     ║
║  appliance.                                            ║
║                                                        ║
║  [🔄 Restart Appliance]  [⏻ Shutdown Appliance]      ║
║                                                        ║
╚════════════════════════════════════════════════════════╝

---

🔧 Technical Implementation

Backend (PHP)

File: /builder/adastra-vtl/web-ui/api.php

New API Endpoints:

1. system_health - Get system health data

   POST /api.php
   {
       "action": "system_health"
   }
   

   Response:

   {
       "success": true,
       "health": {
           "services": {...},
           "components": {...},
           "devices": {...},
           "overall": {...},
           "system": {...}
       }
   }
   

2. restart_appliance - Restart the system

   POST /api.php
   {
       "action": "restart_appliance"
   }
   

3. shutdown_appliance - Shutdown the system

   POST /api.php
   {
       "action": "shutdown_appliance"
   }
   

Functions Added:

• getSystemHealth() - Collects comprehensive system health data
• restartAppliance() - Initiates system reboot
• shutdownAppliance() - Initiates system shutdown

Frontend (JavaScript)

File: /builder/adastra-vtl/web-ui/script.js

Functions Added:

• loadSystemHealth() - Initialize health monitoring with auto-refresh
• refreshSystemHealth() - Fetch and update health data
• renderHealthDashboard(health) - Render health dashboard HTML
• restartAppliance() - Handle restart with confirmation and countdown
• shutdownAppliance() - Handle shutdown with double confirmation

Features:

• Auto-refresh: Health data refreshes every 30 seconds
• Confirmation dialogs: Prevent accidental power actions
• Countdown timers: Visual feedback during restart/shutdown
• Color-coded status: Green (healthy), Yellow (degraded), Red (critical)
• Detailed tables: Organized display of all system components

Frontend (HTML)

File: /builder/adastra-vtl/web-ui/index.html

Changes:

• Added "System" tab to navigation
• Added system monitoring section with health dashboard
• Added power management controls
• Integrated result display areas

---

🎯 Usage

Accessing System Monitoring

1. Open Web UI: http://localhost/mhvtl-config/
2. Click on "System" tab (first tab)
3. View real-time system health dashboard

Monitoring Health

• Dashboard auto-refreshes every 30 seconds
• Click "🔄 Refresh" button for manual refresh
• Check color-coded status indicators:
  • 🟢 Green = Running/Healthy
  • 🔴 Red = Stopped/Critical
  • ✅ Checkmark = Enabled
  • ❌ X mark = Disabled

Restarting Appliance

1. Click "🔄 Restart Appliance" button
2. Confirm the action in dialog
3. Wait for countdown (60 seconds)
4. System will reboot
5. Click reload link when prompted

Shutting Down Appliance

1. Click "⏻ Shutdown Appliance" button
2. Confirm first warning
3. Confirm second (final) warning
4. Wait for countdown (30 seconds)
5. System will power off

---

🔒 Security Features

Confirmation Dialogs

Restart:

• Single confirmation required
• Clear warning about service interruption

Shutdown:

• Double confirmation required
• Warns about physical access requirement
• Final warning before execution

Delayed Execution

Both restart and shutdown use delayed execution (2-second delay) to ensure:

• API response is sent before system action
• User sees confirmation message
• Clean shutdown of services

---

📊 Health Scoring

Calculation

Health score is calculated based on:

• Services (3 checks): mhvtl, apache2, tgt
• Components (2 checks): vtltape, vtllibrary
• Devices (2 checks): library, drives

Total: 7 checks

Status Determination

100%      → HEALTHY   (All systems operational)
66-99%    → DEGRADED  (Some components need attention)
0-65%     → CRITICAL  (Multiple components offline)

---

🎨 Visual Design

Status Colors

• Green (#28a745) - Healthy/Running
• Yellow (#ffc107) - Warning/Degraded
• Red (#dc3545) - Critical/Stopped
• Blue (#007bff) - Info/Actions

Icons

• 🟢 Running/Detected
• 🔴 Stopped/Not Detected
• ✅ Enabled/Success
• ❌ Disabled/Error
• ⚠️ Warning
• 🔄 Refresh/Restart
• ⏻ Power/Shutdown
• 💚 Health
• 📊 Services
• 🔧 Components
• 💾 Devices

---

📁 Files Modified

1. /builder/adastra-vtl/web-ui/api.php

   • Added 3 new API endpoints
   • Added 3 new functions
   • +171 lines

2. /builder/adastra-vtl/web-ui/script.js

   • Added system health monitoring
   • Added power management functions
   • +297 lines

3. /builder/adastra-vtl/web-ui/index.html

   • Added System tab
   • Added system monitoring section
   • +43 lines

4. Deployed to: /var/www/html/mhvtl-config/

---

✅ Testing

Test Health Monitoring

# Open Web UI
http://localhost/mhvtl-config/

# Navigate to System tab
# Verify:
- Health dashboard loads
- All services shown
- All components shown
- All devices shown
- Status indicators correct
- Auto-refresh works (wait 30s)

Test Restart (Optional)

# Click Restart Appliance
# Verify:
- Confirmation dialog appears
- Countdown starts
- System reboots
- Web UI accessible after reboot

Test Shutdown (Optional - Requires Physical Access)

# Click Shutdown Appliance
# Verify:
- First confirmation dialog
- Second confirmation dialog
- Countdown starts
- System powers off

---

🎉 Benefits

1. Real-time Monitoring - See system status at a glance
2. Proactive Alerts - Identify issues before they become critical
3. Remote Management - Restart/shutdown without SSH access
4. User-Friendly - Visual dashboard with color coding
5. Safe Operations - Confirmation dialogs prevent accidents
6. Auto-Refresh - Always up-to-date information
7. Comprehensive - All components monitored in one place

---

Status: ✅ COMPLETE
Date: December 9, 2025
Access: http://localhost/mhvtl-config/ → System tab
Auto-Refresh: Every 30 seconds