falcon-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From peeyu...@apache.org
Subject [11/16] falcon git commit: FALCON-2118 Proposal for new UI changes
Date Mon, 22 Aug 2016 04:48:04 GMT
http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/entityDetailsTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/entityDetailsTpl.html b/falcon-ui/app/html/entityDetailsTpl.html
index 6f1a4bc..2afefac 100644
--- a/falcon-ui/app/html/entityDetailsTpl.html
+++ b/falcon-ui/app/html/entityDetailsTpl.html
@@ -19,58 +19,101 @@
 -->
 <div class="container" id="entityDetails">
 
-  <div class="row">
-    <div class="col-sm-24">
-      <button class="btn " ui-sref="main">< Back to Search</button>
+  <div class="row pt15px">
+    <div class="col-sm-24 detailsHeaders pl0px">
+	<button class="btn" title="Back to search" ui-sref="main">< </button>
+		<span class="entityName">{{entity.name}}</span>
+        <span ng-class="{'blink-success': entity.status == 'RUNNING',
+                     'text-success': entity.status == 'SUCCEEDED',
+                     'blink-warning': entity.status == 'SUSPENDED',
+                     'blink-danger': entity.status == 'UNKNOWN'}"  ng-if="entity.type != 'cluster'">
+                     {{entity.status}}</span>
+    <br><br>
+    <div class="pull-left">
+      <table>
+        <tbody>
+          <tr>
+            <td class="buttonCell" colspan="9">
+          <div class="btn btn-gray btn-xs buttons-to-show" ng-click="scheduleEntity()" ng-if="entity.type != 'cluster' && entity.status == 'SUBMITTED'">
+            <span class="entypo play"></span> <div>Schedule</div>
+          </div>
+          <div class="btn btn-gray btn-xs buttons-to-show" ng-click="resumeEntity()" ng-if="entity.type != 'cluster' && entity.status == 'SUSPENDED'">
+            <span class="entypo play"></span> <div>Resume</div>
+          </div>
+          <div class="btn btn-gray btn-xs buttons-to-show" ng-click="suspendEntity()" ng-if="entity.type != 'cluster' && entity.status == 'RUNNING'">
+            <span class="entypo paus"></span> <div>Pause</div>
+          </div>
+          <div class="btn btn-gray btn-xs buttons-to-show" ng-click="editEntity()"
+            ng-disabled="entity.type === 'cluster' && (!isSafeMode() || !isSuperUser())"
+            ng-class="{disabledEditBtn: entity.type === 'cluster' && (!isSafeMode() || !isSuperUser())}"
+            title="{{(entity.type === 'cluster' && !isSafeMode() || (!isSuperUser())) ? 'Cluster entity update can only be performed by superuser during safemode' : ''}}">
+            <span class="entypo cog"></span> <div>Edit</div>
+          </div>
+          <div class="btn btn-gray btn-xs buttons-to-show" ng-click="cloneEntity()"  ng-if="entity.type != 'cluster'">
+            <span class="entypo docs"></span> <div>Copy</div>
+          </div>
+          <div class="btn btn-gray btn-xs buttons-to-show" ng-click="deleteEntity()">
+            <span class="entypo trash"></span> <div>Delete</div>
+          </div>
+          <div class="btn btn-gray btn-xs buttons-to-show" ng-click="downloadEntity()">
+            <span class="entypo down"></span> <div>XML</div>
+          </div>
+        </td>
+      </tr>
+      </tbody>
+      </table>
+
+    </div>
     </div>
   </div>
-
+<!--*
 	<h3 class="link-icons entity-title entity-link-null" id="entity-title">
 		{{entity.name}} <button type="button" class="detailsBT">
 		<span ng-class="displayIcon((entity.type | uppercase), entity.model)"></span> {{entityTypeLabel}}
 	</button>
-	</h3>
+	</h3>-->
 
-	<div class="row">
-		<div class="col-sm-24">
-			<div class="detailsBox">
-				<h4>
-					Dependencies
-				</h4>
-        <div class="dependencies-graph"><dependencies-graph name="entity.name" type="entity.type"/></div>
+	<div class="row pt15px" ng-if="entity.type != 'cluster'">
+		<div class="col-sm-24 pl0px">
+			<div class="entityDetailsBox">
+			<div class="dependencies-graph"><dependencies-graph name="entity.name" type="entity.type"/></div>
 			</div>
 		</div>
 	</div>
 
-	<div class="row">
-		<div class="col-sm-16">
-			<div class="detailsBox">
+	<div class="row pt15px">
+		<div class="col-sm-16 entityDetailsBox p10px" ng-if="entity.type != 'cluster'">
+			<div>
 				<h4>
-					Instances
+					INSTANCES
 				</h4>
 				<instances-list input="instancesList" type="entity.type" name="entity.name" instance-details="instanceDetails"
 												pages="pages" go-page="goPage" next-pages="nextPages" prev-pages="prevPages" change-pages-set="changePagesSet"
 												start="entity.start" end="entity.end"/>
 			</div>
 		</div>
-		<div class="col-sm-8">
-			<div class="summaryBox" ng-init="propsOpen = false">
+		<div ng-class="{'col-sm-8': entity.type !== 'cluster', 'col-sm-24': entity.type === 'cluster'}">
+			<div class="summaryBox" ng-init="propsOpen = entity.type === 'cluster'">
 				<div class="row">
 					<div class="col-sm-21">
 						<h4>
-							Properties
+							PROPERTIES
 						</h4>
 					</div>
 					<div class="col-sm-3">
-						<h4 class="pointer glyphicon" ng-click="propsOpen = !propsOpen" ng-class="propsOpen ? 'glyphicon-chevron-up':'glyphicon-chevron-down'"></h4>
+						<h4 ng-hide="entity.type === 'cluster'" class="pointer glyphicon" ng-click="propsOpen = !propsOpen" ng-class="propsOpen ? 'glyphicon-chevron-up':'glyphicon-chevron-down'"></h4>
 					</div>
 				</div>
         <div ng-show="propsOpen" class="animate-show">
 					<div ng-if="entity.type == 'feed'" ui-view="feedSummary"></div>
-					<div ng-if="entity.type == 'process'" ui-view="processSummary"></div>
+          <div ng-if="entity.type == 'cluster'" ui-view="clusterSummary"></div>
+          <div ng-if="entity.type == 'process' && entityTypeLabel == 'Process'" ui-view="processSummary"></div>
+          <div ng-if="entity.type == 'process' && entityTypeLabel == 'Snapshot'" ui-view="snapshotSummary"></div>
+          <div ng-if="entity.type == 'process' && (entityTypeLabel == 'HDFS Mirror' || entityTypeLabel == 'Hive Mirror')"
+            ui-view="datasetSummary"></div>
 				</div>
 			</div>
 		</div>
 	</div>
 
-</div>
\ No newline at end of file
+</div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/entitySummary.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/entitySummary.html b/falcon-ui/app/html/entitySummary.html
index 83e8a85..f3d7c2a 100644
--- a/falcon-ui/app/html/entitySummary.html
+++ b/falcon-ui/app/html/entitySummary.html
@@ -85,13 +85,13 @@
   </div>
 
   <div class="col-sm-8" ng-repeat="property in feed.properties">
-    <label>{{property.key}}</label>:
+    <label>{{feedPropertiesLabels[property.key]}}</label>:
     <span ng-if="property.key !== 'timeout'">{{optional(property.value)}}</span>
     <frequency ng-if="property.key === 'timeout'" value="property.value" prefix="at"/>
   </div>
 
   <div class="col-sm-8" ng-repeat="property in feed.customProperties | filter: {key: '!!'}">
-    <label>{{property.key}}</label>: {{property.value}}
+    <label>{{feedPropertiesLabels[property.key]}}</label>: {{property.value}}
   </div>
 
   <h4 class="col-sm-8" >
@@ -131,7 +131,7 @@
       <label>Timezone</label>: {{feed.timezone}}
     </div>
     <div class="col-sm-24">
-      <label>Retention</label>: <frequency value="cluster.retention" prefix="Archive in"/>
+      <label>Retention</label>: <frequency value="cluster.retention" prefix=""/>
     </div>
   </div>
   <div class="clearfix hidden-md"></div>
@@ -144,4 +144,4 @@
     <label class="col-sm-24" >Table uri</label>
     <div class="col-sm-24">{{optional(cluster.storage.catalog.catalogTable.uri)}}</div>
   </div>
