1
0
Fork 0

Merge branch 'devel' of ssh://github.com/triAGENS/ArangoDB into devel

This commit is contained in:
Max Neunhoeffer 2014-03-07 15:02:13 +01:00
commit aca081ebaa
13 changed files with 1123 additions and 1493 deletions

View File

@ -181,7 +181,7 @@
.pagination-small ul > li.disabled:first-child > span {
pointer-events: none;
cursor: default;
background-color: ##777;
background-color: #777;
color:#666666;
}

File diff suppressed because one or more lines are too long

View File

@ -8,7 +8,7 @@
model: window.Database,
comparator: "name",
comparator: function(item) { return item.get('name').toLowerCase(); },
sync: function(method, model, options) {
if (method === "read") {

View File

@ -24,7 +24,7 @@
</table>
</div>
<div class="modal-footer">
<button id="cancel" class="button-warning">Cancel</button>
<button id="cancel" class="button-close">Cancel</button>
<button id="createGraph" class="button-success pull-right">Create</button>
</div>
</div>

View File

@ -1,71 +1,169 @@
<script id="databaseView.ejs" type="text/template">
<div class="headerBar">
<a class="arangoHeader">Databases</a>
</div>
<div class="headerBar">
<!-- <div class="headerButtonBar pull-right">
<ul class="headerButtonList">
<li class="enabled">
<a id="databaseToggle" class="headerButton">
<span class="icon_arangodb_settings2" title="Settings"></span>
</a>
</li>
</ul>
</div>-->
<div class="contentDiv">
<table id="databaseTable" class="arangoDataTable contentTables">
<thead>
<tr>
<td class="dbThFirst">Name</td>
<td class="dbThSecond">
<span id="createDatabase" class="icon_arangodb_roundplus" data-original-title="Create a database"></span>
</td>
</tr>
</thead>
<tbody id="databaseTableBody">
</tbody>
</table>
</div>
<div id="createDatabaseModal" class="modal hide fade createModalDialog" 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">Create Database</a>
<div class="pull-left">
<a class="arangoHeader">Databases</a>
</div>
<div class="searchField pull-left">
<input type="text" value="<%=searchString%>" id="databaseSearchInput" class="searchInput" placeholder="Search..."/><img id="databaseSearchSubmit"
width="16" height="16"
src="img/enter_icon.png" class="searchSubmitIcon">
</div>
</div>
<div class="modal-body">
<table>
<tr>
<th>Name:</th>
<th><input type="text" id="newDatabaseName" name="databasename" value="" placeholder="Database Name"/></th>
</tr>
<tr>
<td colspan="2">Please define the owner of this database. This will be the only user having initial access to this database. If the user is different to your account you will not be able to see the database. If there is a failure you will be informed.</td>
</tr>
<tr>
<th>Username:</th>
<th><input type="text" id="newUser" name="username" value="" placeholder="Database Owner"/></th>
</tr>
<tr>
<th>Password:</th>
<th><input type="password" id="newPassword" name="password" value=""/></th>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="submitCreateDatabase" class="button-success pull-right">Create</button>
</div>
</div>
<div id="deleteDatabaseModal" 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">Delete Database</a>
<div id="databaseDropdown2" class="headerDropdown">
<div id="databaseDropdown" class="dropdownInner">
<ul>
<li class="nav-header">Sorting</li>
<li><a href="#">
<label class="checkbox checkboxLabel">
<input class="css-checkbox" type="checkbox" id="sortName">
<label class="css-label css-label-round"></label>Sort by ?
</label>
</a></li>
<li><a href="#">
<label class="checkbox checkboxLabel">
<input class="css-checkbox" type="checkbox" id="sortType">
<label class="css-label css-label-round"></label>Sort by ?
</label>
</a></li>
<li><a href="#">
<label class="checkbox checkboxLabel">
<input class="css-checkbox" type="checkbox" id="sortOrder">
<label class="css-label"></label>Sort descending
</label>
</a></li>
</ul>
</div>
</div>
<div class="modal-body">
<table>
<tr>
<th>Really delete?</th>
<th></th>
</tr>
</table>
<div class="contentDiv" id="arangoCollectionsContainer">
<div class="containerdivNewLine"/>
<ul id="userManagementThumbnailsIn" class="tileList">
<li class="tile">
<a href="#" id="createDatabase" class="add">
<span id="newDatabase" class="pull-left icon_arangodb_roundplus arangoicon add-Icon"/>
Add Database
</a>
</li>
<% collection.forEach(function(db) {
var name = db.get("name");
%>
<li class="tile">
<div class="iconSet">
<span class="icon_arangodb_settings2 editDatabase" id="<%=name %>" alt="Edit database" title="Edit database"></span>
</div>
<img src="img/databaseIcon.svg" class="tile-icon-svg svgToReplace"/>
<div class="tileBadge">
<span>
<%
if(name === currentDB) {
%>
<div class="corneredBadge loaded">active</div>
<%
} else {
%>
<div class="corneredBadge unloaded">inactive</div>
<%
}
%>
</span>
</div>
<h5 class="collectionName"><%=name %></h5>
</li>
<%});%>
</ul>
</div>
<div class="modal-footer">
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="submitDeleteDatabase" class="button-danger pull-right">Delete</button>
<div id="createDatabaseModal" class="modal hide fade createModalDialog" 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">Create Database</a>
</div>
<div class="modal-body">
<table>
<tr>
<th>Name:</th>
<th><input type="text" id="newDatabaseName" name="databasename" value="" placeholder="Database Name"/></th>
</tr>
<tr>
<td colspan="2">Please define the owner of this database. This will be the only user having initial access to this database. If the user is different to your account you will not be able to see the database. If there is a failure you will be informed.</td>
</tr>
<tr>
<th>Username:</th>
<th><input type="text" id="newUser" name="username" value="" placeholder="Database Owner"/></th>
</tr>
<tr>
<th>Password:</th>
<th><input type="password" id="newPassword" name="password" value=""/></th>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="submitCreateDatabase" class="button-success pull-right">Create</button>
</div>
</div>
</div>
<div id="editDatabaseModal" class="modal hide fade createModalDialog" 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">Edit database</a>
</div>
<div class="modal-body">
<table>
<tr>
<th>Name:</th>
<th id="editDatabaseName"></th>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="deleteDatabase" class="button-danger pull-right" >Delete</button>
</div>
</div>
<div id="deleteDatabaseModal" 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">Delete Database</a>
</div>
<div class="modal-body">
<table>
<tr>
<th>Really delete?</th>
<th></th>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="submitDeleteDatabase" class="button-danger pull-right">Delete</button>
</div>
</div>
</script>

View File

@ -10,7 +10,7 @@
</span>
</div>
<div class="modal-footer">
<button id="cancel" class="button-warning">Cancel</button>
<button id="cancel" class="button-close">Cancel</button>
<button id="confirmDelete" class="button-danger pull-right">Delete</button>
</div>
</div>

View File

@ -0,0 +1,140 @@
<script id="graphManagementView.ejs" type="text/template">
<div class="headerBar">
<!-- <div class="headerButtonBar pull-right">
<ul class="headerButtonList">
<li class="enabled">
<a id="graphManagementToggle" class="headerButton">
<span class="icon_arangodb_settings2" title="Settings"></span>
</a>
</li>
</ul>
</div>-->
<div class="pull-left">
<a class="arangoHeader">Graph Management</a>
</div>
<div class="searchField pull-left">
<input type="text" value="<%=searchString%>" id="graphManagementSearchInput" class="searchInput" placeholder="Search..."/><img id="graphManagementSearchSubmit"
width="16" height="16"
src="img/enter_icon.png" class="searchSubmitIcon">
</div>
</div>
<div id="graphManagementDropdown2" class="headerDropdown">
<div id="graphManagementDropdown" class="dropdownInner">
<ul>
<li class="nav-header">Sorting</li>
<li><a href="#">
<label class="checkbox checkboxLabel">
<input class="css-checkbox" type="checkbox" id="sortName">
<label class="css-label css-label-round"></label>Sort by ?
</label>
</a></li>
<li><a href="#">
<label class="checkbox checkboxLabel">
<input class="css-checkbox" type="checkbox" id="sortType">
<label class="css-label css-label-round"></label>Sort by ?
</label>
</a></li>
<li><a href="#">
<label class="checkbox checkboxLabel">
<input class="css-checkbox" type="checkbox" id="sortOrder">
<label class="css-label"></label>Sort descending
</label>
</a></li>
</ul>
</div>
</div>
<div class="contentDiv" id="arangoCollectionsContainer">
<div class="containerdivNewLine"/>
<ul id="graphManagementThumbnailsIn" class="tileList">
<li class="tile">
<a href="#" id="createGraph" class="add">
<span id="newGraph" class="pull-left icon_arangodb_roundplus arangoicon add-Icon"/>
Add Graph
</a>
</li>
<% graphs.forEach(function(graph) {
var graphName = graph.get("_key");
%>
<li class="tile">
<div class="iconSet">
<span class="icon_arangodb_settings2 editGraph" id="<%=graphName %>_settings" alt="Edit graph" title="Edit graph"></span>
<span class="icon_arangodb_info" id="<%=graphName %>_info" alt="Show graph properties" title="Show graph properties"></span>
</div>
<span class="icon_arangodb_edge5 tile-icon"></span>
<div class="tileBadge">
</div>
<h5 class="collectionName"><%=graphName %></h5>
</li>
<%});%>
</ul>
</div>
<div id="editGraphModal" class="modal hide fade createModalDialog" 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">Edit Graph</a>
</div>
<div class="modal-body">
<table>
<tr>
<th>Name:</th>
<th id="editGraphName"></th>
</tr>
<tr>
<th>Vertices:</th>
<th id="editVertices"></th>
</tr>
<tr>
<th>Edges:</th>
<th id="editEdges"></th>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="deleteGraph" class="button-danger pull-right">Delete</button>
</div>
</div>
<div id="infoGraphModal" class="modal hide fade createModalDialog" 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">Graph properties</a>
</div>
<div class="modal-body">
<table>
<tr>
<th>Name:</th>
<th id="infoGraphName"></th>
</tr>
<tr>
<th>Vertices:</th>
<th id="infoVertices"></th>
</tr>
<tr>
<th>Edges:</th>
<th id="infoEdges"></th>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</script>

View File

@ -1,4 +1,7 @@
<script id="manageGraphsView.ejs" type="text/template">
<script id="graphManagementView1.ejs" type="text/template">
<div class="headerBar">
<div class="pull-left">
<a class="arangoHeader">Manage Graphs</a>

View File

@ -12,12 +12,16 @@
currentDB: "",
events: {
"click #createDatabase" : "createDatabase",
"click #submitCreateDatabase" : "submitCreateDatabase",
"click #selectDatabase" : "updateDatabase",
"click #databaseTable .icon_arangodb_roundminus" : "removeDatabase",
"click #submitDeleteDatabase" : "submitRemoveDatabase",
"click .contentRowInactive a" : "changeDatabase"
"click #createDatabase" : "createDatabase",
"click #submitCreateDatabase" : "submitCreateDatabase",
"click .editDatabase" : "editDatabase",
"click .icon" : "editDatabase",
"click #selectDatabase" : "updateDatabase",
"click #deleteDatabase" : "deleteDatabase",
"click #submitDeleteDatabase" : "submitDeleteDatabase",
"click .contentRowInactive a" : "changeDatabase",
"keyup #databaseSearchInput" : "search",
"click #databaseSearchSubmit" : "search"
},
initialize: function() {
@ -26,20 +30,15 @@
render: function(){
this.currentDatabase();
$(this.el).html(this.template.render({}));
this.renderTable();
this.selectCurrentDatabase();
return this;
},
this.collection.sort();
renderTable: function () {
this.collection.forEach(function(dbs) {
$("#databaseTable tbody").append(
'<tr><td><a id="' + dbs.get("name") + '">' + dbs.get("name") + '</a></td>' +
'<td><span class="arangoicon icon_arangodb_roundminus"' +
'data-original-title="Delete database"></span></td></tr>'
);
});
$(this.el).html(this.template.render({
collection : this.collection,
searchString : '',
currentDB : this.currentDB
}));
this.replaceSVGs();
return this;
},
selectedDatabase: function () {
@ -105,47 +104,43 @@
self.handleError(err.status, err.statusText, name);
},
success: function(data) {
self.hideModal();
self.hideModal('createDatabaseModal');
self.updateDatabases();
}
});
},
hideModal: function() {
$('#createDatabaseModal').modal('hide');
hideModal: function(modal) {
$('#' + modal).modal('hide');
},
showModal: function() {
$('#createDatabaseModal').modal('show');
showModal: function(modal) {
$('#' + modal).modal('show');
},
createDatabase: function() {
this.showModal();
createDatabase: function(e) {
e.preventDefault();
this.showModal('createDatabaseModal');
},
submitRemoveDatabase: function(e) {
submitDeleteDatabase: function(e) {
var toDelete = this.collection.where({name: this.dbToDelete});
toDelete[0].destroy({wait: true, url:"/_api/database/"+this.dbToDelete});
this.dbToDelete = '';
$('#deleteDatabaseModal').modal('hide');
this.hideModal('deleteDatabaseModal');
this.updateDatabases();
},
removeDatabase: function(e) {
this.dbToDelete = $(e.currentTarget).parent().parent().children().first().text();
$('#deleteDatabaseModal').modal('show');
deleteDatabase: function(e) {
this.hideModal('editDatabaseModal');
this.dbToDelete = $('#editDatabaseName').html();
this.showModal('deleteDatabaseModal')
},
currentDatabase: function() {
this.currentDB = this.collection.getCurrentDatabase();
},
selectCurrentDatabase: function() {
$('#databaseTableBody tr').addClass('contentRowInactive');
var tr = $('#databaseTableBody td:contains('+this.currentDB+')').parent();
$(tr).removeClass('contentRowInactive').addClass('contentRowActive');
},
changeDatabase: function(e) {
var changeTo = $(e.currentTarget).attr("id");
var url = this.collection.createDatabaseURL(changeTo);
@ -160,7 +155,66 @@
window.App.handleSelectDatabase();
}
});
},
editDatabase: function(e) {
var dbName = $(e.currentTarget).attr("id");
$('#editDatabaseName').html(dbName);
var button = $('#deleteDatabase');
if(dbName === this.currentDB) {
var element
button.prop('disabled', true);
button.removeClass('button-danger');
button.addClass('button-neutral');
} else {
button.prop('disabled', false);
button.removeClass('button-neutral');
button.addClass('button-danger');
}
this.showModal('editDatabaseModal');
},
search: function() {
var searchInput,
searchString,
strLength,
reducedCollection;
searchInput = $('#databaseSearchInput');
searchString = $("#databaseSearchInput").val();
reducedCollection = this.collection.filter(
function(u) {
return u.get("name").indexOf(searchString) !== -1;
}
);
$(this.el).html(this.template.render({
collection : reducedCollection,
searchString : searchString
}));
//after rendering, get the "new" element
searchInput = $('#databaseSearchInput');
//set focus on end of text in input field
strLength= searchInput.val().length;
searchInput.focus();
searchInput[0].setSelectionRange(strLength, strLength);
},
replaceSVGs: function() {
$(".svgToReplace").each(function() {
var img = $(this);
var id = img.attr("id");
var src = img.attr("src");
$.get(src, function(d) {
var svg = $(d).find("svg");
svg.attr("id", id)
.attr("class", "tile-icon-svg")
.removeAttr("xmlns:a");
img.replaceWith(svg);
}, "xml");
});
}
});
}());

