Added a cascading unrender if clicking in Menu levels

js/apps/system/aardvark/frontend/js/views/clusterCollectionView.js

@@ -41,10 +41,16 @@
       });
     },
 
-    render: function(){
+    unrender: function() {
+      $(this.el).html("");
+      this.shardsView.unrender();
+    },
+
+    render: function() {
       $(this.el).html(this.template.render({
         collections: this.fakeData.collections
       }));
+      this.shardsView.unrender();
       return this;
     }
 

js/apps/system/aardvark/frontend/js/views/clusterCoordinatorView.js

@@ -32,6 +32,10 @@
       };
     },
 
+    unrender: function() {
+      $(this.el).html("");
+    },
+
     render: function() {
       $(this.el).html(this.template.render({
         coordinators: this.fakeData.coordinators

js/apps/system/aardvark/frontend/js/views/clusterDatabaseView.js

@@ -39,10 +39,16 @@
       this.colView.render(id);
     },
 
+    unrender: function() {
+      $(this.el).html("");
+      this.colView.unrender();
+    },
+
     render: function(){
       $(this.el).html(this.template.render({
         databases: this.fakeData.databases
       }));
+      this.colView.unrender();
       return this;
     }
 

js/apps/system/aardvark/frontend/js/views/clusterOverviewView.js

@@ -34,11 +34,13 @@
     },
 
     loadDBServers: function() {
+      this.coordinatorView.unrender();
       this.serverView.render();
       this.render(true);
     },
 
     loadCoordinators: function() {
+      this.serverView.unrender();
       this.coordinatorView.render();
       this.render(true);
     },

js/apps/system/aardvark/frontend/js/views/clusterServerView.js

@@ -60,7 +60,15 @@
       this.render(true);
     },
 
+    unrender: function() {
+      $(this.el).html("");
+      this.dbView.unrender();
+    },
+
     render: function(minify){
+      if(!minify) {
+        this.dbView.unrender();
+      }
       $(this.el).html(this.template.render({
         minify: minify,
         servers: this.fakeData

js/apps/system/aardvark/frontend/js/views/clusterShardsView.js

@@ -29,7 +29,11 @@
       };
     },
 
-    render: function(){
+    unrender: function() {
+      $(this.el).html("");
+    },
+
+    render: function() {
       $(this.el).html(this.template.render({
         shards: this.fakeData.shards
       }));

js/apps/system/aardvark/test/karma/karma.conf.js

@@ -173,6 +173,7 @@ module.exports = function(karma) {
       'frontend/js/views/clusterDashboardView.js',
       'frontend/js/views/clusterOverviewView.js',
       'frontend/js/views/clusterServerView.js',
+      'frontend/js/views/clusterCoordinatorView.js',
       'frontend/js/views/clusterDatabaseView.js',
       'frontend/js/views/clusterCollectionView.js',
       'frontend/js/views/clusterShardsView.js',
@@ -232,6 +233,7 @@ module.exports = function(karma) {
       'test/specs/views/clusterDashboardViewSpec.js',
       'test/specs/views/clusterOverviewViewSpec.js',
       'test/specs/views/clusterServerViewSpec.js',
+      'test/specs/views/clusterCoordinatorViewSpec.js',
       'test/specs/views/clusterDatabaseViewSpec.js',
       'test/specs/views/clusterCollectionViewSpec.js',
       'test/specs/views/clusterShardsViewSpec.js',

js/apps/system/aardvark/test/specs/views/clusterCollectionViewSpec.js

@@ -13,7 +13,8 @@
       div.id = "clusterCollections"; 
       document.body.appendChild(div);
       shardsView = {
-        render: function(){}
+        render: function() {},
+        unrender: function() {}
       };
       spyOn(window, "ClusterShardsView").andReturn(shardsView);
       uiMatchers.define(this);
@@ -64,13 +65,15 @@
           people
         ];
         spyOn(shardsView, "render");
+        spyOn(shardsView, "unrender");
         view = new window.ClusterCollectionView();
         view.fakeData.collections = colls;
         view.render();
       });
 
-      it("should not render the server view", function() {
+      it("should not unrender the server view", function() {
         expect(shardsView.render).not.toHaveBeenCalled();
+        expect(shardsView.unrender).toHaveBeenCalled();
       });
 
       it("should render the documents collection", function() {
@@ -85,6 +88,14 @@
         checkButtonContent(people, "danger");
       });
 
+      it("should offer an unrender function", function() {
+        shardsView.unrender.reset();
+        view.unrender();
+        expect($(div).html()).toEqual("");
+        expect(shardsView.unrender).toHaveBeenCalled();
+      });
+
+
       describe("user actions", function() {
         var info;
 

js/apps/system/aardvark/test/specs/views/clusterCoordinatorViewSpec.js

@@ -79,6 +79,11 @@
         checkTile(chantalle, "success");
       });
 
+      it("should allow an unrender function", function() {
+        view.unrender();
+        expect($(div).html()).toEqual("");
+      });
+
     });
 
   });

js/apps/system/aardvark/test/specs/views/clusterDatabaseViewSpec.js

@@ -13,7 +13,8 @@
       div.id = "clusterDatabases"; 
       document.body.appendChild(div);
       colView = {
-        render: function(){}
+        render: function() {},
+        unrender: function() {}
       };
       spyOn(window, "ClusterCollectionView").andReturn(colView);
       uiMatchers.define(this);
@@ -47,6 +48,7 @@
 
       beforeEach(function() {
         spyOn(colView, "render");
+        spyOn(colView, "unrender");
         db1 = {
           name: "_system",
           status: "ok"
@@ -71,6 +73,7 @@
 
       it("should not render the Server view", function() {
         expect(colView.render).not.toHaveBeenCalled();
+        expect(colView.unrender).toHaveBeenCalled();
       });
 
       it("should render the ok database", function() {
@@ -85,6 +88,13 @@
         checkButtonContent(db3, "danger");
       });
 
+      it("should offer an unrender function", function() {
+        colView.unrender.reset();
+        view.unrender();
+        expect($(div).html()).toEqual("");
+        expect(colView.unrender).toHaveBeenCalled();
+      });
+
       describe("user actions", function() {
         var db;
 

js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js

@@ -13,10 +13,12 @@
       div.id = "clusterOverview"; 
       document.body.appendChild(div);
       serverView = {
-        render: function() {}
+        render: function() {},
+        unrender: function() {}
       };
       coordinatorView = {
-        render: function() {}
+        render: function() {},
+        unrender: function() {}
       };
       spyOn(window, "ClusterServerView").andReturn(serverView);
       spyOn(window, "ClusterCoordinatorView").andReturn(coordinatorView);
@@ -52,12 +54,14 @@
           it("should be able to navigate to db servers", function() {
             $("#dbserver").click();
             expect(serverView.render).toHaveBeenCalledWith();
+            expect(coordinatorView.unrender).toHaveBeenCalled();
             expect(view.render).toHaveBeenCalledWith(true);
           });
 
           it("should be able to navigate to coordinators", function() {
             $("#coordinator").click();
             expect(coordinatorView.render).toHaveBeenCalledWith();
+            expect(serverView.unrender).toHaveBeenCalled();
             expect(view.render).toHaveBeenCalledWith(true);
           });
 
@@ -79,7 +83,9 @@
 
       beforeEach(function() {
         spyOn(serverView, "render");
+        spyOn(serverView, "unrender");
         spyOn(coordinatorView, "render");
+        spyOn(coordinatorView, "unrender");
         view = new window.ClusterOverviewView();
         // Fake Data Injection to be removed
         view.fakeData = {

js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.js

@@ -13,7 +13,8 @@
       div.id = "clusterServers"; 
       document.body.appendChild(div);
       dbView = {
-        render: function(){}
+        render: function() {},
+        unrender: function() {}
       };
       spyOn(window, "ClusterDatabaseView").andReturn(dbView);
       uiMatchers.define(this);
@@ -77,6 +78,7 @@
 
       beforeEach(function() {
         spyOn(dbView, "render");
+        spyOn(dbView, "unrender");
         view = new window.ClusterServerView();
         okPair = {
           primary: {
@@ -145,8 +147,17 @@
 
       it("should not render the Database view", function() {
         expect(dbView.render).not.toHaveBeenCalled();
+        expect(dbView.unrender).toHaveBeenCalled();
       });
 
+      it("should offer an unrender function", function() {
+        dbView.unrender.reset();
+        view.unrender();
+        expect($(div).html()).toEqual("");
+        expect(dbView.unrender).toHaveBeenCalled();
+      });
+
+      
       describe("minified version", function() {
 
         var checkButtonContent = function(btn, pair, cls) {

js/apps/system/aardvark/test/specs/views/clusterShardsViewSpec.js

@@ -67,6 +67,11 @@
         checkButtonContent(s3, "danger");
       });
 
+      it("should offer an unrender function", function() {
+        view.unrender();
+        expect($(div).html()).toEqual("");
+      });
+
     });