gru/haproxy-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

supervisord

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-11-01 21:17:21 +01:00
parent 8d88080c7f
commit 36be2db418
7 changed files with 294 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app.py
View File

@@ -103,85 +103,7 @@ except Exception as e:
def display_haproxy_stats(): def display_haproxy_stats():
haproxy_stats = fetch_haproxy_stats() haproxy_stats = fetch_haproxy_stats()
parsed_stats = parse_haproxy_stats(haproxy_stats) parsed_stats = parse_haproxy_stats(haproxy_stats)
return render_template_string(''' return render_template('statistics.html', stats=parsed_stats)
<style>
/* Custom CSS for the header */
header {
background-color: #f2f2f2;
padding: 20px;
display: flex;
padding-left: 100px;
align-items: center;
}
.logo {
width: 300px; /* Adjust the width as needed */
height: auto;
}
.menu-link {
text-decoration: none;
padding: 10px 20px;
color: #333;
font-weight: bold;
}
.menu-link:hover {
background-color: #3B444B;
color: white;
text-decoration: none;
}
</style>
<header>
<a href="/home" style="text-decoration: none;">
<h3 style="color: grey; font-size: 22px;" class="logo">
<i style="margin: 8px;" class="fas fa-globe"></i>Haproxy Configurator
</h3>
</a>
<a href="/home" class="menu-link">Home</a>
<a href="/" class="menu-link">Add Frontend&Backend</a>
<a href="/edit" class="menu-link">Edit HAProxy Config</a>
<a href="/logs" class="menu-link">Security Events</a>
<a href="/statistics" class="menu-link">Statistics</a>
<a href="http://{{ request.host.split(':')[0] }}:8080/stats" class="menu-link">HAProxy Stats</a>
</header>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<h1 class="my-4">HAProxy Stats</h1>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Frontend Name</th>
<th>Server Name</th>
<th>4xx Errors</th>
<th>5xx Errors</th>
<th>Bytes In (MB)</th>
<th>Bytes Out (MB)</th>
<th>Total Connections</th>
</tr>
</thead>
<tbody>
{% for stat in stats %}
<tr>
<td>{{ stat.frontend_name }}</td>
<td>{{ stat.server_name }}</td>
<td>{{ stat['4xx_errors'] }}</td>
<td>{{ stat['5xx_errors'] }}</td>
<td>{{ stat.bytes_in_mb }}</td>
<td>{{ stat.bytes_out_mb }}</td>
<td>{{ stat.conn_tot }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
''', stats=parsed_stats)
# Logs Route # Logs Route
@app.route('/logs') @app.route('/logs')

13
templates/edit.html
View File

