6124 lines
232 KiB
HTML
6124 lines
232 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Docker P2P Manager</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- xterm.css for Terminal -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css">
|
|
|
|
<!-- Chart.js for Stats Visualization -->
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
|
|
|
|
<style>
|
|
/* Modern CSS Variables for Dark Theme */
|
|
:root {
|
|
/* Color Palette - Modern Dark Theme */
|
|
--bg-primary: #0f1117;
|
|
--bg-secondary: #161b22;
|
|
--bg-tertiary: #1c2128;
|
|
--bg-elevated: #22272e;
|
|
--bg-hover: #2d333b;
|
|
|
|
/* Accent Colors - Modern Teal Theme */
|
|
--accent-primary: #2dd4bf;
|
|
--accent-secondary: #14b8a6;
|
|
--accent-success: #4ade80;
|
|
--accent-warning: #fbbf24;
|
|
--accent-danger: #f87171;
|
|
--accent-info: #38bdf8;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #e6edf3;
|
|
--text-secondary: #adbac7;
|
|
--text-muted: #768390;
|
|
|
|
/* Border & Divider */
|
|
--border-color: rgba(255, 255, 255, 0.1);
|
|
--border-radius: 12px;
|
|
--border-radius-sm: 8px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 250ms ease;
|
|
--transition-slow: 350ms ease;
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
height: 100vh;
|
|
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Inter', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.65;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#titlebar {
|
|
-webkit-app-region: drag;
|
|
height: 35px;
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
|
|
border-bottom: 1px solid var(--border-color);
|
|
z-index: 1000;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
pear-ctrl[data-platform="darwin"] {
|
|
float: left;
|
|
margin-top: 6px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
#sidebar {
|
|
position: fixed;
|
|
top: 35px;
|
|
left: 0;
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border-color);
|
|
height: calc(100vh - 35px);
|
|
width: 280px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
transition: width var(--transition-base), box-shadow var(--transition-base);
|
|
box-shadow: var(--shadow-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#sidebar.collapsed {
|
|
width: 60px;
|
|
}
|
|
|
|
#sidebar.collapsed .content {
|
|
display: none;
|
|
}
|
|
|
|
#collapse-sidebar-btn {
|
|
position: absolute;
|
|
top: var(--spacing-md);
|
|
right: var(--spacing-md);
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#collapse-sidebar-btn:hover {
|
|
background: var(--bg-elevated);
|
|
transform: scale(1.05);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
#content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 280px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
background: var(--bg-primary);
|
|
transition: margin-left var(--transition-base);
|
|
}
|
|
|
|
#sidebar.collapsed~#content {
|
|
margin-left: 60px;
|
|
}
|
|
|
|
.connection-status {
|
|
border-radius: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
display: inline-block;
|
|
margin-right: var(--spacing-sm);
|
|
box-shadow: 0 0 8px currentColor;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.status-connected {
|
|
background-color: var(--accent-success);
|
|
color: var(--accent-success);
|
|
}
|
|
|
|
.status-disconnected {
|
|
background-color: var(--accent-danger);
|
|
color: var(--accent-danger);
|
|
animation: none;
|
|
}
|
|
|
|
#terminal-modal {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
height: 300px;
|
|
background: var(--bg-secondary);
|
|
border-top: 1px solid var(--border-color);
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
|
|
display: none;
|
|
flex-direction: column;
|
|
z-index: 1000;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
#terminal-modal .header {
|
|
background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
|
|
cursor: move;
|
|
padding: var(--spacing-md);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
#terminal-resize-handle {
|
|
width: 100%;
|
|
height: 8px;
|
|
cursor: ns-resize;
|
|
background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0.3;
|
|
transition: opacity var(--transition-fast);
|
|
}
|
|
|
|
#terminal-resize-handle:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#terminal-container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
#tray {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: var(--bg-elevated);
|
|
border-top: 1px solid var(--border-color);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
z-index: 999;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
#tray .tray-item {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: var(--border-radius-sm);
|
|
cursor: pointer;
|
|
border: 1px solid var(--border-color);
|
|
transition: all var(--transition-fast);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#tray .tray-item:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
#status-indicator {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(15, 17, 23, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 1050;
|
|
}
|
|
|
|
#status-indicator .spinner-border {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-width: 0.3rem;
|
|
border-color: var(--accent-primary);
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
#status-indicator p {
|
|
margin-top: var(--spacing-lg);
|
|
color: var(--text-primary);
|
|
font-size: 1.125rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Sidebar Content Styling */
|
|
#sidebar .content {
|
|
padding: var(--spacing-lg);
|
|
flex: 1;
|
|
}
|
|
|
|
#sidebar .content h4 {
|
|
color: var(--text-primary);
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
/* Connection List Item Styling */
|
|
#connection-list .list-group-item {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
margin-bottom: var(--spacing-sm);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--border-radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
}
|
|
|
|
#connection-list .list-group-item:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
transform: translateX(4px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
#connection-list .list-group-item.active {
|
|
background: linear-gradient(135deg, rgba(45, 212, 191, 0.2) 0%, rgba(20, 184, 166, 0.2) 100%);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
/* Navigation Menu */
|
|
.nav-menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 var(--spacing-lg) 0;
|
|
}
|
|
|
|
.nav-item {
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
border-radius: var(--border-radius-sm);
|
|
transition: all var(--transition-fast);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: linear-gradient(90deg, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0.1) 100%);
|
|
color: var(--accent-primary);
|
|
border-left: 3px solid var(--accent-primary);
|
|
}
|
|
|
|
.nav-link i {
|
|
width: 20px;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.nav-label {
|
|
flex: 1;
|
|
}
|
|
|
|
.sidebar-divider {
|
|
border-color: var(--border-color);
|
|
margin: var(--spacing-md) 0;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Image Filter Buttons */
|
|
.image-filter-btn {
|
|
border-color: var(--accent-primary);
|
|
color: var(--accent-primary);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.image-filter-btn:hover {
|
|
background: rgba(45, 212, 191, 0.1);
|
|
border-color: var(--accent-primary);
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.image-filter-btn.active {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
#sidebar.collapsed .nav-label {
|
|
display: none;
|
|
}
|
|
|
|
#sidebar.collapsed .nav-link {
|
|
justify-content: center;
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
/* View Management */
|
|
.view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
width: 100%;
|
|
margin-top: 35px;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.view.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide horizontal scrollbar in deploy view */
|
|
#deploy-view {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Hide horizontal scrollbar in template list container */
|
|
#deploy-template-list-container {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* Prevent horizontal overflow in template list */
|
|
#deploy-template-list-container .list-group {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#deploy-template-list-container .list-group-item {
|
|
overflow-x: hidden;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Dashboard Styles */
|
|
.stat-card {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.stat-card-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--border-radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stat-card-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-card-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
line-height: 1;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.stat-card-label {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.info-card {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-lg);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.info-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.info-card-title {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-size: 1.125rem;
|
|
margin-bottom: var(--spacing-md);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.info-card-body {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.info-card-body .key-value {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-sm) 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.info-card-body .key-value:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-card-body .key {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.info-card-body .value {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Enhanced Container Details Styles */
|
|
.detail-section-card {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-lg);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.detail-section-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.detail-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-md);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-section-header i {
|
|
color: var(--accent-primary);
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.detail-section-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.detail-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: var(--spacing-md);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.detail-info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.detail-info-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.detail-info-label i {
|
|
font-size: 0.875rem;
|
|
color: var(--accent-info);
|
|
}
|
|
|
|
.detail-info-value {
|
|
font-size: 0.9375rem;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
word-break: break-word;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.detail-info-value code {
|
|
background: var(--bg-primary);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
color: var(--accent-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.detail-badge.status-running {
|
|
background: rgba(81, 207, 102, 0.2);
|
|
color: var(--accent-success);
|
|
border: 1px solid rgba(81, 207, 102, 0.3);
|
|
}
|
|
|
|
.detail-badge.status-exited {
|
|
background: rgba(255, 107, 107, 0.2);
|
|
color: var(--accent-danger);
|
|
border: 1px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.detail-badge.status-paused {
|
|
background: rgba(255, 212, 59, 0.2);
|
|
color: var(--accent-warning);
|
|
border: 1px solid rgba(255, 212, 59, 0.3);
|
|
}
|
|
|
|
.detail-badge.status-restarting {
|
|
background: rgba(116, 192, 252, 0.2);
|
|
color: var(--accent-info);
|
|
border: 1px solid rgba(116, 192, 252, 0.3);
|
|
}
|
|
|
|
.copy-btn {
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
transition: all var(--transition-fast);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-left: var(--spacing-xs);
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: var(--accent-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.copy-btn i {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.detail-code-block {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-md);
|
|
margin-top: var(--spacing-sm);
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.detail-code-block .copy-btn {
|
|
position: absolute;
|
|
top: var(--spacing-sm);
|
|
right: var(--spacing-sm);
|
|
}
|
|
|
|
.detail-code-block pre {
|
|
margin: 0;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.detail-code-block code {
|
|
background: transparent;
|
|
padding: 0;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.detail-env-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.detail-env-table th,
|
|
.detail-env-table td {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-env-table th {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-size: 0.8125rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.detail-env-table td {
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.detail-env-table tr:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.detail-env-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.network-card {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-md);
|
|
margin-bottom: var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.network-card:hover {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.network-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--spacing-md);
|
|
padding-bottom: var(--spacing-sm);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.network-card-title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.network-card-title i {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.port-mapping-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.port-mapping-table th,
|
|
.port-mapping-table td {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.port-mapping-table th {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.port-mapping-table td {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.port-mapping-table tr:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.port-mapping-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.protocol-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.protocol-badge.tcp {
|
|
background: rgba(56, 189, 248, 0.2);
|
|
color: var(--accent-info);
|
|
border: 1px solid rgba(56, 189, 248, 0.3);
|
|
}
|
|
|
|
.protocol-badge.udp {
|
|
background: rgba(45, 212, 191, 0.2);
|
|
color: var(--accent-primary);
|
|
border: 1px solid rgba(45, 212, 191, 0.3);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--spacing-xl);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 2rem;
|
|
margin-bottom: var(--spacing-md);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.detail-stat-card {
|
|
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-elevated) 100%);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.detail-stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.detail-stat-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--border-radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-stat-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.detail-stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
line-height: 1;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.detail-stat-label {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.relative-time {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Logs Tab Styles */
|
|
.logs-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-tertiary);
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.logs-toolbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
flex: 1;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.logs-toolbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.logs-search-container {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.logs-search-icon {
|
|
position: absolute;
|
|
left: var(--spacing-sm);
|
|
color: var(--text-muted);
|
|
z-index: 1;
|
|
}
|
|
|
|
.logs-search-input {
|
|
width: 100%;
|
|
padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 32px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-primary);
|
|
font-size: 0.875rem;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.logs-search-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
.logs-clear-search {
|
|
position: absolute;
|
|
right: var(--spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logs-clear-search:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.logs-filter-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.logs-filter-btn {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.logs-filter-btn:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.logs-filter-btn.active {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.logs-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.logs-toggle-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
user-select: none;
|
|
}
|
|
|
|
.logs-toggle-label:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.logs-toggle-label input[type="checkbox"] {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.logs-control-btn {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.logs-control-btn:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.logs-container {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6;
|
|
background: var(--bg-primary);
|
|
padding: var(--spacing-md);
|
|
position: relative;
|
|
}
|
|
|
|
.logs-container::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.logs-container::-webkit-scrollbar-track {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.logs-container::-webkit-scrollbar-thumb {
|
|
background: var(--bg-hover);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.logs-container::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-primary);
|
|
}
|
|
|
|
.logs-loading {
|
|
padding: var(--spacing-xl);
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.log-line {
|
|
padding: 2px 0;
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
border-left: 3px solid transparent;
|
|
padding-left: var(--spacing-sm);
|
|
margin-left: var(--spacing-xs);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.log-line:hover {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.log-line.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.log-line.highlight {
|
|
background: rgba(255, 212, 59, 0.15);
|
|
border-left-color: var(--accent-warning);
|
|
}
|
|
|
|
.log-line.error,
|
|
.log-line[data-level="error"] {
|
|
color: var(--accent-danger);
|
|
border-left-color: var(--accent-danger);
|
|
}
|
|
|
|
.log-line.warn,
|
|
.log-line[data-level="warn"] {
|
|
color: var(--accent-warning);
|
|
border-left-color: var(--accent-warning);
|
|
}
|
|
|
|
.log-line.info,
|
|
.log-line[data-level="info"] {
|
|
color: var(--accent-info);
|
|
border-left-color: var(--accent-info);
|
|
}
|
|
|
|
.log-line.debug,
|
|
.log-line[data-level="debug"] {
|
|
color: var(--text-muted);
|
|
border-left-color: var(--text-muted);
|
|
}
|
|
|
|
.log-line.stdout {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.log-line.stderr {
|
|
color: var(--accent-danger);
|
|
}
|
|
|
|
.log-timestamp {
|
|
color: var(--text-muted);
|
|
margin-right: var(--spacing-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.log-level-badge {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-right: var(--spacing-sm);
|
|
}
|
|
|
|
.log-level-badge.error {
|
|
background: rgba(255, 107, 107, 0.2);
|
|
color: var(--accent-danger);
|
|
}
|
|
|
|
.log-level-badge.warn {
|
|
background: rgba(255, 212, 59, 0.2);
|
|
color: var(--accent-warning);
|
|
}
|
|
|
|
.log-level-badge.info {
|
|
background: rgba(116, 192, 252, 0.2);
|
|
color: var(--accent-info);
|
|
}
|
|
|
|
.log-level-badge.debug {
|
|
background: rgba(173, 181, 189, 0.2);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Terminal Styles */
|
|
.terminal-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-tertiary);
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.terminal-toolbar-left,
|
|
.terminal-toolbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.terminal-controls-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.terminal-controls-divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: var(--border-color);
|
|
margin: 0 var(--spacing-xs);
|
|
}
|
|
|
|
.terminal-control-btn {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.terminal-control-btn:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.terminal-font-size {
|
|
min-width: 30px;
|
|
text-align: center;
|
|
color: var(--text-primary);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.terminal-theme-select {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-primary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.terminal-theme-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
.terminal-container-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 600px;
|
|
background: var(--bg-primary);
|
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.terminal-xterm-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.terminal-xterm-container .xterm {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.terminal-xterm-container .xterm-viewport {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.terminal-xterm-container .xterm-screen {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Terminal Theme Variants */
|
|
.terminal-theme-dark {
|
|
--term-bg: #000000;
|
|
--term-fg: #ffffff;
|
|
--term-cursor: #ffffff;
|
|
--term-selection: #4d4d4d;
|
|
}
|
|
|
|
.terminal-theme-light {
|
|
--term-bg: #ffffff;
|
|
--term-fg: #000000;
|
|
--term-cursor: #000000;
|
|
--term-selection: #b3d4fc;
|
|
}
|
|
|
|
.terminal-theme-solarized-dark {
|
|
--term-bg: #002b36;
|
|
--term-fg: #839496;
|
|
--term-cursor: #93a1a1;
|
|
--term-selection: #073642;
|
|
}
|
|
|
|
.terminal-theme-solarized-light {
|
|
--term-bg: #fdf6e3;
|
|
--term-fg: #657b83;
|
|
--term-cursor: #586e75;
|
|
--term-selection: #eee8d5;
|
|
}
|
|
|
|
.terminal-theme-monokai {
|
|
--term-bg: #272822;
|
|
--term-fg: #f8f8f2;
|
|
--term-cursor: #f8f8f0;
|
|
--term-selection: #49483e;
|
|
}
|
|
|
|
/* Connection Name Styling */
|
|
.connection-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-size: 0.9375rem;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
/* Add Connection Form */
|
|
#add-connection-form {
|
|
margin-top: var(--spacing-lg);
|
|
padding-top: var(--spacing-lg);
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
#add-connection-form .form-control {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
#add-connection-form .form-control:focus {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
#add-connection-form .btn-primary {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Filter and Search Bar Styling */
|
|
#container-search,
|
|
#container-status-filter,
|
|
#container-sort {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
#container-search:focus,
|
|
#container-status-filter:focus,
|
|
#container-sort:focus {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
#clear-filters {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
#welcome-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
max-width: 700px;
|
|
width: 90%;
|
|
padding: var(--spacing-xl);
|
|
background: linear-gradient(135deg, rgba(45, 212, 191, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--border-color);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: var(--shadow-xl);
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -40%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
#welcome-page h1 {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: var(--spacing-md);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
#welcome-page p {
|
|
font-size: 1.125rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--spacing-sm);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
#welcome-page.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#dashboard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
width: 100%;
|
|
margin-top: 35px;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
#dashboard.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#alert-container {
|
|
position: fixed;
|
|
top: 50px;
|
|
right: var(--spacing-lg);
|
|
z-index: 1055;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
pointer-events: none;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.alert {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
box-shadow: var(--shadow-xl);
|
|
font-size: 14px;
|
|
animation: slideInRight 0.3s ease-out, fadeOut 4.5s ease-in forwards;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
pointer-events: auto;
|
|
border: 1px solid var(--border-color);
|
|
backdrop-filter: blur(10px);
|
|
min-width: 300px;
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0%, 90% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
.alert.success {
|
|
border-left: 4px solid var(--accent-success);
|
|
background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, var(--bg-elevated) 100%);
|
|
}
|
|
|
|
.alert.danger {
|
|
border-left: 4px solid var(--accent-danger);
|
|
background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-elevated) 100%);
|
|
}
|
|
|
|
.alert.info {
|
|
border-left: 4px solid var(--accent-info);
|
|
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, var(--bg-elevated) 100%);
|
|
}
|
|
|
|
.alert.warning {
|
|
border-left: 4px solid var(--accent-warning);
|
|
background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, var(--bg-elevated) 100%);
|
|
}
|
|
|
|
.alert .close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
margin-left: var(--spacing-md);
|
|
padding: var(--spacing-xs);
|
|
border-radius: var(--border-radius-sm);
|
|
transition: all var(--transition-fast);
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.alert .close-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Notification Tray Styles */
|
|
.notification-tray {
|
|
position: relative;
|
|
z-index: 1060;
|
|
}
|
|
|
|
.notification-tray-toggle {
|
|
position: relative;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-md);
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
color: var(--text-primary);
|
|
box-shadow: var(--shadow-md);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.notification-tray-toggle:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.notification-tray-toggle i {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
background: var(--accent-danger);
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
border: 2px solid var(--bg-primary);
|
|
min-width: 20px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.notification-badge:empty {
|
|
display: none;
|
|
}
|
|
|
|
.notification-panel {
|
|
position: absolute;
|
|
top: calc(100% + var(--spacing-sm));
|
|
right: 0;
|
|
width: 400px;
|
|
max-width: calc(100vw - 2 * var(--spacing-lg));
|
|
max-height: 600px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-md);
|
|
box-shadow: var(--shadow-xl);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
animation: slideDown 0.3s ease-out;
|
|
z-index: 1061;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.notification-panel::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
.notification-panel.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.notification-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.notification-panel-title {
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.notification-panel-actions {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.notification-action-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: var(--spacing-xs);
|
|
border-radius: var(--border-radius-sm);
|
|
transition: all var(--transition-fast);
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.notification-action-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.notification-filters {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
overflow-x: auto;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.notification-filters::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
.notification-filter-btn {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
border-radius: var(--border-radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.notification-filter-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.notification-filter-btn.active {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
color: white;
|
|
}
|
|
|
|
.notification-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--spacing-sm);
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.notification-list::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
.notification-item {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-md);
|
|
margin-bottom: var(--spacing-sm);
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
animation: slideInRight 0.3s ease-out;
|
|
}
|
|
|
|
.notification-item:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateX(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.notification-item.unread {
|
|
border-left: 4px solid var(--accent-primary);
|
|
background: linear-gradient(90deg, rgba(45, 212, 191, 0.1) 0%, var(--bg-tertiary) 100%);
|
|
}
|
|
|
|
.notification-item.unread:hover {
|
|
background: linear-gradient(90deg, rgba(45, 212, 191, 0.15) 0%, var(--bg-hover) 100%);
|
|
}
|
|
|
|
.notification-icon {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.notification-item.success .notification-icon {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: var(--accent-success);
|
|
}
|
|
|
|
.notification-item.danger .notification-icon {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: var(--accent-danger);
|
|
}
|
|
|
|
.notification-item.warning .notification-icon {
|
|
background: rgba(245, 158, 11, 0.2);
|
|
color: var(--accent-warning);
|
|
}
|
|
|
|
.notification-item.info .notification-icon {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: var(--accent-info);
|
|
}
|
|
|
|
.notification-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.notification-message {
|
|
color: var(--text-primary);
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
margin: 0 0 var(--spacing-xs) 0;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.notification-timestamp {
|
|
color: var(--text-secondary);
|
|
font-size: 0.75rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.notification-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notification-action {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: var(--spacing-xs);
|
|
border-radius: var(--border-radius-sm);
|
|
transition: all var(--transition-fast);
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.notification-action:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.notification-empty {
|
|
text-align: center;
|
|
padding: var(--spacing-xl);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.notification-empty i {
|
|
font-size: 3rem;
|
|
margin-bottom: var(--spacing-md);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.notification-empty p {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#alert-container {
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.alert {
|
|
max-width: 90%;
|
|
font-size: 12px;
|
|
padding: 10px 15px;
|
|
white-space: normal;
|
|
/* Allow wrapping on small screens */
|
|
text-overflow: clip;
|
|
/* Disable ellipsis when wrapping */
|
|
}
|
|
|
|
.notification-tray {
|
|
position: relative;
|
|
}
|
|
|
|
.notification-tray-toggle {
|
|
width: 40px;
|
|
height: 40px;
|
|
min-width: 40px;
|
|
}
|
|
|
|
.notification-tray-toggle i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.notification-panel {
|
|
width: calc(100vw - 2 * var(--spacing-sm));
|
|
max-height: calc(100vh - 80px);
|
|
right: 0;
|
|
}
|
|
|
|
.notification-panel-header {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
.notification-panel-title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.notification-filters {
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
}
|
|
|
|
.notification-filter-btn {
|
|
font-size: 0.75rem;
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
}
|
|
|
|
.notification-item {
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
.notification-message {
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.alert {
|
|
white-space: nowrap;
|
|
/* Re-enable nowrap for larger screens */
|
|
text-overflow: ellipsis;
|
|
/* Add ellipsis for overflowed text */
|
|
}
|
|
}
|
|
|
|
#sidebar.collapsed .btn-danger {
|
|
display: none;
|
|
}
|
|
|
|
/* Skeleton loader styles */
|
|
.skeleton {
|
|
background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s ease-in-out infinite;
|
|
border-radius: var(--border-radius-sm);
|
|
height: 20px;
|
|
}
|
|
|
|
.skeleton-text {
|
|
width: 60%;
|
|
}
|
|
|
|
.skeleton-number {
|
|
width: 40px;
|
|
}
|
|
|
|
.skeleton-badge {
|
|
width: 80px;
|
|
height: 24px;
|
|
}
|
|
|
|
.skeleton-buttons {
|
|
width: 200px;
|
|
height: 32px;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
/* Progress bar container */
|
|
.progress-container {
|
|
background: var(--bg-elevated);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Operation status container */
|
|
.operation-status-container {
|
|
max-width: 350px;
|
|
}
|
|
|
|
.operation-status-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--spacing-md);
|
|
margin-bottom: var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border-radius: var(--border-radius-sm);
|
|
border-left: 4px solid var(--border-color);
|
|
border: 1px solid var(--border-color);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.operation-status-item:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.operation-status-item.status-processing {
|
|
border-left-color: var(--accent-info);
|
|
}
|
|
|
|
.operation-status-item.status-completed {
|
|
border-left-color: var(--accent-success);
|
|
}
|
|
|
|
.operation-status-item.status-failed {
|
|
border-left-color: var(--accent-danger);
|
|
}
|
|
|
|
/* Stats visualization */
|
|
.stats-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
min-width: 140px;
|
|
}
|
|
|
|
.stats-value {
|
|
min-width: 55px;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.stats-bar-container {
|
|
flex: 1;
|
|
height: 10px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
min-width: 80px;
|
|
position: relative;
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.stats-bar {
|
|
height: 100%;
|
|
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
|
|
border-radius: var(--border-radius-sm);
|
|
position: relative;
|
|
box-shadow: 0 0 8px currentColor;
|
|
}
|
|
|
|
.stats-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.cpu-bar {
|
|
background: linear-gradient(90deg, var(--accent-success), var(--accent-warning), var(--accent-danger));
|
|
}
|
|
|
|
.memory-bar {
|
|
background: linear-gradient(90deg, var(--accent-info), var(--accent-warning), var(--accent-danger));
|
|
}
|
|
|
|
/* General scrollbar styles for dark and modern scrollbars */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--bg-hover) var(--bg-primary);
|
|
}
|
|
|
|
/* WebKit-based browsers (Chrome, Edge, Safari) */
|
|
*::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: var(--bg-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: var(--bg-hover);
|
|
border-radius: var(--border-radius-sm);
|
|
border: 2px solid var(--bg-primary);
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-primary);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:active {
|
|
background: var(--accent-secondary);
|
|
}
|
|
|
|
/* Accordion styling for deploy modal */
|
|
.accordion-item {
|
|
background: var(--bg-elevated);
|
|
border-color: var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.accordion-button {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.accordion-button:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.accordion-button:not(.collapsed) {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
box-shadow: inset 0 -1px 0 var(--border-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.accordion-button:focus {
|
|
box-shadow: 0 0 0 0.25rem rgba(45, 212, 191, 0.25);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.accordion-body {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-secondary);
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
/* Improve form label visibility in deploy modal */
|
|
#templateDeployModalUnique .form-label,
|
|
.form-label {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
margin-bottom: var(--spacing-sm);
|
|
font-size: 0.875rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
/* Improve form control visibility in deploy modal */
|
|
#templateDeployModalUnique .form-control,
|
|
#templateDeployModalUnique .form-select,
|
|
.form-control,
|
|
.form-select {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
#templateDeployModalUnique .form-control:hover,
|
|
#templateDeployModalUnique .form-select:hover,
|
|
.form-control:hover,
|
|
.form-select:hover {
|
|
border-color: var(--accent-primary);
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
#templateDeployModalUnique .form-control:focus,
|
|
#templateDeployModalUnique .form-select:focus,
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
/* Improve help text visibility */
|
|
#templateDeployModalUnique .text-muted,
|
|
.text-muted {
|
|
color: var(--text-muted) !important;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* Improve small text visibility */
|
|
#templateDeployModalUnique small,
|
|
small {
|
|
color: var(--text-muted);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* Improve button visibility */
|
|
#templateDeployModalUnique .btn-outline-primary,
|
|
.btn-outline-primary {
|
|
border-color: var(--accent-primary);
|
|
color: var(--accent-primary);
|
|
transition: all var(--transition-fast);
|
|
border-width: 1.5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#templateDeployModalUnique .btn-outline-primary:hover,
|
|
.btn-outline-primary:hover {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* Improve input placeholder visibility */
|
|
#templateDeployModalUnique .form-control::placeholder,
|
|
#templateDeployModalUnique .form-select::placeholder,
|
|
.form-control::placeholder,
|
|
.form-select::placeholder {
|
|
color: var(--text-muted);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Preset field styling */
|
|
.preset-field {
|
|
background-color: var(--bg-secondary) !important;
|
|
border-color: var(--border-color) !important;
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.preset-field:disabled {
|
|
background-color: var(--bg-secondary) !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Slider container styling */
|
|
.slider-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.slider-input {
|
|
width: 100%;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background: var(--bg-tertiary);
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.slider-input::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: var(--accent-primary);
|
|
cursor: pointer;
|
|
border: 2px solid var(--bg-elevated);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.slider-input::-webkit-slider-thumb:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.slider-input::-moz-range-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: var(--accent-primary);
|
|
cursor: pointer;
|
|
border: 2px solid var(--bg-elevated);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.slider-input::-moz-range-thumb:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.slider-input:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.slider-value-display {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.slider-number-input {
|
|
max-width: 120px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Environment variable item styling */
|
|
.env-var-item {
|
|
padding: var(--spacing-md);
|
|
background: var(--bg-tertiary);
|
|
border-radius: var(--border-radius-sm);
|
|
border: 1px solid var(--border-color);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.env-var-item .form-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
/* Validation error styling */
|
|
.validation-error {
|
|
color: var(--accent-danger);
|
|
font-size: 0.75rem;
|
|
margin-top: var(--spacing-xs);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.validation-error::before {
|
|
content: "⚠";
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-control.is-invalid,
|
|
.form-select.is-invalid {
|
|
border-color: var(--accent-danger);
|
|
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
|
|
}
|
|
|
|
.form-control.is-valid,
|
|
.form-select.is-valid {
|
|
border-color: var(--accent-success);
|
|
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
|
|
}
|
|
|
|
/* Tooltip/help text styling */
|
|
.env-var-item small.text-muted {
|
|
display: block;
|
|
margin-top: var(--spacing-xs);
|
|
line-height: 1.4;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Checkbox/switch styling for boolean env vars */
|
|
.form-check-input:checked {
|
|
background-color: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.form-check-input:focus {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
/* Select dropdown styling */
|
|
.form-select {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 16px 12px;
|
|
}
|
|
|
|
.form-select:disabled {
|
|
background-color: var(--bg-secondary);
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Form control styling in dark mode */
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
background-color: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Array item styling */
|
|
.array-item {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.array-item input {
|
|
flex: 1;
|
|
}
|
|
|
|
.array-item .btn-sm {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Modern List Group Styling */
|
|
.list-group-item {
|
|
position: relative;
|
|
display: block;
|
|
padding: var(--spacing-md);
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateX(4px);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--accent-primary) !important;
|
|
}
|
|
|
|
.list-group {
|
|
--bs-list-group-color: var(--text-primary);
|
|
--bs-list-group-bg: transparent;
|
|
--bs-list-group-border-color: transparent;
|
|
--bs-list-group-border-width: 0;
|
|
--bs-list-group-border-radius: var(--border-radius-sm);
|
|
--bs-list-group-item-padding-x: var(--spacing-md);
|
|
--bs-list-group-item-padding-y: var(--spacing-md);
|
|
--bs-list-group-action-color: var(--text-secondary);
|
|
--bs-list-group-action-hover-color: var(--text-primary);
|
|
--bs-list-group-action-hover-bg: var(--bg-hover);
|
|
--bs-list-group-action-active-color: var(--text-primary);
|
|
--bs-list-group-action-active-bg: var(--bg-hover);
|
|
--bs-list-group-disabled-color: var(--text-muted);
|
|
--bs-list-group-disabled-bg: var(--bg-tertiary);
|
|
--bs-list-group-active-color: var(--text-primary);
|
|
--bs-list-group-active-bg: var(--accent-primary);
|
|
--bs-list-group-active-border-color: var(--accent-primary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
/* Modern Table Styling */
|
|
.table-dark {
|
|
--bs-table-bg: var(--bg-elevated);
|
|
--bs-table-color: var(--text-primary);
|
|
--bs-table-border-color: var(--border-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.table-dark thead th {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
padding: var(--spacing-md);
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
.table-dark tbody tr {
|
|
background: var(--bg-elevated);
|
|
border-bottom: 1px solid var(--border-color);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.table-dark tbody tr:hover {
|
|
background: var(--bg-hover);
|
|
transform: scale(1.001);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.table-dark tbody td {
|
|
padding: var(--spacing-md);
|
|
vertical-align: middle;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.table-striped > tbody > tr:nth-of-type(odd) {
|
|
--bs-table-accent-bg: rgba(45, 212, 191, 0.03);
|
|
}
|
|
|
|
/* Clickable Container Name Link */
|
|
.container-name-link {
|
|
color: var(--accent-primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: inline-block;
|
|
}
|
|
|
|
.container-name-link:hover {
|
|
color: var(--accent-secondary);
|
|
text-decoration: underline;
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.container-name-link:active {
|
|
color: var(--accent-info);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.container-name-link:focus {
|
|
outline: 2px solid var(--accent-primary);
|
|
outline-offset: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Chart Wrapper Styles - Prevent vertical growth */
|
|
.chart-wrapper {
|
|
height: 250px;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.chart-wrapper canvas {
|
|
max-height: 100%;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* Modern Button Styles */
|
|
.btn {
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
border-width: 1.5px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
color: var(--bg-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent-secondary);
|
|
border-color: var(--accent-secondary);
|
|
box-shadow: 0 4px 12px rgba(45, 212, 191, 0.4);
|
|
}
|
|
|
|
.btn-outline-success {
|
|
border-color: var(--accent-success);
|
|
color: var(--accent-success);
|
|
}
|
|
|
|
.btn-outline-success:hover {
|
|
background: var(--accent-success);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-outline-danger {
|
|
border-color: var(--accent-danger);
|
|
color: var(--accent-danger);
|
|
}
|
|
|
|
.btn-outline-danger:hover {
|
|
background: var(--accent-danger);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-outline-warning {
|
|
border-color: var(--accent-warning);
|
|
color: var(--accent-warning);
|
|
}
|
|
|
|
.btn-outline-warning:hover {
|
|
background: var(--accent-warning);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-outline-info {
|
|
border-color: var(--accent-info);
|
|
color: var(--accent-info);
|
|
}
|
|
|
|
.btn-outline-info:hover {
|
|
background: var(--accent-info);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
border-color: var(--text-muted);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background: var(--text-muted);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Modal Styling */
|
|
.modal-content {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow-xl);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.modal-header {
|
|
background: var(--bg-elevated);
|
|
border-bottom: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.modal-title {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.modal-body {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.modal-footer {
|
|
background: var(--bg-elevated);
|
|
border-top: 1px solid var(--border-color);
|
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.btn-close-white {
|
|
filter: invert(1) grayscale(100%) brightness(200%);
|
|
}
|
|
|
|
/* Status Badge Styling */
|
|
.badge {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
border-radius: var(--border-radius-sm);
|
|
font-weight: 600;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Container Status Badges */
|
|
.status-running {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: var(--accent-success);
|
|
border: 1px solid var(--accent-success);
|
|
}
|
|
|
|
.status-exited {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: var(--accent-danger);
|
|
border: 1px solid var(--accent-danger);
|
|
}
|
|
|
|
.status-created {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: var(--accent-info);
|
|
border: 1px solid var(--accent-info);
|
|
}
|
|
|
|
.status-restarting {
|
|
background: rgba(245, 158, 11, 0.2);
|
|
color: var(--accent-warning);
|
|
border: 1px solid var(--accent-warning);
|
|
}
|
|
|
|
/* Connection Item Enhanced Styling */
|
|
.connection-item {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.connection-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.connection-info > span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.connection-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Ensure button group doesn't overflow */
|
|
.connection-item .btn-group {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.connection-item .col-5 {
|
|
min-width: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Responsive Design Improvements */
|
|
@media (max-width: 1200px) {
|
|
#sidebar {
|
|
width: 240px;
|
|
}
|
|
|
|
#sidebar.collapsed {
|
|
width: 60px;
|
|
}
|
|
|
|
#content {
|
|
margin-left: 240px;
|
|
}
|
|
|
|
#sidebar.collapsed~#content {
|
|
margin-left: 60px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#alert-container {
|
|
right: var(--spacing-sm);
|
|
left: var(--spacing-sm);
|
|
max-width: calc(100% - 2 * var(--spacing-sm));
|
|
}
|
|
|
|
.alert {
|
|
min-width: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
#dashboard {
|
|
padding: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* Animation for page transitions */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Loading state improvements */
|
|
.spinner-border {
|
|
border-color: var(--accent-primary);
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
/* Additional utility classes */
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Container Inspect Modal Styling */
|
|
#inspect-json-content {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.inspect-key-value {
|
|
display: flex;
|
|
padding: var(--spacing-sm) 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.inspect-key-value:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.inspect-key {
|
|
font-weight: 600;
|
|
color: var(--accent-primary);
|
|
min-width: 200px;
|
|
flex-shrink: 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.inspect-value {
|
|
color: var(--text-secondary);
|
|
flex: 1;
|
|
word-break: break-word;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.inspect-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.inspect-list-item {
|
|
padding: var(--spacing-xs) 0;
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
border-left: 2px solid var(--border-color);
|
|
padding-left: var(--spacing-sm);
|
|
margin-left: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.inspect-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
margin-right: var(--spacing-xs);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.inspect-badge-success {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: var(--accent-success);
|
|
border: 1px solid var(--accent-success);
|
|
}
|
|
|
|
.inspect-badge-danger {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: var(--accent-danger);
|
|
border: 1px solid var(--accent-danger);
|
|
}
|
|
|
|
/* Port Mapping Structured Input Styles */
|
|
.port-mapping-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.port-mapping-fields {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.port-field-group {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.port-field-label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.port-connector {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 1.75rem;
|
|
color: var(--accent-primary);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.port-error-msg {
|
|
display: block;
|
|
color: var(--accent-danger);
|
|
font-size: 0.75rem;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Volume Mount Structured Input Styles */
|
|
.volume-mount-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.volume-mount-fields {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.volume-field-group {
|
|
flex: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.volume-field-label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.volume-connector {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 1.75rem;
|
|
color: var(--accent-primary);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.volume-error-msg {
|
|
display: block;
|
|
color: var(--accent-danger);
|
|
font-size: 0.75rem;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.volume-host-path-group .input-group {
|
|
display: flex;
|
|
}
|
|
|
|
.volume-host-path-group .input-group .form-control {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Validation States */
|
|
.is-invalid {
|
|
border-color: var(--accent-danger) !important;
|
|
}
|
|
|
|
.is-invalid:focus {
|
|
border-color: var(--accent-danger) !important;
|
|
box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25) !important;
|
|
}
|
|
|
|
/* File Browser Styles */
|
|
#fileBrowserModal .modal-body {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
#fileBrowserBreadcrumb {
|
|
background: var(--bg-tertiary);
|
|
padding: var(--spacing-sm);
|
|
border-radius: var(--border-radius-sm);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
#fileBrowserBreadcrumb .breadcrumb {
|
|
margin-bottom: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
#fileBrowserBreadcrumb .breadcrumb-item a {
|
|
color: var(--accent-primary);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
#fileBrowserBreadcrumb .breadcrumb-item a:hover {
|
|
color: var(--accent-secondary);
|
|
}
|
|
|
|
#fileBrowserBreadcrumb .breadcrumb-item.active {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.file-browser-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.file-browser-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.file-browser-item:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.file-browser-item i {
|
|
font-size: 1.125rem;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.file-browser-item span {
|
|
flex: 1;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.file-browser-item .fa-chevron-right {
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.port-mapping-fields,
|
|
.volume-mount-fields {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.port-connector,
|
|
.volume-connector {
|
|
padding-top: 0;
|
|
transform: rotate(90deg);
|
|
margin: var(--spacing-xs) 0;
|
|
}
|
|
|
|
.port-field-group,
|
|
.volume-field-group {
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
|
|
.inspect-badge-info {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: var(--accent-info);
|
|
border: 1px solid var(--accent-info);
|
|
}
|
|
|
|
.inspect-badge-warning {
|
|
background: rgba(245, 158, 11, 0.2);
|
|
color: var(--accent-warning);
|
|
border: 1px solid var(--accent-warning);
|
|
}
|
|
|
|
.inspect-section-empty {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
padding: var(--spacing-md);
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="titlebar">
|
|
<pear-ctrl></pear-ctrl>
|
|
</div>
|
|
|
|
<div id="sidebar">
|
|
<button id="collapse-sidebar-btn"><</button>
|
|
<div class="content">
|
|
<!-- Navigation Menu -->
|
|
<nav id="main-nav" class="mb-3">
|
|
<ul class="nav-menu">
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link active" data-view="dashboard">
|
|
<i class="fas fa-tachometer-alt"></i>
|
|
<span class="nav-label">Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" data-view="deploy">
|
|
<i class="fas fa-rocket"></i>
|
|
<span class="nav-label">Deploy</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" data-view="containers">
|
|
<i class="fas fa-box"></i>
|
|
<span class="nav-label">Containers</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" data-view="images">
|
|
<i class="fas fa-images"></i>
|
|
<span class="nav-label">Images</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" data-view="networks">
|
|
<i class="fas fa-network-wired"></i>
|
|
<span class="nav-label">Networks</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" data-view="volumes">
|
|
<i class="fas fa-database"></i>
|
|
<span class="nav-label">Volumes</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#" class="nav-link" data-view="stacks">
|
|
<i class="fas fa-layer-group"></i>
|
|
<span class="nav-label">Stacks</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<hr class="sidebar-divider">
|
|
|
|
<h4 class="text-center mt-3">Connections</h4>
|
|
<ul id="connection-list" class="list-group mb-3"></ul>
|
|
<form id="add-connection-form" class="px-3 d-flex align-items-center">
|
|
<input type="text" id="new-connection-topic" class="form-control me-2" placeholder="Enter server topic" required>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-plug"></i> Add
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="content">
|
|
<div id="welcome-page">
|
|
<h1>Welcome to peardock</h1>
|
|
<p class="mt-3">Easily manage your Docker containers across peer-to-peer connections.</p>
|
|
<p>To get started, add a connection using the form in the sidebar.</p>
|
|
<!-- <img src="https://via.placeholder.com/500x300" alt="Welcome Graphic" class="img-fluid mt-4"> -->
|
|
</div>
|
|
<!-- Dashboard View -->
|
|
<div id="dashboard-view" class="view hidden">
|
|
<div class="container-fluid">
|
|
<h2 class="mb-4"><i class="fas fa-tachometer-alt me-2"></i>Dashboard</h2>
|
|
|
|
<!-- System Overview Cards -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-3">
|
|
<div class="stat-card">
|
|
<div class="stat-card-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-success);">
|
|
<i class="fas fa-box"></i>
|
|
</div>
|
|
<div class="stat-card-content">
|
|
<div class="stat-card-value" id="stat-running-containers">0</div>
|
|
<div class="stat-card-label">Running Containers</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-card">
|
|
<div class="stat-card-icon" style="background: rgba(239, 68, 68, 0.2); color: var(--accent-danger);">
|
|
<i class="fas fa-stop-circle"></i>
|
|
</div>
|
|
<div class="stat-card-content">
|
|
<div class="stat-card-value" id="stat-stopped-containers">0</div>
|
|
<div class="stat-card-label">Stopped Containers</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-card">
|
|
<div class="stat-card-icon" style="background: rgba(59, 130, 246, 0.2); color: var(--accent-info);">
|
|
<i class="fas fa-images"></i>
|
|
</div>
|
|
<div class="stat-card-content">
|
|
<div class="stat-card-value" id="stat-total-images">0</div>
|
|
<div class="stat-card-label">Total Images</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-card">
|
|
<div class="stat-card-icon" style="background: rgba(20, 184, 166, 0.2); color: var(--accent-secondary);">
|
|
<i class="fas fa-network-wired"></i>
|
|
</div>
|
|
<div class="stat-card-content">
|
|
<div class="stat-card-value" id="stat-total-networks">0</div>
|
|
<div class="stat-card-label">Networks</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Information -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<div class="info-card">
|
|
<h5 class="info-card-title"><i class="fas fa-info-circle me-2"></i>Docker Information</h5>
|
|
<div id="docker-info-content" class="info-card-body">
|
|
<div class="skeleton skeleton-text"></div>
|
|
<div class="skeleton skeleton-text mt-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="info-card">
|
|
<h5 class="info-card-title"><i class="fas fa-server me-2"></i>System Resources</h5>
|
|
<div id="system-resources-content" class="info-card-body">
|
|
<div class="skeleton skeleton-text"></div>
|
|
<div class="skeleton skeleton-text mt-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<div class="info-card">
|
|
<h5 class="info-card-title"><i class="fas fa-bolt me-2"></i>Quick Actions</h5>
|
|
<div class="info-card-body">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<button class="btn btn-primary" onclick="window.navigateToView('containers')">
|
|
<i class="fas fa-box me-2"></i>View Containers
|
|
</button>
|
|
<button class="btn btn-outline-primary" onclick="window.navigateToView('images')">
|
|
<i class="fas fa-images me-2"></i>Manage Images
|
|
</button>
|
|
<button class="btn btn-outline-primary" onclick="window.navigateToView('networks')">
|
|
<i class="fas fa-network-wired me-2"></i>Manage Networks
|
|
</button>
|
|
<button class="btn btn-outline-primary" onclick="window.navigateToView('volumes')">
|
|
<i class="fas fa-database me-2"></i>Manage Volumes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deploy View -->
|
|
<div id="deploy-view" class="view hidden">
|
|
<div class="container-fluid">
|
|
<h2 class="mb-4"><i class="fas fa-rocket me-2"></i>Deploy Container</h2>
|
|
|
|
<!-- Template Selection Section -->
|
|
<div class="info-card mb-4">
|
|
<h5 class="info-card-title"><i class="fas fa-cubes me-2"></i>Select Template</h5>
|
|
<div class="info-card-body" style="display: flex; flex-direction: column; height: calc(100vh - 250px);">
|
|
<input type="text" id="deploy-template-search-input" class="form-control bg-dark text-white mb-3" placeholder="Search templates...">
|
|
<div id="deploy-template-list-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0;">
|
|
<div class="text-center text-muted py-4">
|
|
<i class="fas fa-spinner fa-spin me-2"></i>Loading templates...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deploy Form Section -->
|
|
<div class="info-card" id="deploy-form-section" style="display: none;">
|
|
<h5 class="info-card-title"><i class="fas fa-cog me-2"></i>Container Configuration</h5>
|
|
<div class="info-card-body">
|
|
<form id="deploy-view-form" onsubmit="return false;">
|
|
<!-- Basic Settings (Always Visible) -->
|
|
<div class="mb-4">
|
|
<h6 class="text-primary mb-3"><i class="fas fa-cog"></i> Basic Settings</h6>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="deploy-container-name" class="form-label">Container Name <span class="text-danger">*</span></label>
|
|
<input type="text" id="deploy-container-name" class="form-control bg-dark text-white" placeholder="my-container" required>
|
|
<small class="text-muted">Alphanumeric, dashes, and underscores only</small>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="deploy-image" class="form-label">Image <span class="text-danger">*</span></label>
|
|
<input type="text" id="deploy-image" class="form-control bg-dark text-white" placeholder="nginx:latest" required>
|
|
<small class="text-muted">Docker image name and tag</small>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="deploy-command" class="form-label">Command Override</label>
|
|
<input type="text" id="deploy-command" class="form-control bg-dark text-white" placeholder="Override default command">
|
|
<small class="text-muted">Override container CMD</small>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="deploy-entrypoint" class="form-label">Entrypoint Override</label>
|
|
<input type="text" id="deploy-entrypoint" class="form-control bg-dark text-white" placeholder="Override default entrypoint">
|
|
<small class="text-muted">Override container ENTRYPOINT</small>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="deploy-workdir" class="form-label">Working Directory</label>
|
|
<input type="text" id="deploy-workdir" class="form-control bg-dark text-white" placeholder="/app">
|
|
<small class="text-muted">Container working directory</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accordion for Advanced Settings - Reuse same structure as modal -->
|
|
<div class="accordion accordion-flush" id="deployAccordion">
|
|
<!-- Networking -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#networkingCollapse">
|
|
<i class="fas fa-network-wired me-2"></i> Networking
|
|
</button>
|
|
</h2>
|
|
<div id="networkingCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-network-mode" class="form-label">Network Mode</label>
|
|
<select id="deploy-network-mode" class="form-select bg-dark text-white">
|
|
<option value="bridge">Bridge</option>
|
|
<option value="host">Host</option>
|
|
<option value="none">None</option>
|
|
<option value="container">Container</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6" id="deploy-custom-network-container" style="display: none;">
|
|
<label for="deploy-custom-network" class="form-label">Custom Network</label>
|
|
<input type="text" id="deploy-custom-network" class="form-control bg-dark text-white" placeholder="network-name">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-hostname" class="form-label">Hostname</label>
|
|
<input type="text" id="deploy-hostname" class="form-control bg-dark text-white" placeholder="container-hostname">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="deploy-domainname" class="form-label">Domain Name</label>
|
|
<input type="text" id="deploy-domainname" class="form-control bg-dark text-white" placeholder="example.com">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Port Mappings</label>
|
|
<div id="deploy-ports-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addPortMapping()">
|
|
<i class="fas fa-plus"></i> Add Port
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: host:container/protocol (e.g., 8080:80/tcp)</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">DNS Servers</label>
|
|
<div id="deploy-dns-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDnsServer()">
|
|
<i class="fas fa-plus"></i> Add DNS Server
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Extra Hosts</label>
|
|
<div id="deploy-extra-hosts-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addExtraHost()">
|
|
<i class="fas fa-plus"></i> Add Host
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: hostname:ip (e.g., example.com:127.0.0.1)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Volumes & Storage -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#volumesCollapse">
|
|
<i class="fas fa-hdd me-2"></i> Volumes & Storage
|
|
</button>
|
|
</h2>
|
|
<div id="volumesCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Volume Mounts</label>
|
|
<div id="deploy-volumes-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addVolumeMount()">
|
|
<i class="fas fa-plus"></i> Add Volume
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: /host/path:/container/path:mode (mode: ro/rw)</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Tmpfs Mounts</label>
|
|
<div id="deploy-tmpfs-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addTmpfsMount()">
|
|
<i class="fas fa-plus"></i> Add Tmpfs
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: /path:size (e.g., /tmp:100m)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resources -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#resourcesCollapse">
|
|
<i class="fas fa-server me-2"></i> Resources
|
|
</button>
|
|
</h2>
|
|
<div id="resourcesCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label for="deploy-cpu-limit" class="form-label">CPU Limit (cores)</label>
|
|
<input type="number" id="deploy-cpu-limit" class="form-control bg-dark text-white" placeholder="2" step="0.1" min="0">
|
|
<small class="text-muted">Number of CPU cores</small>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="deploy-cpu-reservation" class="form-label">CPU Reservation</label>
|
|
<input type="number" id="deploy-cpu-reservation" class="form-control bg-dark text-white" placeholder="1" step="0.1" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="deploy-cpu-shares" class="form-label">CPU Shares</label>
|
|
<input type="number" id="deploy-cpu-shares" class="form-control bg-dark text-white" placeholder="1024" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label for="deploy-memory-limit" class="form-label">Memory Limit (MB)</label>
|
|
<input type="number" id="deploy-memory-limit" class="form-control bg-dark text-white" placeholder="512" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="deploy-memory-reservation" class="form-label">Memory Reservation (MB)</label>
|
|
<input type="number" id="deploy-memory-reservation" class="form-control bg-dark text-white" placeholder="256" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="deploy-memory-swap" class="form-label">Memory Swap (MB)</label>
|
|
<input type="number" id="deploy-memory-swap" class="form-control bg-dark text-white" placeholder="-1" min="-1">
|
|
<small class="text-muted">-1 for unlimited</small>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Device Mappings</label>
|
|
<div id="deploy-devices-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDeviceMapping()">
|
|
<i class="fas fa-plus"></i> Add Device
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: /host/device:/container/device:permissions</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Environment & Labels -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#envLabelsCollapse">
|
|
<i class="fas fa-tags me-2"></i> Environment & Labels
|
|
</button>
|
|
</h2>
|
|
<div id="envLabelsCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Environment Variables</label>
|
|
<div id="deploy-env"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addEnvVar()">
|
|
<i class="fas fa-plus"></i> Add Variable
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Labels</label>
|
|
<div id="deploy-labels-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addLabel()">
|
|
<i class="fas fa-plus"></i> Add Label
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: key=value</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#securityCollapse">
|
|
<i class="fas fa-shield-alt me-2"></i> Security
|
|
</button>
|
|
</h2>
|
|
<div id="securityCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-user" class="form-label">User/UID</label>
|
|
<input type="text" id="deploy-user" class="form-control bg-dark text-white" placeholder="1000 or username">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="deploy-group" class="form-label">Group/GID</label>
|
|
<input type="text" id="deploy-group" class="form-control bg-dark text-white" placeholder="1000 or groupname">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-privileged">
|
|
<label class="form-check-label" for="deploy-privileged">Privileged Mode</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-readonly-rootfs">
|
|
<label class="form-check-label" for="deploy-readonly-rootfs">Read-only Root Filesystem</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Capabilities</label>
|
|
<div id="deploy-capabilities-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addCapability()">
|
|
<i class="fas fa-plus"></i> Add Capability
|
|
</button>
|
|
<small class="text-muted d-block mt-1">e.g., NET_ADMIN, SYS_ADMIN</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Security Options</label>
|
|
<div id="deploy-security-opts-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addSecurityOpt()">
|
|
<i class="fas fa-plus"></i> Add Option
|
|
</button>
|
|
<small class="text-muted d-block mt-1">e.g., apparmor=profile, seccomp=unconfined</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Runtime & Behavior -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#runtimeCollapse">
|
|
<i class="fas fa-play-circle me-2"></i> Runtime & Behavior
|
|
</button>
|
|
</h2>
|
|
<div id="runtimeCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-restart-policy" class="form-label">Restart Policy</label>
|
|
<select id="deploy-restart-policy" class="form-select bg-dark text-white">
|
|
<option value="no">No</option>
|
|
<option value="always">Always</option>
|
|
<option value="on-failure">On Failure</option>
|
|
<option value="unless-stopped">Unless Stopped</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="deploy-restart-max-retries" class="form-label">Max Retries (on-failure)</label>
|
|
<input type="number" id="deploy-restart-max-retries" class="form-control bg-dark text-white" placeholder="10" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-auto-remove">
|
|
<label class="form-check-label" for="deploy-auto-remove">Auto Remove</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-tty">
|
|
<label class="form-check-label" for="deploy-tty">TTY</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-stdin-open">
|
|
<label class="form-check-label" for="deploy-stdin-open">Interactive (Stdin Open)</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-detach">
|
|
<label class="form-check-label" for="deploy-detach">Detach Mode</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-init">
|
|
<label class="form-check-label" for="deploy-init">Init Process</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Health & Logging -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#healthCollapse">
|
|
<i class="fas fa-heartbeat me-2"></i> Health & Logging
|
|
</button>
|
|
</h2>
|
|
<div id="healthCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label for="deploy-health-cmd" class="form-label">Health Check Command</label>
|
|
<input type="text" id="deploy-health-cmd" class="form-control bg-dark text-white" placeholder="CMD-SHELL curl -f http://localhost/ || exit 1">
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<label for="deploy-health-interval" class="form-label">Interval (s)</label>
|
|
<input type="number" id="deploy-health-interval" class="form-control bg-dark text-white" placeholder="30" min="1">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="deploy-health-timeout" class="form-label">Timeout (s)</label>
|
|
<input type="number" id="deploy-health-timeout" class="form-control bg-dark text-white" placeholder="10" min="1">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="deploy-health-retries" class="form-label">Retries</label>
|
|
<input type="number" id="deploy-health-retries" class="form-control bg-dark text-white" placeholder="3" min="0">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="deploy-health-start-period" class="form-label">Start Period (s)</label>
|
|
<input type="number" id="deploy-health-start-period" class="form-control bg-dark text-white" placeholder="0" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-log-driver" class="form-label">Logging Driver</label>
|
|
<select id="deploy-log-driver" class="form-select bg-dark text-white">
|
|
<option value="">Default</option>
|
|
<option value="json-file">JSON File</option>
|
|
<option value="syslog">Syslog</option>
|
|
<option value="journald">Journald</option>
|
|
<option value="gelf">GELF</option>
|
|
<option value="fluentd">Fluentd</option>
|
|
<option value="awslogs">AWS Logs</option>
|
|
<option value="none">None</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Logging Options</label>
|
|
<div id="deploy-log-opts-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addLogOpt()">
|
|
<i class="fas fa-plus"></i> Add Option
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#advancedCollapse">
|
|
<i class="fas fa-cogs me-2"></i> Advanced
|
|
</button>
|
|
</h2>
|
|
<div id="advancedCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Sysctls</label>
|
|
<div id="deploy-sysctls-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addSysctl()">
|
|
<i class="fas fa-plus"></i> Add Sysctl
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: key=value (e.g., net.ipv4.ip_forward=1)</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Ulimits</label>
|
|
<div id="deploy-ulimits-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addUlimit()">
|
|
<i class="fas fa-plus"></i> Add Ulimit
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: name=soft:hard (e.g., nofile=1024:2048)</small>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-oom-kill-disable">
|
|
<label class="form-check-label" for="deploy-oom-kill-disable">Disable OOM Killer</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="deploy-pids-limit" class="form-label">PIDs Limit</label>
|
|
<input type="number" id="deploy-pids-limit" class="form-control bg-dark text-white" placeholder="-1" min="-1">
|
|
<small class="text-muted">-1 for unlimited</small>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="deploy-shm-size" class="form-label">Shared Memory Size (MB)</label>
|
|
<input type="number" id="deploy-shm-size" class="form-control bg-dark text-white" placeholder="64" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Section -->
|
|
<div class="mt-4 mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-show-preview" onchange="togglePreview()">
|
|
<label class="form-check-label" for="deploy-show-preview">Show JSON Preview</label>
|
|
</div>
|
|
<div id="deploy-preview-container" style="display: none;" class="mt-2">
|
|
<pre id="deploy-preview" class="bg-dark text-white p-3 rounded" style="max-height: 300px; overflow-y: auto; font-size: 12px;"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button type="button" class="btn btn-secondary" onclick="resetDeployView()">
|
|
<i class="fas fa-undo me-2"></i>Reset
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-rocket me-2"></i>Deploy Container
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Containers View -->
|
|
<div id="containers-view" class="view hidden">
|
|
<!-- Container Filter and Search -->
|
|
<div class="container-fluid mb-3 mt-3">
|
|
<div class="row g-2">
|
|
<div class="col-md-4">
|
|
<input type="text" id="container-search" class="form-control bg-dark text-white" placeholder="Search containers by name or image...">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select id="container-status-filter" class="form-select bg-dark text-white">
|
|
<option value="all">All Status</option>
|
|
<option value="running">Running</option>
|
|
<option value="exited">Stopped</option>
|
|
<option value="created">Created</option>
|
|
<option value="restarting">Restarting</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select id="container-sort" class="form-select bg-dark text-white">
|
|
<option value="name-asc">Sort by Name (A-Z)</option>
|
|
<option value="name-desc">Sort by Name (Z-A)</option>
|
|
<option value="cpu-desc">Sort by CPU (High-Low)</option>
|
|
<option value="cpu-asc">Sort by CPU (Low-High)</option>
|
|
<option value="memory-desc">Sort by Memory (High-Low)</option>
|
|
<option value="memory-asc">Sort by Memory (Low-High)</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<button id="clear-filters" class="btn btn-outline-secondary flex-grow-1">Clear</button>
|
|
<!-- Notification Tray -->
|
|
<div id="notification-tray" class="notification-tray">
|
|
<button id="notification-tray-toggle" class="notification-tray-toggle" aria-label="Notifications">
|
|
<i class="fas fa-bell"></i>
|
|
<span id="notification-badge" class="notification-badge">0</span>
|
|
</button>
|
|
<div id="notification-panel" class="notification-panel hidden">
|
|
<div class="notification-panel-header">
|
|
<h5 class="notification-panel-title">Notifications</h5>
|
|
<div class="notification-panel-actions">
|
|
<button id="mark-all-read-btn" class="notification-action-btn" title="Mark all as read">
|
|
<i class="fas fa-check-double"></i>
|
|
</button>
|
|
<button id="clear-all-btn" class="notification-action-btn" title="Clear all">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
<button id="close-panel-btn" class="notification-action-btn" title="Close">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="notification-filters">
|
|
<button class="notification-filter-btn active" data-filter="all">All</button>
|
|
<button class="notification-filter-btn" data-filter="success">Success</button>
|
|
<button class="notification-filter-btn" data-filter="danger">Error</button>
|
|
<button class="notification-filter-btn" data-filter="warning">Warning</button>
|
|
<button class="notification-filter-btn" data-filter="info">Info</button>
|
|
</div>
|
|
<div id="notification-list" class="notification-list">
|
|
<div class="notification-empty">
|
|
<i class="fas fa-bell-slash"></i>
|
|
<p>No notifications</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bulk Actions Toolbar -->
|
|
<div id="bulk-actions-toolbar" class="mb-3 p-3 bg-dark border rounded" style="display: none;">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div>
|
|
<span id="selected-count" class="text-primary fw-bold">0</span>
|
|
<span class="text-secondary"> container(s) selected</span>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-outline-success" onclick="bulkStartContainers()" title="Start Selected">
|
|
<i class="fas fa-play me-1"></i>Start
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-warning" onclick="bulkStopContainers()" title="Stop Selected">
|
|
<i class="fas fa-stop me-1"></i>Stop
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="bulkRemoveContainers()" title="Remove Selected">
|
|
<i class="fas fa-trash me-1"></i>Remove
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="clearContainerSelection()" title="Clear Selection">
|
|
<i class="fas fa-times me-1"></i>Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 40px;">
|
|
<input type="checkbox" id="select-all-containers" onchange="toggleSelectAllContainers(this)">
|
|
</th>
|
|
<th>Name</th>
|
|
<th>Image</th>
|
|
<th>Status</th>
|
|
<th>CPU (%)</th>
|
|
<th>Memory (MB)</th>
|
|
<th>IP Address</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="container-list"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Images View -->
|
|
<div id="images-view" class="view hidden">
|
|
<div class="container-fluid">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="fas fa-images me-2"></i>Images</h2>
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pullImageModal">
|
|
<i class="fas fa-download me-2"></i>Pull Image
|
|
</button>
|
|
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#buildImageModal">
|
|
<i class="fas fa-hammer me-2"></i>Build Image
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Filters -->
|
|
<div class="mb-3 d-flex align-items-center gap-3">
|
|
<div class="btn-group" role="group" aria-label="Image filters">
|
|
<button type="button" class="btn btn-outline-primary image-filter-btn active" data-filter="all" onclick="filterImages('all')">
|
|
<i class="fas fa-list me-2"></i>All
|
|
<span id="filter-count-all" class="badge bg-secondary ms-2">0</span>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary image-filter-btn" data-filter="used" onclick="filterImages('used')">
|
|
<i class="fas fa-check-circle me-2"></i>Used
|
|
<span id="filter-count-used" class="badge bg-success ms-2">0</span>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary image-filter-btn" data-filter="unused" onclick="filterImages('unused')">
|
|
<i class="fas fa-times-circle me-2"></i>Unused
|
|
<span id="filter-count-unused" class="badge bg-warning ms-2">0</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Actions Toolbar for Images -->
|
|
<div id="bulk-actions-images-toolbar" class="mb-3 p-3 bg-dark border rounded" style="display: none;">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div>
|
|
<span id="selected-images-count" class="text-primary fw-bold">0</span>
|
|
<span class="text-secondary"> image(s) selected</span>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-outline-danger" onclick="bulkRemoveImages()" title="Remove Selected">
|
|
<i class="fas fa-trash me-1"></i>Remove
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="clearImageSelection()" title="Clear Selection">
|
|
<i class="fas fa-times me-1"></i>Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 40px;">
|
|
<input type="checkbox" id="select-all-images" onchange="toggleSelectAllImages(this)">
|
|
</th>
|
|
<th>Repository</th>
|
|
<th>Tag</th>
|
|
<th>Image ID</th>
|
|
<th>Size</th>
|
|
<th>Created</th>
|
|
<th>Usage</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="images-list"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Networks View -->
|
|
<div id="networks-view" class="view hidden">
|
|
<div class="container-fluid">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="fas fa-network-wired me-2"></i>Networks</h2>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createNetworkModal">
|
|
<i class="fas fa-plus me-2"></i>Create Network
|
|
</button>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Driver</th>
|
|
<th>Scope</th>
|
|
<th>Subnet</th>
|
|
<th>Gateway</th>
|
|
<th>Containers</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="networks-list"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Container Details View -->
|
|
<div id="container-details-view" class="view hidden">
|
|
<div class="container-fluid">
|
|
<div class="d-flex align-items-center mb-4">
|
|
<button class="btn btn-outline-secondary me-3" onclick="navigateToView('containers')">
|
|
<i class="fas fa-arrow-left me-2"></i>Back to Containers
|
|
</button>
|
|
<h2 class="mb-0" id="container-details-title">
|
|
<i class="fas fa-box me-2"></i>Container Details
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Container Details Tabs -->
|
|
<ul class="nav nav-tabs mb-4" id="container-details-tabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview-pane" type="button" role="tab">
|
|
<i class="fas fa-info-circle me-2"></i>Overview
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs-pane" type="button" role="tab">
|
|
<i class="fas fa-list-alt me-2"></i>Logs
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="terminal-tab" data-bs-toggle="tab" data-bs-target="#terminal-pane" type="button" role="tab">
|
|
<i class="fas fa-terminal me-2"></i>Terminal
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="stats-tab" data-bs-toggle="tab" data-bs-target="#stats-pane" type="button" role="tab">
|
|
<i class="fas fa-chart-line me-2"></i>Stats
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="config-tab" data-bs-toggle="tab" data-bs-target="#config-pane" type="button" role="tab">
|
|
<i class="fas fa-cog me-2"></i>Configuration
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="networking-tab" data-bs-toggle="tab" data-bs-target="#networking-pane" type="button" role="tab">
|
|
<i class="fas fa-network-wired me-2"></i>Networking
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="container-details-tab-content">
|
|
<!-- Overview Pane -->
|
|
<div class="tab-pane fade show active" id="overview-pane" role="tabpanel">
|
|
<div id="container-overview-content" class="info-card">
|
|
<div class="skeleton skeleton-text"></div>
|
|
<div class="skeleton skeleton-text mt-2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs Pane -->
|
|
<div class="tab-pane fade" id="logs-pane" role="tabpanel">
|
|
<div class="detail-section-card" style="padding: 0;">
|
|
<!-- Logs Toolbar -->
|
|
<div class="logs-toolbar">
|
|
<div class="logs-toolbar-left">
|
|
<div class="logs-search-container">
|
|
<i class="fas fa-search logs-search-icon"></i>
|
|
<input type="text" id="logs-search-input" class="logs-search-input" placeholder="Search logs...">
|
|
<button class="logs-clear-search" id="logs-clear-search" title="Clear search" style="display: none;">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="logs-filter-buttons">
|
|
<button class="logs-filter-btn active" data-filter="all" title="All logs">
|
|
<i class="fas fa-list"></i> All
|
|
</button>
|
|
<button class="logs-filter-btn" data-filter="error" title="Errors only">
|
|
<i class="fas fa-exclamation-circle"></i> Error
|
|
</button>
|
|
<button class="logs-filter-btn" data-filter="warn" title="Warnings only">
|
|
<i class="fas fa-exclamation-triangle"></i> Warn
|
|
</button>
|
|
<button class="logs-filter-btn" data-filter="info" title="Info only">
|
|
<i class="fas fa-info-circle"></i> Info
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="logs-toolbar-right">
|
|
<div class="logs-controls">
|
|
<label class="logs-toggle-label" title="Auto-scroll">
|
|
<input type="checkbox" id="logs-auto-scroll" checked>
|
|
<span><i class="fas fa-arrow-down"></i> Auto-scroll</span>
|
|
</label>
|
|
<button class="logs-control-btn" id="logs-pause-btn" title="Pause/Resume">
|
|
<i class="fas fa-pause"></i> Pause
|
|
</button>
|
|
<button class="logs-control-btn" id="logs-clear-btn" title="Clear logs">
|
|
<i class="fas fa-trash"></i> Clear
|
|
</button>
|
|
<button class="logs-control-btn" id="logs-copy-btn" title="Copy all logs">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<button class="logs-control-btn" id="logs-download-btn" title="Download logs">
|
|
<i class="fas fa-download"></i> Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Logs Container -->
|
|
<div id="container-logs-content" class="logs-container">
|
|
<div class="text-muted text-center logs-loading">Loading logs...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terminal Pane -->
|
|
<div class="tab-pane fade" id="terminal-pane" role="tabpanel">
|
|
<div class="detail-section-card" style="padding: 0;">
|
|
<!-- Terminal Toolbar -->
|
|
<div class="terminal-toolbar">
|
|
<div class="terminal-toolbar-left">
|
|
<div class="terminal-controls-group">
|
|
<button class="terminal-control-btn" id="terminal-font-decrease" title="Decrease font size">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<span class="terminal-font-size" id="terminal-font-size-display">14</span>
|
|
<button class="terminal-control-btn" id="terminal-font-increase" title="Increase font size">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button class="terminal-control-btn" id="terminal-font-reset" title="Reset font size">
|
|
<i class="fas fa-undo"></i>
|
|
</button>
|
|
</div>
|
|
<div class="terminal-controls-divider"></div>
|
|
<div class="terminal-controls-group">
|
|
<button class="terminal-control-btn" id="terminal-copy-btn" title="Copy selection">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<button class="terminal-control-btn" id="terminal-clear-btn" title="Clear terminal">
|
|
<i class="fas fa-trash"></i> Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-toolbar-right">
|
|
<div class="terminal-controls-group">
|
|
<select class="terminal-theme-select" id="terminal-theme-select" title="Select theme">
|
|
<option value="dark">Dark</option>
|
|
<option value="light">Light</option>
|
|
<option value="solarized-dark">Solarized Dark</option>
|
|
<option value="solarized-light">Solarized Light</option>
|
|
<option value="monokai">Monokai</option>
|
|
</select>
|
|
<button class="terminal-control-btn" id="terminal-settings-btn" title="Terminal settings">
|
|
<i class="fas fa-cog"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Terminal Container -->
|
|
<div id="container-terminal-content" class="terminal-container-wrapper">
|
|
<div id="container-terminal-xterm" class="terminal-xterm-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Pane -->
|
|
<div class="tab-pane fade" id="stats-pane" role="tabpanel">
|
|
<div id="container-stats-content" class="info-card">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="stat-card">
|
|
<div class="stat-card-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-success);">
|
|
<i class="fas fa-microchip"></i>
|
|
</div>
|
|
<div class="stat-card-content">
|
|
<div class="stat-card-value" id="detail-cpu">0%</div>
|
|
<div class="stat-card-label">CPU Usage</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="stat-card">
|
|
<div class="stat-card-icon" style="background: rgba(59, 130, 246, 0.2); color: var(--accent-info);">
|
|
<i class="fas fa-memory"></i>
|
|
</div>
|
|
<div class="stat-card-content">
|
|
<div class="stat-card-value" id="detail-memory">0 MB</div>
|
|
<div class="stat-card-label">Memory Usage</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="stats-charts-container" class="mt-4">
|
|
<p class="text-muted">Stats charts will be displayed here</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Pane -->
|
|
<div class="tab-pane fade" id="config-pane" role="tabpanel">
|
|
<div id="container-config-content" class="info-card">
|
|
<div class="skeleton skeleton-text"></div>
|
|
<div class="skeleton skeleton-text mt-2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Networking Pane -->
|
|
<div class="tab-pane fade" id="networking-pane" role="tabpanel">
|
|
<div id="container-networking-content" class="info-card">
|
|
<div class="skeleton skeleton-text"></div>
|
|
<div class="skeleton skeleton-text mt-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Volumes View -->
|
|
<div id="stacks-view" class="view hidden">
|
|
<div class="container-fluid mb-3 mt-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h2><i class="fas fa-layer-group me-2"></i>Docker Compose Stacks</h2>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#deploy-stack-modal">
|
|
<i class="fas fa-plus me-2"></i>Deploy Stack
|
|
</button>
|
|
</div>
|
|
<div id="stacks-list" class="table-responsive">
|
|
<table class="table table-dark table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Stack Name</th>
|
|
<th>Services</th>
|
|
<th>Containers</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="stacks-list-body">
|
|
<tr>
|
|
<td colspan="5" class="text-center text-muted">No stacks found. Deploy a stack to get started.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deploy Stack Modal -->
|
|
<div class="modal fade" id="deploy-stack-modal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Deploy Docker Compose Stack</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="deploy-stack-form">
|
|
<div class="mb-3">
|
|
<label for="stack-name" class="form-label">Stack Name</label>
|
|
<input type="text" class="form-control bg-dark text-white" id="stack-name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="compose-content" class="form-label">Docker Compose YAML</label>
|
|
<textarea class="form-control bg-dark text-white" id="compose-content" rows="15" required placeholder="version: '3'
|
|
services:
|
|
web:
|
|
image: nginx
|
|
ports:
|
|
- '80:80'
|
|
db:
|
|
image: postgres
|
|
environment:
|
|
POSTGRES_PASSWORD: password"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="deploy-stack-btn">Deploy Stack</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="volumes-view" class="view hidden">
|
|
<div class="container-fluid">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="fas fa-database me-2"></i>Volumes</h2>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createVolumeModal">
|
|
<i class="fas fa-plus me-2"></i>Create Volume
|
|
</button>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Driver</th>
|
|
<th>Mountpoint</th>
|
|
<th>Usage</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="volumes-list"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Duplicate Container Modal -->
|
|
<div class="modal fade" id="duplicateModal" tabindex="-1" aria-labelledby="duplicateModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="duplicateModalLabel">Duplicate Container</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 80vh; overflow-y: auto;">
|
|
<form id="duplicate-container-form">
|
|
<!-- Basic Settings (Always Visible) -->
|
|
<div class="mb-4">
|
|
<h6 class="text-primary mb-3"><i class="fas fa-cog"></i> Basic Settings</h6>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="duplicate-container-name" class="form-label">Container Name <span class="text-danger">*</span></label>
|
|
<input type="text" id="duplicate-container-name" class="form-control bg-dark text-white" placeholder="my-container" required>
|
|
<small class="text-muted">Alphanumeric, dashes, and underscores only</small>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="duplicate-image" class="form-label">Image <span class="text-danger">*</span></label>
|
|
<input type="text" id="duplicate-image" class="form-control bg-dark text-white" placeholder="nginx:latest" required>
|
|
<small class="text-muted">Docker image name and tag</small>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="duplicate-command" class="form-label">Command Override</label>
|
|
<input type="text" id="duplicate-command" class="form-control bg-dark text-white" placeholder="Override default command">
|
|
<small class="text-muted">Override container CMD</small>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="duplicate-entrypoint" class="form-label">Entrypoint Override</label>
|
|
<input type="text" id="duplicate-entrypoint" class="form-control bg-dark text-white" placeholder="Override default entrypoint">
|
|
<small class="text-muted">Override container ENTRYPOINT</small>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="duplicate-workdir" class="form-label">Working Directory</label>
|
|
<input type="text" id="duplicate-workdir" class="form-control bg-dark text-white" placeholder="/app">
|
|
<small class="text-muted">Container working directory</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accordion for Advanced Settings -->
|
|
<div class="accordion accordion-flush" id="duplicateAccordion">
|
|
<!-- Networking -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#duplicateNetworkingCollapse">
|
|
<i class="fas fa-network-wired me-2"></i> Networking
|
|
</button>
|
|
</h2>
|
|
<div id="duplicateNetworkingCollapse" class="accordion-collapse collapse" data-bs-parent="#duplicateAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="duplicate-network-mode" class="form-label">Network Mode</label>
|
|
<select id="duplicate-network-mode" class="form-select bg-dark text-white">
|
|
<option value="bridge">Bridge</option>
|
|
<option value="host">Host</option>
|
|
<option value="none">None</option>
|
|
<option value="container">Container</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6" id="duplicate-custom-network-container" style="display: none;">
|
|
<label for="duplicate-custom-network" class="form-label">Custom Network</label>
|
|
<input type="text" id="duplicate-custom-network" class="form-control bg-dark text-white" placeholder="network-name">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="duplicate-hostname" class="form-label">Hostname</label>
|
|
<input type="text" id="duplicate-hostname" class="form-control bg-dark text-white" placeholder="container-hostname">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="duplicate-domainname" class="form-label">Domain Name</label>
|
|
<input type="text" id="duplicate-domainname" class="form-control bg-dark text-white" placeholder="example.com">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Port Mappings</label>
|
|
<div id="duplicate-ports-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicatePortMapping()">
|
|
<i class="fas fa-plus"></i> Add Port
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">DNS Servers</label>
|
|
<div id="duplicate-dns-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateDnsServer()">
|
|
<i class="fas fa-plus"></i> Add DNS Server
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Extra Hosts</label>
|
|
<div id="duplicate-extra-hosts-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateExtraHost()">
|
|
<i class="fas fa-plus"></i> Add Host
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: hostname:ip (e.g., example.com:127.0.0.1)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Volumes & Storage -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#duplicateVolumesCollapse">
|
|
<i class="fas fa-hdd me-2"></i> Volumes & Storage
|
|
</button>
|
|
</h2>
|
|
<div id="duplicateVolumesCollapse" class="accordion-collapse collapse" data-bs-parent="#duplicateAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Volume Mounts</label>
|
|
<div id="duplicate-volumes-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateVolumeMount()">
|
|
<i class="fas fa-plus"></i> Add Volume
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Tmpfs Mounts</label>
|
|
<div id="duplicate-tmpfs-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateTmpfsMount()">
|
|
<i class="fas fa-plus"></i> Add Tmpfs
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: /path:size (e.g., /tmp:100m)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resources -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#duplicateResourcesCollapse">
|
|
<i class="fas fa-server me-2"></i> Resources
|
|
</button>
|
|
</h2>
|
|
<div id="duplicateResourcesCollapse" class="accordion-collapse collapse" data-bs-parent="#duplicateAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label for="duplicate-cpu-limit" class="form-label">CPU Limit (cores)</label>
|
|
<input type="number" id="duplicate-cpu-limit" class="form-control bg-dark text-white" placeholder="2" step="0.1" min="0">
|
|
<small class="text-muted">Number of CPU cores</small>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="duplicate-cpu-reservation" class="form-label">CPU Reservation</label>
|
|
<input type="number" id="duplicate-cpu-reservation" class="form-control bg-dark text-white" placeholder="1" step="0.1" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="duplicate-cpu-shares" class="form-label">CPU Shares</label>
|
|
<input type="number" id="duplicate-cpu-shares" class="form-control bg-dark text-white" placeholder="1024" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label for="duplicate-memory-limit" class="form-label">Memory Limit (MB)</label>
|
|
<input type="number" id="duplicate-memory-limit" class="form-control bg-dark text-white" placeholder="512" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="duplicate-memory-reservation" class="form-label">Memory Reservation (MB)</label>
|
|
<input type="number" id="duplicate-memory-reservation" class="form-control bg-dark text-white" placeholder="256" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="duplicate-memory-swap" class="form-label">Memory Swap (MB)</label>
|
|
<input type="number" id="duplicate-memory-swap" class="form-control bg-dark text-white" placeholder="-1" min="-1">
|
|
<small class="text-muted">-1 for unlimited</small>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Device Mappings</label>
|
|
<div id="duplicate-devices-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateDeviceMapping()">
|
|
<i class="fas fa-plus"></i> Add Device
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: /host/device:/container/device:permissions</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Environment & Labels -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#duplicateEnvLabelsCollapse">
|
|
<i class="fas fa-tags me-2"></i> Environment & Labels
|
|
</button>
|
|
</h2>
|
|
<div id="duplicateEnvLabelsCollapse" class="accordion-collapse collapse" data-bs-parent="#duplicateAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Environment Variables</label>
|
|
<div id="duplicate-env"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateEnvVar()">
|
|
<i class="fas fa-plus"></i> Add Variable
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Labels</label>
|
|
<div id="duplicate-labels-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateLabel()">
|
|
<i class="fas fa-plus"></i> Add Label
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: key=value</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#duplicateSecurityCollapse">
|
|
<i class="fas fa-shield-alt me-2"></i> Security
|
|
</button>
|
|
</h2>
|
|
<div id="duplicateSecurityCollapse" class="accordion-collapse collapse" data-bs-parent="#duplicateAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="duplicate-user" class="form-label">User/UID</label>
|
|
<input type="text" id="duplicate-user" class="form-control bg-dark text-white" placeholder="1000 or username">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="duplicate-group" class="form-label">Group/GID</label>
|
|
<input type="text" id="duplicate-group" class="form-control bg-dark text-white" placeholder="1000 or groupname">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="duplicate-privileged">
|
|
<label class="form-check-label" for="duplicate-privileged">Privileged Mode</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="duplicate-readonly-rootfs">
|
|
<label class="form-check-label" for="duplicate-readonly-rootfs">Read-only Root Filesystem</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Capabilities</label>
|
|
<div id="duplicate-capabilities-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateCapability()">
|
|
<i class="fas fa-plus"></i> Add Capability
|
|
</button>
|
|
<small class="text-muted d-block mt-1">e.g., NET_ADMIN, SYS_ADMIN</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Security Options</label>
|
|
<div id="duplicate-security-opts-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateSecurityOpt()">
|
|
<i class="fas fa-plus"></i> Add Option
|
|
</button>
|
|
<small class="text-muted d-block mt-1">e.g., apparmor=profile, seccomp=unconfined</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Runtime & Behavior -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#duplicateRuntimeCollapse">
|
|
<i class="fas fa-play-circle me-2"></i> Runtime & Behavior
|
|
</button>
|
|
</h2>
|
|
<div id="duplicateRuntimeCollapse" class="accordion-collapse collapse" data-bs-parent="#duplicateAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="duplicate-restart-policy" class="form-label">Restart Policy</label>
|
|
<select id="duplicate-restart-policy" class="form-select bg-dark text-white">
|
|
<option value="no">No</option>
|
|
<option value="always">Always</option>
|
|
<option value="on-failure">On Failure</option>
|
|
<option value="unless-stopped">Unless Stopped</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="duplicate-restart-max-retries" class="form-label">Max Retries (on-failure)</label>
|
|
<input type="number" id="duplicate-restart-max-retries" class="form-control bg-dark text-white" placeholder="10" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="duplicate-auto-remove">
|
|
<label class="form-check-label" for="duplicate-auto-remove">Auto Remove</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="duplicate-tty">
|
|
<label class="form-check-label" for="duplicate-tty">TTY</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="duplicate-stdin-open">
|
|
<label class="form-check-label" for="duplicate-stdin-open">Interactive (Stdin Open)</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="duplicate-detach">
|
|
<label class="form-check-label" for="duplicate-detach">Detach Mode</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="duplicate-init">
|
|
<label class="form-check-label" for="duplicate-init">Init Process</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Health & Logging -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#duplicateHealthCollapse">
|
|
<i class="fas fa-heartbeat me-2"></i> Health & Logging
|
|
</button>
|
|
</h2>
|
|
<div id="duplicateHealthCollapse" class="accordion-collapse collapse" data-bs-parent="#duplicateAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label for="duplicate-health-cmd" class="form-label">Health Check Command</label>
|
|
<input type="text" id="duplicate-health-cmd" class="form-control bg-dark text-white" placeholder="CMD-SHELL curl -f http://localhost/ || exit 1">
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<label for="duplicate-health-interval" class="form-label">Interval (s)</label>
|
|
<input type="number" id="duplicate-health-interval" class="form-control bg-dark text-white" placeholder="30" min="1">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="duplicate-health-timeout" class="form-label">Timeout (s)</label>
|
|
<input type="number" id="duplicate-health-timeout" class="form-control bg-dark text-white" placeholder="10" min="1">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="duplicate-health-retries" class="form-label">Retries</label>
|
|
<input type="number" id="duplicate-health-retries" class="form-control bg-dark text-white" placeholder="3" min="0">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="duplicate-health-start-period" class="form-label">Start Period (s)</label>
|
|
<input type="number" id="duplicate-health-start-period" class="form-control bg-dark text-white" placeholder="0" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="duplicate-log-driver" class="form-label">Logging Driver</label>
|
|
<select id="duplicate-log-driver" class="form-select bg-dark text-white">
|
|
<option value="">Default</option>
|
|
<option value="json-file">JSON File</option>
|
|
<option value="syslog">Syslog</option>
|
|
<option value="journald">Journald</option>
|
|
<option value="gelf">GELF</option>
|
|
<option value="fluentd">Fluentd</option>
|
|
<option value="awslogs">AWS Logs</option>
|
|
<option value="none">None</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Logging Options</label>
|
|
<div id="duplicate-log-opts-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateLogOpt()">
|
|
<i class="fas fa-plus"></i> Add Option
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#duplicateAdvancedCollapse">
|
|
<i class="fas fa-cogs me-2"></i> Advanced
|
|
</button>
|
|
</h2>
|
|
<div id="duplicateAdvancedCollapse" class="accordion-collapse collapse" data-bs-parent="#duplicateAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Sysctls</label>
|
|
<div id="duplicate-sysctls-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateSysctl()">
|
|
<i class="fas fa-plus"></i> Add Sysctl
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: key=value (e.g., net.ipv4.ip_forward=1)</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Ulimits</label>
|
|
<div id="duplicate-ulimits-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDuplicateUlimit()">
|
|
<i class="fas fa-plus"></i> Add Ulimit
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: name=soft:hard (e.g., nofile=1024:2048)</small>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="duplicate-oom-kill-disable">
|
|
<label class="form-check-label" for="duplicate-oom-kill-disable">Disable OOM Killer</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="duplicate-pids-limit" class="form-label">PIDs Limit</label>
|
|
<input type="number" id="duplicate-pids-limit" class="form-control bg-dark text-white" placeholder="-1" min="-1">
|
|
<small class="text-muted">-1 for unlimited</small>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="duplicate-shm-size" class="form-label">Shared Memory Size (MB)</label>
|
|
<input type="number" id="duplicate-shm-size" class="form-control bg-dark text-white" placeholder="64" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-clone"></i> Duplicate Container
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terminal Modal -->
|
|
<div id="terminal-modal">
|
|
<div class="header">
|
|
<span id="terminal-title"></span>
|
|
<div>
|
|
<button id="kill-terminal-btn" class="btn btn-sm btn-danger">
|
|
<i class="fas fa-times-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Terminal Toolbar -->
|
|
<div class="terminal-toolbar" id="modal-terminal-toolbar">
|
|
<div class="terminal-toolbar-left">
|
|
<div class="terminal-controls-group">
|
|
<button class="terminal-control-btn" id="modal-terminal-font-decrease" title="Decrease font size">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<span class="terminal-font-size" id="modal-terminal-font-size-display">14</span>
|
|
<button class="terminal-control-btn" id="modal-terminal-font-increase" title="Increase font size">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button class="terminal-control-btn" id="modal-terminal-font-reset" title="Reset font size">
|
|
<i class="fas fa-undo"></i>
|
|
</button>
|
|
</div>
|
|
<div class="terminal-controls-divider"></div>
|
|
<div class="terminal-controls-group">
|
|
<button class="terminal-control-btn" id="modal-terminal-copy-btn" title="Copy selection">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<button class="terminal-control-btn" id="modal-terminal-clear-btn" title="Clear terminal">
|
|
<i class="fas fa-trash"></i> Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-toolbar-right">
|
|
<div class="terminal-controls-group">
|
|
<select class="terminal-theme-select" id="modal-terminal-theme-select" title="Select theme">
|
|
<option value="dark">Dark</option>
|
|
<option value="light">Light</option>
|
|
<option value="solarized-dark">Solarized Dark</option>
|
|
<option value="solarized-light">Solarized Light</option>
|
|
<option value="monokai">Monokai</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="terminal-container"></div>
|
|
<div id="terminal-resize-handle"></div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to delete this container?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" id="confirm-delete-btn" class="btn btn-danger">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Indicator Overlay -->
|
|
<div id="status-indicator"
|
|
class="position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-dark bg-opacity-75"
|
|
style="display: none; z-index: 1050;">
|
|
<div class="text-center">
|
|
<div class="spinner-border text-light" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-3 text-light">Processing...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Docker Terminal Modal -->
|
|
<div class="modal fade" id="dockerTerminalModal" tabindex="-1" aria-labelledby="docker-terminal-title" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 id="docker-terminal-title" class="modal-title">Docker CLI Terminal</h5>
|
|
<button id="docker-kill-terminal-btn" type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<!-- Docker Terminal Toolbar -->
|
|
<div class="terminal-toolbar" id="docker-terminal-toolbar">
|
|
<div class="terminal-toolbar-left">
|
|
<div class="terminal-controls-group">
|
|
<button class="terminal-control-btn" id="docker-terminal-font-decrease" title="Decrease font size">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<span class="terminal-font-size" id="docker-terminal-font-size-display">14</span>
|
|
<button class="terminal-control-btn" id="docker-terminal-font-increase" title="Increase font size">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button class="terminal-control-btn" id="docker-terminal-font-reset" title="Reset font size">
|
|
<i class="fas fa-undo"></i>
|
|
</button>
|
|
</div>
|
|
<div class="terminal-controls-divider"></div>
|
|
<div class="terminal-controls-group">
|
|
<button class="terminal-control-btn" id="docker-terminal-copy-btn" title="Copy selection">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<button class="terminal-control-btn" id="docker-terminal-clear-btn" title="Clear terminal">
|
|
<i class="fas fa-trash"></i> Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-toolbar-right">
|
|
<div class="terminal-controls-group">
|
|
<select class="terminal-theme-select" id="docker-terminal-theme-select" title="Select theme">
|
|
<option value="dark">Dark</option>
|
|
<option value="light">Light</option>
|
|
<option value="solarized-dark">Solarized Dark</option>
|
|
<option value="solarized-light">Solarized Light</option>
|
|
<option value="monokai">Monokai</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body" style="padding: 0;">
|
|
<div id="docker-terminal-container" style="height: 500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="logsModal" tabindex="-1" aria-labelledby="logsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="logsModalLabel">Container Logs</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="logs-container" style="max-height: 70vh; overflow-y: auto; font-family: monospace; background: black; padding: 10px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Container Inspect Modal -->
|
|
<div class="modal fade" id="containerInspectModal" tabindex="-1" aria-labelledby="containerInspectModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="containerInspectModalLabel">
|
|
<i class="fas fa-info-circle me-2"></i>Container Information
|
|
</h5>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="toggle-json-view">
|
|
<i class="fas fa-code"></i> Raw JSON
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="copy-json-btn">
|
|
<i class="fas fa-copy"></i> Copy JSON
|
|
</button>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 80vh; overflow-y: auto;">
|
|
<!-- Formatted View -->
|
|
<div id="inspect-formatted-view">
|
|
<div class="accordion accordion-flush" id="inspectAccordion">
|
|
<!-- Overview Section -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#inspectOverviewCollapse">
|
|
<i class="fas fa-info-circle me-2"></i> Overview
|
|
</button>
|
|
</h2>
|
|
<div id="inspectOverviewCollapse" class="accordion-collapse collapse" data-bs-parent="#inspectAccordion">
|
|
<div class="accordion-body" id="inspect-overview-content">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Section -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#inspectConfigCollapse">
|
|
<i class="fas fa-cog me-2"></i> Configuration
|
|
</button>
|
|
</h2>
|
|
<div id="inspectConfigCollapse" class="accordion-collapse collapse" data-bs-parent="#inspectAccordion">
|
|
<div class="accordion-body" id="inspect-config-content">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Networking Section -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#inspectNetworkingCollapse">
|
|
<i class="fas fa-network-wired me-2"></i> Networking
|
|
</button>
|
|
</h2>
|
|
<div id="inspectNetworkingCollapse" class="accordion-collapse collapse" data-bs-parent="#inspectAccordion">
|
|
<div class="accordion-body" id="inspect-networking-content">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage Section -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#inspectStorageCollapse">
|
|
<i class="fas fa-hdd me-2"></i> Storage
|
|
</button>
|
|
</h2>
|
|
<div id="inspectStorageCollapse" class="accordion-collapse collapse" data-bs-parent="#inspectAccordion">
|
|
<div class="accordion-body" id="inspect-storage-content">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resources Section -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#inspectResourcesCollapse">
|
|
<i class="fas fa-server me-2"></i> Resources
|
|
</button>
|
|
</h2>
|
|
<div id="inspectResourcesCollapse" class="accordion-collapse collapse" data-bs-parent="#inspectAccordion">
|
|
<div class="accordion-body" id="inspect-resources-content">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Section -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#inspectSecurityCollapse">
|
|
<i class="fas fa-shield-alt me-2"></i> Security
|
|
</button>
|
|
</h2>
|
|
<div id="inspectSecurityCollapse" class="accordion-collapse collapse" data-bs-parent="#inspectAccordion">
|
|
<div class="accordion-body" id="inspect-security-content">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Runtime Section -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#inspectRuntimeCollapse">
|
|
<i class="fas fa-play-circle me-2"></i> Runtime & Behavior
|
|
</button>
|
|
</h2>
|
|
<div id="inspectRuntimeCollapse" class="accordion-collapse collapse" data-bs-parent="#inspectAccordion">
|
|
<div class="accordion-body" id="inspect-runtime-content">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Health & Logging Section -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#inspectHealthCollapse">
|
|
<i class="fas fa-heartbeat me-2"></i> Health & Logging
|
|
</button>
|
|
</h2>
|
|
<div id="inspectHealthCollapse" class="accordion-collapse collapse" data-bs-parent="#inspectAccordion">
|
|
<div class="accordion-body" id="inspect-health-content">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Labels & Metadata Section -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#inspectLabelsCollapse">
|
|
<i class="fas fa-tags me-2"></i> Labels & Metadata
|
|
</button>
|
|
</h2>
|
|
<div id="inspectLabelsCollapse" class="accordion-collapse collapse" data-bs-parent="#inspectAccordion">
|
|
<div class="accordion-body" id="inspect-labels-content">
|
|
<!-- Content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Raw JSON View -->
|
|
<div id="inspect-json-view" style="display: none;">
|
|
<pre id="inspect-json-content" class="bg-dark text-white p-3 rounded" style="max-height: 70vh; overflow-y: auto; font-size: 12px; font-family: 'Courier New', monospace; white-space: pre-wrap; word-wrap: break-word;"></pre>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Inspect Modal -->
|
|
<div class="modal fade" id="imageInspectModal" tabindex="-1" aria-labelledby="imageInspectModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="imageInspectModalLabel">
|
|
<i class="fas fa-info-circle me-2"></i>Image Information
|
|
</h5>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="toggle-image-json-view">
|
|
<i class="fas fa-code"></i> Raw JSON
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="copy-image-json-btn">
|
|
<i class="fas fa-copy"></i> Copy JSON
|
|
</button>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 80vh; overflow-y: auto;">
|
|
<div id="image-inspect-formatted-view">
|
|
<div class="accordion accordion-flush" id="imageInspectAccordion">
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#imageOverviewCollapse">
|
|
<i class="fas fa-info-circle me-2"></i> Overview
|
|
</button>
|
|
</h2>
|
|
<div id="imageOverviewCollapse" class="accordion-collapse collapse" data-bs-parent="#imageInspectAccordion">
|
|
<div class="accordion-body" id="image-overview-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#imageConfigCollapse">
|
|
<i class="fas fa-cog me-2"></i> Configuration
|
|
</button>
|
|
</h2>
|
|
<div id="imageConfigCollapse" class="accordion-collapse collapse" data-bs-parent="#imageInspectAccordion">
|
|
<div class="accordion-body" id="image-config-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#imageHistoryCollapse">
|
|
<i class="fas fa-history me-2"></i> History & Layers
|
|
</button>
|
|
</h2>
|
|
<div id="imageHistoryCollapse" class="accordion-collapse collapse" data-bs-parent="#imageInspectAccordion">
|
|
<div class="accordion-body" id="image-history-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="image-inspect-json-view" style="display: none;">
|
|
<pre id="image-inspect-json-content" class="bg-dark text-white p-3 rounded" style="max-height: 70vh; overflow-y: auto; font-size: 12px; font-family: 'Courier New', monospace; white-space: pre-wrap; word-wrap: break-word;"></pre>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Network Inspect Modal -->
|
|
<div class="modal fade" id="networkInspectModal" tabindex="-1" aria-labelledby="networkInspectModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="networkInspectModalLabel">
|
|
<i class="fas fa-info-circle me-2"></i>Network Information
|
|
</h5>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="toggle-network-json-view">
|
|
<i class="fas fa-code"></i> Raw JSON
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="copy-network-json-btn">
|
|
<i class="fas fa-copy"></i> Copy JSON
|
|
</button>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 80vh; overflow-y: auto;">
|
|
<div id="network-inspect-formatted-view">
|
|
<div class="accordion accordion-flush" id="networkInspectAccordion">
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#networkOverviewCollapse">
|
|
<i class="fas fa-info-circle me-2"></i> Overview
|
|
</button>
|
|
</h2>
|
|
<div id="networkOverviewCollapse" class="accordion-collapse collapse" data-bs-parent="#networkInspectAccordion">
|
|
<div class="accordion-body" id="network-overview-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#networkConfigCollapse">
|
|
<i class="fas fa-cog me-2"></i> Configuration
|
|
</button>
|
|
</h2>
|
|
<div id="networkConfigCollapse" class="accordion-collapse collapse" data-bs-parent="#networkInspectAccordion">
|
|
<div class="accordion-body" id="network-config-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#networkContainersCollapse">
|
|
<i class="fas fa-box me-2"></i> Connected Containers
|
|
</button>
|
|
</h2>
|
|
<div id="networkContainersCollapse" class="accordion-collapse collapse" data-bs-parent="#networkInspectAccordion">
|
|
<div class="accordion-body" id="network-containers-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="network-inspect-json-view" style="display: none;">
|
|
<pre id="network-inspect-json-content" class="bg-dark text-white p-3 rounded" style="max-height: 70vh; overflow-y: auto; font-size: 12px; font-family: 'Courier New', monospace; white-space: pre-wrap; word-wrap: break-word;"></pre>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Volume Inspect Modal -->
|
|
<div class="modal fade" id="volumeInspectModal" tabindex="-1" aria-labelledby="volumeInspectModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="volumeInspectModalLabel">
|
|
<i class="fas fa-info-circle me-2"></i>Volume Information
|
|
</h5>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="toggle-volume-json-view">
|
|
<i class="fas fa-code"></i> Raw JSON
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="copy-volume-json-btn">
|
|
<i class="fas fa-copy"></i> Copy JSON
|
|
</button>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 80vh; overflow-y: auto;">
|
|
<div id="volume-inspect-formatted-view">
|
|
<div class="accordion accordion-flush" id="volumeInspectAccordion">
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#volumeOverviewCollapse">
|
|
<i class="fas fa-info-circle me-2"></i> Overview
|
|
</button>
|
|
</h2>
|
|
<div id="volumeOverviewCollapse" class="accordion-collapse collapse" data-bs-parent="#volumeInspectAccordion">
|
|
<div class="accordion-body" id="volume-overview-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#volumeConfigCollapse">
|
|
<i class="fas fa-cog me-2"></i> Configuration
|
|
</button>
|
|
</h2>
|
|
<div id="volumeConfigCollapse" class="accordion-collapse collapse" data-bs-parent="#volumeInspectAccordion">
|
|
<div class="accordion-body" id="volume-config-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#volumeUsageCollapse">
|
|
<i class="fas fa-box me-2"></i> Usage
|
|
</button>
|
|
</h2>
|
|
<div id="volumeUsageCollapse" class="accordion-collapse collapse" data-bs-parent="#volumeInspectAccordion">
|
|
<div class="accordion-body" id="volume-usage-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="volume-inspect-json-view" style="display: none;">
|
|
<pre id="volume-inspect-json-content" class="bg-dark text-white p-3 rounded" style="max-height: 70vh; overflow-y: auto; font-size: 12px; font-family: 'Courier New', monospace; white-space: pre-wrap; word-wrap: break-word;"></pre>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stack Inspect Modal -->
|
|
<div class="modal fade" id="stackInspectModal" tabindex="-1" aria-labelledby="stackInspectModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="stackInspectModalLabel">
|
|
<i class="fas fa-info-circle me-2"></i>Stack Information
|
|
</h5>
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="toggle-stack-json-view">
|
|
<i class="fas fa-code"></i> Raw JSON
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-primary" id="copy-stack-json-btn">
|
|
<i class="fas fa-copy"></i> Copy JSON
|
|
</button>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 80vh; overflow-y: auto;">
|
|
<div id="stack-inspect-formatted-view">
|
|
<div class="accordion accordion-flush" id="stackInspectAccordion">
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#stackOverviewCollapse">
|
|
<i class="fas fa-info-circle me-2"></i> Overview
|
|
</button>
|
|
</h2>
|
|
<div id="stackOverviewCollapse" class="accordion-collapse collapse" data-bs-parent="#stackInspectAccordion">
|
|
<div class="accordion-body" id="stack-overview-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#stackServicesCollapse">
|
|
<i class="fas fa-cogs me-2"></i> Services
|
|
</button>
|
|
</h2>
|
|
<div id="stackServicesCollapse" class="accordion-collapse collapse" data-bs-parent="#stackInspectAccordion">
|
|
<div class="accordion-body" id="stack-services-content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#stackContainersCollapse">
|
|
<i class="fas fa-box me-2"></i> Containers
|
|
</button>
|
|
</h2>
|
|
<div id="stackContainersCollapse" class="accordion-collapse collapse" data-bs-parent="#stackInspectAccordion">
|
|
<div class="accordion-body" id="stack-containers-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="stack-inspect-json-view" style="display: none;">
|
|
<pre id="stack-inspect-json-content" class="bg-dark text-white p-3 rounded" style="max-height: 70vh; overflow-y: auto; font-size: 12px; font-family: 'Courier New', monospace; white-space: pre-wrap; word-wrap: break-word;"></pre>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Input -->
|
|
|
|
<!-- Template Deploy Modal -->
|
|
<div class="modal fade" id="templateDeployModal" tabindex="-1" aria-labelledby="templateDeployModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="templateDeployModalLabel">Deploy Template</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="text" id="template-search-input" class="form-control mb-3" placeholder="Search templates...">
|
|
<ul id="template-list" class="list-group"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deploy Template Modal -->
|
|
<div class="modal fade" id="templateDeployModalUnique" tabindex="-1" aria-labelledby="templateDeployModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deploy-title">Deploy Template</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" style="max-height: 80vh; overflow-y: auto;">
|
|
<form id="deploy-form">
|
|
<!-- Basic Settings (Always Visible) -->
|
|
<div class="mb-4">
|
|
<h6 class="text-primary mb-3"><i class="fas fa-cog"></i> Basic Settings</h6>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="deploy-container-name" class="form-label">Container Name <span class="text-danger">*</span></label>
|
|
<input type="text" id="deploy-container-name" class="form-control bg-dark text-white" placeholder="my-container" required>
|
|
<small class="text-muted">Alphanumeric, dashes, and underscores only</small>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="deploy-image" class="form-label">Image <span class="text-danger">*</span></label>
|
|
<input type="text" id="deploy-image" class="form-control bg-dark text-white" placeholder="nginx:latest" required>
|
|
<small class="text-muted">Docker image name and tag</small>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="deploy-command" class="form-label">Command Override</label>
|
|
<input type="text" id="deploy-command" class="form-control bg-dark text-white" placeholder="Override default command">
|
|
<small class="text-muted">Override container CMD</small>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="deploy-entrypoint" class="form-label">Entrypoint Override</label>
|
|
<input type="text" id="deploy-entrypoint" class="form-control bg-dark text-white" placeholder="Override default entrypoint">
|
|
<small class="text-muted">Override container ENTRYPOINT</small>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="deploy-workdir" class="form-label">Working Directory</label>
|
|
<input type="text" id="deploy-workdir" class="form-control bg-dark text-white" placeholder="/app">
|
|
<small class="text-muted">Container working directory</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accordion for Advanced Settings -->
|
|
<div class="accordion accordion-flush" id="deployAccordion">
|
|
<!-- Networking -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#networkingCollapse">
|
|
<i class="fas fa-network-wired me-2"></i> Networking
|
|
</button>
|
|
</h2>
|
|
<div id="networkingCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-network-mode" class="form-label">Network Mode</label>
|
|
<select id="deploy-network-mode" class="form-select bg-dark text-white">
|
|
<option value="bridge">Bridge</option>
|
|
<option value="host">Host</option>
|
|
<option value="none">None</option>
|
|
<option value="container">Container</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6" id="deploy-custom-network-container" style="display: none;">
|
|
<label for="deploy-custom-network" class="form-label">Custom Network</label>
|
|
<input type="text" id="deploy-custom-network" class="form-control bg-dark text-white" placeholder="network-name">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-hostname" class="form-label">Hostname</label>
|
|
<input type="text" id="deploy-hostname" class="form-control bg-dark text-white" placeholder="container-hostname">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="deploy-domainname" class="form-label">Domain Name</label>
|
|
<input type="text" id="deploy-domainname" class="form-control bg-dark text-white" placeholder="example.com">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Port Mappings</label>
|
|
<div id="deploy-ports-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addPortMapping()">
|
|
<i class="fas fa-plus"></i> Add Port
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">DNS Servers</label>
|
|
<div id="deploy-dns-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDnsServer()">
|
|
<i class="fas fa-plus"></i> Add DNS Server
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Extra Hosts</label>
|
|
<div id="deploy-extra-hosts-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addExtraHost()">
|
|
<i class="fas fa-plus"></i> Add Host
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: hostname:ip (e.g., example.com:127.0.0.1)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Volumes & Storage -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#volumesCollapse">
|
|
<i class="fas fa-hdd me-2"></i> Volumes & Storage
|
|
</button>
|
|
</h2>
|
|
<div id="volumesCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Volume Mounts</label>
|
|
<div id="deploy-volumes-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addVolumeMount()">
|
|
<i class="fas fa-plus"></i> Add Volume
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Tmpfs Mounts</label>
|
|
<div id="deploy-tmpfs-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addTmpfsMount()">
|
|
<i class="fas fa-plus"></i> Add Tmpfs
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: /path:size (e.g., /tmp:100m)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resources -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#resourcesCollapse">
|
|
<i class="fas fa-server me-2"></i> Resources
|
|
</button>
|
|
</h2>
|
|
<div id="resourcesCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label for="deploy-cpu-limit" class="form-label">CPU Limit (cores)</label>
|
|
<input type="number" id="deploy-cpu-limit" class="form-control bg-dark text-white" placeholder="2" step="0.1" min="0">
|
|
<small class="text-muted">Number of CPU cores</small>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="deploy-cpu-reservation" class="form-label">CPU Reservation</label>
|
|
<input type="number" id="deploy-cpu-reservation" class="form-control bg-dark text-white" placeholder="1" step="0.1" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="deploy-cpu-shares" class="form-label">CPU Shares</label>
|
|
<input type="number" id="deploy-cpu-shares" class="form-control bg-dark text-white" placeholder="1024" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label for="deploy-memory-limit" class="form-label">Memory Limit (MB)</label>
|
|
<input type="number" id="deploy-memory-limit" class="form-control bg-dark text-white" placeholder="512" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="deploy-memory-reservation" class="form-label">Memory Reservation (MB)</label>
|
|
<input type="number" id="deploy-memory-reservation" class="form-control bg-dark text-white" placeholder="256" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="deploy-memory-swap" class="form-label">Memory Swap (MB)</label>
|
|
<input type="number" id="deploy-memory-swap" class="form-control bg-dark text-white" placeholder="-1" min="-1">
|
|
<small class="text-muted">-1 for unlimited</small>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Device Mappings</label>
|
|
<div id="deploy-devices-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addDeviceMapping()">
|
|
<i class="fas fa-plus"></i> Add Device
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: /host/device:/container/device:permissions</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Environment & Labels -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#envLabelsCollapse">
|
|
<i class="fas fa-tags me-2"></i> Environment & Labels
|
|
</button>
|
|
</h2>
|
|
<div id="envLabelsCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Environment Variables</label>
|
|
<div id="deploy-env"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addEnvVar()">
|
|
<i class="fas fa-plus"></i> Add Variable
|
|
</button>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Labels</label>
|
|
<div id="deploy-labels-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addLabel()">
|
|
<i class="fas fa-plus"></i> Add Label
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: key=value</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#securityCollapse">
|
|
<i class="fas fa-shield-alt me-2"></i> Security
|
|
</button>
|
|
</h2>
|
|
<div id="securityCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-user" class="form-label">User/UID</label>
|
|
<input type="text" id="deploy-user" class="form-control bg-dark text-white" placeholder="1000 or username">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="deploy-group" class="form-label">Group/GID</label>
|
|
<input type="text" id="deploy-group" class="form-control bg-dark text-white" placeholder="1000 or groupname">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-privileged">
|
|
<label class="form-check-label" for="deploy-privileged">Privileged Mode</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-readonly-rootfs">
|
|
<label class="form-check-label" for="deploy-readonly-rootfs">Read-only Root Filesystem</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Capabilities</label>
|
|
<div id="deploy-capabilities-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addCapability()">
|
|
<i class="fas fa-plus"></i> Add Capability
|
|
</button>
|
|
<small class="text-muted d-block mt-1">e.g., NET_ADMIN, SYS_ADMIN</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Security Options</label>
|
|
<div id="deploy-security-opts-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addSecurityOpt()">
|
|
<i class="fas fa-plus"></i> Add Option
|
|
</button>
|
|
<small class="text-muted d-block mt-1">e.g., apparmor=profile, seccomp=unconfined</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Runtime & Behavior -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#runtimeCollapse">
|
|
<i class="fas fa-play-circle me-2"></i> Runtime & Behavior
|
|
</button>
|
|
</h2>
|
|
<div id="runtimeCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-restart-policy" class="form-label">Restart Policy</label>
|
|
<select id="deploy-restart-policy" class="form-select bg-dark text-white">
|
|
<option value="no">No</option>
|
|
<option value="always">Always</option>
|
|
<option value="on-failure">On Failure</option>
|
|
<option value="unless-stopped">Unless Stopped</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="deploy-restart-max-retries" class="form-label">Max Retries (on-failure)</label>
|
|
<input type="number" id="deploy-restart-max-retries" class="form-control bg-dark text-white" placeholder="10" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-auto-remove">
|
|
<label class="form-check-label" for="deploy-auto-remove">Auto Remove</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-tty">
|
|
<label class="form-check-label" for="deploy-tty">TTY</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-stdin-open">
|
|
<label class="form-check-label" for="deploy-stdin-open">Interactive (Stdin Open)</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-detach">
|
|
<label class="form-check-label" for="deploy-detach">Detach Mode</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-init">
|
|
<label class="form-check-label" for="deploy-init">Init Process</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Health & Logging -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#healthCollapse">
|
|
<i class="fas fa-heartbeat me-2"></i> Health & Logging
|
|
</button>
|
|
</h2>
|
|
<div id="healthCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label for="deploy-health-cmd" class="form-label">Health Check Command</label>
|
|
<input type="text" id="deploy-health-cmd" class="form-control bg-dark text-white" placeholder="CMD-SHELL curl -f http://localhost/ || exit 1">
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<label for="deploy-health-interval" class="form-label">Interval (s)</label>
|
|
<input type="number" id="deploy-health-interval" class="form-control bg-dark text-white" placeholder="30" min="1">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="deploy-health-timeout" class="form-label">Timeout (s)</label>
|
|
<input type="number" id="deploy-health-timeout" class="form-control bg-dark text-white" placeholder="10" min="1">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="deploy-health-retries" class="form-label">Retries</label>
|
|
<input type="number" id="deploy-health-retries" class="form-control bg-dark text-white" placeholder="3" min="0">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="deploy-health-start-period" class="form-label">Start Period (s)</label>
|
|
<input type="number" id="deploy-health-start-period" class="form-control bg-dark text-white" placeholder="0" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="deploy-log-driver" class="form-label">Logging Driver</label>
|
|
<select id="deploy-log-driver" class="form-select bg-dark text-white">
|
|
<option value="">Default</option>
|
|
<option value="json-file">JSON File</option>
|
|
<option value="syslog">Syslog</option>
|
|
<option value="journald">Journald</option>
|
|
<option value="gelf">GELF</option>
|
|
<option value="fluentd">Fluentd</option>
|
|
<option value="awslogs">AWS Logs</option>
|
|
<option value="none">None</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Logging Options</label>
|
|
<div id="deploy-log-opts-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addLogOpt()">
|
|
<i class="fas fa-plus"></i> Add Option
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced -->
|
|
<div class="accordion-item bg-dark border-secondary">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#advancedCollapse">
|
|
<i class="fas fa-cogs me-2"></i> Advanced
|
|
</button>
|
|
</h2>
|
|
<div id="advancedCollapse" class="accordion-collapse collapse" data-bs-parent="#deployAccordion">
|
|
<div class="accordion-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Sysctls</label>
|
|
<div id="deploy-sysctls-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addSysctl()">
|
|
<i class="fas fa-plus"></i> Add Sysctl
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: key=value (e.g., net.ipv4.ip_forward=1)</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Ulimits</label>
|
|
<div id="deploy-ulimits-container"></div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addUlimit()">
|
|
<i class="fas fa-plus"></i> Add Ulimit
|
|
</button>
|
|
<small class="text-muted d-block mt-1">Format: name=soft:hard (e.g., nofile=1024:2048)</small>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-oom-kill-disable">
|
|
<label class="form-check-label" for="deploy-oom-kill-disable">Disable OOM Killer</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="deploy-pids-limit" class="form-label">PIDs Limit</label>
|
|
<input type="number" id="deploy-pids-limit" class="form-control bg-dark text-white" placeholder="-1" min="-1">
|
|
<small class="text-muted">-1 for unlimited</small>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="deploy-shm-size" class="form-label">Shared Memory Size (MB)</label>
|
|
<input type="number" id="deploy-shm-size" class="form-control bg-dark text-white" placeholder="64" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Section -->
|
|
<div class="mt-4 mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="deploy-show-preview" onchange="togglePreview()">
|
|
<label class="form-check-label" for="deploy-show-preview">Show JSON Preview</label>
|
|
</div>
|
|
<div id="deploy-preview-container" style="display: none;" class="mt-2">
|
|
<pre id="deploy-preview" class="bg-dark text-white p-3 rounded" style="max-height: 300px; overflow-y: auto; font-size: 12px;"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<div>
|
|
<button type="button" class="btn btn-outline-info me-2" onclick="saveCurrentTemplate()">
|
|
<i class="fas fa-save"></i> Save as Template
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-rocket"></i> Deploy Container
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Browser Modal -->
|
|
<div class="modal fade" id="fileBrowserModal" tabindex="-1" aria-labelledby="fileBrowserModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="fileBrowserModalLabel"><i class="fas fa-folder-open me-2"></i>Browse Directory</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="fileBrowserBreadcrumb" class="mb-3"></div>
|
|
<div id="fileBrowserContent" style="min-height: 300px; max-height: 400px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 4px; padding: 1rem;">
|
|
<div class="text-center p-4 text-muted">
|
|
<i class="fas fa-spinner fa-spin"></i> Loading...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="selectDirectoryForVolume()">
|
|
<i class="fas fa-check"></i> Select Directory
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pull Image Modal -->
|
|
<div class="modal fade" id="pullImageModal" tabindex="-1" aria-labelledby="pullImageModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="pullImageModalLabel"><i class="fas fa-download me-2"></i>Pull Image</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="pull-image-form">
|
|
<div class="mb-3">
|
|
<label for="pull-image-name" class="form-label">Image Name</label>
|
|
<input type="text" id="pull-image-name" class="form-control bg-dark text-white" placeholder="nginx:latest" required>
|
|
<small class="text-muted">Enter the full image name with tag (e.g., nginx:latest, ubuntu:20.04)</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="pullImage()">
|
|
<i class="fas fa-download me-2"></i>Pull Image
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generic Confirmation Modal -->
|
|
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="confirmModalLabel">Confirm Action</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmModalMessage">Are you sure?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="confirmModalBtn">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rename Container Modal -->
|
|
<div class="modal fade" id="renameContainerModal" tabindex="-1" aria-labelledby="renameContainerModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="renameContainerModalLabel">Rename Container</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="renameContainerForm">
|
|
<div class="mb-3">
|
|
<label for="new-container-name" class="form-label">New Container Name</label>
|
|
<input type="text" class="form-control bg-dark text-white" id="new-container-name" required>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="confirm-rename-btn">Rename</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Commit Container Modal -->
|
|
<div class="modal fade" id="commitContainerModal" tabindex="-1" aria-labelledby="commitContainerModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="commitContainerModalLabel">Commit Container</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="commitContainerForm">
|
|
<div class="mb-3">
|
|
<label for="commit-repo" class="form-label">Repository Name</label>
|
|
<input type="text" class="form-control bg-dark text-white" id="commit-repo" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="commit-tag" class="form-label">Tag</label>
|
|
<input type="text" class="form-control bg-dark text-white" id="commit-tag" value="latest">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="commit-message" class="form-label">Commit Message (Optional)</label>
|
|
<textarea class="form-control bg-dark text-white" id="commit-message" rows="3"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="confirm-commit-btn">Commit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Exec Container Modal -->
|
|
<div class="modal fade" id="execContainerModal" tabindex="-1" aria-labelledby="execContainerModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="execContainerModalLabel">Execute Command in Container</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="execContainerForm">
|
|
<div class="mb-3">
|
|
<label for="exec-command" class="form-label">Command</label>
|
|
<input type="text" class="form-control bg-dark text-white font-monospace" id="exec-command" value="/bin/sh" required>
|
|
<small class="text-muted">Enter command to execute (e.g., /bin/sh, /bin/bash, ls -la)</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="confirm-exec-btn">Execute</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tag Image Modal -->
|
|
<div class="modal fade" id="tagImageModal" tabindex="-1" aria-labelledby="tagImageModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="tagImageModalLabel">Tag Image</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="tagImageForm">
|
|
<div class="mb-3">
|
|
<label for="tag-repo" class="form-label">Repository Name</label>
|
|
<input type="text" class="form-control bg-dark text-white" id="tag-repo" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="tag-tag" class="form-label">Tag</label>
|
|
<input type="text" class="form-control bg-dark text-white" id="tag-tag" value="latest">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="confirm-tag-btn">Tag</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connect Container to Network Modal -->
|
|
<div class="modal fade" id="connectNetworkModal" tabindex="-1" aria-labelledby="connectNetworkModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="connectNetworkModalLabel">Connect Container to Network</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="connectNetworkForm">
|
|
<div class="mb-3">
|
|
<label for="connect-container-select" class="form-label">Select Container</label>
|
|
<select class="form-select bg-dark text-white" id="connect-container-select" required>
|
|
<option value="">Loading containers...</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="confirm-connect-btn">Connect</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Network Modal -->
|
|
<div class="modal fade" id="createNetworkModal" tabindex="-1" aria-labelledby="createNetworkModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="createNetworkModalLabel"><i class="fas fa-plus me-2"></i>Create Network</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="create-network-form">
|
|
<div class="mb-3">
|
|
<label for="network-name" class="form-label">Network Name</label>
|
|
<input type="text" id="network-name" class="form-control bg-dark text-white" placeholder="my-network" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="network-driver" class="form-label">Driver</label>
|
|
<select id="network-driver" class="form-select bg-dark text-white">
|
|
<option value="bridge">Bridge</option>
|
|
<option value="overlay">Overlay</option>
|
|
<option value="macvlan">Macvlan</option>
|
|
<option value="host">Host</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="network-subnet" class="form-label">Subnet (Optional)</label>
|
|
<input type="text" id="network-subnet" class="form-control bg-dark text-white" placeholder="172.20.0.0/16">
|
|
<small class="text-muted">CIDR notation (e.g., 172.20.0.0/16)</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="createNetwork()">
|
|
<i class="fas fa-plus me-2"></i>Create Network
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Volume Modal -->
|
|
<div class="modal fade" id="createVolumeModal" tabindex="-1" aria-labelledby="createVolumeModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="createVolumeModalLabel"><i class="fas fa-plus me-2"></i>Create Volume</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="create-volume-form">
|
|
<div class="mb-3">
|
|
<label for="volume-name" class="form-label">Volume Name</label>
|
|
<input type="text" id="volume-name" class="form-control bg-dark text-white" placeholder="my-volume" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="volume-driver" class="form-label">Driver (Optional)</label>
|
|
<input type="text" id="volume-driver" class="form-control bg-dark text-white" placeholder="local">
|
|
<small class="text-muted">Leave empty for default local driver</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="createVolume()">
|
|
<i class="fas fa-plus me-2"></i>Create Volume
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legacy Alert Container (kept for backward compatibility, will be hidden) -->
|
|
<div id="alert-container" class="position-fixed top-0 start-50 translate-middle-x mt-3"
|
|
style="z-index: 1051; max-width: 90%; display: none;"></div>
|
|
|
|
|
|
<!-- xterm.js and addons loaded via script tags for UMD compatibility -->
|
|
<!-- Scripts load synchronously before modules -->
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm-addon-fit.js"></script>
|
|
<script>
|
|
// Verify xterm and FitAddon are loaded immediately after scripts
|
|
if (typeof window.Terminal === 'undefined') {
|
|
console.error('xterm.js failed to load');
|
|
} else {
|
|
console.log('xterm.js loaded successfully');
|
|
}
|
|
if (typeof window.FitAddon === 'undefined') {
|
|
console.error('xterm-addon-fit failed to load');
|
|
// Check for alternative namespaces
|
|
console.log('Checking alternative namespaces...');
|
|
console.log('window.xterm:', window.xterm);
|
|
console.log('window.xtermAddonFit:', window.xtermAddonFit);
|
|
console.log('Available window properties:', Object.keys(window).filter(k => k.toLowerCase().includes('fit') || k.toLowerCase().includes('xterm')));
|
|
} else {
|
|
console.log('xterm-addon-fit loaded successfully');
|
|
console.log('FitAddon type:', typeof window.FitAddon);
|
|
console.log('FitAddon is function:', typeof window.FitAddon === 'function');
|
|
console.log('FitAddon value:', window.FitAddon);
|
|
// Test if it's a constructor (check for nested FitAddon property)
|
|
try {
|
|
const FitAddonConstructor = window.FitAddon.FitAddon || window.FitAddon;
|
|
if (typeof FitAddonConstructor === 'function') {
|
|
const test = new FitAddonConstructor();
|
|
console.log('FitAddon constructor test: SUCCESS (using', window.FitAddon.FitAddon ? 'nested' : 'direct', 'property)');
|
|
} else {
|
|
console.error('FitAddon constructor test: FAILED - not a function');
|
|
}
|
|
} catch (e) {
|
|
console.error('FitAddon constructor test: FAILED', e);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Your App JS -->
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
|
|
</html> |