View File

@ -6,19 +6,25 @@
window.GraphManagementView = Backbone.View.extend({
el: '#content',
template: templateEngine.createTemplate("manageGraphsView.ejs"),
template: templateEngine.createTemplate("graphManagementView.ejs"),
events: {
"click .deleteButton": "deleteGraph",
"click #addGraphButton": "addNewGraph"
"click #deleteGraph" : "deleteGraph",
"click .icon_arangodb_settings2" : "editGraph",
"click .icon_arangodb_info" : "info",
"click #createGraph" : "addNewGraph",
"keyup #graphManagementSearchInput" : "search",
"click #graphManagementSearchSubmit" : "search"
},
addNewGraph: function() {
addNewGraph: function(e) {
e.preventDefault();
window.App.navigate("graphManagement/add", {trigger: true});
},
deleteGraph: function(e) {
var key = $(e.target).closest("a").attr("id");
$('#editGraphModal').modal('hide');
var key = this.graphToEdit;
window.App.navigate("graphManagement/delete/" + key, {trigger: true});
},
@ -27,10 +33,65 @@
async: false
});
$(this.el).html(this.template.render({
graphs: this.collection
graphs: this.collection,
searchString : ''
}));
return this;
},
editGraph : function(e) {
this.collection.fetch();
this.graphToEdit = this.evaluateGraphName($(e.currentTarget).attr("id"), '_settings');
$('#editGraphModal').modal('show');
var graph = this.collection.findWhere({_key: this.graphToEdit});
$('#editGraphName').html(this.graphToEdit);
$('#editVertices').html(graph.get("vertices"));
$('#editEdges').html(graph.get("edges"));
},
info : function(e) {
this.collection.fetch();
$('#infoGraphModal').modal('show');
var graph = this.collection.findWhere(
{_key: this.evaluateGraphName($(e.currentTarget).attr("id"), '_info')}
);
$('#infoGraphName').html(graph.get('_key'));
$('#infoVertices').html(graph.get('vertices'));
$('#infoEdges').html(graph.get('edges'));
},
evaluateGraphName : function(str, substr) {
var index = str.lastIndexOf(substr);
return str.substring(0, index);
},
search: function() {
var searchInput,
searchString,
strLength,
reducedCollection;
searchInput = $('#graphManagementSearchInput');
searchString = $("#graphManagementSearchInput").val();
reducedCollection = this.collection.filter(
function(u) {
return u.get("_key").indexOf(searchString) !== -1;
}
);
$(this.el).html(this.template.render({
graphs : reducedCollection,
searchString : searchString
}));
//after rendering, get the "new" element
searchInput = $('#graphManagementSearchInput');
//set focus on end of text in input field
strLength= searchInput.val().length;
searchInput.focus();
searchInput[0].setSelectionRange(strLength, strLength);
}
});
}());

