GUACAMOLE-723: Display warning icon when background connection disconnects due to an error.

guacamole/src/main/webapp/app/client/directives/guacClientPanel.js

@@ -24,8 +24,12 @@
  */
 angular.module('client').directive('guacClientPanel', ['$injector', function guacClientPanel($injector) {
 
+    // Required services
     var sessionStorageFactory = $injector.get('sessionStorageFactory');
 
+    // Required types
+    var ManagedClientState = $injector.get('ManagedClientState');
+
     /**
      * Getter/setter for the boolean flag controlling whether the client panel
      * is currently hidden. This flag is maintained in session-local storage to
@@ -81,6 +85,30 @@ angular.module('client').directive('guacClientPanel', ['$injector', function gua
                 return !_.isEmpty($scope.clients);
             };
 
+            /**
+             * Returns whether the given client has disconnected due to an
+             * error.
+             *
+             * @param {ManagedClient} client
+             *     The client to test.
+             *
+             * @returns {Boolean}
+             *     true if the given client has disconnected due to an error,
+             *     false otherwise.
+             */
+            $scope.hasError = function hasError(client) {
+
+                // Test whether the client has encountered an error
+                switch (client.clientState.connectionState) {
+                    case ManagedClientState.ConnectionState.CONNECTION_ERROR:
+                    case ManagedClientState.ConnectionState.TUNNEL_ERROR:
+                        return true;
+                }
+
+                return false;
+
+            };
+
             /**
              * Toggles whether the client panel is currently hidden.
              */

guacamole/src/main/webapp/app/client/styles/other-connections.css

@@ -100,6 +100,31 @@
 
 }
 
+#other-connections .client-panel-connection::before {
+
+    display: block;
+    content: ' ';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+
+    background: url('images/warning-white.png');
+    background-size: 48px;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    opacity: 0;
+    transition: opacity 0.25s;
+
+}
+
+#other-connections .client-panel-connection.error::before {
+    opacity: 0.75;
+}
+
 #other-connections .client-panel.hidden .client-panel-connection-list {
     /* Hide scrollbar when panel is hidden (will be visible through panel
      * show/hide button otherwise) */

guacamole/src/main/webapp/app/client/templates/guacClientPanel.html

@@ -6,7 +6,8 @@
 
     <!-- List of connection thumbnails -->
     <ul class="client-panel-connection-list">
-        <li ng-repeat="client in clients | toArray | orderBy: [ '-value.lastUsed', 'value.title' ]" class="client-panel-connection">
+        <li ng-repeat="client in clients | toArray | orderBy: [ '-value.lastUsed', 'value.title' ]"
+            ng-class="{ 'error' : hasError(client.value) }" class="client-panel-connection">
             <a href="#/client/{{client.value.id}}">
                 <div class="thumbnail">
                     <guac-thumbnail client="client.value"></guac-thumbnail>