-</div>
\ No newline at end of file
+</div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/error.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/error.html b/falcon-ui/app/html/error.html
new file mode 100644
index 0000000..683510e
--- /dev/null
+++ b/falcon-ui/app/html/error.html
@@ -0,0 +1,37 @@
+<!--
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 class="col-sm-24 dashboardBox login" ng-class="{showValidationStyle:showLoginVal.show}">
+  <div class="row">
+    <div class="col-sm-6"></div>
+    <div class="col-sm-12">
+
+      <div class="detailsBox centered">
+        <h3 class="auth" ng-if="httpError.code === 401 || httpError.code === 403">
+          Verify user name and password. If problem continues, contact your administrator.
+        </h3>
+        <h3 class="auth" ng-if="httpError.code !== 401 && httpError.code !== 403">
+          ERROR {{ httpError.code }} {{ httpError.error }}, try later.
+        </h3>
+      </div>
+
+    </div>
+    <div class="col-sm-6"></div>
+  </div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormAdvancedStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormAdvancedStepTpl.html b/falcon-ui/app/html/feed/feedFormAdvancedStepTpl.html
new file mode 100644
index 0000000..e50fc29
--- /dev/null
+++ b/falcon-ui/app/html/feed/feedFormAdvancedStepTpl.html
@@ -0,0 +1,166 @@
+<!--
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+-->
+<form name="feedForm" novalidate id="feedFormAdvancedStep">
+		<div class="col-xs-24"><label>Job Details</label></div>
+		<div class="col-xs-24 plr0px">
+			<div ng-repeat="property in feed.properties track by $index">
+				<div ng-if="property.key === 'queueName'">
+					<div class="col-xs-4">
+						<label class="light">Queue Name</label>
+						<input type="text" class="form-control"
+							ng-model="property.value" />
+					</div>
+				</div>
+				<div ng-if="property.key === 'jobPriority'">
+					<div class="col-xs-4">
+						<label class="light">Job Priority</label>
+						<select ng-model="property.value" class="form-control padding0">
+              <option value="" disabled selected style='display:none;'>-Select job-</option>
+              <option value="VERY_HIGH">Very high</option>
+              <option value="HIGH">High</option>
+              <option value="NORMAL">Normal</option>
+              <option value="LOW">Low</option>
+              <option value="VERY_LOW">Very Low</option>
+            </select>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-xs-24 plr0px">
+			<div class="col-xs-4">
+				<label class="col-xs-24 light plr0px">Late Arrival Cutoff</label>
+				<input type="text" class="col-xs-4" ng-keydown="validations.acceptOnlyNumber($event)"
+                 ng-model="feed.lateArrival.cutOff.quantity"
+                 ng-pattern="validations.patterns.twoDigits"/>
+        <select
+          ng-model="feed.lateArrival.cutOff.unit" class="col-xs-offset-1 col-xs-19">
+          <option value="" disabled selected style='display:none;'>-Select unit-</option>
+          <option value="minutes">minutes</option>
+          <option value="hours">hours</option>
+          <option value="days">days</option>
+          <option value="months">months</option>
+        </select>
+			</div>
+			<div class="col-xs-4">
+				<label class="light">Availability Flag</label>
+				<input type="text" class="form-control"
+					ng-model="feed.availabilityFlag"
+					validation-optional-message="{{validations.messages.value}}"
+					ng-pattern="validations.patterns.alpha">
+			</div>
+		</div>
+
+		<label class="col-xs-24">Performance & Throttling - Distributed Copy</label>
+
+		<div class="col-xs-24 plr0px">
+			<div ng-repeat="property in feed.properties track by $index">
+				<div ng-if="property.key === 'mapBandwidthKB'">
+					<div class="col-xs-4">
+						<label class="light">Max Bandwidth</label>
+						<input type="text" class="form-control"
+							ng-model="property.value">
+					</div>
+				</div>
+				<div ng-if="property.key === 'maxMaps'">
+					<div class="col-xs-4">
+						<label class="light">Max map jobs</label>
+						<input type="text" class="form-control"
+							ng-model="property.value">
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-xs-24 plr0px">
+			<div ng-repeat="property in feed.properties track by $index">
+				<div ng-if="property.key === 'parallel'">
+					<div class="col-xs-4">
+						<label class="col-xs-24 light plr0px">Parallel</label>
+						<input type="text" class="form-control"
+							ng-model="property.value">
+					</div>
+				</div>
+			</div>
+		</div>
+
+    <div class="col-xs-24"><label>Access Control List</label></div>
+    <div class="col-xs-24 plr0px">
+        <div class="col-xs-8">
+          <label class="light">Owner<mandatory-field></mandatory-field></label>
+          <input type="text" class="form-control" validation-message="{{validations.messages.acl.owner}}"
+                 ng-required="true"
+                 ng-pattern="validations.patterns.unixId"
+                 ng-model="feed.ACL.owner"/>
+        </div>
+        <div class="col-xs-8">
+          <label class="light">Group<mandatory-field></mandatory-field></label>
+          <input type="text" class="form-control" validation-message="{{validations.messages.acl.group}}"
+                 ng-required="true"
+                 ng-pattern="validations.patterns.unixId"
+                 ng-model="feed.ACL.group"/>
+        </div>
+				<div class="col-xs-24">
+		<div class="col-xs-8 plr0px">
+		<label class="light">Permissions<mandatory-field></mandatory-field></label>
+					  <acl-permissions acl-model="feed.ACL.permission"></acl-permissions>
+		</div>
+				</div>
+	</div>
+    <div class="col-xs-24"><label>Feed Schema</label></div>
+    <div class="col-xs-8">
+      <label class="light" tooltip="feed.schema.location">Location<mandatory-field></mandatory-field></label>
+      <input type="text" class="form-control" validation-message="{{validations.messages.location}}"
+        ng-maxlength="200"
+        ng-pattern="validations.patterns.osPath"
+        ng-model="feed.schema.location"/>
+    </div>
+    <div class="col-xs-8">
+      <label class="light" tooltip="feed.schema.provider">Provider<mandatory-field></mandatory-field></label>
+      <input type="text" class="form-control" validation-message="{{validations.messages.provider}}"
+        ng-pattern="validations.patterns.osPath"
+        ng-model="feed.schema.provider"/>
+    </div>
+	<div class="col-xs-8"></div>
+
+
+  <div class="col-xs-24 pb15px mt35">
+		<button id="feed.backToStep1" class="btn prevBtn" type="button" ng-click="goBack()" ng-disabled="buttonSpinners.backShow">
+		  PREVIOUS <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow">
+		</button>
+		<div class="pull-right">
+	    <a class="btn cnclBtn" ui-sref="main">
+	      CANCEL
+	    </a>
+	    <button id="feed.step1" class="btn nextBtn"
+	         ng-disabled="buttonSpinners.show"
+	         ng-click="goNext(feedForm.$invalid)"
+					 scroll-to-error>
+	      NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+	    </button>
+			<button class="btn advancedSaveBtn"
+           ng-disabled="feedForm.$invalid || buttonSpinners.saveShow"
+           ng-click="saveEntity(feedForm.$invalid)" scroll-to-error>
+        SAVE ADVANCED OPTIONS <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.saveShow" />
+      </button>
+		</div>
+  </div>
+
+</form>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormClusterDetailsTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormClusterDetailsTpl.html b/falcon-ui/app/html/feed/feedFormClusterDetailsTpl.html
new file mode 100644
index 0000000..7192fd7
--- /dev/null
+++ b/falcon-ui/app/html/feed/feedFormClusterDetailsTpl.html
@@ -0,0 +1,151 @@
+<!--
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+-->
+<feed-form-cluster-partitions></feed-form-cluster-partitions>
+
+<div class="row detailsBox">
+  <div class="col-xs-24 feedLocationNavBox nopointer plr0px">
+    <span class="col-xs-7" ng-show="!feed.storage.fileSystem.active">Default Storage Type</span>
+    <span class="col-xs-7" ng-show="feed.storage.fileSystem.active">Storage Type</span>
+
+    <div class="col-xs-17 feedLocationNav disabled">
+      <button class="btn btn-default pull-right"
+              ng-class="{active: feed.storage.catalog.active}"
+              ng-disabled="true">
+        Catalog Storage
+      </button>
+      <button class="btn btn-default pull-right"
+              ng-class="{active: feed.storage.fileSystem.active}"
+              ng-disabled="true">
+        File System
+      </button>
+    </div>
+  </div>
+
+  <div class="col-xs-24">
+    <label pl0px>LOCATION</label>
+    <label class="light">(if not defined, will use default location)</label>
+  </div>
+
+  <div class="col-xs-24"
+     ng-show="feed.storage.fileSystem.active"
+     ng-repeat="location in cluster.storage.fileSystem.locations">
+  <label class="light">{{capitalize(location.type)}} Path<mandatory-field></mandatory-field></label>
+  <input type="text"
+         placeholder="{{clusterLocationsPlaceHolders[location.type]}}"
+         class="form-control"
+         ng-model="location.path"
+         validation-optional-message="{{validations.messages.path}}"
+         ng-pattern="validations.patterns.osPath" />
+  </div>
+
+  <div class="col-xs-24" ng-show="feed.storage.catalog.active">
+    <label class="light">Table uri<mandatory-field></mandatory-field></label>
+    <input type="text" class="form-control"
+           ng-model="cluster.storage.catalog.catalogTable.uri"
+           validation-optional-message="{{validations.messages.path}}"
+           ng-pattern="validations.patterns.osPath"/>
+  </div>
+
+  <div class="col-xs-24">
+    <label class="mt15">VALIDITY</label>
+  </label></div>
+  <div class="col-xs-24">
+    <label class="mt15 light">Time Zone : <span>{{feed.timezone}}</span>
+  </label></div>
+  <div class="col-xs-24 validityBox plr0px">
+    <div class="col-xs-24 plr0px">
+      <div class="col-xs-6 startDateBox">
+        <label class="light">Start<mandatory-field></mandatory-field>
+        <input type="text"
+          name="startDateInput"
+          class="form-control dateInput"
+          placeholder="{{dateFormat | lowercase}}"
+          ng-model="cluster.validity.start.date"
+          simple-date-picker />
+        </label>
+      </div>
+      <div class="col-xs-6 startTimeBox">
+        <label class="light">Time<mandatory-field></mandatory-field>
+          <timepicker ng-change="constructDate()"
+                      ng-model="cluster.validity.start.time"
+                      hour-step="1"
+                      minute-step="1"
+                      show-meridian="true">
+          </timepicker>
+        </label>
+      </div>
+    </div>
+
+    <label class="col-xs-24 custom-danger validationMessageGral"
+           ng-if="!cluster.validity.start.date">
+      {{validations.messages.date.empty}}
+    </label>
+
+    <div class="col-xs-24 plr0px">
+      <div class="col-xs-6 endDateBox">
+        <label class="light">End<mandatory-field></mandatory-field>
+          <input type="text"
+            name="startDateInput"
+            class="form-control dateInput"
+            placeholder="{{dateFormat | lowercase}}"
+            ng-model="cluster.validity.end.date"
+            simple-date-picker />
+        </label>
+      </div>
+      <div class="col-xs-6 endTimeBox">
+        <label class="light">Time<mandatory-field></mandatory-field>
+          <timepicker ng-change="constructDate()"
+                      ng-model="cluster.validity.end.time"
+                      hour-step="1"
+                      minute-step="1"
+                      show-meridian="true">
+          </timepicker>
+        </label>
+      </div>
+    </div>
+
+    <label class="col-xs-24 custom-danger validationMessageGral"
+           ng-if="!cluster.validity.end.date">
+      {{validations.messages.date.empty}}
+    </label>
+  </div>
+
+  <label class="light col-xs-24">Retention<mandatory-field></mandatory-field></label>
+
+  <div class="col-xs-24 inlineInputsGroup">
+    <input type="text" class="form-control" validation-message="{{validations.messages.number}}"
+           ng-required="true" ng-model="cluster.retention.quantity" ng-keydown="validations.acceptOnlyNumber($event)"
+           ng-pattern="validations.patterns.twoDigits">
+
+    <select ng-model="cluster.retention.unit"
+            ng-required="true">
+      <option selected value="minutes">minutes</option>
+      <option value="hours">hours</option>
+      <option value="days">days</option>
+      <option value="months">months</option>
+    </select>
+  </div>
+
+  <div class="row">
+    <button type="button" class="btn btn-default pull-right btn-xs mt5" ng-click="removeCluster($index, cluster.type)">
+      <span class="entypo minus"></span> delete
+    </button>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormClusterPartitionsTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormClusterPartitionsTpl.html b/falcon-ui/app/html/feed/feedFormClusterPartitionsTpl.html
new file mode 100644
index 0000000..a09c74e
--- /dev/null
+++ b/falcon-ui/app/html/feed/feedFormClusterPartitionsTpl.html
@@ -0,0 +1,44 @@
+<!--
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 class="col-xs-24" ng-show="partitionList.length > 0">
+  <input type="checkbox" ng-model="selectPartition" />
+  <label class="light">Partition</label>
+  <div class="typeButtonsBox mt5" ng-show="selectPartition">
+    <div ng-repeat="partition in partitionList">
+      <div class="col-xs-16 panel panel-default mb5">
+        <div class="partition-panel-body">
+          <div class="col-xs-4 mt5">
+            {{partition.partitionName}}
+          </div>
+          <div class="col-xs-12 form-inline">
+            <input type="radio" ng-model="partition.mapping" value="mappedPartition"
+              ng-change="preparePartitionExpression(partitionList)" />
+            <input type="text" class="form-control" ng-model="partition.partitionText"
+              ng-change="preparePartitionExpression(partitionList)"
+              ng-disabled="partition.mapping!='mappedPartition'" />
+            <input type="radio" ng-model="partition.mapping" value="any"
+              ng-change="preparePartitionExpression(partitionList)" />
+            Any
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormClustersStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormClustersStepTpl.html b/falcon-ui/app/html/feed/feedFormClustersStepTpl.html
index b33b7f3..91f7d31 100644
--- a/falcon-ui/app/html/feed/feedFormClustersStepTpl.html
+++ b/falcon-ui/app/html/feed/feedFormClustersStepTpl.html
@@ -18,179 +18,107 @@
  */
 -->
 <form name="feedForm" novalidate id="feedFormClusterStep">
