extra info for collections + css

html/admin/css/collectionView.css

@@ -11,3 +11,7 @@
   width: 250px;
   height: 250px;
 }
+
+#tab-content-collection-info {
+  min-height: 200px !important;
+}

html/admin/css/modal.css

@@ -57,3 +57,68 @@
   padding-top: 3px;
   padding-bottom: 3px;
 }
+
+.collectionInfoTh {
+  width: 320px;
+}
+
+.collectionInfoTh2 {
+  text-align:left;
+  width: 150px;
+}
+
+#figures table {
+  padding: 3px;
+  text-align: left;
+  min-width: 200px;
+  margin-top: 0px;
+  margin-left: 0;
+  margin-right: 0;
+  float:left;
+/*
+  border-collapse: separate !important; 
+  border-spacing: 0 6px !important;
+*/
+}
+
+#figures1, #figures2 {
+  margin-bottom: 20px;
+  width: 255px;
+}
+
+#figures2 {
+  margin-left: 20px !important;
+}
+
+#figures3 {
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.figuresHeader {
+  background-image: -moz-linear-gradient(center top , #F3EFEC, #EBE7E3) !important;
+  border-bottom: 1px solid #C1BDBA;
+}
+
+#collectionIndexTable {
+  margin-left: 0;
+  width: 100%;
+}
+/*
+.figuresFirst {
+  background-color: #F4F4F4 !important;
+}
+
+#figures table .modal-text {
+  margin-bottom: 5px;
+  background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
+  background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
+  background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
+  background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
+  background-image: linear-gradient(top, #ffffff, #f5f5f5);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
+  padding: 0 !important;
+}
+
+

html/admin/js/collections/arangoCollections.js

@@ -150,7 +150,24 @@ window.arangoCollections = Backbone.Collection.extend({
 
         return result;
       },
-
+      getIndex: function (id) {
+        var data2;
+        $.ajax({
+          type: "GET",
+          cache: false,
+          url: "/_api/index/?collection=" + id,
+          contentType: "application/json",
+          processData: false,
+          async: false,
+          success: function(data) {
+            data2 = data;
+          },
+          error: function(data) {
+            data2 = data;
+          }
+        });
+        return data2;
+      },
       getProperties: function (id) {
         var data2;
         $.ajax({
@@ -187,6 +204,24 @@ window.arangoCollections = Backbone.Collection.extend({
         });
         return data2;
       },
+      getRevision: function (id) {
+        var data2;
+        $.ajax({
+          type: "GET",
+          cache: false,
+          url: "/_api/collection/" + id + "/revision",
+          contentType: "application/json",
+          processData: false,
+          async: false,
+          success: function(data) {
+            data2 = data;
+          },
+          error: function(data) {
+            data2 = data;
+          }
+        });
+        return data2;
+      },
       checkCollectionName: function (name) {
       },
       newCollection: function (collName, wfs, isSystem, journalSize, collType) {

html/admin/js/templates/collectionInfoView.ejs

@@ -1,56 +1,82 @@
 <div id="show-collection" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-    <h3>Collection Info</h3>
+    <h3 id="show-collection-name">Collection Info</h3>
   </div>
+	
   <div class="modal-body">
-    <div class="modal-body-left">
-      <div style="height: 30px"/>
-      <table id="collectionInfoTable">
-        <tr>
-          <th class="collectionInfoTh">Name:</th>
-          <th class="collectionInfoTh"><div id="show-collection-name" class="modal-text"/></th>
-        </tr>
-        <tr id="collectionSizeBox" style="display:none">
-          <th class="collectionInfoTh">Journal size:</th>
-          <th class="collectionInfoTh"><div id="show-collection-size" class="modal-text"/></th>
-          <th class="tooltipInfoTh"><a class="modalInfoTooltips" title="The maximal size of a journal or datafile (in MB). Must be at least 1."><i class="icon-info-sign"></i></a></th>
-        </tr>
-        <tr id="collectionSyncBox" style="display:none">
-          <th class="collectionInfoTh">Sync:</th>
-          <th class="collectionInfoTh">
-            <div id="show-collection-sync" class="modal-text"/>
-          </th> 
-          <th class="tooltipInfoTh"><a class="modalInfoTooltips" title="Synchronise to disk before returning from a create or update of a document."><i class="icon-info-sign"></i></a></th>
-        </tr> 
 
-        <tr>
+    <ul id="infoTab" class="nav nav-tabs">
-          <th class="collectionInfoTh">ID:</th>
+      <li class="active"><a href="#info" data-toggle="tab">Info</a></li>
-          <th class="collectionInfoTh">
+      <li><a href="#figures" data-toggle="tab">Figures</a></li>
-            <div id="show-collection-id" class="modal-text"/>
+      <li><a href="#index" data-toggle="tab">Index</a></li>
-          <th>
+    </ul>
-        </tr>
 
-        <tr>
+    <div class="tab-content" id="tab-content-collection-info">
-          <th class="collectionInfoTh">Type:</th> 
+      
-          <th class="collectionInfoTh">
+			<div class="tab-pane active" id="info">
-            <div id="show-collection-type" class="modal-text"/>
+        
-          </th>
+        <table id="collectionInfoTable">
-        </tr>
+          <tr id="collectionSizeBox" style="display:none">
+            <th class="collectionInfoTh2">Journal size (MB):</th>
+            <th class="collectionInfoTh"><div id="show-collection-size" class="modal-text"/></th>
+            <th class="tooltipInfoTh"><a class="modalInfoTooltips" title="The maximal size of a journal or datafile (in MB). Must be at least 1."><i class="icon-info-sign"></i></a></th>
+          </tr>
+          <tr id="collectionSyncBox" style="display:none">
+            <th class="collectionInfoTh2">Wait for sync:</th>
+            <th class="collectionInfoTh">
+                <div id="show-collection-sync" class="modal-text"/>
+            </th> 
+            <th class="tooltipInfoTh"><a class="modalInfoTooltips" title="Synchronise to disk before returning from a create or update of a document."><i class="icon-info-sign"></i></a></th>
+          </tr> 
 
-        <tr>
+          <tr>
-          <th class="collectionInfoTh">Status:</th>
+            <th class="collectionInfoTh2">ID:</th>
-          <th class="collectionInfoTh">
+            <th class="collectionInfoTh">
-            <div id="show-collection-status" class="modal-text"/>
+              <div id="show-collection-id" class="modal-text"/>
-          </th>
+            <th>
-        </tr>
+          </tr>
-      </table>
+         
-    </div>
+          <tr id="collectionRevBox" style="display:none">
-    <div id="pieChart" class="modal-body-right">
+            <th class="collectionInfoTh2">Revision:</th>
-      <svg class="svgFigures"/>
+            <th class="collectionInfoTh">
-    </div>
+              <div id="show-collection-rev" class="modal-text"/>
+            </th>
+          </tr>
+
+          <tr>
+            <th class="collectionInfoTh2">Type:</th> 
+            <th class="collectionInfoTh">
+              <div id="show-collection-type" class="modal-text"/>
+            </th>
+          </tr>
+
+          <tr>
+            <th class="collectionInfoTh2">Status:</th>
+            <th class="collectionInfoTh">
+              <div id="show-collection-status" class="modal-text"/>
+            </th>
+          </tr>
+        </table>
+        
+      </div>
+
+			<div class="tab-pane" id="figures">
+			</div>
+					
+			<div class="tab-pane" id="index">
+        <table id="collectionIndexTable">
+          <tr class="figuresHeader">
+            <th class="collectionInfoTh">ID</th>
+            <th class="collectionInfoTh">Type</th>
+            <th class="collectionInfoTh">Unique</th>
+            <th class="collectionInfoTh">Field</th>
+          </tr>
+        </table>
+			</div>
+
+	  </div>
   </div>
   <div id="colFooter" class="modal-footer">
   </div>
 </div>
-

html/admin/js/templates/collectionView.ejs

@@ -15,7 +15,7 @@
         <th><a class="modalTooltips" title="The maximal size of a journal or datafile (in MB). Must be at least 1."><i class="icon-info-sign"></i></a></th>
       </tr>
       <tr id="collectionSyncBox" style="display:none">
-        <th class="collectionTh">Sync:</th>
+        <th class="collectionTh">Wait for sync:</th>
         <th class="collectionTh">
           <select id="change-collection-sync">
             <option value="false">No</option>

html/admin/js/views/collectionInfoView.js

@@ -15,14 +15,19 @@ var collectionInfoView = Backbone.View.extend({
     $('#show-collection').modal('show');
     $('#show-collection').on('hidden', function () {
     });
-    $('#show-collection').on('shown', function () {
-      $('#show-collection-name').focus();
-    });
     this.fillModal();
+
     $('.modalInfoTooltips').tooltip({
-      placement: "right"
+      placement: "left"
     });
 
+    $('#infoTab a').click(function (e) {
+      e.preventDefault();
+      $(this).tab('show');
+      console.log(this);
+    })
+
+
     return this;
   },
   events: {
@@ -51,18 +56,14 @@ var collectionInfoView = Backbone.View.extend({
     $('#show-collection-type').text(this.myCollection.type);
     $('#show-collection-status').text(this.myCollection.status);
 
-    if (this.myCollection.status === 'unloaded') {
+    if (this.myCollection.status === 'loaded') {
-      $('#colFooter').append(
-        '<div>For more information, collection has to be loaded</div>'
-      );
-      $('#collectionSizeBox').hide();
-      $('#collectionSyncBox').hide();
-    }
-    else if (this.myCollection.status === 'loaded') {
       this.data = window.arangoCollectionsStore.getFigures(this.options.colId, true);
+      this.revision = window.arangoCollectionsStore.getRevision(this.options.colId, true);
+      this.properties = window.arangoCollectionsStore.getProperties(this.options.colId, true);
+      this.index = window.arangoCollectionsStore.getIndex(this.options.colId, true);
       this.fillLoadedModal(this.data);
-      this.convertFigures(this.data);
+      //this.convertFigures(this.data);
-      this.renderFigures();
+      //this.renderFigures();
     }
   },
   renderFigures: function () {
@@ -102,9 +103,89 @@ var collectionInfoView = Backbone.View.extend({
       values: collValues
     }];
   },
+  appendFigures: function () {
+    cssClass = 'modal-text';
+
+    if (this.data) {
+      console.log(this.data);
+      $('#figures').append(
+        '<table id="figures1">'+
+          '<tr class="figuresHeader">'+
+            '<th class="">Type</th>'+
+            '<th>Count</th>'+
+            '<th>Filesize (MB)</th>'+
+          '</tr>'+
+          '<tr>'+
+            '<th class="'+cssClass+'">Datafiles</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.datafiles.count+'</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.datafiles.fileSize / 1024 / 1024 +'</th>'+
+          '</tr>'+
+          '<tr>'+
+            '<th class="'+cssClass+'">Journals</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.journals.count+'</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.journals.fileSize / 1024 / 1024 +'</th>'+
+          '</tr>'+
+        '</table>'+
+
+        '<table id="figures2">'+
+          '<tr class="figuresHeader">'+
+            '<th>Type</th>'+
+            '<th>Count</th>'+
+          '</tr>'+
+          '<tr>'+
+            '<th class="'+cssClass+'">Shapes</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.shapes.count+'</th>'+
+          '</tr>'+
+          '<tr>'+
+            '<th class="'+cssClass+'">Attributes</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.attributes.count+'</th>'+
+          '</tr>'+
+        '</table>'+
+
+        '<table id="figures3">'+
+          '<tr class="figuresHeader">'+
+            '<th>Type</th>'+
+            '<th>Count</th>'+
+            '<th>Size</th>'+
+            '<th>Deletion</th>'+
+          '</tr>'+
+          '<tr>'+
+            '<th class="'+cssClass+'">Alive</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.alive.count+'</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.alive.size+'</th>'+
+            '<th class="'+cssClass+'"> - </th>'+
+          '</tr>'+
+          '<tr>'+
+            '<th class="'+cssClass+'">Dead</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.dead.count+'</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.dead.size+'</th>'+
+            '<th class="'+cssClass+'">'+this.data.figures.dead.deletion+'</th>'+
+          '</tr>'+
+        '</table>'
+
+      );
+    }
+  },
+  appendIndex: function () {
+    cssClass = 'collectionInfoTh modal-text';
+    if (this.index) {
+      $.each(this.index.indexes, function(k,v) {
+        $('#collectionIndexTable').append(
+          '<tr>'+
+            '<th class='+JSON.stringify(cssClass)+'>'+v.id+'</th>'+
+            '<th class='+JSON.stringify(cssClass)+'>'+v.type+'</th>'+
+            '<th class='+JSON.stringify(cssClass)+'>'+v.unique+'</th>'+
+            '<th class='+JSON.stringify(cssClass)+'>'+JSON.stringify(v.fields)+'</th>'+
+          '</tr>'
+        );
+      });
+    }
+  },
   fillLoadedModal: function (data) {
+    console.log(this.index);
     $('#collectionSizeBox').show();
     $('#collectionSyncBox').show();
+    $('#collectionRevBox').show();
     if (data.waitForSync === false) {
       $('#show-collection-sync').text('false');
     }
@@ -113,6 +194,11 @@ var collectionInfoView = Backbone.View.extend({
     }
     var calculatedSize = data.journalSize / 1024 / 1024;
     $('#show-collection-size').text(calculatedSize);
+    $('#show-collection-rev').text(this.revision.revision);
+
+    this.appendIndex();
+    this.appendFigures();
+
     $('#show-collection').modal('show');
   },
   getCollectionId: function () {