mirror of https://gitee.com/bigwinds/arangodb
added missing web interface files
This commit is contained in:
parent
5510a4abc2
commit
a9d586a354
|
@ -0,0 +1,98 @@
|
|||
#databaseDiv {
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.databaseButtons {
|
||||
clear:both;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.databaseButtons #createDatabase {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.databaseButtons {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#databaseTable thead {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#databaseTable thead tr {
|
||||
border-bottom: 1px solid #C2C2C2;
|
||||
background-color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
#databaseTable {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#databaseTable .dbThFirst {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#databaseTable .dbThSecond {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#databaseTable td.dbThSecond span {
|
||||
color: #8AA050;
|
||||
}
|
||||
|
||||
#databaseTable td span {
|
||||
float: right;
|
||||
color: #B30000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#databaseTable td {
|
||||
padding:12px 18px;
|
||||
}
|
||||
|
||||
#databaseTable tr:nth-child(odd) {
|
||||
background-color: #F1F0EE;
|
||||
}
|
||||
|
||||
#databaseTable tr:nth-child(even) {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#createDatabaseModal table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#databaseTable .collectionThSec {
|
||||
width: 80%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#databaseTable .collectionTh {
|
||||
width: 5%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.databaseActive {
|
||||
background-color: #BDCC92 !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.databaseActive a {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.databaseActive span {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.databaseInactive a {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.databaseInactive a:hover {
|
||||
font-weight: 400;
|
||||
color: black !important;
|
||||
cursor: pointer;
|
||||
}
|
|
@ -37,6 +37,9 @@ window.arangoCollections = Backbone.Collection.extend({
|
|||
else if (status === 5) {
|
||||
returnString = 'deleted';
|
||||
}
|
||||
else if (status === 6) {
|
||||
returnString = 'loading';
|
||||
}
|
||||
return returnString;
|
||||
},
|
||||
translateTypePicture : function (type) {
|
||||
|
|
|
@ -0,0 +1,94 @@
|
|||
/*jslint indent: 2, nomen: true, maxlen: 100, sloppy: true, vars: true, white: true, plusplus: true */
|
||||
/*global window, Backbone, $, window, _*/
|
||||
|
||||
(function() {
|
||||
window.ArangoDatabase = Backbone.Collection.extend({
|
||||
model: window.Database,
|
||||
|
||||
comparator: "name",
|
||||
|
||||
sync: function(method, model, options) {
|
||||
'use strict';
|
||||
if (method === "read") {
|
||||
options.url = model.url() + "user";
|
||||
}
|
||||
return Backbone.sync(method, model, options);
|
||||
},
|
||||
|
||||
url: function() {
|
||||
return '/_api/database/';
|
||||
},
|
||||
|
||||
parse: function(response) {
|
||||
return _.map(response.result, function(v) {
|
||||
return {name:v};
|
||||
});
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
var self = this;
|
||||
this.fetch().done(function() {
|
||||
self.sort();
|
||||
});
|
||||
},
|
||||
|
||||
getDatabases: function() {
|
||||
var self = this;
|
||||
this.fetch().done(function() {
|
||||
self.sort();
|
||||
});
|
||||
return this.models;
|
||||
},
|
||||
|
||||
createDatabaseURL: function(name, protocol, port) {
|
||||
var loc = window.location;
|
||||
var hash = window.location.hash;
|
||||
if (protocol) {
|
||||
if (protocol === "SSL" || protocol === "https:") {
|
||||
protocol = "https:";
|
||||
} else {
|
||||
protocol = "http:";
|
||||
}
|
||||
} else {
|
||||
protocol = loc.protocol;
|
||||
}
|
||||
port = port || loc.port;
|
||||
|
||||
var url = protocol
|
||||
+ "//"
|
||||
+ window.location.hostname
|
||||
+ ":"
|
||||
+ port
|
||||
+ "/_db/"
|
||||
+ encodeURIComponent(name)
|
||||
+ "/_admin/aardvark/index.html";
|
||||
if (hash) {
|
||||
url += hash;
|
||||
}
|
||||
return url;
|
||||
},
|
||||
|
||||
getCurrentDatabase: function() {
|
||||
var returnVal;
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
cache: false,
|
||||
url: "/_api/database/current",
|
||||
contentType: "application/json",
|
||||
processData: false,
|
||||
async: false,
|
||||
success: function(data) {
|
||||
if (data.code === 200) {
|
||||
returnVal = data.result.name;
|
||||
return;
|
||||
}
|
||||
returnVal = data;
|
||||
},
|
||||
error: function(data) {
|
||||
returnVal = data;
|
||||
}
|
||||
});
|
||||
return returnVal;
|
||||
}
|
||||
});
|
||||
}());
|
|
@ -0,0 +1,30 @@
|
|||
/*jslint indent: 2, nomen: true, maxlen: 120, vars: true, white: true, plusplus: true */
|
||||
/*global require, window, Backbone */
|
||||
|
||||
window.Database = Backbone.Model.extend({
|
||||
|
||||
idAttribute: "name",
|
||||
|
||||
initialize: function () {
|
||||
'use strict';
|
||||
},
|
||||
|
||||
isNew: function() {
|
||||
'use strict';
|
||||
return false;
|
||||
},
|
||||
sync: function(method, model, options) {
|
||||
'use strict';
|
||||
if (method === "update") {
|
||||
method = "create";
|
||||
}
|
||||
return Backbone.sync(method, model, options);
|
||||
},
|
||||
|
||||
url: "/_api/database",
|
||||
|
||||
defaults: {
|
||||
}
|
||||
|
||||
|
||||
});
|
|
@ -0,0 +1,71 @@
|
|||
<ul class="thumbnails2" id="databaseHeader">
|
||||
<div id="transparentHeader">
|
||||
<a class="arangoHeader">Databases</a>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div id="databaseDiv">
|
||||
<table id="databaseTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="dbThFirst">Name</td>
|
||||
<td class="dbThSecond">
|
||||
<span id="createDatabase" class="glyphicon glyphicon-plus-sign" data-original-title="Create a database"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="databaseTableBody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="createDatabaseModal" 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">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="btn btn-close" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button id="submitCreateDatabase" class="btn btn-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>
|
||||
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Really delete?</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-close" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button id="submitDeleteDatabase" class="btn btn-danger pull-right">Delete</button>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,16 @@
|
|||
<%
|
||||
if (list.length > 1) {
|
||||
%>
|
||||
<select id="dbSelectionList">
|
||||
<%
|
||||
list.each(function(o) {
|
||||
var i = o.get("name");
|
||||
%>
|
||||
<option id=<%=i%> <%=i===current?"selected":""%>><%=i%></option>
|
||||
<%
|
||||
});
|
||||
%>
|
||||
</select>
|
||||
<%
|
||||
}
|
||||
%>
|
|
@ -0,0 +1,164 @@
|
|||
/*jslint indent: 2, nomen: true, maxlen: 100, sloppy: true, vars: true, white: true, plusplus: true */
|
||||
/*global window, document, Backbone, EJS, SwaggerUi, hljs, $, arangoHelper */
|
||||
|
||||
window.databaseView = Backbone.View.extend({
|
||||
el: '#content',
|
||||
|
||||
template: new EJS({url: 'js/templates/databaseView.ejs'}),
|
||||
|
||||
currentDB: "",
|
||||
|
||||
events: {
|
||||
"click #createDatabase" : "createDatabase",
|
||||
"click #submitCreateDatabase" : "submitCreateDatabase",
|
||||
"click #selectDatabase" : "updateDatabase",
|
||||
"click #databaseTable .glyphicon-minus-sign" : "removeDatabase",
|
||||
"click #submitDeleteDatabase" : "submitRemoveDatabase",
|
||||
"click .databaseInactive a" : "changeDatabase"
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
var self = this;
|
||||
this.collection.fetch({async:false});
|
||||
},
|
||||
|
||||
render: function(){
|
||||
this.currentDatabase();
|
||||
$(this.el).html(this.template.render({}));
|
||||
this.renderTable();
|
||||
this.selectCurrentDatabase();
|
||||
return this;
|
||||
},
|
||||
|
||||
renderTable: function () {
|
||||
this.collection.map(function(dbs) {
|
||||
$("#databaseTable tbody").append(
|
||||
'<tr><td><a>' + dbs.get("name") + '</a></td>' +
|
||||
'<td><span class="glyphicon glyphicon-minus-sign"' +
|
||||
'data-original-title="Delete database"></span></td></tr>'
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
selectedDatabase: function () {
|
||||
return $('#selectDatabases').val();
|
||||
},
|
||||
|
||||
handleError: function(status, text, dbname) {
|
||||
if (status === 409) {
|
||||
arangoHelper.arangoError("Database " + dbname + " already exists.");
|
||||
return;
|
||||
}
|
||||
if (status === 400) {
|
||||
arangoHelper.arangoError("Invalid Parameters");
|
||||
return;
|
||||
}
|
||||
if (status === 403) {
|
||||
arangoHelper.arangoError("Insufficent rights. Execute this from _system database");
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
validateDatabaseInfo: function (db, user, pw) {
|
||||
if (user === "") {
|
||||
arangoHelper.arangoError("You have to define an owner for the new database");
|
||||
return false;
|
||||
}
|
||||
if (db === "") {
|
||||
arangoHelper.arangoError("You have to define a name for the new database");
|
||||
return false;
|
||||
}
|
||||
if (db.indexOf("_") === 0) {
|
||||
arangoHelper.arangoError("Databasename should not start with _");
|
||||
return false;
|
||||
}
|
||||
if (!db.match(/^[a-zA-Z][a-zA-Z0-9_\-]*$/)) {
|
||||
arangoHelper.arangoError("Databasename may only contain numbers, letters, _ and -");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
submitCreateDatabase: function() {
|
||||
var self = this;
|
||||
var name = $('#newDatabaseName').val();
|
||||
var userName = $('#newUser').val();
|
||||
var userPassword = $('#newPassword').val();
|
||||
if (!this.validateDatabaseInfo(name, userName, userPassword)) {
|
||||
return;
|
||||
}
|
||||
var options = {
|
||||
name: name,
|
||||
users: [
|
||||
{
|
||||
username: userName,
|
||||
passwd: userPassword,
|
||||
active: true
|
||||
}
|
||||
]
|
||||
};
|
||||
this.collection.create(options, {
|
||||
wait:true,
|
||||
error: function(data, err) {
|
||||
self.handleError(err.status, err.statusText, name);
|
||||
},
|
||||
success: function(data) {
|
||||
arangoHelper.arangoNotification("Database " + name + " created.");
|
||||
self.hideModal();
|
||||
self.updateDatabases();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
hideModal: function() {
|
||||
$('#createDatabaseModal').modal('hide');
|
||||
},
|
||||
|
||||
showModal: function() {
|
||||
$('#createDatabaseModal').modal('show');
|
||||
},
|
||||
|
||||
createDatabase: function() {
|
||||
this.showModal();
|
||||
},
|
||||
|
||||
submitRemoveDatabase: function(e) {
|
||||
var toDelete = this.collection.where({name: this.dbToDelete});
|
||||
toDelete[0].destroy({wait: true, url:"/_api/database/"+this.dbToDelete});
|
||||
arangoHelper.arangoNotification("Database " + this.dbToDelete + " deleted.");
|
||||
this.dbToDelete = '';
|
||||
$('#deleteDatabaseModal').modal('hide');
|
||||
this.updateDatabases();
|
||||
},
|
||||
|
||||
removeDatabase: function(e) {
|
||||
this.dbToDelete = $(e.currentTarget).parent().parent().children().first().text();
|
||||
$('#deleteDatabaseModal').modal('show');
|
||||
},
|
||||
|
||||
currentDatabase: function() {
|
||||
this.currentDB = this.collection.getCurrentDatabase();
|
||||
},
|
||||
|
||||
selectCurrentDatabase: function() {
|
||||
$('#databaseTableBody tr').addClass('databaseInactive');
|
||||
var tr = $('#databaseTableBody td:contains('+this.currentDB+')').parent();
|
||||
$(tr).removeClass('databaseInactive').addClass('databaseActive');
|
||||
},
|
||||
|
||||
changeDatabase: function(e) {
|
||||
var dbname = $(e.currentTarget).text();
|
||||
var route = '/_db/' + encodeURIComponent(dbname) + '/_admin/aardvark/index.html#databases';
|
||||
window.location = "http://"+window.location.host + route;
|
||||
},
|
||||
|
||||
updateDatabases: function() {
|
||||
var self = this;
|
||||
this.collection.fetch({
|
||||
success: function() {
|
||||
self.render();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
Loading…
Reference in New Issue