Merge branch 'dev'

arloor · Oct 24, 2024 · 0e2cea2 · 0e2cea2
1 parent e0f6c5e
commit 0e2cea2
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 165 deletions.
diff --git a/rust_http_proxy/Cargo.toml b/rust_http_proxy/Cargo.toml
@@ -48,6 +48,7 @@ http = "1"
 lru_time_cache = "0.11"
 serde_yaml = "0.9"
 serde = { version = "1.0", features = ["derive"] }
+tera = "1.20.0"
 
 [target.'cfg(target_os = "linux")'.dependencies]
 socket_filter = { version = "0.2", optional = true }

diff --git a/rust_http_proxy/html/net.html b/rust_http_proxy/html/net.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ hostname }}网速</title>
+    <script src="https://www.arloor.com/echarts.min.js"></script>
+</head>
+
+<body style="margin: 0;height:100%;">
+    <div id="main" style="width: 100%;height: 100vh;"></div>
+    <script type="text/javascript" >
+        function formatDataRateIEC(num, precision = -1) {
+    if (num <= 0) {
+        value = '0b/s';
+    } else {
+        var k = 1024;
+        var sizes = ['b/s', 'Kb/s', 'Mb/s', 'Gb/s', 'Tb/s', 'Pb/s', 'Eb/s', 'Zb/s', 'Yb/s'];
+        //这里是取自然对数，也就是log（k）（num），求出以k为底的多少次方是num
+        var c = Math.floor(Math.log(num) / Math.log(k));
+        if (precision == -1) {
+            value = (num / Math.pow(k, c)) + ' ' + sizes[c];
+        } else {
+            value = (num / Math.pow(k, c)).toPrecision(precision) + ' ' + sizes[c];
+        }
+        console.log(value);
+    }
+    return value;
+}
+var baseSeries = {
+    itemStyle: {
+        color: '#ef0000',
+    },
+    "markLine": {
+        "data": [{
+            "type": "average",
+            "name": "平均值"
+        }],
+        "label": {
+            formatter: value => formatDataRateIEC(value.value, 4)
+        }
+    },
+    "markPoint": {
+        "data": [{
+            "type": "max",
+            "name": "最大值"
+        }],
+        symbol: "roundRect",
+        symbolSize: [70, 30],
+        "label": {
+            formatter: value => formatDataRateIEC(value.value, 4)
+        }
+    },
+    "smooth": true,
+    "type": "line"
+}
+var xAxisData = {{ scales | safe }}
+var series = [
+    {
+        ...baseSeries,
+        "data": {{ series_up }},
+        "name": "上行网速",
+    },
+];
+// 指定图表的配置项和数据
+var option = {
+    title: {
+        text: ''
+    },
+    tooltip: {
+        trigger: 'axis',
+        formatter: series => {
+            return series[0].name + series.map(s => '<br/>' + s.seriesName + ': ' + formatDataRateIEC(s.value, 4)).join('');
+        }
+    },
+    legend: {
+        data: series.map(s => s.name)
+    },
+    toolbox: {
+        feature: {
+            mark: {
+                show: true
+            },
+            dataView: {
+                show: true,
+                readOnly: false
+            },
+            magicType: {
+                show: true,
+                type: ['line', 'bar']
+            },
+            restore: {
+                show: true
+            },
+            saveAsImage: {
+                show: true
+            }
+        }
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: xAxisData
+    },
+    yAxis: {
+        type: "value",
+        max: value => {
+            var k = 1024;
+            var c = Math.floor(Math.log(value.max) / Math.log(k));
+            interval = Math.pow(k, c);
+            return Math.ceil(value.max / interval) * interval;
+        },
+        interval: {{ interval }},
+        axisLabel: {
+            formatter: (value, index) => formatDataRateIEC(value)
+        },
+    },
+    series: series,
+    animation: false,
+    animationDuration: 5
+};
+// 基于准备好的dom，初始化echarts实例
+var myChart = echarts.init(document.getElementById('main'));
+// 使用刚指定的配置项和数据显示图表。
+myChart.setOption(option);
+    </script>
+</body>
+
+</html>
diff --git a/rust_http_proxy/html/part0.html b/rust_http_proxy/html/part0.html
diff --git a/rust_http_proxy/html/part1.html b/rust_http_proxy/html/part1.html
diff --git a/rust_http_proxy/html/part2.html b/rust_http_proxy/html/part2.html
diff --git a/rust_http_proxy/html/part3.html b/rust_http_proxy/html/part3.html
diff --git a/rust_http_proxy/html/part4.html b/rust_http_proxy/html/part4.html
diff --git a/rust_http_proxy/src/linux_monitor.rs b/rust_http_proxy/src/linux_monitor.rs
@@ -8,7 +8,7 @@ use log::warn;
 use std::collections::VecDeque;
 
 use std::io;
-use std::sync::Arc;
+use std::sync::{Arc, LazyLock};
 use std::time::{Duration, SystemTime};
 use tokio::sync::RwLock;
 
@@ -109,10 +109,15 @@ impl NetMonitor {
         if max_up / interval > 10 {
             interval = (max_up / interval / 10) * interval;
         }
-        let body = format!(
-            "{} {}网速 {} {:?} {} {} {}  {:?} {}",
-            PART0, hostname, PART1, scales, PART2, interval, PART3, series_up, PART4
-        );
+        // 创建上下文并插入数据
+        let mut context = tera::Context::new();
+        context.insert("hostname", hostname);
+        context.insert("interval", &interval);
+        context.insert("series_up", format!("{:?}", series_up).as_str());
+        context.insert("scales", format!("{:?}", scales).as_str());
+
+        // 渲染模板
+        let body: String = TERA.render(NET_HTML, &context).unwrap_or("".to_string());
         let builder = Response::builder()
             .status(StatusCode::OK)
             .header(http::header::SERVER, SERVER_NAME)
@@ -158,11 +163,14 @@ pub fn count_stream() -> Result<Response<BoxBody<Bytes, io::Error>>, Error> {
     }
 }
 
-const PART0: &str = include_str!("../html/part0.html");
-const PART1: &str = include_str!("../html/part1.html");
-const PART2: &str = include_str!("../html/part2.html");
-const PART3: &str = include_str!("../html/part3.html");
-const PART4: &str = include_str!("../html/part4.html");
+const NET_HTML: &str = "net.html";
+const NET_HTML_TEMPLATE: &str = include_str!("../html/net.html");
+static TERA: LazyLock<tera::Tera> = LazyLock::new(|| {
+    let mut tmp = tera::Tera::default();
+    tmp.add_raw_template(NET_HTML, NET_HTML_TEMPLATE)
+        .unwrap_or(());
+    tmp
+});
 
 // Inter-|   Receive                                                |  Transmit
 //      face |bytes    packets errs drop fifo frame compressed multicast|bytes    packets errs drop fifo colls carrier compressed