Lay out the semi-graphical diagrams vertically rather than horizontally. Remove some text noise that is not helping. Show default exchange bindings in a more minimal way.

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

@@ -164,9 +164,11 @@ acronym.warning { background: #daa; }
 
 acronym.type { background: none; color: inherit; padding: 0; border-bottom: 1px dotted #ddd; cursor: default; }
 
-table.bindings { margin-bottom: 1em; }
-td.binding-endpoint span.object { border: 1px solid #bbb; padding: 10px; border-radius: 10px; -moz-border-radius: 10px; }
-td.binding-endpoint span.arrow { font-size: 200%; }
+div.bindings-wrapper { display: inline-block; }
+div.bindings-wrapper table { margin: auto; }
+div.bindings-wrapper p { margin: 10px; text-align: center; }
+div.bindings-wrapper p span.object { border: 1px solid #bbb; padding: 10px; border-radius: 10px; -moz-border-radius: 10px; }
+div.bindings-wrapper p.arrow { font-size: 200%; }
 
 #footer { overflow: auto; width: 100%; }
 #footer-nav { padding-top: 5px; }

deps/rabbitmq_management/priv/www/js/tmpl/add-binding.ejs

@@ -1,14 +1,9 @@
-    <h3>Add binding</h3>
-    <form action="#/bindings" method="post">
-      <table class="bindings">
-        <tr>
-<% if (mode != 'queue') { %>
-          <td class="binding-endpoint">
-            <span class="object"><%= parent.name %></span>
-            <span class="arrow">&rarr;</span>
-          </td>
+<% if (mode == 'queue') { %>
+    <h3 style="padding-top: 20px;">Add binding to this queue</h3>
+<% } else { %>
+    <h3 style="padding-top: 20px;">Add binding from this exchange</h3>
 <% } %>
-          <td>
+    <form action="#/bindings" method="post">
             <input type="hidden" name="vhost" value="<%= fmt_string(parent.vhost) %>"/>
 <% if (mode == 'queue') { %>
             <input type="hidden" name="destination" value="<%= fmt_string(parent.name) %>"/>
@@ -19,7 +14,7 @@
 <% if (mode == 'queue') { %>
               <tr>
                 <th>
-                  <label>Exchange:</label>
+                  <label>From exchange:</label>
                 </th>
                 <td>
                   <input type="hidden" name="destination_type" value="q"/>
@@ -31,8 +26,8 @@
               <tr>
                 <th>
                   <select name="destination_type" class="narrow">
-                    <option value="e">exchange</option>
-                    <option value="q" selected="selected">queue</option>
+                    <option value="e">To exchange</option>
+                    <option value="q" selected="selected">To queue</option>
                   </select>:
                 </th>
                 <td>
@@ -50,19 +45,5 @@
                 <td><span class="multifield" id="arguments"></span></td>
               </tr>
             </table>
-          </td>
-<% if (mode == 'queue') { %>
-          <td class="binding-endpoint">
-            <span class="arrow">&rarr;</span>
-            <span class="object"><%= fmt_string(parent.name) %></span>
-          </td>
-<% } %>
-        </tr>
-        <tr>
-          <td>
-            <input type="submit" value="Bind"/>
-          </td>
-          <td></td>
-        </tr>
-      </table>
+      <input type="submit" value="Bind"/>
     </form>

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

@@ -1,6 +1,6 @@
 <%= maybe_truncate(bindings) %>
 <% if (bindings.length > 0) { %>
-    <table class="list bindings">
+    <table class="list updatable">
       <thead>
         <tr>
 <% if (mode == 'exchange_source') { %>
@@ -19,6 +19,11 @@
                var binding = bindings[i];
         %>
            <tr<%= alt_rows(i)%>>
+<% if (binding.source == '') { %>
+             <td colspan="4">
+               (Default exchange binding)
+             </td>
+<% } else { %>
 <% if (mode == 'queue' || mode == 'exchange_destination') { %>
              <td>
                <%= link_exchange(binding.vhost, binding.source) %>
@@ -38,7 +43,6 @@
              <td><%= fmt_string(binding.routing_key) %></td>
              <td><%= fmt_table_short(binding.arguments) %></td>
              <td class="c">
-<% if (binding.source != '') { %>
                <form action="#/bindings" method="delete" class="confirm">
                  <input type="hidden" name="vhost" value="<%= fmt_string(binding.vhost) %>"/>
                  <input type="hidden" name="source" value="<%= fmt_exchange_url(binding.source) %>"/>
@@ -47,12 +51,13 @@
                  <input type="hidden" name="properties_key" value="<%= fmt_string(binding.properties_key) %>"/>
                  <input type="submit" value="Unbind"/>
                </form>
-<% } %>
              </td>
+           <% } %>
            </tr>
            <% } %>
       </tbody>
     </table>
+
 <% } else { %>
   <p>... no bindings ...</p>
 <% } %>

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

@@ -65,35 +65,18 @@
     cannot be deleted.
   </p>
 <% } else { %>
+<div class="bindings-wrapper">
 <% if (bindings_destination.length > 0) { %>
-      <h3>Incoming to <b><%= fmt_exchange(exchange.name) %></b></h3>
-      <table class="bindings updatable">
-        <tr>
-          <td>
-            <%= format('bindings', {'mode': 'exchange_destination', 'bindings': bindings_destination}) %>
-          </td>
-          <td class="binding-endpoint">
-            <span class="arrow">&rarr;</span>
-            <span class="object"><%= fmt_exchange(exchange.name) %></span>
-          </td>
-        </tr>
-      </table>
+  <%= format('bindings', {'mode': 'exchange_destination', 'bindings': bindings_destination}) %>
+  <p class="arrow">&dArr;</p>
 <% } %>
-    <h3>Outgoing from <b><%= fmt_exchange(exchange.name) %></b></h3>
-    <table class="bindings updatable">
-      <tr>
-        <td class="binding-endpoint">
-          <span class="object"><%= fmt_exchange(exchange.name) %></span>
-          <span class="arrow">&rarr;</span>
-        </td>
-        <td>
-          <%= format('bindings', {'mode': 'exchange_source', 'bindings': bindings_source}) %>
-        </td>
-      </tr>
-    </table>
-<%= format('add-binding', {'mode': 'exchange_source', 'parent': exchange}) %>
+  <p><span class="object"><%= fmt_exchange(exchange.name) %></span></p>
+  <p class="arrow">&dArr;</p>
+  <%= format('bindings', {'mode': 'exchange_source', 'bindings': bindings_source}) %>
+</div>
+  <%= format('add-binding', {'mode': 'exchange_source', 'parent': exchange}) %>
 <% } %>
-  </div>
+</div>
 </div>
 
 <% if (!exchange.internal) { %>

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

@@ -119,21 +119,13 @@
 <div class="section-hidden">
   <h2>Bindings</h2>
   <div class="hider">
-    <h3>Incoming to <b><%= fmt_string(queue.name) %></b></h3>
-    <table class="bindings updatable">
-      <tr>
-        <td>
-          <%= format('bindings', {'mode': 'queue', 'bindings': bindings}) %>
-        </td>
-        <td class="binding-endpoint">
-          <span class="arrow">&rarr;</span>
-          <span class="object"><%= queue.name %></span>
-        </td>
-      </tr>
-    </table>
-
-<%= format('add-binding', {'mode': 'queue', 'parent': queue}) %>
+    <div class="bindings-wrapper">
+      <%= format('bindings', {'mode': 'queue', 'bindings': bindings}) %>
+      <p class="arrow">&dArr;</p>
+      <p><span class="object"><%= queue.name %></span></p>
 
+      <%= format('add-binding', {'mode': 'queue', 'parent': queue}) %>
+    </div>
   </div>
 </div>