View File

@ -18,7 +18,7 @@ $c_notification: #FAA020;
$c_notification_hover: #F87C0F;
$c_inactive: lightgrey;
$c_inactive_hover: grey;
$c_inactive_hover: grey;
$c_header_btn_bg: #DDDDDD;
$c_header_btn_fg: #555555;
@ -53,3 +53,5 @@ $c_navBarSpacerShadow : #C8C8C8;
$c_btn_inverse : #736B68;
$c_notification_red: #CC0000;
$c_icon_grey: #686766;

View File

@ -52,6 +52,19 @@ li.tile {
}
}
svg.tile-icon-svg {
margin-top: 10px;
height: $iconSize;
width: $iconSize;
fill: $c_icon_grey;
}
span.tile-icon {
line-height: 1.2;
font-size: $iconSize;
color: $c_icon_grey;
}
h5 {
font-size: 12px;
white-space: nowrap !important;

View File

@ -547,6 +547,15 @@ li.tile, li.bigtile {
li.tile a svg.icon, li.bigtile a svg.icon {
height: 50px;
width: 50px; }
li.tile svg.tile-icon-svg, li.bigtile svg.tile-icon-svg {
margin-top: 10px;
height: 50px;
width: 50px;
fill: #686766; }
li.tile span.tile-icon, li.bigtile span.tile-icon {
line-height: 1.2;
font-size: 50px;
color: #686766; }
li.tile h5, li.bigtile h5 {
font-size: 12px;
white-space: nowrap !important;