Refactor NetMonitor to improve performance and readability

arloor · Oct 24, 2024 · f84af3b · f84af3b
1 parent 6314dd6
commit f84af3b
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 132 deletions.
diff --git a/index.js b/index.js
diff --git a/rust_http_proxy/html/net.html b/rust_http_proxy/html/net.html
@@ -9,7 +9,121 @@
 
 <body style="margin: 0;height:100%;">
     <div id="main" style="width: 100%;height: 100vh;"></div>
-    <script type="text/javascript" src="/index.js"></script>
+    <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/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