-  <button class="hidden" ng-click="goNext(feedForm.$invalid, 'forms.feed.summary')" ></button>
-  <div ng-repeat="cluster in feed.clusters">
-    <div class="row">
-      <h4 class="col-xs-24">{{capitalize(cluster.type)}} Cluster </h4>
+  <div class="feedFormClusters">
+    <div class="col-xs-24 pt5px">
+      <label class="light">Partitions (comma separated)</label>
+      <input type="text" class="form-control" validation-optional-message="{{validations.messages.partitions}}"
+        ng-pattern="validations.patterns.commaSeparated"
+        ng-blur="createFeedClusterPartitions()"
+        ng-model="feedPartitions" />
     </div>
 
-    <div class="row detailsBox">
-      <div class="col-xs-offset-1 col-xs-22">
-
-        <div class="row">
-          <div class="col-xs-24">
-            <select ng-model="cluster.name" validation-message="{{validations.messages.cluster}}"
-                    ng-required="true" class="col-xs-24 form-control padding0" id="clusterNameSelect">
-              <option value="" disabled selected style='display:none;'>-Select cluster-</option>
-              <option id="cluster_" ng-repeat="clusterItem in clusterList">{{clusterItem.name}}</option>
-            </select>
-          </div>
-
-
-          <div class="col-xs-24 feedLocationNavBox nopointer">
-            <h4 class="col-xs-7" ng-show="!feed.storage.fileSystem.active">Default Storage type</h4>
-            <h4 class="col-xs-7" ng-show="feed.storage.fileSystem.active">Storage type</h4>
-
-            <div class="col-xs-17 feedLocationNav disabled">
-              <button class="btn btn-default pull-right"
-                      ng-class="{active: feed.storage.catalog.active}"
-                      ng-disabled="true">
-                Catalog Storage
-              </button>
-              <button class="btn btn-default pull-right"
-                      ng-class="{active: feed.storage.fileSystem.active}"
-                      ng-disabled="true">
-                File System
-              </button>
-            </div>
-          </div>
-
-          <div class="col-xs-19">
-            <label>Location</label>
-            <label class="light">(if not defined, will use default location)</label>
-          </div>
-
-          <div class="col-xs-24"
-               ng-show="feed.storage.fileSystem.active"
-               ng-repeat="location in cluster.storage.fileSystem.locations">
-            <label class="light">{{location.type}} path</label>
-            <input type="text"
-                   placeholder="{{clusterLocationsPlaceHolders[location.type]}}"
-                   class="form-control"
-                   ng-model="location.path"
-                   validation-optional-message="{{validations.messages.path}}"
-                   ng-pattern="validations.patterns.osPath" />
-          </div>
-
-          <div class="col-xs-24 mb10" ng-show="feed.storage.catalog.active">
-            <label class="light">Table uri</label>
-            <input type="text" class="form-control"
-                   ng-model="cluster.storage.catalog.catalogTable.uri"
-                   validation-optional-message="{{validations.messages.path}}"
-                   ng-pattern="validations.patterns.osPath"/>
-          </div>
-          <div class="clearfix mb20"></div>
-          <label class="col-xs-24"> Validity </label>
-          <div class="col-xs-24 validityBox">
-            <div class="startDateBox">
-              <label>Start
-                <input type="text"
-                       name="startDateInput"
-                       class="form-control dateInput"
-                       placeholder="mm/dd/yyyy"
-                       datepicker-popup="{{dateFormat}}"
-                       ng-model="cluster.validity.start.date"
-                       is-open="cluster.validity.start.opened"
-                       ng-click="openDatePicker($event, cluster.validity.start)"
-                       ng-change="constructDate()"
-                       ng-required="true"
-                       simple-date>
-              </label>
-              <label class="col-xs-24 custom-danger validationMessageGral"
-                     ng-if="!cluster.validity.start.date">
-                {{validations.messages.date.empty}}
-              </label>
-            </div>
-            <div class="startTimeBox">
-              <label>Time
-                <timepicker ng-change="constructDate()"
-                            ng-model="cluster.validity.start.time"
-                            hour-step="1"
-                            minute-step="1"
-                            show-meridian="true">
-                </timepicker>
-              </label>
-            </div>
-            <div class="endDateBox">
-              <label>End
-                <input type="text"
-                       name="startDateInput"
-                       class="form-control dateInput"
-                       placeholder="mm/dd/yyyy"
-                       datepicker-popup="{{dateFormat}}"
-                       ng-model="cluster.validity.end.date"
-                       is-open="cluster.validity.end.opened"
-                       ng-click="openDatePicker($event, cluster.validity.end)"
-                       ng-change="constructDate()"
-                       ng-required="true"
-                       min-date="cluster.validity.start.date"
-                       simple-date>
-              </label>
-              <label class="col-xs-24 custom-danger validationMessageGral"
-                     ng-if="!cluster.validity.end.date">
-                {{validations.messages.date.empty}}
-              </label>
-            </div>
-            <div class="endTimeBox">
-              <label>Time
-                <timepicker ng-change="constructDate()"
-                            ng-model="cluster.validity.end.time"
-                            hour-step="1"
-                            minute-step="1"
-                            show-meridian="true">
-                </timepicker>
-              </label>
-            </div>
-          </div>
-
-          <label class="light col-xs-24"> Retention </label>
-
-          <div class="col-xs-24 inlineInputsGroup">
-            <input type="text" class="form-control" validation-message="{{validations.messages.number}}"
-                   ng-required="true" ng-model="cluster.retention.quantity" ng-keydown="validations.acceptOnlyNumber($event)"
-                   ng-pattern="validations.patterns.twoDigits">
-
-            <select ng-model="cluster.retention.unit"
-                    ng-required="true">
-              <option selected value="minutes">minutes</option>
-              <option value="hours">hours</option>
-              <option value="days">days</option>
-              <option value="months">months</option>
-            </select>
-          </div>
-
-          <div class="row"  ng-if="cluster.type !== 'source'">
-            <button type="button" class="btn btn-default pull-right btn-xs" ng-click="removeCluster($index)">
-              <span class="entypo minus"></span> delete
-            </button>
-          </div>
-
+    <div class="col-xs-24">
+      <label>Source Cluster<mandatory-field></mandatory-field></label>
+    </div>
 
-        </div>
+    <div class="col-xs-24">
+      <select ng-model="sourceClusterName"
+            ng-change="clearSourceClusterFlags()"
+            class="form-control padding0 clusterSelect">
+          <option value="" disabled selected style='display:none;'>-Select source cluster-</option>
+          <option id="cluster_" ng-repeat="clusterItem in clusterList">{{clusterItem.name}}</option>
+      </select>
+
+      <button type="button" class="btn btn-default btn-xs clusterAddBtn" ng-click="addSourceCluster()">
+        Add
+      </button>
+    </div>
+    <div class="col-xs-24">
+      <label class="custom-danger" ng-show="sourceClusterNotSelected">
+        You need to select the source cluster
+      </label>
+      <label class="custom-danger" ng-show="sourceClusterExists">
+        Source cluster is already added
+      </label>
+    </div>
 
