wip
This commit is contained in:
pika
parent
9433d9d235
commit
7b6837cf96
7 changed files with 370 additions and 63 deletions
Binary file not shown.
|
|
@ -325,4 +325,41 @@ def get_subnet_servers(subnet_id):
|
|||
'id': server.id,
|
||||
'hostname': server.hostname,
|
||||
'ip_address': server.ip_address
|
||||
} for server in servers])
|
||||
} for server in servers])
|
||||
|
||||
@bp.route('/server/<int:server_id>/ports', methods=['GET'])
|
||||
@login_required
|
||||
def get_server_ports(server_id):
|
||||
"""Get all used ports for a server"""
|
||||
server = Server.query.get_or_404(server_id)
|
||||
|
||||
# Get all ports associated with this server
|
||||
ports = Port.query.filter_by(server_id=server_id).all()
|
||||
used_ports = [port.number for port in ports]
|
||||
|
||||
return jsonify({
|
||||
'server_id': server_id,
|
||||
'used_ports': used_ports
|
||||
})
|
||||
|
||||
@bp.route('/server/<int:server_id>/free-port', methods=['GET'])
|
||||
@login_required
|
||||
def get_free_port(server_id):
|
||||
"""Find a free port for a server"""
|
||||
server = Server.query.get_or_404(server_id)
|
||||
|
||||
# Get all ports associated with this server
|
||||
used_ports = [port.number for port in Port.query.filter_by(server_id=server_id).all()]
|
||||
|
||||
# Find the first free port (starting from 8000)
|
||||
for port_number in range(8000, 9000):
|
||||
if port_number not in used_ports:
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'port': port_number
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': False,
|
||||
'error': 'No free ports available in the range 8000-9000'
|
||||
})
|
||||
181
app/static/js/ports.js
Normal file
181
app/static/js/ports.js
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize the compact port display
|
||||
initPortDisplay();
|
||||
|
||||
// Add event listener for copy buttons
|
||||
document.addEventListener('click', function (e) {
|
||||
if (e.target.classList.contains('copy-port')) {
|
||||
const port = e.target.dataset.port;
|
||||
copyToClipboard(port);
|
||||
|
||||
// Visual feedback
|
||||
const originalText = e.target.innerHTML;
|
||||
e.target.innerHTML = '<span class="ti ti-check"></span>';
|
||||
setTimeout(() => {
|
||||
e.target.innerHTML = originalText;
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
// Get free port button
|
||||
const getFreePortBtn = document.getElementById('get-free-port');
|
||||
if (getFreePortBtn) {
|
||||
getFreePortBtn.addEventListener('click', function () {
|
||||
fetch(`/api/server/${serverId}/free-port`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
copyToClipboard(data.port);
|
||||
showNotification('success', `Free port ${data.port} copied to clipboard`);
|
||||
} else {
|
||||
showNotification('error', data.error || 'Error finding free port');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showNotification('error', 'Failed to get free port');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function initPortDisplay() {
|
||||
const portRangesContainer = document.getElementById('port-ranges');
|
||||
const usedPortsList = document.getElementById('used-ports-list');
|
||||
|
||||
if (!portRangesContainer || !usedPortsList) return;
|
||||
|
||||
// Get port usage data from server
|
||||
fetch(`/api/server/${serverId}/ports`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Process the data and organize into ranges
|
||||
const usedPorts = data.used_ports || [];
|
||||
const ranges = generatePortRanges(usedPorts);
|
||||
|
||||
// Render port ranges visualization
|
||||
renderPortRanges(ranges, portRangesContainer);
|
||||
|
||||
// Render list of used ports with copy buttons
|
||||
renderUsedPorts(usedPorts, usedPortsList);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching port data:', error);
|
||||
portRangesContainer.innerHTML = '<div class="alert alert-danger">Failed to load port data</div>';
|
||||
});
|
||||
}
|
||||
|
||||
function generatePortRanges(usedPorts) {
|
||||
// Create a simplified representation of port ranges
|
||||
const ranges = [];
|
||||
const portMax = 9100;
|
||||
const segmentSize = 100;
|
||||
|
||||
for (let i = 0; i < portMax; i += segmentSize) {
|
||||
const start = i;
|
||||
const end = Math.min(i + segmentSize - 1, portMax);
|
||||
|
||||
// Count used ports in this range
|
||||
const usedCount = usedPorts.filter(port => port >= start && port <= end).length;
|
||||
const percentageUsed = (usedCount / segmentSize) * 100;
|
||||
|
||||
ranges.push({
|
||||
start,
|
||||
end,
|
||||
percentageUsed,
|
||||
isEmpty: usedCount === 0,
|
||||
isFull: usedCount === segmentSize
|
||||
});
|
||||
}
|
||||
|
||||
return ranges;
|
||||
}
|
||||
|
||||
function renderPortRanges(ranges, container) {
|
||||
let html = '';
|
||||
|
||||
ranges.forEach(range => {
|
||||
const width = (range.end - range.start + 1) / 91; // Calculate relative width
|
||||
const cssClass = range.percentageUsed > 0 ? 'port-range-used' : 'port-range-free';
|
||||
|
||||
html += `<div
|
||||
class="port-range ${cssClass}"
|
||||
style="flex-grow: ${width};"
|
||||
title="${range.start}-${range.end}: ${range.percentageUsed.toFixed(1)}% used"
|
||||
></div>`;
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function renderUsedPorts(usedPorts, container) {
|
||||
if (usedPorts.length === 0) {
|
||||
container.innerHTML = '<div class="text-muted">No ports in use</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
usedPorts.sort((a, b) => a - b).forEach(port => {
|
||||
html += `
|
||||
<div class="used-port-tag">
|
||||
${port}
|
||||
<span class="ti ti-copy copy-port" data-port="${port}" title="Copy port"></span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function copyToClipboard(text) {
|
||||
// Use modern clipboard API with fallback
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text)
|
||||
.catch(err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
fallbackCopyToClipboard(text);
|
||||
});
|
||||
} else {
|
||||
fallbackCopyToClipboard(text);
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopyToClipboard(text) {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
} catch (err) {
|
||||
console.error('Fallback copy failed:', err);
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
function showNotification(type, message) {
|
||||
const notificationArea = document.getElementById('notification-area');
|
||||
if (!notificationArea) return;
|
||||
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show notification`;
|
||||
notification.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
`;
|
||||
|
||||
notificationArea.appendChild(notification);
|
||||
|
||||
// Auto dismiss after 5 seconds
|
||||
setTimeout(() => {
|
||||
notification.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
notificationArea.removeChild(notification);
|
||||
}, 300);
|
||||
}, 5000);
|
||||
}
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
</div>
|
||||
<div class="card-body markdown-content">
|
||||
{% if app.documentation %}
|
||||
{{ app.documentation|markdown|safe }}
|
||||
{{ app.documentation|markdown }}
|
||||
{% else %}
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
<div class="modal" id="addPortModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<form method="POST" action="{{ url_for('api.add_port', app_id=app.id) }}">
|
||||
<form method="POST" action="{{ url_for('api.add_app_port', app_id=app.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Add Port</h5>
|
||||
|
|
@ -220,4 +220,4 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -54,47 +54,29 @@
|
|||
</div>
|
||||
|
||||
<!-- Port Usage Map -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header d-flex align-items-center">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between 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>
|
||||
<button class="btn btn-sm btn-outline-primary" id="get-free-port">Get Free Port</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<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 class="port-usage-compact">
|
||||
<div class="port-legend mb-3">
|
||||
<span class="port-indicator port-free me-2"></span> Free
|
||||
<span class="port-indicator port-used ms-3 me-2"></span> Used
|
||||
</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 id="port-ranges" class="port-ranges">
|
||||
<!-- Port ranges will be rendered here -->
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<h4 class="h5">Used Ports</h4>
|
||||
<div id="used-ports-list" class="used-ports-list">
|
||||
<!-- Used ports will be listed here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -317,34 +299,70 @@
|
|||
|
||||
{% block styles %}
|
||||
<style>
|
||||
.port-map {
|
||||
overflow-x: auto;
|
||||
.port-usage-compact {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.port-map-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
gap: 4px;
|
||||
.port-ranges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.port-item {
|
||||
padding: 4px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.port-range {
|
||||
height: 12px;
|
||||
flex-grow: 1;
|
||||
min-width: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.port-item:hover {
|
||||
opacity: 0.8;
|
||||
.port-range-free {
|
||||
background-color: rgba(25, 135, 84, 0.4);
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
padding: 1rem;
|
||||
background-color: var(--tblr-bg-surface);
|
||||
border: 1px solid var(--tblr-border-color);
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
@ -140,6 +140,45 @@
|
|||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Navigation bar theming */
|
||||
.navbar {
|
||||
background-color: var(--bs-body-bg) !important;
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.navbar .navbar-brand,
|
||||
.navbar .nav-link,
|
||||
.navbar .dropdown-toggle {
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
|
||||
/* Markdown styling for better contrast in dark mode */
|
||||
[data-bs-theme="dark"] .markdown-content {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-content h1,
|
||||
[data-bs-theme="dark"] .markdown-content h2,
|
||||
[data-bs-theme="dark"] .markdown-content h3,
|
||||
[data-bs-theme="dark"] .markdown-content h4,
|
||||
[data-bs-theme="dark"] .markdown-content h5,
|
||||
[data-bs-theme="dark"] .markdown-content h6 {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-content code {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-content pre {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-content a {
|
||||
color: #6ea8fe;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -228,10 +267,10 @@
|
|||
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ms-auto me-3">
|
||||
<button class="btn btn-icon" id="theme-toggle" aria-label="Toggle theme">
|
||||
<span class="ti ti-moon theme-icon-light"></span>
|
||||
<span class="ti ti-sun theme-icon-dark"></span>
|
||||
<div class="nav-item ms-2">
|
||||
<button id="theme-toggle" class="btn btn-icon" aria-label="Toggle theme">
|
||||
<span class="ti ti-moon dark-icon d-none"></span>
|
||||
<span class="ti ti-sun light-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -458,6 +497,38 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const darkIcon = document.querySelector('.dark-icon');
|
||||
const lightIcon = document.querySelector('.light-icon');
|
||||
|
||||
// Set initial icon state
|
||||
updateThemeIcon();
|
||||
|
||||
function updateThemeIcon() {
|
||||
const currentTheme = localStorage.getItem('theme') ||
|
||||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||
|
||||
if (currentTheme === 'dark') {
|
||||
darkIcon.classList.remove('d-none');
|
||||
lightIcon.classList.add('d-none');
|
||||
} else {
|
||||
darkIcon.classList.add('d-none');
|
||||
lightIcon.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', function () {
|
||||
const currentTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
document.documentElement.setAttribute('data-bs-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
updateThemeIcon();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
|
|
|
|||
BIN
instance/app.db
BIN
instance/app.db
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue