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 ( - {name} + {protocol} ) - if (name === "KLALB SRv6") + if (protocol === "SRv6 ENDXSID") return ( - {name} + {protocol} ) - return {name} + if (protocol === "SRv6 ENDSID") + return ( + + {protocol} + + ) + return {protocol} } 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} + + + SRv6 ENDSID {counts.endsid} 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 }