Fix system resourses check

Helper.cs

@@ -3,6 +3,7 @@ using System.Drawing;
 using System.Drawing.Imaging;
 using System.IO.Compression;
 using System.Text;
+using System.Text.RegularExpressions;
 
 namespace MTWireGuard
 {
@@ -84,5 +85,7 @@ namespace MTWireGuard
                 "" => throw new ArgumentException($"{nameof(input)} cannot be empty", nameof(input)),
                 _ => string.Concat(input[0].ToString().ToUpper(), input.AsSpan(1))
             };
+
+        public static string RemoveNonNumerics(this string input) => Regex.Replace(input, "[^0-9.]", "");
     }
 }

Mapper/MappingProfile.cs

@@ -2,6 +2,7 @@
 using Microsoft.EntityFrameworkCore;
 using MTWireGuard.Models;
 using MTWireGuard.Models.Mikrotik;
+using System.Text.RegularExpressions;
 
 namespace MTWireGuard.Mapper
 {
@@ -70,12 +71,7 @@ namespace MTWireGuard.Mapper
                 .ForMember(dest => dest.UsedRAM,
                     opt => opt.MapFrom(src => Helper.ConvertByteSize(Convert.ToInt64(src.TotalMemory) - Convert.ToInt64(src.FreeMemory), 2)))
                 .ForMember(dest => dest.UPTime,
-                    opt => opt.MapFrom(src => src.Uptime.
+                    opt => opt.MapFrom(src => FormatUptime(src.Uptime)));
-                    //  Replace('d', ' ').
-                        Replace('h', ':').
-                        Replace('m', ':').
-                        Replace("s", "")))
-                ;
 
             // Router Identity
             CreateMap<MTIdentity, MTIdentityViewModel>();
@@ -110,5 +106,32 @@ namespace MTWireGuard.Mapper
         {
             return topics.Split(',', StringSplitOptions.TrimEntries).Select(t => t = Helper.UpperCaseTopics.Contains(t) ? t.ToUpper() : t.FirstCharToUpper()).ToList();
         }
+
+        private static string FormatUptime(string uptime)
+        {
+            string patternWeek = "(\\d+)w",
+                patternDay = "(\\d+)d",
+                patternHour = "(\\d+)h",
+                patternMinute = "(\\d+)m",
+                patternSecond = "(\\d+)s";
+            Regex weekRx = new(patternWeek),
+                dayRx = new(patternDay),
+                hourRx = new(patternHour),
+                minuteRx = new(patternMinute),
+                secondRx = new(patternSecond);
+            string week = weekRx.Match(uptime).Value.RemoveNonNumerics(),
+                day = dayRx.Match(uptime).Value.RemoveNonNumerics(),
+                hour, minute, second;
+            var hourMatch = hourRx.Match(uptime);
+            var minuteMatch = minuteRx.Match(uptime);
+            var secondMatch = secondRx.Match(uptime);
+            hour = !string.IsNullOrWhiteSpace(hourMatch.Value.RemoveNonNumerics()) ? hourMatch.Value.RemoveNonNumerics() : "00";
+            minute = !string.IsNullOrWhiteSpace(minuteMatch.Value.RemoveNonNumerics()) ? minuteMatch.Value.RemoveNonNumerics() : "00";
+            second = !string.IsNullOrWhiteSpace(secondMatch.Value.RemoveNonNumerics()) ? secondMatch.Value.RemoveNonNumerics() : "00";
+            hour = int.Parse(hour.RemoveNonNumerics()).ToString("D2");
+            minute = int.Parse(minute.RemoveNonNumerics()).ToString("D2");
+            second = int.Parse(second.RemoveNonNumerics()).ToString("D2");
+            return $"{week}w {day}d {hour}:{minute}:{second}";
+        }
     }
 }

Models/Mikrotik/MTInfo.cs

@@ -71,4 +71,18 @@ namespace MTWireGuard.Models.Mikrotik
         public string UPTime { get; set; }
         public string Version { get; set; }
     }
+
+    public class SidebarInfo
+    {
+        public int RAMUsedPercentage { get; set; }
+        public int CPUUsedPercentage { get; set; }
+        public int HDDUsedPercentage { get; set; }
+        public string RAMUsed { get; set; }
+        public string HDDUsed { get; set; }
+        public string TotalRAM { get; set; }
+        public string TotalHDD { get; set; }
+        public string RAMBgColor { get; set; }
+        public string CPUBgColor { get; set; }
+        public string HDDBgColor { get; set; }
+    }
 }

