Functionality of the graph management implemented. CSS to go

js/apps/system/aardvark/frontend/js/models/graph.js

@@ -7,12 +7,14 @@
 
     idAttribute: "_key",
 
-    url: function() {
+    urlRoot: "/_api/graph",
-      if (this.isNew()) {
+
-        return "/_api/graph/";
+    isNew: function() {
-      } else {
+      return !this.get("_id");
-        return "/_api/graph/" + this.get("_key");
+    },
-      }
+
+    parse: function(raw) {
+      return raw.graph || raw;
     },
 
     defaults: {

js/apps/system/aardvark/frontend/js/routers/router.js

@@ -267,7 +267,14 @@
     },
 
     graphAddNew: function() {
-
+      if (!this.addNewGraphView) {
+        this.addNewGraphView = new window.AddNewGraphView({
+          collection: window.arangoCollectionsStore,
+          graphs: this.graphs
+        });
+      }
+      this.addNewGraphView.render();
+      this.naviView.selectMenuItem('graphviewer-menu');
     },
 
     applications: function() {

js/apps/system/aardvark/frontend/js/templates/addNewGraphView.ejs

@@ -1,62 +1,29 @@
-<%var appInfos = attributes.app.split(":"); %>
+<div id="add-graph" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
-<div id="change-foxx" 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>
-    <a class="arangoHeader">Modify Application</a>
+    <a class="arangoHeader">Add new Graph</a>
   </div>
   <div class="modal-body">
     <table>
       <tr>
         <th class="collectionTh">Name:</th>
-        <th class="collectionTh"><strong><%=appInfos[1] %></strong></th>
+        <th class="collectionTh"><input type="text" id="newGraphName" placeholder="graphName"></input></th>
+        <th><a class="modalTooltips" title="The name to identify the graph. Has to be unique."><i class="icon-info-sign"></i></a></th>
       </tr>
       <tr>
-        <th class="collectionTh">&nbsp;</th>
+        <th class="collectionTh">Vertices:</th>
-        <th class="collectionTh">&nbsp;</th>
+        <th class="collectionTh"><input type="text" id="newGraphVertices" placehilder="Vertex Collection>"></input></th>
+        <th><a class="modalTooltips" title="The path name of the document collection that should be used as vertices. If this does not exists it will be created."><i class="icon-info-sign"></i></a></th>
       </tr>
       <tr>
-        <th class="collectionTh">Mount:</th>
+        <th class="collectionTh">Edges:</th>
-        <th class="collectionTh"><input type="text" id="change-mount-point" name="mountpoint" value="<%=attributes.mount%>"/></th>
+        <th class="collectionTh"><input type="text" id="newGraphEdges" placehilder="Edge Collection>"></input></th>
-        <th><a class="modalTooltips" title="The path where the app can be reached."><i class="icon-info-sign"></i></a></th>
+        <th><a class="modalTooltips" title="The path name of the edge collection that should be used as edges. If this does not exists it will be created."><i class="icon-info-sign"></i></a></th>
-      </tr>
-      <tr>
-        <th class="collectionTh">Version:</th>
-        <th class="collectionTh">
-          <select>
-            <option selected><%=appInfos[2] %></option>
-          </select>
-        <th>
-      </tr>
-      <tr>
-        <th class="collectionTh">System:</th>
-        <th class="collectionTh">
-          <%=attributes.isSystem ? "Yes" : "No" %>
-        <th>
-      </tr>
-      <tr>
-        <th class="collectionTh">Status:</th>
-        <th class="collectionTh">
-          <%if (attributes.active) {%>
-            <div class="modal-text active">
-              Active
-            </div>
-          <%} else {%>
-            <div class="modal-text inactive">
-              Inactive
-            </div>
-          <%}%>
-        </th>
       </tr>
     </table>
   </div>
-  <div id="colFooter" class="modal-footer">
+  <div class="modal-footer">
-    <button id="uninstall" class="btn btn-danger"<%=(attributes.isSystem || attributes.development) ? " disabled" : ""%>>Uninstall</button>
+    <button id="cancel" class="btn btn-warning">Cancel</button>
-    <button id="change" class="btn btn-success pull-right">Save</button>
+    <button id="createGraph" class="btn btn-success pull-right">Create</button>
-    <%if (false && attributes.active) {%>
-      <button id="deactivate" class="btn btn-warning pull-right" style="margin-right:8px" disabled>Deactivate</button>
-    <%} else if (false) {%>
-      <button id="activate" class="btn btn-success pull-right" style="margin-right:8px" disabled>Activate</button>
-    <%}%>
-    
   </div>
 </div>

js/apps/system/aardvark/frontend/js/templates/manageGraphsView.ejs

@@ -1,6 +1,6 @@
 <ul class="thumbnails2">
   <div id="transparentHeader">
-    <div id="graphManagerToolbar" class="pagination pagination-small pagination-right">
+    <div id="graphManagerToolbar" class="pagination pagination-small pagination-right" style="display:none;">
       <ul><li class="enabled"><a id="filterGraphs"><span class="glyphicon glyphicon-filter" title="Filter graphs"></span></a></li></ul>
     </div>
   </div>
@@ -25,8 +25,9 @@
 </div>
 
 <div id="graphManagementDiv">
+  <div id="graphTable_wrapper" class="dataTables_wrapper" role="grid">
 
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="graphsTable">
+  <table cellpadding="0" cellspacing="0" border="0" class="display dataTable dataTable-fixed" id="graphsTable">
     <thead>
       <tr>
         <th>Name</th>
@@ -59,6 +60,7 @@
     </tbody>
     </tbody>
   </table>
+</div>
 
 <div id="documentsToolbarFL">
   <div id="documentsToolbarF" class="pagination pagination-small pagination-centered">

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

@@ -8,11 +8,32 @@
     el: '#modalPlaceholder',
     template: templateEngine.createTemplate("addNewGraphView.ejs"),
 
-    initilize: function() {
+    initialize: function() {
       this.graphs = this.options.graphs;
     },
 
     events: {
+      "click #cancel": "hide",
+      "hidden": "hidden",
+      "click #createGraph": "createGraph"
+    },
+
+    createGraph: function() {
+      this.graphs.create({
+        _key: $("#newGraphName").val(),
+        vertices: $("#newGraphVertices").val(),
+        edges: $("#newGraphEdges").val()
+      });
+      this.hide();
+    },
+
+    hide: function() {
+      $('#add-graph').modal('hide');
+    },
+
+    hidden: function () {
+      this.undelegateEvents();
+      window.App.navigate("graphManagement", {trigger: true});
     },
 
     render: function() {
@@ -26,7 +47,7 @@
         collections: this.collection,
         graphs: this.graphs
       }));
-      $('#change-foxx').modal('show');
+      $('#add-graph').modal('show');
       $('.modalTooltips').tooltip({
         placement: "left"
       });

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

@@ -18,9 +18,14 @@
     },
 
     deleteGraph: function(e) {
-      var key = e.target.id;
+      var key = $(e.target).closest("a").attr("id"),
+        self = this;
       // Ask user for permission
-      this.collection.get(key).destroy();
+      this.collection.get(key).destroy({
+        success: function() {
+          self.render();
+         }
+      });
     },
 
     render: function() {

js/apps/system/aardvark/test/specs/models/graphSpec.js

@@ -0,0 +1,77 @@
+/*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
+/*global describe, beforeEach, afterEach, it, spyOn, expect*/
+/*global $*/
+
+(function() {
+  "use strict";
+
+  describe("The current database", function() {
+    
+    var model, myKey, ajaxVerify, server_result, e, v;
+
+    beforeEach(function() {
+      myKey = "graph";
+      e = "e";
+      v = "v";
+      server_result = {
+        graph: {
+          _id: "_graph/" + myKey,
+          _key: myKey,
+          _rev: "123541",
+          edges: e,
+          vertices: v
+        },
+        code: 201,
+        error: false
+      };
+      ajaxVerify = function() {};
+      spyOn($, "ajax").andCallFake(function(opt) {
+        ajaxVerify(opt);
+        opt.success(server_result);
+      });
+      model = new window.Graph({
+        _key: myKey,
+        vertices: v,
+        edges: e
+      });
+    });
+
+    it("should request /_api/graph on save", function() {
+      ajaxVerify = function(opt) {
+        expect(opt.url).toEqual("/_api/graph");
+        expect(opt.type).toEqual("POST");
+      };
+      model.save();
+      expect($.ajax).toHaveBeenCalled();
+    });
+
+    it("should store the attributes in the model", function() {
+      var id = "_graph/" + myKey,
+        rev = "12345";
+      server_result.graph._id = id;
+      server_result.graph._rev = rev;
+      model.save();
+      expect(model.get("_id")).toEqual(id);
+      expect(model.get("_rev")).toEqual(rev);
+      expect(model.get("_key")).toEqual(myKey);
+      expect(model.get("edges")).toEqual(e);
+      expect(model.get("vertices")).toEqual(v);
+      expect(model.get("error")).toBeUndefined();
+      expect(model.get("code")).toBeUndefined();
+      expect(model.get("graph")).toBeUndefined();
+      
+    });
+
+    it("should request /_api/graph/_key on delete", function() {
+      model.save();
+      ajaxVerify = function(opt) {
+        expect(opt.url).toEqual("/_api/graph/" + myKey);
+        expect(opt.type).toEqual("DELETE");
+      };
+      model.destroy();
+      expect($.ajax).toHaveBeenCalled();
+    });
+
+  });
+
+}());

js/apps/system/aardvark/test/specs/router/routerSpec.js

@@ -10,34 +10,50 @@
     var 
       jQueryDummy,
       fakeDB,
+      graphDummy,
       storeDummy,
       naviDummy,
       footerDummy,
       documentDummy,
       documentsDummy,
       sessionDummy,
-      graphDummy,
+      graphsDummy,
       logsDummy;
 
     // Spy on all views that are initialized by startup
     beforeEach(function() {
       naviDummy = {
+        id: "navi",
         render: function(){},
-        handleResize: function(){}
+        handleResize: function(){},
+        selectMenuItem: function(){}
       };
       footerDummy = {
+        id: "footer",
         render: function(){},
         handleResize: function(){}
       };
-      documentDummy = {};
+      documentDummy = {id: "document"};
-      documentsDummy = {};
+      documentsDummy = {id: "documents"};
       graphDummy = {
+        id: "graph",
         handleResize: function() {}
       };
-      storeDummy = {fetch: function(){}};
+      storeDummy = {
-      logsDummy = {fetch: function() {}};
+        id: "store",
-      fakeDB = {fetch: function() {}};
+        fetch: function(){}
+      };
+      graphsDummy = {id: "graphs"};
+      logsDummy = {
+        id: "logs",
+        fetch: function() {}
+      };
+      fakeDB = {
+        id: "fakeDB",
+        fetch: function() {}
+      };
       jQueryDummy = {
+        id: "jquery",
         resize: function() {},
         width: function() {},
         height: function() {},
@@ -48,6 +64,7 @@
       spyOn(window, "ArangoSession").andReturn(sessionDummy);
       spyOn(window, "arangoDocuments").andReturn(documentsDummy);
       spyOn(window, "arangoDocument").andReturn(documentDummy);
+      spyOn(window, "GraphCollection").andReturn(graphsDummy);
       spyOn(window, "CollectionsView");
       spyOn(window, "CollectionView");
       spyOn(window, "CollectionInfoView");
@@ -67,6 +84,7 @@
       spyOn(footerDummy, "render");
       spyOn(window, "NavigationView").andReturn(naviDummy);
       spyOn(naviDummy, "render");
+      spyOn(naviDummy, "selectMenuItem");
       spyOn(window, "GraphView").andReturn(graphDummy);
       spyOn(window, "$").andReturn(jQueryDummy);
       spyOn(jQueryDummy, "resize").andCallFake(function() {
@@ -102,7 +120,8 @@
 
       it("should create a graph view", function() {
         expect(window.GraphView).toHaveBeenCalledWith({
-          collection: storeDummy
+          collection: storeDummy,
+          graphs: graphsDummy
         });
       });
 
@@ -141,5 +160,30 @@
         expect(fakeDB.fetch).toHaveBeenCalled();
       });
     });
+
+    describe("navigation", function () {
+      
+      var r;
+
+      beforeEach(function() {
+        r = new window.Router();
+      });
+
+      it("should offer the add new graph view", function() {
+        var route = r.routes["graphManagement/add"],
+          view = {render: function(){}};
+        expect(route).toBeDefined();
+        spyOn(window, "AddNewGraphView").andReturn(view);
+        spyOn(view, "render");
+        r[route]();
+        expect(window.AddNewGraphView).toHaveBeenCalledWith({
+          collection: storeDummy,
+          graphs: graphsDummy
+        });
+        expect(view.render).toHaveBeenCalled();
+        expect(naviDummy.selectMenuItem).toHaveBeenCalledWith("graphviewer-menu");
+      });
+
+    });
   });
 }());

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