@@ -1,10 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Edit HAProxy Config</title> <meta charset="UTF-8">
<!-- Add Bootstrap CSS link here --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <title>HAProxy Edit/add</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style> <style>
/* Custom CSS for the header */ /* Custom CSS for the header */
header { header {
@@ -145,7 +146,7 @@ border: none;
<label class="custom-control-label" for="darkModeSwitch">Dark Mode</label> <label class="custom-control-label" for="darkModeSwitch">Dark Mode</label>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
// Function to toggle dark mode // Function to toggle dark mode
function toggleDarkMode() { function toggleDarkMode() {

14
templates/home.html
View File

@@ -1,10 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Home Page</title> <meta charset="UTF-8">
<!-- Add Bootstrap CSS link here --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <title>HAProxy Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style> <style>
/* Custom CSS for the header */ /* Custom CSS for the header */
@@ -122,8 +123,7 @@
<!-- Add Bootstrap JS and jQuery links here (if needed) --> <!-- Add Bootstrap JS and jQuery links here (if needed) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script> <script>

11
templates/index.html
View File

@@ -1,10 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HAProxy Configurator</title> <title>HAProxy Configurator</title>
<!-- Add Bootstrap CSS link --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style> <style>
/* Custom CSS for the header */ /* Custom CSS for the header */
header { header {
@@ -153,7 +154,7 @@
<input type="checkbox" class="custom-control-input" id="darkModeSwitch"> <input type="checkbox" class="custom-control-input" id="darkModeSwitch">
<label class="custom-control-label" for="darkModeSwitch">Dark Mode</label> <label class="custom-control-label" for="darkModeSwitch">Dark Mode</label>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
// Function to toggle dark mode // Function to toggle dark mode
function toggleDarkMode() { function toggleDarkMode() {

12
templates/logs.html
View File

@@ -1,9 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Log Entries</title> <meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <title>HAProxy Logs</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style> <style>
body { body {
@@ -121,7 +123,7 @@
<a href="/" class="menu-link">Add Frontend&Backend</a> <a href="/" class="menu-link">Add Frontend&Backend</a>
<a href="/logs" class="menu-link">Security Events</a> <a href="/logs" class="menu-link">Security Events</a>
<a href="/statistics" class="menu-link">Statictics</a> <a href="/statistics" class="menu-link">Statictics</a>
<a href="http://{{ request.host.split(':')[0] }}:8404/stats" class="menu-link" >HAProxy Stats</a> <a href="http://{{ request.host.split(':')[0] }}:8484/stats" class="menu-link" >HAProxy Stats</a>
<div class="custom-control custom-switch ml-auto"> <div class="custom-control custom-switch ml-auto">
<input type="checkbox" class="custom-control-input" id="darkModeSwitch"> <input type="checkbox" class="custom-control-input" id="darkModeSwitch">
<label class="custom-control-label" for="darkModeSwitch">Dark Mode</label> <label class="custom-control-label" for="darkModeSwitch">Dark Mode</label>

265
templates/statistics.html Normal file
View File

@@ -0,0 +1,265 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HAProxy Statistics</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* Header Styling */
header {
background-color: #f2f2f2;
padding: 20px;
display: flex;
padding-left: 100px;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.logo {
width: 300px;
height: auto;
}
.menu-link {
text-decoration: none;
padding: 10px 20px;
color: #333;
font-weight: bold;
transition: all 0.3s ease;
}
.menu-link:hover {
background-color: #3B444B;
color: white;
text-decoration: none;
border-radius: 4px;
}
.menu-link.active {
background-color: #007bff;
color: white;
border-radius: 4px;
}
/* Main Content */
body {
background-color: #f8f9fa;
}
.container {
background-color: white;
border-radius: 8px;
padding: 30px;
margin-top: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1 {
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 15px;
margin-bottom: 30px;
}
/* Table Styling */
.table-responsive {
border-radius: 6px;
overflow: hidden;
}
.table {
margin-bottom: 0;
}
.table thead {
background-color: #007bff;
color: white;
}
.table tbody tr:hover {
background-color: #f5f5f5;
transition: background-color 0.3s ease;
}
.table th, .table td {
vertical-align: middle;
padding: 12px;
}
/* Badge Styling */
.badge {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
font-weight: 500;
}
/* Cards for Summary */
.summary-card {
border: none;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.summary-card:hover {
transform: translateY(-5px);
}
.summary-card .card-body {
padding: 20px;
}
.summary-card h5 {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 10px;
}
.summary-card h2 {
font-size: 2rem;
font-weight: bold;
margin: 0;
}
.text-right {
text-align: right;
}
.no-data {
text-align: center;
padding: 40px;
color: #666;
}
footer {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
margin-top: 40px;
border-top: 1px solid #ddd;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<a href="/home" style="text-decoration: none;">
<h3 style="color: grey; font-size: 22px;" class="logo">
<i style="margin: 8px;" class="fas fa-globe"></i>Haproxy Configurator
</h3>
</a>
<a href="/home" class="menu-link">Home</a>
<a href="/" class="menu-link">Add Frontend&Backend</a>
<a href="/edit" class="menu-link">Edit HAProxy Config</a>
<a href="/logs" class="menu-link">Security Events</a>
<a href="/statistics" class="menu-link active">Statistics</a>
<a href="http://{{ request.host.split(':')[0] }}:8080/stats" class="menu-link" target="_blank">HAProxy Stats</a>
</header>
<!-- Main Content -->
<div class="container">
<h1>
<i class="fas fa-chart-line"></i> HAProxy Statistics
</h1>
{% if stats %}
<!-- Summary Cards -->
<div class="row mb-4">
<div class="col-md-3">
<div class="card text-white bg-info summary-card">
<div class="card-body">
<h5 class="card-title">Total Frontends</h5>
<h2>{{ stats|length }}</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-success summary-card">
<div class="card-body">
<h5 class="card-title">Total Connections</h5>
<h2>{{ stats|map(attribute='conn_tot')|sum }}</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-warning summary-card">
<div class="card-body">
<h5 class="card-title">4xx Errors</h5>
<h2>{{ stats|map(attribute='4xx_errors')|sum }}</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-danger summary-card">
<div class="card-body">
<h5 class="card-title">5xx Errors</h5>
<h2>{{ stats|map(attribute='5xx_errors')|sum }}</h2>
</div>
</div>
</div>
</div>
<!-- Statistics Table -->
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th><i class="fas fa-code"></i> Frontend Name</th>
<th><i class="fas fa-server"></i> Server Name</th>
<th class="text-center">4xx Errors</th>
<th class="text-center">5xx Errors</th>
<th class="text-right">Bytes In (MB)</th>
<th class="text-right">Bytes Out (MB)</th>
<th class="text-center">Total Connections</th>
</tr>
</thead>
<tbody>
{% for stat in stats %}
<tr>
<td>
<span class="badge bg-info">{{ stat.frontend_name }}</span>
</td>
<td>
<span class="badge bg-secondary">{{ stat.server_name }}</span>
</td>
<td class="text-center">
{% if stat['4xx_errors'] > 0 %}
<span class="badge bg-warning">{{ stat['4xx_errors'] }}</span>
{% else %}
<span class="badge bg-success">{{ stat['4xx_errors'] }}</span>
{% endif %}
</td>
<td class="text-center">
{% if stat['5xx_errors'] > 0 %}
<span class="badge bg-danger">{{ stat['5xx_errors'] }}</span>
{% else %}
<span class="badge bg-success">{{ stat['5xx_errors'] }}</span>
{% endif %}
</td>
<td class="text-right">{{ "%.2f"|format(stat.bytes_in_mb) }}</td>
<td class="text-right">{{ "%.2f"|format(stat.bytes_out_mb) }}</td>
<td class="text-center">
<strong>{{ stat.conn_tot }}</strong>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="alert alert-info no-data">
<i class="fas fa-info-circle"></i> No statistics available
</div>
{% endif %}
</div>
<!-- Footer -->
<footer>
<p>&copy; 2025 HAProxy Configurator. All rights reserved.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3
utils/stats_utils.py
View File

@@ -13,10 +13,9 @@ def fetch_haproxy_stats():
def parse_haproxy_stats(stats_data): def parse_haproxy_stats(stats_data):
data = [] data = []
# Remove the '#' character from the header row
header_row = stats_data.splitlines()[0].replace('# ', '') header_row = stats_data.splitlines()[0].replace('# ', '')
reader = csv.DictReader(stats_data.splitlines(), fieldnames=header_row.split(',')) reader = csv.DictReader(stats_data.splitlines(), fieldnames=header_row.split(','))
next(reader) # Skip the header row next(reader)
for row in reader: for row in reader:
if row['svname'] != 'BACKEND': if row['svname'] != 'BACKEND':
data.append({ data.append({