diff --git a/web/html/index.html b/web/html/index.html index 1302bbed..b50d0189 100644 --- a/web/html/index.html +++ b/web/html/index.html @@ -9,10 +9,7 @@ + message='{{ i18n "secAlertTitle" }}' color="red" description='{{ i18n "secAlertSsl" }}' show-icon closable> @@ -29,16 +26,16 @@ -
- {{ i18n "pages.index.cpu" }}: [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]] + {{ i18n "pages.index.cpu" }}: [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]] - + @@ -49,11 +46,11 @@
-
- {{ i18n "pages.index.memory"}}: [[ SizeFormatter.sizeFormat(status.mem.current) ]] / [[ SizeFormatter.sizeFormat(status.mem.total) ]] + {{ i18n "pages.index.memory"}}: [[ SizeFormatter.sizeFormat(status.mem.current) ]] / + [[ SizeFormatter.sizeFormat(status.mem.total) ]]
@@ -61,19 +58,19 @@ -
- {{ i18n "pages.index.swap" }}: [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]] + {{ i18n "pages.index.swap" }}: [[ SizeFormatter.sizeFormat(status.swap.current) ]] / + [[ SizeFormatter.sizeFormat(status.swap.total) ]]
-
- {{ i18n "pages.index.storage"}}: [[ SizeFormatter.sizeFormat(status.disk.current) ]] / [[ SizeFormatter.sizeFormat(status.disk.total) ]] + {{ i18n "pages.index.storage"}}: [[ SizeFormatter.sizeFormat(status.disk.current) ]] + / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
@@ -93,7 +90,9 @@ @@ -130,7 +130,8 @@ - [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n "pages.index.xraySwitch" }}' ]] + [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n + "pages.index.xraySwitch" }}' ]] @@ -175,7 +176,8 @@ - Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) ]] + Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) + ]] OS: [[ TimeFormatter.formatSecond(status.uptime) ]] @@ -193,7 +195,8 @@ - {{ i18n "pages.index.memory" }}: [[ SizeFormatter.sizeFormat(status.appStats.mem) ]] + {{ i18n "pages.index.memory" }}: [[ + SizeFormatter.sizeFormat(status.appStats.mem) ]] {{ i18n "pages.index.threads" }}: [[ status.appStats.threads ]] @@ -201,7 +204,8 @@ - + @@ -211,7 +215,8 @@ - + @@ -227,14 +232,16 @@ - + - + @@ -250,7 +257,8 @@ - + @@ -297,55 +305,54 @@ - + - - + + [[ version ]] - + - - + + [[ file ]] - + -
{{ i18n "pages.index.geofilesUpdateAll" }}
+
{{ i18n + "pages.index.geofilesUpdateAll" }}
 - + - + - + 10 20 50 100 500 - + Debug Info Notice @@ -358,31 +365,24 @@ SysLog - + -
