wip
This commit is contained in:
pika
parent
6dd38036e7
commit
097b3dbf09
34 changed files with 1719 additions and 520 deletions
|
|
@ -5,133 +5,201 @@
|
|||
<div class="page-header d-print-none">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="page-pretitle">
|
||||
Server Details
|
||||
</div>
|
||||
<h2 class="page-title">
|
||||
{{ server.hostname }}
|
||||
</h2>
|
||||
<div class="text-muted mt-1">{{ server.ip_address }}</div>
|
||||
</div>
|
||||
<div class="col-auto ms-auto d-print-none">
|
||||
<a href="{{ url_for('dashboard.server_list') }}" class="btn btn-link">
|
||||
Back to Servers
|
||||
</a>
|
||||
<div class="btn-list">
|
||||
<a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
|
||||
<i class="ti ti-edit me-1"></i> Edit
|
||||
</a>
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
|
||||
<i class="ti ti-trash me-1"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Documentation</h3>
|
||||
</div>
|
||||
<div class="card-body markdown-body">
|
||||
{% if server.documentation %}
|
||||
{{ markdown(server.documentation)|safe }}
|
||||
{% else %}
|
||||
<div class="text-center text-muted py-3">
|
||||
No documentation available for this server.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h3 class="card-title">Applications</h3>
|
||||
<a href="{{ url_for('dashboard.app_new') }}" class="btn btn-sm btn-primary">
|
||||
Add Application
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if apps %}
|
||||
<table class="table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Ports</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for app in apps %}
|
||||
<tr>
|
||||
<td>{{ app.name }}</td>
|
||||
<td>
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-primary">
|
||||
{{ port.port }}/{{ port.type }} {% if port.desc %}({{ port.desc }}){% endif %}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="text-center py-3">
|
||||
<div class="mb-3">No applications registered for this server</div>
|
||||
<a href="{{ url_for('dashboard.app_new') }}" class="btn btn-outline-primary">
|
||||
Add Application
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Server Information</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-2">
|
||||
<strong>Hostname:</strong> {{ server.hostname }}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<strong>IP Address:</strong> {{ server.ip_address }}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<strong>Subnet:</strong> {{ server.subnet.cidr if server.subnet else 'N/A' }}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<strong>Location:</strong> {{ server.subnet.location if server.subnet else 'N/A' }}
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<strong>Created:</strong> {{ server.created_at.strftime('%Y-%m-%d') }}
|
||||
</div>
|
||||
<dl class="row">
|
||||
<dt class="col-5">IP Address:</dt>
|
||||
<dd class="col-7">{{ server.ip_address }}</dd>
|
||||
|
||||
<dt class="col-5">Subnet:</dt>
|
||||
<dd class="col-7">
|
||||
<a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet.id) }}">
|
||||
{{ server.subnet.cidr }}
|
||||
</a>
|
||||
</dd>
|
||||
|
||||
<dt class="col-5">Location:</dt>
|
||||
<dd class="col-7">{{ server.subnet.location }}</dd>
|
||||
|
||||
<dt class="col-5">Created:</dt>
|
||||
<dd class="col-7">{{ server.created_at.strftime('%Y-%m-%d') }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Port Usage Map -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Open Ports</h3>
|
||||
<div class="card-header d-flex align-items-center">
|
||||
<h3 class="card-title">Port Usage</h3>
|
||||
<div class="ms-auto">
|
||||
<button id="get-random-port" class="btn btn-sm btn-outline-primary">
|
||||
<i class="ti ti-clipboard-copy me-1"></i> Get Free Port
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if server.get_open_ports() %}
|
||||
<div class="list-group list-group-flush">
|
||||
{% for port in server.get_open_ports() %}
|
||||
<div class="list-group-item">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<span class="badge bg-primary">{{ port.port }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-truncate">
|
||||
{{ port.type|upper }}
|
||||
{% if port.desc %}
|
||||
<span class="text-muted">{{ port.desc }}</span>
|
||||
{% endif %}
|
||||
<div class="port-map">
|
||||
<div class="port-map-grid">
|
||||
{% for i in range(1, 101) %}
|
||||
{% set port_num = 8000 + i - 1 %}
|
||||
{% set port_used = false %}
|
||||
{% set port_app = "" %}
|
||||
{% set port_color = "" %}
|
||||
{% set tooltip = "" %}
|
||||
|
||||
{% for app in server.apps %}
|
||||
{% for port in app.ports %}
|
||||
{% if port.port_number == port_num %}
|
||||
{% set port_used = true %}
|
||||
{% set port_app = app.name %}
|
||||
{% set port_color = "bg-" ~ ["primary", "success", "info", "warning", "danger"][(app.id % 5)] %}
|
||||
{% set tooltip = app.name ~ " - " ~ port.description %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="port-item {{ port_color if port_used else 'bg-light' }}" data-port="{{ port_num }}"
|
||||
data-bs-toggle="tooltip" title="{{ tooltip if port_used else 'Free port: ' ~ port_num }}">
|
||||
{{ port_num }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-muted small">
|
||||
<div class="d-flex flex-wrap">
|
||||
<div class="me-3"><span class="badge bg-light">Port</span> Free</div>
|
||||
<div><span class="badge bg-primary">Port</span> Used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<!-- Applications -->
|
||||
<div class="card">
|
||||
<div class="card-header d-flex align-items-center">
|
||||
<h3 class="card-title">Applications</h3>
|
||||
<div class="ms-auto">
|
||||
<a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-sm btn-primary">
|
||||
<i class="ti ti-plus me-1"></i> Add Application
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if server.apps %}
|
||||
<div class="accordion" id="applicationAccordion">
|
||||
{% for app in server.apps %}
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="heading{{ app.id }}">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse{{ app.id }}" aria-expanded="false" aria-controls="collapse{{ app.id }}">
|
||||
<span class="me-2">{{ app.name }}</span>
|
||||
{% if app.ports %}
|
||||
<div class="ms-auto d-flex">
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-primary me-1">{{ port.port_number }}/{{ port.protocol }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse{{ app.id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ app.id }}"
|
||||
data-bs-parent="#applicationAccordion">
|
||||
<div class="accordion-body">
|
||||
<div class="d-flex justify-content-end mb-2">
|
||||
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
|
||||
class="btn btn-sm btn-outline-primary me-2">
|
||||
<i class="ti ti-edit"></i> Edit
|
||||
</a>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger"
|
||||
onclick="confirmDeleteApp({{ app.id }}, '{{ app.name }}')">
|
||||
<i class="ti ti-trash"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Ports -->
|
||||
{% if app.ports %}
|
||||
<div class="mb-3">
|
||||
<h5>Ports</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Port</th>
|
||||
<th>Protocol</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for port in app.ports %}
|
||||
<tr>
|
||||
<td>{{ port.port_number }}</td>
|
||||
<td>{{ port.protocol }}</td>
|
||||
<td>{{ port.description }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Documentation -->
|
||||
{% if app.documentation %}
|
||||
<div class="mt-3">
|
||||
<h5>Documentation</h5>
|
||||
<div class="markdown-body">
|
||||
{{ app.documentation|markdown }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-muted">No documentation available</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center text-muted py-3">
|
||||
No open ports detected.
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<i class="ti ti-apps"></i>
|
||||
</div>
|
||||
<p class="empty-title">No applications found</p>
|
||||
<p class="empty-subtitle text-muted">
|
||||
This server doesn't have any applications yet.
|
||||
</p>
|
||||
<div class="empty-action">
|
||||
<a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
|
||||
<i class="ti ti-plus me-1"></i> Add Application
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -139,4 +207,135 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Server Modal -->
|
||||
<div class="modal fade" id="deleteServerModal" tabindex="-1" aria-labelledby="deleteServerModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="deleteServerModalLabel">Confirm Delete</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you sure you want to delete server <strong>{{ server.hostname }}</strong>? This action cannot be undone.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<form action="{{ url_for('dashboard.server_delete', server_id=server.id) }}" method="POST">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-danger">Delete Server</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete App Modal (created dynamically) -->
|
||||
<div class="modal fade" id="deleteAppModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Confirm Delete</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="deleteAppModalBody">
|
||||
Are you sure you want to delete this application?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<form id="deleteAppForm" method="POST">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-danger">Delete Application</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize tooltips
|
||||
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Random port generator
|
||||
const getRandomPortBtn = document.getElementById('get-random-port');
|
||||
if (getRandomPortBtn) {
|
||||
getRandomPortBtn.addEventListener('click', async function () {
|
||||
try {
|
||||
const response = await fetch(`/api/servers/{{ server.id }}/suggest_port`);
|
||||
if (!response.ok) throw new Error('Failed to get port suggestion');
|
||||
|
||||
const data = await response.json();
|
||||
if (data.port) {
|
||||
// Copy to clipboard
|
||||
navigator.clipboard.writeText(data.port.toString())
|
||||
.then(() => {
|
||||
showNotification(`Port ${data.port} copied to clipboard!`, 'success');
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
showNotification(`Suggested free port: ${data.port}`, 'info');
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
showNotification('Failed to suggest port', 'danger');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Function to handle app deletion confirmation
|
||||
function confirmDeleteApp(appId, appName) {
|
||||
const modal = document.getElementById('deleteAppModal');
|
||||
const modalBody = document.getElementById('deleteAppModalBody');
|
||||
const deleteForm = document.getElementById('deleteAppForm');
|
||||
|
||||
modalBody.textContent = `Are you sure you want to delete application "${appName}"? This action cannot be undone.`;
|
||||
deleteForm.action = `/dashboard/apps/${appId}/delete`;
|
||||
|
||||
const bsModal = new bootstrap.Modal(modal);
|
||||
bsModal.show();
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block styles %}
|
||||
<style>
|
||||
.port-map {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.port-map-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.port-item {
|
||||
padding: 4px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.port-item:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
padding: 1rem;
|
||||
background-color: var(--tblr-bg-surface);
|
||||
border: 1px solid var(--tblr-border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue