Kick off a log page refactor with a simplified layout, acts more like…

… tail, needs filtering
hawtio · Oct 4, 2013 · c6a2b35 · c6a2b35
1 parent daebf56
commit c6a2b35
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 8 deletions.
diff --git a/hawtio-web/src/main/webapp/app/log/html/logs.html b/hawtio-web/src/main/webapp/app/log/html/logs.html
@@ -40,9 +40,10 @@
 
   <div class="controller-section log-main" ng-show="logs.length > 0">
 
+    <!--
     <div class="gridStyle" hawtio-datatable="gridOptions"></div>
+    -->
 
-    <!--
     <ul class="log-table">
       <li class="table-head">
         <div>
@@ -60,13 +61,16 @@
           </div>
           <div class="title">{{log.timestamp | logDateFilter}}</div>
           <div class="title"><span class="text-{{logClass(log)}}"><i class="{{logIcon(log)}}"></i> {{log.level}}</span></div>
-          <div class="title" title="{{log.logger}}">{{log.logger}}</div>
+          <div title="{{log.logger}}" ng-switch="hasLogSourceHref(log)">
+            <a ng-href="{{logSourceHref(log)}}" ng-switch-when="true">{{log.logger}}</a>
+            <span ng-switch-default>{{log.logger}}</span>
+          </div>
           <div class="title">{{log.message}}</div>
           <div class="expandable-body well">
 
             {{log.message}}
 
-            <dl ng-hide="!row.exception">
+            <dl ng-hide="!log.exception">
               <dt>Stack Trace:</dt>
               <dd>
                 <ul class="unstyled" ng-repeat="line in log.exception">
@@ -79,9 +83,9 @@
         </div>
       </li>
     </ul>
-    -->
 
   </div>
+
   <div class="controller-section no-log" ng-show="logs.length == 0">
     Loading...
   </div>

diff --git a/hawtio-web/src/main/webapp/app/log/js/helpers.ts b/hawtio-web/src/main/webapp/app/log/js/helpers.ts
@@ -1,6 +1,17 @@
 module Log {
   export function logSourceHref(row) {
+    if (!row) {
+      return "";
+    }
     var log = row.entity;
+    if (log) {
+      return logSourceHrefEntity(log);
+    } else {
+      return logSourceHrefEntity(row);
+    }
+  }
+
+  export function logSourceHrefEntity(log) {
     var fileName = Log.removeQuestion(log.fileName);
     var className = Log.removeQuestion(log.className);
     var properties = log.properties;
@@ -20,6 +31,18 @@ module Log {
     }
   }
 
+  export function hasLogSourceHref(log) {
+    var properties = log.properties;
+    if (!properties) {
+      return false;
+    }
+    var mavenCoords = "";
+    if (properties) {
+      mavenCoords = properties["maven.coordinates"];
+    }
+    return angular.isDefined(mavenCoords) && mavenCoords !== "";
+  }
+
   export function removeQuestion(text: string): string {
     return (!text || text === "?") ? null : text;
   }

diff --git a/hawtio-web/src/main/webapp/app/log/js/logs.ts b/hawtio-web/src/main/webapp/app/log/js/logs.ts
@@ -8,7 +8,7 @@ module Log {
     level: string;
   }
 
-  export function LogController($scope, $location, localStorage, workspace:Workspace) {
+  export function LogController($scope, $location, localStorage, workspace:Workspace, $window, $document) {
     $scope.logs = [];
     $scope.filteredLogs = [];
     $scope.selectedItems = [];
@@ -44,7 +44,7 @@ module Log {
     $scope.logSourceHref = Log.logSourceHref;
 
     $scope.hasLogSourceHref = (row) => {
-      return Log.logSourceHref(row) ? true : false;
+      return Log.hasLogSourceHref(row);
     };
 
     $scope.dateFormat = 'yyyy-MM-dd HH:mm:ss';
@@ -115,7 +115,37 @@ module Log {
       checkIfFilterChanged();
     });
 
+    function getDocHeight() {
+      var D = document;
+      return Math.max(
+          Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
+          Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
+          Math.max(D.body.clientHeight, D.documentElement.clientHeight)
+      );
+    }
+
     var updateValues = function (response) {
+      var scrollToBottom = false;
+      var window = $($window);
+
+      //console.log("ScrollTop: ", $document.scrollTop());
+      //console.log("documentHeight: ", $document.height());
+
+      if ($scope.logs.length === 0) {
+        // initial page load, let's scroll to the bottom
+        scrollToBottom = true;
+      }
+
+      //console.log("window.scrollTop() + window.height()", window.scrollTop() + window.height());
+
+      //console.log("getDocHeight() - 100: ", getDocHeight() - 100);
+
+      if ( (window.scrollTop() + window.height()) > (getDocHeight() - 100) ) {
+        //console.log("Scrolling to bottom...");
+        // page is scrolled near the bottom
+        scrollToBottom = true;
+      }
+
       var logs = response.events;
       var toTime = response.toTimestamp;
       if (toTime && angular.isNumber(toTime)) {
@@ -149,6 +179,11 @@ module Log {
         }
         if (counter) {
           refilter();
+          if (scrollToBottom) {
+            setTimeout(() => {
+              $document.scrollTop( $document.height() - window.height());
+            }, 20);
+          }
           Core.$apply($scope);
         }
       }

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -2108,7 +2108,6 @@ a.dashboard-link:hover {
 
 
 .log-table li div div:nth-child(1) {
-  border-right: 1px solid #d4d4d4;
   left: 0;
   width: 11px;
   z-index: 5;
@@ -2124,8 +2123,9 @@ a.dashboard-link:hover {
 .log-table li div div:nth-child(3) {
   border-right: 1px solid #d4d4d4;
   left: 168px;
-  width: 50px;
+  width: 60px;
   z-index: 5;
+  text-align: center;
 }
 
 .log-table li div div:nth-child(4) {