Expanding-collapsing sections. Note that this involves disabling auto-updates until I figure out how to do them in a less destructive way.

deps/rabbitmq_management/priv/www/css/main.css

@@ -10,12 +10,12 @@ body { font: 12px Verdana,sans-serif; color: #444; padding: 8px 35px; }
 #main a { color: #444; }
 #menu a.selected { background-color: #F60; color:white; }
 #status { border-top:1px solid #E4E4E4; }
-h1 { color: #F60; font-size: 2em; }
+h1 { font-size: 2em; }
 
-table { border-collapse: collapse; margin-bottom: 2em; }
+table { border-collapse: collapse; }
 table th, table td { font: 12px/17px Verdana,sans-serif; padding: 4px; }
 
-table.list { border-width: 1px; border-bottom: 1px solid #bbb; }
+table.list { border-width: 1px; border-bottom: 1px solid #bbb; margin-bottom: 1em;}
 table.list th, table.list td { border-left: 1px solid #bbb; border-right: 1px solid #bbb; }
 table.list th { text-align: center; font-weight: bold; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; }
 
@@ -45,6 +45,10 @@ p.status-error { color: white; background-color: #f00; }
 .highlight {width: 150px; font-size: 150%; float: right; text-align:center; padding:10px; background-color: #ddd; margin: 0 20px 20px 0; color: #888;}
 .highlight strong {font-size: 2em; display: block; color: #444; font-weight: normal;}
 
-h2 { color: #F60; font-size: 1.5em; }
+div.section, div.section-hidden {border: 1px solid #ddd; margin: 0 0 1em 0;}
+div.section-hidden div {display: none;}
+div.section div, div.section-hidden div {padding: 0.5em;}
+div.section h2, div.section-hidden h2 { font-size: 1em; padding: 0.5em; cursor: pointer; background: #ddd; margin: 0;}
 
+form { margin: 0; }
 table.form { margin-bottom: 0.5em; }

deps/rabbitmq_management/priv/www/js/main.js

@@ -64,7 +64,7 @@ function go_to(url) {
 var current_template;
 var current_reqs;
 var current_highlight;
-var timer;
+//var timer;
 
 function render(reqs, template, highlight) {
     current_template = template;
@@ -74,28 +74,31 @@ function render(reqs, template, highlight) {
 }
 
 function update() {
-    clearInterval(timer);
+    //clearInterval(timer);
     with_reqs(current_reqs, [], function(jsons) {
             var json = merge(jsons, current_template);
             var html = format(current_template, json);
             replace_content('main', html);
             update_status('ok', json['datetime']);
             postprocess();
-            timer = setInterval('update()', 5000);
+            //timer = setInterval('update()', 5000);
         });
 }
 
 function postprocess() {
     $('a').removeClass('selected');
     $('a[href="' + current_highlight + '"]').addClass('selected');
-    $('input').focus(function() {
-            clearInterval(timer);
-            update_status('paused');
-        });
+    // $('input').focus(function() {
+    //         clearInterval(timer);
+    //         update_status('paused');
+    //     });
     $('form.confirm').submit(function() {
             return confirm("Are you sure? This object cannot be recovered " +
                            "after deletion.");
         });
+    $('div.section h2, div.section-hidden h2').click(function() {
+            $(this).next().toggle(100);
+        });
 }
 
 function with_reqs(reqs, acc, fun) {
@@ -144,7 +147,7 @@ function format(template, json) {
         var tmpl = new EJS({url: '/js/tmpl/' + template + '.ejs'});
         return tmpl.render(json);
     } catch (err) {
-        clearInterval(timer);
+        //clearInterval(timer);
         debug(err['name'] + ": " + err['message']);
     }
 }
@@ -157,8 +160,8 @@ function update_status(status, datetime) {
         text = "Warning: server reported busy at " + datetime;
     else if (status == 'error')
         text = "Error: could not connect to server at " + datetime;
-    else if (status == 'paused')
-        text = "Updating halted due to form interaction.";
+    //else if (status == 'paused')
+    //    text = "Updating halted due to form interaction.";
 
     var html = format('status', {status: status, text: text});
     replace_content('status', html);
@@ -185,7 +188,7 @@ function with_req(path, fun) {
             }
             else {
                 debug("Got response code " + req.status);
-                clearInterval(timer);
+                //clearInterval(timer);
             }
         }
     };

deps/rabbitmq_management/priv/www/js/tmpl/connection.ejs

@@ -1,5 +1,8 @@
 <h1>Connection <%= connection.peer_address %>:<%= connection.peer_port %></h1>
 
+<div class="section">
+<h2>Overview</h2>
+<div>
 <div class="highlight">
   Receiving
   <strong><%= fmt_bytes(connection.recv_oct_rate) %>/s</strong>
@@ -11,8 +14,6 @@
   <strong><%= fmt_bytes(connection.send_oct_rate) %>/s</strong>
   (<%= fmt_bytes(connection.send_oct) %> total)
 </div>
-
-<h2>Overview</h2>
 <table class="facts">
  <tr><th>Channels</th><td><%= connection.channels %></td></tr>
  <tr><th>Vhost</th><td><%= connection.vhost %></td></tr>
@@ -20,6 +21,12 @@
  <tr><th>State</th><td><%= connection.state %></td></tr>
  <tr><th>Timeout</th><td><%= connection.timeout %></td></tr>
 </table>
+</div>
+</div>
 
+<div class="section-hidden">
 <h2>Client Library</h2>
+<div>
 <%= format('table', {'table': connection.client_properties}) %>
+</div>
+</div>

deps/rabbitmq_management/priv/www/js/tmpl/user.ejs

@@ -1,5 +1,11 @@
 <h1>User: <%= user %></h1>
+
+<div class="section-hidden">
+<h2>Delete this user</h2>
+<div>
 <form action="#/users" method="delete" class="confirm">
 <input type="hidden" id="username" value="<%= user %>"/>
 <input type="submit" value="Delete this user"/>
 </form>
+</div>
+</div>

deps/rabbitmq_management/priv/www/js/tmpl/users.ejs

@@ -15,5 +15,9 @@
  </tbody>
 </table>
 
+<div class="section-hidden">
 <h2>Add a new user</h2>
+<div>
 <%= format('user-form', {}) %>
+</div>
+</div>

deps/rabbitmq_management/priv/www/js/tmpl/vhost.ejs

@@ -1,5 +1,11 @@
 <h1>Virtual Host: <%= vhost %></h1>
+
+<div class="section-hidden">
+<h2>Delete this vhost</h2>
+<div>
 <form action="#/vhosts" method="delete" class="confirm">
 <input type="hidden" id="name" value="<%= vhost %>"/>
 <input type="submit" value="Delete this virtual host"/>
 </form>
+</div>
+</div>

deps/rabbitmq_management/priv/www/js/tmpl/vhosts.ejs

@@ -15,5 +15,9 @@
  </tbody>
 </table>
 
+<div class="section-hidden">
 <h2>Add a new virtual host</h2>
+<div>
 <%= format('vhost-form', {}) %>
+</div>
+</div>