couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From deathb...@apache.org
Subject [2/2] git commit: updated refs/heads/replicator-redesign to 26b3341
Date Mon, 23 Sep 2013 14:02:58 GMT
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 <deathbearbrown@gmail.com>
Authored: Fri Sep 20 15:39:25 2013 -0400
Committer: suelockwood <deathbearbrown@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>
+


Mime
View raw message