This commit is contained in:
pika 2025-03-31 01:03:02 +02:00
parent 254593d260
commit 0a99abb52d
4 changed files with 279 additions and 148 deletions

84
.gitignore vendored
View file

@ -1,2 +1,86 @@
tests/__pycache__/conftest.cpython-313-pytest-8.3.5.pyc tests/__pycache__/conftest.cpython-313-pytest-8.3.5.pyc
scripts/__pycache__/check_routes.cpython-313-pytest-8.3.5.pyc scripts/__pycache__/check_routes.cpython-313-pytest-8.3.5.pyc
# Python bytecode
__pycache__/
*.py[cod]
*$py.class
# Distribution / packaging
dist/
build/
*.egg-info/
# Virtual environments
venv/
env/
ENV/
.env/
.venv/
# Flask stuff
instance/
.webassets-cache
flask_session/
# SQLite database files
*.sqlite
*.sqlite3
*.db
# Unit test / coverage reports
htmlcov/
.tox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
.hypothesis/
.pytest_cache/
# Jupyter Notebook
.ipynb_checkpoints
# VS Code
.vscode/
*.code-workspace
# PyCharm
.idea/
*.iml
*.iws
*.ipr
# Environment variables
.env
.env.local
.env.development
.env.test
.env.production
# Logs
logs/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# System files
.DS_Store
Thumbs.db
ehthumbs.db
Desktop.ini
# User-specific files
*.swp
*.swo
*~
# Local development settings
local_settings.py
# Media and static files (if collected locally)
/media/
/static/collected/

View file

