#842: log plugin can now sort asc/desc and preference to configure.

hawtio · Dec 15, 2013 · 78fcf00 · 78fcf00
1 parent 1e59986
commit 78fcf00
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 15 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/html/preferences.html b/hawtio-web/src/main/webapp/app/core/html/preferences.html
@@ -173,18 +173,29 @@
 </div>
 
 <div value="logs" class="tab-pane" title="Logs">
+
+  <form class="form-horizontal">
+    <label class="control-label">Sort Ascending</label>
+    <div class="control-group">
+      <div class="controls">
+        <input type="checkbox" ng-model="logSortAsc">
+        <span class="help-block">Ascending inserts new log lines in the bottom, descending inserts new log lines in the top</span>
+      </div>
+    </div>
+  </form>
+
   <form class="form-horizontal">
     <div class="control-group">
       <label class="control-label" for="logCacheSize" title="The number of log messages to keep in the browser">Log
         cache size</label>
-
       <div class="controls">
         <input id="logCacheSize" type="number" ng-model="logCacheSize"/>
       </div>
     </div>
-  </form>
 
+  </form>
 </div>
+
 <div value="git" class="tab-pane" title="Git">
   <form class="form-horizontal">
     <div class="control-group">
@@ -260,7 +271,6 @@
 <div value="fabric" class="tab-pane" title="Fabric">
   <form class="form-horizontal">
     <label class="control-label">Always Prompt for User/Password</label>
-
     <div class="control-group">
       <div class="controls">
         <input type="checkbox" ng-model="fabricAlwaysPrompt">
@@ -271,7 +281,6 @@
 
   <form class="form-horizontal">
     <label class="control-label">Enable Maps</label>
-
     <div class="control-group">
       <div class="controls">
         <input type="checkbox" ng-model="fabricEnableMaps">

diff --git a/hawtio-web/src/main/webapp/app/core/js/preferences.ts b/hawtio-web/src/main/webapp/app/core/js/preferences.ts
@@ -110,6 +110,7 @@ module Core {
 
     var defaults = {
       logCacheSize: 1000,
+      logSortAsc: true,
       fabricAlwaysPrompt: false,
       fabricEnableMaps: true,
       camelIgnoreIdForLabel: false,
@@ -119,6 +120,7 @@ module Core {
 
     var converters = {
       logCacheSize: parseInt,
+      logSortAsc: parseBooleanValue,
       fabricAlwaysPrompt: parseBooleanValue,
       fabricEnableMaps: parseBooleanValue,
       camelIgnoreIdForLabel: parseBooleanValue,
@@ -146,7 +148,7 @@ module Core {
     });
 
     var names = ["showWelcomePage", "gitUserName", "gitUserEmail", "activemqUserName", "activemqPassword",
-      "logCacheSize", "fabricAlwaysPrompt",  "fabricEnableMaps", "camelIgnoreIdForLabel", "camelMaximumLabelWidth",
+      "logCacheSize", "logSortAsc", "fabricAlwaysPrompt",  "fabricEnableMaps", "camelIgnoreIdForLabel", "camelMaximumLabelWidth",
       "camelMaximumTraceOrDebugBodyLength"];
 
     angular.forEach(names, (name) => {

diff --git a/hawtio-web/src/main/webapp/app/log/html/logs.html b/hawtio-web/src/main/webapp/app/log/html/logs.html
@@ -51,7 +51,7 @@
       <li class="table-head">
         <div>
           <div></div>
-          <div>Timestamp</div>
+          <div><span><i ng-class="sortIcon"></i> Timestamp</span></div>
           <div>Level</div>
           <div>Logger</div>
           <div>Message</div>

diff --git a/hawtio-web/src/main/webapp/app/log/js/logs.ts b/hawtio-web/src/main/webapp/app/log/js/logs.ts
@@ -2,6 +2,9 @@
  * @module Log
  */
 module Log {
+
+  var log:Logging.Logger = Logger.get("Log");
+
   export interface ILog {
     // TODO What is the point of seq?
     seq: string;
@@ -12,8 +15,15 @@ module Log {
   }
 
   export function LogController($scope, $routeParams, $location, localStorage, workspace:Workspace, $window, $document) {
-    $scope.logs = [];
+    $scope.sortAsc = true;
+    var value = localStorage["logSortAsc"];
+    if (angular.isString(value)) {
+      $scope.sortAsc = "true" === value;
+    }
 
+    log.info("Sorting from preference is " + $scope.sortAsc)
+
+    $scope.logs = [];
     $scope.branding = Branding.enabled;
 
     $scope.init = () => {
@@ -147,6 +157,13 @@ module Log {
       return "";
     };
 
+    $scope.sortIcon = () => {
+      if ($scope.sortAsc) {
+        return "icon-arrow-down";
+      } else {
+        return "icon-arrow-up";
+      }
+    };
 
     $scope.filterLogMessage = (log) => {
 
@@ -191,18 +208,21 @@ module Log {
 
 
     var updateValues = function (response) {
-      var scrollToBottom = false;
+      var scrollToTopOrBottom = false;
+
       if (!$scope.inDashboard) {
         var window = $($window);
 
         if ($scope.logs.length === 0) {
           // initial page load, let's scroll to the bottom
-          scrollToBottom = true;
+          scrollToTopOrBottom = true;
         }
 
-        if ( (window.scrollTop() + window.height()) > (Core.getDocHeight() - 100) ) {
+        var pos = window.scrollTop() + window.height();
+        var threshold = Core.getDocHeight() - 100;
+        if ( (pos) > (threshold) ) {
           // page is scrolled near the bottom
-          scrollToBottom = true;
+          scrollToTopOrBottom = true;
         }
       }
 
@@ -229,7 +249,11 @@ module Log {
             // TODO Why do we compare 'item.seq === log.message' ?
             if (!$scope.logs.any((key, item:ILog) => item.message === log.message && item.seq === log.message && item.timestamp === log.timestamp)) {
               counter += 1;
-              $scope.logs.push(log);
+              if ($scope.sortAsc) {
+                $scope.logs.push(log);
+              } else {
+                $scope.logs.unshift(log);
+              }
             }
           }
         });
@@ -238,13 +262,22 @@ module Log {
           if (size > maxSize) {
             // lets trim the log size
             var count = size - maxSize;
-            $scope.logs.splice(0, count);
+            var pos = 0;
+            if (!$scope.sortAsc) {
+              pos = size - count;
+            }
+            $scope.logs.splice(pos, count);
           }
         }
         if (counter) {
-          if (scrollToBottom) {
+          if (scrollToTopOrBottom) {
             setTimeout(() => {
-              $document.scrollTop( $document.height() - window.height());
+              var pos = 0;
+              if ($scope.sortAsc) {
+                pos = $document.height() - window.height();
+              }
+              log.debug("Scrolling to position: " + pos)
+              $document.scrollTop(pos);
             }, 20);
           }
           Core.$apply($scope);