Files
openpanel/templates/admini/system/services_status.html
2024-10-25 01:44:26 +02:00

312 lines
9.6 KiB
HTML

{% extends 'base.html' %}
{% block content %}
<style>
td {vertical-align: middle;}
@media (min-width: 768px) {
table.table {
table-layout: fixed;
}
table.table td {
word-wrap: break-word;
}
}
@media (max-width: 767px) {
span.advanced-text {display:none;}
}
.hidden {
display: none;
}
.advanced-settings {
align-items: center;
text-align: right;
color: black;
}
.advanced-settings i {
margin-right: 5px;
transform: rotate(-90deg);
transition: transform 0.3s ease-in-out;
}
[data-bs-theme=light] .domain_link {
color: black;
}
.domain_link {
border-bottom: 1px dashed #999;
text-decoration: none;
}
.advanced-settings.active i {
transform: rotate(0);
}
thead {
border: 1px solid rgb(90 86 86 / 11%);
}
th {
text-transform: uppercase;
font-weight: 400;
}
</style>
<table class="table table-hover">
<thead>
<tr>
<th>{{ _('Service') }}</th>
<th>{{ _('Version') }}</th>
<th>{{ _('Status') }}</th>
</tr>
</thead>
<tbody>
<tr class="domain_row">
<td><img style="width: 30px;" src="/static/images/icons/{{ web_server }}.png"></img> {{ web_server|capitalize }}</td>
<td id="webserver-version"></td>
<td><span class="badge bg-success status-badge" id="webserver-status"></span>&nbsp; <a href="javascript:void(0);" id="restart-web-server" data-toggle="tooltip" data-placement="left" title="{{ _('Restart') }} {{ web_server }}">
<i class="bi bi-arrow-clockwise"></i></a>
</td>
</tr>
<tr class="domain_row">
<td><img style="width: 30px;" src="/static/images/icons/php.svg"></img> <span data-toggle="tooltip" data-placement="top" title="{{ _('Default PHP version is') }} {{php_default_version}}">{{ _('PHP') }}</span></td>
<td id="php-version"></td>
<td><span class="badge bg-success status-badge" id="php-status"></span>
</td>
</tr>
<tr class="domain_row">
<td><img style="width: 30px;" src="/static/images/icons/{% if 'mysql' in mysql_type %}mysql{% elif 'mariadb' in mysql_type %}mariadb{% endif %}.png"></img>{% if mysql_type == 'mysql' %}
{{ _('MySQL') }}
{% elif mysql_type == 'mariadb' %}
{{ _('MariaDB') }}
{% endif %}</span></td>
<td id="mysql-version"></td>
<td><span class="badge bg-success status-badge" id="mysql-status"></span>&nbsp; <a href="javascript:void(0);" id="restart-mysql" data-toggle="tooltip" data-placement="left" title="{{ _('Restart service') }}">
<i class="bi bi-arrow-clockwise"></i></a>
</td>
</tr>
{% if 'phpmyadmin' in enabled_modules %}
<tr class="domain_row">
{% else %}
<tr class="d-none domain_row">
{% endif %}
<td><img style="width: 30px;" src="/static/images/icons/phpmyadmin.png"></img> {{ _('phpMyAdmin') }}</td>
<td id="phpmyadmin-version"></td>
<td><span class="badge bg-success status-badge" id="phpmyadmin-status" data-toggle="tooltip" data-placement="top" title='{{ _("Even when \"Off\" phpMyAdmin starts automatically when you visit /phpmyadmin") }}'></span></td>
</tr>
{% if 'pm2' in enabled_modules %}
<tr class="domain_row">
{% else %}
<tr class="d-none domain_row">
{% endif %}
<td><img style="width: 30px;" src="/static/images/icons/nodejs.png"></img> {{ _('NodeJS') }}</td>
<td id="nodejs-version"></td>
<td><span class="badge bg-success status-badge" id="nodejs-status"></span>
</td>
</tr>
{% if 'pm2' in enabled_modules %}
<tr class="domain_row">
{% else %}
<tr class="d-none domain_row">
{% endif %}
<td><img style="width: 30px;" src="/static/images/icons/python.png"></img> {{ _('Python') }}</td>
<td id="python-version"></td>
<td><span class="badge bg-success status-badge" id="python-status"></span>
</td>
</tr>
{% if 'redis' in enabled_modules %}
<tr class="domain_row">
{% else %}
<tr class="d-none domain_row">
{% endif %}
<td><img style="width: 30px;" src="/static/images/icons/redis.png"></img> {{ _('REDIS') }}</td>
<td id="redis-version"></td>
<td><span class="badge bg-success status-badge" id="redis-status"></span>
</td>
</tr>
{% if 'memcached' in enabled_modules %}
<tr class="domain_row">
{% else %}
<tr class="d-none domain_row">
{% endif %}<td><img style="width: 30px;" src="/static/images/icons/memcached.png"></img> {{ _('Memcached') }}</td>
<td id="memcached-version"></td>
<td><span class="badge bg-success status-badge" id="memcached-status"></span>
</td>
</tr>
{% if 'elasticsearch' in enabled_modules %}
<tr class="domain_row">
{% else %}
<tr class="d-none domain_row">
{% endif %}
<td><img style="width: 30px;" src="/static/images/icons/elasticsearch.png"></img> {{ _('Elasticsearch') }}</td>
<td id="elasticsearch-version"></td>
<td><span class="badge bg-success status-badge" id="elasticsearch-status"></span>
</td>
</tr>
</tbody>
</table>
<script>
function updateStatusInfo() {
$.ajax({
url: '/system/service/status',
type: 'GET',
dataType: 'json',
success: function(response) {
// Define an object to map service names to their corresponding elements
var serviceElements = {
'webserver': $('#webserver-status'),
'memcached': $('#memcached-status'),
'elasticsearch': $('#elasticsearch-status'),
'mysql': $('#mysql-status'),
'phpmyadmin': $('#phpmyadmin-status'),
'nodejs': $('#nodejs-status'),
'php8.2': $('#php-status'),
//'php{{default_php_version}}': $('#php-status'),
'python': $('#python-status'),
'mongodb': $('#mongodb-status'),
'redis': $('#redis-status')
// Add more services and corresponding elements as needed
};
// Iterate through the services and update their status text and badge class
$.each(serviceElements, function(serviceName, element) {
var serviceStatus = response[serviceName];
element.text(serviceStatus);
// Update the badge class based on the service status
if (serviceStatus === 'on') {
element.removeClass('bg-danger').addClass('bg-success');
} else if (serviceStatus === 'off') {
element.removeClass('bg-success').addClass('bg-danger');
}
});
},
error: function(error) {
console.log('Error:', error);
}
});
}
// Initial call to populate version information
updateStatusInfo();
function updateVersionInfo() {
$.ajax({
url: '/system/service/info',
type: 'GET',
dataType: 'json',
success: function(response) {
// Update each version independently
$('#webserver-version').text(response.webserver_version);
$('#memcached-version').text(response.memcached_version);
$('#elasticsearch-version').text(response.elasticsearch_version);
$('#mysql-version').text(response.mysql_version);
$('#phpmyadmin-version').text(response.phpmyadmin_version);
$('#nodejs-version').text(response.nodejs_version);
$('#php-version').text(response.php_version);
$('#python-version').text(response.python_version);
$('#redis-version').text(response.redis_version);
$('#mongodb-version').text(response.mongodb_version);
},
error: function(error) {
console.log('Error:', error);
}
});
}
// Initial call to populate version information
updateVersionInfo();
$('#restart-mysql').on('click', function() {
// Send an AJAX request to restart MySQL
toaster({
body: '{{ _("mysql service restart in progress..") }}',
className: 'border-0 text-white bg-primary',
});
$.ajax({
url: '/system/service/restart/mysql',
type: 'GET',
dataType: 'json',
success: function(response) {
toaster({
body: response.message,
className: 'border-0 text-white bg-success',
});
updateStatusInfo();
},
error: function(error) {
toaster({
body: error,
className: 'border-0 text-white bg-danger',
});
updateStatusInfo();
console.log('Error:', error);
}
});
});
$('#restart-web-server').on('click', function() {
var webServerName = "{{ web_server }}";
toaster({
body: webServerName + ' {{ _("service restart in progress..") }}',
className: 'border-0 text-white bg-primary',
});
$.ajax({
url: '/system/service/restart/' + webServerName,
type: 'GET',
dataType: 'json',
success: function(response) {
toaster({
body: response.message,
className: 'border-0 text-white bg-success',
});
updateStatusInfo();
},
error: function(error) {
toaster({
body: error,
className: 'border-0 text-white bg-danger',
});
updateStatusInfo();
console.log('Error:', error);
}
});
});
</script>
{% endblock %}