-      </div>
+    <div class="col-xs-24 sourceClusterList" ng-show="(feed.clusters | filter:{type:'source'}).length > 0">
+      <label class="clusterListLabel mb7">Source Clusters</label>
+      <accordion close-others="false">
+        <accordion-group ng-repeat="cluster in feed.clusters | filter:{type:'source'}" is-open="cluster.isAccordionOpened">
+          <accordion-heading>{{ cluster.name }}</accordion-heading>
+          <feed-form-cluster-details></feed-form-cluster-details>
+        </accordion-group>
+      </accordion>
     </div>
   </div>
-  <div class="col-xs-24 mt10">
-    <button type="button" class="btn btn-default btn-xs" ng-click="addCluster()">
-      <span class="entypo plus"></span> add cluster
+  <div class="col-xs-24" ng-show="(feed.clusters | filter:{type:'source'}).length < 1">
+    <label class="custom-danger">
+      You need to provide at least one source cluster
+    </label>
+  </div>
+
+  <div class="col-xs-24">
+    <label>Target Cluster</label>
+  </div>
+  <div class="col-xs-24">
+    <select ng-model="targetClusterName"
+          ng-change="clearTargetClusterFlags()"
+          class="form-control padding0 clusterSelect">
+        <option value="" disabled selected style='display:none;'>-Select target cluster-</option>
+        <option id="cluster_" ng-repeat="clusterItem in clusterList">{{clusterItem.name}}</option>
+    </select>
+
+    <button type="button" class="btn btn-default btn-xs clusterAddBtn" ng-click="addTargetCluster()">
+      Add
     </button>
   </div>
 
-  <div class="col-xs-24 mt20">
+  <div class="col-xs-24">
+    <label class="custom-danger" ng-show="targetClusterNotSelected">
+      You need to select the target cluster
+    </label>
+    <label class="custom-danger" ng-show="targetClusterExists">
+      Target cluster is already added
+    </label>
+  </div>
+
+  <div class="col-xs-24 targetClusterList" ng-show="(feed.clusters | filter:{type:'target'}).length > 0">
+    <label class="clusterListLabel mb7">Target Clusters</label>
+    <accordion close-others="false">
+      <accordion-group ng-repeat="cluster in feed.clusters | filter:{type:'target'}" is-open="cluster.isAccordionOpened">
+        <accordion-heading>{{ cluster.name }}</accordion-heading>
+        <feed-form-cluster-details></feed-form-cluster-details>
+      </accordion-group>
+    </accordion>
+  </div>
+
+  <div class="col-xs-24 mt35 pb15px">
     <button id="feed.backToStep3"
-            class="btn prevBtn"
-            type="button"
-            ng-click="goBack('forms.feed.location')"
-            ng-disabled="buttonSpinners.backShow" >
-      Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
-    </button>
-    <button id="feed.step4" class="btn nextBtn pull-right"
-            ng-click="goNext(feedForm.$invalid, 'forms.feed.summary')" >
-      Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+        class="btn prevBtn"
+        type="button"
+        ng-click="goBack()"
+        ng-disabled="buttonSpinners.backShow" >
+      PREVIOUS <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
     </button>
-    <a class="pull-right" ui-sref="main">
-      Cancel
-    </a>
+    <div class="pull-right">
+        <a class="btn cnclBtn" ui-sref="main">
+          CANCEL
+        </a>
+         <button id="feed.step4" class="btn nextBtn"
+            ng-click="goNext(feedForm.$invalid)" scroll-to-error>
+            NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+        </button>
+     </div>
   </div>
-</form>
\ No newline at end of file
+</form>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormDataSourceTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormDataSourceTpl.html b/falcon-ui/app/html/feed/feedFormDataSourceTpl.html
new file mode 100644
index 0000000..04ea3a2
--- /dev/null
+++ b/falcon-ui/app/html/feed/feedFormDataSourceTpl.html
@@ -0,0 +1,148 @@
+<!--
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 class="datasourceBox">
+  <div class="col-xs-24">
+    <label class="light">Datasource<mandatory-field></mandatory-field></label>
+  </div>
+  <div class="col-xs-10">
+    <select ng-model="feed[feed.dataTransferType][dataSourceType].name"
+        ng-required="true"
+        class="form-control padding0"
+        validation-message="{{validations.messages.datasource}}">
+      <option value="" disabled style='display:none;'>Select transfer datasource</option>
+      <option ng-repeat="datasourceItem in datasourceList"
+              value="{{datasourceItem.name}}">
+        {{datasourceItem.name}}
+      </option>
+    </select>
+  </div>
+
+  <div class="col-xs-24">
+    <label class="light">Table<mandatory-field></mandatory-field></label>
+  </div>
+  <div class="col-xs-10">
+    <input type="text"
+        ng-required="true"
+        placeholder="Enter table name"
+        class="form-control"
+        ng-model="feed[feed.dataTransferType][dataSourceType].tableName"
+        validation-optional-message="{{validations.messages.table}}" />
+  </div>
+  <div class="col-xs-24 plr0px" ng-if="feed.dataTransferType === 'export'">
+    <div class="col-xs-24">
+      <label class="light">Load Method<mandatory-field></mandatory-field></label>
+    </div>
+
+    <div class="col-xs-12 plr0px mt5">
+      <div class="typeButtonsBox">
+        <div class="col-xs-12">
+          <span class="radio-inline">
+            <input type="radio" name="type" value="updateonly" ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].type"/>
+            Update Only
+        </div>
+        <div class="col-xs-12">
+          <span class="radio-inline">
+            <input type="radio" name="type" value="allowinsert" ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].type"/>
+            Allow Insert
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-24 plr0px" ng-if="feed.dataTransferType === 'import'">
+    <div class="col-xs-24">
+      <label class="light">Extract Type<mandatory-field></mandatory-field></label>
+    </div>
+
+    <div class="col-xs-12 plr0px mt5">
+      <div class="typeButtonsBox">
+        <div class="col-xs-8">
+          <span class="radio-inline">
+            <input type="radio" name="type" value="full"
+              ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].type"/>
+            Full
+        </div>
+        <div class="col-xs-8">
+          <span class="radio-inline">
+            <input type="radio" name="type" value="incremental" disabled="disabled"
+              ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].type"/>
+            Incremental
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-24">
+      <label class="light">Merge Type<mandatory-field></mandatory-field></label>
+    </div>
+
+    <div class="col-xs-12 plr0px mt5">
+      <div class="typeButtonsBox">
+        <div class="col-xs-8">
+          <span class="radio-inline">
+            <input type="radio" name="mergepolicy" value="snapshot"
+              ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].mergepolicy"/>
+            Snapshot
+        </div>
+        <div class="col-xs-8">
+          <span class="radio-inline">
+            <input type="radio" name="mergepolicy" value="append"
+              ng-model="feed[feed.dataTransferType][dataSourceType][dataTransferAction].mergepolicy"/>
+            Append
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-24">
+    <label class="light">Columns<mandatory-field></mandatory-field></label>
+  </div>
+
+  <div class="col-xs-12 mt5 plr0px">
+    <div class="typeButtonsBox">
+      <div class="col-xs-8">
+        <span class="radio-inline">
+          <input type="radio" name="fieldsType" value="all"
+            ng-model="feed[feed.dataTransferType][dataSourceType].columnsType"/>
+          All
+      </div>
+      <div class="col-xs-8">
+        <span class="radio-inline">
+          <input type="radio" name="fieldsType" value="include"
+            ng-model="feed[feed.dataTransferType][dataSourceType].columnsType"/>
+          Include
+      </div>
+      <div class="col-xs-8">
+        <span class="radio-inline">
+          <input type="radio" name="fieldsType" value="exclude"
+            ng-model="feed[feed.dataTransferType][dataSourceType].columnsType"/>
+          Exclude
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-16 mt5" ng-if="feed[feed.dataTransferType][dataSourceType].columnsType === 'include'">
+    <input type="text"
+        ng-required="true"
+        class="form-control"
+        ng-model="feed[feed.dataTransferType][dataSourceType].includesCSV" />
+  </div>
+  <div class="col-xs-16 mt5" ng-if="feed[feed.dataTransferType][dataSourceType].columnsType === 'exclude'">
+    <input type="text"
+        ng-required="true"
+        class="form-control"
+        ng-model="feed[feed.dataTransferType][dataSourceType].excludesCSV" />
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html b/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html
index 2a4f5c4..6af357c 100644
--- a/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html
+++ b/falcon-ui/app/html/feed/feedFormGeneralStepTpl.html
@@ -19,106 +19,463 @@
 -->
 <form name="feedForm" novalidate id="feedFormGeneralStep">
 
-    <div class="col-xs-24">
-      <label class="light">Name</label>
-      <input type="text" class="form-control" ng-disabled="!cloningMode" ng-keydown="validations.acceptNoSpaces($event)"
-             check-name="{type:'feed', check:cloningMode}" ng-class="{fakeInvalid:!validations.nameAvailable}"
-             ng-model="feed.name" ng-required="true" ng-pattern="validations.patterns.name"/>
-    </div>
-    <div class="col-xs-24">
-      <label class="light">Description</label>
-      <input type="text" class="form-control" validation-optional-message="{{validations.messages.description}}"
-        ng-model="feed.description"
-        ng-pattern="validations.patterns.freeText"/>
-    </div>
+	<div class="col-xs-4">
+    <label class="light" tooltip="feed.name">Feed Name<mandatory-field></mandatory-field></label>
+    <input type="text" class="form-control" ng-disabled="editingMode" ng-keydown="validations.acceptNoSpaces($event)"
+           check-name="{type:'feed', check:!editingMode}" ng-class="{fakeInvalid:!validations.nameAvailable}"
+           ng-model="feed.name" ng-required="true" ng-pattern="validations.patterns.name"/>
+  </div>
 
-    <div class="col-xs-24">
-      <label class="light">Tags</label>
-    </div>
+	<div class="col-xs-24">
+		<label class="light">Description</label>
+	</div>
+
+	<div class="col-xs-8">
+		<input type="text" class="form-control"
+				ng-model="feed.description"
+				ng-pattern="validations.patterns.freeText"/>
+	</div>
 
