Update to ng-grid 2.0.4

hawtio · Apr 26, 2013 · 37e99b3 · 37e99b3
1 parent 2ef82b0
commit 37e99b3
Show file tree

Hide file tree

Showing 18 changed files with 3,416 additions and 2,620 deletions.
diff --git a/hawtio-web/src/main/webapp/app/activemq/html/browseQueue.html b/hawtio-web/src/main/webapp/app/activemq/html/browseQueue.html
@@ -1,7 +1,7 @@
 <div ng-controller="ActiveMQ.BrowseQueueController">
   <div class="row-fluid">
     <div class="span6">
-      <input class="search-query span12" type="text" ng-model="searchText"
+      <input class="search-query span12" type="text" ng-model="gridOptions.filterOptions.filterText"
              placeholder="Filter messages">
     </div>
     <div class="span6">

diff --git a/hawtio-web/src/main/webapp/app/activemq/html/layoutActiveMQTree.html b/hawtio-web/src/main/webapp/app/activemq/html/layoutActiveMQTree.html
@@ -15,10 +15,4 @@
     <ng-include src="'app/jmx/html/subLevelTabs.html'"></ng-include>
     <div id="properties" ng-view></div>
   </div>
-  <div id="alert-area" class="span9"></div>
-  <!--
-          <div class="span8 scrollable">
-              <div id="properties" class="scrollable" ng-view></div>
-          </div>
-  -->
 </div>
diff --git a/hawtio-web/src/main/webapp/app/activemq/js/browse.ts b/hawtio-web/src/main/webapp/app/activemq/js/browse.ts
@@ -1,7 +1,10 @@
 module ActiveMQ {
   export function BrowseQueueController($scope, workspace:Workspace) {
 
+    $scope.searchText = '';
+
     $scope.selectedItems = [];
+    $scope.messages = [];
     $scope.headers = {};
 
     $scope.deleteDialog = new Core.Dialog();
@@ -12,46 +15,57 @@ module ActiveMQ {
       data: 'messages',
       displayFooter: false,
       showFilter: false,
+      showColumnMenu: true,
+      enableColumnResize: true,
+      enableColumnReordering: true,
       filterOptions: {
-        filterText: "searchText"
+        filterText: ''
       },
       selectWithCheckboxOnly: true,
+      maintainColumnRatios: false,
       columnDefs: [
         {
           field: 'JMSMessageID',
           displayName: 'Message ID',
           cellTemplate: '<div class="ngCellText"><a ng-click="openMessageDialog(row)">{{row.entity.JMSMessageID}}</a></div>',
           // for ng-grid
-          width: "****"
+          width: '50%'
           // for hawtio-datatable
           // width: "22em"
         },
         {
           field: 'JMSType',
-          displayName: 'Type'
+          displayName: 'Type',
+          width: '10%'
         },
         {
           field: 'JMSPriority',
-          displayName: 'Priority'
+          displayName: 'Priority',
+          width: '10%'
         },
         {
           field: 'JMSTimestamp',
-          displayName: 'Timestamp'
+          displayName: 'Timestamp',
+          width: '40%'
         },
         {
           field: 'JMSExpiration',
-          displayName: 'Expires'
+          displayName: 'Expires',
+          width: '10%'
         },
         {
           field: 'JMSReplyTo',
-          displayName: 'Reply To'
+          displayName: 'Reply To',
+          width: '10%'
         },
         {
           field: 'JMSCorrelationID',
-          displayName: 'Correlation ID'
+          displayName: 'Correlation ID',
+          width: '40%'
         }
-      ],
-      rowDetailTemplateId: "activemqMessageTemplate"
+      ]//,
+      /*
+      rowDetailTemplateId: "activemqMessageTemplate"*/
     };
 
 
@@ -153,4 +167,4 @@ module ActiveMQ {
       setTimeout(loadTable, 50);
     }
   }
-}
+}
diff --git a/hawtio-web/src/main/webapp/app/core/html/layoutTree.html b/hawtio-web/src/main/webapp/app/core/html/layoutTree.html
@@ -11,14 +11,8 @@
   </div>
   <div class="span9">
     <ng-include src="'app/jmx/html/subLevelTabs.html'"></ng-include>
-  <div id="properties" ng-view></div>
+    <div id="properties" ng-view></div>
   </div>
-  <div id="alert-area" class="span9"></div>
-  <!--
-          <div class="span8 scrollable">
-              <div id="properties" class="scrollable" ng-view></div>
-          </div>
-  -->
 </div>
 
 
