298 lines
8.3 KiB
HTML
298 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>/etc/hosts file manager</title>
|
|
<!-- Dodajemy FontAwesome dla ikon -->
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
|
<style>
|
|
body { font-family: Arial, sans-serif; background: #f1f1f1; margin: 0; padding: 0; }
|
|
.container { max-width: 800px; margin: 40px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px #ccc; }
|
|
h1 { text-align: center; margin-bottom: 1em; }
|
|
.links { text-align: center; margin-top: 10px; }
|
|
.links a { color: #007bff; text-decoration: none; margin: 0 10px; font-size: 1.1em; }
|
|
.links a:hover { text-decoration: underline; }
|
|
.links i { margin-right: 5px; }
|
|
|
|
/* Style dla bloku Statistics */
|
|
.stats {
|
|
margin: 20px 0;
|
|
background: #e9ecef;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
.stats h2 {
|
|
margin-top: 0;
|
|
}
|
|
.stats ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
.stats li {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Style dla bloku Recent Deploy Logs */
|
|
.logs {
|
|
margin-top: 20px;
|
|
background: #fafafa;
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
}
|
|
.log-entry {
|
|
border-bottom: 1px solid #ccc;
|
|
padding: 5px 0;
|
|
}
|
|
.log-entry:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.user-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.log-entry {
|
|
background: #f9f9f9;
|
|
margin: 8px 0;
|
|
padding: 8px 12px;
|
|
border-left: 4px solid #007bff;
|
|
border-radius: 4px;
|
|
}
|
|
.log-timestamp {
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
color: #555;
|
|
}
|
|
.log-details {
|
|
display: inline;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.stats-graphic {
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
.bar-container {
|
|
display: flex;
|
|
height: 30px;
|
|
background: #ddd;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin: 10px auto;
|
|
max-width: 100%;
|
|
}
|
|
.bar-success {
|
|
background: #28a745;
|
|
color: #fff;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.bar-failed {
|
|
background: #dc3545;
|
|
color: #fff;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.flash-messages {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.flash-messages p {
|
|
margin: 0 0 5px 0;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Dla kategorii success */
|
|
.flash-messages p.success {
|
|
background-color: #d4edda; /* Jasnozielone tło */
|
|
color: #155724; /* Zielony tekst */
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
/* Dla kategorii danger */
|
|
.flash-messages p.danger {
|
|
background-color: #f8d7da; /* Jasnoczerwone tło */
|
|
color: #721c24; /* Czerwony tekst */
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
/* Dla kategorii info */
|
|
.flash-messages p.info {
|
|
background-color: #d1ecf1; /* Jasnoniebieskie tło */
|
|
color: #0c5460; /* Niebieski tekst */
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
|
|
|
|
.links-nav ul {
|
|
/* Usuwamy domyślne wcięcia i kuleczki */
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
/* Rozmieszczenie linków w elastyczny sposób */
|
|
display: flex;
|
|
flex-wrap: wrap; /* Pozwoli zawijać się wierszom przy małym ekranie */
|
|
justify-content: center;
|
|
gap: 10px; /* Odstęp między przyciskami */
|
|
}
|
|
|
|
.links-nav li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.links-nav li a {
|
|
display: inline-block;
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
padding: 8px 12px;
|
|
background: #f8f8f8;
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.links-nav li a:hover {
|
|
background: #e2e6ea;
|
|
text-decoration: none;
|
|
}
|
|
.deploy-container {
|
|
margin: 20px auto; /* odstęp u góry i dołu */
|
|
text-align: center; /* środek strony */
|
|
}
|
|
|
|
.deploy-now-btn {
|
|
display: inline-block;
|
|
width: 60%; /* szeroki przycisk - możesz dostosować */
|
|
max-width: 400px; /* by się za bardzo nie rozciągał na dużym ekranie */
|
|
padding: 15px;
|
|
font-size: 1.2em;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
background: #007bff;
|
|
border-radius: 6px;
|
|
border: 1px solid #007bff;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.deploy-now-btn:hover {
|
|
background: #0056b3;
|
|
}
|
|
|
|
.links-nav ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.links-nav li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.links-nav li a {
|
|
display: inline-block;
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
padding: 8px 12px;
|
|
background: #f8f8f8;
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.links-nav li a:hover {
|
|
background: #e2e6ea;
|
|
text-decoration: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>/etc/hosts file manager</h1>
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="flash-messages">
|
|
{% for category, message in messages %}
|
|
<p class="{{ category }}">{{ message }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="user-info">
|
|
<p><h2>Welcome, <b>{{ user.username }}</b>!</h2></p>
|
|
</div>
|
|
<div class="deploy-container">
|
|
<a href="{{ url_for('deploy_now') }}" class="deploy-now-btn">
|
|
<i class="fas fa-rocket"></i> Deploy Now
|
|
</a>
|
|
</div>
|
|
|
|
<div class="links-nav">
|
|
<ul>
|
|
<li><a href="{{ url_for('manage_hosts') }}"><i class="fas fa-server"></i> Manage remote servers</a></li>
|
|
<li><a href="{{ url_for('clear_all_hosts') }}"><i class="fas fa-trash-alt"></i> Clear /etc/hosts on remote</a></li>
|
|
<!-- <li><a href="{{ url_for('list_hosts_files') }}"><i class="fas fa-list"></i> List /etc/hosts files</a></li> -->
|
|
<li><a href="{{ url_for('edit_local_hosts') }}"><i class="fas fa-edit"></i> Edit /etc/hosts</a></li>
|
|
<li><a href="{{ url_for('list_regex_hosts') }}"><i class="fas fa-network-wired"></i> Manage Regex/CIDR</a></li>
|
|
<li><a href="{{ url_for('new_regex_host') }}"><i class="fas fa-plus-circle"></i> Add new CIDR entry</a></li>
|
|
<li><a href="{{ url_for('backups') }}"><i class="fas fa-archive"></i> Backups</a></li>
|
|
<li><a href="{{ url_for('settings') }}"><i class="fas fa-cog"></i> Settings</a></li>
|
|
<li><a href="{{ url_for('change_password') }}"><i class="fas fa-key"></i> Change Password</a></li>
|
|
<li><a href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<h2>Statistics</h2>
|
|
<ul>
|
|
<li>Number of managed server: <b>{{ stats.host_count }}</b></li>
|
|
<li>Total deployments: <b>{{ stats.total_deployments }}</b></li>
|
|
<li>Successful deployments: <b>{{ stats.successful_deployments }}</b></li>
|
|
<li>Failed deployments: <b>{{ stats.failed_deployments }}</b></li>
|
|
</ul>
|
|
</div>
|
|
<div class="stats-graphic">
|
|
<h2>Deployment Success Rate</h2>
|
|
<div class="bar-container">
|
|
<div class="bar-success" style="width: {{ (stats.successful_deployments / stats.total_deployments * 100) if stats.total_deployments else 0 }}%;">
|
|
{{ stats.successful_deployments }} Successful
|
|
</div>
|
|
<div class="bar-failed" style="width: {{ (stats.failed_deployments / stats.total_deployments * 100) if stats.total_deployments else 0 }}%;">
|
|
{{ stats.failed_deployments }} Failed
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="logs">
|
|
<h2>Recent Deploy Logs</h2>
|
|
{% if logs %}
|
|
{% for log in logs %}
|
|
<div class="log-entry">
|
|
<span class="log-timestamp">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
|
<p class="log-details">{{ log.details }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p>No deployment logs available yet.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|