414 lines
No EOL
14 KiB
HTML
414 lines
No EOL
14 KiB
HTML
{% 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">
|
|
<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">
|
|
<div class="btn-list">
|
|
<a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
|
|
<span class="ti ti-edit"></span> Edit Server
|
|
</a>
|
|
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
|
|
<span class="ti ti-trash"></span> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-6 col-lg-4">
|
|
<!-- Server Information -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Basic Information</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">IP Address</label>
|
|
<div>{{ server.ip_address }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted">Subnet</label>
|
|
<div>
|
|
<a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet_id) }}">
|
|
{{ server.subnet.cidr }}
|
|
</a>
|
|
({{ server.subnet.location }})
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label text-muted">Scan Status</label>
|
|
<div>{{ server.scan_status or 'Not scanned yet' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Port Usage Card -->
|
|
<div class="card mt-3">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h3 class="card-title">Port Usage</h3>
|
|
<a href="#" class="btn btn-sm btn-outline-primary" id="getFreePorts">Get Free Port</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<span class="d-flex align-items-center me-3">
|
|
<span class="status-dot status-green me-2"></span> Free
|
|
</span>
|
|
<span class="d-flex align-items-center">
|
|
<span class="status-dot status-red me-2"></span> Used
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<h4 class="card-subtitle">Used Ports</h4>
|
|
<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 %}
|
|
|
|
{% if used_ports %}
|
|
{% for port_info in used_ports %}
|
|
<span class="badge bg-red me-1 mb-1 text-dark" title="{{ port_info.app }}">
|
|
{{ port_info.port }}/{{ port_info.protocol }}
|
|
</span>
|
|
{% endfor %}
|
|
{% else %}
|
|
<span class="text-muted">No ports in use</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-8">
|
|
<!-- Documentation section -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Documentation</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if server.documentation %}
|
|
<div class="markdown-content">
|
|
{{ server.documentation|markdown|safe }}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-muted">No documentation added yet.</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Applications section with collapsible cards -->
|
|
<div class="card mt-3">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h3 class="card-title">Applications</h3>
|
|
<div>
|
|
<a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
|
|
<span class="ti ti-plus"></span> Add Application
|
|
</a>
|
|
{% if server.apps and server.apps|length > 1 %}
|
|
<button id="expandAllBtn" class="btn btn-outline-secondary ms-2" data-expanded="false">
|
|
<span class="ti ti-chevrons-down"></span> Expand All
|
|
</button>
|
|
{% endif %}
|
|
</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 {% if server.apps|length > 1 %}collapsed{% endif %}" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#collapse-{{ app.id }}"
|
|
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>
|
|
<div class="app-ports-badges d-flex flex-wrap ms-2" onclick="event.stopPropagation();">
|
|
{% for port in app.ports %}
|
|
<span class="badge bg-blue me-1">{{ port.port_number }}/{{ port.protocol }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</h2>
|
|
<div id="collapse-{{ app.id }}"
|
|
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="d-flex justify-content-between mb-3">
|
|
<h4>{{ app.name }}</h4>
|
|
<div class="btn-list">
|
|
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}"
|
|
class="btn btn-sm btn-outline-primary">
|
|
<span class="ti ti-eye"></span> View
|
|
</a>
|
|
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
|
|
class="btn btn-sm btn-outline-secondary">
|
|
<span class="ti ti-edit"></span> Edit
|
|
</a>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="deleteApp({{ app.id }}, '{{ app.name }}')">
|
|
<span class="ti ti-trash"></span> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documentation preview -->
|
|
{% if app.documentation %}
|
|
<div class="mt-3">
|
|
<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>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty">
|
|
<div class="empty-icon">
|
|
<span class="ti ti-apps"></span>
|
|
</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">
|
|
<span class="ti ti-plus me-1"></span> Add Application
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Server Modal -->
|
|
<div class="modal modal-blur fade" id="deleteServerModal" tabindex="-1">
|
|
<div class="modal-dialog modal-sm modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<div class="modal-title">Are you sure?</div>
|
|
<div>This will permanently delete the server "{{ server.hostname }}" and all its applications.</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<form method="POST" action="{{ url_for('dashboard.server_delete', server_id=server.id) }}">
|
|
<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 Template -->
|
|
<div class="modal modal-blur fade" id="deleteAppModal" tabindex="-1">
|
|
<div class="modal-dialog modal-sm modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<div class="modal-title">Are you sure?</div>
|
|
<div id="delete-app-message"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<form id="delete-app-form" method="POST" action="">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="btn btn-danger">Delete Application</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Function to handle app deletion modal
|
|
function deleteApp(appId, appName) {
|
|
const modal = document.getElementById('deleteAppModal');
|
|
const message = document.getElementById('delete-app-message');
|
|
const form = document.getElementById('delete-app-form');
|
|
|
|
message.textContent = `This will delete the application "${appName}" and all its ports.`;
|
|
form.action = "{{ url_for('dashboard.app_delete', app_id=0) }}".replace('0', appId);
|
|
|
|
// Show the modal
|
|
new bootstrap.Modal(modal).show();
|
|
}
|
|
|
|
// Initialize expand/collapse functionality
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const expandAllBtn = document.getElementById('expandAllBtn');
|
|
if (expandAllBtn) {
|
|
expandAllBtn.addEventListener('click', function () {
|
|
const isExpanded = expandAllBtn.getAttribute('data-expanded') === 'true';
|
|
const accordionItems = document.querySelectorAll('.accordion-collapse');
|
|
|
|
accordionItems.forEach(item => {
|
|
if (isExpanded) {
|
|
// Collapse all items
|
|
bootstrap.Collapse.getInstance(item)?.hide();
|
|
} else {
|
|
// Expand all items
|
|
bootstrap.Collapse.getInstance(item) || new bootstrap.Collapse(item, { toggle: false });
|
|
bootstrap.Collapse.getInstance(item).show();
|
|
}
|
|
});
|
|
|
|
// Update button state
|
|
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';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle free port button
|
|
document.getElementById('getFreePorts')?.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
fetch(`/api/servers/{{ server.id }}/suggest_port`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.port) {
|
|
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');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block styles %}
|
|
<style>
|
|
.port-usage-compact {
|
|
width: 100%;
|
|
}
|
|
|
|
.port-ranges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px;
|
|
}
|
|
|
|
.port-range {
|
|
height: 12px;
|
|
flex-grow: 1;
|
|
min-width: 3px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.port-range-free {
|
|
background-color: rgba(25, 135, 84, 0.4);
|
|
}
|
|
|
|
.port-range-used {
|
|
background-color: rgba(220, 53, 69, 0.6);
|
|
}
|
|
|
|
.port-indicator {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.port-free {
|
|
background-color: rgba(25, 135, 84, 0.4);
|
|
}
|
|
|
|
.port-used {
|
|
background-color: rgba(220, 53, 69, 0.6);
|
|
}
|
|
|
|
.used-ports-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.used-port-tag {
|
|
background-color: rgba(220, 53, 69, 0.2);
|
|
border: 1px solid rgba(220, 53, 69, 0.3);
|
|
color: var(--bs-body-color);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.copy-port {
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.copy-port:hover {
|
|
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>
|
|
{% endblock %} |