mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2026-01-30 13:54:18 -05:00
Add comprehensive Storage Device Performance Dashboard
This commit introduces a complete web-based dashboard for monitoring storage device performance metrics in real-time. Features: - Real-time monitoring with auto-refresh every 5 seconds - Comprehensive metrics collection (disk usage, I/O stats, IOPS, SMART data) - Interactive visualizations using Chart.js - Modern dark-themed responsive UI - Python Flask backend with REST API - System information and uptime tracking - Historical performance trend charts Tech Stack: - Backend: Python 3.8+, Flask, psutil, pySMART - Frontend: HTML5, CSS3, JavaScript ES6+, Chart.js - Cross-platform support with startup scripts for Linux/Windows The dashboard provides system administrators and monitoring enthusiasts with a powerful tool to track storage performance, identify bottlenecks, and monitor disk health. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
parent
dd8601ce16
commit
563a800fad
47
Storage Dashboard/.gitignore
vendored
Normal file
47
Storage Dashboard/.gitignore
vendored
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
# Python
|
||||||
|
__pycache__/
|
||||||
|
*.py[cod]
|
||||||
|
*$py.class
|
||||||
|
*.so
|
||||||
|
.Python
|
||||||
|
build/
|
||||||
|
develop-eggs/
|
||||||
|
dist/
|
||||||
|
downloads/
|
||||||
|
eggs/
|
||||||
|
.eggs/
|
||||||
|
lib/
|
||||||
|
lib64/
|
||||||
|
parts/
|
||||||
|
sdist/
|
||||||
|
var/
|
||||||
|
wheels/
|
||||||
|
pip-wheel-metadata/
|
||||||
|
share/python-wheels/
|
||||||
|
*.egg-info/
|
||||||
|
.installed.cfg
|
||||||
|
*.egg
|
||||||
|
MANIFEST
|
||||||
|
|
||||||
|
# Virtual Environment
|
||||||
|
venv/
|
||||||
|
ENV/
|
||||||
|
env/
|
||||||
|
.venv
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
334
Storage Dashboard/README.md
Normal file
334
Storage Dashboard/README.md
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
# Storage Device Performance Dashboard
|
||||||
|
|
||||||
|
A comprehensive, real-time web-based dashboard for monitoring storage device performance metrics. Track disk usage, I/O performance, IOPS, SMART health data, and more with beautiful visualizations.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
### Real-time Monitoring
|
||||||
|
- **Auto-refresh every 5 seconds** - Stay updated with the latest metrics
|
||||||
|
- **Live performance charts** - Visualize trends over time
|
||||||
|
- **Instant metrics** - See current performance at a glance
|
||||||
|
|
||||||
|
### Comprehensive Metrics
|
||||||
|
|
||||||
|
#### 1. System Information
|
||||||
|
- Platform and OS details
|
||||||
|
- System hostname
|
||||||
|
- Uptime statistics
|
||||||
|
- Boot time
|
||||||
|
|
||||||
|
#### 2. Disk Partitions & Usage
|
||||||
|
- All mounted partitions
|
||||||
|
- Total, used, and free space
|
||||||
|
- Usage percentage with visual progress bars
|
||||||
|
- File system type
|
||||||
|
- Mount points
|
||||||
|
|
||||||
|
#### 3. I/O Performance
|
||||||
|
- Read/Write speeds (MB/s)
|
||||||
|
- IOPS (Input/Output Operations Per Second)
|
||||||
|
- Total data read/written
|
||||||
|
- Real-time speed calculations
|
||||||
|
- Historical trend charts
|
||||||
|
|
||||||
|
#### 4. SMART Health Data
|
||||||
|
- Disk health status
|
||||||
|
- Temperature monitoring
|
||||||
|
- Power-on hours
|
||||||
|
- Power cycle count
|
||||||
|
- Model and serial information
|
||||||
|
- *Note: Requires root/admin privileges*
|
||||||
|
|
||||||
|
#### 5. Visual Analytics
|
||||||
|
- Interactive bar charts for current performance
|
||||||
|
- Line charts for historical trends
|
||||||
|
- Color-coded health indicators
|
||||||
|
- Responsive data tables
|
||||||
|
|
||||||
|
## Technology Stack
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
- **Python 3.8+** - Core language
|
||||||
|
- **Flask 3.0.0** - Web framework
|
||||||
|
- **psutil 5.9.6** - System metrics collection
|
||||||
|
- **pySMART 1.3.0** - SMART data retrieval
|
||||||
|
- **Flask-CORS 4.0.0** - Cross-origin resource sharing
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
- **HTML5/CSS3** - Structure and styling
|
||||||
|
- **JavaScript (ES6+)** - Interactive functionality
|
||||||
|
- **Chart.js 4.4.0** - Data visualization
|
||||||
|
- **Modern responsive design** - Works on all devices
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
- Python 3.8 or higher
|
||||||
|
- pip (Python package manager)
|
||||||
|
- Modern web browser (Chrome, Firefox, Safari, Edge)
|
||||||
|
|
||||||
|
### Step 1: Clone or Navigate to the Directory
|
||||||
|
```bash
|
||||||
|
cd "Storage Dashboard"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2: Install Python Dependencies
|
||||||
|
```bash
|
||||||
|
cd backend
|
||||||
|
pip install -r requirements.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 3: Start the Backend Server
|
||||||
|
```bash
|
||||||
|
python app.py
|
||||||
|
```
|
||||||
|
|
||||||
|
The server will start on `http://localhost:5000`
|
||||||
|
|
||||||
|
### Step 4: Access the Dashboard
|
||||||
|
Open your web browser and navigate to:
|
||||||
|
```
|
||||||
|
http://localhost:5000
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Dashboard Interface
|
||||||
|
|
||||||
|
1. **System Information Panel**
|
||||||
|
- View OS details and system uptime
|
||||||
|
- Located at the top of the dashboard
|
||||||
|
|
||||||
|
2. **Disk Partitions Section**
|
||||||
|
- Each partition displayed as a card
|
||||||
|
- Color-coded progress bars:
|
||||||
|
- Blue: < 75% usage (healthy)
|
||||||
|
- Orange: 75-90% usage (warning)
|
||||||
|
- Red: > 90% usage (critical)
|
||||||
|
|
||||||
|
3. **I/O Performance Charts**
|
||||||
|
- Bar charts show current read/write speeds and IOPS
|
||||||
|
- View all disks simultaneously
|
||||||
|
|
||||||
|
4. **Detailed Statistics Table**
|
||||||
|
- Comprehensive I/O metrics in tabular format
|
||||||
|
- Sortable and easy to read
|
||||||
|
|
||||||
|
5. **SMART Health Section**
|
||||||
|
- Individual cards for each storage device
|
||||||
|
- Health status badges (Good/Warning/Bad)
|
||||||
|
- Detailed device information
|
||||||
|
|
||||||
|
6. **Historical Performance**
|
||||||
|
- Line charts track performance over time
|
||||||
|
- Shows trends for the last 20 data points
|
||||||
|
- Auto-updates every 5 seconds
|
||||||
|
|
||||||
|
### Manual Refresh
|
||||||
|
Click the "Refresh Now" button in the header to manually update all metrics.
|
||||||
|
|
||||||
|
## API Endpoints
|
||||||
|
|
||||||
|
The backend provides the following REST API endpoints:
|
||||||
|
|
||||||
|
| Endpoint | Method | Description |
|
||||||
|
|----------|--------|-------------|
|
||||||
|
| `/api/metrics` | GET | Get all metrics in one call |
|
||||||
|
| `/api/partitions` | GET | Get disk partition information |
|
||||||
|
| `/api/io-stats` | GET | Get I/O statistics |
|
||||||
|
| `/api/smart` | GET | Get SMART health data |
|
||||||
|
| `/api/system-info` | GET | Get system information |
|
||||||
|
|
||||||
|
### Example API Response
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"timestamp": "2024-01-15T10:30:00",
|
||||||
|
"system_info": {
|
||||||
|
"platform": "Linux",
|
||||||
|
"hostname": "server-01",
|
||||||
|
"uptime_days": 15,
|
||||||
|
"uptime_hours": 6,
|
||||||
|
"uptime_minutes": 23
|
||||||
|
},
|
||||||
|
"partitions": [
|
||||||
|
{
|
||||||
|
"device": "/dev/sda1",
|
||||||
|
"mountpoint": "/",
|
||||||
|
"fstype": "ext4",
|
||||||
|
"total_gb": 500.0,
|
||||||
|
"used_gb": 250.0,
|
||||||
|
"free_gb": 250.0,
|
||||||
|
"percent": 50.0
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"io_stats": [
|
||||||
|
{
|
||||||
|
"disk": "sda",
|
||||||
|
"read_speed_mbps": 45.2,
|
||||||
|
"write_speed_mbps": 23.1,
|
||||||
|
"iops_read": 1200,
|
||||||
|
"iops_write": 800
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
### Change Refresh Interval
|
||||||
|
Edit `frontend/dashboard.js`:
|
||||||
|
```javascript
|
||||||
|
const REFRESH_INTERVAL = 5000; // milliseconds (5 seconds)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Change Historical Data Length
|
||||||
|
Edit `frontend/dashboard.js`:
|
||||||
|
```javascript
|
||||||
|
const HISTORY_LENGTH = 20; // number of data points
|
||||||
|
```
|
||||||
|
|
||||||
|
### Change Server Port
|
||||||
|
Edit `backend/app.py`:
|
||||||
|
```python
|
||||||
|
app.run(debug=True, host='0.0.0.0', port=5000)
|
||||||
|
```
|
||||||
|
|
||||||
|
## SMART Data Collection
|
||||||
|
|
||||||
|
SMART data provides valuable insights into disk health but requires elevated privileges:
|
||||||
|
|
||||||
|
### Linux
|
||||||
|
```bash
|
||||||
|
sudo python app.py
|
||||||
|
```
|
||||||
|
|
||||||
|
### Windows
|
||||||
|
Run Command Prompt or PowerShell as Administrator:
|
||||||
|
```bash
|
||||||
|
python app.py
|
||||||
|
```
|
||||||
|
|
||||||
|
### macOS
|
||||||
|
```bash
|
||||||
|
sudo python app.py
|
||||||
|
```
|
||||||
|
|
||||||
|
If SMART data is unavailable, the dashboard will display a message indicating that root/admin privileges are required.
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Backend Won't Start
|
||||||
|
- Ensure Python 3.8+ is installed: `python --version`
|
||||||
|
- Verify all dependencies are installed: `pip install -r requirements.txt`
|
||||||
|
- Check if port 5000 is available
|
||||||
|
|
||||||
|
### No Data Displayed
|
||||||
|
- Ensure the backend server is running
|
||||||
|
- Check browser console for errors (F12)
|
||||||
|
- Verify the API URL in `dashboard.js` matches your backend
|
||||||
|
|
||||||
|
### SMART Data Not Available
|
||||||
|
- SMART data requires root/admin privileges
|
||||||
|
- Run the backend with elevated permissions
|
||||||
|
- Some virtual machines may not expose SMART data
|
||||||
|
|
||||||
|
### Charts Not Rendering
|
||||||
|
- Ensure you have internet connectivity (Chart.js loads from CDN)
|
||||||
|
- Check browser console for JavaScript errors
|
||||||
|
- Try clearing browser cache
|
||||||
|
|
||||||
|
## Security Considerations
|
||||||
|
|
||||||
|
- The dashboard runs on `0.0.0.0` (all interfaces) by default
|
||||||
|
- For production use, configure proper firewall rules
|
||||||
|
- Consider using HTTPS for secure connections
|
||||||
|
- Implement authentication for sensitive environments
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
### Project Structure
|
||||||
|
```
|
||||||
|
Storage Dashboard/
|
||||||
|
├── backend/
|
||||||
|
│ ├── app.py # Flask application
|
||||||
|
│ ├── metrics_collector.py # Metrics collection logic
|
||||||
|
│ └── requirements.txt # Python dependencies
|
||||||
|
└── frontend/
|
||||||
|
├── index.html # Main dashboard page
|
||||||
|
├── styles.css # Styling
|
||||||
|
└── dashboard.js # Frontend logic and charts
|
||||||
|
```
|
||||||
|
|
||||||
|
### Extending the Dashboard
|
||||||
|
|
||||||
|
#### Add New Metrics
|
||||||
|
1. Add collection method in `metrics_collector.py`
|
||||||
|
2. Create API endpoint in `app.py`
|
||||||
|
3. Update frontend to display the new data
|
||||||
|
|
||||||
|
#### Customize Appearance
|
||||||
|
- Modify `styles.css` to change colors and layout
|
||||||
|
- Update CSS variables in `:root` for theme changes
|
||||||
|
|
||||||
|
## Performance
|
||||||
|
|
||||||
|
- **Low overhead** - Minimal impact on system performance
|
||||||
|
- **Efficient polling** - Only collects data when needed
|
||||||
|
- **Optimized charts** - Smooth animations and updates
|
||||||
|
- **Responsive design** - Fast load times
|
||||||
|
|
||||||
|
## Browser Compatibility
|
||||||
|
|
||||||
|
- Chrome/Edge 90+
|
||||||
|
- Firefox 88+
|
||||||
|
- Safari 14+
|
||||||
|
- Opera 76+
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is open source and available for personal and commercial use.
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Contributions are welcome! Feel free to:
|
||||||
|
- Report bugs
|
||||||
|
- Suggest new features
|
||||||
|
- Submit pull requests
|
||||||
|
- Improve documentation
|
||||||
|
|
||||||
|
## Support
|
||||||
|
|
||||||
|
For issues or questions:
|
||||||
|
1. Check the Troubleshooting section
|
||||||
|
2. Review the API documentation
|
||||||
|
3. Examine browser console logs
|
||||||
|
4. Check backend server logs
|
||||||
|
|
||||||
|
## Future Enhancements
|
||||||
|
|
||||||
|
Planned features:
|
||||||
|
- [ ] Export metrics to CSV/JSON
|
||||||
|
- [ ] Email/SMS alerts for critical conditions
|
||||||
|
- [ ] Multi-server monitoring
|
||||||
|
- [ ] Historical data persistence
|
||||||
|
- [ ] Custom metric thresholds
|
||||||
|
- [ ] Network storage support
|
||||||
|
- [ ] Docker containerization
|
||||||
|
|
||||||
|
## Screenshots
|
||||||
|
|
||||||
|
The dashboard features:
|
||||||
|
- Dark theme optimized for monitoring
|
||||||
|
- Color-coded status indicators
|
||||||
|
- Real-time updating charts
|
||||||
|
- Responsive grid layouts
|
||||||
|
- Professional UI design
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Built with ❤️ for system administrators and monitoring enthusiasts**
|
||||||
70
Storage Dashboard/backend/app.py
Normal file
70
Storage Dashboard/backend/app.py
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
from flask import Flask, jsonify, send_from_directory
|
||||||
|
from flask_cors import CORS
|
||||||
|
from metrics_collector import StorageMetricsCollector
|
||||||
|
import os
|
||||||
|
|
||||||
|
app = Flask(__name__, static_folder='../frontend')
|
||||||
|
CORS(app)
|
||||||
|
|
||||||
|
# Initialize metrics collector
|
||||||
|
collector = StorageMetricsCollector()
|
||||||
|
|
||||||
|
@app.route('/')
|
||||||
|
def index():
|
||||||
|
"""Serve the main dashboard page"""
|
||||||
|
return send_from_directory('../frontend', 'index.html')
|
||||||
|
|
||||||
|
@app.route('/api/metrics')
|
||||||
|
def get_metrics():
|
||||||
|
"""Get all storage metrics"""
|
||||||
|
try:
|
||||||
|
metrics = collector.get_all_metrics()
|
||||||
|
return jsonify(metrics)
|
||||||
|
except Exception as e:
|
||||||
|
return jsonify({'error': str(e)}), 500
|
||||||
|
|
||||||
|
@app.route('/api/partitions')
|
||||||
|
def get_partitions():
|
||||||
|
"""Get disk partition information"""
|
||||||
|
try:
|
||||||
|
partitions = collector.get_disk_partitions()
|
||||||
|
return jsonify(partitions)
|
||||||
|
except Exception as e:
|
||||||
|
return jsonify({'error': str(e)}), 500
|
||||||
|
|
||||||
|
@app.route('/api/io-stats')
|
||||||
|
def get_io_stats():
|
||||||
|
"""Get I/O statistics"""
|
||||||
|
try:
|
||||||
|
io_stats = collector.get_io_stats()
|
||||||
|
return jsonify(io_stats)
|
||||||
|
except Exception as e:
|
||||||
|
return jsonify({'error': str(e)}), 500
|
||||||
|
|
||||||
|
@app.route('/api/smart')
|
||||||
|
def get_smart():
|
||||||
|
"""Get SMART data for disks"""
|
||||||
|
try:
|
||||||
|
smart_data = collector.get_smart_data()
|
||||||
|
return jsonify(smart_data)
|
||||||
|
except Exception as e:
|
||||||
|
return jsonify({'error': str(e)}), 500
|
||||||
|
|
||||||
|
@app.route('/api/system-info')
|
||||||
|
def get_system_info():
|
||||||
|
"""Get system information"""
|
||||||
|
try:
|
||||||
|
system_info = collector.get_system_info()
|
||||||
|
return jsonify(system_info)
|
||||||
|
except Exception as e:
|
||||||
|
return jsonify({'error': str(e)}), 500
|
||||||
|
|
||||||
|
@app.route('/<path:path>')
|
||||||
|
def serve_static(path):
|
||||||
|
"""Serve static files"""
|
||||||
|
return send_from_directory('../frontend', path)
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
print("Starting Storage Dashboard Server...")
|
||||||
|
print("Access the dashboard at: http://localhost:5000")
|
||||||
|
app.run(debug=True, host='0.0.0.0', port=5000)
|
||||||
149
Storage Dashboard/backend/metrics_collector.py
Normal file
149
Storage Dashboard/backend/metrics_collector.py
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
import psutil
|
||||||
|
import time
|
||||||
|
import platform
|
||||||
|
from datetime import datetime
|
||||||
|
|
||||||
|
class StorageMetricsCollector:
|
||||||
|
"""Collects comprehensive storage device metrics"""
|
||||||
|
|
||||||
|
def __init__(self):
|
||||||
|
self.previous_io = {}
|
||||||
|
self.last_update = time.time()
|
||||||
|
|
||||||
|
def get_disk_partitions(self):
|
||||||
|
"""Get all disk partitions with their details"""
|
||||||
|
partitions = []
|
||||||
|
for partition in psutil.disk_partitions(all=False):
|
||||||
|
try:
|
||||||
|
usage = psutil.disk_usage(partition.mountpoint)
|
||||||
|
partitions.append({
|
||||||
|
'device': partition.device,
|
||||||
|
'mountpoint': partition.mountpoint,
|
||||||
|
'fstype': partition.fstype,
|
||||||
|
'total': usage.total,
|
||||||
|
'used': usage.used,
|
||||||
|
'free': usage.free,
|
||||||
|
'percent': usage.percent,
|
||||||
|
'total_gb': round(usage.total / (1024**3), 2),
|
||||||
|
'used_gb': round(usage.used / (1024**3), 2),
|
||||||
|
'free_gb': round(usage.free / (1024**3), 2)
|
||||||
|
})
|
||||||
|
except PermissionError:
|
||||||
|
continue
|
||||||
|
return partitions
|
||||||
|
|
||||||
|
def get_io_stats(self):
|
||||||
|
"""Get I/O statistics for all disks"""
|
||||||
|
current_time = time.time()
|
||||||
|
time_delta = current_time - self.last_update
|
||||||
|
|
||||||
|
io_counters = psutil.disk_io_counters(perdisk=True)
|
||||||
|
stats = []
|
||||||
|
|
||||||
|
for disk_name, counter in io_counters.items():
|
||||||
|
disk_stats = {
|
||||||
|
'disk': disk_name,
|
||||||
|
'read_count': counter.read_count,
|
||||||
|
'write_count': counter.write_count,
|
||||||
|
'read_bytes': counter.read_bytes,
|
||||||
|
'write_bytes': counter.write_bytes,
|
||||||
|
'read_mb': round(counter.read_bytes / (1024**2), 2),
|
||||||
|
'write_mb': round(counter.write_bytes / (1024**2), 2),
|
||||||
|
'read_time': counter.read_time,
|
||||||
|
'write_time': counter.write_time,
|
||||||
|
}
|
||||||
|
|
||||||
|
# Calculate rates if we have previous data
|
||||||
|
if disk_name in self.previous_io and time_delta > 0:
|
||||||
|
prev = self.previous_io[disk_name]
|
||||||
|
disk_stats['read_speed_mbps'] = round(
|
||||||
|
(counter.read_bytes - prev['read_bytes']) / (1024**2) / time_delta, 2
|
||||||
|
)
|
||||||
|
disk_stats['write_speed_mbps'] = round(
|
||||||
|
(counter.write_bytes - prev['write_bytes']) / (1024**2) / time_delta, 2
|
||||||
|
)
|
||||||
|
disk_stats['iops_read'] = round(
|
||||||
|
(counter.read_count - prev['read_count']) / time_delta, 2
|
||||||
|
)
|
||||||
|
disk_stats['iops_write'] = round(
|
||||||
|
(counter.write_count - prev['write_count']) / time_delta, 2
|
||||||
|
)
|
||||||
|
else:
|
||||||
|
disk_stats['read_speed_mbps'] = 0
|
||||||
|
disk_stats['write_speed_mbps'] = 0
|
||||||
|
disk_stats['iops_read'] = 0
|
||||||
|
disk_stats['iops_write'] = 0
|
||||||
|
|
||||||
|
self.previous_io[disk_name] = {
|
||||||
|
'read_bytes': counter.read_bytes,
|
||||||
|
'write_bytes': counter.write_bytes,
|
||||||
|
'read_count': counter.read_count,
|
||||||
|
'write_count': counter.write_count
|
||||||
|
}
|
||||||
|
|
||||||
|
stats.append(disk_stats)
|
||||||
|
|
||||||
|
self.last_update = current_time
|
||||||
|
return stats
|
||||||
|
|
||||||
|
def get_smart_data(self):
|
||||||
|
"""Get SMART data for disks (requires root/admin privileges)"""
|
||||||
|
smart_data = []
|
||||||
|
try:
|
||||||
|
from pySMART import DeviceList
|
||||||
|
devlist = DeviceList()
|
||||||
|
for device in devlist.devices:
|
||||||
|
if device:
|
||||||
|
smart_info = {
|
||||||
|
'name': device.name,
|
||||||
|
'model': device.model,
|
||||||
|
'serial': device.serial,
|
||||||
|
'capacity': device.capacity,
|
||||||
|
'temperature': device.temperature,
|
||||||
|
'health': device.assessment,
|
||||||
|
'power_on_hours': None,
|
||||||
|
'power_cycle_count': None
|
||||||
|
}
|
||||||
|
|
||||||
|
# Extract specific SMART attributes
|
||||||
|
if device.attributes:
|
||||||
|
for attr in device.attributes:
|
||||||
|
if attr and hasattr(attr, 'name'):
|
||||||
|
if 'Power_On_Hours' in attr.name:
|
||||||
|
smart_info['power_on_hours'] = attr.raw
|
||||||
|
elif 'Power_Cycle_Count' in attr.name:
|
||||||
|
smart_info['power_cycle_count'] = attr.raw
|
||||||
|
|
||||||
|
smart_data.append(smart_info)
|
||||||
|
except Exception as e:
|
||||||
|
# SMART data requires elevated privileges, return empty if not available
|
||||||
|
return {'error': str(e), 'message': 'SMART data requires root/admin privileges'}
|
||||||
|
|
||||||
|
return smart_data
|
||||||
|
|
||||||
|
def get_system_info(self):
|
||||||
|
"""Get general system information"""
|
||||||
|
boot_time = datetime.fromtimestamp(psutil.boot_time())
|
||||||
|
uptime = datetime.now() - boot_time
|
||||||
|
|
||||||
|
return {
|
||||||
|
'platform': platform.system(),
|
||||||
|
'platform_release': platform.release(),
|
||||||
|
'platform_version': platform.version(),
|
||||||
|
'architecture': platform.machine(),
|
||||||
|
'hostname': platform.node(),
|
||||||
|
'boot_time': boot_time.strftime("%Y-%m-%d %H:%M:%S"),
|
||||||
|
'uptime_days': uptime.days,
|
||||||
|
'uptime_hours': uptime.seconds // 3600,
|
||||||
|
'uptime_minutes': (uptime.seconds % 3600) // 60
|
||||||
|
}
|
||||||
|
|
||||||
|
def get_all_metrics(self):
|
||||||
|
"""Get all storage metrics in one call"""
|
||||||
|
return {
|
||||||
|
'timestamp': datetime.now().isoformat(),
|
||||||
|
'system_info': self.get_system_info(),
|
||||||
|
'partitions': self.get_disk_partitions(),
|
||||||
|
'io_stats': self.get_io_stats(),
|
||||||
|
'smart_data': self.get_smart_data()
|
||||||
|
}
|
||||||
4
Storage Dashboard/backend/requirements.txt
Normal file
4
Storage Dashboard/backend/requirements.txt
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
flask==3.0.0
|
||||||
|
flask-cors==4.0.0
|
||||||
|
psutil==5.9.6
|
||||||
|
pySMART==1.3.0
|
||||||
446
Storage Dashboard/frontend/dashboard.js
Normal file
446
Storage Dashboard/frontend/dashboard.js
Normal file
@ -0,0 +1,446 @@
|
|||||||
|
// Configuration
|
||||||
|
const API_BASE_URL = 'http://localhost:5000/api';
|
||||||
|
const REFRESH_INTERVAL = 5000; // 5 seconds
|
||||||
|
const HISTORY_LENGTH = 20; // Keep last 20 data points
|
||||||
|
|
||||||
|
// Global state
|
||||||
|
let charts = {};
|
||||||
|
let historicalData = {
|
||||||
|
labels: [],
|
||||||
|
readSpeeds: {},
|
||||||
|
writeSpeeds: {},
|
||||||
|
readIOPS: {},
|
||||||
|
writeIOPS: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize the dashboard
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initializeCharts();
|
||||||
|
fetchAllData();
|
||||||
|
startAutoRefresh();
|
||||||
|
|
||||||
|
// Manual refresh button
|
||||||
|
document.getElementById('refresh-btn').addEventListener('click', () => {
|
||||||
|
fetchAllData();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize all charts
|
||||||
|
function initializeCharts() {
|
||||||
|
const chartConfig = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: true,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
color: '#e2e8f0'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
ticks: {
|
||||||
|
color: '#94a3b8'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: '#334155'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
ticks: {
|
||||||
|
color: '#94a3b8'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
color: '#334155'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Speed Chart
|
||||||
|
charts.speed = new Chart(document.getElementById('speed-chart'), {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Read Speed (MB/s)',
|
||||||
|
data: [],
|
||||||
|
backgroundColor: 'rgba(37, 99, 235, 0.8)',
|
||||||
|
borderColor: 'rgba(37, 99, 235, 1)',
|
||||||
|
borderWidth: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Write Speed (MB/s)',
|
||||||
|
data: [],
|
||||||
|
backgroundColor: 'rgba(6, 182, 212, 0.8)',
|
||||||
|
borderColor: 'rgba(6, 182, 212, 1)',
|
||||||
|
borderWidth: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: chartConfig
|
||||||
|
});
|
||||||
|
|
||||||
|
// IOPS Chart
|
||||||
|
charts.iops = new Chart(document.getElementById('iops-chart'), {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Read IOPS',
|
||||||
|
data: [],
|
||||||
|
backgroundColor: 'rgba(16, 185, 129, 0.8)',
|
||||||
|
borderColor: 'rgba(16, 185, 129, 1)',
|
||||||
|
borderWidth: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Write IOPS',
|
||||||
|
data: [],
|
||||||
|
backgroundColor: 'rgba(245, 158, 11, 0.8)',
|
||||||
|
borderColor: 'rgba(245, 158, 11, 1)',
|
||||||
|
borderWidth: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: chartConfig
|
||||||
|
});
|
||||||
|
|
||||||
|
// Historical Speed Chart
|
||||||
|
charts.historical = new Chart(document.getElementById('historical-chart'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: []
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
...chartConfig,
|
||||||
|
elements: {
|
||||||
|
line: {
|
||||||
|
tension: 0.4
|
||||||
|
},
|
||||||
|
point: {
|
||||||
|
radius: 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Historical IOPS Chart
|
||||||
|
charts.iopsTrend = new Chart(document.getElementById('iops-trend-chart'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: []
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
...chartConfig,
|
||||||
|
elements: {
|
||||||
|
line: {
|
||||||
|
tension: 0.4
|
||||||
|
},
|
||||||
|
point: {
|
||||||
|
radius: 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch all data
|
||||||
|
async function fetchAllData() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/metrics`);
|
||||||
|
if (!response.ok) throw new Error('Failed to fetch metrics');
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
updateSystemInfo(data.system_info);
|
||||||
|
updatePartitions(data.partitions);
|
||||||
|
updateIOStats(data.io_stats);
|
||||||
|
updateSMARTData(data.smart_data);
|
||||||
|
updateHistoricalData(data.io_stats);
|
||||||
|
updateLastUpdateTime();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
showError('Failed to fetch data from server. Make sure the backend is running.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update system information
|
||||||
|
function updateSystemInfo(info) {
|
||||||
|
if (!info) return;
|
||||||
|
|
||||||
|
document.getElementById('platform').textContent =
|
||||||
|
`${info.platform} ${info.platform_release}`;
|
||||||
|
document.getElementById('hostname').textContent = info.hostname;
|
||||||
|
document.getElementById('uptime').textContent =
|
||||||
|
`${info.uptime_days}d ${info.uptime_hours}h ${info.uptime_minutes}m`;
|
||||||
|
document.getElementById('boot-time').textContent = info.boot_time;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update disk partitions
|
||||||
|
function updatePartitions(partitions) {
|
||||||
|
if (!partitions || partitions.length === 0) {
|
||||||
|
document.getElementById('partitions-container').innerHTML =
|
||||||
|
'<div class="info-message">No partitions found</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = document.getElementById('partitions-container');
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
partitions.forEach(partition => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'partition-card';
|
||||||
|
|
||||||
|
let progressClass = '';
|
||||||
|
if (partition.percent >= 90) progressClass = 'danger';
|
||||||
|
else if (partition.percent >= 75) progressClass = 'warning';
|
||||||
|
|
||||||
|
card.innerHTML = `
|
||||||
|
<div class="partition-header">
|
||||||
|
<div class="partition-name">${partition.device}</div>
|
||||||
|
<div class="partition-type">${partition.fstype}</div>
|
||||||
|
</div>
|
||||||
|
<div class="partition-info">
|
||||||
|
<div class="partition-info-row">
|
||||||
|
<span class="label">Mount Point:</span>
|
||||||
|
<span class="value">${partition.mountpoint}</span>
|
||||||
|
</div>
|
||||||
|
<div class="partition-info-row">
|
||||||
|
<span class="label">Total:</span>
|
||||||
|
<span class="value">${partition.total_gb} GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="partition-info-row">
|
||||||
|
<span class="label">Used:</span>
|
||||||
|
<span class="value">${partition.used_gb} GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="partition-info-row">
|
||||||
|
<span class="label">Free:</span>
|
||||||
|
<span class="value">${partition.free_gb} GB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill ${progressClass}" style="width: ${partition.percent}%">
|
||||||
|
${partition.percent.toFixed(1)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
container.appendChild(card);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update I/O statistics
|
||||||
|
function updateIOStats(ioStats) {
|
||||||
|
if (!ioStats || ioStats.length === 0) {
|
||||||
|
document.getElementById('io-stats-body').innerHTML =
|
||||||
|
'<tr><td colspan="7" class="loading">No I/O data available</td></tr>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update table
|
||||||
|
const tbody = document.getElementById('io-stats-body');
|
||||||
|
tbody.innerHTML = '';
|
||||||
|
|
||||||
|
ioStats.forEach(stat => {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
row.innerHTML = `
|
||||||
|
<td><strong>${stat.disk}</strong></td>
|
||||||
|
<td>${stat.read_speed_mbps.toFixed(2)} MB/s</td>
|
||||||
|
<td>${stat.write_speed_mbps.toFixed(2)} MB/s</td>
|
||||||
|
<td>${stat.iops_read.toFixed(0)}</td>
|
||||||
|
<td>${stat.iops_write.toFixed(0)}</td>
|
||||||
|
<td>${stat.read_mb.toFixed(2)} MB</td>
|
||||||
|
<td>${stat.write_mb.toFixed(2)} MB</td>
|
||||||
|
`;
|
||||||
|
tbody.appendChild(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update bar charts
|
||||||
|
const labels = ioStats.map(s => s.disk);
|
||||||
|
const readSpeeds = ioStats.map(s => s.read_speed_mbps);
|
||||||
|
const writeSpeeds = ioStats.map(s => s.write_speed_mbps);
|
||||||
|
const readIOPS = ioStats.map(s => s.iops_read);
|
||||||
|
const writeIOPS = ioStats.map(s => s.iops_write);
|
||||||
|
|
||||||
|
charts.speed.data.labels = labels;
|
||||||
|
charts.speed.data.datasets[0].data = readSpeeds;
|
||||||
|
charts.speed.data.datasets[1].data = writeSpeeds;
|
||||||
|
charts.speed.update();
|
||||||
|
|
||||||
|
charts.iops.data.labels = labels;
|
||||||
|
charts.iops.data.datasets[0].data = readIOPS;
|
||||||
|
charts.iops.data.datasets[1].data = writeIOPS;
|
||||||
|
charts.iops.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update SMART data
|
||||||
|
function updateSMARTData(smartData) {
|
||||||
|
const container = document.getElementById('smart-container');
|
||||||
|
|
||||||
|
if (!smartData || (Array.isArray(smartData) && smartData.length === 0)) {
|
||||||
|
container.innerHTML =
|
||||||
|
'<div class="info-message">No SMART data available (requires root/admin privileges)</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (smartData.error) {
|
||||||
|
container.innerHTML =
|
||||||
|
`<div class="info-message">SMART data unavailable: ${smartData.message}</div>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
smartData.forEach(device => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'smart-card';
|
||||||
|
|
||||||
|
let healthClass = 'good';
|
||||||
|
let healthText = device.health || 'Unknown';
|
||||||
|
if (healthText.toLowerCase().includes('fail')) healthClass = 'bad';
|
||||||
|
else if (healthText.toLowerCase().includes('warn')) healthClass = 'warning';
|
||||||
|
|
||||||
|
card.innerHTML = `
|
||||||
|
<div class="smart-header">
|
||||||
|
<div class="smart-model">${device.name}</div>
|
||||||
|
<div class="health-badge ${healthClass}">${healthText}</div>
|
||||||
|
</div>
|
||||||
|
<div class="smart-details">
|
||||||
|
<div class="smart-row">
|
||||||
|
<span class="label">Model:</span>
|
||||||
|
<span class="value">${device.model || 'N/A'}</span>
|
||||||
|
</div>
|
||||||
|
<div class="smart-row">
|
||||||
|
<span class="label">Serial:</span>
|
||||||
|
<span class="value">${device.serial || 'N/A'}</span>
|
||||||
|
</div>
|
||||||
|
<div class="smart-row">
|
||||||
|
<span class="label">Capacity:</span>
|
||||||
|
<span class="value">${device.capacity || 'N/A'}</span>
|
||||||
|
</div>
|
||||||
|
<div class="smart-row">
|
||||||
|
<span class="label">Temperature:</span>
|
||||||
|
<span class="value">${device.temperature ? device.temperature + '°C' : 'N/A'}</span>
|
||||||
|
</div>
|
||||||
|
<div class="smart-row">
|
||||||
|
<span class="label">Power On Hours:</span>
|
||||||
|
<span class="value">${device.power_on_hours || 'N/A'}</span>
|
||||||
|
</div>
|
||||||
|
<div class="smart-row">
|
||||||
|
<span class="label">Power Cycles:</span>
|
||||||
|
<span class="value">${device.power_cycle_count || 'N/A'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
container.appendChild(card);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update historical data
|
||||||
|
function updateHistoricalData(ioStats) {
|
||||||
|
if (!ioStats || ioStats.length === 0) return;
|
||||||
|
|
||||||
|
const now = new Date().toLocaleTimeString();
|
||||||
|
historicalData.labels.push(now);
|
||||||
|
|
||||||
|
ioStats.forEach(stat => {
|
||||||
|
if (!historicalData.readSpeeds[stat.disk]) {
|
||||||
|
historicalData.readSpeeds[stat.disk] = [];
|
||||||
|
historicalData.writeSpeeds[stat.disk] = [];
|
||||||
|
historicalData.readIOPS[stat.disk] = [];
|
||||||
|
historicalData.writeIOPS[stat.disk] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
historicalData.readSpeeds[stat.disk].push(stat.read_speed_mbps);
|
||||||
|
historicalData.writeSpeeds[stat.disk].push(stat.write_speed_mbps);
|
||||||
|
historicalData.readIOPS[stat.disk].push(stat.iops_read);
|
||||||
|
historicalData.writeIOPS[stat.disk].push(stat.iops_write);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keep only last N data points
|
||||||
|
if (historicalData.labels.length > HISTORY_LENGTH) {
|
||||||
|
historicalData.labels.shift();
|
||||||
|
Object.keys(historicalData.readSpeeds).forEach(disk => {
|
||||||
|
historicalData.readSpeeds[disk].shift();
|
||||||
|
historicalData.writeSpeeds[disk].shift();
|
||||||
|
historicalData.readIOPS[disk].shift();
|
||||||
|
historicalData.writeIOPS[disk].shift();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateHistoricalCharts();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update historical charts
|
||||||
|
function updateHistoricalCharts() {
|
||||||
|
const colors = [
|
||||||
|
'rgba(37, 99, 235, 1)',
|
||||||
|
'rgba(6, 182, 212, 1)',
|
||||||
|
'rgba(16, 185, 129, 1)',
|
||||||
|
'rgba(245, 158, 11, 1)',
|
||||||
|
'rgba(239, 68, 68, 1)',
|
||||||
|
'rgba(168, 85, 247, 1)'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Speed trend chart
|
||||||
|
charts.historical.data.labels = historicalData.labels;
|
||||||
|
charts.historical.data.datasets = [];
|
||||||
|
|
||||||
|
let colorIndex = 0;
|
||||||
|
Object.keys(historicalData.readSpeeds).forEach(disk => {
|
||||||
|
charts.historical.data.datasets.push({
|
||||||
|
label: `${disk} Read`,
|
||||||
|
data: historicalData.readSpeeds[disk],
|
||||||
|
borderColor: colors[colorIndex % colors.length],
|
||||||
|
backgroundColor: colors[colorIndex % colors.length].replace('1)', '0.1)'),
|
||||||
|
borderWidth: 2,
|
||||||
|
fill: false
|
||||||
|
});
|
||||||
|
colorIndex++;
|
||||||
|
});
|
||||||
|
|
||||||
|
charts.historical.update();
|
||||||
|
|
||||||
|
// IOPS trend chart
|
||||||
|
charts.iopsTrend.data.labels = historicalData.labels;
|
||||||
|
charts.iopsTrend.data.datasets = [];
|
||||||
|
|
||||||
|
colorIndex = 0;
|
||||||
|
Object.keys(historicalData.readIOPS).forEach(disk => {
|
||||||
|
charts.iopsTrend.data.datasets.push({
|
||||||
|
label: `${disk} Read IOPS`,
|
||||||
|
data: historicalData.readIOPS[disk],
|
||||||
|
borderColor: colors[colorIndex % colors.length],
|
||||||
|
backgroundColor: colors[colorIndex % colors.length].replace('1)', '0.1)'),
|
||||||
|
borderWidth: 2,
|
||||||
|
fill: false
|
||||||
|
});
|
||||||
|
colorIndex++;
|
||||||
|
});
|
||||||
|
|
||||||
|
charts.iopsTrend.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update last update time
|
||||||
|
function updateLastUpdateTime() {
|
||||||
|
const now = new Date();
|
||||||
|
document.getElementById('last-update').textContent =
|
||||||
|
`Last Update: ${now.toLocaleTimeString()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start auto-refresh
|
||||||
|
function startAutoRefresh() {
|
||||||
|
setInterval(fetchAllData, REFRESH_INTERVAL);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show error message
|
||||||
|
function showError(message) {
|
||||||
|
console.error(message);
|
||||||
|
// You could add a toast notification here
|
||||||
|
}
|
||||||
121
Storage Dashboard/frontend/index.html
Normal file
121
Storage Dashboard/frontend/index.html
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Storage Device Performance Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>Storage Device Performance Dashboard</h1>
|
||||||
|
<div class="header-info">
|
||||||
|
<span id="last-update">Last Update: Never</span>
|
||||||
|
<button id="refresh-btn" class="btn">Refresh Now</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- System Information -->
|
||||||
|
<section class="section">
|
||||||
|
<h2>System Information</h2>
|
||||||
|
<div class="system-info-grid" id="system-info">
|
||||||
|
<div class="info-card">
|
||||||
|
<span class="label">Platform:</span>
|
||||||
|
<span class="value" id="platform">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-card">
|
||||||
|
<span class="label">Hostname:</span>
|
||||||
|
<span class="value" id="hostname">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-card">
|
||||||
|
<span class="label">Uptime:</span>
|
||||||
|
<span class="value" id="uptime">Loading...</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-card">
|
||||||
|
<span class="label">Boot Time:</span>
|
||||||
|
<span class="value" id="boot-time">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Disk Partitions -->
|
||||||
|
<section class="section">
|
||||||
|
<h2>Disk Partitions & Usage</h2>
|
||||||
|
<div id="partitions-container" class="partitions-grid">
|
||||||
|
<div class="loading">Loading partition data...</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- I/O Performance Charts -->
|
||||||
|
<section class="section">
|
||||||
|
<h2>I/O Performance Metrics</h2>
|
||||||
|
<div class="charts-grid">
|
||||||
|
<div class="chart-container">
|
||||||
|
<h3>Read/Write Speed (MB/s)</h3>
|
||||||
|
<canvas id="speed-chart"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="chart-container">
|
||||||
|
<h3>IOPS (Operations/sec)</h3>
|
||||||
|
<canvas id="iops-chart"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- I/O Statistics Table -->
|
||||||
|
<section class="section">
|
||||||
|
<h2>Detailed I/O Statistics</h2>
|
||||||
|
<div class="table-container">
|
||||||
|
<table id="io-stats-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Disk</th>
|
||||||
|
<th>Read Speed</th>
|
||||||
|
<th>Write Speed</th>
|
||||||
|
<th>Read IOPS</th>
|
||||||
|
<th>Write IOPS</th>
|
||||||
|
<th>Total Read</th>
|
||||||
|
<th>Total Write</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="io-stats-body">
|
||||||
|
<tr>
|
||||||
|
<td colspan="7" class="loading">Loading I/O statistics...</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SMART Data -->
|
||||||
|
<section class="section">
|
||||||
|
<h2>SMART Health Data</h2>
|
||||||
|
<div id="smart-container" class="smart-grid">
|
||||||
|
<div class="info-message">Loading SMART data...</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Historical Data Charts -->
|
||||||
|
<section class="section">
|
||||||
|
<h2>Historical Performance</h2>
|
||||||
|
<div class="charts-grid">
|
||||||
|
<div class="chart-container">
|
||||||
|
<h3>Read/Write Trends</h3>
|
||||||
|
<canvas id="historical-chart"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="chart-container">
|
||||||
|
<h3>IOPS Trends</h3>
|
||||||
|
<canvas id="iops-trend-chart"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Auto-refresh every 5 seconds | Data updates in real-time</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="dashboard.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
386
Storage Dashboard/frontend/styles.css
Normal file
386
Storage Dashboard/frontend/styles.css
Normal file
@ -0,0 +1,386 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #2563eb;
|
||||||
|
--secondary-color: #1e40af;
|
||||||
|
--success-color: #10b981;
|
||||||
|
--warning-color: #f59e0b;
|
||||||
|
--danger-color: #ef4444;
|
||||||
|
--bg-color: #0f172a;
|
||||||
|
--card-bg: #1e293b;
|
||||||
|
--text-color: #e2e8f0;
|
||||||
|
--text-muted: #94a3b8;
|
||||||
|
--border-color: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
background: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: var(--card-bg);
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
background: linear-gradient(135deg, var(--primary-color), #06b6d4);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#last-update {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background: var(--secondary-color);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
background: var(--card-bg);
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--text-color);
|
||||||
|
border-bottom: 2px solid var(--border-color);
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
background: var(--bg-color);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card .label {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card .value {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partitions-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partition-card {
|
||||||
|
background: var(--bg-color);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.partition-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partition-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.partition-type {
|
||||||
|
background: var(--border-color);
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.partition-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partition-info-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partition-info-row .label {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.partition-info-row .value {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 24px;
|
||||||
|
background: var(--border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, var(--primary-color), #06b6d4);
|
||||||
|
transition: width 0.5s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill.warning {
|
||||||
|
background: linear-gradient(90deg, var(--warning-color), #fbbf24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill.danger {
|
||||||
|
background: linear-gradient(90deg, var(--danger-color), #f87171);
|
||||||
|
}
|
||||||
|
|
||||||
|
.charts-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
background: var(--bg-color);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container canvas {
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: var(--bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
padding: 12px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-bottom: 2px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:hover {
|
||||||
|
background: var(--bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.smart-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smart-card {
|
||||||
|
background: var(--bg-color);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.smart-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.smart-model {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-badge {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-badge.good {
|
||||||
|
background: var(--success-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-badge.warning {
|
||||||
|
background: var(--warning-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.health-badge.bad {
|
||||||
|
background: var(--danger-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smart-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smart-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smart-row .label {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.smart-row .value {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-message {
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--bg-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
padding: 15px;
|
||||||
|
background: rgba(239, 68, 68, 0.1);
|
||||||
|
border: 1px solid var(--danger-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--danger-color);
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
header {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.charts-grid,
|
||||||
|
.partitions-grid,
|
||||||
|
.smart-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
Storage Dashboard/start.bat
Normal file
45
Storage Dashboard/start.bat
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
@echo off
|
||||||
|
REM Storage Dashboard Start Script for Windows
|
||||||
|
|
||||||
|
echo ================================
|
||||||
|
echo Storage Dashboard Startup
|
||||||
|
echo ================================
|
||||||
|
echo.
|
||||||
|
|
||||||
|
REM Check if Python is installed
|
||||||
|
python --version >nul 2>&1
|
||||||
|
if errorlevel 1 (
|
||||||
|
echo Error: Python is not installed
|
||||||
|
pause
|
||||||
|
exit /b 1
|
||||||
|
)
|
||||||
|
|
||||||
|
echo Python version:
|
||||||
|
python --version
|
||||||
|
echo.
|
||||||
|
|
||||||
|
REM Navigate to backend directory
|
||||||
|
cd backend
|
||||||
|
|
||||||
|
REM Check if requirements are installed
|
||||||
|
echo Checking dependencies...
|
||||||
|
python -c "import flask" >nul 2>&1
|
||||||
|
if errorlevel 1 (
|
||||||
|
echo Installing dependencies...
|
||||||
|
pip install -r requirements.txt
|
||||||
|
) else (
|
||||||
|
echo Dependencies already installed
|
||||||
|
)
|
||||||
|
|
||||||
|
echo.
|
||||||
|
echo ================================
|
||||||
|
echo Starting Storage Dashboard...
|
||||||
|
echo ================================
|
||||||
|
echo.
|
||||||
|
echo Access the dashboard at: http://localhost:5000
|
||||||
|
echo.
|
||||||
|
echo Press Ctrl+C to stop the server
|
||||||
|
echo.
|
||||||
|
|
||||||
|
REM Start the Flask application
|
||||||
|
python app.py
|
||||||
42
Storage Dashboard/start.sh
Executable file
42
Storage Dashboard/start.sh
Executable file
@ -0,0 +1,42 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# Storage Dashboard Start Script
|
||||||
|
|
||||||
|
echo "================================"
|
||||||
|
echo "Storage Dashboard Startup"
|
||||||
|
echo "================================"
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
# Check if Python is installed
|
||||||
|
if ! command -v python3 &> /dev/null; then
|
||||||
|
echo "Error: Python 3 is not installed"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "Python version: $(python3 --version)"
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
# Navigate to backend directory
|
||||||
|
cd backend
|
||||||
|
|
||||||
|
# Check if requirements are installed
|
||||||
|
echo "Checking dependencies..."
|
||||||
|
if ! python3 -c "import flask" 2>/dev/null; then
|
||||||
|
echo "Installing dependencies..."
|
||||||
|
pip install -r requirements.txt
|
||||||
|
else
|
||||||
|
echo "Dependencies already installed"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "================================"
|
||||||
|
echo "Starting Storage Dashboard..."
|
||||||
|
echo "================================"
|
||||||
|
echo ""
|
||||||
|
echo "Access the dashboard at: http://localhost:5000"
|
||||||
|
echo ""
|
||||||
|
echo "Press Ctrl+C to stop the server"
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
# Start the Flask application
|
||||||
|
python3 app.py
|
||||||
Loading…
Reference in New Issue
Block a user