From e4a365fa16270e27b41b2e5c5b9237139c31a2fa Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Sat, 1 Aug 2026 09:38:20 +0800
Subject: [PATCH] Show baseline device and interface under the port traffic
 wall chart.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/i18n/en.ts                        |  2 ++
 web/src/i18n/zh.ts                        |  2 ++
 web/src/pages/network/PortTrafficPage.tsx |  4 ++++
 web/src/pages/network/PortTrafficWall.tsx | 21 +++++++++++++++++++++
 4 files changed, 29 insertions(+)

diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index 959b012..116e052 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -114,6 +114,8 @@ const en = {
     offsetHours: "Offset (hours)",
     baseline: "Baseline",
     baselineAt: "Baseline time",
+    baselineDevice: "Baseline device",
+    baselinePort: "Baseline interface",
     seriesCurrentIn: "Current In",
     seriesCurrentOut: "Current Out",
     seriesBaselineIn: "Baseline In",
diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
index 4c58e67..2680edd 100644
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -114,6 +114,8 @@ const zh = {
     offsetHours: "偏移（小时）",
     baseline: "基线",
     baselineAt: "基线原时刻",
+    baselineDevice: "基线网元",
+    baselinePort: "基线接口",
     seriesCurrentIn: "当前 In",
     seriesCurrentOut: "当前 Out",
     seriesBaselineIn: "基线 In",
diff --git a/web/src/pages/network/PortTrafficPage.tsx b/web/src/pages/network/PortTrafficPage.tsx
index 891c0d9..31eb90c 100644
--- a/web/src/pages/network/PortTrafficPage.tsx
+++ b/web/src/pages/network/PortTrafficPage.tsx
@@ -796,6 +796,10 @@ export function PortTrafficPage() {
           ) : null}
           <PortTrafficWall
             target={selectedWallTarget}
+            baselineTarget={
+              compareQuery.data?.meta?.baseline_target ||
+              (baseline !== "off" && wallBaselinePoints.length ? selectedWallTarget : null)
+            }
             points={wallPoints}
             baselinePoints={wallBaselinePoints}
             rangeLabel={`${rangeHours}h${
diff --git a/web/src/pages/network/PortTrafficWall.tsx b/web/src/pages/network/PortTrafficWall.tsx
index 22ea732..dbe4c30 100644
--- a/web/src/pages/network/PortTrafficWall.tsx
+++ b/web/src/pages/network/PortTrafficWall.tsx
@@ -69,6 +69,7 @@ const EMPTY_POINTS: PortTrafficSamplePoint[] = [];
 
 type Props = {
   target: PortTrafficTarget | null;
+  baselineTarget?: PortTrafficTarget | null;
   points: PortTrafficSamplePoint[];
   baselinePoints?: PortTrafficSamplePoint[];
   rangeLabel: string;
@@ -78,6 +79,7 @@ type Props = {
 
 export function PortTrafficWall({
   target,
+  baselineTarget = null,
   points,
   baselinePoints = EMPTY_POINTS,
   rangeLabel,
@@ -314,6 +316,12 @@ export function PortTrafficWall({
   const neLabel = target ? target.ne_name || target.ne_ip || "—" : "—";
   const ifLabel = target?.ifname || "—";
   const ipLabel = target?.ne_ip || "";
+  const showBaselineMeta = Boolean(baselineTarget) && baselinePoints.length > 0;
+  const baseNeLabel = baselineTarget
+    ? baselineTarget.ne_name || baselineTarget.ne_ip || "—"
+    : "—";
+  const baseIfLabel = baselineTarget?.ifname || "—";
+  const baseIpLabel = baselineTarget?.ne_ip || "";
 
   return (
     <div className="pt-wall">
@@ -379,6 +387,19 @@ export function PortTrafficWall({
           <span className="pt-wall__foot-label">{t("portTraffic.wallPort")}</span>
           <span className="pt-wall__foot-value pt-wall__foot-value--mono">{ifLabel}</span>
         </div>
+        {showBaselineMeta ? (
+          <>
+            <div className="pt-wall__foot-ne" title={baseNeLabel}>
+              <span className="pt-wall__foot-label">{t("portTraffic.baselineDevice")}</span>
+              <span className="pt-wall__foot-value">{baseNeLabel}</span>
+              {baseIpLabel ? <span className="pt-wall__foot-ip">{baseIpLabel}</span> : null}
+            </div>
+            <div className="pt-wall__foot-if" title={baseIfLabel}>
+              <span className="pt-wall__foot-label">{t("portTraffic.baselinePort")}</span>
+              <span className="pt-wall__foot-value pt-wall__foot-value--mono">{baseIfLabel}</span>
+            </div>
+          </>
+        ) : null}
       </div>
     </div>
   );