wip
This commit is contained in:
pika
parent
66fe31eabe
commit
67dae6f5e4
7 changed files with 490 additions and 23 deletions
23
app/templates/components/breadcrumbs.html
Normal file
23
app/templates/components/breadcrumbs.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<div class="page-header d-print-none">
|
||||
<div class="container-xl">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard_home') }}">Dashboard</a></li>
|
||||
{% for crumb in breadcrumbs %}
|
||||
{% if loop.last %}
|
||||
<li class="breadcrumb-item active" aria-current="page">{{ crumb.title }}</li>
|
||||
{% else %}
|
||||
<li class="breadcrumb-item"><a href="{{ crumb.url }}">{{ crumb.title }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</nav>
|
||||
<h2 class="page-title">
|
||||
{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,9 +72,10 @@
|
|||
{% if edit_mode and app.ports %}
|
||||
{% for port in app.ports %}
|
||||
<tr>
|
||||
<td>
|
||||
<td class="position-relative">
|
||||
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
|
||||
value="{{ port.port_number }}">
|
||||
<div class="feedback"></div>
|
||||
</td>
|
||||
<td>
|
||||
<select name="protocols[]" class="form-select">
|
||||
|
|
@ -95,9 +96,10 @@
|
|||
{% endfor %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td>
|
||||
<td class="position-relative">
|
||||
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
|
||||
placeholder="Port number">
|
||||
<div class="feedback"></div>
|
||||
</td>
|
||||
<td>
|
||||
<select name="protocols[]" class="form-select">
|
||||
|
|
@ -171,13 +173,6 @@
|
|||
|
||||
function addPortRow(portNumber = '', protocol = 'TCP', description = '') {
|
||||
const tbody = document.querySelector('#ports-table tbody');
|
||||
|
||||
// Remove the empty row indicator if present
|
||||
const emptyRows = tbody.querySelectorAll('tr.table-secondary.opacity-50');
|
||||
if (emptyRows.length > 0) {
|
||||
emptyRows.forEach(row => row.remove());
|
||||
}
|
||||
|
||||
const newRow = document.createElement('tr');
|
||||
newRow.innerHTML = `
|
||||
<td class="position-relative">
|
||||
|
|
@ -340,15 +335,14 @@
|
|||
|
||||
// Validate port
|
||||
function validatePort(portField, protocolField, debounceTime = 300) {
|
||||
// Create feedback element if it doesn't exist
|
||||
if (!portField.nextElementSibling || !portField.nextElementSibling.classList.contains('feedback')) {
|
||||
const feedback = document.createElement('div');
|
||||
feedback.className = 'feedback';
|
||||
portField.parentNode.insertBefore(feedback, portField.nextSibling);
|
||||
// Find or create the feedback container
|
||||
let feedbackElement = portField.closest('td').querySelector('.feedback');
|
||||
if (!feedbackElement) {
|
||||
feedbackElement = document.createElement('div');
|
||||
feedbackElement.className = 'feedback';
|
||||
portField.parentNode.appendChild(feedbackElement);
|
||||
}
|
||||
|
||||
const feedbackElement = portField.nextElementSibling;
|
||||
|
||||
const port = portField.value.trim();
|
||||
const protocol = protocolField.value;
|
||||
const serverId = serverSelect.value;
|
||||
|
|
@ -357,6 +351,7 @@
|
|||
if (!port || !serverId) {
|
||||
clearFeedback(feedbackElement);
|
||||
portField.classList.remove('is-invalid');
|
||||
portField.classList.remove('is-valid');
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -373,6 +368,7 @@
|
|||
|
||||
if (duplicateFound) {
|
||||
portField.classList.add('is-invalid');
|
||||
portField.classList.remove('is-valid');
|
||||
clearFeedback(feedbackElement);
|
||||
showError(feedbackElement, `Duplicate port ${port}/${protocol} in your form`);
|
||||
return;
|
||||
|
|
@ -392,6 +388,7 @@
|
|||
clearFeedback(feedbackElement);
|
||||
if (!data.valid) {
|
||||
portField.classList.add('is-invalid');
|
||||
portField.classList.remove('is-valid');
|
||||
showError(feedbackElement, data.message);
|
||||
if (data.edit_url) {
|
||||
feedbackElement.innerHTML += ` <a href="${data.edit_url}" class="alert-link">Edit conflicting app</a>`;
|
||||
|
|
@ -438,4 +435,4 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
239
app/templates/dashboard/overview.html
Normal file
239
app/templates/dashboard/overview.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-xl">
|
||||
<div class="page-header d-print-none">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
Infrastructure Overview
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto ms-auto d-print-none">
|
||||
<div class="btn-list">
|
||||
<a href="{{ url_for('ipam.subnet_new') }}" class="btn btn-primary d-none d-sm-inline-block">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
New Subnet
|
||||
</a>
|
||||
<a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary d-none d-sm-inline-block">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
New Server
|
||||
</a>
|
||||
<a href="{{ url_for('dashboard.app_new') }}" class="btn btn-primary d-none d-sm-inline-block">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
New Application
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hierarchical View -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Network Infrastructure</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Subnets -->
|
||||
{% if hierarchy.subnets %}
|
||||
{% for subnet in hierarchy.subnets %}
|
||||
<div class="subnet-container mb-4">
|
||||
<div class="subnet-header d-flex align-items-center p-2 bg-azure-lt rounded">
|
||||
<span class="ti ti-network me-2"></span>
|
||||
<h4 class="m-0">
|
||||
<a href="{{ url_for('ipam.subnet_view', subnet_id=subnet.id) }}" class="text-reset">
|
||||
{{ subnet.cidr }}
|
||||
</a>
|
||||
{% if subnet.location %}
|
||||
<small class="text-muted ms-2">({{ subnet.location }})</small>
|
||||
{% endif %}
|
||||
{% if subnet.description %}
|
||||
<small class="text-muted ms-2">{{ subnet.description }}</small>
|
||||
{% endif %}
|
||||
</h4>
|
||||
<div class="ms-auto">
|
||||
<a href="{{ url_for('dashboard.server_new') }}?subnet_id={{ subnet.id }}"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
<span class="ti ti-plus me-1"></span> Add Server
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Servers in this subnet -->
|
||||
{% if subnet.servers %}
|
||||
<div class="ps-4 mt-2">
|
||||
{% for server in subnet.servers %}
|
||||
<div class="server-container mb-3 border-start ps-3">
|
||||
<div class="server-header d-flex align-items-center p-2 bg-light rounded">
|
||||
<span class="ti ti-server me-2"></span>
|
||||
<h5 class="m-0">
|
||||
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="text-reset">
|
||||
{{ server.hostname }}
|
||||
</a>
|
||||
<small class="text-muted ms-2">{{ server.ip_address }}</small>
|
||||
</h5>
|
||||
<div class="ms-auto">
|
||||
<a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
<span class="ti ti-plus me-1"></span> Add App
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Apps on this server -->
|
||||
{% if server.apps %}
|
||||
<div class="ps-4 mt-2">
|
||||
{% for app in server.apps %}
|
||||
<div class="app-container mb-2 border-start ps-3">
|
||||
<div class="app-header d-flex align-items-center p-2 bg-light-lt rounded">
|
||||
<span class="ti ti-app-window me-2"></span>
|
||||
<h6 class="m-0">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-reset">
|
||||
{{ app.name }}
|
||||
</a>
|
||||
</h6>
|
||||
<div class="ms-2">
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-blue-lt">{{ port.port_number }}/{{ port.protocol }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="ps-4 mt-2">
|
||||
<div class="text-muted fst-italic">No applications</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="ps-4 mt-2">
|
||||
<div class="text-muted fst-italic">No servers in this subnet</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Standalone Servers -->
|
||||
{% if hierarchy.standalone_servers %}
|
||||
<div class="standalone-servers-container mb-4">
|
||||
<div class="subnet-header d-flex align-items-center p-2 bg-yellow-lt rounded">
|
||||
<span class="ti ti-server me-2"></span>
|
||||
<h4 class="m-0">Standalone Servers</h4>
|
||||
</div>
|
||||
|
||||
<div class="ps-4 mt-2">
|
||||
{% for server in hierarchy.standalone_servers %}
|
||||
<div class="server-container mb-3 border-start ps-3">
|
||||
<div class="server-header d-flex align-items-center p-2 bg-light rounded">
|
||||
<span class="ti ti-server me-2"></span>
|
||||
<h5 class="m-0">
|
||||
<a href="{{ url_for('dashboard.server_view', server_id=server.id) }}" class="text-reset">
|
||||
{{ server.hostname }}
|
||||
</a>
|
||||
<small class="text-muted ms-2">{{ server.ip_address }}</small>
|
||||
</h5>
|
||||
<div class="ms-auto">
|
||||
<a href="{{ url_for('dashboard.app_new') }}?server_id={{ server.id }}"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
<span class="ti ti-plus me-1"></span> Add App
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Apps on this server -->
|
||||
{% if server.apps %}
|
||||
<div class="ps-4 mt-2">
|
||||
{% for app in server.apps %}
|
||||
<div class="app-container mb-2 border-start ps-3">
|
||||
<div class="app-header d-flex align-items-center p-2 bg-light-lt rounded">
|
||||
<span class="ti ti-app-window me-2"></span>
|
||||
<h6 class="m-0">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-reset">
|
||||
{{ app.name }}
|
||||
</a>
|
||||
</h6>
|
||||
<div class="ms-2">
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-blue-lt">{{ port.port_number }}/{{ port.protocol }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="ps-4 mt-2">
|
||||
<div class="text-muted fst-italic">No applications</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not hierarchy.subnets and not hierarchy.standalone_servers %}
|
||||
<div class="text-center py-4">
|
||||
<div class="empty">
|
||||
<div class="empty-img">
|
||||
<span class="ti ti-database-off" style="font-size: 3rem;"></span>
|
||||
</div>
|
||||
<p class="empty-title">No infrastructure defined yet</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
Start by creating a subnet or a server to organize your infrastructure.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="{{ url_for('ipam.subnet_new') }}" class="btn btn-primary">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
Create Subnet
|
||||
</a>
|
||||
<a href="{{ url_for('dashboard.server_new') }}" class="btn btn-primary ms-2">
|
||||
<span class="ti ti-plus me-2"></span>
|
||||
Create Server
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.subnet-container,
|
||||
.server-container,
|
||||
.app-container {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.border-start {
|
||||
border-left: 2px solid rgba(98, 105, 118, 0.16) !important;
|
||||
}
|
||||
|
||||
.server-container:hover .border-start,
|
||||
.app-container:hover .border-start {
|
||||
border-left-color: var(--tblr-primary) !important;
|
||||
}
|
||||
|
||||
.subnet-header,
|
||||
.server-header,
|
||||
.app-header {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.subnet-header:hover,
|
||||
.server-header:hover,
|
||||
.app-header:hover {
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
@ -209,6 +209,10 @@
|
|||
class="sidebar-item {{ 'active' if request.endpoint and request.endpoint.startswith('dashboard.server') }}">
|
||||
<span class="ti ti-server me-2"></span> Servers
|
||||
</a>
|
||||
<a href="{{ url_for('dashboard.overview') }}"
|
||||
class="sidebar-item {{ 'active' if request.endpoint == 'dashboard.overview' }}">
|
||||
<span class="ti ti-sitemap me-2"></span> Overview
|
||||
</a>
|
||||
|
||||
<!-- IPAM with Subnet Tree -->
|
||||
<div class="sidebar-item-parent" id="ipam-menu">
|
||||
|
|
@ -315,6 +319,10 @@
|
|||
|
||||
<!-- ONLY ONE CONTENT BLOCK FOR BOTH AUTHENTICATED AND NON-AUTHENTICATED STATES -->
|
||||
<div class="{{ 'py-4' if current_user.is_authenticated else '' }}">
|
||||
<!-- Add this right after the header, before the main content -->
|
||||
{% if breadcrumbs is defined %}
|
||||
{% include 'components/breadcrumbs.html' %}
|
||||
{% endif %}
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
|
|
@ -618,4 +626,4 @@
|
|||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue