263 lines
No EOL
9.6 KiB
HTML
263 lines
No EOL
9.6 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">
|
|
<h2 class="page-title">
|
|
{{ title }}
|
|
</h2>
|
|
<div class="text-muted mt-1">
|
|
{% if edit_mode %}Edit{% else %}Create{% endif %} application details and configure ports
|
|
</div>
|
|
</div>
|
|
<div class="col-auto ms-auto">
|
|
<div class="btn-list">
|
|
<a href="{{ dashboard_link }}" class="btn btn-outline-primary">
|
|
<span class="ti ti-dashboard"></span>
|
|
Dashboard
|
|
</a>
|
|
{% if edit_mode %}
|
|
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary">
|
|
<span class="ti ti-eye"></span>
|
|
View Application
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-body">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST"
|
|
action="{{ url_for('dashboard.app_edit', app_id=app.id) if edit_mode else url_for('dashboard.app_new') }}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label required">Application Name</label>
|
|
<input type="text" class="form-control" name="name" value="{{ app.name if app else '' }}" required
|
|
placeholder="Enter application name">
|
|
<small class="form-hint">Choose a unique name for this application</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label required">Server</label>
|
|
<select class="form-select" name="server_id" required>
|
|
<option value="">Select a server</option>
|
|
{% for server in servers %}
|
|
<option value="{{ server.id }}" {% if app and server.id==app.server_id %}selected{% endif %}>
|
|
{{ server.hostname }} ({{ server.ip_address }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small class="form-hint">Select the server where this application runs</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<label class="form-label mb-0">Application Ports</label>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="add-port-btn">
|
|
<span class="ti ti-plus"></span> Add Port
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="random-port-btn"
|
|
title="Generate random available port">
|
|
<span class="ti ti-dice"></span> Random Port
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-vcenter card-table" id="ports-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Port</th>
|
|
<th>Protocol</th>
|
|
<th>Description</th>
|
|
<th width="40"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if app and app.ports %}
|
|
{% for port in app.ports %}
|
|
<tr>
|
|
<td>
|
|
<input type="number" name="port_numbers[]" class="form-control" min="1" max="65535"
|
|
value="{{ port.port_number }}" required>
|
|
</td>
|
|
<td>
|
|
<select name="protocols[]" class="form-select">
|
|
<option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
|
|
<option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
|
|
<option value="SCTP" {% if port.protocol=='SCTP' %}selected{% endif %}>SCTP</option>
|
|
<option value="OTHER" {% if port.protocol=='OTHER' %}selected{% endif %}>OTHER</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="port_descriptions[]" class="form-control" value="{{ port.description }}"
|
|
placeholder="Description">
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
|
|
<span class="ti ti-trash"></span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<small class="form-hint">Configure the network ports used by this application</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Documentation</label>
|
|
<textarea class="form-control" name="documentation" id="documentation" rows="10"
|
|
placeholder="Enter documentation in Markdown format">{{ app.documentation if app else '' }}</textarea>
|
|
<small class="form-hint">
|
|
Use <a href="https://www.markdownguide.org/basic-syntax/" target="_blank">Markdown syntax</a>
|
|
to format your documentation. The content will be rendered when viewing the application.
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-footer">
|
|
<button type="submit" class="btn btn-primary">Save Application</button>
|
|
{% if edit_mode %}
|
|
<a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary ms-2">Cancel</a>
|
|
{% else %}
|
|
<a href="{{ dashboard_link }}" class="btn btn-outline-secondary ms-2">Cancel</a>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
{% if app and app.id %}
|
|
const appId = {{ app.id | tojson }};
|
|
{% else %}
|
|
const appId = null;
|
|
{% endif %}
|
|
|
|
// Initialize everything once the DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Connect port management buttons
|
|
const addPortBtn = document.getElementById('add-port-btn');
|
|
const randomPortBtn = document.getElementById('random-port-btn');
|
|
|
|
if (addPortBtn) {
|
|
addPortBtn.addEventListener('click', function () {
|
|
addPortRow();
|
|
});
|
|
}
|
|
|
|
if (randomPortBtn) {
|
|
randomPortBtn.addEventListener('click', function () {
|
|
generateRandomPort();
|
|
});
|
|
}
|
|
});
|
|
|
|
// Show notifications
|
|
function showNotification(message, type = 'info') {
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
`;
|
|
|
|
const container = document.querySelector('.card-body');
|
|
if (container) {
|
|
container.insertBefore(alertDiv, container.firstChild);
|
|
|
|
// Auto-dismiss after 5 seconds
|
|
setTimeout(() => {
|
|
alertDiv.classList.remove('show');
|
|
setTimeout(() => alertDiv.remove(), 150);
|
|
}, 5000);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
document.body.addEventListener('htmx:configRequest', (event) => {
|
|
event.detail.headers['X-CSRFToken'] = "{{ csrf_token() }}";
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// Port management functions
|
|
function addPortRow(portNumber = '', protocol = 'TCP', description = '') {
|
|
const tbody = document.querySelector('#ports-table tbody');
|
|
const newRow = document.createElement('tr');
|
|
newRow.innerHTML = `
|
|
<td>
|
|
<input type="number" name="port_numbers[]" class="form-control"
|
|
min="1" max="65535" value="${portNumber}" required>
|
|
</td>
|
|
<td>
|
|
<select name="protocols[]" class="form-select">
|
|
<option value="TCP" ${protocol === 'TCP' ? 'selected' : ''}>TCP</option>
|
|
<option value="UDP" ${protocol === 'UDP' ? 'selected' : ''}>UDP</option>
|
|
<option value="SCTP" ${protocol === 'SCTP' ? 'selected' : ''}>SCTP</option>
|
|
<option value="OTHER" ${protocol === 'OTHER' ? 'selected' : ''}>OTHER</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<input type="text" name="port_descriptions[]" class="form-control"
|
|
value="${description}" placeholder="Description">
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
|
|
<span class="ti ti-trash"></span>
|
|
</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(newRow);
|
|
}
|
|
|
|
function removePortRow(button) {
|
|
button.closest('tr').remove();
|
|
}
|
|
|
|
async function generateRandomPort() {
|
|
try {
|
|
const serverId = document.querySelector('select[name="server_id"]').value;
|
|
if (!serverId) {
|
|
showNotification('Please select a server first', 'warning');
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(`/api/servers/${serverId}/suggest_port`);
|
|
const data = await response.json();
|
|
|
|
if (data.port) {
|
|
addPortRow(data.port);
|
|
} else {
|
|
showNotification('No available ports found', 'warning');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error generating random port:', error);
|
|
showNotification('Failed to generate random port', 'danger');
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |