From c7ee1a645f2a6f247cb76dce2fc1096c7490b355 Mon Sep 17 00:00:00 2001
From: Heiko Kernbach <heiko@arangodb.com>
Date: Mon, 25 Feb 2013 16:59:04 +0100
Subject: [PATCH] new dashboard features, documentstable-width bugfix

---
 frontend/css/dashboardView.css          | 11 +++-
 frontend/js/routers/router.js           | 27 +++++----
 frontend/js/templates/dashboardView.ejs |  5 +-
 frontend/js/views/dashboardView.js      | 79 +++++++++++++++++++++++++
 frontend/js/views/documentsView.js      |  2 +-
 5 files changed, 111 insertions(+), 13 deletions(-)

diff --git a/frontend/css/dashboardView.css b/frontend/css/dashboardView.css
index 8b00bf97bf..5e44c1db52 100644
--- a/frontend/css/dashboardView.css
+++ b/frontend/css/dashboardView.css
@@ -8,7 +8,8 @@
 
 .dashboardBox {
   min-height: 300px;
-  width: 100%;
+  width: 940px;
+  border: 1px solid black;
   padding-top: 10px;
   margin-bottom: 20px;
   background-color: rgba(0, 0, 0, 0.05);
@@ -19,4 +20,12 @@
   margin-top: 10px;
 }
 
+.leftBox {
+  width: 50%;
+  float: left;
+}
 
+.rightBox {
+  width: 50%;
+  float: left;
+}
diff --git a/frontend/js/routers/router.js b/frontend/js/routers/router.js
index 0524d0e522..cdcceed680 100644
--- a/frontend/js/routers/router.js
+++ b/frontend/js/routers/router.js
@@ -17,7 +17,6 @@ $(document).ready(function() {
     },
     initialize: function () {
       window.arangoCollectionsStore = new window.arangoCollections();
-
       window.arangoDocumentsStore = new window.arangoDocuments();
       window.arangoDocumentStore = new window.arangoDocument();
 
@@ -137,14 +136,22 @@ $(document).ready(function() {
       this.naviView.selectMenuItem('logs-menu');
     },
     dashboard: function() {
-      this.dashboardView = new window.dashboardView();
-      this.dashboardView.render();
-      this.naviView.selectMenuItem('dashboard-menu');
-    }
+      var self = this;
+      window.arangoCollectionsStore.fetch({
+        success: function () {
+          window.dashboardView = new window.dashboardView({
+            collection: window.arangoCollectionsStore
+          });
+          window.dashboardView.render();
+          self.naviView.selectMenuItem('dashboard-menu');
+        }
+      });
+
+      }
+
+    });
+
+    window.App = new window.Router();
+    Backbone.history.start();
 
   });
-
-  window.App = new window.Router();
-  Backbone.history.start();
-
-});
diff --git a/frontend/js/templates/dashboardView.ejs b/frontend/js/templates/dashboardView.ejs
index 4b72917c20..97428ef62d 100644
--- a/frontend/js/templates/dashboardView.ejs
+++ b/frontend/js/templates/dashboardView.ejs
@@ -1,6 +1,9 @@
 <div id="dashboardCollections" class="dashboardBox">
   <div class="dashboardHeader">Collections</div>
-  <div id="dashboardCollectionsContent"></div>
+  <div id="dashboardCollectionsContent">
+    <div id="dashboardCollectionsText" class="leftBox"> L </div>
+    <div id="dashboardCollectionsGraph" class="rightBox"><svg style="height:300px;width:450px"></div>
+  </div>
 </div>
 
 
diff --git a/frontend/js/views/dashboardView.js b/frontend/js/views/dashboardView.js
index 7f2a675ade..93676e4ba7 100644
--- a/frontend/js/views/dashboardView.js
+++ b/frontend/js/views/dashboardView.js
@@ -1,5 +1,13 @@
 var dashboardView = Backbone.View.extend({
   el: '#content',
+
+  collectionStats: {
+    totalCollections: 0,
+    loadedCollections: 0,
+    unloadedCollections: 0,
+    systemCollections: 0
+  },
+
   init: function () {
   },
 
@@ -7,7 +15,78 @@ var dashboardView = Backbone.View.extend({
 
   render: function() {
     $(this.el).html(this.template.text);
+    this.updateCollectionsStats();
+    this.renderCollections();
     return this;
+  },
+  renderCollections: function () {
+    var self = this;
+    nv.addGraph(function() {
+      var chart = nv.models.discreteBarChart()
+      .x(function(d) { return d.label })
+      .y(function(d) { return d.value })
+      .staggerLabels(false)
+      .tooltips(true)
+      .showValues(false);
+
+      d3.select("#dashboardCollectionsGraph svg")
+      .datum(self.formatCollectionsStats())
+      .transition().duration(1200)
+      .call(chart);
+
+      return chart;
+    });
+
+  },
+  updateCollectionsStats: function () {
+    var self = this;
+    this.collectionStats.loadedCollections = 0;
+    this.collectionStats.unloadedCollections = 0;
+    this.collectionStats.totalCollections = this.collection.length;
+
+    this.collection.each(function (arango_collection) {
+      if (arango_collection.get('status') === 'loaded') {
+        self.collectionStats.loadedCollections++;
+      }
+      if (arango_collection.get('status') === 'unloaded') {
+        self.collectionStats.unloadedCollections++;
+      }
+      if (arango_collection.get('name').substr(0,1) === "_") {
+        self.collectionStats.systemCollections++;
+      }
+    });
+    console.log(this.collectionStats);
+  },
+  formatCollectionsStats: function () {
+    return [{
+      key: "Collection Status",
+      values: [
+        {
+          "label" : "total",
+          "value" : this.collectionStats.totalCollections
+        },
+        {
+          "label" : "loaded",
+          "value" : this.collectionStats.loadedCollections
+        },
+        {
+          "label" : "unloaded",
+          "value" : this.collectionStats.unloadedCollections
+        },
+        {
+          "label" : "system",
+          "value" : this.collectionStats.systemCollections
+        }
+      ]
+    }]
+  },
+
+  updateSystem: function () {
+
+  },
+
+  updateClient: function () {
+
   }
 
 });
diff --git a/frontend/js/views/documentsView.js b/frontend/js/views/documentsView.js
index e3742d8d30..1043df48db 100644
--- a/frontend/js/views/documentsView.js
+++ b/frontend/js/views/documentsView.js
@@ -94,7 +94,7 @@ var documentsView = Backbone.View.extend({
       "aoColumns": [
         { "sClass":"read_only leftCell docleftico", "bSortable": false, "sWidth":"30px"},
         { "sClass":"read_only arangoTooltip","bSortable": false},
-        { "bSortable": false, "sClass": "cuttedContent rightCell", "sWidth": "500px"}
+        { "bSortable": false, "sClass": "cuttedContent rightCell"}
       ],
       "oLanguage": { "sEmptyTable": "No documents"}
     });