@ -286,25 +286,28 @@ def suggest_port(server_id):
def add_app_port(app_id): def add_app_port(app_id):
"""Add a port to an application""" """Add a port to an application"""
app = App.query.get_or_404(app_id) app = App.query.get_or_404(app_id)
# Check if request is AJAX (XMLHttpRequest)
is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest' or request.accept_mimetypes.best == 'application/json'
try: try:
port_number = request.form.get("port_number") port_number = request.form.get("port_number")
protocol = request.form.get("protocol", "TCP") protocol = request.form.get("protocol", "TCP")
description = request.form.get("description", "") description = request.form.get("description", "")
# Validate port data # Validate port data
valid, clean_port, error = validate_port_data( valid, clean_port, error = validate_port_data(
port_number, protocol, description port_number, protocol, description
) )
if not valid: if not valid:
flash(error, "danger") flash(error, "danger")
return ( return (
redirect(url_for("dashboard.app_view", app_id=app_id)) redirect(url_for("dashboard.app_view", app_id=app_id))
if not request.is_xhr if not is_ajax
else jsonify({"success": False, "error": error}) else jsonify({"success": False, "error": error})
), 400 ), 400
# Check if port already exists # Check if port already exists
existing_port = Port.query.filter_by( existing_port = Port.query.filter_by(
app_id=app_id, port_number=clean_port app_id=app_id, port_number=clean_port
@ -314,10 +317,10 @@ def add_app_port(app_id):
flash(error_msg, "warning") flash(error_msg, "warning")
return ( return (
redirect(url_for("dashboard.app_view", app_id=app_id)) redirect(url_for("dashboard.app_view", app_id=app_id))
if not request.is_xhr if not is_ajax
else jsonify({"success": False, "error": error_msg}) else jsonify({"success": False, "error": error_msg})
), 400 ), 400
# Create new port # Create new port
new_port = Port( new_port = Port(
app_id=app_id, app_id=app_id,
@ -327,35 +330,34 @@ def add_app_port(app_id):
) )
db.session.add(new_port) db.session.add(new_port)
db.session.commit() db.session.commit()
success_msg = f"Port {clean_port}/{protocol} added successfully" success_msg = f"Port {clean_port}/{protocol} added successfully"
flash(success_msg, "success") flash(success_msg, "success")
# If it's a regular form submission (not AJAX), redirect # If it's a regular form submission (not AJAX), redirect
if not request.is_xhr and not request.is_json: if not is_ajax and request.content_type != 'application/json':
return redirect(url_for("dashboard.app_view", app_id=app_id)) return redirect(url_for("dashboard.app_view", app_id=app_id))
# Otherwise return JSON for API/AJAX calls # Otherwise return JSON response
return jsonify( return jsonify({
{ "success": True,
"success": True, "message": success_msg,
"message": success_msg, "port": {
"port": { "id": new_port.id,
"id": new_port.id, "port_number": new_port.port_number,
"number": new_port.port_number, "protocol": new_port.protocol,
"protocol": new_port.protocol, "description": new_port.description
"description": new_port.description,
},
} }
) })
except Exception as e: except Exception as e:
db.session.rollback() db.session.rollback()
flash(f"Error: {str(e)}", "danger") error_msg = f"Error adding port: {str(e)}"
flash(error_msg, "danger")
return ( return (
redirect(url_for("dashboard.app_view", app_id=app_id)) redirect(url_for("dashboard.app_view", app_id=app_id))
if not request.is_xhr if not is_ajax
else jsonify({"success": False, "error": str(e)}) else jsonify({"success": False, "error": error_msg})
), 500 ), 500

View file

@ -71,14 +71,14 @@
<th>PORT</th> <th>PORT</th>
<th>PROTOCOL</th> <th>PROTOCOL</th>
<th>DESCRIPTION</th> <th>DESCRIPTION</th>
<th width="40"></th> <th class="w-1"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for port in app.ports %} {% for port in app.ports %}
<tr> <tr>
<td>{{ port.port_number }}</td> <td>{{ port.port_number }}</td>
<td>{{ port.protocol }}</td> <td><span class="badge bg-blue">{{ port.protocol }}</span></td>
<td>{{ port.description }}</td> <td>{{ port.description }}</td>
<td> <td>
<button type="button" class="btn btn-sm btn-ghost-danger" <button type="button" class="btn btn-sm btn-ghost-danger"
@ -97,12 +97,10 @@
<span class="ti ti-plug"></span> <span class="ti ti-plug"></span>
</div> </div>
<p class="empty-title">No ports configured</p> <p class="empty-title">No ports configured</p>
<p class="empty-subtitle text-muted"> <p class="empty-subtitle text-muted">Add ports to document what this application uses</p>
Add port information to track which ports this application uses.
</p>
<div class="empty-action"> <div class="empty-action">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPortModal"> <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPortModal">
<span class="ti ti-plus me-2"></span> Add Port <span class="ti ti-plus me-1"></span> Add Port
</button> </button>
</div> </div>
</div> </div>
@ -355,7 +353,8 @@
const appId = {{ app.id }}; const appId = {{ app.id }};
let portToDelete = null; let portToDelete = null;
// Function to handle port delete confirmation // IMPORTANT: Define confirmDeletePort outside the DOMContentLoaded event
// so it's available in the global scope
function confirmDeletePort(portId) { function confirmDeletePort(portId) {
portToDelete = portId; portToDelete = portId;
const modal = new bootstrap.Modal(document.getElementById('deletePortModal')); const modal = new bootstrap.Modal(document.getElementById('deletePortModal'));

View file

@ -11,14 +11,15 @@
<h2 class="page-title"> <h2 class="page-title">
{{ server.hostname }} {{ server.hostname }}
</h2> </h2>
<div class="text-muted mt-1">{{ server.ip_address }}</div>
</div> </div>
<div class="col-auto ms-auto"> <div class="col-auto ms-auto d-print-none">
<div class="btn-list"> <div class="btn-list">
<a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary"> <a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
<span class="ti ti-edit me-2"></span>Edit Server <span class="ti ti-edit"></span> Edit Server
</a> </a>
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal"> <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
<span class="ti ti-trash me-2"></span>Delete <span class="ti ti-trash"></span> Delete
</button> </button>
</div> </div>
</div> </div>
@ -26,7 +27,7 @@
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-md-4"> <div class="col-md-6 col-lg-4">
<!-- Server Information --> <!-- Server Information -->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
@ -34,11 +35,11 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="mb-3"> <div class="mb-3">
<div class="form-label">IP Address</div> <label class="form-label text-muted">IP Address</label>
<div>{{ server.ip_address }}</div> <div>{{ server.ip_address }}</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<div class="form-label">Subnet</div> <label class="form-label text-muted">Subnet</label>
<div> <div>
<a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet_id) }}"> <a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet_id) }}">
{{ server.subnet.cidr }} {{ server.subnet.cidr }}
@ -46,127 +47,138 @@
({{ server.subnet.location }}) ({{ server.subnet.location }})
</div> </div>
</div> </div>
<div class="mb-3"> <div>
<div class="form-label">Scan Status</div> <label class="form-label text-muted">Scan Status</label>
<div>{{ server.last_scan or 'Not scanned yet' }}</div> <div>{{ server.scan_status or 'Not scanned yet' }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Port Usage Map --> <!-- Port Usage Card -->
<div class="card mb-4"> <div class="card mt-3">
<div class="card-header d-flex justify-content-between align-items-center"> <div class="card-header d-flex justify-content-between align-items-center">
<h3 class="card-title">Port Usage</h3> <h3 class="card-title">Port Usage</h3>
<div> <a href="#" class="btn btn-sm btn-outline-primary" id="getFreePorts">Get Free Port</a>
<button class="btn btn-sm btn-outline-primary" id="get-free-port">Get Free Port</button>
</div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="port-usage-compact"> <div class="d-flex align-items-center mb-3">
<div class="port-legend mb-3"> <span class="d-flex align-items-center me-3">
<span class="port-indicator port-free me-2"></span> Free <span class="status-dot status-green me-2"></span> Free
<span class="port-indicator port-used ms-3 me-2"></span> Used </span>
</div> <span class="d-flex align-items-center">
<span class="status-dot status-red me-2"></span> Used
</span>
</div>
<div id="port-ranges" class="port-ranges"> <div class="mt-3">
<!-- Port ranges will be rendered here --> <h4 class="card-subtitle">Used Ports</h4>
</div> <div class="d-flex flex-wrap mt-2">
{% set used_ports = [] %}
{% for app in server.apps %}
{% for port in app.ports %}
{% set _ = used_ports.append({'port': port.port_number, 'protocol': port.protocol, 'app': app.name}) %}
{% endfor %}
{% endfor %}
<div class="mt-3"> {% if used_ports %}
<h4 class="h5">Used Ports</h4> {% for port_info in used_ports %}
<div id="used-ports-list" class="used-ports-list"> <span class="badge bg-red me-1 mb-1 text-dark" title="{{ port_info.app }}">
<!-- Used ports will be listed here --> {{ port_info.port }}/{{ port_info.protocol }}
</div> </span>
{% endfor %}
{% else %}
<span class="text-muted">No ports in use</span>
{% endif %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-8"> <div class="col-md-6 col-lg-8">
<!-- Documentation section --> <!-- Documentation section -->
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Documentation</h3> <h3 class="card-title">Documentation</h3>
</div> </div>
<div class="card-body markdown-content"> <div class="card-body">
{% if server.documentation %} {% if server.documentation %}
{{ server.documentation|markdown|safe }} <div class="markdown-content">
{% else %} {{ server.documentation|markdown|safe }}
<div class="empty">
<div class="empty-icon">
<span class="ti ti-file-text"></span>
</div>
<p class="empty-title">No documentation available</p>
<p class="empty-subtitle text-muted">
Add documentation to this server to keep track of important information.
</p>
<div class="empty-action">
<a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
<span class="ti ti-edit me-2"></span> Add Documentation
</a>
</div>
</div> </div>
{% else %}
<div class="text-muted">No documentation added yet.</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
<!-- Applications section with collapsible cards --> <!-- Applications section with collapsible cards -->
<div class="card mt-3"> <div class="card mt-3">
<div class="card-header"> <div class="card-header d-flex justify-content-between align-items-center">
<h3 class="card-title">Applications</h3> <h3 class="card-title">Applications</h3>
<div class="card-actions"> <div>
<a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary me-2"> <a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
<span class="ti ti-plus me-2"></span> Add Application <span class="ti ti-plus"></span> Add Application
</a> </a>
<button class="btn btn-outline-primary" id="toggle-all-apps"> {% if server.apps and server.apps|length > 1 %}
<span class="ti ti-chevrons-down me-1"></span> <span id="toggle-text">Expand All</span> <button id="expandAllBtn" class="btn btn-outline-secondary ms-2" data-expanded="false">
<span class="ti ti-chevrons-down"></span> Expand All
</button> </button>
{% endif %}
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
{% if server.apps %} {% if server.apps %}
<div class="accordion" id="accordionApps"> <div class="accordion" id="applicationAccordion">
{% for app in server.apps %} {% for app in server.apps %}
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="heading-{{ app.id }}"> <h2 class="accordion-header" id="heading-{{ app.id }}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" <button class="accordion-button {% if server.apps|length > 1 %}collapsed{% endif %}" type="button"
data-bs-target="#collapse-{{ app.id }}" aria-expanded="false" aria-controls="collapse-{{ app.id }}"> data-bs-toggle="collapse" data-bs-target="#collapse-{{ app.id }}"
<div class="d-flex justify-content-between align-items-center w-100 me-2"> aria-expanded="{% if server.apps|length == 1 %}true{% else %}false{% endif %}"
aria-controls="collapse-{{ app.id }}">
<div class="d-flex align-items-center justify-content-between w-100">
<span>{{ app.name }}</span> <span>{{ app.name }}</span>
{% if app.ports %} <div class="app-ports-badges d-flex flex-wrap ms-2" onclick="event.stopPropagation();">
<div>
{% for port in app.ports %} {% for port in app.ports %}
<span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span> <span class="badge bg-blue me-1">{{ port.port_number }}/{{ port.protocol }}</span>
{% endfor %} {% endfor %}
</div> </div>
{% endif %}
</div> </div>
</button> </button>
</h2> </h2>
<div id="collapse-{{ app.id }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ app.id }}" <div id="collapse-{{ app.id }}"
data-bs-parent="#accordionApps"> class="accordion-collapse collapse {% if server.apps|length == 1 %}show{% endif %}"
aria-labelledby="heading-{{ app.id }}" data-bs-parent="#applicationAccordion">
<div class="accordion-body"> <div class="accordion-body">
<div class="d-flex justify-content-end mb-3"> <div class="d-flex justify-content-between mb-3">
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" <h4>{{ app.name }}</h4>
class="btn btn-sm btn-outline-primary me-2"> <div class="btn-list">
<span class="ti ti-eye me-1"></span> View <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}"
</a> class="btn btn-sm btn-outline-primary">
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" <span class="ti ti-eye"></span> View
class="btn btn-sm btn-outline-primary me-2"> </a>
<span class="ti ti-edit me-1"></span> Edit <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
</a> class="btn btn-sm btn-outline-secondary">
<button class="btn btn-sm btn-outline-danger" onclick="deleteApp('{{ app.id }}', '{{ app.name }}')"> <span class="ti ti-edit"></span> Edit
<span class="ti ti-trash me-1"></span> Delete </a>
</button> <button class="btn btn-sm btn-outline-danger" onclick="deleteApp({{ app.id }}, '{{ app.name }}')">
<span class="ti ti-trash"></span> Delete
</button>
</div>
</div> </div>
<!-- Documentation preview -->
{% if app.documentation %} {% if app.documentation %}
<div class="markdown-content"> <div class="mt-3">
{{ app.documentation|markdown|safe }} <h5>Documentation</h5>
<div class="markdown-content card p-3 bg-light">
{{ (app.documentation | truncate(200, true, "..."))|markdown|safe }}
{% if app.documentation | length > 200 %}
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="mt-2 d-block">Read more...</a>
{% endif %}
</div>
</div> </div>
{% else %}
<div class="text-muted">No documentation available</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
@ -201,8 +213,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
<div class="modal-title">Are you sure?</div> <div class="modal-title">Are you sure?</div>
<div>This will permanently delete the server "{{ server.hostname }}" and all associated applications and ports. <div>This will permanently delete the server "{{ server.hostname }}" and all its applications.</div>
</div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
@ -215,7 +226,7 @@
</div> </div>
</div> </div>
<!-- Delete App Modal Template - Will be dynamically populated --> <!-- Delete App Modal Template -->
<div class="modal modal-blur fade" id="deleteAppModal" tabindex="-1"> <div class="modal modal-blur fade" id="deleteAppModal" tabindex="-1">
<div class="modal-dialog modal-sm modal-dialog-centered"> <div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
@ -249,47 +260,51 @@
new bootstrap.Modal(modal).show(); new bootstrap.Modal(modal).show();
} }
// Toggle expand/collapse all // Initialize expand/collapse functionality
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('toggle-all-apps'); const expandAllBtn = document.getElementById('expandAllBtn');
const toggleText = document.getElementById('toggle-text'); if (expandAllBtn) {
let isExpanded = false; expandAllBtn.addEventListener('click', function () {
const isExpanded = expandAllBtn.getAttribute('data-expanded') === 'true';
const accordionItems = document.querySelectorAll('.accordion-collapse');
toggleBtn.addEventListener('click', function () { accordionItems.forEach(item => {
const accordionButtons = document.querySelectorAll('.accordion-button'); if (isExpanded) {
const accordionContents = document.querySelectorAll('.accordion-collapse'); // Collapse all items
bootstrap.Collapse.getInstance(item)?.hide();
isExpanded = !isExpanded; } else {
// Expand all items
if (isExpanded) { bootstrap.Collapse.getInstance(item) || new bootstrap.Collapse(item, { toggle: false });
// Expand all bootstrap.Collapse.getInstance(item).show();
accordionButtons.forEach(button => { }
button.classList.remove('collapsed');
button.setAttribute('aria-expanded', 'true');
}); });
accordionContents.forEach(content => { // Update button state
content.classList.add('show'); expandAllBtn.setAttribute('data-expanded', isExpanded ? 'false' : 'true');
}); if (isExpanded) {
expandAllBtn.innerHTML = '<span class="ti ti-chevrons-down"></span> Expand All';
} else {
expandAllBtn.innerHTML = '<span class="ti ti-chevrons-up"></span> Collapse All';
}
});
}
toggleText.textContent = 'Collapse All'; // Handle free port button
toggleBtn.querySelector('span:first-child').classList.remove('ti-chevrons-down'); document.getElementById('getFreePorts')?.addEventListener('click', function (e) {
toggleBtn.querySelector('span:first-child').classList.add('ti-chevrons-up'); e.preventDefault();
} else { fetch(`/api/servers/{{ server.id }}/suggest_port`)
// Collapse all .then(response => response.json())
accordionButtons.forEach(button => { .then(data => {
button.classList.add('collapsed'); if (data.port) {
button.setAttribute('aria-expanded', 'false'); alert(`Available port: ${data.port}`);
} else {
alert('No available ports found');
}
})
.catch(error => {
console.error('Error finding free port:', error);
alert('Error finding free port');
}); });
accordionContents.forEach(content => {
content.classList.remove('show');
});
toggleText.textContent = 'Expand All';
toggleBtn.querySelector('span:first-child').classList.remove('ti-chevrons-up');
toggleBtn.querySelector('span:first-child').classList.add('ti-chevrons-down');
}
}); });
}); });
</script> </script>
@ -364,5 +379,36 @@
.copy-port:hover { .copy-port:hover {
opacity: 1; opacity: 1;
} }
.markdown-content {
overflow-wrap: break-word;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.markdown-content p {
margin-bottom: 1rem;
}
.markdown-content a {
color: var(--tblr-primary);
}
.badge.bg-red.text-dark {
color: #000 !important;
font-weight: 500;
}
.card-body .markdown-content {
padding: 0;
}
</style> </style>
{% endblock %} {% endblock %}