fixes #472 so we get an informative error dialog if we cannot connect…

… over Ajax
hawtio · Aug 14, 2013 · 300dfd0 · 300dfd0
1 parent cc93f73
commit 300dfd0
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 7 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/js/app.ts b/hawtio-web/src/main/webapp/app/core/js/app.ts
@@ -12,6 +12,47 @@ module Core {
     $scope.pageTitle = [];
     $scope.userDetails = userDetails;
     $scope.confirmLogout = false;
+    $scope.connectionFailed = false;
+    $scope.connectFailure = {};
+
+    $scope.$watch('workspace.connectFailure', function () {
+      var failure = workspace.connectFailure;
+      $scope.connectionFailed = failure ? true : false;
+      $scope.connectFailure.summaryMessage = null;
+      if ($scope.connectionFailed) {
+        $scope.connectFailure.status = failure.status;
+        $scope.connectFailure.statusText = failure.statusText;
+        var text = failure.responseText;
+        if (text) {
+          // lets try parse and return the body contents as HTML
+          try {
+            var html = $(text);
+            var markup = html.find("body");
+            if (markup && markup.length) {
+              html = markup;
+            }
+            // lets tone down the size of the headers
+            html.each((idx, e) => {
+              var name = e.localName;
+              if (name && name.startsWith("h")) {
+                $(e).addClass("ajaxError");
+              }
+            });
+            var container = $("<div></div>");
+            container.append(html);
+            $scope.connectFailure.summaryMessage = container.html();
+            console.log("Found HTML: " + $scope.connectFailure.summaryMessage);
+          } catch (e) {
+            // ignore
+          }
+        }
+      }
+    });
+
+    $scope.confirmConnectionFailed = () => {
+      // I guess we should close the window now?
+      window.close();
+    };
 
     $scope.setPageTitle = () => {
       $scope.pageTitle = pageTitle.getTitleArrayExcluding(['hawtio']);
@@ -21,7 +62,7 @@ module Core {
       } else {
         setPageTitle($document, pageTitle);
       }
-    }
+    };
 
     $scope.setRegexIndicator = () => {
       try {
@@ -40,15 +81,15 @@ module Core {
       } catch (e) {
         // ignore
       }
-    }
+    };
 
     $scope.loggedIn = () => {
       return userDetails.username !== null && userDetails.username !== 'public';
-    }
+    };
 
     $scope.logout = () => {
       $scope.confirmLogout = true;
-    }
+    };
 
     $scope.doLogout = () => {
 
@@ -79,7 +120,7 @@ module Core {
           $scope.$apply();
         }
       });
-    }
+    };
 
     $scope.$watch(() => { return localStorage['regexs'] }, $scope.setRegexIndicator);
 

diff --git a/hawtio-web/src/main/webapp/app/core/js/workspace.ts b/hawtio-web/src/main/webapp/app/core/js/workspace.ts
@@ -24,6 +24,7 @@ class Workspace {
   public treeWatchRegisterHandle = null;
   public treeWatcherCounter = null;
   public treeElement = null;
+  public connectFailure = null;
 
   constructor(public jolokia,
               public jmxTreeLazyLoadRegistry,
@@ -57,15 +58,26 @@ class Workspace {
   public loadTree() {
     // Make an initial blocking call to ensure the JMX tree is populated while the
     // app is initializing...
-    var options = onSuccess(null, {ignoreErrors: true, maxDepth: 2});
-    var data = this.jolokia.list(null, options);
+    var initialLoadError = (response) => {
+      console.log("Initial load failed: " + response);
+      this.connectFailure = response;
+      Core.$apply(this.$rootScope);
+    };
+
+    var flags = {error: initialLoadError, ajaxError: initialLoadError, maxDepth: 2};
+    var data = this.jolokia.list(null, onSuccess(null, flags));
+
+    if (data) {
+      this.connectFailure = null;
+    }
     this.populateTree({
       value: data
     });
     // we now only reload the tree if the TreeWatcher mbean is present...
     // Core.register(this.jolokia, this, {type: 'list', maxDepth: 2}, onSuccess(angular.bind(this, this.populateTree), {maxDepth: 2}));
   }
 
+
   /**
    * Adds a post processor of the tree to swizzle the tree metadata after loading
    * such as correcting any typeName values or CSS styles by hand

diff --git a/hawtio-web/src/main/webapp/css/site-base.less b/hawtio-web/src/main/webapp/css/site-base.less
@@ -1723,3 +1723,13 @@ div.stack-line {
 #container-create-form .control-group {
   margin-bottom: 0px;
 }
+
+h1.ajaxError {
+  font-size: 16px;
+}
+h2.ajaxError {
+  font-size: 14px;
+}
+h3.ajaxError, h4.ajaxError {
+  font-size: 12px;
+}
diff --git a/hawtio-web/src/main/webapp/index.html b/hawtio-web/src/main/webapp/index.html
@@ -134,6 +134,26 @@
   </div>
 </div>
 
+<div class="ng-cloak">
+  <div modal="connectionFailed">
+    <form class="form-horizontal no-bottom-margin" ng-submit="confirmConnectionFailed()">
+      <div class="modal-header">
+        <h2 title="Status Code: {{connectFailure.status}}">Cannot Connect: {{connectFailure.statusText}}</h2>
+      </div>
+
+      <div class="modal-body">
+        <p>Cannot connect to Jolokia to access this Java process</p>
+
+        <div class="ajaxError" ng-bind-html-unsafe="connectFailure.summaryMessage"/>
+      </div>
+      <div class="modal-footer">
+        <input class="btn btn-success" type="submit" value="Close This Window">
+      </div>
+    </form>
+
+  </div>
+</div>
+
 <!-- charts and jolokia for jmx -->
 <script type="text/javascript" src="lib/d3.v3.min.js"></script>