From f1920b5c267778bd6a9641e00551ccd993e3462a Mon Sep 17 00:00:00 2001
From: Matthias Hannig <matthias@hannig.cc>
Date: Thu, 6 Sep 2018 16:58:00 +0200
Subject: [PATCH] naiive implementation done. ENHANCE!

---
 client/assets/scss/components/communities.scss      |  6 ++++++
 client/components/bgp-communities/label.jsx         | 13 +++++++++----
 .../routeservers/routes/bgp-attributes-modal.jsx    |  5 -----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/assets/scss/components/communities.scss b/client/assets/scss/components/communities.scss
index d4b41b0..9e492d4 100644
--- a/client/assets/scss/components/communities.scss
+++ b/client/assets/scss/components/communities.scss
@@ -4,5 +4,11 @@
 
 .label-bgp-community {
   margin-right: 5px;
+  display: inline-block;
+}
+
+.label-bgp-unknown {
+    color: #333;
+    background-color: #ddd;
 }
 
diff --git a/client/components/bgp-communities/label.jsx b/client/components/bgp-communities/label.jsx
index e6ec2d2..952b64e 100644
--- a/client/components/bgp-communities/label.jsx
+++ b/client/components/bgp-communities/label.jsx
@@ -5,15 +5,20 @@ import {connect} from 'react-redux'
 
 class Label extends React.Component {
   render() {
-    console.log(this.props.communities, this.props.community);
     // Lookup communities
     const readableCommunity = this.props.communities[this.props.community];
+    let cls = 'label label-bgp-community ';
     if (!readableCommunity) {
-      return null;
+      cls += "label-bgp-unknown";
+      // Default label
+      return (
+        <span className={cls}>{this.props.community}</span>
+      );
     }
 
-    let cls = 'label label-success label-bgp-community ';
-    return (<span className={cls}>{readableCommunity}</span>);
+    cls += "label-success ";
+    // Split community into components
+    return (<span className={cls}>{readableCommunity} ({this.props.community})</span>);
   }
 }
 
diff --git a/client/components/routeservers/routes/bgp-attributes-modal.jsx b/client/components/routeservers/routes/bgp-attributes-modal.jsx
index 6e7ba0d..d0c3b72 100644
--- a/client/components/routeservers/routes/bgp-attributes-modal.jsx
+++ b/client/components/routeservers/routes/bgp-attributes-modal.jsx
@@ -72,11 +72,6 @@ class BgpAttributesModal extends React.Component {
             {communities.length > 0 &&
                 <tr>
                   <th>Communities:</th>
-                  <td>{communities.join(' ')}</td>
-                </tr>}
-            {communities.length > 0 &&
-                <tr>
-                  <th></th>
                   <td>
                     {communities.map((c) => <BgpCommunitiyLabel community={c} key={c} />)}
                   </td>