wip
This commit is contained in:
pika
parent
f939933a7c
commit
be6f7cfcbb
35 changed files with 1897 additions and 733 deletions
|
|
@ -12,13 +12,13 @@
|
|||
{{ server.hostname }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto ms-auto d-print-none">
|
||||
<div class="col-auto ms-auto">
|
||||
<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
|
||||
<span class="ti ti-edit me-2"></span>Edit Server
|
||||
</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 class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
|
||||
<span class="ti ti-trash me-2"></span>Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,28 +27,29 @@
|
|||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-4">
|
||||
<!-- Server Information -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Server Information</h3>
|
||||
<h3 class="card-title">Basic Information</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<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) }}">
|
||||
<div class="mb-3">
|
||||
<div class="form-label">IP Address</div>
|
||||
<div>{{ server.ip_address }}</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Subnet</div>
|
||||
<div>
|
||||
<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>
|
||||
({{ server.subnet.location }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Scan Status</div>
|
||||
<div>{{ server.last_scan or 'Not scanned yet' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -101,70 +102,8 @@
|
|||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<!-- Applications -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Applications</h3>
|
||||
<div class="card-actions">
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if server.apps %}
|
||||
<div class="row row-cards">
|
||||
{% for app in server.apps %}
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}">{{ app.name }}</a>
|
||||
</h3>
|
||||
{% if app.ports %}
|
||||
<div class="mt-2">
|
||||
<span class="badge bg-blue me-1">Ports:</span>
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if app.documentation %}
|
||||
<div class="mt-3">
|
||||
<h5>Documentation</h5>
|
||||
<div class="markdown-body">
|
||||
{{ app.documentation|markdown|safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-muted">No documentation available</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Documentation section -->
|
||||
<div class="card mt-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Documentation</h3>
|
||||
</div>
|
||||
|
|
@ -189,25 +128,103 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Applications section with collapsible cards -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Applications</h3>
|
||||
<div class="card-actions">
|
||||
<a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary me-2">
|
||||
<span class="ti ti-plus me-2"></span> Add Application
|
||||
</a>
|
||||
<button class="btn btn-outline-primary" id="toggle-all-apps">
|
||||
<span class="ti ti-chevrons-down me-1"></span> <span id="toggle-text">Expand All</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if server.apps %}
|
||||
<div class="accordion" id="accordionApps">
|
||||
{% 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 }}">
|
||||
<div class="d-flex justify-content-between align-items-center w-100 me-2">
|
||||
<span>{{ app.name }}</span>
|
||||
{% if app.ports %}
|
||||
<div>
|
||||
{% for port in app.ports %}
|
||||
<span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapse-{{ app.id }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ app.id }}"
|
||||
data-bs-parent="#accordionApps">
|
||||
<div class="accordion-body">
|
||||
<div class="d-flex justify-content-end mb-3">
|
||||
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}"
|
||||
class="btn btn-sm btn-outline-primary me-2">
|
||||
<span class="ti ti-eye me-1"></span> View
|
||||
</a>
|
||||
<a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
|
||||
class="btn btn-sm btn-outline-primary me-2">
|
||||
<span class="ti ti-edit me-1"></span> Edit
|
||||
</a>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="deleteApp('{{ app.id }}', '{{ app.name }}')">
|
||||
<span class="ti ti-trash me-1"></span> Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% if app.documentation %}
|
||||
<div class="markdown-content">
|
||||
{{ app.documentation|markdown|safe }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-muted">No documentation available</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 fade" id="deleteServerModal" tabindex="-1" aria-labelledby="deleteServerModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<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-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 class="modal-title">Are you sure?</div>
|
||||
<div>This will permanently delete the server "{{ server.hostname }}" and all associated applications and ports.
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
|
|
@ -216,20 +233,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete App Modal (created dynamically) -->
|
||||
<div class="modal fade" id="deleteAppModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<!-- Delete App Modal Template - Will be dynamically populated -->
|
||||
<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-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 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="deleteAppForm" method="POST">
|
||||
<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>
|
||||
|
|
@ -237,58 +251,68 @@
|
|||
</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();
|
||||
}
|
||||
|
||||
// Toggle expand/collapse all
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const toggleBtn = document.getElementById('toggle-all-apps');
|
||||
const toggleText = document.getElementById('toggle-text');
|
||||
let isExpanded = false;
|
||||
|
||||
toggleBtn.addEventListener('click', function () {
|
||||
const accordionButtons = document.querySelectorAll('.accordion-button');
|
||||
const accordionContents = document.querySelectorAll('.accordion-collapse');
|
||||
|
||||
isExpanded = !isExpanded;
|
||||
|
||||
if (isExpanded) {
|
||||
// Expand all
|
||||
accordionButtons.forEach(button => {
|
||||
button.classList.remove('collapsed');
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
accordionContents.forEach(content => {
|
||||
content.classList.add('show');
|
||||
});
|
||||
|
||||
toggleText.textContent = 'Collapse All';
|
||||
toggleBtn.querySelector('span:first-child').classList.remove('ti-chevrons-down');
|
||||
toggleBtn.querySelector('span:first-child').classList.add('ti-chevrons-up');
|
||||
} else {
|
||||
// Collapse all
|
||||
accordionButtons.forEach(button => {
|
||||
button.classList.add('collapsed');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
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>
|
||||
{% 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 %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue