display face flags

src/components/common/route.tsx

@@ -19,10 +19,10 @@ export class RouteDetail extends Component<Props> {
         <If show={showFlags}>
           <td>
             <If show={route.childInherit}>
-              <i title="child-inherit" class="route-flag route-flag-inherit">I</i>
+              <i title="child-inherit" class="flag" style="background:#39cccc;">I</i>
             </If>
             <If show={route.capture}>
-              <i title="capture" class="route-flag route-flag-capture">C</i>
+              <i title="capture" class="flag" style="background:#f012be;">C</i>
             </If>
           </td>
         </If>

src/components/face/detail.tsx

@@ -4,7 +4,7 @@ import { Fragment, h } from "preact";
 import { useContext } from "preact/hooks";
 
 import { GotoRibContext, NfdStatusContext, OldNfdStatusContext } from "../../context";
-import type { Face, PacketCounters, Route } from "../../model/nfd-status/types";
+import type { Face, FaceFlag, PacketCounters, Route } from "../../model/nfd-status/types";
 import { If } from "../common/if";
 import { RouteDetail } from "../common/route";
 
@@ -31,6 +31,8 @@ export function FaceDetail({ face }: Props) {
       <table class="pure-table pure-table-bordered">
         <tr><td>local</td><td colSpan={2}>{face.local}</td></tr>
         <tr><td>remote</td><td colSpan={2}>{face.remote}</td></tr>
+        <tr><td>MTU</td><td colSpan={2}>{face.mtu}</td></tr>
+        <tr><td>flags</td><td colSpan={2}><FaceFlags flags={face.flags}/></td></tr>
         {(Object.entries(counterColumns) as Array<[keyof PacketCounters, string]>).map(([key, title]) => (
           <tr key={key}>
             <td>{title}</td>
@@ -47,6 +49,25 @@ export function FaceDetail({ face }: Props) {
   );
 }
 
+const flagDisplay: Record<FaceFlag, [string, string]> = {
+  local: ["L", "ff851b"],
+  "on-demand": ["OD", "7fdbff"],
+  permanent: ["P", "01ff70"],
+  "multi-access": ["M", "f012be"],
+  "congestion-marking": ["CM", "b10dc9"],
+};
+
+function FaceFlags({ flags }: { flags: FaceFlag[] }) {
+  return (
+    <Fragment>
+      {flags.map((flag) => {
+        const [label, color] = flagDisplay[flag];
+        return <i key={flag} title={flag} class="flag" style={`background:#${color};`}>{label}</i>;
+      })}
+    </Fragment>
+  );
+}
+
 function FaceRoutes({ routes }: { routes: Route[] }) {
   const gotoRib = useContext(GotoRibContext);
   return (

src/model/nfd-status/types.ts

@@ -27,12 +27,24 @@ export interface Host {
   cnt: HostCounters & PacketCounters;
 }
 
+export const FaceFlags = {
+  local: true,
+  "on-demand": true,
+  permanent: true,
+  "multi-access": true,
+  "congestion-marking": true,
+};
+
+export type FaceFlag = keyof typeof FaceFlags;
+
 export interface Face {
   id: number;
   scheme: string;
   title: string;
   local: string;
   remote: string;
+  mtu: number;
+  flags: FaceFlag[];
   cnt: PacketCounters;
 }
 

src/model/nfd-status/xml.ts

@@ -1,7 +1,7 @@
 import { AltUri } from "@ndn/packet";
 
 import { NfdStatusBase } from "./base";
-import type { Face, NfdStatus, PacketCounters, Route, StrategyChoice } from "./types";
+import { Face, FaceFlags, NfdStatus, PacketCounters, Route, StrategyChoice } from "./types";
 
 export function parseNfdStatusXml(doc: XMLDocument): NfdStatus {
   const result = new NfdStatusXml();
@@ -55,11 +55,16 @@ class NfdStatusXml extends NfdStatusBase implements NfdStatus {
 
   private parseFaces(facesEle: Element): void {
     for (const faceEle of iterElements(facesEle)) {
-      const face: Face = { cnt: {} } as any;
+      const face: Face = { flags: [], cnt: {} } as any;
       assignElements(face, faceEle, {
         faceId: ["id", "int"],
         localUri: ["local", "str"],
         remoteUri: ["remote", "str"],
+        mtu: ["mtu", "int"],
+        faceScope: collectFlag(face.flags, FaceFlags),
+        facePersistency: collectFlag(face.flags, FaceFlags),
+        linkType: collectFlag(face.flags, FaceFlags),
+        congestion: () => face.flags.push("congestion-marking"),
         packetCounters: parsePacketCounters(face.cnt),
       });
       this.addFace(face);
@@ -159,6 +164,14 @@ function assignElements<T extends Record<string, any>>(
   return target;
 }
 
+function collectFlag(target: any[], accepts: Record<string, any>): (text: string) => void {
+  return (text: string) => {
+    if (accepts[text]) {
+      target.push(text);
+    }
+  };
+}
+
 function parsePacketCounters(target: PacketCounters): (text: string, packetCntEle: Node) => void {
   return (text, packetCntEle) => {
     for (const node of iterElements(packetCntEle)) {

src/style.css

@@ -5,6 +5,4 @@ body { padding:0 0.2rem 6rem 0.2rem; }
 @media(min-width:980px) { body { padding:0 3rem 6rem 3rem; } }
 footer { position:absolute; right:0; bottom:0; left:0; padding:1rem 3rem 1rem 3rem; }
 
-i.route-flag { display:inline-block; width:3ex; height:3ex; margin-right:1ex; border-radius:50%; text-align:center; vertical-align:middle; line-height:3ex; font-style:normal; }
-i.route-flag-inherit { background:#39cccc; }
-i.route-flag-capture { background:#f012be; }
+i.flag { display:inline-block; width:3ex; height:3ex; margin-right:1ex; border-radius:50%; text-align:center; vertical-align:middle; line-height:3ex; font-style:normal; }