Show baseline device and interface under the port traffic wall chart.

Co-authored-by: Cursor <cursoragent@cursor.com>

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",

web/src/i18n/zh.ts

@@ -114,6 +114,8 @@ const zh = {
     offsetHours: "偏移（小时）",
     baseline: "基线",
     baselineAt: "基线原时刻",
+    baselineDevice: "基线网元",
+    baselinePort: "基线接口",
     seriesCurrentIn: "当前 In",
     seriesCurrentOut: "当前 Out",
     seriesBaselineIn: "基线 In",

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${

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>
   );