# 🖥️ 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
   ```php
   POST /api.php
   {
       "action": "system_health"
   }
   ```
   
   **Response:**
   ```json
   {
       "success": true,
       "health": {
           "services": {...},
           "components": {...},
           "devices": {...},
           "overall": {...},
           "system": {...}
       }
   }
   ```

2. **`restart_appliance`** - Restart the system
   ```php
   POST /api.php
   {
       "action": "restart_appliance"
   }
   ```

3. **`shutdown_appliance`** - Shutdown the system
   ```php
   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

```bash
# 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)

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

### Test Shutdown (Optional - Requires Physical Access)

```bash
# 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