mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-05-07 13:27:09 +02:00
design overall
This commit is contained in:
usmannasir
0
serverStatus/__init__.py
Executable file → Normal file
0
serverStatus/__init__.py
Executable file → Normal file
0
serverStatus/admin.py
Executable file → Normal file
0
serverStatus/admin.py
Executable file → Normal file
0
serverStatus/apps.py
Executable file → Normal file
0
serverStatus/apps.py
Executable file → Normal file
0
serverStatus/litespeed/conf/httpd_config.conf
Executable file → Normal file
0
serverStatus/litespeed/conf/httpd_config.conf
Executable file → Normal file
0
serverStatus/litespeed/conf/mime.properties
Executable file → Normal file
0
serverStatus/litespeed/conf/mime.properties
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/ccl.conf
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/ccl.conf
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/ccl.conf0,v
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/ccl.conf0,v
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/phpsuexec.conf
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/phpsuexec.conf
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/phpsuexec.conf0,v
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/phpsuexec.conf0,v
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/rails.conf
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/rails.conf
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/rails.conf0,v
Executable file → Normal file
0
serverStatus/litespeed/conf/templates/rails.conf0,v
Executable file → Normal file
0
serverStatus/litespeed/conf/vhosts/Example/htgroup
Executable file → Normal file
0
serverStatus/litespeed/conf/vhosts/Example/htgroup
Executable file → Normal file
0
serverStatus/litespeed/conf/vhosts/Example/htpasswd
Executable file → Normal file
0
serverStatus/litespeed/conf/vhosts/Example/htpasswd
Executable file → Normal file
0
serverStatus/litespeed/conf/vhosts/Example/vhconf.conf
Executable file → Normal file
0
serverStatus/litespeed/conf/vhosts/Example/vhconf.conf
Executable file → Normal file
0
serverStatus/litespeed/functions.sh
Executable file → Normal file
0
serverStatus/litespeed/functions.sh
Executable file → Normal file
0
serverStatus/litespeed/httpd-redis.conf
Executable file → Normal file
0
serverStatus/litespeed/httpd-redis.conf
Executable file → Normal file
0
serverStatus/litespeed/httpd.conf
Executable file → Normal file
0
serverStatus/litespeed/httpd.conf
Executable file → Normal file
0
serverStatus/litespeed/httpd_config.xml
Executable file → Normal file
0
serverStatus/litespeed/httpd_config.xml
Executable file → Normal file
0
serverStatus/litespeed/install.sh
Executable file → Normal file
0
serverStatus/litespeed/install.sh
Executable file → Normal file
0
serverStatus/litespeed/modsec.conf
Executable file → Normal file
0
serverStatus/litespeed/modsec.conf
Executable file → Normal file
0
serverStatus/migrations/__init__.py
Executable file → Normal file
0
serverStatus/migrations/__init__.py
Executable file → Normal file
0
serverStatus/models.py
Executable file → Normal file
0
serverStatus/models.py
Executable file → Normal file
0
serverStatus/serverStatusUtil.py
Executable file → Normal file
0
serverStatus/serverStatusUtil.py
Executable file → Normal file
0
serverStatus/static/images/agreement.png
Executable file → Normal file
0
serverStatus/static/images/agreement.png
Executable file → Normal file
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
0
serverStatus/static/images/change-license.png
Executable file → Normal file
0
serverStatus/static/images/change-license.png
Executable file → Normal file
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
0
serverStatus/static/images/change.png
Executable file → Normal file
0
serverStatus/static/images/change.png
Executable file → Normal file
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
0
serverStatus/static/images/docker.png
Executable file → Normal file
0
serverStatus/static/images/docker.png
Executable file → Normal file
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
0
serverStatus/static/images/license-status.png
Executable file → Normal file
0
serverStatus/static/images/license-status.png
Executable file → Normal file
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
0
serverStatus/static/images/litespeed-logo.png
Executable file → Normal file
0
serverStatus/static/images/litespeed-logo.png
Executable file → Normal file
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
0
serverStatus/static/images/litespeed.png
Executable file → Normal file
0
serverStatus/static/images/litespeed.png
Executable file → Normal file
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
0
serverStatus/static/images/lsON.png
Executable file → Normal file
0
serverStatus/static/images/lsON.png
Executable file → Normal file
|
Before Width: | Height: | Size: 933 B After Width: | Height: | Size: 933 B |
0
serverStatus/static/images/mariadb.png
Executable file → Normal file
0
serverStatus/static/images/mariadb.png
Executable file → Normal file
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
0
serverStatus/static/images/powerdns.png
Executable file → Normal file
0
serverStatus/static/images/powerdns.png
Executable file → Normal file
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
0
serverStatus/static/images/pureftpd.png
Executable file → Normal file
0
serverStatus/static/images/pureftpd.png
Executable file → Normal file
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
14
serverStatus/static/serverStatus/serverStatus.js
Executable file → Normal file
14
serverStatus/static/serverStatus/serverStatus.js
Executable file → Normal file
@@ -1153,10 +1153,10 @@ app.controller('listOSPackages', function ($scope, $http, $timeout) {
|
||||
|
||||
app.controller('changePort', function ($scope, $http, $timeout) {
|
||||
|
||||
$scope.cyberpanelLoading = true;
|
||||
$scope.cyberpanelLoading = false;
|
||||
|
||||
$scope.changeCPPort = function () {
|
||||
$scope.cyberpanelLoading = false;
|
||||
$scope.cyberpanelLoading = true;
|
||||
|
||||
var config = {
|
||||
headers: {
|
||||
@@ -1173,7 +1173,7 @@ app.controller('changePort', function ($scope, $http, $timeout) {
|
||||
$http.post(dataurl, data, config).then(ListInitialData, cantLoadInitialData);
|
||||
|
||||
function ListInitialData(response) {
|
||||
$scope.cyberpanelLoading = true;
|
||||
$scope.cyberpanelLoading = false;
|
||||
if (response.data.status === 1) {
|
||||
new PNotify({
|
||||
title: 'Success!',
|
||||
@@ -1190,11 +1190,11 @@ app.controller('changePort', function ($scope, $http, $timeout) {
|
||||
}
|
||||
|
||||
function cantLoadInitialData(response) {
|
||||
$scope.cyberpanelLoading = true;
|
||||
$scope.cyberpanelLoading = false;
|
||||
new PNotify({
|
||||
title: 'Success!',
|
||||
text: 'Port changed, open CyberPanel on new port.',
|
||||
type: 'success'
|
||||
title: 'Error!',
|
||||
text: 'Could not connect to server, please try again.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
489
serverStatus/templates/serverStatus/changeCyberPanelPort.html
Executable file → Normal file
489
serverStatus/templates/serverStatus/changeCyberPanelPort.html
Executable file → Normal file
@@ -1,66 +1,443 @@
|
||||
{% extends "baseTemplate/index.html" %}
|
||||
{% load i18n %}
|
||||
{% block title %}{% trans "Change CyberPanel Access Port - CyberPanel" %}{% endblock %}
|
||||
|
||||
{% block header_scripts %}
|
||||
<style>
|
||||
/* Angular cloak to prevent flashing */
|
||||
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Default state before Angular loads */
|
||||
.btn-primary .loading-spinner,
|
||||
.btn-primary span:nth-child(4) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Angular hide class */
|
||||
.ng-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Show loading spinner when not hidden */
|
||||
.ng-scope .loading-spinner:not(.ng-hide) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* Ensure default text is visible */
|
||||
.btn-primary i.fas.fa-save,
|
||||
.btn-primary span:nth-child(3) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Page Specific Styles */
|
||||
.page-wrapper {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Form Section */
|
||||
.form-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5b5fcf;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.form-control-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e8e9ff;
|
||||
border-radius: 8px;
|
||||
background: #f8f9ff;
|
||||
color: #2f3640;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5b5fcf;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
|
||||
}
|
||||
|
||||
.form-help {
|
||||
font-size: 12px;
|
||||
color: #8893a7;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-help i {
|
||||
font-size: 13px;
|
||||
color: #5b5fcf;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #5b5fcf;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #4b4fbf;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(91,95,207,0.3);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #94a3b8;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Info Box */
|
||||
.info-box {
|
||||
background: #f0f0ff;
|
||||
border: 1px solid #e8e9ff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.info-box-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-box-title i {
|
||||
color: #5b5fcf;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-box-content {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-box-content strong {
|
||||
color: #2f3640;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Warning Box */
|
||||
.warning-box {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.warning-box-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #856404;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.warning-box-title i {
|
||||
color: #f39c12;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.warning-box-content {
|
||||
font-size: 13px;
|
||||
color: #856404;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Bootstrap Toggle Styling Override */
|
||||
.toggle {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 70px !important;
|
||||
height: 32px !important;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #e8e9ff !important;
|
||||
}
|
||||
|
||||
.toggle.off {
|
||||
background: #f8f9ff !important;
|
||||
border-color: #e8e9ff !important;
|
||||
}
|
||||
|
||||
.toggle.on {
|
||||
background: #5b5fcf !important;
|
||||
border-color: #5b5fcf !important;
|
||||
}
|
||||
|
||||
.toggle .toggle-handle {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
width: 26px !important;
|
||||
background: white !important;
|
||||
border-radius: 6px !important;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.toggle.off .toggle-handle {
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.toggle.on .toggle-handle {
|
||||
right: 2px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.toggle-group {
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.toggle-on, .toggle-off {
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.toggle-on {
|
||||
background: transparent !important;
|
||||
color: white !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.toggle-off {
|
||||
background: transparent !important;
|
||||
color: #64748b !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Toggle Container Styling */
|
||||
.toggle-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.toggle-label span {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2f3640;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.toggle-help {
|
||||
font-size: 12px;
|
||||
color: #8893a7;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.toggle-help i {
|
||||
font-size: 13px;
|
||||
color: #5b5fcf;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.form-section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% load static %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<!-- Current language: {{ LANGUAGE_CODE }} -->
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div id="page-title">
|
||||
<h2>{% trans "CyberPanel Port" %}</h2>
|
||||
<p>{% trans "On this page you can change CyberPanel port. Once port is change you will not be able to access this page, kindly open CyberPanel via new port." %}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="panel panel-body">
|
||||
<div ng-controller="changePort" class="example-box-wrapper">
|
||||
<div class="panel-body">
|
||||
<h3 class="content-box-header">
|
||||
{% trans "Change CyberPanel Port" %} <img ng-hide="cyberpanelLoading"
|
||||
src="/static/images/loading.gif">
|
||||
</h3>
|
||||
|
||||
<div class="content-box-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
|
||||
<form action="/" class="form-horizontal bordered-row">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">{% trans "Port" %}</label>
|
||||
<div class="col-sm-6" ng-init="port={{ port }}">
|
||||
<input name="port" type="text" class="form-control" ng-model="port"
|
||||
required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label"></label>
|
||||
<div class="col-sm-4">
|
||||
<button type="button" ng-click="changeCPPort()"
|
||||
class="btn btn-primary btn-lg">{% trans "Change" %}</button>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="page-wrapper">
|
||||
<div class="page-container" ng-controller="changePort">
|
||||
<!-- Form Section -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-title">{% trans "Change CyberPanel Port" %}</h2>
|
||||
<p class="section-description">
|
||||
{% trans "Configure the port used to access your CyberPanel control panel. The default port is 8090." %}
|
||||
</p>
|
||||
|
||||
<!-- Warning Box -->
|
||||
<div class="warning-box">
|
||||
<div class="warning-box-title">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
{% trans "Important Notice" %}
|
||||
</div>
|
||||
<div class="warning-box-content">
|
||||
{% trans "After changing the port, you will need to access CyberPanel using the new port number. Make sure to update your firewall rules to allow access through the new port." %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Box -->
|
||||
<div class="info-box">
|
||||
<div class="info-box-title">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
{% trans "Current Configuration" %}
|
||||
</div>
|
||||
<div class="info-box-content">
|
||||
{% trans "Your CyberPanel is currently accessible on port" %} <strong>{{ port }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-content">
|
||||
<form action="/" method="post">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{% trans "New Port Number" %}</label>
|
||||
<div class="form-control-wrapper">
|
||||
<input type="text"
|
||||
name="port"
|
||||
class="form-control"
|
||||
ng-model="port"
|
||||
ng-init="port={{ port }}"
|
||||
placeholder="{% trans 'Enter port number (e.g., 8090)' %}"
|
||||
required
|
||||
pattern="[0-9]+"
|
||||
min="1"
|
||||
max="65535">
|
||||
</div>
|
||||
<div class="form-help">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
{% trans "Valid port range: 1 - 65535. Common ports: 8090, 8443, 7080." %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button"
|
||||
class="btn-primary"
|
||||
ng-click="changeCPPort()"
|
||||
ng-disabled="cyberpanelLoading">
|
||||
<i class="fas fa-save" ng-class="{'ng-hide': cyberpanelLoading}"></i>
|
||||
<span class="loading-spinner" ng-class="{'ng-hide': !cyberpanelLoading}"></span>
|
||||
<span ng-class="{'ng-hide': cyberpanelLoading}">{% trans "Change Port" %}</span>
|
||||
<span ng-class="{'ng-hide': !cyberpanelLoading}">{% trans "Changing..." %}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
554
serverStatus/templates/serverStatus/cybercpmainlogfile.html
Executable file → Normal file
554
serverStatus/templates/serverStatus/cybercpmainlogfile.html
Executable file → Normal file
@@ -1,69 +1,509 @@
|
||||
{% extends "baseTemplate/index.html" %}
|
||||
{% load i18n %}
|
||||
{% block title %}{% trans "CyberPanel Main Log File - CyberPanel" %}{% endblock %}
|
||||
|
||||
{% block header_scripts %}
|
||||
<style>
|
||||
.modern-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.log-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-viewer-panel {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #334155;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #334155;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: #e2e8f0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
background: #f8f9ff;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
border: 1px solid #e8e9ff;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
background: #1e293b;
|
||||
padding: 1.5rem;
|
||||
min-height: 600px;
|
||||
max-height: 700px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.log-textarea {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
color: #10b981;
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.log-textarea::placeholder {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.log-line-numbers {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1.5rem;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
color: #475569;
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
user-select: none;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid #334155;
|
||||
}
|
||||
|
||||
.log-content-wrapper {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
background: #f8f9ff;
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e8e9ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.625rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #475569;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
margin: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 4rem;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
.log-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: #334155;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: #64748b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
/* Log Level Colors */
|
||||
.log-error { color: #ef4444; }
|
||||
.log-warning { color: #f59e0b; }
|
||||
.log-info { color: #3b82f6; }
|
||||
.log-debug { color: #8b5cf6; }
|
||||
.log-success { color: #10b981; }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.modern-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
{% load static %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<!-- Current language: {{ LANGUAGE_CODE }} -->
|
||||
|
||||
<div class="container">
|
||||
<div id="page-title">
|
||||
<h2>{% trans "CyberPanel Main Log File" %}</h2>
|
||||
<p>{% trans "This log file corresponds to errors generated by CyberPanel for your domain errors log you can look into /home/domain/logs." %}</p>
|
||||
</div>
|
||||
|
||||
<div ng-controller="readCyberCPLogFile" class="row">
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<h3 class="content-box-header">
|
||||
{% trans "Last 50 Lines" %} <img ng-hide="logFileLoading" src="{% static 'images/loading.gif' %}">
|
||||
</h3>
|
||||
<div class="col-md-12">
|
||||
|
||||
<form class="form-horizontal bordered-row">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<textarea ng-model="logsData" class="form-control" rows="30">{{ logs }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label"></label>
|
||||
<div class="col-sm-4">
|
||||
<button type="button" ng-click="fetchLogs()" class="btn btn-primary btn-lg">{% trans "Refresh" %}</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-hide="logsFeteched" class="alert alert-success">
|
||||
<p>{% trans "Last 50 Lines Fetched" %}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-hide="couldNotFetchLogs" class="alert alert-danger">
|
||||
<p>{% trans "Could not fetch logs. Use the command line to view the log file." %}</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="modern-container" ng-controller="readCyberCPLogFile">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="page-title">
|
||||
<div class="log-icon">
|
||||
<i class="fas fa-file-alt fa-2x"></i>
|
||||
</div>
|
||||
{% trans "CyberPanel Main Log File" %}
|
||||
</div>
|
||||
|
||||
|
||||
<p class="page-subtitle">
|
||||
{% trans "This log file corresponds to errors generated by CyberPanel. For domain-specific error logs, check /home/domain/logs." %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log Viewer Panel -->
|
||||
<div class="log-viewer-panel">
|
||||
<!-- Panel Header -->
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">
|
||||
<div class="panel-icon">
|
||||
<i class="fas fa-terminal"></i>
|
||||
</div>
|
||||
{% trans "Log Viewer" %}
|
||||
</div>
|
||||
<div class="log-stats">
|
||||
<div class="stat-item">
|
||||
<span>{% trans "Showing:" %}</span>
|
||||
<span class="stat-value">{% trans "Last 50 lines" %}</span>
|
||||
</div>
|
||||
<div ng-hide="logFileLoading" class="stat-item">
|
||||
<i class="fas fa-check-circle" style="color: #10b981;"></i>
|
||||
<span>{% trans "Live" %}</span>
|
||||
</div>
|
||||
<div ng-show="!logFileLoading" class="loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log Content -->
|
||||
<div class="log-content">
|
||||
<div class="log-content-wrapper">
|
||||
<textarea ng-model="logsData"
|
||||
class="log-textarea"
|
||||
readonly
|
||||
placeholder="{% trans 'Log content will appear here...' %}"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success/Error Messages -->
|
||||
<div ng-hide="logsFeteched" class="alert alert-success">
|
||||
<i class="fas fa-check-circle alert-icon"></i>
|
||||
<span>{% trans "Last 50 lines fetched successfully" %}</span>
|
||||
</div>
|
||||
|
||||
<div ng-hide="couldNotFetchLogs" class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-circle alert-icon"></i>
|
||||
<span>{% trans "Could not fetch logs. Use the command line to view the log file." %}</span>
|
||||
</div>
|
||||
|
||||
<!-- Action Bar -->
|
||||
<div class="action-bar">
|
||||
<button type="button"
|
||||
ng-click="fetchLogs()"
|
||||
class="btn btn-primary">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
{% trans "Refresh Logs" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
0
serverStatus/templates/serverStatus/index.html
Executable file → Normal file
0
serverStatus/templates/serverStatus/index.html
Executable file → Normal file
1206
serverStatus/templates/serverStatus/litespeedStatus.html
Executable file → Normal file
1206
serverStatus/templates/serverStatus/litespeedStatus.html
Executable file → Normal file
File diff suppressed because it is too large
Load Diff
1472
serverStatus/templates/serverStatus/packageManager.html
Executable file → Normal file
1472
serverStatus/templates/serverStatus/packageManager.html
Executable file → Normal file
File diff suppressed because it is too large
Load Diff
761
serverStatus/templates/serverStatus/services.html
Executable file → Normal file
761
serverStatus/templates/serverStatus/services.html
Executable file → Normal file
@@ -1,164 +1,637 @@
|
||||
{% extends "baseTemplate/index.html" %}
|
||||
{% load i18n %}
|
||||
{% block title %}{% trans "Services - CyberPanel" %}{% endblock %}
|
||||
{% block content %}
|
||||
{% block title %}{% trans "Services Status - CyberPanel" %}{% endblock %}
|
||||
|
||||
{% block header_scripts %}
|
||||
<style>
|
||||
/* Services Status Specific Styles */
|
||||
.services-wrapper {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.services-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.page-header .icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #5856d6;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
box-shadow: 0 4px 12px rgba(88,86,214,0.3);
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 15px;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #5856d6;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Services Grid */
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: white;
|
||||
border: 1px solid #e8e9ff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
|
||||
border-color: #5856d6;
|
||||
}
|
||||
|
||||
.service-card.running {
|
||||
border-top: 4px solid #10b981;
|
||||
}
|
||||
|
||||
.service-card.stopped {
|
||||
border-top: 4px solid #ef4444;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8f9ff;
|
||||
border-radius: 16px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.service-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.service-info {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #2f3640;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.service-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-status.running {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.service-status.running i {
|
||||
color: #10b981;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.service-status.stopped {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.service-status.stopped i {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.service-stats {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.service-stats p {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.service-stats strong {
|
||||
color: #5856d6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn.start {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.start:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(16,185,129,0.3);
|
||||
}
|
||||
|
||||
.action-btn.stop {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.stop:hover:not(:disabled) {
|
||||
background: #d97706;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(245,158,11,0.3);
|
||||
}
|
||||
|
||||
.action-btn.restart {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.restart:hover:not(:disabled) {
|
||||
background: #4b5563;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(107,114,128,0.3);
|
||||
}
|
||||
|
||||
/* Alert Messages */
|
||||
.alerts-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
.alert-success .alert-icon {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.alert-danger .alert-icon {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
.loading-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid #e8e9ff;
|
||||
border-top-color: #5856d6;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* System Overview */
|
||||
.system-overview {
|
||||
background: #f8f9ff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.overview-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.overview-label {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.overview-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #5856d6;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.services-wrapper {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 24px;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.system-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% load static %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<!-- Current language: {{ LANGUAGE_CODE }} -->
|
||||
|
||||
|
||||
<style>
|
||||
.serviceImg { text-align:center; }
|
||||
.serviceImg img { bottom: 63px; width: 100px; margin-top: -65px; background: white; padding: 10px; height: 100px;}
|
||||
.service-panel { margin-top: 63px; border: 0; background: #38b4bf; }
|
||||
.service-panel .panel-body { height: 188px; }
|
||||
.serviceDetails { color: white; text-align:center; margin-top: 15px;}
|
||||
.serviceActionBtn { margin: 10px; }
|
||||
</style>
|
||||
|
||||
<div ng-controller="servicesManager" class="container">
|
||||
|
||||
<div id="page-title">
|
||||
<h2>Services <img ng-show="actionLoader" src="/static/images/loading.gif"></h2>
|
||||
|
||||
<p>{% trans 'Show stats for services and actions (Start, Stop, Restart)' %}</p>
|
||||
</div>
|
||||
|
||||
<div >
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="panel panel-default service-panel">
|
||||
<div class="panel-body">
|
||||
<div class="serviceImg">
|
||||
<img src="{% static 'images/litespeed.png' %}" alt="Litespeed Webserver" class="img-circle">
|
||||
</div>
|
||||
<div class="serviceDetails">
|
||||
<div class="serviceHeading">
|
||||
<h5><b>{{ serverName }}</b></h5>
|
||||
<span class="help-block" ng-bind="olsStatus">Stopped</span>
|
||||
</div>
|
||||
<div class="serviceActionBtn">
|
||||
<button type="button" class="btn btn-success" ng-disabled="btnDisable" ng-show="olsStart" ng-click="serviceAction('lsws','start')" data-toggle="tooltip" title="Start!"><i class="glyph-icon icon-play" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-warning" ng-disabled="btnDisable" ng-show="olsStop" ng-click="serviceAction('lsws','stop')" data-toggle="tooltip" title="Stop!"><i class="glyph-icon icon-pause" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-default" ng-disabled="btnDisable" ng-click="serviceAction('lsws','restart')" data-toggle="tooltip" title="Restart!"><i class="glyph-icon icon-refresh" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<div ng-show="olsStats">
|
||||
<p>Memory Usage: <span ng-bind="olsMem"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="services-wrapper">
|
||||
<div class="services-container" ng-controller="servicesManager">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
<div class="icon">
|
||||
<i class="fas fa-server"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="panel panel-default service-panel">
|
||||
<div class="panel-body">
|
||||
<div class="serviceImg">
|
||||
<img src="{% static 'images/mariadb.png' %}" alt="MariaDB" class="img-circle">
|
||||
{% trans "Services Status" %}
|
||||
<span ng-show="actionLoader" class="loading-spinner"></span>
|
||||
</h1>
|
||||
<p>{% trans "Monitor and manage system services" %}</p>
|
||||
</div>
|
||||
|
||||
<!-- Services Section -->
|
||||
<div class="content-section">
|
||||
<h2 class="section-title">{% trans "System Services" %}</h2>
|
||||
|
||||
<div class="services-grid">
|
||||
<!-- LiteSpeed/OpenLiteSpeed -->
|
||||
<div class="service-card" ng-class="{'running': olsStatus === 'Running', 'stopped': olsStatus === 'Stopped'}">
|
||||
<div class="service-icon">
|
||||
<img src="{% static 'images/litespeed.png' %}" alt="{{ serverName }}">
|
||||
</div>
|
||||
<div class="serviceDetails">
|
||||
<div class="serviceHeading">
|
||||
<h5><b>MariaDB</b></h5>
|
||||
<span class="help-block" ng-bind="sqlStatus">Stopped</span>
|
||||
</div>
|
||||
<div class="serviceActionBtn">
|
||||
<button type="button" class="btn btn-success" ng-disabled="btnDisable" ng-show="sqlStart" ng-click="serviceAction('mysql','start')" data-toggle="tooltip" title="Start!"><i class="glyph-icon icon-play" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-warning" ng-disabled="btnDisable" ng-show="sqlStop" ng-click="serviceAction('mysql','stop')" data-toggle="tooltip" title="Stop!"><i class="glyph-icon icon-pause" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-default" ng-disabled="btnDisable" ng-click="serviceAction('mysql','restart')" data-toggle="tooltip" title="Restart!"><i class="glyph-icon icon-refresh" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<div ng-show="sqlStats">
|
||||
<p>Memory Usage: <span ng-bind="sqlMem"></span></p>
|
||||
</div>
|
||||
<div class="service-info">
|
||||
<h3 class="service-name">{{ serverName }}</h3>
|
||||
<span class="service-status" ng-class="{'running': olsStatus === 'Running', 'stopped': olsStatus === 'Stopped'}">
|
||||
<i class="fas fa-circle"></i>
|
||||
<span ng-bind="olsStatus">{% trans "Stopped" %}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="service-stats">
|
||||
<p ng-show="olsStats">{% trans "Memory Usage:" %} <strong ng-bind="olsMem"></strong></p>
|
||||
</div>
|
||||
<div class="service-actions">
|
||||
<button type="button"
|
||||
class="action-btn start"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="olsStart"
|
||||
ng-click="serviceAction('lsws','start')"
|
||||
title="{% trans 'Start' %}">
|
||||
<i class="fas fa-play"></i>
|
||||
{% trans "Start" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn stop"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="olsStop"
|
||||
ng-click="serviceAction('lsws','stop')"
|
||||
title="{% trans 'Stop' %}">
|
||||
<i class="fas fa-pause"></i>
|
||||
{% trans "Stop" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn restart"
|
||||
ng-disabled="btnDisable"
|
||||
ng-click="serviceAction('lsws','restart')"
|
||||
title="{% trans 'Restart' %}">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
{% trans "Restart" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MariaDB -->
|
||||
<div class="service-card" ng-class="{'running': sqlStatus === 'Running', 'stopped': sqlStatus === 'Stopped'}">
|
||||
<div class="service-icon">
|
||||
<img src="{% static 'images/mariadb.png' %}" alt="MariaDB">
|
||||
</div>
|
||||
<div class="service-info">
|
||||
<h3 class="service-name">MariaDB</h3>
|
||||
<span class="service-status" ng-class="{'running': sqlStatus === 'Running', 'stopped': sqlStatus === 'Stopped'}">
|
||||
<i class="fas fa-circle"></i>
|
||||
<span ng-bind="sqlStatus">{% trans "Stopped" %}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="service-stats">
|
||||
<p ng-show="sqlStats">{% trans "Memory Usage:" %} <strong ng-bind="sqlMem"></strong></p>
|
||||
</div>
|
||||
<div class="service-actions">
|
||||
<button type="button"
|
||||
class="action-btn start"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="sqlStart"
|
||||
ng-click="serviceAction('mysql','start')"
|
||||
title="{% trans 'Start' %}">
|
||||
<i class="fas fa-play"></i>
|
||||
{% trans "Start" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn stop"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="sqlStop"
|
||||
ng-click="serviceAction('mysql','stop')"
|
||||
title="{% trans 'Stop' %}">
|
||||
<i class="fas fa-pause"></i>
|
||||
{% trans "Stop" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn restart"
|
||||
ng-disabled="btnDisable"
|
||||
ng-click="serviceAction('mysql','restart')"
|
||||
title="{% trans 'Restart' %}">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
{% trans "Restart" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PowerDNS -->
|
||||
<div class="service-card" ng-class="{'running': dnsStatus === 'Running', 'stopped': dnsStatus === 'Stopped'}">
|
||||
<div class="service-icon">
|
||||
<img src="{% static 'images/powerdns.png' %}" alt="PowerDNS">
|
||||
</div>
|
||||
<div class="service-info">
|
||||
<h3 class="service-name">PowerDNS</h3>
|
||||
<span class="service-status" ng-class="{'running': dnsStatus === 'Running', 'stopped': dnsStatus === 'Stopped'}">
|
||||
<i class="fas fa-circle"></i>
|
||||
<span ng-bind="dnsStatus">{% trans "Stopped" %}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="service-stats">
|
||||
<p ng-show="dnsStats">{% trans "Memory Usage:" %} <strong ng-bind="dnsMem"></strong></p>
|
||||
</div>
|
||||
<div class="service-actions">
|
||||
<button type="button"
|
||||
class="action-btn start"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="dnsStart"
|
||||
ng-click="serviceAction('pdns','start')"
|
||||
title="{% trans 'Start' %}">
|
||||
<i class="fas fa-play"></i>
|
||||
{% trans "Start" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn stop"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="dnsStop"
|
||||
ng-click="serviceAction('pdns','stop')"
|
||||
title="{% trans 'Stop' %}">
|
||||
<i class="fas fa-pause"></i>
|
||||
{% trans "Stop" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn restart"
|
||||
ng-disabled="btnDisable"
|
||||
ng-click="serviceAction('pdns','restart')"
|
||||
title="{% trans 'Restart' %}">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
{% trans "Restart" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PureFTPd -->
|
||||
<div class="service-card" ng-class="{'running': ftpStatus === 'Running', 'stopped': ftpStatus === 'Stopped'}">
|
||||
<div class="service-icon">
|
||||
<img src="{% static 'images/pureftpd.png' %}" alt="PureFTPd">
|
||||
</div>
|
||||
<div class="service-info">
|
||||
<h3 class="service-name">PureFTPd</h3>
|
||||
<span class="service-status" ng-class="{'running': ftpStatus === 'Running', 'stopped': ftpStatus === 'Stopped'}">
|
||||
<i class="fas fa-circle"></i>
|
||||
<span ng-bind="ftpStatus">{% trans "Stopped" %}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="service-stats">
|
||||
<p ng-show="ftpStats">{% trans "Memory Usage:" %} <strong ng-bind="ftpMem"></strong></p>
|
||||
</div>
|
||||
<div class="service-actions">
|
||||
<button type="button"
|
||||
class="action-btn start"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="ftpStart"
|
||||
ng-click="serviceAction('pure-ftpd','start')"
|
||||
title="{% trans 'Start' %}">
|
||||
<i class="fas fa-play"></i>
|
||||
{% trans "Start" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn stop"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="ftpStop"
|
||||
ng-click="serviceAction('pure-ftpd','stop')"
|
||||
title="{% trans 'Stop' %}">
|
||||
<i class="fas fa-pause"></i>
|
||||
{% trans "Stop" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn restart"
|
||||
ng-disabled="btnDisable"
|
||||
ng-click="serviceAction('pure-ftpd','restart')"
|
||||
title="{% trans 'Restart' %}">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
{% trans "Restart" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Docker (if available) -->
|
||||
{% if isDocker %}
|
||||
<div class="service-card" ng-class="{'running': dockerStatus === 'Running', 'stopped': dockerStatus === 'Stopped'}">
|
||||
<div class="service-icon">
|
||||
<img src="{% static 'images/docker.png' %}" alt="Docker">
|
||||
</div>
|
||||
<div class="service-info">
|
||||
<h3 class="service-name">Docker</h3>
|
||||
<span class="service-status" ng-class="{'running': dockerStatus === 'Running', 'stopped': dockerStatus === 'Stopped'}">
|
||||
<i class="fas fa-circle"></i>
|
||||
<span ng-bind="dockerStatus">{% trans "Stopped" %}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="service-stats">
|
||||
<!-- Docker stats could be added here -->
|
||||
</div>
|
||||
<div class="service-actions">
|
||||
<button type="button"
|
||||
class="action-btn start"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="dockerStart"
|
||||
ng-click="serviceAction('docker','start')"
|
||||
title="{% trans 'Start' %}">
|
||||
<i class="fas fa-play"></i>
|
||||
{% trans "Start" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn stop"
|
||||
ng-disabled="btnDisable"
|
||||
ng-show="dockerStop"
|
||||
ng-click="serviceAction('docker','stop')"
|
||||
title="{% trans 'Stop' %}">
|
||||
<i class="fas fa-pause"></i>
|
||||
{% trans "Stop" %}
|
||||
</button>
|
||||
<button type="button"
|
||||
class="action-btn restart"
|
||||
ng-disabled="btnDisable"
|
||||
ng-click="serviceAction('docker','restart')"
|
||||
title="{% trans 'Restart' %}">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
{% trans "Restart" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="panel panel-default service-panel">
|
||||
<div class="panel-body">
|
||||
<div class="serviceImg">
|
||||
<img src="{% static 'images/powerdns.png' %}" alt="PowerDNS" class="img-circle">
|
||||
</div>
|
||||
<div class="serviceDetails">
|
||||
<div class="serviceHeading">
|
||||
<h5><b>PowerDNS</b></h5>
|
||||
<span class="help-block" ng-bind="dnsStatus">Stopped</span>
|
||||
</div>
|
||||
<div class="serviceActionBtn">
|
||||
<button type="button" class="btn btn-success" ng-disabled="btnDisable" ng-show="dnsStart" ng-click="serviceAction('pdns','start')" data-toggle="tooltip" title="Start!"><i class="glyph-icon icon-play" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-warning" ng-disabled="btnDisable" ng-show="dnsStop" ng-click="serviceAction('pdns','stop')" data-toggle="tooltip" title="Stop!"><i class="glyph-icon icon-pause" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-default" ng-disabled="btnDisable" ng-click="serviceAction('pdns','restart')" data-toggle="tooltip" title="Restart!"><i class="glyph-icon icon-refresh" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<div ng-show="dnsStats">
|
||||
<p>Memory Usage: <span ng-bind="dnsMem"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="panel panel-default service-panel">
|
||||
<div class="panel-body">
|
||||
<div class="serviceImg">
|
||||
<img src="{% static 'images/pureftpd.png' %}" alt="PureFTPd" class="img-circle">
|
||||
</div>
|
||||
<div class="serviceDetails">
|
||||
<div class="serviceHeading">
|
||||
<h5><b>PureFTPd</b></h5>
|
||||
<span class="help-block" ng-bind="dnsStatus">Stopped</span>
|
||||
</div>
|
||||
<div class="serviceActionBtn">
|
||||
<button type="button" class="btn btn-success" ng-disabled="btnDisable" ng-show="ftpStart" ng-click="serviceAction('pure-ftpd','start')" data-toggle="tooltip" title="Start!"><i class="glyph-icon icon-play" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-warning" ng-disabled="btnDisable" ng-show="ftpStop" ng-click="serviceAction('pure-ftpd','stop')" data-toggle="tooltip" title="Stop!"><i class="glyph-icon icon-pause" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-default" ng-disabled="btnDisable" ng-click="serviceAction('pure-ftpd','restart')" data-toggle="tooltip" title="Restart!"><i class="glyph-icon icon-refresh" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<div ng-show="ftpStats">
|
||||
<p>Memory Usage: <span ng-bind="ftpMem"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if isDocker %}
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="panel panel-default service-panel">
|
||||
<div class="panel-body">
|
||||
<div class="serviceImg">
|
||||
<img src="{% static 'images/docker.png' %}" alt="Docker" class="img-circle">
|
||||
</div>
|
||||
<div class="serviceDetails">
|
||||
<div class="serviceHeading">
|
||||
<h5><b>Docker</b></h5>
|
||||
<span class="help-block" ng-bind="dockerStatus">Stopped</span>
|
||||
</div>
|
||||
<div class="serviceActionBtn">
|
||||
<button type="button" class="btn btn-success" ng-disabled="btnDisable" ng-show="dockerStart" ng-click="serviceAction('docker','start')" data-toggle="tooltip" title="Start!"><i class="glyph-icon icon-play" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-warning" ng-disabled="btnDisable" ng-show="dockerStop" ng-click="serviceAction('docker','stop')" data-toggle="tooltip" title="Stop!"><i class="glyph-icon icon-pause" aria-hidden="true"></i></button>
|
||||
<button type="button" class="btn btn-default" ng-disabled="btnDisable" ng-click="serviceAction('docker','restart')" data-toggle="tooltip" title="Restart!"><i class="glyph-icon icon-refresh" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label"></label>
|
||||
<div class="col-sm-4">
|
||||
<!-- Alert Messages -->
|
||||
<div class="alerts-container">
|
||||
<div ng-show="ActionFailed" class="alert alert-danger">
|
||||
<p class="ng-binding">Action Failed</p>
|
||||
<i class="fas fa-exclamation-circle alert-icon"></i>
|
||||
<span>{% trans "Action Failed" %}</span>
|
||||
</div>
|
||||
<div ng-show="ActionSuccessfull" class="alert alert-success ng-hide">
|
||||
<p class="ng-binding">Action Completed</p>
|
||||
<div ng-show="ActionSuccessfull" class="alert alert-success">
|
||||
<i class="fas fa-check-circle alert-icon"></i>
|
||||
<span>{% trans "Action Completed Successfully" %}</span>
|
||||
</div>
|
||||
<div ng-show="couldNotConnect" class="alert alert-danger ng-hide">
|
||||
<p>Could not connect to server. Please refresh this page.</p>
|
||||
<div ng-show="couldNotConnect" class="alert alert-danger">
|
||||
<i class="fas fa-wifi alert-icon"></i>
|
||||
<span>{% trans "Could not connect to server. Please refresh this page." %}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
961
serverStatus/templates/serverStatus/topProcesses.html
Executable file → Normal file
961
serverStatus/templates/serverStatus/topProcesses.html
Executable file → Normal file
@@ -3,225 +3,804 @@
|
||||
{% block title %}{% trans "Top Processes - CyberPanel" %}{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
{% load static %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<!-- Current language: {{ LANGUAGE_CODE }} -->
|
||||
{% load static %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
<!-- Current language: {{ LANGUAGE_CODE }} -->
|
||||
|
||||
<style>
|
||||
.modern-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 3rem 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 20px;
|
||||
animation: fadeInDown 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.process-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.auto-refresh-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.refresh-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #4ade80;
|
||||
border-radius: 50%;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.stat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #f3e8ff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #667eea;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.processes-panel {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e8e9ff;
|
||||
overflow: hidden;
|
||||
animation: fadeInUp 0.5s ease-out 0.2s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem 0.5rem 2.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
placeholder-color: rgba(255, 255, 255, 0.7);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modern-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.modern-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #f8f9ff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.modern-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e8e9ff;
|
||||
}
|
||||
|
||||
.modern-table td {
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #1e293b;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.modern-table tbody tr {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modern-table tbody tr:hover {
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
.process-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #e8e9ff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.process-state {
|
||||
display: inline-flex;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.state-running {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.state-sleeping {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.state-stopped {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.state-zombie {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.cpu-usage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.usage-bar {
|
||||
width: 60px;
|
||||
height: 6px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.usage-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.command-text {
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-size: 0.75rem;
|
||||
background: #f3f4f6;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kill-button {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.kill-button:hover {
|
||||
background: #b91c1c;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.metric-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.metric-high {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.metric-medium {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.metric-low {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.command-text {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div ng-controller="topProcesses" class="container">
|
||||
|
||||
<div id="page-title">
|
||||
<h2>{% trans "Top Processes" %} <img height="20px" ng-hide="cyberPanelLoading"
|
||||
src="/static/images/loading.gif"></h2>
|
||||
<p>{% trans "List of top processes on your server. (Refresh every 3 seconds)" %}</p>
|
||||
<div class="modern-container" ng-controller="topProcesses">
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<h1 class="page-title">
|
||||
<div class="process-icon">
|
||||
<i class="fas fa-microchip" style="font-size: 1.75rem;"></i>
|
||||
</div>
|
||||
{% trans "System Processes Monitor" %}
|
||||
</h1>
|
||||
<p class="page-subtitle">
|
||||
{% trans "Real-time monitoring of system processes, CPU usage, memory consumption, and resource allocation" %}
|
||||
</p>
|
||||
<div class="auto-refresh-indicator">
|
||||
<span class="refresh-dot"></span>
|
||||
{% trans "Auto-refresh every 3 seconds" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="example-box-wrapper">
|
||||
<!-- Loading Overlay -->
|
||||
<div class="loading-overlay" ng-show="!cyberPanelLoading">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-box-wrapper">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr >
|
||||
<th>{% trans 'Cores' %}</th>
|
||||
<th>{% trans 'Model Name' %}</th>
|
||||
<th>{% trans 'CPU Mhz' %}</th>
|
||||
<th>{% trans 'Cache Size' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{$ cores $}</td>
|
||||
<td>{$ modelName $}</td>
|
||||
<td>{$ cpuMHZ $}</td>
|
||||
<td>{$ cacheSize $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- CPU & System Stats -->
|
||||
<div class="stats-grid">
|
||||
<!-- CPU Info -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<h3 class="stat-title">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-microchip"></i>
|
||||
</div>
|
||||
{% trans "CPU Information" %}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ cores || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Cores" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ cpuMHZ || '-' $} MHz</span>
|
||||
<span class="stat-label">{% trans "Frequency" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="example-box-wrapper">
|
||||
<div class="content-box-wrapper">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th >{% trans 'Processes' %}</th>
|
||||
<th >{% trans 'Running' %}</th>
|
||||
<th >{% trans 'Sleeping' %}</th>
|
||||
<th >{% trans 'Stopped' %}</th>
|
||||
<th >{% trans 'Zombie' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{$ totalProcesses $}</td>
|
||||
<td>{$ runningProcesses $}</td>
|
||||
<td>{$ sleepingProcesses $}</td>
|
||||
<td>{$ stoppedProcesses $}</td>
|
||||
<td>{$ zombieProcesses $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e8e9ff;">
|
||||
<div style="font-size: 0.75rem; color: #64748b;">
|
||||
<strong>{% trans "Model:" %}</strong> {$ modelName || '-' $}<br>
|
||||
<strong>{% trans "Cache:" %}</strong> {$ cacheSize || '-' $}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="example-box-wrapper">
|
||||
<div class="content-box-wrapper">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans 'CPU Load' %}</th>
|
||||
<th>{% trans '1 Min' %}</th>
|
||||
<th>{% trans '5 Min' %}</th>
|
||||
<th>{% trans '15 Min' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{$ cpuNow $}</td>
|
||||
<td>{$ cpuOne $}</td>
|
||||
<td>{$ cpuFive $}</td>
|
||||
<td>{$ cpuFifteen $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Process Stats -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<h3 class="stat-title">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-tasks"></i>
|
||||
</div>
|
||||
</div>
|
||||
{% trans "Process Statistics" %}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="example-box-wrapper">
|
||||
<div class="content-box-wrapper">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans 'I/O Wait' %}</th>
|
||||
<th>{% trans 'Idle Time' %}</th>
|
||||
<th>{% trans 'HW Interrupts' %}</th>
|
||||
<th>{% trans 'Softirqs' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{$ ioWait $}</td>
|
||||
<td>{$ idleTime $}</td>
|
||||
<td>{$ hwInterrupts $}</td>
|
||||
<td>{$ Softirqs $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ totalProcesses || '0' $}</span>
|
||||
<span class="stat-label">{% trans "Total" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #10b981;">{$ runningProcesses || '0' $}</span>
|
||||
<span class="stat-label">{% trans "Running" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #3b82f6;">{$ sleepingProcesses || '0' $}</span>
|
||||
<span class="stat-label">{% trans "Sleeping" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #ef4444;">
|
||||
<span ng-if="zombieProcesses > 0">{$ zombieProcesses $}</span>
|
||||
<span ng-if="!zombieProcesses || zombieProcesses == 0">0</span>
|
||||
</span>
|
||||
<span class="stat-label">{% trans "Zombie" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="example-box-wrapper">
|
||||
<div class="content-box-wrapper">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans 'Memory' %}</th>
|
||||
<th>{% trans 'Free' %}</th>
|
||||
<th>{% trans 'Used' %}</th>
|
||||
<th>{% trans 'buff/cache' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{$ totalMemory $}</td>
|
||||
<td>{$ freeMemory $}</td>
|
||||
<td>{$ usedMemory $}</td>
|
||||
<td>{$ buffCache $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- CPU Load -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<h3 class="stat-title">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
{% trans "CPU Load Average" %}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="example-box-wrapper">
|
||||
<div class="content-box-wrapper">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans 'SWAP' %}</th>
|
||||
<th>{% trans 'Free' %}</th>
|
||||
<th>{% trans 'Used' %}</th>
|
||||
<th>{% trans 'buff/cache' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{$ swapTotalMemory $}</td>
|
||||
<td>{$ swapFreeMemory $}</td>
|
||||
<td>{$ swapUsedMemory $}</td>
|
||||
<td>{$ swapBuffCache $}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ cpuOne || '-' $}</span>
|
||||
<span class="stat-label">{% trans "1 Min" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ cpuFive || '-' $}</span>
|
||||
<span class="stat-label">{% trans "5 Min" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ cpuFifteen || '-' $}</span>
|
||||
<span class="stat-label">{% trans "15 Min" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ cpuNow || '-' $}%</span>
|
||||
<span class="stat-label">{% trans "Current" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt-30">
|
||||
<div class="example-box-wrapper">
|
||||
<h3 style="" class="content-box-header bg-blue mx-10">
|
||||
{% trans 'Top Processes' %}
|
||||
</h3>
|
||||
<div class="content-box-wrapper content">
|
||||
<div style="margin-top: 2%; margin-bottom: 2%" class="row">
|
||||
<div class="col-sm-8">
|
||||
<input placeholder="Search..." ng-model="search" name="dom" type="text"
|
||||
class="form-control mx-10" ng-model="domainNameCreate" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans 'PID' %}</th>
|
||||
<th>{% trans 'User' %}</th>
|
||||
<th>{% trans 'VIRT' %}</th>
|
||||
<th>{% trans 'RES' %}</th>
|
||||
<th>{% trans 'State' %}</th>
|
||||
<th>{% trans '%CPU' %}</th>
|
||||
<th>{% trans '%MEM' %}</th>
|
||||
<th>{% trans 'Time' %}</th>
|
||||
<th>{% trans 'Command' %}</th>
|
||||
<th>{% trans 'Actions' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="process in processes | filter:search">
|
||||
<td ng-bind="process.PID"></td>
|
||||
<td ng-bind="process.User"></td>
|
||||
<td ng-bind="process.VIRT"></td>
|
||||
<td ng-bind="process.RES"></td>
|
||||
<td ng-bind="process.S"></td>
|
||||
<td ng-bind="process.CPU"></td>
|
||||
<td ng-bind="process.MEM"></td>
|
||||
<td ng-bind="process.Time"></td>
|
||||
<td ng-bind="process.Command"></td>
|
||||
<td>
|
||||
<button ng-click="killProcess(process.PID)" class="btn btn-sm btn-danger">KILL</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Memory Stats -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<h3 class="stat-title">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-memory"></i>
|
||||
</div>
|
||||
{% trans "Memory Usage" %}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ totalMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Total" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #10b981;">{$ freeMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Free" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #ef4444;">{$ usedMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Used" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ buffCache || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Buff/Cache" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Swap Stats -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<h3 class="stat-title">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-hdd"></i>
|
||||
</div>
|
||||
{% trans "Swap Memory" %}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ swapTotalMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Total" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #10b981;">{$ swapFreeMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Free" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" style="color: #ef4444;">{$ swapUsedMemory || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Used" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ swapBuffCache || '-' $}</span>
|
||||
<span class="stat-label">{% trans "Available" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CPU Time Stats -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<h3 class="stat-title">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
{% trans "CPU Time Distribution" %}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ ioWait || '-' $}%</span>
|
||||
<span class="stat-label">{% trans "I/O Wait" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ idleTime || '-' $}%</span>
|
||||
<span class="stat-label">{% trans "Idle Time" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ hwInterrupts || '-' $}%</span>
|
||||
<span class="stat-label">{% trans "HW Interrupts" %}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{$ Softirqs || '-' $}%</span>
|
||||
<span class="stat-label">{% trans "Soft IRQs" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Process List -->
|
||||
<div class="processes-panel">
|
||||
<div class="panel-header">
|
||||
<h2 class="panel-title">
|
||||
<i class="fas fa-list"></i>
|
||||
{% trans "Running Processes" %}
|
||||
</h2>
|
||||
<div class="search-box">
|
||||
<i class="fas fa-search search-icon"></i>
|
||||
<input type="text" class="search-input" placeholder="{% trans 'Search processes...' %}" ng-model="search">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="modern-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "PID" %}</th>
|
||||
<th>{% trans "User" %}</th>
|
||||
<th>{% trans "State" %}</th>
|
||||
<th>{% trans "CPU %" %}</th>
|
||||
<th>{% trans "Memory %" %}</th>
|
||||
<th>{% trans "VIRT" %}</th>
|
||||
<th>{% trans "RES" %}</th>
|
||||
<th>{% trans "Time" %}</th>
|
||||
<th>{% trans "Command" %}</th>
|
||||
<th>{% trans "Actions" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="process in processes | filter:search">
|
||||
<td>
|
||||
<span style="font-weight: 600; color: #667eea;">{$ process.PID $}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="process-user">
|
||||
<div class="user-avatar">{$ process.User.charAt(0).toUpperCase() $}</div>
|
||||
<span>{$ process.User $}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="process-state"
|
||||
ng-class="{'state-running': process.S == 'R',
|
||||
'state-sleeping': process.S == 'S',
|
||||
'state-stopped': process.S == 'T',
|
||||
'state-zombie': process.S == 'Z'}">
|
||||
<span ng-if="process.S == 'R'">Running</span>
|
||||
<span ng-if="process.S == 'S'">Sleeping</span>
|
||||
<span ng-if="process.S == 'T'">Stopped</span>
|
||||
<span ng-if="process.S == 'Z'">Zombie</span>
|
||||
<span ng-if="process.S != 'R' && process.S != 'S' && process.S != 'T' && process.S != 'Z'">{$ process.S $}</span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cpu-usage">
|
||||
<div class="usage-bar">
|
||||
<div class="usage-fill" ng-style="{'width': process.CPU + '%'}"></div>
|
||||
</div>
|
||||
<span class="metric-badge"
|
||||
ng-class="{'metric-high': process.CPU > 80,
|
||||
'metric-medium': process.CPU > 50 && process.CPU <= 80,
|
||||
'metric-low': process.CPU <= 50}">
|
||||
{$ process.CPU $}%
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="metric-badge"
|
||||
ng-class="{'metric-high': process.MEM > 20,
|
||||
'metric-medium': process.MEM > 10 && process.MEM <= 20,
|
||||
'metric-low': process.MEM <= 10}">
|
||||
{$ process.MEM $}%
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style="font-family: monospace; font-size: 0.875rem;">{$ process.VIRT $}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style="font-family: monospace; font-size: 0.875rem;">{$ process.RES $}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style="font-family: monospace; font-size: 0.875rem;">{$ process.Time $}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="command-text" title="{$ process.Command $}">
|
||||
{$ process.Command $}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button ng-click="killProcess(process.PID)" class="kill-button">
|
||||
<i class="fas fa-times"></i>
|
||||
{% trans "Kill" %}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block footer_scripts %}
|
||||
<script src="{% static 'serverStatus/serverStatus.js' %}"></script>
|
||||
{% endblock %}
|
||||
0
serverStatus/tests.py
Executable file → Normal file
0
serverStatus/tests.py
Executable file → Normal file
0
serverStatus/urls.py
Executable file → Normal file
0
serverStatus/urls.py
Executable file → Normal file
0
serverStatus/views.py
Executable file → Normal file
0
serverStatus/views.py
Executable file → Normal file
Reference in New Issue
Block a user