Pages/Components/LogsView.razor

@@ -38,8 +38,6 @@
                         case "l2tp":
                         case "pptp":
                         case "sstp":
-                            <span class="badge text-bg-light border border-secondary mx-1">@topic</span>
-                            break;
                         default:
                             <span class="badge text-bg-light border border-secondary mx-1">@topic</span>
                             break;

Pages/Settings.cshtml

@@ -1,4 +1,4 @@
-@page
+@page "{handler?}"
 @using MTWireGuard.Models.Mikrotik
 @model SettingsModel
 @{
@@ -113,7 +113,7 @@
                 </div>
                 <div class="vr"></div>
                 <div class="col">
-                    <div class="fs-5 fw-semibold">@info.CPULoad %</div>
+                    <div class="fs-5 fw-semibold" id="cpuLoad">@info.CPULoad %</div>
                     <div class="text-uppercase text-medium-emphasis small">Usage</div>
                 </div>
             </div>

Pages/Settings.cshtml.cs

@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
+using MTWireGuard.Models.Mikrotik;
 using MTWireGuard.Repositories;
 
 namespace MTWireGuard.Pages
@@ -25,7 +26,36 @@ namespace MTWireGuard.Pages
         public async Task<IActionResult> OnGetGetInfo()
         {
             var info = await API.GetInfo();
-            return new JsonResult(info);
+            var ramUsed = 100 - info.FreeRAMPercentage;
+            var hddUsed = 100 - info.FreeHDDPercentage;
+            string cpuColor, ramColor, hddColor;
+
+            if (info.CPULoad <= 25) cpuColor = "bg-info-gradient";
+            else if (info.CPULoad <= 75) cpuColor = "bg-warning-gradient";
+            else cpuColor = "bg-danger-gradient";
+
+            if (hddUsed <= 25) hddColor = "bg-info-gradient";
+            else if (hddUsed <= 75) hddColor = "bg-warning-gradient";
+            else hddColor = "bg-danger-gradient";
+
+            if (ramUsed <= 25) ramColor = "bg-info-gradient";
+            else if (ramUsed <= 75) ramColor = "bg-warning-gradient";
+            else ramColor = "bg-danger-gradient";
+
+            var result = new SidebarInfo()
+            {
+                CPUBgColor = cpuColor,
+                HDDBgColor = hddColor,
+                RAMBgColor = ramColor,
+                CPUUsedPercentage = info.CPULoad,
+                HDDUsedPercentage = hddUsed,
+                RAMUsedPercentage = ramUsed,
+                HDDUsed = info.UsedHDD,
+                RAMUsed = info.UsedRAM,
+                TotalHDD = info.TotalHDD,
+                TotalRAM = info.TotalRAM,
+            };
+            return new JsonResult(result);
         }
     }
 }

Pages/Shared/_Layout.cshtml

@@ -2,22 +2,6 @@
 @inject IMikrotikRepository API;
 @{
     var logs = await API.GetLogsAsync();
-    var info = await API.GetInfo();
-    var ramUsed = 100 - info.FreeRAMPercentage;
-    var hddUsed = 100 - info.FreeHDDPercentage;
-    string cpuColor, ramColor, hddColor;
-
-    if (info.CPULoad <= 25) cpuColor = "bg-info-gradient";
-    else if (info.CPULoad <= 75) cpuColor = "bg-warning-gradient";
-    else cpuColor = "bg-danger-gradient";
-
-    if (hddUsed <= 25) hddColor = "bg-info-gradient";
-    else if (hddUsed <= 75) hddColor = "bg-warning-gradient";
-    else hddColor = "bg-danger-gradient";
-
-    if (ramUsed <= 25) ramColor = "bg-info-gradient";
-    else if (ramUsed<= 75) ramColor = "bg-warning-gradient";
-    else ramColor = "bg-danger-gradient";
 }
 <!DOCTYPE html>
 <html lang="en">
@@ -98,23 +82,26 @@
                 </a>
             </li>
             <li class="nav-title mt-auto">System Utilization</li>
-            <li class="nav-item px-3 d-narrow-none">
+            <li class="nav-item px-3 d-narrow-none" id="cpuUsage">
                 <div class="text-uppercase mb-1"><small><b>CPU Usage</b></small></div>
                 <div class="progress progress-thin">
