194 lines
7.0 KiB
HTML
194 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
|
|
<title>Docker Deployment Manager</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<header class="header">
|
|
<h1>Docker Deployment Manager</h1>
|
|
<div class="header-actions">
|
|
<button id="btn-refresh" class="btn btn-secondary">Refresh</button>
|
|
<button id="btn-settings" class="btn btn-secondary">Servers</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="server-bar">
|
|
<label>Server:</label>
|
|
<select id="server-select">
|
|
<option value="">-- Select Server --</option>
|
|
</select>
|
|
<button id="btn-scan-server" class="btn btn-primary" disabled>Scan Server</button>
|
|
<span id="server-status" class="status-badge"></span>
|
|
</div>
|
|
|
|
<main class="main">
|
|
<div class="projects-table-container">
|
|
<table class="projects-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Project</th>
|
|
<th>Local</th>
|
|
<th>Deployed</th>
|
|
<th>Running</th>
|
|
<th>Diff</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="projects-body">
|
|
<tr>
|
|
<td colspan="6" class="loading">Loading projects...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Server Modal -->
|
|
<div id="server-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Manage Servers</h2>
|
|
<button class="btn-close" id="close-server-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="server-list" class="server-list"></div>
|
|
<div class="server-form">
|
|
<h3>Add/Edit Server</h3>
|
|
<input type="hidden" id="server-id">
|
|
<div class="form-group">
|
|
<label>Name:</label>
|
|
<input type="text" id="server-name" placeholder="e.g., Production Server">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Host:</label>
|
|
<input type="text" id="server-host" placeholder="e.g., 192.168.69.4">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Username:</label>
|
|
<input type="text" id="server-username" placeholder="From .env (SSH_USERNAME)">
|
|
</div>
|
|
<div class="form-group checkbox-group">
|
|
<label>
|
|
<input type="checkbox" id="server-use-sudo">
|
|
Require sudo for Docker commands
|
|
</label>
|
|
</div>
|
|
<p class="hint">Username and password are read from .env file (SSH_USERNAME, SSH_PASSWORD)</p>
|
|
<button id="btn-save-server" class="btn btn-primary">Save Server</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Diff Modal -->
|
|
<div id="diff-modal" class="modal hidden">
|
|
<div class="modal-content modal-wide">
|
|
<div class="modal-header">
|
|
<h2>File Comparison: <span id="diff-project-name"></span></h2>
|
|
<button class="btn-close" id="close-diff-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="diff-section">
|
|
<h3>docker-compose.yml</h3>
|
|
<div class="diff-status" id="diff-compose-status"></div>
|
|
<div class="diff-container">
|
|
<div class="diff-panel">
|
|
<h4>Local</h4>
|
|
<pre id="diff-compose-local"></pre>
|
|
</div>
|
|
<div class="diff-panel">
|
|
<h4>Remote</h4>
|
|
<pre id="diff-compose-remote"></pre>
|
|
</div>
|
|
</div>
|
|
<div class="diff-actions">
|
|
<button id="btn-pull-compose" class="btn btn-secondary">Pull from Server</button>
|
|
<button id="btn-push-compose" class="btn btn-primary">Push to Server</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Modal -->
|
|
<div id="log-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Action Log</h2>
|
|
<button class="btn-close" id="close-log-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<pre id="log-content" class="log-output"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Details Modal (Missing Files) -->
|
|
<div id="details-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Project Status: <span id="details-project-name"></span></h2>
|
|
<button class="btn-close" id="close-details-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="details-section">
|
|
<h3>Required Files</h3>
|
|
<div id="details-files-list" class="file-checklist"></div>
|
|
</div>
|
|
<div class="details-section">
|
|
<h3>How to Fix</h3>
|
|
<div id="details-fix-instructions" class="fix-instructions"></div>
|
|
</div>
|
|
<div class="details-actions">
|
|
<button id="btn-init-project" class="btn btn-primary">Run CLI Init</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deploy Confirmation Modal -->
|
|
<div id="deploy-confirm-modal" class="modal hidden">
|
|
<div class="modal-content modal-wide">
|
|
<div class="modal-header">
|
|
<h2>Confirm Deployment: <span id="deploy-confirm-project"></span></h2>
|
|
<button class="btn-close" id="close-deploy-confirm">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="deploy-diff-summary" class="deploy-diff-summary"></div>
|
|
<div id="deploy-diff-details" class="deploy-diff-details"></div>
|
|
<div class="deploy-confirm-actions">
|
|
<button id="btn-deploy-continue" class="btn btn-primary">Continue (Overwrite Remote)</button>
|
|
<button id="btn-deploy-abort" class="btn btn-secondary">Abort</button>
|
|
<button id="btn-deploy-vscode" class="btn btn-secondary">View in VS Code</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Container Logs Modal -->
|
|
<div id="logs-modal" class="modal hidden">
|
|
<div class="modal-content modal-wide">
|
|
<div class="modal-header">
|
|
<h2>Container Logs: <span id="logs-container-name"></span></h2>
|
|
<button class="btn-close" id="close-logs-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="logs-controls">
|
|
<button id="btn-refresh-logs" class="btn btn-secondary btn-small">Refresh</button>
|
|
<span class="logs-hint">Last 100 lines</span>
|
|
</div>
|
|
<pre id="logs-content" class="log-output"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|