@@ -97,9 +97,13 @@
 
       it("should be able to delete", function() {
         var lg = graphs.get("g3");
-        spyOn(lg, "destroy");
+        spyOn(lg, "destroy").andCallFake(function(opt) {
-        $("#" + g3._key).click();
+          opt.success(); 
+        });
+        spyOn(view, "render");
+        $("#" + g3._key + " > span").click();
         expect(lg.destroy).toHaveBeenCalled();
+        expect(view.render).toHaveBeenCalled();
       });
 
     });

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

@@ -27,18 +27,6 @@
       expect(templateEngine.createTemplate).toHaveBeenCalledWith("graphViewGroupByEntry.ejs");
     });
 
-    it("should setup a new graph collection", function () {
-      spyOn(window, "GraphCollection");
-      view = new GraphView();
-      expect(window.GraphCollection).toHaveBeenCalled();
-    });
-
-    it("should setup a graph management view", function () {
-      spyOn(window, "GraphManagementView");
-      view = new GraphView();
-      expect(window.GraphManagementView).toHaveBeenCalled();
-    });
-  
     describe("after view creation", function() {
       
       var graphs, g1, g2, v1, v2, e1, e2,
@@ -85,7 +73,8 @@
           return graphs;
         });
         view = new GraphView({
-          collection: myStore 
+          collection: myStore,
+          graphs: graphs
         });
         spyOn($, "ajax").andCallFake(function(opts) {
           throw "Test not implemented";
@@ -193,10 +182,10 @@
 
       describe("Graph Management", function () {
 
-        it("should load the view", function () {
+        it("should navigate to the management view", function () {
-          spyOn(view.managementView, "render");
+          spyOn(window.App, "navigate");
           $("#manageGraphs").click();
-          expect(view.managementView.render).toHaveBeenCalled();
+          expect(window.App.navigate).toHaveBeenCalledWith("graphManagement", {trigger: true});
         });
       });