-                    <div class="progress-bar @cpuColor" role="progressbar" style="width: @info.CPULoad%" aria-valuenow="@info.CPULoad" aria-valuemin="0" aria-valuemax="100"></div>
+                    <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-                </div><small class="text-medium-emphasis-inverse">@info.CPULoad% is using.</small>
+                </div>
+                <small class="text-medium-emphasis-inverse">0% is using.</small>
             </li>
-            <li class="nav-item px-3 d-narrow-none">
+            <li class="nav-item px-3 d-narrow-none" id="ramUsage">
                 <div class="text-uppercase mb-1"><small><b>Memory Usage</b></small></div>
                 <div class="progress progress-thin">
-                    <div class="progress-bar @ramColor" role="progressbar" style="width: @ramUsed%" aria-valuenow="@ramUsed" aria-valuemin="0" aria-valuemax="100"></div>
+                    <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-                </div><small class="text-medium-emphasis-inverse">@info.UsedRAM/@info.TotalRAM</small>
+                </div>
+                <small class="text-medium-emphasis-inverse">0/0</small>
             </li>
-            <li class="nav-item px-3 mb-3 d-narrow-none">
+            <li class="nav-item px-3 mb-3 d-narrow-none" id="hddUsage">
                 <div class="text-uppercase mb-1"><small><b>Disk Usage</b></small></div>
                 <div class="progress progress-thin">
-                    <div class="progress-bar @hddColor" role="progressbar" style="width: @hddUsed%" aria-valuenow="@hddUsed" aria-valuemin="0" aria-valuemax="100"></div>
+                    <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-                </div><small class="text-medium-emphasis-inverse">@info.UsedHDD/@info.TotalHDD</small>
+                </div>
+                <small class="text-medium-emphasis-inverse">0/0</small>
             </li>
         </ul>
         <button class="sidebar-toggler" type="button" data-coreui-toggle="unfoldable"></button>

wwwroot/js/script.js

@@ -39,6 +39,7 @@ dropdownBTNs.forEach(btn => {
 
 
 document.addEventListener("DOMContentLoaded", function (event) {
+    refreshSidebar();
     refreshTables();
 });
 
@@ -131,3 +132,35 @@ function updateServerBtn(event) {
     document.querySelector('#EditModal input[name="MTU"]').placeholder = mtu;
     document.querySelector('#EditModal input[id$="PubKey"]').placeholder = publicKey;
 }
+
+function refreshSidebar() {
+    fetch("/Settings/getInfo")
+        .then((response) => response.json())
+        .then((data) => {
+            let cpuProgress = document.querySelector('#cpuUsage div.progress-bar');
+            let ramProgress = document.querySelector('#ramUsage div.progress-bar');
+            let hddProgress = document.querySelector('#hddUsage div.progress-bar');
+            let cpuText = document.querySelector('#cpuUsage small.text-medium-emphasis-inverse');
+            let ramText = document.querySelector('#ramUsage small.text-medium-emphasis-inverse');
+            let hddText = document.querySelector('#hddUsage small.text-medium-emphasis-inverse');
+            cpuProgress.ariaValueNow = data.cpuUsedPercentage;
+            ramProgress.ariaValueNow = data.ramUsedPercentage;
+            hddProgress.ariaValueNow = data.hddUsedPercentage;
+            cpuProgress.style.width = data.cpuUsedPercentage + '%';
+            ramProgress.style.width = data.ramUsedPercentage + '%';
+            hddProgress.style.width = data.hddUsedPercentage + '%';
+            cpuProgress.setAttribute('class', 'progress-bar');
+            ramProgress.setAttribute('class', 'progress-bar');
+            hddProgress.setAttribute('class', 'progress-bar');
+            cpuProgress.classList.add(data.cpuBgColor);
+            ramProgress.classList.add(data.ramBgColor);
+            hddProgress.classList.add(data.hddBgColor);
+            cpuText.textContent = `${data.cpuUsedPercentage}% using`;
+            ramText.textContent = `${data.ramUsed}/${data.totalRAM} using`;
+            hddText.textContent = `${data.hddUsed}/${data.totalHDD} using`;
+            // Settings Page
+            if (window.location.href.endsWith("/Settings")) {
+                document.getElementById('cpuLoad').innerText = `${data.cpuUsedPercentage}%`;
+            }
+        });
+}