You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by de...@apache.org on 2013/09/23 16:02:58 UTC
[2/2] git commit: updated refs/heads/replicator-redesign to 26b3341
Fixing the replication UI
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/26b33414
Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/26b33414
Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/26b33414
Branch: refs/heads/replicator-redesign
Commit: 26b33414643fd35dd82b12826373e8dd9e5bac4b
Parents: 9165a71
Author: suelockwood <de...@gmail.com>
Authored: Fri Sep 20 15:39:25 2013 -0400
Committer: suelockwood <de...@gmail.com>
Committed: Mon Sep 23 10:02:49 2013 -0400
----------------------------------------------------------------------
.../replication/assets/less/replication.less | 27 ++++-
src/fauxton/app/addons/replication/route.js | 4 +-
.../app/addons/replication/templates/form.html | 118 +++++++++++++------
.../addons/replication/templates/options.html | 36 ++++++
src/fauxton/app/addons/replication/views.js | 62 +++++-----
.../app/templates/layouts/one_pane_notabs.html | 27 +++++
6 files changed, 200 insertions(+), 74 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb/blob/26b33414/src/fauxton/app/addons/replication/assets/less/replication.less
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/replication/assets/less/replication.less b/src/fauxton/app/addons/replication/assets/less/replication.less
index a301966..881f830 100644
--- a/src/fauxton/app/addons/replication/assets/less/replication.less
+++ b/src/fauxton/app/addons/replication/assets/less/replication.less
@@ -24,7 +24,30 @@ form#replication {
position: relative;
max-width: none;
width: auto;
-
+ .span12{
+ margin-left: 0;
+ padding-bottom: 20px;
+ }
+ .nav-tabs{
+ margin-bottom: 0;
+ border: 0;
+ }
+ .tab-content.small-tabs{
+ margin-top: 0;
+ border: 1px solid #e3e3e3;
+ margin-bottom: 10px;
+ .tab-pane {
+ padding: 30px 20px;
+ }
+ > .active {
+ display: block;
+ background-color: #fff;
+ }
+ }
+ h3 {
+ margin-top: 0;
+ line-height: 27px
+ }
.form_set{
width: 350px;
display: inline-block;
@@ -157,6 +180,7 @@ form#replication {
}
#replicationStatus{
+
&.showHeader{
li.header{
display: block;
@@ -194,3 +218,4 @@ form#replication {
}
}
}
+
http://git-wip-us.apache.org/repos/asf/couchdb/blob/26b33414/src/fauxton/app/addons/replication/route.js
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/replication/route.js b/src/fauxton/app/addons/replication/route.js
index 7ea318c..0dd25a5 100644
--- a/src/fauxton/app/addons/replication/route.js
+++ b/src/fauxton/app/addons/replication/route.js
@@ -18,7 +18,7 @@ define([
],
function(app, FauxtonAPI, Replication, Views) {
var RepRouteObject = FauxtonAPI.RouteObject.extend({
- layout: "one_pane",
+ layout: "one_pane_notabs",
roles: ["_admin"],
routes: {
"replication": "defaultView",
@@ -29,7 +29,7 @@ function(app, FauxtonAPI, Replication, Views) {
return app.host+"/_replication";
},
crumbs: [
- {"name": "Replicate changes from: ", "link": "replication"}
+ {"name": "", "link": "replication"}
],
defaultView: function(dbname){
this.databases = new Replication.DBList({});
http://git-wip-us.apache.org/repos/asf/couchdb/blob/26b33414/src/fauxton/app/addons/replication/templates/form.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/replication/templates/form.html b/src/fauxton/app/addons/replication/templates/form.html
index 32a87dc..1d56972 100644
--- a/src/fauxton/app/addons/replication/templates/form.html
+++ b/src/fauxton/app/addons/replication/templates/form.html
@@ -13,61 +13,105 @@ the License.
-->
<form id="replication" class="form-horizontal">
- <div class="from form_set local">
- <div class="btn-group">
- <button class="btn local-btn" type="button" value="local">Local</button>
- <button class="btn remote-btn" type="button" value="remote">Remote</button>
- </div>
+ <!-- SOURCE -->
+ <div class="row span12" id="step1">
+ <div class="span2">
+ <h3>FROM: </h3>
+ </div>
+ <div class="source span10">
+ <p>Select a database to replicate.</p>
+ <ul class="nav nav-tabs" id="sourceTabs">
+ <li class="active">
+ <a class="btn local-btn" data-tab="source_local" href="#">My Databases</a>
+ </li>
+ <li>
+ <a class="btn remote-btn" data-tab="source_remote" href="#">Remote Database</a>
+ </li>
+ </ul>
+
+ <div class="tab-content small-tabs">
+ <div class="tab-pane active" id="source_local">
+ <select id="from_name" name="source">
+ <option value="">Select a database</option>
+ <% _.each( databases, function( db, i ){ %>
+ <option value="<%=db.name%>" <% if(selectedDB == db.name){%>selected<%}%> ><%=db.name%></option>
+ <% }); %>
+ </select>
+ </div>
- <div class="from_local local_option">
- <select id="from_name" name="source">
- <% _.each( databases, function( db, i ){ %>
- <option value="<%=db.name%>" <% if(selectedDB == db.name){%>selected<%}%> ><%=db.name%></option>
- <% }); %>
- </select>
+ <div class="tab-pane" id="source_remote">
+ <input type="text" id="from_url" name="source" size="30" value="http://">
+ <small>e.g. http://username:password@user.cloudant.com/database</small>
+ </div>
</div>
- <div class="from_to_remote remote_option">
- <input type="text" id="from_url" name="source" size="30" value="http://">
+ <div id="options-here">
</div>
</div>
+ </div>
- <div class="form_set middle">
- <span class="circle "></span>
- <a href="#" title="Switch Target and Source" class="swap">
- <span class="fonticon-swap-arrows"></span>
- </a>
- </span>
+ <div class="row span12" id="step2">
+ <div class="span2">
+ <h3>TO:</h3>
</div>
-
- <div class="to form_set local">
- <div class="btn-group">
- <button class="btn local-btn" type="button" value="local">Local</button>
- <button class="btn remote-btn" type="button" value="remote">Remote</button>
- </div>
- <div class="to_local local_option">
- <input type="text" id="to_name" name="target" size="30" placeholder="database name">
+ <div class="target span10">
+ <p>Where do you want to replicate your data?</p>
+ <div class="btn-group" id="create_target">
+ <button class="btn active" type="button" value="false">Existing Database</button>
+ <button class="btn" type="button" value="true">New Database</button>
+ <input type="checkbox" name="create_target" value="true" class="hide"/>
</div>
+ </div>
+ </div>
- <div class="to_remote remote_option">
- <input type="text" id="to_url" name="target" size="30" value="http://">
- </div>
+ <!--TARGET-->
+ <div class="row span12" id="step3">
+ <div class="span2">
</div>
+ <div class="target span10">
+ <p>Select a target database for your database.</p>
+ <ul class="nav nav-tabs" id="targetTabs">
+ <li class="active">
+ <a href="#" class="btn local-btn" data-tab="target_local">My Databases</a>
+ </li>
+ <li>
+ <a href="#" class="btn remote-btn" data-tab="target_remote">Remote Database</a>
+ </li>
+ </ul>
+ <div class="tab-content small-tabs">
+ <div class="tab-pane active" id="target_local">
+ <input type="text" id="to_name" name="target" size="30" placeholder="Select a target database">
+ </div>
+
+ <div class="tab-pane" id="target_remote">
+ <input type="text" id="to_url" name="target" size="30" value="http://">
+ <small>e.g. http://username:password@user.cloudant.com/database</small>
+ </div>
+ </div>
- <div class="actions">
- <div class="control-group">
<label for="continuous">
<input type="checkbox" name="continuous" value="true" id="continuous">
Continuous
</label>
- <label for="createTarget">
- <input type="checkbox" name="create_target" value="true" id="createTarget">
- Create Target <a href="<%=getDocUrl('replication_doc')%>" target="_blank"><i class="icon-question-sign" rel="tooltip" title="Create the target database"></i></a>
- </label>
</div>
- <button class="btn btn-success btn-large save" type="submit">Replicate</button>
+ </div>
+ <div class="row span12" id="step1">
+ <div class="span2">
+ <h3>NAME: </h3>
+ </div>
+ <div class="source span10">
+ <p>Give this replication task an ID. (optional)</p>
+ <input type="text" id="repID" name="_id" size="30" value="" placeholder="e.g. my_rep">
+ </div>
+ </div>
+
+
+
+
+ <div class="actions">
+ <button class="button green save fonticon-replicate" type="submit">Replicate</button>
</div>
</form>
http://git-wip-us.apache.org/repos/asf/couchdb/blob/26b33414/src/fauxton/app/addons/replication/templates/options.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/replication/templates/options.html b/src/fauxton/app/addons/replication/templates/options.html
new file mode 100644
index 0000000..5c6465e
--- /dev/null
+++ b/src/fauxton/app/addons/replication/templates/options.html
@@ -0,0 +1,36 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+
+<span class="options off">Advanced Options</span>
+<div class="advancedOptions hide">
+ <h4>Apply filters</h4>
+ <p>Sometimes you don't want to transfer all documents from source to target. You can include one or more filter functions in a design document on the source and then tell the replicator to use them.</p>
+ <label for="filter">Enter the design doc and filter name</label>
+ <input type="text" placeholder="myddoc/myfilter" name="filter" id="filter"/>
+ <label for="query">Add query parameters (optional)</label>
+ <input type="text" placeholder='{"key":"value"}' name="query_params" id="query"/>
+
+ <hr>
+ <h4>Named Document Replication</h4>
+ <p>Sometimes you only want to replicate some documents. For this simple case you do not need to write a filter function. Simply add the list of keys, separated by commas.</p>
+ <input type="text" placeholder="foo, bar, baz" name="doc_ids" id="doc_ids"/>
+
+ <hr>
+ <h4>Replicate through a proxy</h4>
+ <p>Pass a "proxy" argument in the replication data to have replication go through an HTTP proxy</p>
+ <input type="text" placeholder="http://localhost:8888" name="proxy" id="proxy"/>
+
+</div>
+
http://git-wip-us.apache.org/repos/asf/couchdb/blob/26b33414/src/fauxton/app/addons/replication/views.js
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/replication/views.js b/src/fauxton/app/addons/replication/views.js
index f4b96fd..337fd5c 100644
--- a/src/fauxton/app/addons/replication/views.js
+++ b/src/fauxton/app/addons/replication/views.js
@@ -46,9 +46,9 @@ function(app, FauxtonAPI, Components, replication) {
template: "addons/replication/templates/form",
events: {
"submit #replication": "validate",
- "click .btn-group .btn": "showFields",
- "click .swap": "swapFields",
- "click .options": "toggleAdvancedOptions"
+ "click .options": "toggleAdvancedOptions",
+ "click .nav-tabs a": "tabs",
+ "change #from_name": "showAdvancedOptions"
},
initialize: function(options){
this.status = options.status;
@@ -62,9 +62,7 @@ function(app, FauxtonAPI, Components, replication) {
});
this.dbSearchTypeahead.render();
-
},
-
beforeRender: function(){
this.insertView("#replicationStatus", new View.ReplicationList({
collection: this.status
@@ -79,16 +77,6 @@ function(app, FauxtonAPI, Components, replication) {
disableFields: function(){
this.$el.find('input:hidden','select:hidden').attr('disabled',true);
},
- showFields: function(e){
- var $currentTarget = this.$(e.currentTarget),
- targetVal = $currentTarget.val();
-
- if (targetVal === "local"){
- $currentTarget.parents('.form_set').addClass('local');
- }else{
- $currentTarget.parents('.form_set').removeClass('local');
- }
- },
establish: function(){
return [ this.collection.fetch(), this.status.fetch()];
},
@@ -130,6 +118,10 @@ function(app, FauxtonAPI, Components, replication) {
selectedDB: this.selectedDB
};
},
+ showAdvancedOptions: function(e){
+ var thisview = this.insertView("#options-here", new View.AdvancedOptions({}));
+ thisview.render();
+ },
startReplication: function(json){
var that = this;
this.newRepModel.save(json,{
@@ -153,7 +145,22 @@ function(app, FauxtonAPI, Components, replication) {
}
});
this.enableFields();
- },
+ },
+ tabs: function(e){
+ e.preventDefault();
+ var $currentTarget = this.$(e.currentTarget),
+ getTabID = "#"+$currentTarget.attr('data-tab');
+
+ $currentTarget.parents('ul').find('.active').removeClass('active');
+ $currentTarget.parents('li').addClass('active');
+
+ $(getTabID).parents('.tab-content').find('.active').removeClass('active');
+ $(getTabID).addClass('active');
+ },
+ toggleAdvancedOptions: function(e){
+ $(e.currentTarget).toggleClass("off");
+ $('.advancedOptions').toggle("hidden").find('input').removeAttr('disabled');
+ },
updateButtonText: function(wait){
var $button = this.$('#replication button[type=submit]');
if(wait){
@@ -173,30 +180,17 @@ function(app, FauxtonAPI, Components, replication) {
this.updateButtonText(true);
this.startReplication(formJSON);
- },
- swapFields: function(e){
- e.preventDefault();
- //WALL O' VARIABLES
- var $fromSelect = this.$('#from_name'),
- $toSelect = this.$('#to_name'),
- $toInput = this.$('#to_url'),
- $fromInput = this.$('#from_url'),
- fromSelectVal = $fromSelect.val(),
- fromInputVal = $fromInput.val(),
- toSelectVal = $toSelect.val(),
- toInputVal = $toInput.val();
-
- $fromSelect.val(toSelectVal);
- $toSelect.val(fromSelectVal);
-
- $fromInput.val(toInputVal);
- $toInput.val(fromInputVal);
}
});
+ View.AdvancedOptions = FauxtonAPI.View.extend({
+ template: "addons/replication/templates/options"
+ });
+
View.ReplicationList = FauxtonAPI.View.extend({
tagName: "ul",
+ className: "testing",
initialize: function(){
Events.bind('update:tasks', this.establish, this);
this.listenTo(this.collection, "reset", this.render);
http://git-wip-us.apache.org/repos/asf/couchdb/blob/26b33414/src/fauxton/app/templates/layouts/one_pane_notabs.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/templates/layouts/one_pane_notabs.html b/src/fauxton/app/templates/layouts/one_pane_notabs.html
new file mode 100644
index 0000000..f58661f
--- /dev/null
+++ b/src/fauxton/app/templates/layouts/one_pane_notabs.html
@@ -0,0 +1,27 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<div id="primary-navbar"></div>
+<div id="dashboard" class="container-fluid one-pane">
+ <div class="fixed-header">
+ <div id="breadcrumbs"></div>
+ <div id="api-navbar"></div>
+ </div>
+
+
+ <div class="row-fluid content-area">
+ <div id="dashboard-content" class="window-resizeable"></div>
+ </div>
+</div>
+