Merge pull request #1838 from OpenBazaar/pr/1824

Pr/1824

Author: jjeffryes

css/obBase.css

@@ -6400,3 +6400,22 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 #ov1 .TODO.TODO.TODO.TODO.TODO {
   display: none; /* hide in production */
 }
+
+
+.peersList {
+  margin-top: 10px;
+  padding-right: 30px;
+  display: block;
+  color: #9999A0;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.peersList>ul{
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.peersList>ul>li {
+  padding-bottom: 5px;
+}

js/languages/en-US.json

@@ -547,7 +547,8 @@
     "goodSMTPAuthentication": "You have successfully connected to the SMTP server.",
     "tagIsTooLongHeadline": "The tag is too long",
     "tagIsTooLongBody": "Tags cannot be more than %{smart_count} character long. |||| Tags cannot be more than %{smart_count} characters long.",
-    "retryingConnection": "The connection to your node was lost. Retrying connection attempt %{attempt} of %{total}."
+    "retryingConnection": "The connection to your node was lost. Retrying connection attempt %{attempt} of %{total}.",
+    "peersFail": "Call to the peers API failed."
   },
   "pageConnectingMessages": {
     "listingConnect": "Connecting to listing ${listing}",

js/templates/settings.html

@@ -1281,6 +1281,33 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Advanced') %></h3>
                 </div>
               </div>
 
+            </div>
+            <div class="flexRow">
+
+              <div class="flexCol-3  borderRight custCol-border">
+                <div class="fieldItem">
+                  <label>
+                     Connected Peers
+                  </label>
+                </div>
+              </div>
+
+              <div class="flexCol-9 borderRight0 custCol-border">
+                <div class="fieldItem flexRow">
+                  <div class="flexRow">
+                    <span class="js-numConnectedPeers"></span>
+                    <div class="positionTopRight paddingright5">
+                      <a id="showPeersButton" class="btn btn-txt js-showPeers custCol-secondary">
+                        Show Connected Peers
+                      </a>
+                    </div>
+                  </div>
+                  <div class="flexRow">
+                    <div class="peersList custCol-text customThemeScrollbar js-connectedPeers"></div>
+                  </div>
+                </div>
+              </div>
+
             </div>
 
             <div class="flexRow">

js/views/settingsVw.js

@@ -47,6 +47,7 @@ module.exports = pageVw.extend({
     'click .js-saveModerator': 'saveModeratorClick',
     'click .js-cancelAdvanced': 'cancelView',
     'click .js-saveAdvanced': 'saveAdvancedClick',
+    'click .js-showPeers': 'showPeers',
     'click .js-testSMTP': 'testSMTPClick',
     'click .js-changeServerSettings': 'launchServerConfig',
     'change .js-settingsThemeSelection': 'themeClick',
@@ -134,6 +135,8 @@ module.exports = pageVw.extend({
     this.listenTo(app.router, 'cache-reattached', this.onCacheReattached);
 
     __.bindAll(this, 'validateDescription');
+
+
   },
 
   // disabling caching on settings for now -- too much
@@ -236,6 +239,21 @@ module.exports = pageVw.extend({
         placeholder_text_multiple: window.polyglot.t('chosenJS.placeHolderTextMultiple')
       });
 
+      var connectedPeers = "<ul>";
+      $.ajax({
+        url: self.serverUrl + "routing_table",
+        success: function(data){
+          self.$('.js-numConnectedPeers').text(data.length);
+          data.forEach(function (peer) {
+            connectedPeers += `<li><a href="#userPage/${peer.guid}">${peer.ip}:${peer.port}</a></li>`;
+          });
+          self.$('.js-connectedPeers').html(connectedPeers + "</ul>").hide();
+        },
+        error: function(){
+          self.$('.js-numConnectedPeers').text(window.polyglot.t('errorMessages.peersFail'));
+        }
+      });
+
       self.avatarCropper = self.$('#settings-image-cropper');
 
       self.avatarCropper.cropit({
@@ -323,6 +341,10 @@ module.exports = pageVw.extend({
     return this;
   },
 
+  showPeers: function () {
+    this.$el.find('.js-connectedPeers').toggle();
+  },
+
   validateDescription: function() {
     validateMediumEditor.checkVal(this.$('#about'));
   },