#281 - finishing touches like ui and ux improvements

hawtio · Nov 29, 2013 · 43eb012 · 43eb012
1 parent cdb3255
commit 43eb012
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 17 deletions.
diff --git a/hawtio-web/src/main/webapp/app/activemq/html/durableSubscribers.html b/hawtio-web/src/main/webapp/app/activemq/html/durableSubscribers.html
@@ -1,15 +1,18 @@
 <div ng-controller="ActiveMQ.DurableSubscriberController">
+
     <div class="row-fluid">
       <div class="span12">
         <div class="pull-right">
-            <button class="btn" ng-click="createSubscriberDialog.open()"
-                    title="Create durable subscriber">
-              <i class="icon-plus"></i> Create
-            </button>
-            <button class="btn" ng-click="refresh()"
-                    title="Refreshes the list of subscribers">
-              <i class="icon-refresh"></i>
-            </button>
+            <form class="form-inline">
+                <button class="btn" ng-click="createSubscriberDialog.open()"
+                        title="Create durable subscriber">
+                    <i class="icon-plus"></i> Create
+                </button>
+                <button class="btn" ng-click="refresh()"
+                        title="Refreshes the list of subscribers">
+                    <i class="icon-refresh"></i>
+                </button>
+            </form>
         </div>
       </div>
     </div>
@@ -19,15 +22,15 @@
     </div>
 
     <div modal="createSubscriberDialog.show">
-      <form name="createSubscriber" class="form-horizontal no-bottom-margin" ng-submit="doCreateSubscriber(clientId, subscriberName, topicName, selector)">
+      <form name="createSubscriber" class="form-horizontal no-bottom-margin" ng-submit="doCreateSubscriber(clientId, subscriberName, topicName, subSelector)">
         <div class="modal-header"><h4>Create Durable Subscriber</h4></div>
         <div class="modal-body">
           <label>Client Id: </label>
           <input name="clientId" class="input-xlarge" type="text" ng-model="clientId" required>
           <label>Subscriber Name: </label>
           <input name="subscriberName" class="input-xlarge" type="text" ng-model="subscriberName" required>
           <label>Topic Name: </label>
-          <input name="topicName" class="input-xlarge" type="text" ng-model="topicName" required>
+          <input name="topicName" class="input-xlarge" type="text" ng-model="topicName" required typeahead="title for title in topicNames($viewValue) | filter:$viewValue" typeahead-editable='true'>
           <label>Selector: </label>
           <input name="subSelector" class="input-xlarge" type="text" ng-model="subSelector">
         </div>
@@ -43,7 +46,7 @@
 
         <div class="row-fluid">
           <div class="pull-right">
-            <form class="form-horizontal no-bottom-margin">
+            <form class="form-inline">
 
               <button class="btn btn-danger" ng-disabled="showSubscriberDialog.subscriber.Status == 'Active'"
                       ng-click="deleteSubscriberDialog.open()"

diff --git a/hawtio-web/src/main/webapp/app/activemq/js/activemqHelpers.ts b/hawtio-web/src/main/webapp/app/activemq/js/activemqHelpers.ts
@@ -16,11 +16,38 @@ module ActiveMQ {
       return null;
     }
 
-
     var selection = workspace.selection;
     if (selection) {
       return findQueuesFolder(selection);
     }
     return null;
   }
+
+  export function getSelectionTopicsFolder(workspace) {
+    function findTopicsFolder(node) {
+      var answer = null
+      if (node) {
+        if (node.title === "Topics" || node.title === "Topic") {
+          answer = node;
+        }
+
+        if (answer === null) {
+          angular.forEach(node.children, (child) => {
+              if (child.title === "Topics" || child.title === "Topic") {
+                answer = child;
+              }
+          });
+        }
+      }
+      return answer;
+    }
+
+
+    var selection = workspace.selection;
+    if (selection) {
+      return findTopicsFolder(selection);
+    }
+    return null;
+  }
+
 }
diff --git a/hawtio-web/src/main/webapp/app/activemq/js/durableSubscriber.ts b/hawtio-web/src/main/webapp/app/activemq/js/durableSubscriber.ts
@@ -22,26 +22,33 @@ module ActiveMQ {
         displayFooter: false,
         showFilter: false,
         showColumnMenu: true,
+        enableCellSelection: false,
         enableColumnResize: true,
         enableColumnReordering: true,
-        selectWithCheckboxOnly: true,
-        showSelectionCheckbox: true,
-        displaySelectionCheckbox : true, // old pre 2.0 config!
+        selectWithCheckboxOnly: false,
+        showSelectionCheckbox: false,
+        multiSelect: false,
+        displaySelectionCheckbox : false, // old pre 2.0 config!
         filterOptions: {
           filterText: ''
         },
         maintainColumnRatios: false,
         columnDefs: [
+          {
+              field: 'destinationName',
+              displayName: 'Topic',
+              width: '30%'
+          },
           {
             field: 'clientId',
             displayName: 'Client ID',
-            width: '45%'
+            width: '30%'
           },
           {
             field: 'consumerId',
             displayName: 'Consumer ID',
             cellTemplate: '<div class="ngCellText"><a ng-click="openSubscriberDialog(row)">{{row.entity.consumerId}}</a></div>',
-            width: '45%'
+            width: '30%'
           },
           {
             field: 'status',
@@ -100,6 +107,11 @@ module ActiveMQ {
       }));
     };
 
+    $scope.topicNames = (completionText) => {
+      var topicsFolder = getSelectionTopicsFolder(workspace);
+      return (topicsFolder) ? topicsFolder.children.map(n => n.title) : [];
+    };
+
 
     $scope.$watch('workspace.selection', function () {
         if (workspace.moveIfViewInvalid()) return;