Make it possible to export logs to the dashboard

hawtio · Oct 10, 2013 · b92a119 · b92a119
1 parent eb9dd56
commit b92a119
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 40 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
@@ -1,40 +1,43 @@
 <div ng-controller="Log.LogController">
-  <div class="logbar">
+  <div ng-hide="inDashboard" class="logbar">
     <div class="logbar-container">
-
-      <!-- <div class="row-fluid"> -->
-
-        <div class="control-group inline-block log-filter">
-          <input class="search-query" type="text" id="logSearch" ng-model="searchText" placeholder="Filter logs...">
-        </div>
-
-        <div class="control-group inline-block">
-          <form class="form-inline no-bottom-margin">
-            <label>Level: </label>
-
-            <select ng-model="filter.logLevelQuery" id="logLevelQuery">
-              <option value="" selected="selected">None...</option>
-              <option value="TRACE">TRACE</option>
-              <option value="DEBUG">DEBUG</option>
-              <option value="INFO">INFO</option>
-              <option value="WARN">WARN</option>
-              <option value="ERROR">ERROR</option>
-            </select>
-            &nbsp;
-            <label>Exact:
-              <input type="checkbox" ng-model="filter.logLevelExactMatch"
-                     title="Only match exact logging levels rather than using ranges">
-            </label>
-          </form>
-        </div>
-
-        <div class="control-group inline-block pull-right" ng-show="branding">
+      <div class="control-group inline-block log-filter">
+        <input class="search-query" type="text" id="logSearch" ng-model="searchText" placeholder="Filter logs...">
+      </div>
+
+      <div class="control-group inline-block">
+        <form class="form-inline no-bottom-margin">
+          <label>Level: </label>
+
+          <select ng-model="filter.logLevelQuery" id="logLevelQuery">
+            <option value="" selected="selected">None...</option>
+            <option value="TRACE">TRACE</option>
+            <option value="DEBUG">DEBUG</option>
+            <option value="INFO">INFO</option>
+            <option value="WARN">WARN</option>
+            <option value="ERROR">ERROR</option>
+          </select>
+          &nbsp;
+          <label>Exact:
+            <input type="checkbox" ng-model="filter.logLevelExactMatch"
+                   title="Only match exact logging levels rather than using ranges">
+          </label>
+        </form>
+      </div>
+
+      <div class="pull-right">
+        <div class="control-group inline-block" ng-show="branding">
           <button class="btn" ng-disabled="!selectedItems.length" ng-click="getSupport()"
                   title="Search the customer portal to get help on why the selected log occurred" data-placement="bottom">
             <i class="icon-question-sign"></i> Support
           </button>
         </div>
-
+        <div class="control-group inline-block">
+          <a class="btn" ng-href="{{addToDashboardLink()}}" title="Add this view to a dashboard">
+            <i class="icon-share"></i>
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -44,7 +47,7 @@
     <div class="gridStyle" hawtio-datatable="gridOptions"></div>
     -->
 
-    <ul class="log-table">
+    <ul class="log-table" ng-class="isInDashboardClass()">
       <li class="table-head">
         <div>
           <div></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
@@ -113,6 +113,38 @@ module Log {
     };
 
 
+    $scope.addToDashboardLink = () => {
+      var href = "#/logs"
+      var routeParams = angular.toJson($routeParams)
+      var size = angular.toJson({
+        size_x: 8,
+        size_y: 1
+      });
+      var title = "Logs";
+      if ($scope.filter.logLevelQuery !== "") {
+        title = title + " LogLevel: " + $scope.filter.logLevelQuery;
+      }
+      if ($scope.filter.logLevelExactMatch) {
+        title = title + " Exact Match";
+      }
+      if ($scope.searchText !== "") {
+        title = title + " Filter: " + $scope.searchText;
+      }
+      return "#/dashboard/add?tab=dashboard" +
+          "&href=" + encodeURIComponent(href) +
+          "&routeParams=" + encodeURIComponent(routeParams) +
+          "&title=" + encodeURIComponent(title) +
+          "&size=" + encodeURIComponent(size);
+    };
+
+    $scope.isInDashboardClass = () => {
+      if (angular.isDefined($scope.inDashboard && $scope.inDashboard)) {
+        return "log-table-dashboard";
+      }
+      return "";
+    };
+
+
     $scope.filterLogMessage = (log) => {
 
       if ($scope.filter.logLevelQuery !== "") {
@@ -157,16 +189,18 @@ module Log {
 
     var updateValues = function (response) {
       var scrollToBottom = false;
-      var window = $($window);
+      if (!$scope.inDashboard) {
+        var window = $($window);
 
-      if ($scope.logs.length === 0) {
-        // initial page load, let's scroll to the bottom
-        scrollToBottom = true;
-      }
+        if ($scope.logs.length === 0) {
+          // initial page load, let's scroll to the bottom
+          scrollToBottom = true;
+        }
 
-      if ( (window.scrollTop() + window.height()) > (Core.getDocHeight() - 100) ) {
-        // page is scrolled near the bottom
-        scrollToBottom = true;
+        if ( (window.scrollTop() + window.height()) > (Core.getDocHeight() - 100) ) {
+          // page is scrolled near the bottom
+          scrollToBottom = true;
+        }
       }
 
       var logs = response.events;
@@ -182,6 +216,10 @@ module Log {
       }
       if (logs) {
         var maxSize = getLogCacheSize(localStorage);
+        //don't really need many logs in a widget...
+        if ($scope.inDashboard) {
+          maxSize = 10;
+        }
         var counter = 0;
         logs.forEach((log:ILog) => {
           if (log) {

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -274,6 +274,13 @@ li.attr-column {
   border: 1px solid #d4d4d4;
   box-shadow: 0 1px 13px rgba(0, 0, 0, 0.1) inset;
 }
+
+.widget-area {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
 .widget-title {
   margin: 0;
   padding-left: 5px;
@@ -291,6 +298,11 @@ li.attr-column {
   text-shadow: 0 1px 0 #FFFFFF;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
+  z-index: 6000;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
 }
 .widget-title:hover {
   cursor: move;
@@ -315,9 +327,15 @@ li.attr-column {
   -webkit-transition: opacity 0.25s ease-in-out;
   opacity: 1;
 }
+
 .widget-body {
-  padding: 2px;
+  position: absolute;
+  top: 20px;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
+
 .height-controls a {
   float: left;
   display: block;
@@ -2413,6 +2431,13 @@ a.dashboard-link:hover {
   display: block;
 }
 
+.log-table-dashboard {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 .ex-node-container {
   position: relative;
   width: 100%;