From 885a0c2d897e7d18490aaaff2c4a977547db7ffa Mon Sep 17 00:00:00 2001
From: SerinaNya <34389622+SerinaNya@users.noreply.github.com>
Date: Mon, 31 Aug 2026 14:40:33 +0800
Subject: [PATCH] fix(routing-table): preserve SRv6 protocol types and colors

- Type route protocol and flag fields as strings
- Distinguish Direct, SRv6 ENDXSID, and SRv6 ENDSID routes
- Add dynamic protocol filtering and protocol-specific counters
- Use distinct violet and emerald badges for ENDXSID and ENDSID
---
 src/pages/routing-table.tsx | 63 ++++++++++++++++++-------------------
 src/types/api.ts            |  4 +--
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/src/pages/routing-table.tsx b/src/pages/routing-table.tsx
index 1fad455..f00d680 100644
--- a/src/pages/routing-table.tsx
+++ b/src/pages/routing-table.tsx
@@ -20,42 +20,37 @@ import {
 import { useRoutingTable } from "@/hooks/use-routing-table"
 import type { RoutingTableItem } from "@/types/api"
 
-type ProtocolFilter = "all" | "direct" | "klalb"
-
-function protocolName(protocol: RoutingTableItem["protocol"]): string {
-  const value = String(protocol)
-  const normalized = value.toLowerCase()
-  if (normalized === "direct" || value === "0") return "Direct"
-  if (
-    normalized.includes("klalb") ||
-    normalized.includes("srv6") ||
-    value === "1"
-  )
-    return "KLALB SRv6"
-  return value
-}
+type ProtocolFilter = "all" | string
 
 function protocolBadge(protocol: RoutingTableItem["protocol"]) {
-  const name = protocolName(protocol)
-  if (name === "Direct")
+  if (protocol === "Direct")
     return (
       <Badge
         variant="secondary"
         className="bg-blue-500/10 text-blue-600 dark:text-blue-400"
       >
-        {name}
+        {protocol}
       </Badge>
     )
-  if (name === "KLALB SRv6")
+  if (protocol === "SRv6 ENDXSID")
     return (
       <Badge
         variant="secondary"
         className="bg-purple-500/10 text-purple-600 dark:text-purple-400"
       >
-        {name}
+        {protocol}
       </Badge>
     )
-  return <Badge variant="outline">{name}</Badge>
+  if (protocol === "SRv6 ENDSID")
+    return (
+      <Badge
+        variant="secondary"
+        className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+      >
+        {protocol}
+      </Badge>
+    )
+  return <Badge variant="outline">{protocol}</Badge>
 }
 
 export function RoutingTablePage() {
@@ -67,12 +62,9 @@ export function RoutingTablePage() {
   const counts = useMemo(
     () => ({
       total: routingTable.length,
-      direct: routingTable.filter(
-        (route) => protocolName(route.protocol) === "Direct"
-      ).length,
-      klalb: routingTable.filter(
-        (route) => protocolName(route.protocol) === "KLALB SRv6"
-      ).length,
+      direct: routingTable.filter((route) => route.protocol === "Direct").length,
+      endxsid: routingTable.filter((route) => route.protocol === "SRv6 ENDXSID").length,
+      endsid: routingTable.filter((route) => route.protocol === "SRv6 ENDSID").length,
     }),
     [routingTable]
   )
@@ -86,13 +78,11 @@ export function RoutingTablePage() {
           route.destination,
           route.nexthop,
           route.interface,
-          protocolName(route.protocol),
+          route.protocol,
         ].some((value) => String(value).toLowerCase().includes(query))
-      const name = protocolName(route.protocol)
       const matchesProtocol =
         protocolFilter === "all" ||
-        (protocolFilter === "direct" && name === "Direct") ||
-        (protocolFilter === "klalb" && name === "KLALB SRv6")
+        route.protocol === protocolFilter
       return matchesSearch && matchesProtocol
     })
   }, [routingTable, searchQuery, protocolFilter])
@@ -112,8 +102,9 @@ export function RoutingTablePage() {
 
   const filterOptions: { value: ProtocolFilter; label: string }[] = [
     { value: "all", label: "全部" },
-    { value: "direct", label: "直连" },
-    { value: "klalb", label: "KLALB SRv6" },
+    ...Array.from(new Set(routingTable.map((route) => route.protocol))).map(
+      (protocol) => ({ value: protocol, label: protocol })
+    ),
   ]
 
   return (
@@ -142,7 +133,13 @@ export function RoutingTablePage() {
             variant="secondary"
             className="bg-purple-500/10 text-purple-600 dark:text-purple-400"
           >
-            KLALB SRv6 {counts.klalb}
+            SRv6 ENDXSID {counts.endxsid}
+          </Badge>
+          <Badge
+            variant="secondary"
+            className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+          >
+            SRv6 ENDSID {counts.endsid}
           </Badge>
         </div>
       </div>
diff --git a/src/types/api.ts b/src/types/api.ts
index 3b54c6e..3511748 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -66,10 +66,10 @@ export interface SSEEventData {
 
 export interface RoutingTableItem {
   destination: string
-  protocol: number
+  protocol: string
   preference: number
   cost: number
-  flag: number
+  flag: string
   nexthop: string
   interface: string
 }