websites/homedocs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
pika 2025-04-03 14:24:28 +02:00
parent 66fe31eabe
commit 67dae6f5e4
7 changed files with 490 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/__init__.py
View file

@ -2,6 +2,10 @@ from flask import Flask, g, redirect, url_for, render_template, session
import datetime
import os
import secrets
from app.core.extensions import db, migrate, login_manager, bcrypt, limiter
from app.core.csrf_utils import init_csrf
from app.core.auth import User, load_user
from app.core.context_processors import inject_breadcrumbs
def create_app(config_name="development"):
@ -20,9 +24,6 @@ def create_app(config_name="development"):
app.config['SECRET_KEY'] = secrets.token_hex(32)
# Initialize extensions
from app.core.extensions import db, migrate, login_manager, bcrypt, limiter
from app.core.csrf_utils import init_csrf
db.init_app(app)
migrate.init_app(app, db)
login_manager.init_app(app)
@ -31,8 +32,6 @@ def create_app(config_name="development"):
limiter.init_app(app)
# Initialize login manager
from app.core.auth import User
@login_manager.user_loader
def load_user(user_id):
return User.query.get(int(user_id))
@ -119,4 +118,7 @@ def create_app(config_name="development"):
print(f"CSRF header name: {app.config.get('WTF_CSRF_HEADERS')}")
return response
# Register context processors
app.context_processor(inject_breadcrumbs)
return app

126
app/core/context_processors.py Normal file
View file

@ -0,0 +1,126 @@
from flask import request, url_for
from app.core.models import Server, App, Subnet
def inject_breadcrumbs():
"""Add breadcrumbs to template context based on current route"""
breadcrumbs = []
path_parts = request.path.strip('/').split('/')
# Skip breadcrumbs for the dashboard home
if request.endpoint == 'dashboard.dashboard_home':
return {'breadcrumbs': []}
# Handle IPAM routes
if 'ipam' in path_parts:
# Base IPAM breadcrumb
breadcrumbs.append({
'title': 'IPAM',
'url': url_for('ipam.ipam_home')
})
# Handle subnet routes within IPAM
if 'subnet' in path_parts:
try:
if 'new' in path_parts:
breadcrumbs.append({
'title': 'New Subnet',
'url': '#'
})
else:
subnet_id = int(path_parts[path_parts.index('subnet') + 1])
subnet = Subnet.query.get(subnet_id)
if subnet:
breadcrumbs.append({
'title': subnet.cidr,
'url': url_for('ipam.subnet_view', subnet_id=subnet.id)
})
if 'edit' in path_parts:
breadcrumbs.append({
'title': 'Edit',
'url': '#'
})
except (ValueError, IndexError):
pass
# Handle server routes
elif 'server' in path_parts:
try:
# Add Servers base breadcrumb
breadcrumbs.append({
'title': 'Servers',
'url': url_for('dashboard.server_list')
})
if 'new' in path_parts:
breadcrumbs.append({
'title': 'New Server',
'url': '#'
})
else:
server_id = int(path_parts[path_parts.index('server') + 1])
server = Server.query.get(server_id)
if server:
# If we're viewing a specific server
breadcrumbs.append({
'title': server.hostname,
'url': url_for('dashboard.server_view', server_id=server.id)
})
if 'edit' in path_parts:
breadcrumbs.append({
'title': 'Edit',
'url': '#'
})
except (ValueError, IndexError):
pass
# Handle app routes
elif 'app' in path_parts:
try:
# Add Applications base breadcrumb
breadcrumbs.append({
'title': 'Applications',
'url': url_for('dashboard.app_list')
})
# For new app
if 'new' in path_parts:
breadcrumbs.append({
'title': 'New Application',
'url': '#'
})
else:
app_id = int(path_parts[path_parts.index('app') + 1])
app = App.query.get(app_id)
if app:
server = Server.query.get(app.server_id)
if server:
breadcrumbs.append({
'title': server.hostname,
'url': url_for('dashboard.server_view', server_id=server.id)
})
# If we're viewing a specific app
breadcrumbs.append({
'title': app.name,
'url': url_for('dashboard.app_view', app_id=app.id)
})
if 'edit' in path_parts:
breadcrumbs.append({
'title': 'Edit',
'url': '#'
})
except (ValueError, IndexError):
pass
# Handle overview route
elif 'overview' in path_parts:
breadcrumbs.append({
'title': 'Infrastructure Overview',
'url': url_for('dashboard.overview')
})
return {'breadcrumbs': breadcrumbs}

72
app/routes/dashboard.py
View file

@ -529,3 +529,75 @@ def settings():
return redirect(url_for("dashboard.settings"))
return render_template("dashboard/settings.html", title="User Settings")
@bp.route("/overview")
@login_required
def overview():
"""Hierarchical overview of subnets, servers, and applications"""
# Get all subnets with their servers
subnets = Subnet.query.all()
# Get servers without subnets
standalone_servers = Server.query.filter(Server.subnet_id.is_(None)).all()
# Create a hierarchical structure
hierarchy = {
'subnets': [],
'standalone_servers': []
}
# Organize subnets and their servers
for subnet in subnets:
subnet_data = {
'id': subnet.id,
'cidr': subnet.cidr,
'description': subnet.description,
'location': subnet.location,
'servers': []
}
for server in subnet.servers:
server_data = {
'id': server.id,
'hostname': server.hostname,
'ip_address': server.ip_address,
'apps': []
}
for app in server.apps:
app_data = {
'id': app.id,
'name': app.name,
'ports': app.ports
}
server_data['apps'].append(app_data)
subnet_data['servers'].append(server_data)
hierarchy['subnets'].append(subnet_data)
# Organize standalone servers
for server in standalone_servers:
server_data = {
'id': server.id,
'hostname': server.hostname,
'ip_address': server.ip_address,
'apps': []
}
for app in server.apps:
app_data = {
'id': app.id,
'name': app.name,
'ports': app.ports
}
server_data['apps'].append(app_data)
hierarchy['standalone_servers'].append(server_data)
return render_template(
"dashboard/overview.html",
title="Infrastructure Overview",
hierarchy=hierarchy
)

23
app/templates/components/breadcrumbs.html Normal file
View 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>

31
app/templates/dashboard/app_form.html
View file

@ -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
View 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 %}

10
app/templates/layout.html
View file

@ -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>