Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Functionality of the graph management implemented. CSS to go

This commit is contained in:
Michael Hackstein 2013-11-29 14:51:48 +01:00
parent e04ff0822f
commit 103f36f223
10 changed files with 234 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/apps/system/aardvark/frontend/js/models/graph.js
View File

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

9
js/apps/system/aardvark/frontend/js/routers/router.js
View File

@ -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() {

59
js/apps/system/aardvark/frontend/js/templates/addNewGraphView.ejs
View File

@ -1,62 +1,29 @@
<%var appInfos = attributes.app.split(":"); %>
<div id="change-foxx" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
<div id="add-graph" 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">&nbsp;</th>
<th class="collectionTh">Vertices:</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"><input type="text" id="change-mount-point" name="mountpoint" value="<%=attributes.mount%>"/></th>
<th><a class="modalTooltips" title="The path where the app can be reached."><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>
<th class="collectionTh">Edges:</th>
<th class="collectionTh"><input type="text" id="newGraphEdges" placehilder="Edge Collection>"></input></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>
</table>
</div>
<div id="colFooter" class="modal-footer">
<button id="uninstall" class="btn btn-danger"<%=(attributes.isSystem || attributes.development) ? " disabled" : ""%>>Uninstall</button>
<button id="change" class="btn btn-success pull-right">Save</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 class="modal-footer">
<button id="cancel" class="btn btn-warning">Cancel</button>
<button id="createGraph" class="btn btn-success pull-right">Create</button>
</div>
</div>

6
js/apps/system/aardvark/frontend/js/templates/manageGraphsView.ejs
View File

@ -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">

25
js/apps/system/aardvark/frontend/js/views/addNewGraphView.js
View File

@ -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"
});

9
js/apps/system/aardvark/frontend/js/views/graphManagementView.js
View File

@ -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() {

77
js/apps/system/aardvark/test/specs/models/graphSpec.js Normal file
View File

@ -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();
});
});
}());

60
js/apps/system/aardvark/test/specs/router/routerSpec.js
View File

@ -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 = {};
documentsDummy = {};
documentDummy = {id: "document"};
documentsDummy = {id: "documents"};
graphDummy = {
id: "graph",
handleResize: function() {}
};
storeDummy = {fetch: function(){}};
logsDummy = {fetch: function() {}};
fakeDB = {fetch: function() {}};
storeDummy = {
id: "store",
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");
});
});
});
}());

8
js/apps/system/aardvark/test/specs/views/graphManagementViewSpec.js
View File

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

21
js/apps/system/aardvark/test/specs/views/graphViewSpec.js
View File

@ -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 () {
spyOn(view.managementView, "render");
it("should navigate to the management view", function () {
spyOn(window.App, "navigate");
$("#manageGraphs").click();
expect(view.managementView.render).toHaveBeenCalled();
expect(window.App.navigate).toHaveBeenCalledWith("graphManagement", {trigger: true});
});
});