mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2025-11-12 00:06:09 +01:00
n8n specific improvements
This commit is contained in:
usmannasir
@@ -475,10 +475,10 @@
|
||||
<div ng-show="ContainerList.length > 0">
|
||||
<div ng-repeat="web in ContainerList">
|
||||
<!-- n8n Container Section -->
|
||||
<div ng-if="web.name.includes('n8n')" class="n8n-container">
|
||||
<div ng-if="web.environment && web.environment.some(env => env.includes('n8n'))" class="n8n-container">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h3 class="m-0">
|
||||
<i class="fa fa-cube"></i> n8n Container
|
||||
<i class="fa fa-cube"></i> n8n Container: {$ web.name $}
|
||||
<span class="workflow-status" ng-class="{'active': web.status === 'running', 'error': web.status !== 'running'}">
|
||||
{$ web.status $}
|
||||
</span>
|
||||
@@ -493,54 +493,153 @@
|
||||
<button class="quick-action-btn btn-danger" ng-click="handleAction('stop', web)" ng-if="web.status === 'running'">
|
||||
<i class="fa fa-stop"></i> Stop
|
||||
</button>
|
||||
<a class="quick-action-btn btn-primary" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}" target="_blank" ng-if="web.status === 'running'">
|
||||
<button class="quick-action-btn btn-primary" ng-click="openSettings(web)">
|
||||
<i class="fa fa-cog"></i> Settings
|
||||
</button>
|
||||
<a class="quick-action-btn btn-info" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}" target="_blank" ng-if="web.status === 'running'">
|
||||
<i class="fa fa-external-link"></i> Open n8n
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="n8n-metrics">
|
||||
<div class="metric-card">
|
||||
<h5>Memory Usage</h5>
|
||||
<div class="value">{$ web.memoryUsage $}</div>
|
||||
<div class="progress mt-2">
|
||||
<div class="progress-bar" role="progressbar"
|
||||
ng-style="{'width': web.memoryUsagePercent + '%'}"
|
||||
aria-valuenow="{$ web.memoryUsagePercent $}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
<div class="container-fluid p-0 mt-4">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6">
|
||||
<div class="info-box shadow-sm">
|
||||
<h4 class="border-bottom pb-2 mb-3">Resource Usage</h4>
|
||||
<div class="n8n-metrics">
|
||||
<div class="metric-card">
|
||||
<h5>Memory Usage</h5>
|
||||
<div class="value">{$ web.memoryUsage $}</div>
|
||||
<div class="progress mt-2">
|
||||
<div class="progress-bar" role="progressbar"
|
||||
ng-style="{'width': web.memoryUsagePercent + '%'}"
|
||||
aria-valuenow="{$ web.memoryUsagePercent $}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<h5>CPU Usage</h5>
|
||||
<div class="value">{$ web.cpuUsagePercent | number:1 $}%</div>
|
||||
<div class="progress mt-2">
|
||||
<div class="progress-bar" role="progressbar"
|
||||
ng-style="{'width': web.cpuUsagePercent + '%'}"
|
||||
aria-valuenow="{$ web.cpuUsagePercent $}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<h5>Container Uptime</h5>
|
||||
<div class="value">{$ web.uptime $}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box shadow-sm mt-4">
|
||||
<h4 class="border-bottom pb-2 mb-3">Network & Ports</h4>
|
||||
<div ng-if="web.ports">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container Port</th>
|
||||
<th>Host Binding</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="(containerPort, hostBindings) in web.ports">
|
||||
<td><code>{$ containerPort $}</code></td>
|
||||
<td>
|
||||
<span ng-repeat="binding in hostBindings" class="badge bg-light text-dark me-2">
|
||||
{$ binding.HostIp || '0.0.0.0' $}:{$ binding.HostPort $}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="info-box shadow-sm">
|
||||
<h4 class="border-bottom pb-2 mb-3">Volumes</h4>
|
||||
<div ng-if="web.volumes && web.volumes.length > 0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Source</th>
|
||||
<th>Destination</th>
|
||||
<th>Mode</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="volume in web.volumes">
|
||||
<td><code>{$ volume.Source $}</code></td>
|
||||
<td><code>{$ volume.Destination $}</code></td>
|
||||
<td><span class="badge bg-secondary">{$ volume.Mode $}</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="!web.volumes || web.volumes.length === 0" class="text-muted">
|
||||
<p class="mb-0">No volumes mounted</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box shadow-sm mt-4">
|
||||
<h4 class="border-bottom pb-2 mb-3">Environment Variables</h4>
|
||||
<div ng-if="web.environment && web.environment.length > 0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="env in web.environment">
|
||||
<td><code>{$ env.split('=')[0] $}</code></td>
|
||||
<td>
|
||||
<code ng-if="env.split('=')[1] === '********'">{$ env.split('=')[1] $}</code>
|
||||
<code ng-if="env.split('=')[1] !== '********'">{$ env.split('=')[1] $}</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="!web.environment || web.environment.length === 0" class="text-muted">
|
||||
<p class="mb-0">No environment variables set</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<h5>CPU Usage</h5>
|
||||
<div class="value">{$ web.cpuUsagePercent | number:1 $}%</div>
|
||||
<div class="progress mt-2">
|
||||
<div class="progress-bar" role="progressbar"
|
||||
ng-style="{'width': web.cpuUsagePercent + '%'}"
|
||||
aria-valuenow="{$ web.cpuUsagePercent $}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<h5>Container Uptime</h5>
|
||||
<div class="value">{$ web.uptime $}</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<h5>Port Mapping</h5>
|
||||
<div class="value">
|
||||
<span class="badge bg-light text-dark">
|
||||
{$ web.ports['5678/tcp'][0].HostPort $}
|
||||
|
||||
<div class="info-box shadow-sm mt-4">
|
||||
<h4 class="border-bottom pb-2 mb-3">
|
||||
{% trans "Logs" %}
|
||||
<span style="cursor:pointer;" class="float-end" ng-click="getcontainerlog(web.id)">
|
||||
<i class="fa fa-refresh btn-icon"></i>
|
||||
</span>
|
||||
</h4>
|
||||
<div class="content-box-wrapper">
|
||||
<textarea name="logs" class="form-control" cols="30" rows="10">{$ web.logs $}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Regular Container Section -->
|
||||
<div ng-if="!web.name.includes('n8n')" class="mb-5">
|
||||
<div ng-if="!web.environment || !web.environment.some(env => env.includes('n8n'))" class="mb-5">
|
||||
<div id="page-title" class="mb-4">
|
||||
<h2 id="domainNamePage" class="d-flex justify-content-between align-items-center">
|
||||
<span>{% trans "Currently managing: " %} {$ web.name $}</span>
|
||||
|
||||
Reference in New Issue
Block a user