Make the tables nicer, Name column wider

cloudamqp · Jan 8, 2024 · d4d3ad3 · d4d3ad3
1 parent 585e26f
commit d4d3ad3
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 29 deletions.
diff --git a/static/js/queues.js b/static/js/queues.js
@@ -89,7 +89,7 @@ const queuesTable = Table.renderTable('table', tableOptions, function (tr, item,
     checkbox.setAttribute('data-vhost', encodeURIComponent(item.vhost))
     checkbox.setAttribute('data-name', encodeURIComponent(item.name))
     checkbox.addEventListener('change', rowCheckboxChanged)
-    Table.renderCell(tr, 0, checkbox)
+    Table.renderCell(tr, 0, checkbox, 'checkbox')
     Table.renderCell(tr, 1, item.vhost)
     Table.renderCell(tr, 2, queueLink)
     Table.renderCell(tr, 3, features, 'center')

diff --git a/static/js/table.js b/static/js/table.js
@@ -48,12 +48,13 @@ function renderTable (id, options = {}, renderRow) {
     const items = dataSource.items
     const totalCount = dataSource.totalCount
     document.getElementById(countId).textContent = totalCount
-    const t = document.getElementById(id).tBodies[0]
+    const table = document.getElementById(id)
+    const t = table.tBodies[0]
     if (!Array.isArray(items) || items.length === 0) {
       t.textContent = ''
       const tr = t.appendChild(document.createElement('tr'))
       const td = tr.appendChild(document.createElement('td'))
-      td.colSpan = 100
+      td.colSpan = Array.from(table.tHead.rows[0].children).reduce((sum, item) => sum + item.colSpan, 0)
       td.classList.add('center')
       td.textContent = 'Nope, nothing to see here.'
       return

diff --git a/static/main.css b/static/main.css
@@ -494,14 +494,11 @@ footer .logo {
   font-weight: normal;
   border-bottom: 1px solid var(--font-color-dark);
   padding: .75rem 1.15rem .5rem .75rem;
-  min-width: 10px;
-  max-width: 500px;
-  word-break: keep-all;
-  white-space: nowrap;
 }
 
-.table th:first-child {
-  text-align: left;
+.table td.checkbox {
+  width: 1px;
+  max-width: 10px;
 }
 
 .table th[data-sort-key] {
@@ -536,18 +533,9 @@ footer .logo {
   border-top: 1px solid #ddd;
   padding: .75rem 1.55rem .5rem .55rem;
   color: var(--font-color-light);
-  max-width: 10vw;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: keep-all;
   white-space: nowrap;
 }
 
-.table tbody td:hover {
-  overflow: visible;
-  background-color: inherit;
-}
-
 .table tbody a {
   background-color: inherit;
   position: relative;

diff --git a/views/queues.ecr b/views/queues.ecr
@@ -22,7 +22,7 @@
             <thead>
               <tr>
                 <th><input type="checkbox" id="multi-check-all"></th>
-                <th data-sort-key="vhost">Virtual host</th>
+                <th data-sort-key="vhost" class="left">Virtual host</th>
                 <th data-sort-key="name" class="left">Name</th>
                 <th>Features</th>
                 <th data-sort-key="policy">Policy</th>

diff --git a/views/shovels.ecr b/views/shovels.ecr
@@ -14,19 +14,14 @@
           <table id="table" class="table">
             <thead>
               <tr>
-                <td></td>
-                <td></td>
+                <td colspan="2"></td>
                 <td colspan="3" class="table-multihead">Source</td>
                 <td colspan="2" class="table-multihead">Destination</td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
+                <td colspan="5"></td>
               </tr>
               <tr>
                 <th>Virtual host</th>
-                <th data-sort-key="name">Name</th>
+                <th class="left" data-sort-key="name">Name</th>
                 <th class="left">Uri</th>
                 <th class="left">Endpoint</th>
                 <th class="left table-multihead">Prefetch</th>

diff --git a/views/users.ecr b/views/users.ecr
@@ -13,7 +13,7 @@
         <table id="users" class="table">
           <thead>
             <tr>
-              <th data-sort-key="name">Name</th>
+              <th data-sort-key="name" class="left">Name</th>
               <th data-sort-key="tags" class="left">Tags</th>
               <th class="left">Can access virtual hosts</th>
               <th>Has password</th>

diff --git a/views/vhosts.ecr b/views/vhosts.ecr
@@ -14,7 +14,7 @@
           <table id="table" class="table">
             <thead>
               <tr>
-                <th data-sort-key="name">Name</th>
+                <th data-sort-key="name" class="left">Name</th>
                 <th class="left">Users</th>
                 <th data-sort-key="ready">Ready</th>
                 <th data-sort-key="unacked">Unacked</th>