global community search and examples

ui/src/app/components/filters/CommunitiesSelect.js

@@ -108,15 +108,6 @@ const CommunitiesSelect = () => {
   const filtersNotAvailable = filters.notAvailable;
   const isDisabled = filtersNotAvailable.includes("communities");
 
-  if (isDisabled) {
-    return (
-      <div className="text-muted">
-        Due to a large number of results, filtering by BGP communities
-        becomes availble only after selecting a route server.
-      </div>
-    );
-  }
-
   const hasAvailable =
       communitiesFilters.filters.available.length > 0 ||
       extCommunitiesFilters.filters.available.length > 0 ||
@@ -186,6 +177,10 @@ const CommunitiesSelect = () => {
         {appliedCommunities}
         {appliedExtCommunities}
         {appliedLargeCommunities}
+        {isDisabled && <div className="text-muted">
+            Due to a large number of results, selecting BGP communities
+            becomes availble only after selecting a route server.
+          </div>}
         {hasAvailable &&
             <tr>
               <td className="select-container" colSpan="2">

ui/src/app/components/search/SearchGlobalInput.js

@@ -5,11 +5,67 @@ import { useRef
 
 import { useQuery }
   from 'app/context/query';
+import { useContent }
+  from 'app/context/content';
 
 import Content
   from 'app/components/content/Content';
 import SearchQueryInput
   from 'app/components/search/SearchQueryInput';
+import BgpCommunityLabel
+  from 'app/components/routes/BgpCommunityLabel';
+
+/**
+ * Lookup Example
+ */
+const LookupExample = ({example}) => {
+  const type = example[0];
+  const value = example.slice(1);
+
+  const communityURL = (value) =>
+    "/search?q=" + encodeURIComponent(`#${value.join(":")}`);
+
+  switch (type) {
+    case "community":
+      return (
+        <li className="community">
+          <a href={communityURL(value)}>
+            <BgpCommunityLabel community={value} />
+          </a>
+        </li>
+      );
+    default:
+      return (
+        <li className={type}>
+          <a href={`/search?q=${value}`}>
+            <span className={`label label-default label-${type}`}>{value}</span>
+          </a>
+        </li>
+      );
+  };
+}
+
+/**
+ * Lookup Examples
+ */
+const LookupExamples = () => {
+  const content = useContent();
+
+  let examples = content.lookup?.examples;
+  if (!examples) {
+    return null;
+  }
+
+  return (
+    <div className="lookup-examples">
+      <h3>Some Examples</h3>
+      <ul>
+        {examples.map((example, i) =>
+          <LookupExample key={i} example={example} />)}
+      </ul>
+    </div>
+  )
+}
 
 
 /**
@@ -28,8 +84,10 @@ const Help = () => {
         <li><b>Prefixes</b>,</li>
         <li><b>Peers</b> by entering their name and</li>
         <li><b>ASNs</b> by prefixing them with 'AS'</li>
+        <li><b>Communities</b> by prefixing them with '#'</li>
       </ul>
       <p>Just start typing!</p>
+      <LookupExamples />
     </div>
   );
 }

ui/src/app/context/bgp.js

@@ -51,6 +51,9 @@ const resolveCommunity = (base, community) => {
     }
     lookup = res;
   }
+  if (typeof(lookup) !== "string") {
+    return null;
+  }
   return lookup;
 }
 
@@ -97,6 +100,7 @@ export const useRejectCandidate = (route) => {
 
 const getReadableCommunity = (communities, community) => {
   const label = resolveCommunity(communities, community);
+  console.log(label);
   return expandVars(label, community);
 }
 

ui/src/scss/components/lookup.scss

@@ -40,3 +40,37 @@
     }
 }
 
+.lookup-examples {
+  
+  > ul {
+    display: flex;
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+    width: 50%;
+    flex-wrap: wrap;
+
+    li {
+      flex: 1;
+      padding: 0px;
+
+      .label {
+        display: flex;
+        margin: 5px;
+        line-height: inherit;
+        font-size: 1.4rem;
+        box-shadow: 0 1px 1px rgba(0,0,0,.2);
+      }
+
+      .label-default {
+        background-color: #ffffff;
+        color: #222;
+      }
+
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+}
+