Improve database listing page.

git-svn-id: https://svn.apache.org/repos/asf/incubator/couchdb/trunk@645171 13f79535-47bb-0310-9956-ffa450edef68

4 files changed, 32 insertions, 7 deletions

diff --git a/share/www/browse/index.html b/share/www/browse/index.html
index bc901dcf..63ef62e6 100644
--- a/share/www/browse/index.html
+++ b/share/www/browse/index.html
@@ -24,6 +24,7 @@ specific language governing permissions and limitations under the License.
     <script src="../script/jquery.dialog.js"></script>
     <script src="../script/couch.js"></script>
     <script src="../script/browse.js"></script>
+    <script src="../script/pprint.js"></script>
     <script>
       var page = new CouchIndexPage();
       $(document).ready(function() {
@@ -47,15 +48,16 @@ specific language governing permissions and limitations under the License.
         <thead>
           <tr>
             <th>Name</th>
-            <th>Number of Documents</th>
-            <th>Update Seq</th>
+            <th class="size">Size</th>
+            <th class="count">Number of Documents</th>
+            <th class="seq">Update Seq</th>
           </tr>
         </thead>
         <tbody class="content">
         </tbody>
         <tbody class="footer">
           <tr>
-            <td colspan="3"></td>
+            <td colspan="4"></td>
           </tr>
         </tbody>
       </table>
diff --git a/share/www/script/browse.js b/share/www/script/browse.js
index c1127608..927f110d 100644
--- a/share/www/script/browse.js
+++ b/share/www/script/browse.js
@@ -41,8 +41,9 @@ function CouchIndexPage() {
       var info = new CouchDB(dbName).info();
       $("#databases tbody.content").append(
         "<tr><th><a href='database.html?" + dbName + "'>" +
-        dbName + "</a></th><td>" + info.doc_count +"</td><td>" +
-        info.update_seq + "</td></tr>");
+        dbName + "</a></th><td class='size'>" + prettyPrintSize(info.size) +
+        "</td><td class='count'>" + info.doc_count +
+        "</td><td class='seq'>" + info.update_seq + "</td></tr>");
       $("#databases tbody tr:odd").addClass("odd");
       $("#databases tbody.footer tr td").text(allDbs.length + " database(s)");
     }
diff --git a/share/www/script/pprint.js b/share/www/script/pprint.js
index 981db0f2..1499a128 100644
--- a/share/www/script/pprint.js
+++ b/share/www/script/pprint.js
@@ -10,7 +10,7 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-/* JSON pretty printing */
+// JSON pretty printing
 
 function prettyPrintJSON(val, indent, linesep, depth) {
   indent = indent != null ? indent : 4;
@@ -58,3 +58,17 @@ function prettyPrintJSON(val, indent, linesep, depth) {
     }
   }
 }
+
+// File size pretty printing
+
+function prettyPrintSize(size) {
+  var jump = 512;
+  if (size < jump) return size + " bytes";
+  var units = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  var i = 0;
+  while (size >= jump && i < units.length) {
+    i += 1;
+    size /= 1024
+  }
+  return size.toFixed(1) + ' ' + units[i - 1];
+}
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index 37bf0c79..75ae2660 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -159,7 +159,8 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
 
 #footer { background: #ddd; border-top: 1px solid #bbb; color: #000;
   font-size: 80%; opacity: .7; padding: 5px 10px; position: absolute; right: 0;
-  bottom: 0; height: 10px; width: 190px; text-align: right;
+  bottom: 0; height: 1.3em; width: 190px; text-align: right;
+  white-space: nowrap;
 }
 #view { position: absolute; left: 0; right: 210px; top: 0; bottom: 0;
   height: 100%;
@@ -274,6 +275,13 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
 #viewcode.expanded label { background-position: 0 -96px; }
 #viewcode.expanded textarea, #viewcode.expanded div.bottom { display: block; }
 
+/* Database table */
+
+#databases thead th.size, #databases thead th.count, #databases thead th.seq,
+#databases tbody td.size, #databases tbody td.count, #databases tbody td.seq {
+  text-align: right;
+}
+
 /* Documents table */
 
 #documents thead th { width: 50%; }