454 lines
19 KiB
HTML
454 lines
19 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Dashboard - SSL Monitor{% endblock %}
|
|
{% block content %}
|
|
<h2 class="mb-4 text-center">Dashboard</h2>
|
|
|
|
<!-- Przyciski akcji na górze -->
|
|
<div class="mb-4 text-center">
|
|
<button class="btn btn-success me-2" onclick="showAddServiceModal()">Dodaj Serwis</button>
|
|
<button class="btn btn-primary me-2" onclick="bulkUpdate()">Bulk Update</button>
|
|
</div>
|
|
|
|
<!-- Opcje grupowania -->
|
|
<div class="mb-4 d-flex justify-content-center">
|
|
<div style="max-width:300px;">
|
|
<label for="groupingCriteria" class="form-label">Grupuj usługi:</label>
|
|
<select id="groupingCriteria" class="form-select">
|
|
<option value="none" {% if default_grouping == 'none' %}selected{% endif %}>Brak grupowania</option>
|
|
<option value="protocol" {% if default_grouping == 'protocol' %}selected{% endif %}>Grupuj według protokołu</option>
|
|
<option value="host" {% if default_grouping == 'host' %}selected{% endif %}>Grupuj według hosta</option>
|
|
<option value="region" {% if default_grouping == 'region' %}selected{% endif %}>Grupuj według regionu</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cardsContainer" class="row">
|
|
{% for s in services %}
|
|
{% set card_class = "" %}
|
|
{% if s.status == "Expired" %}
|
|
{% set card_class = "bg-danger text-white" %}
|
|
{% elif s.status == "ExpiringSoon" %}
|
|
{% set card_class = "bg-warning text-dark" %}
|
|
{% elif s.status == "OK" %}
|
|
{% set card_class = "bg-success text-white" %}
|
|
{% elif s.status == "Error" %}
|
|
{% set card_class = "bg-secondary text-white" %}
|
|
{% else %}
|
|
{% set card_class = "bg-light" %}
|
|
{% endif %}
|
|
<div class="col-md-4 mb-4 service-card" data-protocol="{{ s.protocol|lower|trim }}" data-host="{{ s.host }}" data-region="{{ s.region }}">
|
|
|
|
<div class="card {{ card_class }} shadow-sm rounded">
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{ s.host }}:{{ s.port }} ({{ s.protocol }})</h5>
|
|
<p class="card-text">
|
|
Status: <strong>{{ s.status }}</strong><br>
|
|
Last Check: {{ s.last_check if s.last_check else '---' }}<br>
|
|
Expiry: {{ s.expiry_date if s.expiry_date else '---' }}
|
|
</p>
|
|
<div class="d-flex justify-content-center gap-2 flex-wrap">
|
|
<button class="btn btn-sm btn-light" onclick="showEditServiceModal({{ s.id }})">Edytuj</button>
|
|
<button class="btn btn-sm btn-info" onclick="updateService({{ s.id }})">Aktualizuj</button>
|
|
<button class="btn btn-sm btn-danger" onclick="deleteService({{ s.id }})">Usuń</button>
|
|
{% if s.protocol|lower == 'https' %}
|
|
<button class="btn btn-sm btn-secondary" onclick="showCertDetails({{ s.id }})">Szczegóły certyfikatu</button>
|
|
<button class="btn btn-sm btn-secondary" onclick="showCertChain({{ s.id }})">Łańcuch certyfikatów</button>
|
|
{% else %}
|
|
<button class="btn btn-sm btn-secondary" onclick="showResponse({{ s.id }})">Odpowiedź serwera</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Modale -->
|
|
<!-- Modal dodawania serwisu -->
|
|
<div class="modal" tabindex="-1" id="addServiceModal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Dodaj nowy serwis</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="hideAddServiceModal()"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="addServiceForm">
|
|
<div class="mb-3">
|
|
<label for="host" class="form-label">Host</label>
|
|
<input type="text" class="form-control" id="host" name="host" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="protocol" class="form-label">Protocol</label>
|
|
<select class="form-select" id="protocol" name="protocol">
|
|
<option value="https">HTTPS (443)</option>
|
|
<option value="smtp_starttls">SMTP STARTTLS (587)</option>
|
|
<option value="smtp_ssl">SMTP SSL (465)</option>
|
|
<option value="imap_starttls">IMAP STARTTLS (143)</option>
|
|
<option value="imap_ssl">IMAP SSL (993)</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="port" class="form-label">Port</label>
|
|
<input type="number" class="form-control" id="port" name="port" value="443">
|
|
</div>
|
|
<!-- Nowe pole dla regionu -->
|
|
<div class="mb-3">
|
|
<label for="region" class="form-label">Region</label>
|
|
<input type="text" class="form-control" id="region" name="region">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="hideAddServiceModal()">Anuluj</button>
|
|
<button class="btn btn-primary" onclick="addService()">Dodaj</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal edycji serwisu -->
|
|
<!-- Modal edycji serwisu -->
|
|
<div class="modal" tabindex="-1" id="editServiceModal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edytuj serwis</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="hideEditServiceModal()"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="editServiceForm">
|
|
<input type="hidden" id="editServiceId">
|
|
<div class="mb-3">
|
|
<label for="editHost" class="form-label">Host</label>
|
|
<input type="text" class="form-control" id="editHost" name="host" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="editProtocol" class="form-label">Protocol</label>
|
|
<select class="form-select" id="editProtocol" name="protocol">
|
|
<option value="https">HTTPS (443)</option>
|
|
<option value="smtp_starttls">SMTP STARTTLS (587)</option>
|
|
<option value="smtp_ssl">SMTP SSL (465)</option>
|
|
<option value="imap_starttls">IMAP STARTTLS (143)</option>
|
|
<option value="imap_ssl">IMAP SSL (993)</option>
|
|
</select>
|
|
</div>
|
|
<!-- Nowe pole dla regionu -->
|
|
<div class="mb-3">
|
|
<label for="editRegion" class="form-label">Region</label>
|
|
<input type="text" class="form-control" id="editRegion" name="region">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="editPort" class="form-label">Port</label>
|
|
<input type="number" class="form-control" id="editPort" name="port" value="443">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="hideEditServiceModal()">Anuluj</button>
|
|
<button class="btn btn-primary" onclick="editService()">Zapisz zmiany</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal wyświetlania certyfikatu / łańcucha certyfikatów (dla HTTPS) -->
|
|
<div class="modal" tabindex="-1" id="certDetailsModal">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Szczegóły certyfikatu / Łańcuch certyfikatów</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="hideCertDetailsModal()"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="certDetails"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="hideCertDetailsModal()">Zamknij</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal wyświetlania odpowiedzi serwera (dla nie-HTTPS) -->
|
|
<div class="modal" tabindex="-1" id="responseModal">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Odpowiedź serwera</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="hideResponseModal()"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<pre id="serverResponse" style="white-space: pre-wrap;"></pre>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="hideResponseModal()">Zamknij</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
{% block extra_js %}
|
|
{{ super() }}
|
|
<script>
|
|
let addServiceModal = null;
|
|
let editServiceModal = null;
|
|
let certDetailsModal = null;
|
|
let responseModal = null;
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
addServiceModal = new bootstrap.Modal(document.getElementById('addServiceModal'), {});
|
|
editServiceModal = new bootstrap.Modal(document.getElementById('editServiceModal'), {});
|
|
certDetailsModal = new bootstrap.Modal(document.getElementById('certDetailsModal'), {});
|
|
responseModal = new bootstrap.Modal(document.getElementById('responseModal'), {});
|
|
|
|
// Aktualizacja domyślnej wartości portu w formularzu dodawania
|
|
document.getElementById('protocol').addEventListener('change', function() {
|
|
let portField = document.getElementById('port');
|
|
switch(this.value) {
|
|
case 'https': portField.value = 443; break;
|
|
case 'smtp_starttls': portField.value = 587; break;
|
|
case 'smtp_ssl': portField.value = 465; break;
|
|
case 'imap_starttls': portField.value = 143; break;
|
|
case 'imap_ssl': portField.value = 993; break;
|
|
default: portField.value = 443;
|
|
}
|
|
});
|
|
|
|
// Aktualizacja domyślnej wartości portu w formularzu edycji
|
|
document.getElementById('editProtocol').addEventListener('change', function() {
|
|
let portField = document.getElementById('editPort');
|
|
switch(this.value) {
|
|
case 'https': portField.value = 443; break;
|
|
case 'smtp_starttls': portField.value = 587; break;
|
|
case 'smtp_ssl': portField.value = 465; break;
|
|
case 'imap_starttls': portField.value = 143; break;
|
|
case 'imap_ssl': portField.value = 993; break;
|
|
default: portField.value = 443;
|
|
}
|
|
});
|
|
|
|
// Grupowanie kart przy zmianie kryterium
|
|
document.getElementById('groupingCriteria').addEventListener('change', function() {
|
|
groupCards(this.value);
|
|
});
|
|
groupCards(document.getElementById('groupingCriteria').value);
|
|
});
|
|
|
|
function showAlert(message, type) {
|
|
const alertContainer = document.getElementById('alert-container');
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
|
alertDiv.setAttribute('role', 'alert');
|
|
alertDiv.innerHTML = message +
|
|
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Zamknij"></button>';
|
|
alertContainer.appendChild(alertDiv);
|
|
setTimeout(function(){
|
|
alertDiv.classList.remove('show');
|
|
alertDiv.remove();
|
|
}, 3000);
|
|
}
|
|
|
|
function groupCards(criteria) {
|
|
const container = document.getElementById('cardsContainer');
|
|
const cards = Array.from(container.getElementsByClassName('service-card'));
|
|
container.innerHTML = "";
|
|
|
|
if (criteria === "none") {
|
|
cards.forEach(card => container.appendChild(card));
|
|
} else {
|
|
const groups = {};
|
|
cards.forEach(card => {
|
|
const key = card.getAttribute("data-" + criteria);
|
|
if (!groups[key]) {
|
|
groups[key] = [];
|
|
}
|
|
groups[key].push(card);
|
|
});
|
|
for (let group in groups) {
|
|
const header = document.createElement("h4");
|
|
header.className = "mt-4";
|
|
header.innerText = criteria === "protocol" ? group.toUpperCase() : group;
|
|
container.appendChild(header);
|
|
const rowDiv = document.createElement("div");
|
|
rowDiv.className = "row";
|
|
groups[group].forEach(card => rowDiv.appendChild(card));
|
|
container.appendChild(rowDiv);
|
|
}
|
|
}
|
|
}
|
|
|
|
function showAddServiceModal() { addServiceModal.show(); }
|
|
function hideAddServiceModal() { addServiceModal.hide(); }
|
|
|
|
function showEditServiceModal(serviceId) {
|
|
fetch("{{ url_for('api_get_services') }}")
|
|
.then(r => r.json())
|
|
.then(services => {
|
|
const svc = services.find(s => s.id === serviceId);
|
|
if (svc) {
|
|
document.getElementById("editServiceId").value = svc.id;
|
|
document.getElementById("editHost").value = svc.host;
|
|
document.getElementById("editPort").value = svc.port;
|
|
document.getElementById("editProtocol").value = svc.protocol;
|
|
document.getElementById("editRegion").value = svc.region ? svc.region : "default";
|
|
editServiceModal.show();
|
|
}
|
|
})
|
|
.catch(err => console.error(err));
|
|
}
|
|
|
|
function showCertDetails(serviceId) {
|
|
fetch(`{{ url_for('api_cert_details', service_id=0) }}`.replace("0", serviceId))
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
let htmlContent = "";
|
|
if (data.error) {
|
|
htmlContent = `<p class="text-danger">Błąd: ${data.error}</p>`;
|
|
} else {
|
|
htmlContent = data.html;
|
|
}
|
|
document.getElementById("certDetails").innerHTML = htmlContent;
|
|
certDetailsModal.show();
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
document.getElementById("certDetails").innerHTML = `<p class="text-danger">Błąd przy pobieraniu szczegółów certyfikatu.</p>`;
|
|
certDetailsModal.show();
|
|
});
|
|
}
|
|
|
|
function showCertChain(serviceId) {
|
|
fetch(`{{ url_for('api_cert_chain', service_id=0) }}`.replace("0", serviceId))
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
let htmlContent = "";
|
|
if (data.error) {
|
|
htmlContent = `<p class="text-danger">Błąd: ${data.error}</p>`;
|
|
} else {
|
|
htmlContent = data.html;
|
|
}
|
|
document.getElementById("certDetails").innerHTML = htmlContent;
|
|
certDetailsModal.show();
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
document.getElementById("certDetails").innerHTML = `<p class="text-danger">Błąd przy pobieraniu łańcucha certyfikatów.</p>`;
|
|
certDetailsModal.show();
|
|
});
|
|
}
|
|
|
|
function showResponse(serviceId) {
|
|
fetch(`{{ url_for('api_service_response', service_id=0) }}`.replace("0", serviceId))
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
let responseText = "";
|
|
if (data.error) {
|
|
responseText = "Błąd: " + data.error;
|
|
} else {
|
|
responseText = data.response;
|
|
}
|
|
document.getElementById("serverResponse").innerText = responseText;
|
|
responseModal.show();
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
document.getElementById("serverResponse").innerText = "Błąd przy pobieraniu odpowiedzi serwera.";
|
|
responseModal.show();
|
|
});
|
|
}
|
|
|
|
function hideCertDetailsModal() { certDetailsModal.hide(); }
|
|
function hideResponseModal() { responseModal.hide(); }
|
|
|
|
function addService() {
|
|
const host = document.getElementById("host").value;
|
|
const port = document.getElementById("port").value;
|
|
const protocol = document.getElementById("protocol").value;
|
|
const region = document.getElementById("region").value; // Pobranie wartości regionu
|
|
|
|
fetch("{{ url_for('api_add_service') }}", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify({host, port, protocol, region})
|
|
})
|
|
.then(r => r.json())
|
|
.then(resp => {
|
|
showAlert("Serwis został dodany.", "success");
|
|
setTimeout(() => window.location.reload(), 1500);
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showAlert("Błąd przy dodawaniu serwisu.", "danger");
|
|
});
|
|
}
|
|
|
|
|
|
function deleteService(serviceId) {
|
|
if (!confirm("Czy na pewno chcesz usunąć ten serwis?")) return;
|
|
const url = "{{ url_for('api_delete_service', service_id=0) }}".replace("0", serviceId);
|
|
|
|
fetch(url, { method: "DELETE" })
|
|
.then(r => r.json())
|
|
.then(resp => {
|
|
showAlert("Serwis został usunięty.", "success");
|
|
setTimeout(() => window.location.reload(), 1500);
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showAlert("Błąd przy usuwaniu serwisu.", "danger");
|
|
});
|
|
}
|
|
|
|
function editService() {
|
|
const serviceId = document.getElementById("editServiceId").value;
|
|
const host = document.getElementById("editHost").value;
|
|
const port = document.getElementById("editPort").value;
|
|
const protocol = document.getElementById("editProtocol").value;
|
|
const region = document.getElementById("editRegion").value; // Pobranie wartości regionu
|
|
|
|
fetch(`{{ url_for('api_edit_service', service_id=0) }}`.replace("0", serviceId), {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify({host, port, protocol, region})
|
|
})
|
|
.then(r => r.json())
|
|
.then(resp => {
|
|
showAlert("Serwis został zaktualizowany.", "success");
|
|
setTimeout(() => window.location.reload(), 1500);
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showAlert("Błąd przy aktualizacji serwisu.", "danger");
|
|
});
|
|
}
|
|
|
|
|
|
function updateService(serviceId) {
|
|
fetch(`{{ url_for('api_update_service', service_id=0) }}`.replace("0", serviceId), { method: "POST" })
|
|
.then(r => r.json())
|
|
.then(resp => {
|
|
showAlert("Serwis został zaktualizowany.", "success");
|
|
setTimeout(() => window.location.reload(), 1500);
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showAlert("Błąd przy aktualizacji serwisu.", "danger");
|
|
});
|
|
}
|
|
|
|
function bulkUpdate() {
|
|
fetch("{{ url_for('api_bulk_update') }}", { method: "POST" })
|
|
.then(r => r.json())
|
|
.then(resp => {
|
|
showAlert("Masowa aktualizacja wykonana.", "success");
|
|
setTimeout(() => window.location.reload(), 1500);
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
showAlert("Błąd przy masowej aktualizacji.", "danger");
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|