mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-01-15 20:12:06 +01:00
add additional info to docker js update
This commit is contained in:
usmannasir
@@ -24,26 +24,30 @@
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-box-header {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.info-box-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.info-box-content {
|
||||
@@ -51,153 +55,122 @@
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
border-radius: 50px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge.running {
|
||||
background-color: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.status-badge.stopped {
|
||||
background-color: #ffebee;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.status-badge::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-badge.running::before {
|
||||
background-color: #2e7d32;
|
||||
.status-running {
|
||||
background: #e3fcef;
|
||||
color: #00a651;
|
||||
}
|
||||
|
||||
.status-badge.stopped::before {
|
||||
background-color: #c62828;
|
||||
.status-stopped {
|
||||
background: #fee7e7;
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.resource-meter {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.resource-meter .label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
color: #495057;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background: #f1f3f4;
|
||||
border-radius: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #e9ecef;
|
||||
margin-bottom: 5px;
|
||||
margin: 8px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
border-radius: 4px;
|
||||
.resource-meter-fill {
|
||||
height: 100%;
|
||||
background: #2196F3;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-bar-memory {
|
||||
background-color: #2196f3;
|
||||
.resource-meter-fill.warning {
|
||||
background: #ff9800;
|
||||
}
|
||||
|
||||
.progress-bar-cpu {
|
||||
background-color: #4caf50;
|
||||
.resource-meter-fill.danger {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
.table {
|
||||
margin: 0;
|
||||
.detail-table {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
.detail-table th {
|
||||
background: #f8f9fa;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding: 12px;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
color: #495057;
|
||||
font-size: 13px;
|
||||
border-color: #e9ecef;
|
||||
.detail-table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.env-table td:first-child {
|
||||
.detail-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.env-var {
|
||||
font-family: monospace;
|
||||
color: #2196f3;
|
||||
background: #f8f9fa;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.masked-value {
|
||||
font-family: monospace;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.logs-section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.logs-content {
|
||||
background: #1e1e1e;
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
.action-buttons .btn {
|
||||
margin-right: 10px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
padding: 6px 15px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 8px;
|
||||
.logs-section {
|
||||
background: #1e1e1e;
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
margin-top: 20px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6c757d;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin-left: 10px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
transform: rotate(180deg);
|
||||
.logs-section pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.container-fluid {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
margin-bottom: 0;
|
||||
.action-buttons .btn {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -211,190 +184,150 @@
|
||||
|
||||
<div class="container-fluid" ng-controller="ListDockersitecontainer">
|
||||
<div class="page-header">
|
||||
<h2>{% trans "Currently Managing:" %} {$ cName $}
|
||||
<button class="refresh-button" ng-click="refreshStatus()">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="info-box">
|
||||
<div class="info-box-header">
|
||||
<h4>{% trans "Basic Information" %}</h4>
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<p><strong>Container ID:</strong> {$ cid $}</p>
|
||||
<p>
|
||||
<strong>Status:</strong>
|
||||
<span class="status-badge" ng-class="status">{$ status $}</span>
|
||||
</p>
|
||||
<p><strong>Created:</strong> {$ created | date:'medium' $}</p>
|
||||
<p><strong>Uptime:</strong> {$ uptime $}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-box-header">
|
||||
<h4>{% trans "Resource Usage" %}</h4>
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<div class="resource-meter">
|
||||
<div class="label">
|
||||
<span>Memory Usage</span>
|
||||
<span>{$ memoryUsagePercent | number:1 $}%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-memory"
|
||||
ng-style="{'width': memoryUsagePercent + '%'}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resource-meter">
|
||||
<div class="label">
|
||||
<span>CPU Usage</span>
|
||||
<span>{$ cpuUsagePercent | number:1 $}%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-cpu"
|
||||
ng-style="{'width': cpuUsagePercent + '%'}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="info-box">
|
||||
<div class="info-box-header">
|
||||
<h4>{% trans "Network & Ports" %}</h4>
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<div class="table-responsive" ng-if="ports && (ports | objLength) > 0">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container Port</th>
|
||||
<th>Host Binding</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="(containerPort, hostBindings) in ports">
|
||||
<td>{$ containerPort $}</td>
|
||||
<td>
|
||||
<span ng-repeat="binding in hostBindings">
|
||||
{$ binding.HostIp || '0.0.0.0' $}:{$ binding.HostPort $}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p ng-if="!ports || (ports | objLength) === 0" class="text-muted">
|
||||
No ports exposed
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-box-header">
|
||||
<h4>{% trans "Volumes" %}</h4>
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<div class="table-responsive" ng-if="volumes && volumes.length > 0">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Source</th>
|
||||
<th>Destination</th>
|
||||
<th>Mode</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="volume in volumes">
|
||||
<td>{$ volume.Source $}</td>
|
||||
<td>{$ volume.Destination $}</td>
|
||||
<td>{$ volume.Mode $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p ng-if="!volumes || volumes.length === 0" class="text-muted">
|
||||
No volumes mounted
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>{% trans "Container Management" %}</h2>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="info-box">
|
||||
<div class="info-box-header">
|
||||
<h4>{% trans "Environment Variables" %}</h4>
|
||||
<h4>Basic Information</h4>
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<div class="table-responsive" ng-if="environment && environment.length > 0">
|
||||
<table class="table env-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="env in environment">
|
||||
<td>{$ env.split('=')[0] $}</td>
|
||||
<td ng-class="{'masked-value': env.includes('********')}">{$ env.split('=')[1] $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p><strong>Container ID:</strong> <span class="env-var">{$ cid $}</span></p>
|
||||
<p><strong>Status:</strong>
|
||||
<span class="status-badge" ng-class="{'status-running': status === 'running', 'status-stopped': status === 'stopped'}">{$ status $}</span>
|
||||
</p>
|
||||
<p><strong>Created:</strong> {$ created | date:'medium' $}</p>
|
||||
<p><strong>Uptime:</strong> {$ uptime $}</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p><strong>Memory Usage</strong></p>
|
||||
<div class="resource-meter">
|
||||
<div class="resource-meter-fill"
|
||||
ng-class="{'warning': memoryUsagePercent > 70, 'danger': memoryUsagePercent > 85}"
|
||||
ng-style="{'width': memoryUsagePercent + '%'}">
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted">{$ memoryUsage $}</p>
|
||||
|
||||
<p><strong>CPU Usage</strong></p>
|
||||
<div class="resource-meter">
|
||||
<div class="resource-meter-fill"
|
||||
ng-class="{'warning': cpuUsagePercent > 70, 'danger': cpuUsagePercent > 85}"
|
||||
ng-style="{'width': cpuUsagePercent + '%'}">
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted">{$ cpuUsagePercent | number:1 $}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<p ng-if="!environment || environment.length === 0" class="text-muted">
|
||||
No environment variables set
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="info-box logs-section">
|
||||
<div class="info-box">
|
||||
<div class="info-box-header">
|
||||
<h4>{% trans "Container Logs" %}</h4>
|
||||
<h4>Network & Ports</h4>
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<div class="logs-content">
|
||||
<table class="detail-table" ng-if="ports && (ports | objLength) > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container Port</th>
|
||||
<th>Host Binding</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="(containerPort, hostBindings) in ports">
|
||||
<td class="env-var">{$ containerPort $}</td>
|
||||
<td>
|
||||
<span ng-repeat="binding in hostBindings" class="env-var">
|
||||
{$ binding.HostIp || '0.0.0.0' $}:{$ binding.HostPort $}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p ng-if="!ports || (ports | objLength) === 0" class="text-muted">No ports exposed</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-box-header">
|
||||
<h4>Volumes</h4>
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<table class="detail-table" ng-if="volumes && volumes.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Source</th>
|
||||
<th>Destination</th>
|
||||
<th>Mode</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="volume in volumes">
|
||||
<td class="env-var">{$ volume.Source $}</td>
|
||||
<td class="env-var">{$ volume.Destination $}</td>
|
||||
<td>{$ volume.Mode $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p ng-if="!volumes || volumes.length === 0" class="text-muted">No volumes mounted</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-box-header">
|
||||
<h4>Environment Variables</h4>
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<table class="detail-table" ng-if="environment && environment.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="env in environment">
|
||||
<td class="env-var">{$ env.split('=')[0] $}</td>
|
||||
<td ng-class="{'masked-value': env.includes('********')}">{$ env.split('=')[1] $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p ng-if="!environment || environment.length === 0" class="text-muted">No environment variables set</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-box-header">
|
||||
<h4>Container Logs</h4>
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
<div class="logs-section">
|
||||
<pre ng-bind="logs"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button ng-disabled="status=='running'" class="btn btn-success" ng-click="cAction('start')">
|
||||
<i class="fas fa-play btn-icon"></i> Start
|
||||
</button>
|
||||
<button ng-disabled="status!='running'" class="btn btn-primary" ng-click="restarthStatus()">
|
||||
<i class="fas fa-sync-alt btn-icon"></i> Restart
|
||||
</button>
|
||||
<button ng-disabled="status!='running'" class="btn btn-danger" ng-click="StopContainerAPP()">
|
||||
<i class="fas fa-stop btn-icon"></i> Stop
|
||||
</button>
|
||||
<button class="btn btn-warning" data-toggle="modal" data-target="#Recreatedockerapp">
|
||||
<i class="fas fa-redo btn-icon"></i> Recreate
|
||||
</button>
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-success" ng-disabled="status=='running'" ng-click="cAction('start')">
|
||||
<i class="fa fa-play"></i> Start
|
||||
</button>
|
||||
<button class="btn btn-warning" ng-disabled="status!='running'" ng-click="restarthStatus()">
|
||||
<i class="fa fa-refresh"></i> Restart
|
||||
</button>
|
||||
<button class="btn btn-danger" ng-disabled="status!='running'" ng-click="StopContainerAPP()">
|
||||
<i class="fa fa-stop"></i> Stop
|
||||
</button>
|
||||
<button class="btn btn-info" ng-click="refreshStatus()">
|
||||
<i class="fa fa-sync"></i> Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "websiteFunctions/dockerRecreateModal.html" %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user