-    <div class="col-xs-24">
-      <div ng-repeat="tag in feed.tags">
-        <div class="row dynamic-table-spacer">
-          <div class="col-xs-10">
-            <input type="text" class="form-control" ng-model="tag.key"
-                   validation-optional-message="{{validations.messages.key}}"
-              ng-pattern="validations.patterns.alpha" ng-required="tag.value" placeholder="key"/>
-          </div>
-          <div class="col-xs-11">
-            <input type="text" class="form-control" validation-optional-message="{{validations.messages.value}}"
-              ng-model="tag.value" ng-pattern="validations.patterns.alpha" ng-required="tag.key" placeholder="value"/>
-          </div>
-          <div class="col-xs-3">
-            <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-if="$index>0">
-              <span class="entypo minus"></span> delete
-            </button>
-          </div>
+  <div class="col-xs-24">
+    <label class="light">Tags</label>
+  </div>
+
+  <div class="col-xs-12">
+    <div ng-repeat="tag in feed.tags">
+      <div class="row dynamic-table-spacer">
+        <div class="col-xs-8">
+          <input type="text" class="form-control" ng-model="tag.key"
+		validation-optional-message="{{validations.messages.key}}"
+		ng-pattern="validations.patterns.alpha" ng-required="tag.value" placeholder="key"/>
+        </div>
+        <div class="col-xs-8">
+          <input type="text" class="form-control" validation-optional-message="{{validations.messages.value}}"
+		ng-model="tag.value"
+			ng-pattern="validations.patterns.alpha" ng-required="tag.key" placeholder="value"/>
         </div>
+				<div class="col-xs-8">
+	        <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-disabled="xmlPreview.edit" ng-if="!$first || !$last">
+	          <span class="entypo minus"></span> delete
+	        </button>
+	        <button type="button" class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit" ng-if="$last">
+	          <span class="entypo plus"></span> add tag
+	        </button>
+	      </div>
       </div>
     </div>
-    <div class="col-xs-24 dynamic-table-spacer">
-      <button type="button" class="btn btn-default btn-xs" ng-click="addTag()">
-        <span class="entypo plus"></span> add tag
-      </button>
-    </div>
+  </div>
+  <div class="col-xs-24">
+    <label class="light" tooltip="feed.groups">
+			Feed Groups (comma separated)
+		</label>
+  </div>
 
-    <div class="col-xs-24">
-      <label class="light">Groups (comma separated)</label>
-      <input type="text" class="form-control" validation-optional-message="{{validations.messages.acl.group}}"
-        ng-pattern="validations.patterns.commaSeparated"
-        ng-model="feed.groups"/>
-    </div>
+	<div class="col-xs-8">
+    <input type="text" class="form-control" validation-optional-message="{{validations.messages.acl.group}}"
+      ng-pattern="validations.patterns.commaSeparated"
+      ng-model="feed.groups"/>
+  </div>
 
-    <div class="col-xs-24"><h4 class="tittle-in-row">Access Control List</h4></div>
-    <div class="col-xs-8">
-      <label class="light">Owner</label>
-      <input type="text" class="form-control" validation-message="{{validations.messages.acl.owner}}"
-             ng-required="true"
-             ng-pattern="validations.patterns.unixId"
-             ng-model="feed.ACL.owner"/>
-    </div>
-    <div class="col-xs-8">
-      <label class="light">Group</label>
-      <input type="text" class="form-control" validation-message="{{validations.messages.acl.group}}"
-             ng-required="true"
-             ng-pattern="validations.patterns.unixId"
-             ng-model="feed.ACL.group"/>
+	<div class="col-xs-24">
+    <label class="light">Type<mandatory-field></mandatory-field></label>
+  </div>
+
+	<div class="col-xs-4">
+		<select ng-model="feed.dataTransferType" ng-required="true"
+			class="form-control padding0" ng-change="onTypeChange(feed.dataTransferType)">
+			<option value="" disabled selected style='display:none;'>-Select feed type-</option>
+			<option value="hive">Hive</option>
+			<option value="hdfs">HDFS</option>
+			<option value="import">RDBMS Import</option>
+			<option value="export">RDBMS Export</option>
+		</select>
+	</div>
+
+	<div class="col-xs-24" ng-if="feed.dataTransferType !== ''">
+		<input type="checkbox" ng-checked="feed.enableFeedReplication"
+			ng-model="feed.enableFeedReplication" ng-disabled="xmlPreview.edit"/>
+		<label class="light">Enable Replication</label>
+	</div>
+	<div class="col-xs-24 plr0px" ng-if="feed.dataTransferType !== ''">
+		<div class="col-xs-12 plr0px">
+			<div class="col-xs-24 plr0px clusterBox">
+				<h3>Source(s)</h3>
+				<div ng-if="feed.dataTransferType === 'import'">
+					<feed-form-data-source></feed-form-data-source>
+				</div>
+				<div ng-if="feed.dataTransferType === 'hdfs' || feed.dataTransferType === 'hive' || feed.dataTransferType === 'export'">
+					<div class="col-xs-24 plr0px" ng-if="feed.dataTransferType === 'export'">
+						<div class="col-xs-24">
+					    <label class="light">Location</label>
+					  </div>
+						<label class="custom-danger" ng-show="feedForm.$submitted && !feed.sourceClusterLocationType">
+							You need to select a source location type.
+						</label>
+					  <div class="col-xs-24 mt5 plr0px">
+					    <div class="typeButtonsBox">
+					      <div class="col-xs-6">
+					        <span class="radio-inline">
+					          <input type="radio" name="sourceClusterLocationType" ng-required="!feed.sourceClusterLocationType"
+											value="hdfs" ng-model="feed.sourceClusterLocationType"
+											ng-checked="feed.dataTransferType === 'hdfs' || feed.sourceClusterLocationType === 'hdfs'"/>
+					          HDFS
+					      </div>
+					      <div class="col-xs-6">
+					        <span class="radio-inline">
+					          <input type="radio" name="sourceClusterLocationType" ng-required="!feed.sourceClusterLocationType"
+											value="hive" ng-model="feed.sourceClusterLocationType"
+											ng-checked="feed.dataTransferType === 'hive' || feed.sourceClusterLocationType ==='hive'"/>
+					          Hive
+					      </div>
+					    </div>
+						</div>
+					</div>
+					<div id="sourceClusters">
+						<div class="col-xs-24 plr0px" ng-repeat="sourceCluster in feed.clusters | filter:{type:'source'}" ng-if="$index > 0">
+							<div ng-if="feed.sourceClusterLocationType === 'hive'">
+								<feed-form-hive-storage
+									storage-info="{'clusterStorage':sourceCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}"
+									required="(feed.clusters | filter:{type:'source'}).length > 1" validations="validations">
+								</feed-form-hive-storage>
+							</div>
+							<div ng-if="feed.sourceClusterLocationType === 'hdfs'">
+								<feed-form-hdfs-storage
+									storage-info="{'clusterStorage':sourceCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}"
+									required="(feed.clusters | filter:{type:'source'}).length > 1" validations="validations">
+								</feed-form-hdfs-storage>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-xs-24 plr0px" ng-repeat="sourceCluster in feed.clusters | filter:{type:'source'}" ng-if='$index === 0'>
+						<div ng-if="feed.sourceClusterLocationType === 'hive'">
+							<feed-form-hive-storage storage-info="{'clusterStorage':sourceCluster,'clustersList':clustersList, 'feedClusters':feed.clusters,type:'source',validationMessage:validations.messages.number}"
+								required="(feed.clusters | filter:{type:'source'}).length === 1" validations="validations"
+								add="addClusterStorage(value)" show="toggleClusterStorage(value)"
+								open-date-picker="openDatePicker(event,container)" construct-date="constructDate()">
+							</feed-form-hive-storage>
+						</div>
+						<div ng-if="feed.sourceClusterLocationType === 'hdfs'">
+							<feed-form-hdfs-storage storage-info="{'clusterStorage':sourceCluster,'clustersList':clustersList, 'feedClusters':feed.clusters,type:'source',validationMessage:validations.messages.number}"
+								required="(feed.clusters | filter:{type:'source'}).length === 1" validations="validations"
+								add="addClusterStorage(value)" show="toggleClusterStorage(value)"
+								open-date-picker="openDatePicker(event,container)" construct-date="constructDate()">
+							</feed-form-hdfs-storage>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-xs-12 plr0px pl5">
+			<div class="col-xs-24 plr0px clusterBox"
+				ng-if="feed.dataTransferType === 'export' || feed.dataTransferType === 'import' || feed.enableFeedReplication">
+				<h3>Target(s)</h3>
+				<div ng-if="feed.dataTransferType === 'export'">
+					<feed-form-data-source></feed-form-data-source>
+				</div>
+				<div ng-if="feed.dataTransferType === 'import'">
+					<div class="col-xs-24 plr0px">
+						<div class="col-xs-24">
+							<label class="light">Location</label>
+						</div>
+						<label class="custom-danger" ng-show="feedForm.$submitted && !feed.targetClusterLocationType">
+							You need to select a target location type.
+						</label>
+						<div class="col-xs-24 mt5 plr0px">
+							<div class="typeButtonsBox">
+								<div class="col-xs-6">
+									<span class="radio-inline">
+										<input type="radio" name="targetClusterLocationType" ng-required="!feed.targetClusterLocationType"
+											value="hdfs" ng-model="feed.targetClusterLocationType"
+											ng-checked="feed.dataTransferType === 'hdfs' || feed.targetClusterLocationType === 'hdfs'"/>
+										HDFS
+								</div>
+								<div class="col-xs-6">
+									<span class="radio-inline">
+										<input type="radio" name="targetClusterLocationType" ng-required="!feed.targetClusterLocationType"
+											value="hive" ng-model="feed.targetClusterLocationType"
+											ng-checked="feed.dataTransferType === 'hive' || feed.targetClusterLocationType ==='hive'"/>
+										Hive
+								</div>
+							</div>
+						</div>
+					</div>
+					<div id="sourceClusters">
+						<div class="col-xs-24 plr0px" ng-repeat="sourceCluster in feed.clusters | filter:{type:'source'}" ng-if="$index > 0">
+							<div ng-if="feed.targetClusterLocationType === 'hive'">
+								<feed-form-hive-storage
+									storage-info="{'clusterStorage':sourceCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}"
+									required="(feed.clusters | filter:{type:'source'}).length > 1" validations="validations">
+								</feed-form-hive-storage>
+							</div>
+							<div ng-if="feed.targetClusterLocationType === 'hdfs'">
+								<feed-form-hdfs-storage
+									storage-info="{'clusterStorage':sourceCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}"
+									required="(feed.clusters | filter:{type:'source'}).length > 1" validations="validations">
+								</feed-form-hdfs-storage>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-xs-24 plr0px" ng-repeat="sourceCluster in feed.clusters | filter:{type:'source'}" ng-if='$index === 0'>
+						<div ng-if="feed.targetClusterLocationType === 'hive'">
+							<feed-form-hive-storage storage-info="{'clusterStorage':sourceCluster,'clustersList':clustersList, 'feedClusters':feed.clusters,type:'source',validationMessage:validations.messages.number}"
+								required="(feed.clusters | filter:{type:'source'}).length === 1" validations="validations"
+								add="addClusterStorage(value)" show="toggleClusterStorage(value)"
+								open-date-picker="openDatePicker(event,container)" construct-date="constructDate()">
+							</feed-form-hive-storage>
+						</div>
+						<div ng-if="feed.targetClusterLocationType === 'hdfs'">
+							<feed-form-hdfs-storage storage-info="{'clusterStorage':sourceCluster,'clustersList':clustersList, 'feedClusters':feed.clusters,type:'source',validationMessage:validations.messages.number}"
+								required="(feed.clusters | filter:{type:'source'}).length === 1" validations="validations"
+								add="addClusterStorage(value)" show="toggleClusterStorage(value)"
+								open-date-picker="openDatePicker(event,container)" construct-date="constructDate()">
+							</feed-form-hdfs-storage>
+						</div>
+					</div>
+				</div>
+
+				<div ng-if="feed.enableFeedReplication && (feed.dataTransferType === 'hdfs' || feed.dataTransferType === 'hive')">
+					<div id="targetClusters">
+						<div class="col-xs-24 plr0px" ng-repeat="targetCluster in feed.clusters | filter:{type:'target'}" ng-if='$index > 0'>
+							<div ng-if="feed.targetClusterLocationType === 'hive'">
+								<feed-form-hive-storage
+									storage-info="{'clusterStorage':targetCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}"
+									required="feed.enableFeedReplication && (feed.clusters | filter:{type:'target'}).length > 1"
+									validations="validations">
+								</feed-form-hive-storage>
+							</div>
+							<div ng-if="feed.targetClusterLocationType === 'hdfs'">
+								<feed-form-hdfs-storage
+									storage-info="{'clusterStorage':targetCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, readOnly:true}"
+									required="feed.enableFeedReplication && (feed.clusters | filter:{type:'target'}).length > 1"
+									validations="validations">
+								</feed-form-hdfs-storage>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-xs-24 plr0px" ng-repeat="targetCluster in feed.clusters | filter:{type:'target'}" ng-if='$index === 0'>
+						<div ng-if="feed.targetClusterLocationType === 'hive'">
+							<feed-form-hive-storage
+								storage-info="{'clusterStorage':targetCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters, type:'target'}"
+								validations="validations" add="addClusterStorage(value)"
+								required="feed.enableFeedReplication && (feed.clusters | filter:{type:'target'}).length === 1"
+								show="toggleClusterStorage(value)" open-date-picker="openDatePicker(event,container)"
+								construct-date="constructDate()">
+							</feed-form-hive-storage>
+						</div>
+						<div ng-if="feed.targetClusterLocationType === 'hdfs'">
+							<feed-form-hdfs-storage
+								storage-info="{'clusterStorage':targetCluster, 'clustersList':clustersList, 'feedClusters':feed.clusters,type:'target'}"
+								validations="validations" add="addClusterStorage(value)"
+								required="feed.enableFeedReplication && (feed.clusters | filter:{type:'target'}).length === 1"
+								show="toggleClusterStorage(value)" open-date-picker="openDatePicker(event,container)"
+								construct-date="constructDate()">
+							</feed-form-hdfs-storage>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="col-xs-24 plr0px" ng-if="feed.dataTransferType !== ''">
+    <div class="col-xs-12 plr0px clusterBoxEndLine">
     </div>
