initial neighbors page

pkg/store/neighbors_store_test.go

@@ -113,7 +113,7 @@ func TestGetNeighbors(t *testing.T) {
 	if err == nil {
 		t.Error("Unknown source should have yielded zero results")
 	}
-  t.Log(neighbors)
+	t.Log(neighbors)
 
 }
 
@@ -163,3 +163,12 @@ func TestNeighborFilter(t *testing.T) {
 	}
 
 }
+
+func TestReMatchASLookup(t *testing.T) {
+	if !ReMatchASLookup.MatchString("AS2342") {
+		t.Error("should be ASN")
+	}
+	if ReMatchASLookup.MatchString("Goo") {
+		t.Error("should not be ASN")
+	}
+}

pkg/store/utils_test.go

@@ -8,4 +8,7 @@ func TestContainsCi(t *testing.T) {
 	if ContainsCi("foo bar", "BaR") != true {
 		t.Error("An unexpected error occured.")
 	}
+	if ContainsCi("Luxembourg Online SA", "Goo") == true {
+		t.Error("Should ne no match")
+	}
 }

pkg/ui/package.json

@@ -10,7 +10,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.1",
     "axios": "^0.27.2",
-    "bootstrap": "5.1.3",
+    "bootstrap": "3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "6",

pkg/ui/src/app/Main.js

@@ -26,6 +26,8 @@ import Page
 
 import StartPage 
   from 'app/pages/start/Page';
+import NeighborsPage
+  from 'app/pages/neighbors/Page';
 import NotFoundPage
   from 'app/pages/errors/NotFound';
 
@@ -41,6 +43,9 @@ const Main = () => {
       <Routes>
         <Route path="/" element={<Page />}>
           <Route index element={<StartPage />} />
+          <Route path="routeservers/:routeServerId">
+            <Route index element={<NeighborsPage />} />
+          </Route>
           <Route path="*" element={<NotFoundPage />} />
         </Route>
       </Routes>

pkg/ui/src/app/components/routeservers/Provider.js

@@ -14,6 +14,8 @@ import { useState
        , useRef
        }
   from 'react';
+import { useParams }
+  from 'react-router-dom';
 
 import { useErrors }
   from 'app/components/errors/Provider';
@@ -23,6 +25,17 @@ const RouteServersContext = createContext([]);
 
 export const useRouteServers = () => useContext(RouteServersContext);
 
+/**
+ * Use selected route server uses the route server context
+ * in combination with the navigation to return the current
+ * route server.
+ */
+export const useSelectedRouteServer = () => {
+  const { routeServerId } = useParams();
+  const routeServers      = useRouteServers();
+  return routeServers.find((rs) => rs.id === routeServerId)
+}
+
 
 /**
  * RouteServersProvider loads the route servers from the

pkg/ui/src/app/components/search/Input.js

@@ -0,0 +1,18 @@
+
+/**
+ * The SearchInput is a text input field used for filtering
+ */
+const SearchInput = (props) => {
+  return (
+    <div className="input-group">
+       <span className="input-group-addon">
+        <i className="fa fa-search"></i>
+       </span>
+       <input type="text"
+              className="form-control"
+              {...props} />
+    </div>
+  );
+};
+
+export default SearchInput;

pkg/ui/src/app/pages/neighbors/Page.js

@@ -0,0 +1,61 @@
+
+import { useState 
+       }
+  from 'react';
+
+import { useSelectedRouteServer }
+  from 'app/components/routeservers/Provider';
+
+import PageHeader
+  from 'app/components/page/Header';
+import SearchInput
+  from 'app/components/search/Input';
+
+/** 
+ * The NeighborsPage renders a list of all peers on
+ * the route server.
+ *
+ * A search field for quick filtering is provided
+ */
+const NeighborsPage = () => {
+  const [filterValue, setFilterValue] = useState("");
+  const routeServer = useSelectedRouteServer();
+
+  if (!routeServer) { return null; } // nothing to do here
+
+  return (
+    <div className="routeservers-page">
+      <PageHeader>
+       <span className="status-name">{routeServer.name}</span>
+      </PageHeader>
+
+      <div className="row details-main">
+        <div className="col-main col-lg-9 col-md-12">
+          <div className="card">
+            <SearchInput
+              value={filterValue}
+              placeholder="Filter by Neighbor, ASN or Description"
+              onChange={(e) => setFilterValue(e.target.value)}
+            />
+          </div>
+    { /* <QuickLinks /> */ }
+    QUICKLINKS
+
+    { /* <Protocols protocol="bgp" routeserverId={this.props.params.routeserverId} /> */ }
+          PROTOCOLS
+        </div>
+        <div className="col-lg-3 col-md-12 col-aside-details">
+          <div className="card">
+            STATUS
+            {/*
+            <Status routeserverId={this.props.params.routeserverId}
+                    cacheStatus={this.props.cacheStatus} />
+              */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NeighborsPage;

pkg/ui/yarn.lock

@@ -2811,10 +2811,10 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bootstrap@5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
-  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
+bootstrap@3:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"
+  integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
 
 brace-expansion@^1.1.7:
   version "1.1.11"