gui: Move discovery failures to modal (fixes #2344)

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/4048
LGTM: calmh, AudriusButkevicius

gui/default/assets/lang/lang-en.json

@@ -52,6 +52,7 @@
    "Disconnected": "Disconnected",
    "Discovered": "Discovered",
    "Discovery": "Discovery",
+   "Discovery Failures": "Discovery Failures",
    "Documentation": "Documentation",
    "Download Rate": "Download Rate",
    "Downloaded": "Downloaded",
@@ -67,6 +68,7 @@
    "Error": "Error",
    "External File Versioning": "External File Versioning",
    "Failed Items": "Failed Items",
+   "Failure to connect to IPv6 servers is expected if there is no IPv6 connectivity.": "Failure to connect to IPv6 servers is expected if there is no IPv6 connectivity.",
    "File Pull Order": "File Pull Order",
    "File Versioning": "File Versioning",
    "File permission bits are ignored when looking for changes. Use on FAT file systems.": "File permission bits are ignored when looking for changes. Use on FAT file systems.",

gui/default/index.html

@@ -511,8 +511,8 @@
                         <span>{{discoveryTotal}}/{{discoveryTotal}}</span>
                       </span>
                       <span ng-if="discoveryFailed.length != 0" class="data" ng-class="{'text-danger': discoveryFailed.length == discoveryTotal}">
-                        <span popover data-trigger="hover" data-placement="bottom" data-html="true" data-content="{{discoveryFailed.join('<br>\n')}}">
-                          {{discoveryTotal-discoveryFailed.length}}/{{discoveryTotal}}
+                        <span popover data-trigger="hover" data-placement="bottom" data-content="Click to see discovery failures.">
+                          <a href="" style="color:inherit" ng-click="showDiscoveryFailures()">{{discoveryTotal-discoveryFailed.length}}/{{discoveryTotal}}</a>
                         </span>
                       </span>
                     </td>
@@ -680,6 +680,7 @@
   <ng-include src="'syncthing/transfer/failedFilesModalView.html'"></ng-include>
   <ng-include src="'syncthing/core/majorUpgradeModalView.html'"></ng-include>
   <ng-include src="'syncthing/core/aboutModalView.html'"></ng-include>
+  <ng-include src="'syncthing/core/discoveryFailuresModalView.html'"></ng-include>
 
   <!-- vendor scripts -->
   <script src="vendor/jquery/jquery-2.2.2.js"></script>

gui/default/syncthing/core/discoveryFailuresModalView.html

@@ -0,0 +1,21 @@
+<modal id="discovery-failures" status="danger" icon="exclamation-circle" heading="{{'Discovery Failures' | translate}}" large="yes" closeable="yes">
+  <div class="modal-body">
+    <ul>
+      <li ng-repeat="failure in discoveryFailed">{{failure}}</li>
+    </ul>
+  </div>
+  <div class="row">
+    <div class="col-md-offset-2 col-md-8">
+      <div class="panel panel-default">
+        <div translate class="panel-body">
+         Failure to connect to IPv6 servers is expected if there is no IPv6 connectivity.
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
+      <span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
+    </button>
+  </div>
+</modal>

gui/default/syncthing/core/syncthingController.js

@@ -999,6 +999,10 @@ angular.module('syncthing.core')
             }
         };
 
+        $scope.showDiscoveryFailures = function () {
+            $('#discovery-failures').modal();
+        };
+
         $scope.editSettings = function () {
             // Make a working copy
             $scope.tmpOptions = angular.copy($scope.config.options);