-    <div class="col-xs-8">
-      <label class="light">Permissions</label>
-      <input type="text" class="form-control" validation-message="{{validations.messages.acl.permission}}"
-             ng-required="true"
-             ng-pattern="validations.patterns.unixPermissions"
-             ng-model="feed.ACL.permission"/>
+    <div class="col-xs-12 plr0px pl5"
+			ng-if="feed.dataTransferType === 'export' || feed.dataTransferType === 'import' || feed.enableFeedReplication">
+      <div class="col-xs-24 plr0px clusterBoxEndLine">
+      </div>
     </div>
+  </div>
+
+	<div class="col-xs-24 frequencyBox plr0px">
+		<div class="col-xs-24">
+			<label>Frequency</label>
+		</div>
+		<div class="col-xs-24">
+			<label class="light">Repeat Every<mandatory-field></mandatory-field></label>
+		</div>
+		<div class="col-xs-24 plr0px">
+			<div class="col-xs-2">
+				<input type="text"
+							 name="frequencyQuantity"
+							 ng-model="feed.frequency.quantity"
+							 ng-pattern="validations.patterns.twoDigits"
+							 ng-keydown="validations.acceptOnlyNumber($event)"
+							 ng-keyup="checkMininumFrequency(feed.frequency.quantity, feed.frequency.unit, feedForm.frequencyQuantity)"
+							 class="form-control"
+							 ng-required="true"
+							 validation-message="{{validations.messages.number}}" />
+			</div>
+			<div class="col-xs-6">
+				<select ng-model="feed.frequency.unit" class="form-control padding0" ng-required="true"
+					ng-change="checkMininumFrequency(feed.frequency.quantity, feed.frequency.unit, feedForm.frequencyQuantity)">
+					<option selected value="minutes">minutes</option>
+					<option value="hours">hours</option>
+					<option value="days">days</option>
+					<option value="months">months</option>
+				</select>
+			</div>
+		</div>
+		<div class="col-xs-24 custom-danger" ng-if="!isFrequencyValid">{{validations.messages.frequency.minimum}}</div>
+
+		<div class="col-xs-24">
+			<label class="light">Timezone<mandatory-field></mandatory-field></label>
+		</div>
+		<div class="col-xs-8">
+			<time-zone-select ng-model="feed.timezone"></time-zone-select>
+		</div>
+	</div>
+
+	<div class="col-xs-24 advancedOption" ng-click="expandOptions = !expandOptions" id="feedAdvancedOption">
+    <label class="mt15 pointer blink-success">ADVANCED OPTIONS</label>
+    <i class="glyphicon glyphicon-chevron-down mt15" ng-if="!expandOptions"></i>
+    <i class="glyphicon glyphicon-chevron-up mt15" ng-if="expandOptions"></i>
+  </div>
 
-    <div class="col-xs-24"><h4 class="tittle-in-row">Schema</h4></div>
-    <div class="col-xs-12">
-      <label class="light">Location</label>
+	<div id="advancedOptionsBox" class="col-xs-24 plr0px" ng-class="{expanded:expandOptions}">
+		<div class="col-xs-24"><label>Job Details</label></div>
+		<div class="col-xs-24 plr0px">
+			<div ng-repeat="property in feed.properties track by $index">
+				<div ng-if="property.key === 'queueName'">
+					<div class="col-xs-4">
+						<label class="light">Queue Name</label>
+						<input type="text" class="form-control"
+							ng-model="property.value" />
+					</div>
+				</div>
+				<div ng-if="property.key === 'jobPriority'">
+					<div class="col-xs-4">
+						<label class="light">Job Priority</label>
+						<select ng-model="property.value" class="form-control padding0">
+              <option value="" disabled selected style='display:none;'>-Select job-</option>
+              <option value="VERY_HIGH">Very high</option>
+              <option value="HIGH">High</option>
+              <option value="NORMAL">Normal</option>
+              <option value="LOW">Low</option>
+              <option value="VERY_LOW">Very Low</option>
+            </select>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-xs-24 plr0px">
+			<div class="col-xs-4">
+				<label class="col-xs-24 light plr0px">Late Arrival Cutoff</label>
+				<input type="text" class="col-xs-4" ng-keydown="validations.acceptOnlyNumber($event)"
+                 ng-model="feed.lateArrival.cutOff.quantity"
+                 ng-pattern="validations.patterns.twoDigits"/>
+        <select
+          ng-model="feed.lateArrival.cutOff.unit" class="col-xs-offset-1 col-xs-19">
+          <option value="" disabled selected style='display:none;'>-Select unit-</option>
+          <option value="minutes">minutes</option>
+          <option value="hours">hours</option>
+          <option value="days">days</option>
+          <option value="months">months</option>
+        </select>
+			</div>
+			<div class="col-xs-4">
+				<label class="light">Availability Flag</label>
+				<input type="text" class="form-control"
+					ng-model="feed.availabilityFlag"
+					validation-optional-message="{{validations.messages.value}}"
+					ng-pattern="validations.patterns.alpha">
+			</div>
+		</div>
+
+		<label class="col-xs-24">Performance & Throttling - Distributed Copy</label>
+
+		<div class="col-xs-24 plr0px">
+			<div ng-repeat="property in feed.properties track by $index">
+				<div ng-if="property.key === 'mapBandwidthKB'">
+					<div class="col-xs-4">
+						<label class="light">Max Bandwidth</label>
+						<input type="text" class="form-control"
+							ng-model="property.value">
+					</div>
+				</div>
+				<div ng-if="property.key === 'maxMaps'">
+					<div class="col-xs-4">
+						<label class="light">Max map jobs</label>
+						<input type="text" class="form-control"
+							ng-model="property.value">
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-xs-24 plr0px">
+			<div ng-repeat="property in feed.properties track by $index">
+				<div ng-if="property.key === 'parallel'">
+					<div class="col-xs-4">
+						<label class="col-xs-24 light plr0px">Parallel</label>
+						<input type="text" class="form-control"
+							ng-model="property.value">
+					</div>
+				</div>
+			</div>
+		</div>
+
+    <div class="col-xs-24"><label>Access Control List</label></div>
+    <div class="col-xs-24 plr0px">
+        <div class="col-xs-8">
+          <label class="light">Owner<mandatory-field></mandatory-field></label>
+          <input type="text" class="form-control" validation-message="{{validations.messages.acl.owner}}"
+                 ng-required="true"
+                 ng-pattern="validations.patterns.unixId"
+                 ng-model="feed.ACL.owner"/>
+        </div>
+        <div class="col-xs-8">
+          <label class="light">Group<mandatory-field></mandatory-field></label>
+          <input type="text" class="form-control" validation-message="{{validations.messages.acl.group}}"
+                 ng-required="true"
+                 ng-pattern="validations.patterns.unixId"
+                 ng-model="feed.ACL.group"/>
+        </div>
+				<div class="col-xs-24">
+		<div class="col-xs-8 plr0px">
+		<label class="light">Permissions<mandatory-field></mandatory-field></label>
+					  <acl-permissions acl-model="feed.ACL.permission"></acl-permissions>
+		</div>
+				</div>
+		</div>
+    <div class="col-xs-24"><label>Feed Schema</label></div>
+    <div class="col-xs-8">
+      <label class="light" tooltip="feed.schema.location">Location<mandatory-field></mandatory-field></label>
       <input type="text" class="form-control" validation-message="{{validations.messages.location}}"
         ng-maxlength="200"
         ng-pattern="validations.patterns.osPath"
