From 23e5539688ec3d299669e40028dd2e33f8a87d4d Mon Sep 17 00:00:00 2001
From: Annika Hannig <annika@hannig.cc>
Date: Tue, 28 Nov 2023 14:33:52 +0100
Subject: [PATCH] use links

---
 ui/src/app/components/routes/RoutesTable.js | 45 +++++++++++++++++++--
 ui/src/app/context/config.js                |  2 -
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/ui/src/app/components/routes/RoutesTable.js b/ui/src/app/components/routes/RoutesTable.js
index 1226450..aac4c62 100644
--- a/ui/src/app/components/routes/RoutesTable.js
+++ b/ui/src/app/components/routes/RoutesTable.js
@@ -30,7 +30,20 @@ export const getAttr = (r, path) => {
   return path.split(".").reduce((acc, elem) => acc[elem], r);
 }
 
+// Linking: Create link targes as a function of the route
+// Link to the route server
+const linkRouteServer = (route) => 
+  `/routeservers/${route?.routeserver?.id}`;
 
+// Create a link to the routes page of a neighbor
+const linkNeighborRoutes = (route) => {
+  const rs = route?.routeserver?.id;
+  const neighbor = route?.neighbor_id;
+  return `/routeservers/${rs}/neighbors/${neighbor}/routes`;
+}
+
+// Default column: Show the attribute and bind the
+// onClick attribute.
 export const ColDefault = ({onClick, route, column}) => {
   return (
     <td>
@@ -39,6 +52,20 @@ export const ColDefault = ({onClick, route, column}) => {
   );
 }
 
+// ColLink provides a cell with a linkable target.
+// The attribute `to` is a function of the `route`
+// attribute, returning the url.
+export const ColLink = ({to, route, column}) => {
+  const href = to(route);
+  return (
+    <td>
+      <a href={href} target="_blank" rel="noreferrer">
+       {getAttr(route, column)}
+      </a>
+    </td>
+  );
+}
+
 // Include filter and noexport reason in this column.
 export const ColNetwork = ({onClick, route}) => {
   return (
@@ -83,19 +110,31 @@ export const ColFlags = ({route}) => {
   );
 }
 
+
+export const ColRouteServer = ({route, column}) =>
+  <ColLink to={linkRouteServer} route={route}  column={column} />;
+
+
+export const ColNeighbor = ({route, column}) =>
+  <ColLink to={linkNeighborRoutes} route={route} column={column} />;
+
+
 const RouteColumn = ({onClick, column, route}) => {
-  const widgets = {
+  const cells = {
     "network": ColNetwork,
     "flags": ColFlags,
     "bgp.as_path": ColAsPath,
 
     "Flags": ColFlags,
     "ASPath": ColAsPath,
+
+    "routeserver.name": ColRouteServer,
+    "neighbor.description": ColNeighbor,
   };
 
-  let Widget = widgets[column] || ColDefault;
+  let Cell = cells[column] || ColDefault;
   return (
-    <Widget
+    <Cell
       column={column}
       route={route}
       onClick={onClick} />
diff --git a/ui/src/app/context/config.js b/ui/src/app/context/config.js
index 2d43439..05c0e14 100644
--- a/ui/src/app/context/config.js
+++ b/ui/src/app/context/config.js
@@ -18,8 +18,6 @@ import { useErrorHandler }
   from 'app/context/errors';
 
 const initialState = {
-  asn: 0, // Our own ASN (might be abstracted in the future)
-
   routes_columns: {},
   routes_columns_order: [],
   neighbors_columns: {},