mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
688 lines
46 KiB
HTML
688 lines
46 KiB
HTML
{% extends 'base.html' %} {% block content %}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">
|
|
<style>
|
|
.active-status {
|
|
color: green
|
|
}
|
|
|
|
.inactive-status {
|
|
color: red !important;
|
|
font-weight: 700
|
|
}
|
|
|
|
.other-status {
|
|
color: orange !important
|
|
}
|
|
</style>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
|
<div class="row g-3 mb-0">
|
|
<div class="col-sm-2">
|
|
<a href="/users" style="text-decoration:none;">
|
|
<div class="card card-one">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto"><span class="bg-primary-lt text-white avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/></svg></span></div>
|
|
<div class="col">
|
|
<div class="font-weight-medium">{{ user_count }}{% if license_type == "Community" %} / 3{% endif %}</div>
|
|
<div class="text-muted">Users</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<a href="/backups" style="text-decoration:none;">
|
|
<div class="card card-one">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto"><span class="bg-primary-lt text-white avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-upload" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"/><path d="M9 15l3 -3l3 3"/><path d="M12 12l0 9"/></svg></span></div>
|
|
<div class="col">
|
|
<div class="font-weight-medium">{{backup_jobs}}</div>
|
|
<div class="text-muted">Backup Jobs</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<a href="/plans" style="text-decoration:none;">
|
|
<div class="card card-one">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto"><span class="bg-primary-lt text-white avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-packages" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"/><path d="M2 13.5v5.5l5 3"/><path d="M7 16.545l5 -3.03"/><path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"/><path d="M12 19l5 3"/><path d="M17 16.5l5 -3"/><path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"/><path d="M7 5.03v5.455"/><path d="M12 8l5 -3"/></svg></span></div>
|
|
<div class="col">
|
|
<div class="font-weight-medium">{{ plan_count }}</div>
|
|
<div class="text-muted">Plans</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-sm-3">
|
|
<a href="{{ url_for('server_cpu_usage') }}" style="text-decoration:none;">
|
|
<div class="card card-one">
|
|
<div id="serverloadIndicator" class="card-status-top bg-primary-lt"></div>
|
|
<div class="card-body">
|
|
|
|
<div class="d-flex align-items-center">
|
|
<div class="subheader">Load Averages</div>
|
|
<div class="ms-auto lh-1">
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle text-secondary" href="javascript:void(0)" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions</a>
|
|
<div class="dropdown-menu dropdown-menu-end" style="">
|
|
<a class="dropdown-item" href="{{ url_for('server_cpu_usage') }}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-list-details"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 5h8" /><path d="M13 9h5" /><path d="M13 15h8" /><path d="M13 19h5" /><path d="M3 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M3 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /></svg> View Processes</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-baseline">
|
|
|
|
|
|
<div class="me-auto">
|
|
<div class="server-load">
|
|
<div class="h3 mb-0 me-2 load"><span class="load-indicator" id="load-indicator"></span> <b><span id="load1min">...</span> <span id="load5min">...</span> <span id="load15min">...</span></b></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-sm-3">
|
|
<a href="{{ url_for('server_memory_usage') }}" style="text-decoration:none;">
|
|
<div class="card card-one">
|
|
<div id="ramIndicator" class="card-status-top bg-primary-lt"></div>
|
|
<div class="card-body">
|
|
|
|
<div class="d-flex align-items-center">
|
|
<div class="subheader">Memory Usage</div>
|
|
<div class="ms-auto lh-1">
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle text-secondary" href="javascript:void(0)" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions</a>
|
|
<div class="dropdown-menu dropdown-menu-end" style="">
|
|
<a class="dropdown-item" href="/server/memory_usage"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-list-details"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 5h8" /><path d="M13 9h5" /><path d="M13 15h8" /><path d="M13 19h5" /><path d="M3 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M3 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /></svg> View Processes</a>
|
|
|
|
<a class="dropdown-item" href="javascript:void(0)" id="clear-cache"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-rocket"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3" /><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3" /><path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg> Clear Cached RAM</a>
|
|
|
|
<a class="d-none dropdown-item" href="/services/resources"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-badge-sd"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M14 9v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z" /><path d="M7 14.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75" /></svg> Create SWAP</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-baseline">
|
|
<div class="h3 mb-0 me-2 ram-info" id="human-readable-info"></div>
|
|
<div class="me-auto">
|
|
<span id="ramIconColor" class="bg-primary-lt text-white d-inline-flex align-items-center lh-1"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#clear-cache').on('click', function(event) {
|
|
event.preventDefault(); // Prevent the default behavior to keep the dropdown open
|
|
var dropdownItem = $(this);
|
|
|
|
$.ajax({
|
|
url: '/server/memory_usage/drop',
|
|
type: 'POST',
|
|
success: function(response) {
|
|
// Update only the "Clear Cached RAM" item
|
|
dropdownItem.html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-rocket"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3" /><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3" /><path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg> ' + response.message);
|
|
},
|
|
error: function(xhr, status, error) {
|
|
// Handle error
|
|
dropdownItem.html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-rocket"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3" /><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3" /><path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg> Error: ' + xhr.responseJSON.message);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="row">
|
|
<div class="row col-md-12">
|
|
<div class="col-md-4 g-3">
|
|
<div class="col-12">
|
|
<div class="card" style="height:28rem">
|
|
<div class="card-header">
|
|
<div>
|
|
<h6 class="card-title">User Activity</h6>
|
|
<p class="card-subtitle">Real-time user activity log.</p>
|
|
</div>
|
|
</div>
|
|
<div id="activity-table" class="card-body card-body-scrollable card-body-scrollable-shadow">
|
|
<div class="divide-y"><span id="shouldbehidden">Users activity log will appear here.</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% if history_usage_graphs %}
|
|
<!-- Include the history_usage_graphs.html template -->
|
|
{% include 'dashboard/usage_graphs.html' %}
|
|
{% endif %}
|
|
|
|
|
|
{% if get_started %}
|
|
<!-- Include the get_started.html template -->
|
|
{% include 'dashboard/get_started.html' %}
|
|
{% endif %}
|
|
|
|
<div class="col-md-4 g-3">
|
|
<div class="card card-one" style="height:28rem">
|
|
<div class="card-header">
|
|
<div>
|
|
<h6 class="card-title">Services Status</h6>
|
|
<p class="card-subtitle">The Service Status table only reports monitored services.</p>
|
|
</div>
|
|
<nav class="nav nav-icon nav-icon-sm ms-auto"><a data-bs-toggle="collapse" class="nav-link collapsed" href="#services_info" role="button" aria-expanded="false" aria-controls="services_info"><i class="bi bi-question-circle"></i></a></nav>
|
|
</div>
|
|
<div class="card-body" style="padding:0;align-content: space-between;display: grid;">
|
|
<div class="collapse p-2" id="services_info" style="">
|
|
<p>Display current status of all monitored system services and docker containers. To add custom services to the list, edit the <code>/etc/openpanel/openadmin/config/services.json</code> file.
|
|
</p>
|
|
|
|
<p>
|
|
<ul>
|
|
<li><span class="legend me-2 bg-success"></span><span>- is currently active and running.</span></li>
|
|
<li><span class="legend me-2 bg-danger"></span><span>- not currently active, either failed or stopped.</span></li>
|
|
<li><span class="legend me-2 bg-primary"></span><span>- not yet started, will auto-start when user/domains are created.</span></li>
|
|
<li><span class="legend me-2 bg-warning"></span><span>- there was a problem getting service status.</span></li>
|
|
</ul>
|
|
<p>
|
|
|
|
<!--p class="text-center text-secondary"><a href="/services/status">Edit Managed Services</a></p-->
|
|
|
|
</div>
|
|
<div id="service-table">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Service</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Loading;</td>
|
|
<td><span class="badge bg-secondary me-1"></span>Checking</td>
|
|
<td><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Restart service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path><path d="M5.63 7.16l0 .01"></path><path d="M4.06 11l0 .01"></path><path d="M4.63 15.1l0 .01"></path><path d="M7.16 18.37l0 .01"></path><path d="M11 19.94l0 .01"></path></svg></a>
|
|
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Stop OpenPanel service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-stop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path></svg></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Loading</td>
|
|
<td><span class="badge bg-secondary me-1"></span>Checking</td>
|
|
<td><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Restart service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path><path d="M5.63 7.16l0 .01"></path><path d="M4.06 11l0 .01"></path><path d="M4.63 15.1l0 .01"></path><path d="M7.16 18.37l0 .01"></path><path d="M11 19.94l0 .01"></path></svg></a>
|
|
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Stop OpenPanel service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-stop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path></svg></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Loading</td>
|
|
<td><span class="badge bg-secondary me-1"></span>Checking</td>
|
|
<td><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Restart service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path><path d="M5.63 7.16l0 .01"></path><path d="M4.06 11l0 .01"></path><path d="M4.63 15.1l0 .01"></path><path d="M7.16 18.37l0 .01"></path><path d="M11 19.94l0 .01"></path></svg></a>
|
|
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Stop OpenPanel service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-stop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path></svg></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Loading</td>
|
|
<td><span class="badge bg-secondary me-1"></span>Checking</td>
|
|
<td><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Restart service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path><path d="M5.63 7.16l0 .01"></path><path d="M4.06 11l0 .01"></path><path d="M4.63 15.1l0 .01"></path><path d="M7.16 18.37l0 .01"></path><path d="M11 19.94l0 .01"></path></svg></a>
|
|
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Stop OpenPanel service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-stop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path></svg></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Loading</td>
|
|
<td><span class="badge bg-secondary me-1"></span>Checking</td>
|
|
<td><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Restart service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path><path d="M5.63 7.16l0 .01"></path><path d="M4.06 11l0 .01"></path><path d="M4.63 15.1l0 .01"></path><path d="M7.16 18.37l0 .01"></path><path d="M11 19.94l0 .01"></path></svg></a>
|
|
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Stop OpenPanel service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-stop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path></svg></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Loading</td>
|
|
<td><span class="badge bg-secondary me-1"></span>Checking</td>
|
|
<td><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Restart service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path><path d="M5.63 7.16l0 .01"></path><path d="M4.06 11l0 .01"></path><path d="M4.63 15.1l0 .01"></path><path d="M7.16 18.37l0 .01"></path><path d="M11 19.94l0 .01"></path></svg></a>
|
|
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Stop OpenPanel service"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-stop" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path></svg></a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-4 g-3">
|
|
<div class="card card-one" style="height:28rem">
|
|
<div class="card-header">
|
|
<div>
|
|
<h6 class="card-title">System Information</h6>
|
|
<p class="card-subtitle">Information about your server configuration.</p>
|
|
</div>
|
|
|
|
<nav class="nav nav-icon nav-icon-sm ms-auto"><a data-bs-toggle="collapse" class="nav-link collapsed" href="#system_info" role="button" aria-expanded="false" aria-controls="system_info"><i class="bi bi-question-circle"></i></a></nav>
|
|
</div>
|
|
<div class="card-body" style="padding:0">
|
|
<div class="collapse p-2" id="system_info" style="">
|
|
<p>Server hardware and OS information</p>
|
|
</div>
|
|
<div id="system-table">
|
|
<table class="table">
|
|
<tbody>
|
|
<tr>
|
|
<td>Hostname</td>
|
|
<td class="text-secondary">
|
|
<div class="placeholder col-12 mb-0"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>OS</td>
|
|
<td class="text-secondary">
|
|
<div class="placeholder col-12 mb-0"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>OpenPanel version</td>
|
|
<td class="text-secondary">
|
|
<div class="placeholder col-12 mb-0"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Server Time</td>
|
|
<td class="text-secondary">
|
|
<div class="placeholder col-12 mb-0" id="server-time"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Kernel</td>
|
|
<td class="text-secondary">
|
|
<div class="placeholder mb-0"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>CPU</td>
|
|
<td class="text-secondary">
|
|
<div class="placeholder col-12 mb-0"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Uptime</td>
|
|
<td class="text-secondary">
|
|
<div class="placeholder col-12 mb-0"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Running Processes</td>
|
|
<td class="text-secondary">
|
|
<div class="placeholder col-12 mb-0"></div>
|
|
</td>
|
|
</tr>
|
|
<tr style="display:none;">
|
|
<td>Package Updates</td>
|
|
<td class="text-secondary">
|
|
<div class="placeholder col-12 mb-0"></div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
{% if license_type == "Community" %}
|
|
{% if try_enterprise %}
|
|
<!-- Include the try_enterprise.html template -->
|
|
{% include 'dashboard/try_enterprise.html' %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
|
|
|
|
{% if openpanel_news %}
|
|
<!-- Include the custom_message.html template -->
|
|
{% include 'dashboard/openpanel_news.html' %}
|
|
{% endif %}
|
|
|
|
|
|
|
|
{% if cpu_per_core_usage %}
|
|
<!-- Include the cpu_per_core_usage.html template -->
|
|
{% include 'dashboard/cpu_per_core_usage.html' %}
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-12 mt-4">
|
|
<div class="card card-one">
|
|
<div class="card-header">
|
|
<div>
|
|
<h6 class="card-title">Disk Usage</h6>
|
|
<p class="card-subtitle">Current partition and hard disk usage.</p>
|
|
</div>
|
|
<nav class="nav nav-icon nav-icon-sm ms-auto"><a data-bs-toggle="collapse" class="nav-link collapsed" href="#disk_info" role="button" aria-expanded="false" aria-controls="disk_info"><i class="bi bi-question-circle"></i></a></nav>
|
|
</div>
|
|
<div class="card-body" style="padding:0;overflow:scroll">
|
|
<div class="collapse p-2" id="disk_info" style="">
|
|
<p>This section provides an overview of your system's disk usage. It displays information about each mounted disk partition, including details such as the device, mount point, filesystem type, and the amount of space used and available
|
|
in a human-readable format (in gigabytes, GB or terabytes, TB). The 'Usage Percentage' column indicates the percentage of disk space currently in use.</p>
|
|
<p>Partitions located within the<code>/home/</code>directory contain data inside users containers.</p>
|
|
</div>
|
|
<table id="disk-usage-table" class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Device</th>
|
|
<th>Type</th>
|
|
<th>Mountpoint</th>
|
|
<th>Used Space</th>
|
|
<th>Total Space</th>
|
|
<th>Free Space</th>
|
|
<th>%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="progressbg">
|
|
<div class="progress progressbg-progress">
|
|
<div class="progress-bar bg-primary-lt" style="width:15.2%" role="progressbar" aria-valuenow="15.2" aria-valuemin="0" aria-valuemax="100" aria-label="15.2% Used"><span class="visually-hidden">15.2% Complete</span></div>
|
|
</div>
|
|
<div class="progressbg-text">/</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td class="">
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="progressbg">
|
|
<div class="progress progressbg-progress">
|
|
<div class="progress-bar bg-primary-lt" style="width:55.2%" role="progressbar" aria-valuenow="55.2" aria-valuemin="0" aria-valuemax="100" aria-label="15.2% Used"><span class="visually-hidden">15.2% Complete</span></div>
|
|
</div>
|
|
<div class="progressbg-text">/</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td class="">
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="progressbg">
|
|
<div class="progress progressbg-progress">
|
|
<div class="progress-bar bg-primary-lt" style="width:85.2%" role="progressbar" aria-valuenow="85.2" aria-valuemin="0" aria-valuemax="100" aria-label="15.2% Used"><span class="visually-hidden">15.2% Complete</span></div>
|
|
</div>
|
|
<div class="progressbg-text">/</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td class="">
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="progressbg">
|
|
<div class="progress progressbg-progress">
|
|
<div class="progress-bar bg-primary-lt" style="width:85.2%" role="progressbar" aria-valuenow="85.2" aria-valuemin="0" aria-valuemax="100" aria-label="15.2% Used"><span class="visually-hidden">15.2% Complete</span></div>
|
|
</div>
|
|
<div class="progressbg-text">/</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td class="">
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder col-9 mb-0"></div>
|
|
</td>
|
|
<td>
|
|
<div class="progressbg">
|
|
<div class="progress progressbg-progress">
|
|
<div class="progress-bar bg-primary-lt" style="width:85.2%" role="progressbar" aria-valuenow="85.2" aria-valuemin="0" aria-valuemax="100" aria-label="15.2% Used"><span class="visually-hidden">15.2% Complete</span></div>
|
|
</div>
|
|
<div class="progressbg-text">/</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td>
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
<td class="">
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<script src="{{ url_for('static', filename='pages/dashboard.js') }}" defer="defer"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
fetch('/json/system')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
let tableHtml = '<table class="table">';
|
|
// Hostname
|
|
tableHtml += `<tr><td>Hostname</td><td class="text-secondary">${data.hostname}</td></tr>`;
|
|
// OS
|
|
let osIcon = '';
|
|
if (data.os.toLowerCase().includes('ubuntu')) {
|
|
osIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-ubuntu"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M17.723 7.41a7.992 7.992 0 0 0 -3.74 -2.162m-3.971 0a7.993 7.993 0 0 0 -3.789 2.216m-1.881 3.215a8 8 0 0 0 -.342 2.32c0 .738 .1 1.453 .287 2.132m1.96 3.428a7.993 7.993 0 0 0 3.759 2.19m4 0a7.993 7.993 0 0 0 3.747 -2.186m1.962 -3.43a8.008 8.008 0 0 0 .287 -2.131c0 -.764 -.107 -1.503 -.307 -2.203" /><path d="M5 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /></svg>';
|
|
} else if (data.os.toLowerCase().includes('debian')) {
|
|
osIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-debian"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17c-2.397 -.943 -4 -3.153 -4 -5.635c0 -2.19 1.039 -3.14 1.604 -3.595c2.646 -2.133 6.396 -.27 6.396 3.23c0 2.5 -2.905 2.121 -3.5 1.5c-.595 -.621 -1 -1.5 -.5 -2.5" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>';
|
|
} else if (data.os.toLowerCase().includes('coreos')) {
|
|
osIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-coreos"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M21 12a9 9 0 1 1 -18 0a9 9 0 0 1 18 0z" /><path d="M12 3c-3.263 3.212 -3 7.654 -3 12c4.59 .244 8.814 -.282 12 -3" /><path d="M9.5 9a4.494 4.494 0 0 1 5.5 5.5" /></svg>';
|
|
}
|
|
tableHtml += `<tr><td>OS</td><td class="text-secondary">${osIcon} ${data.os}</td></tr>`;
|
|
|
|
// OpenPanel version
|
|
tableHtml += `<tr><td>OpenPanel version</td><td class="text-secondary"><a href="https://openpanel.com/docs/changelog/${data.openpanel_version}" target="_blank">${data.openpanel_version}</a></td></tr>`;
|
|
// Time
|
|
tableHtml += `<tr><td>Server Time</td><td class="text-secondary" id="server-time">${data.time}</td></tr>`;
|
|
// Kernel
|
|
tableHtml += `<tr><td>Kernel</td><td class="text-secondary">${data.kernel}</td></tr>`;
|
|
// CPU with link
|
|
//tableHtml += `<tr><td>CPU</td><td class="text-secondary">${data.cpu}</td></tr>`;
|
|
|
|
let logoHtml = '';
|
|
|
|
if (data.cpu.includes('QEMU')) {
|
|
logoHtml = `<span data-bs-toggle="tooltip" data-bs-placement="right" title="${data.cpu}"><img src="{{ url_for('static', filename='images/dashboard/qemu.png') }}" style="height:2em;" alt="QEMU Logo"></span>`;
|
|
} else if (data.cpu.includes('Intel')) {
|
|
logoHtml = `<span data-bs-toggle="tooltip" data-bs-placement="right" title="${data.cpu}"><img src="{{ url_for('static', filename='images/dashboard/intel.png') }}" style="height:2em;" alt="Intel Logo"></span>`;
|
|
} else if (data.cpu.includes('AMD')) {
|
|
logoHtml = `<span data-bs-toggle="tooltip" data-bs-placement="right" title="${data.cpu}"><img src="{{ url_for('static', filename='images/dashboard/amd.svg') }}" style="height:2em;" alt="AMD Logo"></span>`;
|
|
} else if (data.cpu.includes('DO-')) {
|
|
logoHtml = `<span data-bs-toggle="tooltip" data-bs-placement="right" title="${data.cpu}"><img src="{{ url_for('static', filename='images/dashboard/do.png') }}" style="height:2em;" alt="DigitalOcean Logo"></span>`;
|
|
} else if (data.cpu.includes('AWS')) {
|
|
logoHtml = `<span data-bs-toggle="tooltip" data-bs-placement="right" title="${data.cpu}"><img src="{{ url_for('static', filename='images/dashboard/aws.png') }}" style="height:2em;" alt="AWS Logo"></span>`;
|
|
} else {
|
|
logoHtml = data.cpu; // for all others
|
|
}
|
|
|
|
tableHtml += `<tr><td>CPU</td><td class="text-secondary">${logoHtml}</td></tr>`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Uptime
|
|
let formattedUptime = formatUptime(data.uptime);
|
|
tableHtml += `<tr><td>Uptime</td><td class="text-secondary">${formattedUptime}</td></tr>`;
|
|
|
|
// Running Processes
|
|
tableHtml += `<tr><td>Running Processes</td><td class="text-secondary"><a href="/server/cpu_usage">${data.running_processes}</a></td></tr>`;
|
|
// Package updates
|
|
//tableHtml += `<tr><td>Package Updates</td><td class="text-secondary">${data.package_updates}</td></tr>`;
|
|
// Close the table tag
|
|
tableHtml += `</table>`;
|
|
|
|
document.getElementById('system-table').innerHTML = tableHtml;
|
|
|
|
// Start the fake time counter
|
|
startFakeTimeCounter(data.time);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching system info:', error);
|
|
document.getElementById('system-table').innerText = 'Failed to load system information.';
|
|
});
|
|
});
|
|
|
|
function formatUptime(seconds) {
|
|
const minute = 60,
|
|
hour = 3600,
|
|
day = 86400,
|
|
month = day * 30,
|
|
year = day * 365;
|
|
|
|
function pluralize(value, word) {
|
|
return `${value} ${word}${value > 1 ? 's' : ''}`;
|
|
}
|
|
if (seconds < minute) return pluralize(seconds, 'second');
|
|
else if (seconds < hour) return pluralize(Math.floor(seconds / minute), 'minute');
|
|
else if (seconds < day) return `${pluralize(Math.floor(seconds / hour), 'hour')}, ${pluralize(Math.floor((seconds % hour) / minute), 'minute')}`;
|
|
else if (seconds < month) return `${pluralize(Math.floor(seconds / day), 'day')}, ${pluralize(Math.floor((seconds % day) / hour), 'hour')}`;
|
|
else if (seconds < year) return `${pluralize(Math.floor(seconds / month), 'month')}, ${pluralize(Math.floor((seconds % month) / day), 'day')}`;
|
|
else return `${pluralize(Math.floor(seconds / year), 'year')}, ${pluralize(Math.floor((seconds % year) / month), 'month')}`;
|
|
}
|
|
|
|
function startFakeTimeCounter(serverTime) {
|
|
let timeElement = document.getElementById('server-time');
|
|
let currentTime = new Date(serverTime);
|
|
|
|
setInterval(() => {
|
|
currentTime.setSeconds(currentTime.getSeconds() + 1);
|
|
timeElement.textContent = currentTime.toISOString().split('T')[0] + ' ' + currentTime.toTimeString().split(' ')[0];
|
|
}, 1000);
|
|
}
|
|
</script>
|
|
<style>
|
|
.nav {
|
|
--tblr-nav-link-padding-x: 0;
|
|
--tblr-nav-link-padding-y: 0;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
{% endblock %}
|