diff --git a/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts b/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts
@@ -233,6 +233,41 @@ angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dia
           helpRegistry.addSubTopic('overview', 'faq', 'app/core/doc/faq.md');
           helpRegistry.discoverHelpFiles(hawtioPluginLoader.getModules());
 
+          var setGridSize = function (event) {
+
+            var grid = $('.gridStyle');
+
+            if (grid.length > 0) {
+
+              var gridTop = grid.position().top;
+
+              var windowHeight = $(window).height();
+              var height = windowHeight - gridTop - 10;
+
+              var heightStr = height + 'px';
+
+              /*
+              if (grid.parent().css('height')) {
+                console.log("Parent element height: " + grid.parent().css('height'));
+                heightStr = grid.parent().css('height');
+              }
+              */
+
+              grid.css({
+                'min-height': heightStr,
+                'height': heightStr
+              });
+              if (!event || event.type !== "resize") {
+                //console.log("Triggering resize");
+                $(window).resize();
+              }
+            }
+          }
+
+          $rootScope.$on('$includeContentLoaded',setGridSize);
+          $rootScope.$on('$viewContentLoaded', setGridSize);
+          $(window).resize(setGridSize);
+
         }).
         directive('expandable',function () {
           return {
@@ -323,12 +358,22 @@ $(function () {
   });
 });
 
+var adjustHeight = function () {
+  var windowHeight = $(window).height()
+  var headerHeight = $("#main-nav").height()
+  var containerHeight = windowHeight - headerHeight;
+  $("#main").css("min-height", "" + containerHeight + "px");
+}
+
 $(function () {
   hawtioPluginLoader.loadPlugins(function () {
     var doc = $(document);
     angular.bootstrap(doc, hawtioPluginLoader.getModules());
     $(document.documentElement).attr('xmlns:ng', "http://angularjs.org");
     $(document.documentElement).attr('ng-app', 'hawtioCore');
+    adjustHeight();
+    $(window).resize(adjustHeight);
+
   });
 });
 

diff --git a/hawtio-web/src/main/webapp/app/jetty/html/applications.html b/hawtio-web/src/main/webapp/app/jetty/html/applications.html
@@ -25,7 +25,7 @@
       <form class="form-inline no-bottom-margin">
         <fieldset>
           <div class="control-group inline-block">
-            <input type="text" class="search-query" placeholder="Filter..." ng-model="search">
+            <input type="text" class="search-query" placeholder="Filter..." ng-model="gridOptions.filterOptions.filterText">
           </div>
         </fieldset>
       </form>

diff --git a/hawtio-web/src/main/webapp/app/jetty/html/connectors.html b/hawtio-web/src/main/webapp/app/jetty/html/connectors.html
@@ -5,7 +5,7 @@
             <form class="form-inline no-bottom-margin">
                 <fieldset>
                     <div class="control-group inline-block">
-                        <input type="text" class="search-query" placeholder="Filter..." ng-model="search">
+                        <input type="text" class="search-query" placeholder="Filter..." ng-model="gridOptions.filterOptions.filterText">
                     </div>
                 </fieldset>
             </form>

diff --git a/hawtio-web/src/main/webapp/app/jetty/js/connectors.ts b/hawtio-web/src/main/webapp/app/jetty/js/connectors.ts
@@ -5,7 +5,6 @@ module Jetty {
     var stateTemplate = '<div class="ngCellText pagination-centered" title="{{row.getProperty(col.field)}}"><i class="{{row.getProperty(col.field) | jettyIconClass}}"></i></div>';
 
     $scope.connectors = [];
-    $scope.search = "";
 
     var columnDefs:any[] = [
       {
@@ -40,7 +39,7 @@ module Jetty {
       canSelectRows: false,
       columnDefs: columnDefs,
       filterOptions: {
-        filterText: 'search'
+        filterText: ''
       }
     };
 
@@ -102,4 +101,4 @@ module Jetty {
     }
 
   }
-}
+}
diff --git a/hawtio-web/src/main/webapp/app/jetty/js/jetty.ts b/hawtio-web/src/main/webapp/app/jetty/js/jetty.ts
@@ -6,7 +6,6 @@ module Jetty {
 
     $scope.webapps = [];
     $scope.selected = [];
-    $scope.search = "";
 
     var columnDefs:any[] = [
       {
@@ -41,7 +40,7 @@ module Jetty {
       selectWithCheckboxOnly: true,
       columnDefs: columnDefs,
       filterOptions: {
-        filterText: 'search'
+        filterText: ''
       },
       title: "Web applications"
     };
@@ -167,4 +166,4 @@ module Jetty {
       $scope.$apply();
     }
   }
-}
+}
diff --git a/hawtio-web/src/main/webapp/app/jmx/html/attributeToolBar.html b/hawtio-web/src/main/webapp/app/jmx/html/attributeToolBar.html
@@ -1,7 +1,7 @@
 <form class="form-horizontal no-bottom-margin">
   <fieldset>
     <div class="control-group">
-        <input type="text" class="span12 search-query" ng-model="$parent.searchText" placeholder="search">
+        <input type="text" class="span12 search-query" ng-model="$parent.gridOptions.filterOptions.filterText" placeholder="search">
     </div>
   </fieldset>
 </form>
diff --git a/hawtio-web/src/main/webapp/app/jmx/html/attributes.html b/hawtio-web/src/main/webapp/app/jmx/html/attributes.html
@@ -1,6 +1,6 @@
 <div ng-controller="Jmx.AttributesController">
   <div ng-include src="toolBarTemplate()"></div>
 
-  <div id="attributesGrid" ng-grid="gridOptions">
+  <div id="attributesGrid" class="gridStyle" ng-grid="gridOptions">
   </div>
 </div>
diff --git a/hawtio-web/src/main/webapp/app/jmx/js/attributes.ts b/hawtio-web/src/main/webapp/app/jmx/js/attributes.ts
@@ -1,7 +1,7 @@
 module Jmx {
 
   export var propertiesColumnDefs = [
-    {field: 'name', displayName: 'Property', width: "30%"},
+    {field: 'name', displayName: 'Property', width: "27%"},
     {field: 'value', displayName: 'Value',  width: "70%"}
   ];
 
@@ -11,7 +11,7 @@ module Jmx {
     }];
 
   export function AttributesController($scope, $location, workspace:Workspace, jolokia) {
-    $scope.searchText = "";
+    $scope.searchText = '';
     $scope.columnDefs = [];
     $scope.selectedItems = [];
     $scope.selectCheckBox = true;
@@ -46,9 +46,10 @@ module Jmx {
       showFilter: false,
       //showColumnMenu: false,
       canSelectRows: false,
+      showColumnMenu: true,
       displaySelectionCheckbox: false,
       filterOptions: {
-        filterText: "searchText"
+        filterText: ''
       },
       // TODO disabled for now as it causes https://github.com/hawtio/hawtio/issues/262
       //sortInfo: { field: 'name', direction: 'asc'},

diff --git a/hawtio-web/src/main/webapp/app/wiki/html/viewPage.html b/hawtio-web/src/main/webapp/app/wiki/html/viewPage.html
@@ -29,7 +29,7 @@
   <div class="wiki-fixed form-horizontal">
     <div ng-hide="!children">
       <div class="row-fluid">
-        <div class="gridStyle" ng-grid="gridOptions"></div>
+        <div class="wikiGridStyle" ng-grid="gridOptions"></div>
       </div>
     </div>
 

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -1057,3 +1057,11 @@ li.stacktrace {
 .control-button {
   width: 14px;
 }
+
+.ngViewport:focus {
+  outline: none;
+}
+
+.wikiGridStyle {
+  height: 200px;
+}
diff --git a/hawtio-web/src/main/webapp/index.html b/hawtio-web/src/main/webapp/index.html
@@ -46,7 +46,7 @@
 </style>
 
 <!--  navbar-inverse -->
-<div class="navbar navbar-fixed-top" ng-show="!fullScreen()">
+<div id="main-nav" class="navbar navbar-fixed-top" ng-show="!fullScreen()">
   <div class="navbar-inner" ng-cloak class="ng-cloak">
     <div class="container">
       <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
@@ -112,11 +112,7 @@
 <script type="text/javascript" src="lib/angular-resource.min.js"></script>
 
 <!-- ng-grid -->
-<!--
-TODO replace with non-debug when we can build the patched ng-grid
-<script type="text/javascript" src="lib/ng-grid-1.6.3.js"></script>
--->
-<script type="text/javascript" src="lib/ng-grid-1.6.3.debug.js"></script>
+<script type="text/javascript" src="lib/ng-grid-2.0.4.min.js"></script>
 
 <!-- dyna tree -->
 <script type="text/javascript" src="lib/jquery-ui.custom.min.js"></script>