mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2025-11-10 23:36:11 +01:00
add additional info to docker js update
This commit is contained in:
usmannasir
@@ -215,6 +215,36 @@
|
|||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-name {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.btn-sm {
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.btn-sm i {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
.text-muted {
|
||||||
|
color: #666;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.d-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.justify-content-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.align-items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="container-fluid" ng-controller="ListDockersitecontainer">
|
<div class="container-fluid" ng-controller="ListDockersitecontainer">
|
||||||
@@ -232,92 +262,146 @@
|
|||||||
<small>{% trans "Manage containers on server" %}</small>
|
<small>{% trans "Manage containers on server" %}</small>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="info-section">
|
<!-- Container List Section -->
|
||||||
|
<div class="info-section" ng-show="conatinerview">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h3>{% trans "CONTAINERS" %} {$ cName $}</h3>
|
<h3>{% trans "Available Containers" %}</h3>
|
||||||
|
<span style="display: none" id="sitename">{{ dockerSite.SiteName }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="info-grid">
|
<div class="table-responsive">
|
||||||
<!-- Basic Information -->
|
<table class="table table-hover">
|
||||||
<div class="info-item">
|
<thead>
|
||||||
<h4>{% trans "Basic Information" %}</h4>
|
<tr>
|
||||||
<p><strong>Container ID:</strong> {$ cid $}</p>
|
<th>Name</th>
|
||||||
<p>
|
<th>Launch</th>
|
||||||
<strong>Status:</strong>
|
</tr>
|
||||||
<span class="status-badge" ng-class="{'status-running': status === 'running', 'status-stopped': status !== 'running'}">
|
</thead>
|
||||||
{$ status $}
|
<tbody>
|
||||||
</span>
|
<tr ng-repeat="web in ContainerList track by $index">
|
||||||
</p>
|
<td>
|
||||||
<p><strong>Created:</strong> {$ created | date:'medium' $}</p>
|
<div class="container-name">{$ web.name $}</div>
|
||||||
<p><strong>Uptime:</strong> {$ uptime $}</p>
|
</td>
|
||||||
</div>
|
<td>
|
||||||
|
<button class="btn btn-primary btn-sm" ng-click="Lunchcontainer(web.id)">
|
||||||
|
<i class="fa fa-external-link"></i> Launch
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="listFail" class="alert alert-danger" style="display: none;">
|
||||||
|
<p>{% trans "Error message:" %} {$ errorMessage $}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Resource Usage -->
|
<!-- Container Details Section -->
|
||||||
<div class="info-item">
|
<div ng-hide="conatinerview">
|
||||||
<h4>{% trans "Resource Usage" %}</h4>
|
<div class="info-section">
|
||||||
<p>Memory Usage</p>
|
<div class="header">
|
||||||
<div class="resource-bar">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<div class="fill" ng-class="{'high': memoryUsagePercent > 80}"
|
<h3>
|
||||||
ng-style="{'width': memoryUsagePercent + '%'}"></div>
|
{% trans "Container:" %} {$ cName $}
|
||||||
</div>
|
<small class="text-muted">ID: {$ cid $}</small>
|
||||||
<p>CPU Usage</p>
|
</h3>
|
||||||
<div class="resource-bar">
|
<div class="actions">
|
||||||
<div class="fill" ng-class="{'high': cpuUsagePercent > 80}"
|
<button class="btn btn-primary btn-sm" ng-click="refreshStatus()">
|
||||||
ng-style="{'width': cpuUsagePercent + '%'}"></div>
|
<i class="fa fa-refresh"></i> Refresh
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#Recreatedockerapp">
|
||||||
|
<i class="fa fa-recycle"></i> Recreate
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-default btn-sm" ng-click="conatinerview = true">
|
||||||
|
<i class="fa fa-arrow-left"></i> Back
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="info-grid">
|
||||||
|
<!-- Basic Information -->
|
||||||
|
<div class="info-item">
|
||||||
|
<h4>{% trans "Basic Information" %}</h4>
|
||||||
|
<p><strong>Container ID:</strong> {$ cid $}</p>
|
||||||
|
<p>
|
||||||
|
<strong>Status:</strong>
|
||||||
|
<span class="status-badge" ng-class="{'status-running': status === 'running', 'status-stopped': status !== 'running'}">
|
||||||
|
{$ status $}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p><strong>Created:</strong> {$ created | date:'medium' $}</p>
|
||||||
|
<p><strong>Uptime:</strong> {$ uptime $}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Volumes -->
|
<!-- Resource Usage -->
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<h4>{% trans "Volumes" %}</h4>
|
<h4>{% trans "Resource Usage" %}</h4>
|
||||||
<div class="table-responsive" ng-if="volumes && volumes.length">
|
<p>Memory Usage</p>
|
||||||
<table class="table table-striped">
|
<div class="resource-bar">
|
||||||
<thead>
|
<div class="fill" ng-class="{'high': memoryUsagePercent > 80}"
|
||||||
<tr>
|
ng-style="{'width': memoryUsagePercent + '%'}"></div>
|
||||||
<th>Source</th>
|
</div>
|
||||||
<th>Destination</th>
|
<p>CPU Usage</p>
|
||||||
<th>Mode</th>
|
<div class="resource-bar">
|
||||||
</tr>
|
<div class="fill" ng-class="{'high': cpuUsagePercent > 80}"
|
||||||
</thead>
|
ng-style="{'width': cpuUsagePercent + '%'}"></div>
|
||||||
<tbody>
|
</div>
|
||||||
<tr ng-repeat="volume in volumes">
|
</div>
|
||||||
<td>{$ volume.Source $}</td>
|
|
||||||
<td>{$ volume.Destination $}</td>
|
|
||||||
<td>{$ volume.Mode $}</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
<p ng-if="!volumes || !volumes.length" class="text-muted">No volumes mounted</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Environment Variables -->
|
<!-- Volumes -->
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<h4>{% trans "Environment Variables" %}</h4>
|
<h4>{% trans "Volumes" %}</h4>
|
||||||
<div class="table-responsive" ng-if="environment && environment.length">
|
<div class="table-responsive" ng-if="volumes && volumes.length">
|
||||||
<table class="table table-striped env-table">
|
<table class="table table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Variable</th>
|
<th>Source</th>
|
||||||
<th>Value</th>
|
<th>Destination</th>
|
||||||
</tr>
|
<th>Mode</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr ng-repeat="env in environment">
|
<tbody>
|
||||||
<td>{$ env.split('=')[0] $}</td>
|
<tr ng-repeat="volume in volumes">
|
||||||
<td ng-class="{'masked-value': env.includes('********')}">{$ env.split('=')[1] $}</td>
|
<td>{$ volume.Source $}</td>
|
||||||
</tr>
|
<td>{$ volume.Destination $}</td>
|
||||||
</tbody>
|
<td>{$ volume.Mode $}</td>
|
||||||
</table>
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p ng-if="!volumes || !volumes.length" class="text-muted">No volumes mounted</p>
|
||||||
</div>
|
</div>
|
||||||
<p ng-if="!environment || !environment.length" class="text-muted">No environment variables set</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Logs -->
|
<!-- Environment Variables -->
|
||||||
<div class="logs-section">
|
<div class="info-item">
|
||||||
<h4>{% trans "Container Logs" %}</h4>
|
<h4>{% trans "Environment Variables" %}</h4>
|
||||||
<pre ng-bind="logs"></pre>
|
<div class="table-responsive" ng-if="environment && environment.length">
|
||||||
|
<table class="table table-striped 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>
|
||||||
|
<p ng-if="!environment || !environment.length" class="text-muted">No environment variables set</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Logs -->
|
||||||
|
<div class="logs-section">
|
||||||
|
<h4>{% trans "Container Logs" %}</h4>
|
||||||
|
<pre ng-bind="logs"></pre>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -325,9 +409,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// Initialize tooltips
|
|
||||||
$('[data-toggle="tooltip"]').tooltip();
|
$('[data-toggle="tooltip"]').tooltip();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user