+
- + - + - + 10 20 50 @@ -400,24 +400,21 @@ Proxy - + -
+
- - + + - + @@ -429,33 +426,25 @@ - +
- + +
Timeframe: [[ cpuHistoryModal.bucket ]] sec per point (total [[ cpuHistoryLong.length ]] points)
 @@ -543,7 +532,7 @@ const last = this.pointsArr[this.pointsArr.length - 1] const line = this.points // Close to bottom to create an area fill - return `M ${first[0]},${this.paddingTop + this.drawHeight} L ${line.replace(/ /g,' L ')} L ${last[0]},${this.paddingTop + this.drawHeight} Z` + return `M ${first[0]},${this.paddingTop + this.drawHeight} L ${line.replace(/ /g, ' L ')} L ${last[0]},${this.paddingTop + this.drawHeight} Z` }, gridLines() { if (!this.showGrid) return [] @@ -609,7 +598,8 @@ const labels = this.labelsSlice const idx = this.hoverIdx if (idx < 0 || idx >= this.dataSlice.length) return '' - const val = Math.max(0, Math.min(100, Number(this.dataSlice[idx] || 0))) + const raw = Math.max(0, Math.min(100, Number(this.dataSlice[idx] || 0))) + const val = Number.isFinite(raw) ? raw.toFixed(2) : raw const lab = labels[idx] != null ? labels[idx] : '' return `${val}%${lab ? ' • ' + lab : ''}` }, @@ -649,175 +639,176 @@ `, }) - class CurTotal { - constructor(current, total) { - this.current = current; - this.total = total; - } + class CurTotal { - get percent() { - if (this.total === 0) { - return 0; - } - return NumberFormatter.toFixed(this.current / this.total * 100, 2); - } - - get color() { - const percent = this.percent; - if (percent < 80) { - return '#008771'; // Green - } else if (percent < 90) { - return "#f37b24"; // Orange - } else { - return "#cf3c3c"; // Red - } - } + constructor(current, total) { + this.current = current; + this.total = total; } - class Status { - constructor(data) { - this.cpu = new CurTotal(0, 0); - this.cpuCores = 0; - this.logicalPro = 0; - this.cpuSpeedMhz = 0; - this.disk = new CurTotal(0, 0); - this.loads = [0, 0, 0]; - this.mem = new CurTotal(0, 0); - this.netIO = { up: 0, down: 0 }; - this.netTraffic = { sent: 0, recv: 0 }; - this.publicIP = { ipv4: 0, ipv6: 0 }; - this.swap = new CurTotal(0, 0); - this.tcpCount = 0; - this.udpCount = 0; - this.uptime = 0; - this.appUptime = 0; - this.appStats = {threads: 0, mem: 0, uptime: 0}; - - this.xray = { state: 'stop', stateMsg: "", errorMsg: "", version: "", color: "" }; - - if (data == null) { - return; - } - - this.cpu = new CurTotal(data.cpu, 100); - this.cpuCores = data.cpuCores; - this.logicalPro = data.logicalPro; - this.cpuSpeedMhz = data.cpuSpeedMhz; - this.disk = new CurTotal(data.disk.current, data.disk.total); - this.loads = data.loads.map(load => NumberFormatter.toFixed(load, 2)); - this.mem = new CurTotal(data.mem.current, data.mem.total); - this.netIO = data.netIO; - this.netTraffic = data.netTraffic; - this.publicIP = data.publicIP; - this.swap = new CurTotal(data.swap.current, data.swap.total); - this.tcpCount = data.tcpCount; - this.udpCount = data.udpCount; - this.uptime = data.uptime; - this.appUptime = data.appUptime; - this.appStats = data.appStats; - this.xray = data.xray; - switch (this.xray.state) { - case 'running': - this.xray.color = "green"; - this.xray.stateMsg = '{{ i18n "pages.index.xrayStatusRunning" }}'; - break; - case 'stop': - this.xray.color = "orange"; - this.xray.stateMsg = '{{ i18n "pages.index.xrayStatusStop" }}'; - break; - case 'error': - this.xray.color = "red"; - this.xray.stateMsg ='{{ i18n "pages.index.xrayStatusError" }}'; - break; - default: - this.xray.color = "gray"; - this.xray.stateMsg = '{{ i18n "pages.index.xrayStatusUnknown" }}'; - break; - } - } + get percent() { + if (this.total === 0) { + return 0; + } + return NumberFormatter.toFixed(this.current / this.total * 100, 2); } - const versionModal = { - visible: false, - versions: [], - show(versions) { - this.visible = true; - this.versions = versions; - }, - hide() { - this.visible = false; - }, - }; + get color() { + const percent = this.percent; + if (percent < 80) { + return '#008771'; // Green + } else if (percent < 90) { + return "#f37b24"; // Orange + } else { + return "#cf3c3c"; // Red + } + } + } - const logModal = { - visible: false, - logs: [], - rows: 20, - level: 'info', - syslog: false, - loading: false, - show(logs) { - this.visible = true; - this.logs = logs; - this.formattedLogs = this.logs?.length > 0 ? this.formatLogs(this.logs) : "No Record..."; - }, - formatLogs(logs) { - let formattedLogs = ''; - const levels = ["DEBUG","INFO","NOTICE","WARNING","ERROR"]; - const levelColors = ["#3c89e8","#008771","#008771","#f37b24","#e04141","#bcbcbc"]; + class Status { + constructor(data) { + this.cpu = new CurTotal(0, 0); + this.cpuCores = 0; + this.logicalPro = 0; + this.cpuSpeedMhz = 0; + this.disk = new CurTotal(0, 0); + this.loads = [0, 0, 0]; + this.mem = new CurTotal(0, 0); + this.netIO = { up: 0, down: 0 }; + this.netTraffic = { sent: 0, recv: 0 }; + this.publicIP = { ipv4: 0, ipv6: 0 }; + this.swap = new CurTotal(0, 0); + this.tcpCount = 0; + this.udpCount = 0; + this.uptime = 0; + this.appUptime = 0; + this.appStats = { threads: 0, mem: 0, uptime: 0 }; - logs.forEach((log, index) => { - let [data, message] = log.split(" - ",2); - const parts = data.split(" ") - if(index>0) formattedLogs += '
