482 lines
20 KiB
HTML
482 lines
20 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}System Monitoring{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'assets/plugins/chart.js/dist/Chart.min.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="content" class="app-content">
|
|
<div class="container">
|
|
<ul class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item active">System Monitoring</li>
|
|
</ul>
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col">
|
|
<h1 class="page-header">System Monitoring</h1>
|
|
<p class="text-muted">Real-time system performance and health monitoring</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-outline-primary" onclick="refreshMetrics()">
|
|
<i class="fa fa-refresh me-2"></i>Refresh
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary" onclick="toggleAutoRefresh()">
|
|
<i class="fa fa-play me-2" id="autoRefreshIcon"></i>Auto Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Status Overview -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<div class="w-60px h-60px bg-{{ system_status.color }} bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle mx-auto mb-3">
|
|
<i class="fa fa-{{ system_status.icon }} fa-2x text-{{ system_status.color }}"></i>
|
|
</div>
|
|
<h5>System Status</h5>
|
|
<div class="fs-18px fw-600 text-{{ system_status.color }}">{{ system_status.status }}</div>
|
|
<div class="text-muted small">{{ system_status.uptime }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<div class="w-60px h-60px bg-primary bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle mx-auto mb-3">
|
|
<i class="fa fa-microchip fa-2x text-primary"></i>
|
|
</div>
|
|
<h5>CPU Usage</h5>
|
|
<div class="fs-24px fw-600 text-primary">{{ cpu_usage }}%</div>
|
|
<div class="progress mt-2" style="height: 6px;">
|
|
<div class="progress-bar bg-primary" style="width: {{ cpu_usage }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<div class="w-60px h-60px bg-info bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle mx-auto mb-3">
|
|
<i class="fa fa-memory fa-2x text-info"></i>
|
|
</div>
|
|
<h5>Memory Usage</h5>
|
|
<div class="fs-24px fw-600 text-info">{{ memory_usage }}%</div>
|
|
<div class="progress mt-2" style="height: 6px;">
|
|
<div class="progress-bar bg-info" style="width: {{ memory_usage }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<div class="w-60px h-60px bg-warning bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle mx-auto mb-3">
|
|
<i class="fa fa-hdd fa-2x text-warning"></i>
|
|
</div>
|
|
<h5>Disk Usage</h5>
|
|
<div class="fs-24px fw-600 text-warning">{{ disk_usage }}%</div>
|
|
<div class="progress mt-2" style="height: 6px;">
|
|
<div class="progress-bar bg-warning" style="width: {{ disk_usage }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Performance Charts -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">CPU & Memory Usage</h4>
|
|
<div class="card-toolbar">
|
|
<select class="form-select form-select-sm" onchange="updateTimeRange(this.value)">
|
|
<option value="1h">Last Hour</option>
|
|
<option value="6h">Last 6 Hours</option>
|
|
<option value="24h" selected>Last 24 Hours</option>
|
|
<option value="7d">Last 7 Days</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="performanceChart" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Network Traffic</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="networkChart" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Database Performance -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Database Performance</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="fs-24px fw-600 text-primary">{{ db_connections }}</div>
|
|
<div class="text-muted">Active Connections</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="fs-24px fw-600 text-info">{{ db_queries_per_sec }}</div>
|
|
<div class="text-muted">Queries/sec</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="fs-20px fw-600 text-success">{{ db_avg_response_time }}ms</div>
|
|
<div class="text-muted">Avg Response Time</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="fs-20px fw-600 text-warning">{{ db_slow_queries }}</div>
|
|
<div class="text-muted">Slow Queries</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Application Metrics</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="fs-24px fw-600 text-primary">{{ active_users }}</div>
|
|
<div class="text-muted">Active Users</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="fs-24px fw-600 text-info">{{ requests_per_min }}</div>
|
|
<div class="text-muted">Requests/min</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="fs-20px fw-600 text-success">{{ avg_response_time }}ms</div>
|
|
<div class="text-muted">Avg Response Time</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="fs-20px fw-600 text-danger">{{ error_rate }}%</div>
|
|
<div class="text-muted">Error Rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Status -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Service Status</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
{% for service in services %}
|
|
<div class="col-md-3 mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<div class="w-40px h-40px bg-{{ service.status_color }} bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle me-3">
|
|
<i class="fa fa-{{ service.icon }} text-{{ service.status_color }}"></i>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">{{ service.name }}</div>
|
|
<div class="text-muted small">
|
|
<span class="badge bg-{{ service.status_color }}">{{ service.status }}</span>
|
|
{% if service.response_time %}
|
|
<span class="ms-2">{{ service.response_time }}ms</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Alerts -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Recent Alerts</h4>
|
|
<div class="card-toolbar">
|
|
<a href="{% url 'core:system_alerts' %}" class="btn btn-outline-primary btn-sm">
|
|
View All
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for alert in recent_alerts %}
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="w-40px h-40px bg-{{ alert.severity_color }} bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle me-3">
|
|
<i class="fa fa-{{ alert.icon }} text-{{ alert.severity_color }}"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="fw-bold">{{ alert.title }}</div>
|
|
<div class="text-muted small">{{ alert.message|truncatechars:50 }}</div>
|
|
<div class="text-muted small">{{ alert.created_at|timesince }} ago</div>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-{{ alert.severity_color }}">{{ alert.get_severity_display }}</span>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="text-center text-muted">
|
|
<i class="fa fa-check-circle fa-3x mb-3"></i>
|
|
<div>No recent alerts</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">System Logs</h4>
|
|
<div class="card-toolbar">
|
|
<a href="{% url 'core:log_viewer' %}" class="btn btn-outline-primary btn-sm">
|
|
View All
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for log in recent_logs %}
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="w-40px h-40px bg-{{ log.level_color }} bg-opacity-20 d-flex align-items-center justify-content-center rounded-circle me-3">
|
|
<i class="fa fa-{{ log.level_icon }} text-{{ log.level_color }}"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="fw-bold">{{ log.message|truncatechars:40 }}</div>
|
|
<div class="text-muted small">{{ log.logger_name }} - {{ log.created_at|timesince }} ago</div>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-{{ log.level_color }}">{{ log.get_level_display }}</span>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="text-center text-muted">
|
|
<i class="fa fa-file-text fa-3x mb-3"></i>
|
|
<div>No recent logs</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'assets/plugins/chart.js/dist/Chart.min.js' %}"></script>
|
|
|
|
<script>
|
|
var performanceChart, networkChart;
|
|
var autoRefreshInterval;
|
|
var autoRefreshEnabled = false;
|
|
|
|
$(document).ready(function() {
|
|
initializeCharts();
|
|
});
|
|
|
|
function initializeCharts() {
|
|
// Performance Chart
|
|
var performanceCtx = document.getElementById('performanceChart').getContext('2d');
|
|
performanceChart = new Chart(performanceCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: {{ performance_labels|safe }},
|
|
datasets: [{
|
|
label: 'CPU Usage (%)',
|
|
data: {{ cpu_data|safe }},
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.1)',
|
|
tension: 0.4
|
|
}, {
|
|
label: 'Memory Usage (%)',
|
|
data: {{ memory_data|safe }},
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.1)',
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
position: 'top'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Network Chart
|
|
var networkCtx = document.getElementById('networkChart').getContext('2d');
|
|
networkChart = new Chart(networkCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: {{ network_labels|safe }},
|
|
datasets: [{
|
|
label: 'Incoming (MB/s)',
|
|
data: {{ network_in_data|safe }},
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
backgroundColor: 'rgba(75, 192, 192, 0.1)',
|
|
tension: 0.4
|
|
}, {
|
|
label: 'Outgoing (MB/s)',
|
|
data: {{ network_out_data|safe }},
|
|
borderColor: 'rgb(255, 205, 86)',
|
|
backgroundColor: 'rgba(255, 205, 86, 0.1)',
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
position: 'top'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function refreshMetrics() {
|
|
$.get('{% url "core:system_metrics" %}', function(data) {
|
|
// Update metric cards
|
|
updateMetricCards(data);
|
|
|
|
// Update charts
|
|
updateCharts(data);
|
|
|
|
toastr.success('Metrics refreshed');
|
|
}).fail(function() {
|
|
toastr.error('Failed to refresh metrics');
|
|
});
|
|
}
|
|
|
|
function updateMetricCards(data) {
|
|
// Update CPU usage
|
|
$('.cpu-usage').text(data.cpu_usage + '%');
|
|
$('.cpu-progress').css('width', data.cpu_usage + '%');
|
|
|
|
// Update Memory usage
|
|
$('.memory-usage').text(data.memory_usage + '%');
|
|
$('.memory-progress').css('width', data.memory_usage + '%');
|
|
|
|
// Update Disk usage
|
|
$('.disk-usage').text(data.disk_usage + '%');
|
|
$('.disk-progress').css('width', data.disk_usage + '%');
|
|
|
|
// Update other metrics
|
|
$('.active-users').text(data.active_users);
|
|
$('.requests-per-min').text(data.requests_per_min);
|
|
$('.avg-response-time').text(data.avg_response_time + 'ms');
|
|
$('.error-rate').text(data.error_rate + '%');
|
|
}
|
|
|
|
function updateCharts(data) {
|
|
// Update performance chart
|
|
performanceChart.data.labels = data.performance_labels;
|
|
performanceChart.data.datasets[0].data = data.cpu_data;
|
|
performanceChart.data.datasets[1].data = data.memory_data;
|
|
performanceChart.update();
|
|
|
|
// Update network chart
|
|
networkChart.data.labels = data.network_labels;
|
|
networkChart.data.datasets[0].data = data.network_in_data;
|
|
networkChart.data.datasets[1].data = data.network_out_data;
|
|
networkChart.update();
|
|
}
|
|
|
|
function updateTimeRange(range) {
|
|
$.get('{% url "core:system_metrics" %}', {
|
|
'time_range': range
|
|
}, function(data) {
|
|
updateCharts(data);
|
|
}).fail(function() {
|
|
toastr.error('Failed to update time range');
|
|
});
|
|
}
|
|
|
|
function toggleAutoRefresh() {
|
|
if (autoRefreshEnabled) {
|
|
clearInterval(autoRefreshInterval);
|
|
autoRefreshEnabled = false;
|
|
$('#autoRefreshIcon').removeClass('fa-pause').addClass('fa-play');
|
|
toastr.info('Auto-refresh disabled');
|
|
} else {
|
|
autoRefreshInterval = setInterval(function() {
|
|
refreshMetrics();
|
|
}, 30000); // Refresh every 30 seconds
|
|
autoRefreshEnabled = true;
|
|
$('#autoRefreshIcon').removeClass('fa-play').addClass('fa-pause');
|
|
toastr.info('Auto-refresh enabled (30s interval)');
|
|
}
|
|
}
|
|
|
|
// Cleanup on page unload
|
|
$(window).on('beforeunload', function() {
|
|
if (autoRefreshInterval) {
|
|
clearInterval(autoRefreshInterval);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|