-        ng-model="feed.schema.location"
-        ng-required="true"/>
+        ng-model="feed.schema.location"/>
     </div>
-    <div class="col-xs-12">
-      <label class="light">Provider</label>
+    <div class="col-xs-8">
+      <label class="light" tooltip="feed.schema.provider">Provider<mandatory-field></mandatory-field></label>
       <input type="text" class="form-control" validation-message="{{validations.messages.provider}}"
         ng-pattern="validations.patterns.osPath"
-        ng-model="feed.schema.provider"
-        ng-required="true"/>
+        ng-model="feed.schema.provider"/>
     </div>
+		<div class="col-xs-8"></div>
+	</div>
 
-
-  <div class="col-xs-24 mt20">
-    <button id="feed.step1" class="btn nextBtn col-xs-6 pull-right"
-         ng-disabled="buttonSpinners.show"
-         ng-click="goNext(feedForm.$invalid, 'forms.feed.properties')">
-      Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
-    </button>
-    <a class="pull-right" ui-sref="main">
-      Cancel
-    </a>
+  <div class="col-xs-24 pb15px mt35">
+		<div class="pull-right">
+	    <a class="btn cnclBtn" ui-sref="main">
+	      CANCEL
+	    </a>
+	    <button id="feed.step1" class="btn nextBtn"
+	         ng-disabled="buttonSpinners.show"
+	         ng-click="goNext(feedForm.$invalid)"
+					 scroll-to-error>
+	      NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+	    </button>
+			<button id="feed.step5" class="btn nextBtn" ng-click="saveEntity(feedForm.$invalid)"
+				ng-disabled="feedForm.$invalid || buttonSpinners.saveShow">
+	      SAVE <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.saveShow" />
+	    </button>
+		</div>
   </div>
 
-</form>
\ No newline at end of file
+</form>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormLocationStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormLocationStepTpl.html b/falcon-ui/app/html/feed/feedFormLocationStepTpl.html
index 7c7355e..aefe7c0 100644
--- a/falcon-ui/app/html/feed/feedFormLocationStepTpl.html
+++ b/falcon-ui/app/html/feed/feedFormLocationStepTpl.html
@@ -20,9 +20,11 @@
 <form name="feedForm" novalidate id="feedFormLocationStep">
   <div class="col-xs-24 locationStep">
     <div class="row">
-      <div class="col-xs-24 feedLocationNavBox">
-        <h4 class="col-xs-10" ng-show="feed.storage.fileSystem.active">Default Storage type </h4>
-        <h4 class="col-xs-10" ng-show="feed.storage.catalog.active"> Storage type </h4>
+      <div class="col-xs-24 feedLocationNavBox plr0px mt15">
+        <span class="col-xs-10" ng-show="feed.storage.fileSystem.active"
+          tooltip="feed.location.storageType">Default Storage Type</span>
+        <span class="col-xs-10" ng-show="feed.storage.catalog.active"
+          tooltip="feed.location.storageType">Storage Type</span>
 
         <div class="col-xs-14 feedLocationNav">
           <button type="button"
@@ -41,13 +43,13 @@
         </div>
         <div class="clearfix"></div>
       </div>
-      <h4 class="col-xs-12">Default Location</h4>
+      <div class="col-xs-24"><label class="mt15">DEFAULT LOCATION</label></div>
       <div class="col-xs-24">
         <div ng-show="feed.storage.fileSystem.active"
           ng-repeat="location in feed.storage.fileSystem.locations" class="row">
 
           <div class="col-xs-8">
-            <label class="light">{{capitalize(location.type)}} path</label>
+            <label class="light">{{capitalize(location.type)}} Path<mandatory-field></mandatory-field></label>
           </div>
           <div class="pull-right" ng-show="location.focused">
             <label class="light">add</label>
@@ -59,10 +61,10 @@
           <div class="clearfix hidden-md"></div>
           <div class="col-xs-24">
             <input type="text" class="form-control" validation-message="{{validations.messages.path}}"
-              ng-required="true"
+              ng-required="feed.storage.fileSystem.active"
               ng-model="location.path"
               ng-pattern="validations.patterns.osPath"
-              ng-class="{firstInput: $index === 0}"
+              focus-if="feed.storage.fileSystem.active && $index === 0"
               ng-focus="location.focused = true"/>
           </div>
         </div>
@@ -71,12 +73,12 @@
 
       <div ng-show="feed.storage.catalog.active">
         <div class="col-xs-8">
-          <label class="light">Table uri</label>
+          <label class="light">Table uri<mandatory-field></mandatory-field></label>
         </div>
 
         <div class="pull-right" ng-show="feed.storage.catalog.catalogTable.focused">
           <label class="light">add</label>
-          <label ng-repeat="timeVariable in ['${YEAR}', '${MONTH}', '${DAY} ', '${HOUR}']"
+          <label ng-repeat="timeVariable in ['${YEAR}', '${MONTH}', '${DAY}', '${HOUR}']"
                  ng-click="appendVariable(timeVariable, feed.storage.catalog.catalogTable, 'uri')">
             {{timeVariable}}
           </label>
@@ -87,27 +89,27 @@
             ng-model="feed.storage.catalog.catalogTable.uri"
             ng-pattern="validations.patterns.tableUri"
             ng-required="feed.storage.catalog.active" validation-message="{{validations.messages.path}}"
+            focus-if="feed.storage.catalog.active"
             ng-focus="feed.storage.catalog.catalogTable.focused = true"/>
         </div>
 
       </div>
     </div>
-
-    <div class="row">
-      <div class="col-xs-24 mt20">
-        <button type="button"
-                id="feed.backToStep2" class="btn prevBtn"
-                ng-click="goBack('forms.feed.properties')"
-                ng-disabled="buttonSpinners.backShow">
-          Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
-        </button>
-        <button id="feed.step3" class="btn nextBtn pull-right" ng-click="goNext(feedForm.$invalid, 'forms.feed.clusters')" >
-          Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
-        </button>
-        <a class="pull-right" ui-sref="main">
-          Cancel
+    <div class="col-xs-24 mt35 pb15px pl0px">
+      <button type="button"
+              id="feed.backToStep2" class="btn prevBtn"
+              ng-click="goBack()"
+              ng-disabled="buttonSpinners.backShow">
+        PREVIOUS <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
+      </button>
+      <div class="pull-right">
+        <a class="btn cnclBtn" ui-sref="main">
+          CANCEL
         </a>
+        <button id="feed.step3" class="btn nextBtn" ng-click="goNext(feedForm.$invalid)" scroll-to-error>
+          NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+        </button>
       </div>
     </div>
   </div>
-</form>
\ No newline at end of file
+</form>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html b/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html
index 2e4cfd1..e2a4a44 100644
--- a/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html
+++ b/falcon-ui/app/html/feed/feedFormPropertiesStepTpl.html
@@ -19,143 +19,132 @@
 -->
 <form name="feedForm" novalidate id="feedFormPropertiesStep">
 
-    <h5 class="col-xs-24 mb10">Timing</h5>
-
-    <div class="col-xs-9 inlineInputsGroup">
-      <div class="light">Frequency</div>
-      <span>Every</span>
-      <input type="text" class="form-control" validation-message="{{validations.messages.number}}"
+	<div class="col-xs-24">
+      <label class="light" tooltip="feed.properties.frequency">
+				Frequency Every<mandatory-field></mandatory-field>
+			</label>
+		<div class="row dynamic-table-spacer">
+          <div class="col-xs-10">
+            <input type="text" class="form-control" validation-message="{{validations.messages.number}}"
              ng-model="feed.frequency.quantity" autofocus
              ng-required="true"
              ng-keydown="validations.acceptOnlyNumber($event)"
              ng-pattern="validations.patterns.twoDigits"/>
