add links to both routers and ip trunks

components/NetworkMap/InfoPopup.tsx

@@ -3,16 +3,29 @@ import React from 'react';
 
 interface InfoPopupProps {
   data: { [key: string]: string };
+  linkKeys?: { [key: string]: string };
 }
 
-const InfoPopup: React.FC<InfoPopupProps> = ({ data }) => {
+const InfoPopup: React.FC<InfoPopupProps> = ({ data, linkKeys = {} }) => {
   return (
     <table className={styles.infoTable}>
       <tbody>
         {Object.entries(data).map(([key, value], index) => (
           <tr key={key} className={index % 2 === 0 ? styles.even : styles.odd}>
             <td className={styles.infoKey}>{key}</td>
-            <td className={styles.infoValue}>{value}</td>
+            <td className={styles.infoValue}>
+              {linkKeys[key] ? (
+                <a
+                  href={`${linkKeys[key]}${value}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {value}
+                </a>
+              ) : (
+                value
+              )}
+            </td>
           </tr>
         ))}
       </tbody>

components/NetworkMap/LeafletMap.tsx

@@ -90,7 +90,8 @@ const calculateQuadraticBezierPoint = (
 const PolylineCurves: React.FC<{
   polylines: PolylineData[];
   labelType: string;
-}> = ({ polylines, labelType }) => {
+  linkKeys: { [key: string]: string };
+}> = ({ polylines, labelType, linkKeys }) => {
   const map = useMap();
 
   useEffect(() => {
@@ -122,7 +123,7 @@ const PolylineCurves: React.FC<{
       ).addTo(map);
 
       const popupContent = ReactDOMServer.renderToString(
-        <InfoPopup data={polyline.labelData} />,
+        <InfoPopup data={polyline.labelData} linkKeys={linkKeys} />,
       );
 
       curve.bindPopup(popupContent);
@@ -148,7 +149,7 @@ const PolylineCurves: React.FC<{
         }).addTo(map);
       }
     });
-  }, [map, polylines, labelType]);
+  }, [map, polylines, labelType, linkKeys]);
 
   return null;
 };
@@ -277,7 +278,7 @@ const LeafletMap: React.FC<LeafletMapProps> = ({ data }) => {
             lng: startLatLng[1],
             labelData: {
               Site: `${startRouter.router_site.site_name} (${startRouter.router_site.site_city},${startRouter.router_site.site_country})`,
-              subscription_id: `${startRouter.subscription_instance_id}`,
+              subscription_id: `${startRouter.owner_subscription_id}`,
               router_fqdn: `${startRouter.router_fqdn}`,
               router_access_via_ts: `${startRouter.router_access_via_ts}`,
               router_lo_ipv4_address: `${startRouter.router_lo_ipv4_address}`,
@@ -297,7 +298,7 @@ const LeafletMap: React.FC<LeafletMapProps> = ({ data }) => {
             lng: endLatLng[1],
             labelData: {
               Site: `${endRouter.router_site.site_name} (${endRouter.router_site.site_city},${endRouter.router_site.site_country})`,
-              subscription_id: `${endRouter.subscription_instance_id}`,
+              subscription_id: `${endRouter.owner_subscription_id}`,
               router_fqdn: `${endRouter.router_fqdn}`,
               router_access_via_ts: `${endRouter.router_access_via_ts}`,
               router_lo_ipv4_address: `${endRouter.router_lo_ipv4_address}`,
@@ -363,6 +364,7 @@ const LeafletMap: React.FC<LeafletMapProps> = ({ data }) => {
             color: trunk.insync ? 'green' : 'red',
             insync: trunk.insync,
             labelData: {
+              subscription_id: `${trunk.subscription_id}`,
               iptrunk_capacity: `${trunk.iptrunk.iptrunk_capacity}`,
               iptrunk_isis_metric: `${trunk.iptrunk.iptrunk_isis_metric}`,
               iptrunk_ipv4_network: `${trunk.iptrunk.iptrunk_ipv4_network}`,
@@ -420,6 +422,10 @@ const LeafletMap: React.FC<LeafletMapProps> = ({ data }) => {
     },
   ];
 
+  const linkKeys = {
+    subscription_id: 'http://localhost:3000/subscriptions/',
+  };
+
   return (
     <EuiPanel>
       <MapContainer
@@ -453,7 +459,7 @@ const LeafletMap: React.FC<LeafletMapProps> = ({ data }) => {
                 icon={icon}
               >
                 <Popup>
-                  <InfoPopup data={marker.labelData} />
+                  <InfoPopup data={marker.labelData} linkKeys={linkKeys} />
                 </Popup>
               </Marker>
             );
@@ -462,6 +468,7 @@ const LeafletMap: React.FC<LeafletMapProps> = ({ data }) => {
         <PolylineCurves
           polylines={networkElements.polylines}
           labelType={labelType}
+          linkKeys={linkKeys}
         />
         <SiteBoundaries siteBoundaries={networkElements.siteBoundaries} />
       </MapContainer>

types/types.ts

@@ -15,6 +15,7 @@ export interface IptrunkSideNode {
     site_latitude: number;
     site_longitude: number;
   };
+  owner_subscription_id: string
 }
 
 export interface Iptrunk {
@@ -29,5 +30,5 @@ export interface Iptrunk {
 }
 
 export interface NetworkTopologyData {
-  iptrunks: Array<{ iptrunk: Iptrunk; insync: boolean }>;
+  iptrunks: Array<{ iptrunk: Iptrunk; insync: boolean; subscription_id: string }>;
 }