You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@activemq.apache.org by ch...@apache.org on 2013/01/17 23:05:12 UTC
svn commit: r1434932 - in
/activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console:
css/app.css index.html js/app.js
Author: chirino
Date: Thu Jan 17 22:05:12 2013
New Revision: 1434932
URL: http://svn.apache.org/viewvc?rev=1434932&view=rev
Log:
Added queue browsing pagination and improved the display of current elements.
Modified:
activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/css/app.css
activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/index.html
activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/js/app.js
Modified: activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/css/app.css
URL: http://svn.apache.org/viewvc/activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/css/app.css?rev=1434932&r1=1434931&r2=1434932&view=diff
==============================================================================
--- activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/css/app.css (original)
+++ activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/css/app.css Thu Jan 17 22:05:12 2013
@@ -67,3 +67,13 @@ div.application {
margin-left: -20px;
}
}
+
+.input-number {
+ width:3em;
+}
+
+.nomargin {
+ margin:0;
+}
+
+.center{text-align:center;}
Modified: activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/index.html
URL: http://svn.apache.org/viewvc/activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/index.html?rev=1434932&r1=1434931&r2=1434932&view=diff
==============================================================================
--- activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/index.html (original)
+++ activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/index.html Thu Jan 17 22:05:12 2013
@@ -132,15 +132,16 @@
<div>
{{#if App.DestinationsController.show_create_box}}
- <div class="well form-horizontal">
- <label class="control-label"><strong>Create: </strong></label>
- <div class="controls">
- {{view Ember.TextField class="input-xlarge" placeholder="name" valueBinding="App.DestinationsController.create_name"}}
- <a class="btn" href="#" {{action "create" target="App.DestinationsController" on="click"}}><i class="icon-plus-sign icon-white"></i></a>
- </div>
+ <div class="well center">
+ <form action="" class="nomargin form-inline">
+ <strong>Name: </strong>
+ {{view Ember.TextField placeholder="name" valueBinding="App.DestinationsController.create_name"}}
+ <input type="submit" value="Create" class="btn btn-primary" {{action "create" target="App.DestinationsController" on="click"}}>
+ </form>
</div>
{{/if}}
+ {{#if App.DestinationsController.firstObject }}
<table class="details table table-bordered table-striped" style="">
<tbody>
<tr>
@@ -163,7 +164,10 @@
<div style="padding:.5em 0">
<button class="btn btn-small" {{action "remove" target="App.DestinationsController" on="click"}}>Delete</button>
</div>
- </div>
+ {{else}}
+ <div style="padding-left:2em;">No {{App.VirtualHostController.selected_tab}} have been created yet.</div>
+ {{/if}}
+ </div>
</div>
</div>
{{#if App.destination}}
@@ -186,16 +190,16 @@
<tr><td><strong>Selector: </strong>{{App.destination.selector}}</td></tr>
{{/if}}
<tr><td><strong>Queue Size: </strong>{{App.destination.metrics.queue_items}} messages</td></tr>
- <tr><td><strong>Enqueued: </strong>{{App.destination.metrics.enqueue_item_counter}} items /{{App.destination.metrics.enqueue_size_counter}} bytes {{App.destination.metrics.enqueue_date}} ago</td></tr>
- <tr><td><strong>Dequeued: </strong>{{App.destination.metrics.dequeue_item_counter}} /{{App.destination.metrics.dequeue_size_counter}} bytes {{App.destination.metrics.dequeue_date}} ago</td></tr>
- <tr><td><strong>Nacked: </strong>{{App.destination.metrics.nack_item_counter}} /{{App.destination.metrics.nack_size_counter}} bytes {{App.destination.metrics.nack_date}} ago</td></tr>
- <tr><td><strong>Expired: </strong>{{App.destination.metrics.expired_item_counter}} /{{App.destination.metrics.expired_size_counter}} bytes {{App.destination.metrics.expired_date}} ago</td></tr>
+ <tr><td><strong>Enqueued: </strong>{{App.destination.metrics.enqueue_item_counter}} items / {{memory App.destination.metrics.enqueue_size_counter}} bytes {{App.destination.metrics.enqueue_date}} ago</td></tr>
+ <tr><td><strong>Dequeued: </strong>{{App.destination.metrics.dequeue_item_counter}} / {{memory App.destination.metrics.dequeue_size_counter}} bytes {{App.destination.metrics.dequeue_date}} ago</td></tr>
+ <tr><td><strong>Nacked: </strong>{{App.destination.metrics.nack_item_counter}} / {{memory App.destination.metrics.nack_size_counter}} bytes {{App.destination.metrics.nack_date}} ago</td></tr>
+ <tr><td><strong>Expired: </strong>{{App.destination.metrics.expired_item_counter}} / {{memory App.destination.metrics.expired_size_counter}} bytes {{App.destination.metrics.expired_date}} ago</td></tr>
<tr><td><strong>Enqueue Rate Throttle: </strong>{{App.destination.metrics.max_enqueue_rate}}</td></tr>
- <tr><td><strong>Swapped In: </strong>{{App.destination.metrics.swapped_in_items}} msgs {{App.destination.metrics.swapped_in_size}} bytes</td></tr>
- <tr><td><strong>Swapping Out: </strong>{{App.destination.metrics.swapping_out_size}} bytes</td></tr>
- <tr><td><strong>Swapping In: </strong>{{App.destination.metrics.swapping_in_size}} bytes</td></tr>
- <tr><td><strong>Total Swap Ins: </strong>{{App.destination.metrics.swap_out_item_counter}} msgs {{App.destination.metrics.swap_out_size_counter}} bytes</td></tr>
- <tr><td><strong>Total Swap Outs: </strong>{{App.destination.metrics.swap_in_item_counter}} msgs {{App.destination.metrics.swap_in_size_counter}} bytes</td></tr>
+ <tr><td><strong>Swapped In: </strong>{{App.destination.metrics.swapped_in_items}} msgs {{memory App.destination.metrics.swapped_in_size}} bytes</td></tr>
+ <tr><td><strong>Swapping Out: </strong>{{memory App.destination.metrics.swapping_out_size}} bytes</td></tr>
+ <tr><td><strong>Swapping In: </strong>{{memory App.destination.metrics.swapping_in_size}} bytes</td></tr>
+ <tr><td><strong>Total Swap Ins: </strong>{{App.destination.metrics.swap_out_item_counter}} msgs {{memory App.destination.metrics.swap_out_size_counter}} bytes</td></tr>
+ <tr><td><strong>Total Swap Outs: </strong>{{App.destination.metrics.swap_in_item_counter}} msgs {{memory App.destination.metrics.swap_in_size_counter}} bytes</td></tr>
</tbody>
</table>
</div>
@@ -211,6 +215,7 @@
<div class="tab-content">
<div class="tab-pane active" id="TAB_Messages">
+ <!--
<div class="well form-horizontal">
<label class="control-label"><strong>Message: </strong></label>
<div class="controls">
@@ -218,6 +223,26 @@
<a class="btn" href="#" {{action "send" target="App.MessagesController" on="click"}}>Send</a>
</div>
</div>
+ -->
+ {{#if App.MessagesController.firstObject }}
+ <div class="well">
+ <div class="form-inline">
+ <span style="padding-right:1em;">
+ Browse From:
+ {{view Ember.TextField class="input-number" valueBinding="App.MessagesController.from"}}
+ </span>
+ <span style="padding-right:1em;">
+ Max:
+ {{view Ember.TextField class="input-number" valueBinding="App.MessagesController.max"}}
+ </span>
+ <span style="padding-right:3em;">
+ <button class="btn" {{action "refresh" target="App.MessagesController" on="click"}}>Go</button>
+ </span>
+
+ <button class="btn" {{action "prev" target="App.MessagesController" on="click"}}>Prev</button>
+ <button class="btn" {{action "next" target="App.MessagesController" on="click"}}>Next</button>
+ </div>
+ </div>
<table class="details table table-bordered" style="">
<tbody>
@@ -232,9 +257,9 @@
<th width="100%">Size</th>
</tr>
{{#each App.MessagesController}}
- <tr>
+ <tr {{action "toggle_details" . target="App.MessagesController" on="click"}}>
<td>
- <a {{action "toggle_details" . target="App.MessagesController" on="click"}}>
+ <a>
{{#if show_details}}
<i class="icon-caret-down"></i>
{{else}}
@@ -282,17 +307,21 @@
{{/each}}
</tbody>
</table>
-
- <div style="padding:.5em 0">
- <button class="btn btn-small" {{action "remove" target="App.MessagesController" on="click"}}>Delete</button>
- </div>
+ {{else}}
+ <div style="padding-left:2em;">No messages are available for browsing.</div>
+ {{/if}}
</div>
<div class="tab-pane" id="TAB_Producers">
+ {{#if App.destination.producers}}
<table class="details table table-bordered table-striped" style="">
<tbody>
<tr>
<th>Name</th>
<th>Kind</th>
+ <div style="padding:.5em 0">
+ <!--<button class="btn btn-small" {{action "remove" target="App.MessagesController" on="click"}}>Delete</button>-->
+
+ </div>
<th>Items</th>
<th>Size</th>
<th>Last Enqueue</th>
@@ -302,14 +331,18 @@
<td>{{label}}</td>
<td>{{kind}}</td>
<td>{{enqueue_item_counter}}</td>
- <td>{{enqueue_size_counter}}</td>
+ <td>{{memory enqueue_size_counter}}</td>
<td>{{enqueue_date}}</td>
</tr>
{{/each}}
</tbody>
</table>
+ {{else}}
+ <div style="padding-left:2em;">No producers are attached.</div>
+ {{/if}}
</div>
<div class="tab-pane" id="TAB_Consumers">
+ {{#if App.destination.consumers}}
<table class="details table table-bordered table-striped" style="">
<tbody>
<tr>
@@ -329,16 +362,19 @@
<td>{{label}}</td>
<td>{{kind}}</td>
<td>{{enqueue_item_counter}}</td>
- <td>{{enqueue_size_counter}}</td>
+ <td>{{memory enqueue_size_counter}}</td>
<td>{{enqueue_date}}</td>
<td>{{total_ack_count}}</td>
<td>{{total_nack_count}}</td>
- <td>{{ack_item_rate}} msgs/sec {{ack_size_rate}} bytes/sec</td>
+ <td>{{ack_item_rate}} msgs/sec {{memory ack_size_rate}}/sec</td>
<td>{{waiting_on}}</td>
</tr>
{{/each}}
</tbody>
</table>
+ {{else}}
+ <div style="padding-left:2em;">No consumers are attached.</div>
+ {{/if}}
</div>
</div>
</div>
@@ -379,6 +415,7 @@
</div>
<div class="span8">
<h3>Connections</h3>
+ {{#if App.ConnectionsController.firstObject}}
<table class="details table table-bordered table-striped" style="">
<tbody>
<tr>
@@ -402,6 +439,9 @@
<div style="padding:.5em 0">
<button class="btn btn-small" {{action "remove" target="App.ConnectionsController" on="click"}}>Disconnect</button>
</div>
+ {{else}}
+ <div style="padding-left:2em;">No connections exist at this time.</div>
+ {{/if}}
</div>
</div>
</div>
@@ -450,8 +490,8 @@
<tbody>
<tr><td><strong>Version: </strong>{{App.broker.jvm_metrics.jvm_name}}</td></tr>
<tr><td><strong>Up Time: </strong>{{App.broker.jvm_metrics.uptime}}</td></tr>
- <tr><td><strong>Heap Memory: </strong>{{App.broker.jvm_metrics.heap_memory.used}} / {{App.broker.jvm_metrics.heap_memory.alloc}}</td></tr>
- <tr><td><strong>Non-Heap Memory: </strong>{{App.broker.jvm_metrics.non_heap_memory.used}} / {{App.broker.jvm_metrics.non_heap_memory.alloc}}</td></tr>
+ <tr><td><strong>Heap Memory: </strong>{{memory App.broker.jvm_metrics.heap_memory.used}} / {{memory App.broker.jvm_metrics.heap_memory.alloc}}</td></tr>
+ <tr><td><strong>Non-Heap Memory: </strong>{{memory App.broker.jvm_metrics.non_heap_memory.used}} / {{memory App.broker.jvm_metrics.non_heap_memory.alloc}}</td></tr>
<tr><td><strong>Threads: </strong>{{App.broker.jvm_metrics.threads_current}}</td></tr>
<tr><td><strong>CPU Time: </strong>{{App.broker.jvm_metrics.os_cpu_time}}</td></tr>
</tbody>
@@ -466,8 +506,8 @@
<tr><td><strong>Name: </strong>{{App.broker.jvm_metrics.os_name}}</td></tr>
<tr><td><strong>Architecture: </strong>{{App.broker.jvm_metrics.os_arch}}</td></tr>
<tr><td><strong>Processor Cores: </strong>{{App.broker.jvm_metrics.os_processors}}</td></tr>
- <tr><td><strong>Memory Free/Total: </strong>{{App.broker.jvm_metrics.os_memory_free}} / {{App.broker.jvm_metrics.os_memory_total}}</td></tr>
- <tr><td><strong>Swap Used/Available: </strong>{{App.broker.jvm_metrics.os_swap_total}} / {{App.broker.jvm_metrics.os_swap_free}} </td></tr>
+ <tr><td><strong>Memory Free/Total: </strong>{{memory App.broker.jvm_metrics.os_memory_free}} / {{memory App.broker.jvm_metrics.os_memory_total}}</td></tr>
+ <tr><td><strong>Swap Used/Available: </strong>{{memory App.broker.jvm_metrics.os_swap_total}} / {{memory App.broker.jvm_metrics.os_swap_free}} </td></tr>
<tr><td><strong>FD Open/Max: </strong>{{App.broker.jvm_metrics.os_fd_open}} / {{App.broker.jvm_metrics.os_fd_max}}</td></tr>
<tr><td><strong>Load Average</strong>{{App.broker.jvm_metrics.os_load_average}}</td></tr>
</tbody>
@@ -483,6 +523,7 @@
</div>
</div>
<div class="footer-push"></div>
+<div> </div>
</div>
<footer id="footer">
<div class="footer-inner">
Modified: activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/js/app.js
URL: http://svn.apache.org/viewvc/activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/js/app.js?rev=1434932&r1=1434931&r2=1434932&view=diff
==============================================================================
--- activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/js/app.js (original)
+++ activemq/activemq-apollo/trunk/apollo-web/src/main/webapp/console/js/app.js Thu Jan 17 22:05:12 2013
@@ -32,7 +32,7 @@ if( !window.atob ) {
}
}
-Handlebars.registerHelper("key_value", function(name, fn) {
+Ember.Handlebars.registerHelper("key_value", function(name, fn) {
var obj = this[name];
var buffer = "", key;
for (key in obj) {
@@ -43,6 +43,35 @@ Handlebars.registerHelper("key_value", f
return buffer;
});
+Ember.Handlebars.registerHelper('memory', function(property, options) {
+ options.fn = function(size) {
+ if( (typeof size)=="number" ) {
+ var units = "bytes"
+ if( size > 1024 ) {
+ size = size / 1024;
+ units = "kb"
+ if( size > 1024 ) {
+ size = size / 1024;
+ units = "mb"
+ if( size > 1024 ) {
+ size = size / 1024;
+ units = "gb"
+ if( size > 1024 ) {
+ size = size / 1024;
+ units = "tb"
+ }
+ }
+ }
+ size = size.toFixed(2);
+ }
+ return size+" "+units;
+ }
+ return size;
+ }
+ return Ember.Handlebars.helpers.bind(property, options);
+});
+
+
App = Em.Application.create({
ready: function() {
var self = this;
@@ -189,6 +218,8 @@ App.BrokerController = Ember.Controller.
offline:false,
refresh: function() {
App.ajax("GET", "/broker", function(json) {
+ json.jvm_metrics.os_cpu_time = (json.jvm_metrics.os_cpu_time / 1000000000).toFixed(3) + " seconds"
+ json.jvm_metrics.uptime = (json.jvm_metrics.uptime / 1000).toFixed(2) + " seconds"
App.broker.setProperties(json);
if( App.VirtualHostController.get('selected') == null && json.virtual_hosts.length > 0 ) {
App.VirtualHostController.set('selected', json.virtual_hosts[0]);
@@ -408,25 +439,7 @@ App.DestinationController = Em.Controlle
value.enqueue_date = new Date(value.enqueue_ts);
});
App.set('destination', data);
- });
- var max_body = 100;
- App.ajax("GET", "/broker/virtual-hosts/"+virtual_host+"/"+kind+"/"+selected+"/messages?from=0&max=100&max_body="+max_body, function(data) {
- App.MessagesController.clear();
- data.forEach(function(item){
- if( item.base64_body ) {
- var rc = atob(item.base64_body);
- if( item.body_truncated ) {
- rc += "..."
- }
- item.body = rc;
- }
- if( item.expiration==0 ) {
- item.expiration = "no"
- } else {
- item.expiration = new Date(connector.state_since);
- }
- App.MessagesController.addObject(Ember.Object.create(item));
- });
+ App.MessagesController.reset();
});
}
}.observes("selected"),
@@ -483,6 +496,63 @@ App.MessagesController = Ember. ArrayCon
this.set("selected", event.context.get(0))
},
+ max: 25,
+ from: 0,
+
+ reset:function() {
+ this.set("from", 0)
+ this.refresh();
+ },
+
+ refresh:function() {
+ var virtual_host = App.DestinationsController.get("virtual_host");
+ var kind = App.DestinationsController.get("kind");
+ var selected = App.DestinationController.get("selected")
+ var max_body = 100;
+ var from = this.get("from");
+ var max = this.get("max");
+ App.ajax("GET", "/broker/virtual-hosts/"+virtual_host+"/"+kind+"/"+selected+"/messages?from="+from+"&max="+max+"&max_body="+max_body, function(data) {
+ var content=[]
+ if( data.length > 0 ) {
+ data.forEach(function(item){
+ if( item.base64_body ) {
+ var rc = atob(item.base64_body);
+ if( item.body_truncated ) {
+ rc += "..."
+ }
+ item.body = rc;
+ }
+ if( item.expiration==0 ) {
+ item.expiration = "no"
+ } else {
+ item.expiration = new Date(connector.state_since);
+ }
+ content.push(Ember.Object.create(item));
+ });
+ App.MessagesController.set("from", data[0].entry.seq);
+ }
+ App.MessagesController.set("content", content);
+ });
+ },
+
+ prev: function() {
+ var content = this.get("content");
+ if( content.length > 0 ) {
+ var seq = content[0].get("entry.seq")
+ this.set("from", seq-this.get("max"));
+ this.refresh();
+ }
+ },
+
+ next: function() {
+ var content = this.get("content");
+ if( content.length > 0 ) {
+ var seq = content[content.length-1].get("entry.seq")
+ this.set("from", seq+1);
+ this.refresh();
+ }
+ },
+
});
Ember.View.create({