-
-      <select
-        ng-model="feed.frequency.unit"
-        ng-required="true">
-        <option selected value="minutes">minutes</option>
-        <option value="hours">hours</option>
-        <option value="days">days</option>
-        <option value="months">months</option>
-      </select>
-    </div>
-
-    <div class="col-xs-9 inlineInputsGroup">
-      <div class="light"><input type="checkbox" ng-model="feed.lateArrival.active" />Late Arrival</div>
-      <span>Up to</span>
-
-      <input type="text" class="form-control" ng-keydown="validations.acceptOnlyNumber($event)"
-        ng-model="feed.lateArrival.cutOff.quantity"
-        ng-disabled="!feed.lateArrival.active"
-        ng-pattern="validations.patterns.twoDigits"
-        ng-required="feed.lateArrival.active"/>
-
-      <select
-        ng-model="feed.lateArrival.cutOff.unit" ng-disabled="!feed.lateArrival.active"
-        ng-required="feed.lateArrival.active">
-        <option selected value="minutes">minutes</option>
-        <option value="hours">hours</option>
-        <option value="days">days</option>
-        <option value="months">months</option>
-      </select>
-    </div>
-    <div class="col-xs-6 inlineInputsGroup">
-      <div class="light">Availability Flag</div>
-      <input type="text" id="availInput" class="form-control"
-        ng-model="feed.availabilityFlag"
-        ng-pattern="validations.patterns.alpha">
-    </div>
-  </div>
-
-  <div class="col-xs-24">
-    <div class="row mt20">
-      <label class="col-xs-5 light">Timezone</label>
-      <time-zone-select ng-model="feed.timezone" class="col-xs-19"></time-zone-select>
-
-      <h5 class="col-xs-24">Properties</h5>
-
-      <div class="col-xs-5">
-        <label class="light">Name</label>
-      </div>
-      <div class="col-xs-19">
-        <label class="light">Value</label>
-      </div>
-      <div class="col-xs-24" id="feedPropertiesBox">
-        <div ng-repeat="property in feed.properties" class="row">
-
-          <label class="col-xs-5">{{property.key}}</label>
-
-          <div class="col-xs-19" ng-if="property.key !== 'timeout' && property.key !== 'jobPriority'">
-            <input type="text" class="form-control" placeholder="{{propPlaceholders[property.key]}}"
-              ng-model="property.value" validation-optional-message="{{validations.messages.value}}"
-              ng-pattern="validations.patterns.alpha"/>
           </div>
-          <div class="col-xs-19 inlineInputsGroup" ng-if="property.key === 'timeout'">
-            At
-            <input type="text" class="form-control" ng-keydown="validations.acceptOnlyNumber($event)"
-                   ng-model="property.value.quantity"
-                   ng-pattern="validations.patterns.twoDigits"/>
+          <div class="col-xs-11">
             <select
-              ng-model="property.value.unit">
-              <option value="" disabled selected style='display:none;'>-Select timeout-</option>
-              <option value="minutes">minutes</option>
-              <option value="hours">hours</option>
-              <option value="days">days</option>
-              <option value="months">months</option>
-            </select>
+				ng-model="feed.frequency.unit"
+				ng-required="true">
+				<option selected value="minutes">minutes</option>
+				<option value="hours">hours</option>
+				<option value="days">days</option>
+				<option value="months">months</option>
+			 </select>
           </div>
-          <div class="col-xs-19" ng-if="property.key === 'jobPriority'">
-            <select ng-model="property.value" class="form-control padding0">
-              <option value="" disabled selected style='display:none;'>-Select job-</option>
-              <option value="VERY_HIGH">Very high</option>
-              <option value="HIGH">High</option>
-              <option value="NORMAL">Normal</option>
-              <option value="LOW">Low</option>
-              <option value="VERY_LOW">Very Low</option>
-            </select>
+          <div class="col-xs-3">
           </div>
         </div>
-      </div>
-      <div class="col-xs-24">
-        <div ng-repeat="property in feed.customProperties" class="row">
-          <div class="col-xs-5 mt10">
-            <input type="text" class="form-control" placeholder="key"
-              ng-model="property.key" validation-optional-message="{{validations.messages.key}}"
-              ng-pattern="validations.patterns.alpha"
-              ng-required="property.value"/>
-          </div>
-
-          <div class="col-xs-15 mt10">
-            <input type="text" class="form-control" placeholder="value"
-              ng-model="property.value" validation-optional-message="{{validations.messages.value}}"
-              ng-pattern="validations.patterns.alpha"
-              ng-required="property.key"/>
+    </div>
+    <div class="col-xs-24">
+			<input type="checkbox" ng-model="feed.lateArrival.active" class="labelCheckBox" />
+      <label class="light" tooltip="feed.properties.lateArrival">
+				Late Arrival Upto<mandatory-field></mandatory-field>
+			</label>
+		<div class="row dynamic-table-spacer">
+		  <div class="col-xs-10">
+           <input type="text" class="form-control" ng-keydown="validations.acceptOnlyNumber($event)"
+			ng-model="feed.lateArrival.cutOff.quantity"
+			ng-disabled="!feed.lateArrival.active"
+			ng-pattern="validations.patterns.twoDigits"
+			ng-required="feed.lateArrival.active"/>
           </div>
-          <div class="col-xs-4 mt10">
-            <button type="button" class="btn btn-default btn-xs mt1" ng-click="removeCustomProperty($index)" ng-if="$index>0">
-              <span class="entypo minus"></span> delete
-            </button>
+          <div class="col-xs-11">
+            <select
+				ng-model="feed.lateArrival.cutOff.unit" ng-disabled="!feed.lateArrival.active"
+				ng-required="feed.lateArrival.active">
+				<option selected value="minutes">minutes</option>
+				<option value="hours">hours</option>
+				<option value="days">days</option>
+				<option value="months">months</option>
+			</select>
           </div>
+		</div>
+    </div>
+    <div class="col-xs-24">
+      <label class="light" tooltip="feed.properties.availabilityIndicator">
+				Availability Indicator<mandatory-field></mandatory-field>
+			</label>
+		<div class="row dynamic-table-spacer">
+		  <div class="col-xs-10">
+           <input type="text" id="availInput" class="form-control" ng-model="feed.availabilityFlag"
+				ng-pattern="validations.patterns.alpha"
+				validation-message="{{validations.messages.availabilityFlag}}"
+				ng-required="true">
+		   </div>
         </div>
-      </div>
-      <div class="col-xs-24 mt10">
-        <button type="button" class="btn btn-default btn-xs" ng-click="addCustomProperty()">
-          <span class="entypo plus"></span> add property
-        </button>
-      </div>
     </div>
-  </div>
-  <div class="col-xs-24 mt20">
-    <button id="feed.backToStep1" class="btn prevBtn" type="button"
-         ng-click="goBack('forms.feed.general')"
-         ng-disabled="buttonSpinners.backShow">
-      Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
-    </button>
-    <button id="feed.step2" class="btn nextBtn pull-right" ng-click="goNext(feedForm.$invalid, 'forms.feed.location')">
-      Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
-    </button>
-    <a class="pull-right" ui-sref="main">
-      Cancel
-    </a>
-  </div>
-</form>
\ No newline at end of file
+	<div class="col-xs-24">
+      <label class="light" tooltip="feed.properties.timezone">Timezone<mandatory-field></mandatory-field></label>
+	  <div class="row dynamic-table-spacer">
+		  <div class="col-xs-24">
+           <time-zone-select ng-model="feed.timezone" required="true"></time-zone-select>
+          </div>
+	  </div>
+	</div>
+	<div class="col-xs-24"><label class="mt15">PROPERTIES</label></div>
+	</div>
+	<div class="col-xs-24 plr0px mt10">
+		<table class="table properties">
+			<thead>
+			  <tr>
+				<th class="no-border-bottom col-xs-4">Name</th>
+				<th class="no-border-bottom col-xs-20">Value</th>
+			  </tr>
+			</thead>
+			<tbody>
+			  <tr ng-repeat="property in feed.properties" class="">
+				<td class="no-border-top font11px">{{feedPropertiesLabels[property.key]}}</td>
+				<td class="no-border-top"><div ng-if="property.key !== 'timeout' &amp;&amp; property.key !== 'jobPriority'">
+					<input type="text" class="form-control" placeholder="{{propPlaceholders[property.key]}}" ng-model="property.value" validation-optional-message="{{validations.messages.value}}" ng-pattern="validations.patterns.alpha">
+				  </div>
+				  <div class="col-xs-24 plr0px" ng-if="property.key === 'timeout'">
+						<span class="col-xs-1 plr0px pt5px pb5px">at</span>
+						<input type="text" class="col-xs-2 feedFormInputBorder" ng-keydown="validations.acceptOnlyNumber($event)" ng-model="property.value.quantity" ng-pattern="validations.patterns.twoDigits">
+						<div class="col-xs-1"></div>
+						<select ng-model="property.value.unit" class="col-xs-4">
+						  <option value="" disabled="" selected="" style="display:none;">-Select timeout-</option>
+						  <option value="minutes">minutes</option>
+						  <option value="hours">hours</option>
+						  <option value="days">days</option>
+						  <option value="months">months</option>
+						</select>
+				  </div>
+				  <div class="" ng-if="property.key === 'jobPriority'">
+					<select ng-model="property.value" class="form-control padding0">
+					  <option value="" disabled="" selected="" style="display:none;">-Select job-</option>
+					  <option value="VERY_HIGH">Very high</option>
+					  <option value="HIGH">High</option>
+					  <option value="NORMAL">Normal</option>
+					  <option value="LOW">Low</option>
+					  <option value="VERY_LOW">Very Low</option>
+					</select>
+				  </div>
+				</td>
+			  </tr>
+			</tbody>
+		  </table>
+	</div>
+    <div class="col-xs-24 mt35 pb15px plr0px">
+		<button id="feed.backToStep1" class="btn prevBtn" type="button" ng-click="goBack()" ng-disabled="buttonSpinners.backShow">
+		  PREVIOUS <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow">
+		</button>
+		<div class="pull-right">
+			<a class="btn cnclBtn" ui-sref="main">
+			  CANCEL
+			</a>
+			<button id="feed.step2" class="btn nextBtn" ng-click="goNext(feedForm.$invalid)" scroll-to-error>
+			  NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show">
+			</button>
+		</div>
+	</div>
+</form>


Mime
View raw message