'; + this.xray = { state: 'stop', stateMsg: "", errorMsg: "", version: "", color: "" }; - if (parts.length === 3) { - const d = parts[0]; - const t = parts[1]; - const level = parts[2]; - const levelIndex = levels.indexOf(level,levels) || 5; + if (data == null) { + return; + } - //formattedLogs += `${index + 1}.`; - formattedLogs += `${d} ${t} `; - formattedLogs += `${level}`; - } else { - const levelIndex = levels.indexOf(data,levels) || 5; - formattedLogs += `${data}`; - } + this.cpu = new CurTotal(data.cpu, 100); + this.cpuCores = data.cpuCores; + this.logicalPro = data.logicalPro; + this.cpuSpeedMhz = data.cpuSpeedMhz; + this.disk = new CurTotal(data.disk.current, data.disk.total); + this.loads = data.loads.map(load => NumberFormatter.toFixed(load, 2)); + this.mem = new CurTotal(data.mem.current, data.mem.total); + this.netIO = data.netIO; + this.netTraffic = data.netTraffic; + this.publicIP = data.publicIP; + this.swap = new CurTotal(data.swap.current, data.swap.total); + this.tcpCount = data.tcpCount; + this.udpCount = data.udpCount; + this.uptime = data.uptime; + this.appUptime = data.appUptime; + this.appStats = data.appStats; + this.xray = data.xray; + switch (this.xray.state) { + case 'running': + this.xray.color = "green"; + this.xray.stateMsg = '{{ i18n "pages.index.xrayStatusRunning" }}'; + break; + case 'stop': + this.xray.color = "orange"; + this.xray.stateMsg = '{{ i18n "pages.index.xrayStatusStop" }}'; + break; + case 'error': + this.xray.color = "red"; + this.xray.stateMsg = '{{ i18n "pages.index.xrayStatusError" }}'; + break; + default: + this.xray.color = "gray"; + this.xray.stateMsg = '{{ i18n "pages.index.xrayStatusUnknown" }}'; + break; + } + } + } - if(message){ - if(message.startsWith("XRAY:")) - message = "XRAY: " + message.substring(5); - else - message = "X-UI: " + message; - } + const versionModal = { + visible: false, + versions: [], + show(versions) { + this.visible = true; + this.versions = versions; + }, + hide() { + this.visible = false; + }, + }; - formattedLogs += message ? ' - ' + message : ''; - }); + const logModal = { + visible: false, + logs: [], + rows: 20, + level: 'info', + syslog: false, + loading: false, + show(logs) { + this.visible = true; + this.logs = logs; + this.formattedLogs = this.logs?.length > 0 ? this.formatLogs(this.logs) : "No Record..."; + }, + formatLogs(logs) { + let formattedLogs = ''; + const levels = ["DEBUG", "INFO", "NOTICE", "WARNING", "ERROR"]; + const levelColors = ["#3c89e8", "#008771", "#008771", "#f37b24", "#e04141", "#bcbcbc"]; - return formattedLogs; - }, - hide() { - this.visible = false; - }, - }; + logs.forEach((log, index) => { + let [data, message] = log.split(" - ", 2); + const parts = data.split(" ") + if (index > 0) formattedLogs += '
'; - const xraylogModal = { - visible: false, - logs: [], - rows: 20, - showDirect: true, - showBlocked: true, - showProxy: true, - loading: false, - show(logs) { - this.visible = true; - this.logs = logs; - this.formattedLogs = this.logs?.length > 0 ? this.formatLogs(this.logs) : "No Record..."; - }, - formatLogs(logs) { - let formattedLogs = ` + if (parts.length === 3) { + const d = parts[0]; + const t = parts[1]; + const level = parts[2]; + const levelIndex = levels.indexOf(level, levels) || 5; + + //formattedLogs += `${index + 1}.`; + formattedLogs += `${d} ${t} `; + formattedLogs += `${level}`; + } else { + const levelIndex = levels.indexOf(data, levels) || 5; + formattedLogs += `${data}`; + } + + if (message) { + if (message.startsWith("XRAY:")) + message = "XRAY: " + message.substring(5); + else + message = "X-UI: " + message; + } + + formattedLogs += message ? ' - ' + message : ''; + }); + + return formattedLogs; + }, + hide() { + this.visible = false; + }, + }; + + const xraylogModal = { + visible: false, + logs: [], + rows: 20, + showDirect: true, + showBlocked: true, + showProxy: true, + loading: false, + show(logs) { + this.visible = true; + this.logs = logs; + this.formattedLogs = this.logs?.length > 0 ? this.formatLogs(this.logs) : "No Record..."; + }, + formatLogs(logs) { + let formattedLogs = `