Fix topProcesses page: Remove auto-refresh and fix double percentage signs

- Remove auto-refresh timeout (3 seconds) from topProcesses page
- Add manual refresh button in page header
- Fix double percentage signs (%% -> %) in CPU Time Distribution
- Remove duplicate serverStatus.js script loading in footer_scripts block

Changes:
- Removed $timeout($scope.topProcessesStatus, 3000) from serverStatus.js
- Removed extra % sign from template (backend already includes % in values)
- Added refresh button with loading state indicator

public/static/serverStatus/serverStatus.js

@@ -3,7 +3,6 @@
  */
 
 
-
 /* Java script code to start/stop litespeed */
 app.controller('litespeedStatus', function ($scope, $http) {
 
@@ -424,6 +423,87 @@ app.controller('readCyberCPLogFile', function ($scope, $http) {
 
 /* Services */
 
+
+app.controller('securityrule', function ($scope, $http) {
+
+    $scope.securityruleLoading = true;
+
+
+    $scope.ActivateTags = ['Agents', 'AppsInitialization', 'Backdoor', 'Bruteforce', 'CWAF', 'Domains', 'Drupal', 'FilterASP',
+        'FilterGen', 'FilterInFarme', 'FilterOther', 'FilterPHP', 'FiltersEnd', 'FilterSQL', 'Generic', 'HTTP', 'HTTPDoS',
+        'Incoming', 'Initialzation', 'JComponent', 'Joomla', 'Other', 'OtherApps', 'PHPGen', 'Protocol', 'Request', 'RoRGen',
+        'SQLi', 'WHMCS', 'WordPress', 'WPPlugin', 'XSS']
+
+    $scope.DeactivatedTags = []
+
+
+    $scope.toggleActivation = function (tag) {
+        var index = $scope.ActivateTags.indexOf(tag);
+        if (index > -1) {
+            $scope.ActivateTags.splice(index, 1);
+            $scope.DeactivatedTags.push(tag);
+        } else {
+            index = $scope.DeactivatedTags.indexOf(tag);
+            if (index > -1) {
+                $scope.DeactivatedTags.splice(index, 1);
+                $scope.ActivateTags.push(tag);
+            }
+        }
+    };
+
+
+    $scope.applychanges = function () {
+
+        $scope.securityruleLoading = false;
+        url = "/serverstatus/securityruleUpdate";
+
+        var data = {
+            ActivateTags: $scope.ActivateTags,
+            DeactivatedTags: $scope.DeactivatedTags,
+            RuleID: $scope.ruleID,
+            Regular_expressions: $scope.Regular_expressions
+
+        };
+
+        var config = {
+            headers: {
+                'X-CSRFToken': getCookie('csrftoken')
+            }
+        };
+
+
+        $http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);
+
+
+        function ListInitialDatas(response) {
+            $scope.securityruleLoading = true;
+            if (response.data.status === 1) {
+                new PNotify({
+                    title: 'Done',
+                    text: "Changes Applied",
+                    type: 'success'
+                });
+            } else {
+                new PNotify({
+                    title: 'Operation Failed!',
+                    text: response.data.error_message,
+                    type: 'error'
+                });
+            }
+
+        }
+
+        function cantLoadInitialDatas(response) {
+            $scope.securityruleLoading = true;
+            new PNotify({
+                title: 'Operation Failed!',
+                text: 'Could not connect to server, please refresh this page',
+                type: 'error'
+            });
+        }
+    }
+});
+
 app.controller('servicesManager', function ($scope, $http) {
 
     $scope.services = false;
@@ -698,6 +778,95 @@ app.controller('lswsSwitch', function ($scope, $http, $timeout, $window) {
 
 });
 
+/* Controller for switching back to OpenLiteSpeed */
+app.controller('switchToOLS', function ($scope, $http, $timeout, $window) {
+
+    $scope.cyberPanelLoading = true;
+    $scope.installBoxGen = true;
+
+    $scope.switchToOLS = function () {
+        $scope.cyberPanelLoading = false;
+        $scope.installBoxGen = true;
+
+        url = "/serverstatus/switchToOLS";
+
+        var data = {};
+
+        var config = {
+            headers: {
+                'X-CSRFToken': getCookie('csrftoken')
+            }
+        };
+
+        $http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);
+
+        function ListInitialDatas(response) {
+            $scope.cyberPanelLoading = true;
+            if (response.data.status === 1) {
+                $scope.installBoxGen = false;
+                getRequestStatus();
+            } else {
+                new PNotify({
+                    title: 'Operation Failed!',
+                    text: response.data.error_message,
+                    type: 'error'
+                });
+            }
+        }
+
+        function cantLoadInitialDatas(response) {
+            $scope.cyberPanelLoading = true;
+            new PNotify({
+                title: 'Operation Failed!',
+                text: 'Could not connect to server, please refresh this page',
+                type: 'error'
+            });
+        }
+    };
+
+    function getRequestStatus() {
+        $scope.cyberPanelLoading = false;
+
+        url = "/serverstatus/switchToOLSStatus";
+
+        var data = {};
+
+        var config = {
+            headers: {
+                'X-CSRFToken': getCookie('csrftoken')
+            }
+        };
+
+        $http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);
+
+        function ListInitialDatas(response) {
+            if (response.data.abort === 0) {
+                $scope.requestData = response.data.requestStatus;
+                $timeout(getRequestStatus, 1000);
+            } else {
+                // Notifications
+                $scope.cyberPanelLoading = true;
+                $timeout.cancel();
+                $scope.requestData = response.data.requestStatus;
+                if (response.data.installed === 1) {
+                    $timeout(function () {
+                        $window.location.reload();
+                    }, 3000);
+                }
+            }
+        }
+
+        function cantLoadInitialDatas(response) {
+            $scope.cyberPanelLoading = true;
+            new PNotify({
+                title: 'Operation Failed!',
+                text: 'Could not connect to server, please refresh this page',
+                type: 'error'
+            });
+        }
+    }
+});
+
 app.controller('topProcesses', function ($scope, $http, $timeout) {
 
     $scope.cyberPanelLoading = true;
@@ -761,7 +930,7 @@ app.controller('topProcesses', function ($scope, $http, $timeout) {
                 $scope.stoppedProcesses = response.data.stoppedProcesses;
                 $scope.zombieProcesses = response.data.zombieProcesses;
 
-                $timeout($scope.topProcessesStatus, 3000);
+                // Auto-refresh removed - user can manually refresh using the button
             } else {
                 new PNotify({
                     title: 'Operation Failed!',
@@ -1073,10 +1242,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: {
@@ -1093,7 +1262,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!',
@@ -1110,11 +1279,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'
             });
         }
 

serverStatus/static/serverStatus/serverStatus.js

@@ -930,7 +930,7 @@ app.controller('topProcesses', function ($scope, $http, $timeout) {
                 $scope.stoppedProcesses = response.data.stoppedProcesses;
                 $scope.zombieProcesses = response.data.zombieProcesses;
 
-                $timeout($scope.topProcessesStatus, 3000);
+                // Auto-refresh removed - user can manually refresh using the button
             } else {
                 new PNotify({
                     title: 'Operation Failed!',

serverStatus/templates/serverStatus/topProcesses.html

@@ -184,23 +184,47 @@
         margin: 0 auto;
     }
     
-    .auto-refresh-indicator {
+    .header-actions {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        margin-top: 1.5rem;
+    }
+    
+    .btn-refresh {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         background: rgba(255, 255, 255, 0.2);
-        padding: 0.5rem 1rem;
+        color: white;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        padding: 0.75rem 1.5rem;
         border-radius: 20px;
         font-size: 1rem;
-        margin-top: 1rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        backdrop-filter: blur(10px);
     }
     
-    .refresh-dot {
-        width: 8px;
-        height: 8px;
-        background: var(--success-accent);
-        border-radius: 50%;
-        animation: pulse 1.5s infinite;
+    .btn-refresh:hover:not(:disabled) {
+        background: rgba(255, 255, 255, 0.3);
+        border-color: rgba(255, 255, 255, 0.5);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+    
+    .btn-refresh:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+    
+    .btn-refresh i {
+        transition: transform 0.3s ease;
+    }
+    
+    .btn-refresh i.fa-spin {
+        animation: spin 1s linear infinite;
     }
     
     .stats-grid {
@@ -616,9 +640,11 @@
             <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 class="header-actions">
+                <button type="button" ng-click="topProcessesStatus()" class="btn-refresh" ng-disabled="!cyberPanelLoading">
+                    <i class="fas fa-sync-alt" ng-class="{'fa-spin': !cyberPanelLoading}"></i>
+                    {% trans "Refresh" %}
+                </button>
             </div>
         </div>
     </div>
@@ -793,19 +819,19 @@
             </div>
             <div class="stat-content">
                 <div class="stat-item">
-                    <span class="stat-value">{$ ioWait || '-' $}%</span>
+                    <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-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-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-value">{$ Softirqs || '-' $}</span>
                     <span class="stat-label">{% trans "Soft IRQs" %}</span>
                 </div>
             </div>
@@ -916,5 +942,5 @@
 {% endblock %}
 
 {% block footer_scripts %}
-<script src="{% static 'serverStatus/serverStatus.js' %}"></script>
+<!-- serverStatus.js is already loaded by base template, no need to load again -->
 {% endblock %}

static/serverStatus/serverStatus.js

@@ -930,7 +930,7 @@ app.controller('topProcesses', function ($scope, $http, $timeout) {
                 $scope.stoppedProcesses = response.data.stoppedProcesses;
                 $scope.zombieProcesses = response.data.zombieProcesses;
 
-                $timeout($scope.topProcessesStatus, 3000);
+                // Auto-refresh removed - user can manually refresh using the button
             } else {
                 new PNotify({
                     title: 'Operation Failed!',