mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2025-11-10 15:26:13 +01:00
add additional info to docker js update
This commit is contained in:
usmannasir
@@ -12,28 +12,10 @@
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert {
|
|
||||||
border-radius: 0;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding: 12px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-info {
|
|
||||||
background-color: #f0f6ff;
|
|
||||||
border-color: #e5eeff;
|
|
||||||
color: #5c7cff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-warning {
|
|
||||||
background-color: #fff8e6;
|
|
||||||
border-color: #ffe5b2;
|
|
||||||
color: #b97900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
margin: 0 0 20px;
|
margin-bottom: 30px;
|
||||||
padding-bottom: 15px;
|
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header h2 {
|
.page-header h2 {
|
||||||
@@ -42,320 +24,291 @@
|
|||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-section {
|
.info-box {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-section .header {
|
.info-box-header {
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #e9ecef;
|
||||||
background: #fafafa;
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-section .header h3 {
|
.info-box-header h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #495057;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-section .content {
|
.info-box-content {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item {
|
|
||||||
background: #fff;
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item h4 {
|
|
||||||
margin: 0 0 15px;
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
.status-badge {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
padding: 4px 8px;
|
align-items: center;
|
||||||
border-radius: 12px;
|
padding: 6px 12px;
|
||||||
font-size: 12px;
|
border-radius: 50px;
|
||||||
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-running {
|
.status-badge.running {
|
||||||
background: #e6fff0;
|
background-color: #e8f5e9;
|
||||||
color: #00b341;
|
color: #2e7d32;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-stopped {
|
.status-badge.stopped {
|
||||||
background: #ffe6e6;
|
background-color: #ffebee;
|
||||||
color: #ff0000;
|
color: #c62828;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-bar {
|
.status-badge::before {
|
||||||
height: 6px;
|
content: '';
|
||||||
background: #eee;
|
display: inline-block;
|
||||||
border-radius: 3px;
|
width: 8px;
|
||||||
margin: 8px 0;
|
height: 8px;
|
||||||
overflow: hidden;
|
border-radius: 50%;
|
||||||
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-bar .fill {
|
.status-badge.running::before {
|
||||||
height: 100%;
|
background-color: #2e7d32;
|
||||||
background: #2196F3;
|
}
|
||||||
border-radius: 3px;
|
|
||||||
|
.status-badge.stopped::before {
|
||||||
|
background-color: #c62828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-meter {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-meter .label {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #495057;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #e9ecef;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
border-radius: 4px;
|
||||||
transition: width 0.3s ease;
|
transition: width 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-bar .fill.high {
|
.progress-bar-memory {
|
||||||
background: #ff4444;
|
background-color: #2196f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-cpu {
|
||||||
|
background-color: #4caf50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table > thead > tr > th {
|
.table thead th {
|
||||||
background: #fafafa;
|
background: #f8f9fa;
|
||||||
border-bottom: 2px solid #eee;
|
border-bottom: 2px solid #dee2e6;
|
||||||
color: #666;
|
color: #495057;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 12px 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table > tbody > tr > td {
|
.table td {
|
||||||
padding: 12px 15px;
|
vertical-align: middle;
|
||||||
border-top: 1px solid #eee;
|
color: #495057;
|
||||||
color: #333;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
border-color: #e9ecef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-striped > tbody > tr:nth-of-type(odd) {
|
.env-table td:first-child {
|
||||||
background-color: #fafafa;
|
font-family: monospace;
|
||||||
|
color: #2196f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masked-value {
|
||||||
|
font-family: monospace;
|
||||||
|
color: #9e9e9e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logs-section {
|
.logs-section {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-content {
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logs-section pre {
|
.btn {
|
||||||
margin: 0;
|
padding: 8px 16px;
|
||||||
white-space: pre-wrap;
|
border-radius: 4px;
|
||||||
word-wrap: break-word;
|
font-weight: 500;
|
||||||
color: #d4d4d4;
|
transition: all 0.2s;
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-action {
|
.btn-icon {
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-recreate {
|
.refresh-button {
|
||||||
background: #ff9800;
|
background: none;
|
||||||
color: #fff;
|
|
||||||
border: none;
|
border: none;
|
||||||
|
color: #6c757d;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-recreate:hover {
|
.refresh-button:hover {
|
||||||
background: #f57c00;
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Environment Variables Table */
|
|
||||||
.env-table td:first-child {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.env-table td:last-child {
|
|
||||||
font-family: monospace;
|
|
||||||
background: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.masked-value {
|
|
||||||
color: #999;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.info-grid {
|
.info-box {
|
||||||
grid-template-columns: 1fr;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-section .content {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-responsive {
|
.table-responsive {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('[data-toggle="tooltip"]').tooltip();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<div class="container-fluid" ng-controller="ListDockersitecontainer">
|
<div class="container-fluid" ng-controller="ListDockersitecontainer">
|
||||||
<div class="alert alert-info">
|
|
||||||
{% trans "Looks like something is wrong with your initial setup, please double check on Setup Wizard." %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="alert alert-warning">
|
|
||||||
{% trans "Looks like your websites are not secured with automatic backups." %}
|
|
||||||
<a href="#" class="alert-link">Configure now</a>.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h2>{% trans "CONTAINERS" %}</h2>
|
<h2>{% trans "Currently Managing:" %} {$ cName $}
|
||||||
<small>{% trans "Manage containers on server" %}</small>
|
<button class="refresh-button" ng-click="refreshStatus()">
|
||||||
|
<i class="fas fa-sync-alt"></i>
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Container List Section -->
|
<div class="row">
|
||||||
<div class="info-section" ng-show="conatinerview">
|
<div class="col-md-6">
|
||||||
<div class="header">
|
<div class="info-box">
|
||||||
<h3>{% trans "Available Containers" %}</h3>
|
<div class="info-box-header">
|
||||||
<span style="display: none" id="sitename">{{ dockerSite.SiteName }}</span>
|
<h4>{% trans "Basic Information" %}</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="info-box-content">
|
||||||
<div class="table-responsive">
|
<p><strong>Container ID:</strong> {$ cid $}</p>
|
||||||
<table class="table table-hover">
|
<p>
|
||||||
<thead>
|
<strong>Status:</strong>
|
||||||
<tr>
|
<span class="status-badge" ng-class="status">{$ status $}</span>
|
||||||
<th>Name</th>
|
</p>
|
||||||
<th>Launch</th>
|
<p><strong>Created:</strong> {$ created | date:'medium' $}</p>
|
||||||
</tr>
|
<p><strong>Uptime:</strong> {$ uptime $}</p>
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr ng-repeat="web in ContainerList track by $index">
|
|
||||||
<td>
|
|
||||||
<div class="container-name">{$ web.name $}</div>
|
|
||||||
</td>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Container Details Section -->
|
|
||||||
<div ng-hide="conatinerview">
|
|
||||||
<div class="info-section">
|
|
||||||
<div class="header">
|
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
<h3>
|
|
||||||
{% trans "Container:" %} {$ cName $}
|
|
||||||
<small class="text-muted">ID: {$ cid $}</small>
|
|
||||||
</h3>
|
|
||||||
<div class="actions">
|
|
||||||
<button class="btn btn-primary btn-sm" ng-click="refreshStatus()">
|
|
||||||
<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 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>
|
|
||||||
|
|
||||||
<!-- Resource Usage -->
|
<div class="info-box">
|
||||||
<div class="info-item">
|
<div class="info-box-header">
|
||||||
<h4>{% trans "Resource Usage" %}</h4>
|
<h4>{% trans "Resource Usage" %}</h4>
|
||||||
<p>Memory Usage</p>
|
</div>
|
||||||
<div class="resource-bar">
|
<div class="info-box-content">
|
||||||
<div class="fill" ng-class="{'high': memoryUsagePercent > 80}"
|
<div class="resource-meter">
|
||||||
ng-style="{'width': memoryUsagePercent + '%'}"></div>
|
<div class="label">
|
||||||
|
<span>Memory Usage</span>
|
||||||
|
<span>{$ memoryUsagePercent | number:1 $}%</span>
|
||||||
</div>
|
</div>
|
||||||
<p>CPU Usage</p>
|
<div class="progress">
|
||||||
<div class="resource-bar">
|
<div class="progress-bar progress-bar-memory"
|
||||||
<div class="fill" ng-class="{'high': cpuUsagePercent > 80}"
|
ng-style="{'width': memoryUsagePercent + '%'}"
|
||||||
ng-style="{'width': cpuUsagePercent + '%'}"></div>
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Volumes -->
|
<div class="col-md-6">
|
||||||
<div class="info-item">
|
<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>
|
<h4>{% trans "Volumes" %}</h4>
|
||||||
<div class="table-responsive" ng-if="volumes && volumes.length">
|
</div>
|
||||||
<table class="table table-striped">
|
<div class="info-box-content">
|
||||||
|
<div class="table-responsive" ng-if="volumes && volumes.length > 0">
|
||||||
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Source</th>
|
<th>Source</th>
|
||||||
@@ -372,14 +325,23 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<p ng-if="!volumes || !volumes.length" class="text-muted">No volumes mounted</p>
|
<p ng-if="!volumes || volumes.length === 0" class="text-muted">
|
||||||
|
No volumes mounted
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Environment Variables -->
|
<div class="row">
|
||||||
<div class="info-item">
|
<div class="col-md-12">
|
||||||
|
<div class="info-box">
|
||||||
|
<div class="info-box-header">
|
||||||
<h4>{% trans "Environment Variables" %}</h4>
|
<h4>{% trans "Environment Variables" %}</h4>
|
||||||
<div class="table-responsive" ng-if="environment && environment.length">
|
</div>
|
||||||
<table class="table table-striped env-table">
|
<div class="info-box-content">
|
||||||
|
<div class="table-responsive" ng-if="environment && environment.length > 0">
|
||||||
|
<table class="table env-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Variable</th>
|
<th>Variable</th>
|
||||||
@@ -394,21 +356,45 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<p ng-if="!environment || !environment.length" class="text-muted">No environment variables set</p>
|
<p ng-if="!environment || environment.length === 0" class="text-muted">
|
||||||
</div>
|
No environment variables set
|
||||||
|
</p>
|
||||||
<!-- Logs -->
|
|
||||||
<div class="logs-section">
|
|
||||||
<h4>{% trans "Container Logs" %}</h4>
|
|
||||||
<pre ng-bind="logs"></pre>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="info-box logs-section">
|
||||||
|
<div class="info-box-header">
|
||||||
|
<h4>{% trans "Container Logs" %}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="info-box-content">
|
||||||
|
<div class="logs-content">
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
{% include "websiteFunctions/dockerRecreateModal.html" %}
|
||||||
$(document).ready(function() {
|
|
||||||
$('[data-toggle="tooltip"]').tooltip();
|
{% endblock %}
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user