Lots of visual tweaks to try to make e2e bindings comprehensible.

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

@@ -92,4 +92,8 @@ input[type=submit], button { padding: 8px; background-color: #aaf; border-radius
 
 h3 { padding: 0 0 2px 0; margin: 1em 0 1em 0; font-size: 1em; border-bottom: 1px solid #E4E4E4; font-weight: normal; }
 
+table.bindings { margin-bottom: 2em; }
+td.binding-endpoint span.object { border: 2px solid #bbb; padding: 10px; border-radius: 10px; -moz-border-radius: 10px; }
+td.binding-endpoint span.arrow { font-size: 200%; }
+
 #scratch { display: none; }

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

@@ -2,47 +2,69 @@
   <h2>Add binding</h2>
   <div>
     <form action="#/bindings" method="post">
-      <input type="hidden" name="vhost" value="<%= parent.vhost %>"/>
-<% if (mode == 'queue') { %>
-      <input type="hidden" name="destination" value="<%= parent.name %>"/>
-<% } else { %>
-      <input type="hidden" name="source" value="<%= parent.name %>"/>
-<% } %>
-      <table class="form">
-<% if (mode == 'queue') { %>
+      <table class="bindings">
         <tr>
-          <th>
-            <label>From exchange:</label>
-          </th>
-          <td>
-            <input type="hidden" name="destination_type" value="q"/>
-            <input type="text" name="source" value=""/>
+<% if (mode != 'queue') { %>
+          <td class="binding-endpoint">
+            <span class="object"><%= parent.name %></span>
+            <span class="arrow">&rarr;</span>
+          </td>
+<% } %>
+          <td>
+            <input type="hidden" name="vhost" value="<%= parent.vhost %>"/>
+<% if (mode == 'queue') { %>
+            <input type="hidden" name="destination" value="<%= parent.name %>"/>
+<% } else { %>
+            <input type="hidden" name="source" value="<%= parent.name %>"/>
+<% } %>
+            <table class="form">
+<% if (mode == 'queue') { %>
+              <tr>
+                <th>
+                  <label>Exchange:</label>
+                </th>
+                <td>
+                  <input type="hidden" name="destination_type" value="q"/>
+                  <input type="text" name="source" value=""/>
+                </td>
+              </tr>
+<% } else { %>
+              <tr>
+                <th>
+                  <select name="destination_type" class="narrow">
+                    <option value="e">exchange</option>
+                    <option value="q" selected="selected">queue</option>
+                  </select>:
+                </th>
+                <td>
+                  <input type="text" name="destination" value=""/>
+                </td>
+              </tr>
+<% } %>
+              <tr>
+                <th><label>Routing Key:</label></th>
+                <td><input type="text" name="routing_key" value=""/></td>
+              </tr>
+              <tr>
+                <th><label>Arguments:</label></th>
+                <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"><%= parent.name %></span>
           </td>
-        </tr>
-<% } else { %>
-        <tr>
-          <th>
-            To
-            <select name="destination_type" class="narrow">
-              <option value="e">exchange</option>
-              <option value="q" selected="selected">queue</option>
-            </select>:
-          </th>
-          <td>
-            <input type="text" name="destination" value=""/>
-          </td>
-        </tr>
 <% } %>
-        <tr>
-          <th><label>Routing Key:</label></th>
-          <td><input type="text" name="routing_key" value=""/></td>
         </tr>
         <tr>
-          <th><label>Arguments:</label></th>
-          <td><span class="multifield" id="arguments"></span></td>
+          <td>
+            <input type="submit" value="Bind"/>
+          </td>
+          <td></td>
         </tr>
       </table>
-      <input type="submit" value="Bind"/>
     </form>
   </div>
 </div>

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

@@ -1,12 +1,11 @@
 <% if (bindings.length > 0) { %>
-    <table class="list">
+    <table class="list bindings">
       <thead>
         <tr>
 <% if (mode == 'exchange_source') { %>
-          <th>To Exchange</th>
-          <th>To Queue</th>
+          <th>To</th>
 <% } else { %>
-          <th>From Exchange</th>
+          <th>From</th>
 <% } %>
           <th>Routing Key</th>
           <th>Arguments</th>
@@ -20,13 +19,20 @@
         %>
            <tr<%= alt_rows(i)%>>
 <% if (mode == 'queue' || mode == 'exchange_destination') { %>
-             <td><%= link_exchange(binding.vhost, binding.source) %></td>
+             <td>
+               <%= link_exchange(binding.vhost, binding.source) %>
+               <sub>Exchange</sub>
+             </td>
 <% } else if (binding.destination_type == 'exchange') { %>
-             <td><%= link_exchange(binding.vhost, binding.destination) %></td>
-             <td></td>
+             <td>
+               <%= link_exchange(binding.vhost, binding.destination) %>
+               <sub>Exchange</sub>
+             </td>
 <% } else { %>
-             <td></td>
-             <td><%= link_queue(binding.vhost, binding.destination) %></td>
+             <td>
+               <%= link_queue(binding.vhost, binding.destination) %>
+               <sub>Queue</sub>
+             </td>
 <% } %>
              <td><%= binding.routing_key %></td>
              <td><%= fmt_table_short(binding.arguments) %></td>

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

@@ -19,10 +19,32 @@
 <div class="section">
   <h2>Bindings</h2>
   <div class="updatable">
-    <h3>From <b><%= exchange.name %></b></h3>
-    <%= format('bindings', {'mode': 'exchange_source', 'bindings': bindings_source}) %>
-    <h3>To <b><%= exchange.name %></b></h3>
-    <%= format('bindings', {'mode': 'exchange_destination', 'bindings': bindings_destination}) %>
+    <% if (bindings_destination.length > 0) { %>
+      <h3>Incoming to <b><%= fmt_exchange(exchange.name) %></b></h3>
+      <table class="bindings">
+        <tr>
+          <td>
+            <%= format('bindings', {'mode': 'exchange_destination', 'bindings': bindings_destination}) %>
+          </td>
+          <td class="binding-endpoint">
+            <span class="arrow">&rarr;</span>
+            <span class="object"><%= exchange.name %></span>
+          </td>
+        </tr>
+      </table>
+    <% } %>
+    <h3>Outgoing from <b><%= fmt_exchange(exchange.name) %></b></h3>
+    <table class="bindings">
+      <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>
   </div>
 </div>
 

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

@@ -51,7 +51,18 @@
 <div class="section">
   <h2>Bindings</h2>
   <div class="updatable">
-    <%= format('bindings', {'mode': 'queue', 'bindings': bindings}) %>
+    <h3>Incoming to <b><%= queue.name %></b></h3>
+    <table class="bindings">
+      <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>
   </div>
 </div>