Update activemq browse page to use hawtio-slideout and hawtio-editor

hawtio · May 2, 2013 · 642a329 · 642a329
1 parent 77f2907
commit 642a329
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 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
@@ -29,28 +29,34 @@
     </div>
   </div>
 
-  <div ng-switch="messageDialog.show">
-    <div ng-switch-when="false">
-      <div class="row-fluid">
-        <div class="gridStyle" ng-grid="gridOptions"></div>
-        <!--
-            <div class="gridStyle" hawtio-datatable="gridOptions"></div>
-        -->
-      </div>
-    </div>
-    <div ng-switch-when="true">
+  <div class="row-fluid">
+    <div class="gridStyle" ng-grid="gridOptions"></div>
+  </div>
+
+  <div hawtio-slideout="showMessageDetails" title="{{row.JMSMessageID}}">
+    <div class="dialog-body">
+
       <div class="row-fluid">
-        <div class="span8">
-          <h4>{{row.JMSMessageID}}</h4>
-        </div>
         <div class="pull-right">
           <form class="form-horizontal no-bottom-margin">
+
             <div class="btn-group" hawtio-pager="messages" on-index-change="selectRowIndex" row-index="rowIndex"></div>
-            <button class="btn" ng-click="messageDialog.close()" title="Closes the message detail view">
-              <i class="icon-eject"></i></button>
+
+            <button class="btn" ng-disabled="!gridOptions.selectedItems.length" ng-click="moveDialog = true"
+                    title="Move the selected messages to another destination" data-placement="bottom">
+              <i class="icon-share-alt"></i> Move
+            </button>
+
+            <button class="btn" ng-disabled="!gridOptions.selectedItems.length"
+                    ng-click="deleteDialog = true"
+                    title="Delete the selected messages">
+              <i class="icon-remove"></i> Delete
+            </button>
+
           </form>
         </div>
       </div>
+
       <div class="row-fluid">
         <div class="expandable closed">
           <div title="Headers" class="title">
@@ -78,12 +84,9 @@ <h4>{{row.JMSMessageID}}</h4>
       </div>
 
       <div class="row-fluid">
-        <div ng-controller="Core.EditorController">
-          <textarea readonly class="messageDetail" class="input-xlarge" codeMirror="true"
-                    rows="{{lineCount(row.Text)}}"
-                    ng-model="row.Text"></textarea>
-        </div>
+        <div hawtio-editor="row.Text" read-only="true"></div>
       </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
@@ -66,7 +66,7 @@ module ActiveMQ {
       ]
     };
 
-    $scope.messageDialog = new Core.Dialog();
+    $scope.showMessageDetails = false;
 
     var ignoreColumns = ["PropertiesText", "BodyPreview", "Text"];
     var flattenColumns = ["BooleanProperties", "ByteProperties", "ShortProperties", "IntProperties", "LongProperties", "FloatProperties",
@@ -83,7 +83,7 @@ module ActiveMQ {
       var idx = Core.pathGet(message, ["rowIndex"]);
       $scope.selectRowIndex(idx);
       if ($scope.row) {
-        $scope.messageDialog.open();
+        $scope.showMessageDetails = true;
       }
     };