Add LP to NS UI (#6562)

* Add LP column to gateway view

* Add LP to graphs

nym-node-status-api/nym-node-status-ui/src/app/dvpn/GatewaysTable.tsx

@@ -116,7 +116,6 @@ export default function GatewaysTable() {
       },
       {
         accessorKey: "performance_v2.score",
-        width: 20,
         header: "Score",
         Cell: ({ cell }) => {
           const value = cell.getValue<string>();
@@ -139,7 +138,6 @@ export default function GatewaysTable() {
       },
       {
         accessorKey: "performance_v2.load",
-        width: 20,
         header: "Load",
         Cell: ({ cell }) => {
           const value = cell.getValue<string>();
@@ -227,7 +225,6 @@ export default function GatewaysTable() {
       },
       {
         accessorKey: "performance_v2.uptime_percentage_last_24_hours",
-        width: 20,
         header: "Uptime",
         Cell: ({ cell, row }) => {
           const value: number =
@@ -250,6 +247,31 @@ export default function GatewaysTable() {
           );
         },
       },
+      {
+        accessorKey: "last_probe.outcome.lp.can_register",
+        header: "Post-quantum registration?",
+        Cell: ({ cell }) => {
+          const lp = cell.row.original.last_probe?.outcome.lp as any;
+          const can_register = lp?.can_register;
+          return (
+            <>
+              <Typography
+                ml={2}
+                fontSize="inherit"
+                component="span"
+                display="flex"
+                alignItems="center"
+                gap={1}
+              >
+                {can_register === null ||
+                  (can_register === undefined && <span>-</span>)}
+                {can_register === true && <span>✅</span>}
+                {can_register === false && <span>❌</span>}
+              </Typography>
+            </>
+          );
+        },
+      },
       {
         accessorKey: "last_probe.outcome.wg.can_query_metadata_v4",
         header: "Can query metadata?",

nym-node-status-api/nym-node-status-ui/src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import GraphCard from "@/components/GraphCard";
 import { GatewayCanQueryMetadataTopup } from "@/components/graphs/GatewayCanQueryMetadataTopup";
+import { GatewayLpCanRegister } from "@/components/graphs/GatewayLpCanRegister";
 import { GatewayDownloadSpeeds } from "@/components/graphs/GatewayDownloadSpeeds";
 import { GatewayLoads } from "@/components/graphs/GatewayLoads";
 import { GatewayPingPercentage } from "@/components/graphs/GatewayPingPercentage";
@@ -55,6 +56,11 @@ export default function Home() {
             <GatewayCanQueryMetadataTopup />
           </GraphCard>
         </Grid>
+        <Grid size={{ xs: 12, sm: 8, lg: 4 }}>
+          <GraphCard title="LP registration probe results">
+            <GatewayLpCanRegister />
+          </GraphCard>
+        </Grid>
       </Grid>
     </NestedLayoutWithHeader>
   );

nym-node-status-api/nym-node-status-ui/src/client/types.gen.ts

@@ -514,6 +514,14 @@ export type ProbeOutcome = {
   as_entry: Entry;
   as_exit?: null | Exit;
   wg?: null | ProbeOutcomeV1;
+  lp?: null | LpProbeResults;
+};
+
+export type LpProbeResults = {
+  can_connect: boolean;
+  can_handshake: boolean;
+  can_register: boolean;
+  error?: string | null;
 };
 
 export type ProbeOutcomeV1 = {

nym-node-status-api/nym-node-status-ui/src/components/graphs/GatewayLpCanRegister.tsx

@@ -0,0 +1,55 @@
+import { useDVpnGatewaysTransformed } from "@/hooks/useGatewaysTransformed";
+import Box from "@mui/material/Box";
+import { BarChart } from "@mui/x-charts/BarChart";
+import { rollup } from "d3-array";
+import React from "react";
+
+export const GatewayLpCanRegister = () => {
+  const {
+    query: { isSuccess, isError, data },
+  } = useDVpnGatewaysTransformed();
+  const binnedData = React.useMemo(() => {
+    if (!isSuccess || data === undefined) {
+      return undefined;
+    }
+    const results = data.map((g) => {
+      const r = (g.last_probe?.outcome.lp as any)?.can_register;
+      if (r === undefined) {
+        return "-";
+      }
+      if (r === true) {
+        return "yes";
+      }
+      return "no";
+    });
+    // count occurrences of each result
+    const resultCounts = rollup(
+      results,
+      (v) => v.length,
+      (v) => v, // group by result string
+    );
+
+    const bucketToLabel = { "yes": "success", "no": "failure", "-": "no score" } as const;
+    const buckets = ["yes", "no", "-"] as const;
+    const labels = buckets.map((b) => bucketToLabel[b]);
+    const values = buckets.map((b) => resultCounts.get(b) ?? 0);
+
+    return { labels, values };
+  }, [data, isSuccess]);
+
+  if (isError || !binnedData) {
+    return null;
+  }
+
+  const { labels, values } = binnedData;
+
+  return (
+    <Box>
+      <BarChart
+        xAxis={[{ scaleType: "band", data: labels }]}
+        series={[{ data: values }]}
+        height={225}
+      />
+    </Box>
+  );
+};

nym-node-status-api/nym-node-status-ui/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }