frontend: show communities as tags

wobcom · Nov 15, 2023 · 344b7fe · 344b7fe
1 parent 9c90ff3
commit 344b7fe
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/frontend/src/resultsView.js b/frontend/src/resultsView.js
@@ -15,7 +15,7 @@ const resultsTemplate = (query, results, done) => html`
 						${results.some(result => result.peer_address) ? html`<th>Peer</th>` : ``}
 						<th>Prefix</th>
 						<th>AS Path</th>
-						<th>Large Communities</th>
+						<th>Communities</th>
 						<th>Origin</th>
 						<th>MED</th>
 						<th>Local Pref</th>
@@ -30,7 +30,7 @@ const resultsTemplate = (query, results, done) => html`
 							${results.some(result => result.peer_address) ? html`<td><span>${result.peer_address}</span></td>` : ``}
 							<td><span>${result.net}</span></td>
 							<td><span>${result.as_path.join(" ")}</span></td>
-							<td><span>${(result.large_communities || []).map(community => `(${community.join(",")})`).join(" ")}</span></td>
+							<td><span>${[...(result.large_communities || []), ...(result.communities || [])].map(community => html`<div class="tag">${community.join(" ")}</div>`)}</span></td>
 							<td><span>${result.origin}</span></td>
 							<td><span>${result.med}</span></td>
 							<td><span>${result.local_pref}</span></td>

diff --git a/frontend/static/style.css b/frontend/static/style.css
@@ -143,6 +143,14 @@ body {
         background-color: transparent;
 }
 
+.tag {
+	background-color: #25c;
+	color: white;
+	margin: 0 .15em;
+	padding: .2em .5em;
+	border-radius: .6em;
+}
+
 @media (min-width: 1000px) {
         .results td p {
                 display: inline;