falcon-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From peeyu...@apache.org
Subject [10/16] falcon git commit: FALCON-2118 Proposal for new UI changes
Date Mon, 22 Aug 2016 04:48:03 GMT
http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormSummaryStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormSummaryStepTpl.html b/falcon-ui/app/html/feed/feedFormSummaryStepTpl.html
index a8a4844..a77d310 100644
--- a/falcon-ui/app/html/feed/feedFormSummaryStepTpl.html
+++ b/falcon-ui/app/html/feed/feedFormSummaryStepTpl.html
@@ -17,147 +17,208 @@
  * limitations under the License.
  */
 -->
-<div class="row" id="feedFormSummaryStep">
+<div class="row feedSummaryRow" id="feedSummaryStep">
   <h4 class="col-sm-24">
     General
   </h4>
-  <div class="col-sm-12">
-    <label>Name</label>: {{feed.name}}
+  <div class="col-sm-24">
+    <label>Feed Name</label>: <span>{{feed.name}}</span>
   </div>
-  <div class="col-sm-12">
-    <label>Description</label>: {{optional(feed.description)}}
+  <div class="col-sm-24">
+    <label>Description</label>:<span> {{optional(feed.description)}}</span>
   </div>
-
-  <h4 class="col-sm-24">
-    Tags
-  </h4>
   <div class="col-sm-24">
+    <label>Tags</label>:
     <div ng-repeat="tag in feed.tags | filter:{key: '!!'}">
-      {{tag.key}} = {{tag.value}}
+      <span>{{tag.key}} = {{tag.value}}</span>
     </div>
-    <div ng-show="!hasTags()">No tags selected</div>
+    <div ng-show="!hasTags()"><span>No tags selected</span></div>
   </div>
 
-  <h4 class="col-sm-24">
-    Groups
-  </h4>
   <div class="col-sm-24">
+    <label>Feed Groups</label>:
     {{feed.groups}}
-    <div ng-show="!feed.groups">No groups selected</div>
+    <div ng-show="!feed.groups"><span>No groups selected</span></div>
   </div>
 
   <h4 class="col-sm-24">
     Access Control List
   </h4>
-  <div class="col-sm-8">
-    <label>Owner</label>: {{optional(feed.ACL.owner)}}
-  </div>
-  <div class="col-sm-8">
-    <label>Group</label>: {{optional(feed.ACL.group)}}
-  </div>
-  <div class="col-sm-8">
-    <label>Permissions</label>: {{optional(feed.ACL.permission)}}
+  <div class="col-sm-24">
+    <label>Owner</label>: <span>{{optional(feed.ACL.owner)}}</span>
+    <label>Group</label>: <span>{{optional(feed.ACL.group)}}</span>
+    <label>Permissions</label>:<span> {{optional(feed.ACL.permission)}}</span>
   </div>
 
   <h4 class="col-sm-24">
-    Schema
+    Feed Schema
   </h4>
 
-  <div class="col-sm-12">
-    <label>Location</label>: {{optional(feed.schema.location)}}
-  </div>
-  <div class="col-sm-12">
-    <label>Provider</label>: {{optional(feed.schema.provider)}}
+  <div class="col-sm-24">
+    <label>Location</label>: <span>{{optional(feed.schema.location)}}</span>
+    <label>Provider</label>: <span>{{optional(feed.schema.provider)}}</span>
   </div>
 
   <h4 class="col-sm-24">
     Properties
   </h4>
 
-  <div class="col-sm-8">
-    <label>Frequency</label>: <frequency value="feed.frequency" prefix="Every"/>
+  <div class="col-sm-24">
+    <label>Frequency</label>:<span> <frequency value="feed.frequency" prefix="Every"/></span>
   </div>
-  <div class="col-sm-8">
-    <label>Late Arrival</label>: <frequency value="feed.lateArrival.cutOff" prefix="Up to"/>
+  <div class="col-sm-24">
+    <label>Late Arrival</label>:<span> <frequency value="feed.lateArrival.cutOff" prefix="Up to"/></span>
   </div>
-  <div class="col-sm-8">
-    <label>Availability Flag</label>: {{optional(feed.availabilityFlag)}}
+  <div class="col-sm-24">
+    <label>Availability Flag</label>: <span>{{optional(feed.availabilityFlag)}}</span>
   </div>
 
-  <div class="col-sm-8" ng-repeat="property in feed.properties">
-    <label>{{property.key}}</label>:
+  <div class="col-sm-24" ng-repeat="property in feed.properties">
+    <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"/>
+    <span><frequency ng-if="property.key === 'timeout'" value="property.value" prefix="at"/></span>
+  </div>
+
+  <div class="col-sm-24" ng-repeat="property in feed.customProperties | filter: {key: '!!'}">
+    <label>{{feedPropertiesLabels[property.key]}}</label>: <span>{{property.value}}</span>
   </div>
 
-  <div class="col-sm-8" ng-repeat="property in feed.customProperties | filter: {key: '!!'}">
-    <label>{{property.key}}</label>: {{property.value}}
+  <h4 class="col-sm-24">Default Storage Type:</h4>
+  <div class="col-sm-24">
+    <label class="light" ng-show="feed.storage.fileSystem.locations">File System</label>
+    <label class="light" ng-show="feed.storage.catalog.catalogTable.uri">Catalog Storage</label>
+  </div>
+
+  <h4 class="col-sm-24">Default Location:</h4>
+  <div class="col-sm-24" ng-repeat="location in feed.storage.fileSystem.locations"
+    ng-show="feed.storage.fileSystem.locations">
+    <label>{{capitalize(location.type)}}</label>:
+    <span>{{optional(location.path)}}</span>
+  </div>
+
+  <div class="col-sm-24" ng-show="feed.storage.catalog.catalogTable.uri">
+    <label>Table uri</label>:<span>{{optional(feed.storage.catalog.catalogTable.uri)}}</span>
   </div>
 
-  <h4 class="col-sm-8" >
-    Default Storage Type:
+  <h4 class="col-sm-24" ng-if="(feed.clusters | filter:{type:'source'} | filter:emptyClusterName).length > 0">
+    Source Cluster(s)
   </h4>
 
-  <div class="col-sm-8 light" ng-show="feed.storage.fileSystem.active">File System</div>
-  <div class="col-sm-8 light" ng-show="feed.storage.catalog.active">Catalog Storage</div>
+  <div ng-repeat="cluster in feed.clusters | filter:{type:'source'} | filter:emptyClusterName">
+    <div class="col-sm-24">
+      <label>Name</label>: <span>{{cluster.name}}</span>
+    </div>
 
-  <h4 class="col-sm-24" >Default Location:</h4>
+    <div class="col-sm-24">
+      <label>Start</label>: <span>{{getDateTimeString(cluster.validity.start.date,cluster.validity.start.time)}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>End</label>: <span>{{getDateTimeString(cluster.validity.end.date,cluster.validity.end.time)}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>Timezone</label>: <span>{{feed.timezone}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>Retention</label>: <span><frequency value="cluster.retention" prefix=""/></span>
+    </div>
 
-  <div ng-repeat="location in feed.storage.fileSystem.locations" ng-show="feed.storage.fileSystem.active">
-    <label class="col-sm-24" >{{capitalize(location.type)}}</label>
-    <div class="col-sm-24">{{optional(location.path)}}</div>
+    <label class="col-sm-24" ng-show="cluster.storage.fileSystem.locations">Location</label>
+    <div class="col-sm-24" ng-repeat="location in cluster.storage.fileSystem.locations"
+      ng-show="cluster.storage.fileSystem.locations">
+      <label>{{capitalize(location.type)}}</label>: <span>{{optional(location.path)}}</span>
+    </div>
+    <div class="col-sm-24" ng-show="cluster.storage.catalog.catalogTable.uri">
+      <label>Table uri</label>: <span>{{optional(cluster.storage.catalog.catalogTable.uri)}}</span>
+    </div>
   </div>
 
-  <div ng-show="feed.storage.catalog.active">
-    <label class="col-sm-24" >Table uri</label>
-    <div class="col-sm-24">{{optional(feed.storage.catalog.catalogTable.uri)}}</div>
-  </div>
+  <h4 class="col-sm-24"
+    ng-if="feed.enableFeedReplication && (feed.clusters | filter:{type:'target'} | filter:emptyClusterName).length > 0">
+    Target Cluster(s)
+  </h4>
+  <div ng-repeat="cluster in feed.clusters | filter:{type:'target'} | filter:emptyClusterName" ng-if="feed.enableFeedReplication">
+    <div class="col-sm-24">
+      <label>Name</label>: <span>{{cluster.name}}</span>
+    </div>
 
-  <div ng-repeat="cluster in feed.clusters" >
-    <h4 class="col-sm-24" >{{capitalize(cluster.type)}} Cluster</h4>
+    <div class="col-sm-24">
+      <label>Start</label>: <span>{{getDateTimeString(cluster.validity.start.date,cluster.validity.start.time)}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>End</label>: <span>{{getDateTimeString(cluster.validity.end.date,cluster.validity.end.time)}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>Timezone</label>: <span>{{feed.timezone}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>Retention</label>: <span><frequency value="cluster.retention" prefix=""/></span>
+    </div>
 
-    <div class="col-sm-12">
-      <label>Name</label>: {{cluster.name}}
+    <label class="col-sm-24" ng-show="cluster.storage.fileSystem.locations">Location</label>
+    <div class="col-sm-24" ng-repeat="location in cluster.storage.fileSystem.locations"
+      ng-show="cluster.storage.fileSystem.locations">
+      <label>{{capitalize(location.type)}}</label>: <span>{{optional(location.path)}}</span>
+    </div>
+    <div class="col-sm-24" ng-show="cluster.storage.catalog.catalogTable.uri">
+      <label>Table uri</label>: <span>{{optional(cluster.storage.catalog.catalogTable.uri)}}</span>
     </div>
-    <div class="clearfix hidden-md"></div>
+  </div>
 
-    <div class="col-sm-12">
-      <label>Start</label>: {{cluster.validity.start.date|date:'yyyy-MM-dd'}} {{cluster.validity.start.time|date:'HH:mm'}}
+  <h4 class="col-sm-24" ng-if="feed.dataTransferType === 'import' || feed.dataTransferType === 'export'">
+    Datasource
+  </h4>
+  <div class="col-sm-24 plr0px" ng-if="feed.dataTransferType === 'import'">
+    <div class="col-sm-24">
+      <label>Datasource Name</label>: <span>{{feed.import.source.name}}</span>
     </div>
-    <div class="col-sm-12">
-      <label>End</label>: {{cluster.validity.end.date|date:'yyyy-MM-dd'}} {{cluster.validity.end.time|date:'HH:mm'}}
+    <div class="col-sm-24">
+      <label>Table Name</label>: <span>{{feed.import.source.tableName}}</span>
     </div>
     <div class="col-sm-24">
-      <label>Timezone</label>: {{feed.timezone}}
+      <label>Extract Type</label>: <span>{{feed.import.source.extract.type}}</span>
     </div>
     <div class="col-sm-24">
-      <label>Retention</label>: <frequency value="cluster.retention" prefix="Archive in"/>
+      <label>Merge Type</label>: <span>{{feed.import.source.extract.mergepolicy}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>Columns</label>:
+      <span ng-if="feed.import.source.columnsType === 'include'">{{feed.import.source.includesCSV}}</span>
+      <span ng-if="feed.import.source.columnsType === 'exclude'">{{feed.import.source.excludesCSV}}</span>
+      <span ng-if="feed.import.source.columnsType === 'all'">All</span>
     </div>
   </div>
-  <div class="clearfix hidden-md"></div>
-  <h4 class="col-sm-24" >Location</h4>
-  <div ng-repeat="location in cluster.storage.fileSystem.locations" ng-show="cluster.storage.fileSystem">
-    <label class="col-sm-24" >{{capitalize(location.type)}}</label>
-    <div class="col-sm-24">{{optional(location.path)}}</div>
-  </div>
-  <div ng-show="cluster.storage.catalog.active">
-    <label class="col-sm-24" >Table uri</label>
-    <div class="col-sm-24">{{optional(cluster.storage.catalog.catalogTable.uri)}}</div>
+
+  <div class="col-sm-24 plr0px" ng-if="feed.dataTransferType === 'export'">
+    <div class="col-sm-24">
+      <label>Datasource Name</label>: <span>{{feed.export.target.name}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>Table Name</label>: <span>{{feed.export.target.tableName}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>Load Method</label>: <span>{{feed.export.target.load.type}}</span>
+    </div>
+    <div class="col-sm-24">
+      <label>Columns</label>:
+      <span ng-if="feed.export.target.columnsType === 'include'">{{feed.export.target.includesCSV}}</span>
+      <span ng-if="feed.export.target.columnsType === 'exclude'">{{feed.export.target.excludesCSV}}</span>
+      <span ng-if="feed.export.target.columnsType === 'all'">All</span>
+    </div>
   </div>
 </div>
 
-<div class="row">
-  <div class="col-xs-24 mt20">
-    <button id="feed.backToStep4" class="btn prevBtn" type="button"
-         ng-click="goBack('forms.feed.clusters')"
-         ng-disabled="buttonSpinners.backShow">
-      Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
-    </button>
-    <button id="feed.step5" class="btn nextBtn pull-right" ng-click="saveEntity()">
-      Save <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 id="feed.backToStep4" 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.step5" class="btn nextBtn" ng-click="saveEntity()" focus-if>
+      SAVE <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.saveShow" />
+    </button>
   </div>
-</div>
\ No newline at end of file
+</div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedFormTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedFormTpl.html b/falcon-ui/app/html/feed/feedFormTpl.html
index ee30d54..c1a2952 100644
--- a/falcon-ui/app/html/feed/feedFormTpl.html
+++ b/falcon-ui/app/html/feed/feedFormTpl.html
@@ -17,91 +17,82 @@
  * limitations under the License.
  */
 -->
-<div class="col-xs-22 col-xs-offset-1 feedForm" id="feedFormTmpl">
+<div id="formBox" class="feedForm">
   <div class="col-xs-24">
-    <div class="row dt">
-
-      <h3 id="feed.title" class="col-xs-24">
-        <span class="entypo download icon-lg"></span> New Feed
-      </h3>
-
-      <div ng-class="{'col-xs-12' : propsOpen, 'col-xs-20' : !propsOpen}">
-        <div class="detailsBox">
-          <div class="feedProgressBox" ng-class="{
-            general:isActive('forms.feed.general'),
-            properties:isActive('forms.feed.properties'),
-            location:isActive('forms.feed.location'),
-            clusters:isActive('forms.feed.clusters'),
-            summary:isActive('forms.feed.summary')
-            }">
-            <div class="progressBar col-xs-24">
-              <div>
-                <span>
-                  <div class="fir">1<span class="entypo check"></span></div>
-                  <h6>General</h6>
-                </span>
-                <span>
-                  <div class="sec">2<span class="entypo check"></span></div>
-                  <h6>Properties</h6>
-                </span>
-                <span>
-                  <div class="thi">3<span class="entypo check"></span></div>
-                  <h6>Location</h6>
-                </span>
-                <span>
-                  <div class="fou">4<span class="entypo check"></span></div>
-                  <h6>Clusters</h6>
-                </span>
-                <span>
-                  <div class="fif">5<span class="entypo check"></span></div>
-                  <h6>Summary</h6>
-                </span>
-              </div>
-            </div>
+    <div class="preview pullOver">
+      <button id="previewXMLBtn" type="button" class="btn btn-default btn-md pull-right nextBtn"
+      ng-disabled="invalidXml && xmlPreview.edit" ng-click="toggleclick()" >Preview XML</button>
+    </div>
+    <br/>
+    <div>
+      <div class="formBoxContainer detailsBox">
+        <div class="row feedProgressBox" ng-class="{
+          general:isActive('forms.feed.general'),
+          summary:isActive('forms.feed.summary')
+          }">
+          <div class="progressBar col-xs-24">
+              <div class="text-center fir" ng-class="{
+                active:isActive('forms.feed.general'),
+                completed:isCompleted('forms.feed.general')}">General</div>
+              <div class="text-center fif" ng-class="{
+                active:isActive('forms.feed.summary'),
+                completed:isCompleted('forms.feed.summary')}">Summary</div>
           </div>
-
-          <div class="row">
-            <div class="col-xs-offset-1 col-xs-22">
-              <fieldset ng-disabled="!editXmlDisabled">
-                <div ui-view class="formViewContainer"></div>
-              </fieldset>
-            </div>
+        </div>
+        <div class="row customContainer">
+          <div class="col-xs-offset-1 col-xs-22">
+            <fieldset ng-disabled="!editXmlDisabled">
+              <div class="formViewContainer">
+                <div class="col-xs-24">
+                  <label class="title"><span class="entypo download icon-lg entypo-align-sub"></span> NEW FEED</label>
+                </div>
+                <div ui-view></div>
+              </div>
+            </fieldset>
           </div>
         </div>
       </div>
 
-      <div ng-class="{'col-xs-12' : propsOpen, 'col-xs-4' : !propsOpen}">
-        <div class="detailsBox">
-          <div class="row dt">
-
-            <div class="col-xs-13 col-xs-offset-1 noSpecial">
-              <h5><i class="pointer glyphicon" ng-click="propsOpen = !propsOpen" ng-class="propsOpen ? 'glyphicon-minus-sign':'glyphicon-plus-sign'"></i> XML Preview</h5>
+      <div class="hide xmlPreviewContainer detailsBox">
+        <div class="row dt">
+          <div class="col-xs-24 pt15px">
+            <div class="col-xs-13 noSpecial">
+                <h5>XML Preview</h5>
+                <label style="margin-top: -10px;margin-bottom: -2px;" ng-if="invalidXml" class="custom-danger">Invalid Xml</label>
             </div>
 
-            <div ng-if="propsOpen" class="col-xs-9">
+            <div class="pull-right">
               <button type="button"
                       id="feed.editXML"
-                      class="btn btn-default btn-xs pull-right"
+                      class="btn btn-default btn-xs"
                       ng-click="toggleEditXml()"
-                      ng-class="{'btn-warning':!editXmlDisabled}">
+                      ng-class="{'btn-warning':!editXmlDisabled}"
+                      ng-disabled="invalidXml">
                 <div ng-if="editXmlDisabled">Edit XML</div>
                 <div ng-if="!editXmlDisabled">Finish</div>
               </button>
 
+              <button type="button"
+                      id="revertXMLBtn"
+                      class="btn btn-default btn-xs"
+                      ng-if="invalidXml"
+                      ng-click="revertXml()">
+                  <div>Revert</div>
+              </button>
             </div>
-
-            <div ng-show="propsOpen" class="col-sm-24">
-              <div class="row">
-                <div class="col-sm-22 col-sm-offset-1">
-                  <textarea ng-model="prettyXml" elastic class="form-control prettyXml" ng-disabled="editXmlDisabled"></textarea>
-                </div>
-              </div>
-            </div>
+		  </div>
+          <div class="col-sm-24 showValidationStyle">
+            <textarea ng-model="prettyXml"
+                      elastic
+                      class="form-control"
+                      ng-disabled="editXmlDisabled"
+                      ng-class="{fakeInvalid:invalidXml}">
+            </textarea>
+            <!--{{xmlEditValidationError}}-->
+          </div>
 
           </div>
         </div>
-      </div>
-
     </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/feed/feedSummary.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/feed/feedSummary.html b/falcon-ui/app/html/feed/feedSummary.html
index 760e810..1f0dcc6 100644
--- a/falcon-ui/app/html/feed/feedSummary.html
+++ b/falcon-ui/app/html/feed/feedSummary.html
@@ -34,9 +34,9 @@
   </div>
 
   <div class="row">
-    <h5 class="col-sm-24">
+    <label class="col-sm-24">
       Tags
-    </h5>
+    </label>
   </div>
 
   <div class="row">
@@ -48,14 +48,8 @@
   </div>
 
   <div class="row">
-    <h5 class="col-sm-24">
-      Groups
-    </h5>
-  </div>
-
-  <div class="row">
     <div class="col-sm-24">
-      {{feed.groups}}
+      <label>Groups</label>: {{feed.groups}}
     </div>
   </div>
 
@@ -114,13 +108,13 @@
 
   <div class="row">
     <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'">{{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>
 
     <h5 class="col-xs-24">
@@ -129,31 +123,29 @@
   </div>
 
   <div class="row">
-    <div class="col-sm-8 light" ng-show="feed.storage.fileSystem.active">File System</div>
-    <div class="col-sm-8 light" ng-show="feed.storage.catalog.active">Catalog Storage</div>
+    <div class="col-sm-8 light" ng-show="feed.storage.fileSystem.locations">File System</div>
+    <div class="col-sm-8 light" ng-show="feed.storage.catalog.catalogTable.uri">Catalog Storage</div>
   </div>
 
   <div class="row">
     <h5 class="col-sm-24">Default Location:</h5>
   </div>
 
-
-  <div ng-repeat="location in feed.storage.fileSystem.locations" ng-show="feed.storage.fileSystem.active">
-    <div class="row">
-      <label class="col-sm-24">{{capitalize(location.type)}}</label>
-    </div>
-
+  <div ng-repeat="location in feed.storage.fileSystem.locations" ng-show="feed.storage.fileSystem.locations">
     <div class="row">
-      <div class="col-sm-24">{{location.path}}</div>
+      <div class="col-sm-24">
+        <label>{{capitalize(location.type)}}</label>:
+        <span>{{location.path}}</span>
+      </div>
     </div>
   </div>
 
-  <div ng-show="feed.storage.catalog.active">
+  <div ng-show="feed.storage.catalog.catalogTable.uri">
     <div class="row">
-      <label class="col-sm-24">Table uri</label>
-    </div>
-    <div class="row">
-      <div class="col-sm-24">{{feed.storage.catalog.catalogTable.uri}}</div>
+      <div class="col-sm-24">
+        <label>Table uri</label>
+        <span>{{feed.storage.catalog.catalogTable.uri}}</span>
+      </div>
     </div>
   </div>
 
@@ -186,29 +178,74 @@
     <div class="row">
       <div class="col-sm-24">
         <label>Retention</label>:
-        <frequency value="cluster.retention" prefix="Archive in"/>
+        <frequency value="cluster.retention" prefix=""/>
       </div>
     </div>
-  </div>
-  <div class="clearfix hidden-md"></div>
-  <div class="row">
-    <h5 class="col-sm-24">Location</h5>
-  </div>
 
-  <div ng-repeat="location in cluster.storage.fileSystem.locations" ng-show="cluster.storage.fileSystem">
     <div class="row">
-      <label class="col-sm-24">{{capitalize(location.type)}}</label>
+      <label class="col-sm-24">Location</label>
     </div>
-    <div class="row">
-      <div class="col-sm-24">{{location.path}}</div>
+
+    <div ng-repeat="location in cluster.storage.fileSystem.locations" ng-show="cluster.storage.fileSystem.locations">
+      <div class="row">
+        <div class="col-sm-24">
+          <label>{{capitalize(location.type)}}</label>
+          <span>{{location.path}}</span>
+        </div>
+      </div>
+    </div>
+    <div ng-show="cluster.storage.catalog.catalogTable.uri">
+      <div class="row">
+        <div class="col-sm-24">
+          <label>Table uri</label>
+          <span>{{cluster.storage.catalog.catalogTable.uri}}</span>
+        </div>
+      </div>
     </div>
   </div>
-  <div ng-show="cluster.storage.catalog.active">
-    <div class="row">
-      <label class="col-sm-24">Table uri</label>
+
+  <div class="row">
+    <h4 class="col-sm-24" ng-if="feed.import || feed.export">
+      Datasource
+    </h4>
+    <div class="col-sm-24 plr0px" ng-if="feed.import">
+      <div class="col-sm-24">
+        <label>Datasource Name</label>: <span>{{feed.import.source.name}}</span>
+      </div>
+      <div class="col-sm-24">
+        <label>Table Name</label>: <span>{{feed.import.source.tableName}}</span>
+      </div>
+      <div class="col-sm-24">
+        <label>Extract Type</label>: <span>{{feed.import.source.extract.type}}</span>
+      </div>
+      <div class="col-sm-24">
+        <label>Merge Type</label>: <span>{{feed.import.source.extract.mergepolicy}}</span>
+      </div>
+      <div class="col-sm-24">
+        <label>Columns</label>:
+        <span ng-if="feed.import.source.includesCSV">{{feed.import.source.includesCSV}}</span>
+        <span ng-if="feed.import.source.excludesCSV">{{feed.import.source.excludesCSV}}</span>
+        <span ng-if="!feed.import.source.includesCSV && !feed.import.source.excludesCSV">All</span>
+      </div>
     </div>
-    <div class="row">
-      <div class="col-sm-24">{{cluster.storage.catalog.catalogTable.uri}}</div>
+
+    <div class="col-sm-24 plr0px" ng-if="feed.export">
+      <div class="col-sm-24">
+        <label>Datasource Name</label>: <span>{{feed.export.target.name}}</span>
+      </div>
+      <div class="col-sm-24">
+        <label>Table Name</label>: <span>{{feed.export.target.tableName}}</span>
+      </div>
+      <div class="col-sm-24">
+        <label>Load Method</label>: <span>{{feed.export.target.load.type}}</span>
+      </div>
+      <div class="col-sm-24">
+        <label>Columns</label>:
+        <span ng-if="feed.export.target.includesCSV">{{feed.export.target.includesCSV}}</span>
+        <span ng-if="feed.export.target.excludesCSV">{{feed.export.target.excludesCSV}}</span>
+        <span ng-if="!feed.export.target.includesCSV && !feed.export.target.excludesCSV">All</span>
+      </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/formsTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/formsTpl.html b/falcon-ui/app/html/formsTpl.html
index b8d50fb..bd63470 100644
--- a/falcon-ui/app/html/formsTpl.html
+++ b/falcon-ui/app/html/formsTpl.html
@@ -18,6 +18,6 @@
  */
 -->
 <div class="col-sm-24 formPage" ng-class="{showValidationStyle:validations.displayValidations.show}">
-  <div ui-view>
+  <div class="col-sm-offset-2 col-sm-20" ui-view>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/instanceDetails.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/instanceDetails.html b/falcon-ui/app/html/instanceDetails.html
index b67c041..e22c717 100644
--- a/falcon-ui/app/html/instanceDetails.html
+++ b/falcon-ui/app/html/instanceDetails.html
@@ -17,29 +17,29 @@
  * limitations under the License.
  */
 -->
-<div class="container" id="instanceDetails">
+<div class="container instanceDetails pt15px">
 
   <div class="row">
     <div class="col-sm-24">
       <div class="detailsBox">
         <div class="row">
           <div class="col-sm-9">
-            <h3 class="instance-title">
-              <a href="javascript:void(0);" ng-click="backToEntity()">{{ instance.name }}</a> | {{ instance.instance }}
+            <h3 class="instance-title pl0px">
+              <a href="javascript:void(0);" ng-click="backToEntity()">{{ instance.name }}</a> | <span>{{ instance.instance }}</span>
             </h3>
           </div>
           <div class="col-sm-3 instance-status">
             <span class="text-success">STARTED</span><br/>
-            {{ instance.startTime | date :'MM/dd/yyyy HH:mm' }}
+            <span>{{ instance.startTime | date : dateFormat }}</span>
           </div>
           <div class="col-sm-5 border-left">
             <h4 class="instance-title">
               Status: <span ng-class="{
-              'blink-success': instance.status == 'RUNNING',
-              'text-success': instance.status == 'SUCCEEDED',
-              'blink-warning': instance.status == 'WAITING' || instance.status == 'UNKNOWN',
-              'blink-danger': instance.status == 'SUSPENDED',
-              'text-danger': instance.status == 'FAILED' || instance.status == 'KILLED',
+                'blink-success': instance.status == 'RUNNING',
+                'text-success': instance.status == 'SUCCEEDED',
+                'blink-warning': instance.status == 'WAITING' || instance.status == 'UNKNOWN',
+                'blink-danger': instance.status == 'SUSPENDED',
+                'text-danger': instance.status == 'FAILED' || instance.status == 'KILLED',
               }">{{ instance.status }}</span>
             </h4>
           </div>
@@ -49,11 +49,11 @@
               <span class="entypo play"></span> <div>Resume</div>
             </div>
             <div class="btn btn-big btn-xs buttons-to-show" ng-click="reRunInstance()"
-                 ng-disabled="!(instance.status === 'KILLED' || instance.status === 'SUCCEEDED' || instance.status === 'FAILED')">
-              <span class="entypo play"></span> <div>Rerun</div>
-            </div>
+                ng-disabled="!(instance.status === 'KILLED' || instance.status === 'SUCCEEDED' || instance.status === 'FAILED')">
+                <span class="entypo play"></span> <div>Rerun</div>
+              </div>
             <div class="btn btn-big btn-xs buttons-to-show" ng-click="suspendInstance()" ng-disabled="!(instance.status === 'RUNNING')">
-              <span class="entypo paus"></span> <div>Suspend</div>
+              <span class="entypo paus"></span> <div>Pause</div>
             </div>
             <div class="btn btn-big btn-xs buttons-to-show" ng-click="killInstance()" ng-disabled="!(instance.status === 'SUSPENDED' || instance.status === 'RUNNING')">
               <span class="entypo stop"></span> <div>Kill</div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/mainTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/mainTpl.html b/falcon-ui/app/html/mainTpl.html
index 890463f..963bfb0 100644
--- a/falcon-ui/app/html/mainTpl.html
+++ b/falcon-ui/app/html/mainTpl.html
@@ -17,59 +17,124 @@
  * limitations under the License.
  */
 -->
+<div ng-show="!hasClusters" class="no-entity">
+  <span>
+    No Cluster Entity Defined. Please contact your Administrator or perform the steps described in
+    <a target="_blank" href='https://docs.hortonworks.com/HDPDocuments/HDP2/HDP-2.4.2/bk_data_governance/content/using_gui_to_define_data_pipelines.html'>
+    Falcon Documentation</a> to create a Cluster.
+  </span>
+</div>
+<div class="col-sm-24">
+  <div class="row searchResultContainer" ng-show="searchList.length > 0">
+    <div class="col-sm-offset-2 col-sm-20 dashboardBox">
+        <entities-search-list input="searchList" entity-details="entityDetails" clone="cloneEntity" tags="tags"
+                              remove="deleteEntity" edit="editEntity" schedule="scheduleEntity" suspend="suspendEntity"
+                              resume="resumeEntity" focus-search="focusSearch" pages="pages" go-page="goPage"/>
+    </div>
+  </div>
 
-<div class="col-sm-offset-1 col-sm-22">
+</div>
 
-  <div class="row searchBoxContainer" id="searchBoxContainer">
-    <div class="col-sm-4"></div>
-    <div class="col-sm-16">
+<!--<div class="col-xs-24" ng-hide="searchList.length > 0">-->
+  <!--<div class="row" ng-controller="chartCtrl">-->
+    <!--<div class="col-xs-20 chartCol">-->
+      <!--<div class="chartMenuBox">-->
+        <!--<div class="entityBox">-->
+          <!--<h5> Entity </h5>-->
+          <!--<div class="entityTypeButtons">-->
+            <!--<button class="btn"-->
+                    <!--ng-click="chartOptions.entity = 'feed'; requestNewData()"-->
+                    <!--ng-class="{active: chartOptions.entity === 'feed'}">-->
+              <!--Feeds-->
+            <!--</button>-->
+            <!--<button class="btn"-->
+                    <!--ng-click="chartOptions.entity = 'process'; requestNewData()"-->
+                    <!--ng-class="{active: chartOptions.entity === 'process'}">-->
+              <!--Processes-->
+            <!--</button>-->
+            <!--<button class="btn"-->
+                    <!--ng-click="chartOptions.entity = 'dataset'; requestNewData()"-->
+                    <!--ng-class="{active: chartOptions.entity === 'dataset'}">-->
+              <!--Dataset-->
+            <!--</button>-->
+          <!--</div>-->
+        <!--</div>-->
+        <!--<div class="timeBox">-->
+          <!--<h5>Time</h5>-->
+          <!--<label>-->
+            <!--<input type="radio" ng-model="chartOptions.mode" value="hourly" ng-change="requestNewData()">-->
+            <!--24 Hs-->
+          <!--</label>-->
+          <!--<label>-->
+            <!--<input type="radio" ng-model="chartOptions.mode" value="daily" ng-change="requestNewData()">-->
+            <!--14 Days-->
+          <!--</label>-->
+        <!--</div>-->
+        <!--<div class="dayBox">-->
+          <!--<h5>Day</h5>-->
+          <!--<input type="text"-->
+                 <!--ng-change="requestNewData()"-->
+                 <!--class="form-control dateInput"-->
+                 <!--placeholder="mm/dd/yyyy"-->
+                 <!--datepicker-popup="{{dateFormat}}"-->
+                 <!--ng-model="chartOptions.day"-->
+                 <!--is-open="opened"-->
+                 <!--ng-click="openDatePicker($event)"-->
+                 <!--ng-required="true"-->
+                 <!--simple-date />-->
+          <!--<span class="entypo calendar dateInputIcon"-->
+                <!--ng-click="openDatePicker($event)">-->
+          <!--</span>-->
+        <!--</div>-->
+      <!--</div>-->
+      <!--<chart class="chart"-->
+             <!--input="graphData"-->
+             <!--t="30"-->
+             <!--mode="chartOptions.mode"-->
+             <!--ng-class="{daily: chartOptions.mode === 'daily'}"-->
+             <!--details="details">-->
+      <!--</chart>-->
 
-      <img src="css/img/ajax-loader.gif" class="glyphicon search-loading-icon" ng-show="loading"/>
-      <i class="glyphicon glyphicon-search search-icon" ng-hide="loading"></i>
+    <!--</div>-->
+    <!--<div class="col-xs-4 chartSideBar" ng-show="chartSidebarModel">-->
 
-      <tags-input ng-model="tags" min-length="1" add-on-space="true" add-from-autocomplete-only="true"
-                  on-tag-added="displayResults()" on-tag-removed="displayResults()" placeholder="Search">
-        <auto-complete source="loadTags($query)" min-length="0"></auto-complete>
-      </tags-input>
+      <!--<h3> {{ chartSidebarDate.firstLeg }} </h3>-->
+      <!--<h4> {{ chartSidebarDate.secondLeg }}-->
+        <!--<span ng-if="chartOptions.mode === 'hourly'"> {{ chartSidebarDate.timeLeg }} </span>-->
+      <!--</h4>-->
 
-      <i id="nsPopover" class="glyphicon glyphicon-question-sign" ng-class="tags.length > 0 ? 'question-icon' : 'remove-icon'"
-         ns-popover
-         ns-popover-template="menu"
-         ns-popover-trigger="click"
-         ns-popover-theme="ns-popover-tooltip-theme"
-         ns-popover-timeout="5"
-         ns-popover-placement="bottom|right"></i>
-      <script type="text/ng-template" id="menu">
-        <div class="triangle"></div>
-        <!--<div class="ns-popover-tooltip">-->
-          <!--<h5>Hey there! Want some search tips?</h5>-->
-          <!--The <strong>first word</strong> you type will be taken as the <strong>Name</strong> of the entity.-->
-          <!--<br/>-->
-          <!--You can search <strong>*</strong> for getting all the entities.-->
-          <!--<br/>-->
-          <!--The <strong>second and following</strong> words will be taken as <strong> Tags</strong>.-->
-          <!--<br/>-->
-          <!--For filtering by type, write <strong>type=feed|process|mirror</strong>-->
-        <!--</div>-->
-        <div class="ns-popover-tooltip">
-          <h5>Hey there! Want some search tips?</h5>
-          You can type <strong>*</strong> and select <strong>Name: *</strong> from the autocomplete for getting all the entities.
-        </div>
-      </script>
-      <i class="glyphicon glyphicon-remove remove-icon" ng-if="tags.length > 0" ng-click="clearTags()"></i>
+      <!--<hr />-->
 
-    </div>
-    <div class="col-sm-4"></div>
-  </div>
+      <!--<h5 class="text-success"> Succeed </h5>-->
+      <!--<table class="table">-->
+        <!--<tr ng-repeat="item in chartSidebarModel.topSuccessfulEntities | orderBy:'-numberOfSuccessfulEntities'">-->
+          <!--<td> {{item.name}} </td>-->
+          <!--<td><span> {{item.numberOfSuccessfulEntities}} </span></td>-->
+        <!--</tr>-->
+      <!--</table>-->
 
-  <div class="col-sm-24 dashboardBox" ng-show="searchList.length > 0" id="dashboardBox">
-    <div class="row">
-      <div class="col-sm-24">
-        <entities-search-list input="searchList" entity-details="entityDetails" clone="cloneEntity" tags="tags"
-                              remove="deleteEntity" edit="editEntity" schedule="scheduleEntity" suspend="suspendEntity"
-                              resume="resumeEntity" focus-search="focusSearch" pages="pages" go-page="goPage"/>
-      </div>
-    </div>
-  </div>
+      <!--<hr />-->
+
+      <!--<h5 class="text-danger"> Failed </h5>-->
+      <!--<table class="table">-->
+        <!--<tr ng-repeat="item in chartSidebarModel.topFailedEntities | orderBy:'-numberOfFailedEntities'">-->
+          <!--<td> {{item.name}} </td>-->
+          <!--<td><span> {{item.numberOfFailedEntities}} </span></td>-->
+        <!--</tr>-->
+      <!--</table>-->
+
+      <!--<hr />-->
+
+      <!--<h5> Data Copied </h5>-->
+      <!--<table class="table">-->
+        <!--<tr ng-repeat="item in chartSidebarModel.topDataCopiedEntities | orderBy:'-dataCopied'">-->
+          <!--<td> {{item.name}} </td>-->
+          <!--<td><span> {{item.dataCopied}} </span></td>-->
+        <!--</tr>-->
+      <!--</table>-->
+
+    <!--</div>-->
+
+  <!--</div>-->
+<!--</div>-->
 
-</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/process/processFormAdvancedStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/process/processFormAdvancedStepTpl.html b/falcon-ui/app/html/process/processFormAdvancedStepTpl.html
new file mode 100644
index 0000000..ce5119d
--- /dev/null
+++ b/falcon-ui/app/html/process/processFormAdvancedStepTpl.html
@@ -0,0 +1,183 @@
+<!--
+/**
+ * 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="processForm" class="mt10" novalidate id="processFormAdvancedStep">
+  <div class="col-xs-24"><label>Retry Policy</label></div>
+  <div class="col-xs-24 plr0px">
+    <div class="col-xs-4 plr0px">
+      <div class="col-xs-24">
+        <label class="light" tooltip="process.properties.retryPolicy" tooltip-position="up">
+          Type
+        </label>
+      </div>
+      <div class="col-xs-24">
+        <select ng-model="process.retry.policy" ng-required="true" validation-message="{{validations.messages.option}}" ng-change="policyChange()">
+          <option value="" disabled selected style='display:none;'>-Select policy-</option>
+          <option value="periodic">Periodic</option>
+          <option value="exp-backoff">Exponential Backup</option>
+          <option value="final">None</option>
+        </select>
+      </div>
+    </div>
+    <div class="col-xs-offset-1 col-xs-5 plr0px">
+      <div class="col-xs-24">
+        <label class="light">Delay Up to</label>
+      </div>
+      <div class="col-xs-24 inlineInputsGroup">
+        <input type="text" class="form-control"
+               ng-model="process.retry.delay.quantity" validation-message="{{validations.messages.number}}"
+               id="delayQuantity" ng-keydown="validations.acceptOnlyNumber($event)"
+               ng-disabled = "process.retry.policy === 'final'"
+               ng-required="true"
+               ng-pattern="validations.patterns.twoDigits"/>
+
+        <select ng-model="process.retry.delay.unit" ng-required="true" ng-disabled = "process.retry.policy === 'final'" validation-message="{{validations.messages.option}}">
+          <option value="" disabled selected style='display:none;'>-Select delay-</option>
+          <option 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-4 plr0px">
+      <div class="col-xs-24">
+        <label class="light">Attempts</label>
+      </div>
+      <div class="col-xs-24">
+        <input type="text" class="form-control" validation-message="{{validations.messages.number}}"
+               ng-model="process.retry.attempts" ng-keydown="validations.acceptOnlyNumber($event)"
+               id="attemptsField"
+               ng-required="true"
+               ng-disabled = "process.retry.policy === 'final'"
+               ng-pattern="validations.patterns.twoDigits"/>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-xs-24"><label>Performance & Ordering</label></div>
+  <div class="col-xs-24 plr0px">
+    <div class="col-xs-4 plr0px">
+      <div class="col-xs-24">
+        <label class="light">Max Parallel Instances</label>
+      </div>
+      <div class="col-xs-24">
+        <select ng-model="process.parallel" ng-required="true">
+          <option ng-repeat="value in [1,2,3,4,5,6,7,8,9,10,11,12] track by $index">{{value}}</option>
+        </select>
+      </div>
+    </div>
+    <div class="col-xs-offset-1 col-xs-4 plr0px">
+      <div class="col-xs-24">
+        <label class="light" tooltip="process.properties.order">Order</label>
+      </div>
+      <div class="col-xs-24">
+        <select ng-model="process.order" ng-required="true" validation-message="{{validations.messages.option}}">
+          <option value="" disabled selected style='display:none;'>-Select order-</option>
+          <option ng-repeat="value in ['FIFO', 'LIFO', 'LAST_ONLY'] track by $index">{{value}}</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-xs-24">
+    <label>Properties</label>
+  </div>
+  <div ng-repeat="property in process.properties track by $index" class="col-xs-24 plr0px">
+      <div class="col-xs-6 dynamic-table-spacer">
+        <input type="text" class="form-control" ng-model="property.name"
+               ng-pattern="validations.patterns.propertyName"
+               validation-optional-message="{{validations.messages.name}}"
+               ng-disabled="xmlPreview.edit"
+               ng-required="property.value" placeholder="name" />
+      </div>
+      <div class="col-xs-6 dynamic-table-spacer">
+        <input type="text" class="form-control" ng-model="property.value"
+               validation-optional-message="{{validations.messages.value}}"
+               ng-disabled="xmlPreview.edit"
+               ng-required="property.name" placeholder="value" />
+      </div>
+      <div class="dynamic-table-spacer">
+        <button type="button" class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="!$first || !$last"
+             ng-disabled="xmlPreview.edit">
+          <span class="entypo minus"></span> delete
+        </button>
+        <button type="button" class="btn btn-default btn-xs" ng-click="addProperty()"
+            ng-disabled="xmlPreview.edit" ng-if="$last">
+            <span class="entypo plus"></span> ADD
+        </button>
+      </div>
+  </div>
+
+
+  <div class="col-xs-24"><label class="mt15">Access Control List</label></div>
+  <div class="col-xs-24 plr0px">
+    <div class="col-xs-4">
+        <label class="light">Owner<mandatory-field></mandatory-field></label>
+        <input type="text"
+               name="aclOwnerInput"
+               ng-model="process.ACL.owner"
+               ng-pattern="validations.patterns.unixId"
+               ng-required="true"
+               class="form-control"
+               validation-message="{{validations.messages.acl.owner}}"/>
+    </div>
+    <div class="col-xs-4">
+        <label class="light">Group<mandatory-field></mandatory-field></label>
+        <input type="text"
+               name="aclGroupInput"
+               ng-model="process.ACL.group"
+               ng-pattern="validations.patterns.unixId"
+               ng-required="true"
+               class="form-control"
+               validation-message="{{validations.messages.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="process.ACL.permission"></acl-permissions>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-xs-24 pb15px mt35">
+    <button 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="nextButton" class="btn nextBtn"
+           ng-disabled="buttonSpinners.show"
+           ng-click="goNext(processForm.$invalid)" scroll-to-error>
+        NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+      </button>
+      <button class="btn advancedSaveBtn"
+           ng-disabled="processForm.$invalid || buttonSpinners.saveShow"
+           ng-click="saveEntity()" 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/process/processFormClustersStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/process/processFormClustersStepTpl.html b/falcon-ui/app/html/process/processFormClustersStepTpl.html
index 21bf4bf..8f58504 100644
--- a/falcon-ui/app/html/process/processFormClustersStepTpl.html
+++ b/falcon-ui/app/html/process/processFormClustersStepTpl.html
@@ -17,95 +17,91 @@
  * limitations under the License.
  */
 -->
-<form name="processForm" class="mt10" novalidate id="processFormClusterStep">
-  <div class="col-xs-offset-1 col-xs-22">
+<form name="processForm" novalidate>
+  <div class="col-xs-24">
     <div ng-repeat="cluster in process.clusters" class="row">
       <div class="col-xs-24 detailsBox processCluster">
-
-        <h5>Cluster</h5>
-        <div class="row">
-          <div class="col-xs-24">
-            <label class="light">Name</label>
-            <select ng-model="cluster.name" ng-class="{firstSelectClusterStep: $index === 0}"
+        <div class="col-xs-24"><label class="mt15" tooltip="process.cluster">CLUSTER</label></div>
+        <div class="col-xs-24">
+          <label class="light">Cluster Name<mandatory-field></mandatory-field></label>
+          <select ng-model="cluster.name" ng-class="{firstSelectClusterStep: $index === 0}"
                     ng-required="true"
                     class="form-control padding0"
                     validation-message="{{validations.messages.cluster}}">
-              <option value="" disabled selected style='display:none;'>-Select cluster-</option>
-              <option ng-repeat="clusterItem in clusterList">{{clusterItem.name}}</option>
-            </select>
-          </div>
+            <option value="" disabled selected style='display:none;'>-Select cluster-</option>
+            <option ng-repeat="clusterItem in clusterList">{{clusterItem.name}}</option>
+          </select>
         </div>
-        <div class="clearfix"></div>
 
-        <label class="col-xs-24"> Validity </label>
-        <div class="col-xs-24 validityBox">
-          <div class="startDateBox">
-            <label>Start
+        <div class="col-xs-24"><label class="mt15">VALIDITY</label></div>
+        <div class="col-xs-24"><label class="mt15 light">Time Zone : <span>{{process.timezone}}</span></label></div>
+        <div class="col-xs-24 validityBox plr0px">
+          <div class="col-xs-24 plr0px">
+            <div class="col-xs-4 startDateBox">
+              <label class="light">Start<mandatory-field></mandatory-field></label>
               <input type="text"
                      name="startDateInput"
                      class="form-control dateInput"
-                     placeholder="mm/dd/yyyy"
+                     placeholder="{{dateFormat | lowercase}}"
                      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
+
+            </div>
+            <div class="col-xs-6 startTimeBox">
+              <label class="light">Time<mandatory-field></mandatory-field></label>
+              <timepicker ng-change="constructDate()"
                           ng-model="cluster.validity.start.time"
                           hour-step="1"
                           minute-step="1"
                           show-meridian="true">
               </timepicker>
-            </label>
+            </div>
           </div>
-          <div class="endDateBox">
-            <label>End
+          <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-4 endDateBox">
+              <label class="light">End<mandatory-field></mandatory-field></label>
               <input type="text"
                      name="endDateInput"
                      class="form-control dateInput"
-                     placeholder="mm/dd/yyyy"
+                     placeholder="{{dateFormat | lowercase}}"
                      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
+            </div>
+            <div class="col-xs-6 endTimeBox">
+              <label class="light">Time<mandatory-field></mandatory-field></label>
+              <timepicker ng-change="constructDate()"
                           ng-model="cluster.validity.end.time"
                           hour-step="1"
                           minute-step="1"
                           show-meridian="true">
               </timepicker>
-            </label>
+            </div>
           </div>
-
-          <div class="col-xs-24 mt10">
+          <label class="col-xs-24 custom-danger validationMessageGral"
+                 ng-if="!cluster.validity.end.date">
+            {{validations.messages.date.empty}}
+          </label>
+        </div>
+        <div class="col-xs-24 mt10">
             <button type="button" class="btn btn-default pull-right btn-xs" ng-click="removeCluster($index)" ng-if="!$first">
               <span class="entypo minus"></span> delete
             </button>
-          </div>
         </div>
-
-
-
       </div>
     </div>
   </div>
@@ -114,20 +110,23 @@
       <span class="entypo plus"></span> add cluster
     </button>
   </div>
-  <div class="col-xs-24 mt20">
+
+  <div class="col-xs-24 pb15px mt35">
     <button class="btn prevBtn" type="button"
-         ng-click="goBack('forms.process.properties')"
+         ng-click="goBack()"
          ng-disabled="buttonSpinners.backShow">
-      Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
-    </button>
-    <button class="btn nextBtn pull-right"
-         ng-disabled="buttonSpinners.show"
-            ng-click="goNext(processForm.$invalid, 'forms.process.io')" >
-      Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+      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 class="btn nextBtn"
+             ng-disabled="buttonSpinners.show"
+             ng-click="goNext(processForm.$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/process/processFormGeneralStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/process/processFormGeneralStepTpl.html b/falcon-ui/app/html/process/processFormGeneralStepTpl.html
index cc21854..6665bb7 100644
--- a/falcon-ui/app/html/process/processFormGeneralStepTpl.html
+++ b/falcon-ui/app/html/process/processFormGeneralStepTpl.html
@@ -19,152 +19,522 @@
 -->
 <form name="processForm" class="mt10" novalidate id="processFormGeneralStep">
 
+  <div class="col-xs-24">
+    <label class="light" tooltip="process.name">Process Name<mandatory-field></mandatory-field></label>
+  </div>
+
+  <div class="col-xs-6">
+    <input type="text" class="form-control" ng-keydown="validations.acceptNoSpaces($event)"
+           check-name="{type:'process', check:!editingMode}" ng-class="{fakeInvalid:!validations.nameAvailable}"
+           ng-disabled="editingMode" id="entityNameField" ng-model="process.name"
+           ng-required="true" ng-maxlength="100" ng-pattern="validations.patterns.name"/>
+  </div>
+
+  <div class="col-xs-24">
+    <label class="light">Tags</label>
+  </div>
+
+  <div id="tagsSection" class="col-xs-12">
+    <div ng-repeat="tag in process.tags track by $index">
+      <div class="row dynamic-table-spacer">
+        <div class="col-xs-8">
+          <input type="text" class="form-control" ng-model="tag.key" placeholder="key"
+                 validation-optional-message="{{validations.messages.key}}"
+                 ng-pattern="validations.patterns.alpha" ng-required="tag.value"/>
+        </div>
+        <div class="col-xs-8">
+          <input type="text" class="form-control" ng-model="tag.value" placeholder="value"
+                 validation-optional-message="{{validations.messages.value}}"
+                 ng-pattern="validations.patterns.alpha" ng-required="tag.key"/>
+        </div>
+        <div class="col-xs-8">
+          <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-if="!$first || !$last">
+            <span class="entypo minus"></span> delete
+          </button>
+          <button type="button" class="btn btn-default btn-xs" ng-click="addTag()" ng-if="$last">
+            <span class="entypo plus"></span> ADD
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-xs-24">
+    <label>Details</label>
+  </div>
+
+  <div class="col-xs-5 plr0px">
+    <div class="col-xs-24">
+      <label class="light" tooltip="process.workflow.engine">Engine<mandatory-field></mandatory-field></label>
+      <select ng-model="process.workflow.engine"
+              class="form-control padding0"
+              ng-required="true"
+              validation-message="{{validations.messages.engine}}">
+        <option value="" disabled selected style='display:none;'>-Select engine-</option>
+        <option value="spark">Spark</option>
+        <option value="oozie">Oozie</option>
+        <option value="pig">Pig</option>
+        <option value="hive">Hive</option>
+      </select>
+    </div>
+
+    <div class="col-xs-24" ng-show="process.workflow.engine !== 'spark'">
+      <label class="light" tooltip="process.workflow.name">Workflow Name<mandatory-field></mandatory-field></label>
+      <input type="text" class="form-control"
+             id="workflowNameField"
+             ng-model="process.workflow.name"
+             ng-required="process.workflow.engine !== 'spark'"
+             ng-maxlength="100"
+             ng-pattern="validations.patterns.workflowName"
+             validation-optional-message="{{validations.messages.name}}" />
+    </div>
+
+    <div class="col-xs-24">
+      <label class="light" tooltip="process.workflow.path">Workflow Path<mandatory-field></mandatory-field></label>
+      <input type="text" class="form-control"
+             id="pathField"
+             ng-model="process.workflow.path"
+             ng-required="true"
+             ng-maxlength="200"
+             validation-message="{{validations.messages.path}}"
+             ng-pattern="validations.patterns.path"/>
+    </div>
+
+    <div class="col-xs-24">
+      <label class="light">Cluster<mandatory-field></mandatory-field></label>
+      <div ng-repeat="cluster in process.clusters track by $index">
+        <select ng-model="cluster.name"
+                  ng-required="true"
+                  ng-change="getSourceDefinition(cluster.name)"
+                  class="form-control padding0"
+                  validation-message="{{validations.messages.cluster}}">
+          <option value="" disabled selected style='display:none;'>-Select cluster-</option>
+          <option ng-repeat="clusterItem in clusterList track by $index">{{clusterItem.name}}</option>
+        </select>
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-offset-1 col-xs-6 plr0px" ng-show="process.workflow.engine==='spark'">
+    <div class="col-xs-24">
+      <label class="light" tooltip="process.workflow.spark.name">Name<mandatory-field></mandatory-field></label>
+      <input type="text" class="form-control"
+             ng-model="process.workflow.spark.name"
+             ng-required="process.workflow.engine==='spark'"
+             ng-maxlength="100"
+             ng-pattern="validations.patterns.name"
+             validation-optional-message="{{validations.messages.name}}" />
+    </div>
+
+    <div class="col-xs-24">
+      <label class="light" tooltip="process.workflow.spark.application">Application<mandatory-field></mandatory-field></label>
+      <input type="text" class="form-control"
+             ng-model="process.workflow.spark.jar"
+             ng-required="process.workflow.engine==='spark'" />
+    </div>
+
+    <div class="col-xs-24">
+      <label class="light" tooltip="process.workflow.spark.class">Main Class</label>
+      <input type="text" class="form-control"
+             ng-model="process.workflow.spark.class"
+             ng-required="process.workflow.engine==='spark' && !isPython" ng-disabled='isPython'/>
+    </div>
+
+    <div class="col-xs-12">
+      <label class="light" tooltip="process.workflow.spark.master">Runs On</label>
+      <select ng-model="process.workflow.spark.master"
+                class="form-control padding0"
+                ng-required="process.workflow.engine==='spark'">
+        <option value="" disabled selected style='display:none;'>-Select Runs On-</option>
+        <option value="yarn">Yarn</option>
+        <option value="local">Local</option>
+      </select>
+    </div>
+
+    <div class="col-xs-12 plr0px" ng-if="process.workflow.spark.master === 'yarn'">
+      <div class="col-xs-24">
+        <label class="light" tooltip="process.workflow.spark.mode">Mode<mandatory-field></mandatory-field></label>
+      </div>
+      <div class="col-xs-24 pt3px">
+          <input type="radio" name="sparkMode" value="cluster" ng-model="process.workflow.spark.mode" />
+          Cluster
+          <input type="radio" name="sparkMode" value="client" ng-model="process.workflow.spark.mode" />
+          Client
+      </div>
+    </div>
+
     <div class="col-xs-24">
-      <label class="light">Name</label>
-      <input type="text" class="form-control" ng-keydown="validations.acceptNoSpaces($event)"
-             check-name="{type:'process', check:cloningMode}" ng-class="{fakeInvalid:!validations.nameAvailable}"
-             ng-disabled="!cloningMode" id="entityNameField" ng-model="process.name"
-             ng-required="true" ng-maxlength="100" ng-pattern="validations.patterns.name"/>
+      <label class="light">Spark Options</label>
+      <input type="text" class="form-control" ng-model="process.workflow.spark.sparkOptions"/>
     </div>
 
     <div class="col-xs-24">
-      <label class="light">Tags</label>
+      <label class="light">Spark Arguments</label>
+      <input type="text" class="form-control" ng-model="process.workflow.spark.arg"/>
     </div>
+  </div>
+
+  <div class="col-xs-offset-1 col-xs-5 plr0px">
+    <div><label>INPUT(S)</label></div>
 
-    <div id="tagsSection" class="col-xs-24">
-      <div ng-repeat="tag in process.tags">
-        <div class="row dynamic-table-spacer">
-          <div class="col-xs-10">
-            <input type="text" class="form-control" ng-model="tag.key" placeholder="key"
-                   validation-optional-message="{{validations.messages.key}}"
-                   ng-pattern="validations.patterns.alpha" ng-required="tag.value"/>
+    <div ng-repeat="input in process.inputs track by $index">
+      <div class="col-xs-24 detailsBox processCluster">
+        <div class="row">
+          <div class="col-xs-24">
+            <label class="light">Name<mandatory-field></mandatory-field></label>
+            <input type="text" class="form-control"
+                   ng-class="{firstInput: $index === 0}"
+                   validation-message="{{validations.messages.name}}"
+                   ng-model="input.name"
+                   ng-required="true"
+                   ng-maxlength="39"
+                   ng-pattern="validations.patterns.inputName"/>
           </div>
-          <div class="col-xs-11">
-            <input type="text" class="form-control" placeholder="value"
-                   validation-optional-message="{{validations.messages.value}}"
-                   ng-model="tag.value" ng-pattern="validations.patterns.alpha" ng-required="tag.key"/>
+        </div>
+
+        <div class="row">
+          <div class="col-xs-24">
+            <label class="light">Feed<mandatory-field></mandatory-field></label>
+            <select ng-model="input.feed" ng-required="true" class="col-sm-24 form-control padding0"
+                    validation-message="{{validations.messages.feed}}">
+              <option value="" disabled selected style='display:none;'>-Select feed-</option>
+              <option ng-repeat="feedItem in feedsList track by $index">{{feedItem.name}}</option>
+            </select>
           </div>
-          <div class="col-xs-3">
-            <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-if="$index>0">
+        </div>
+
+        <div><label>INSTANCE</label></div>
+        <div class="row">
+          <div class="col-xs-12">
+            <label class="light">Start<mandatory-field></mandatory-field></label>
+            <input type="text" class="form-control" validation-message="{{validations.messages.value}}"
+                   ng-model="input.start"
+                   ng-required="true"
+                   ng-maxlength="39"/>
+          </div>
+          <div class="col-xs-12">
+            <label class="light">End<mandatory-field></mandatory-field></label>
+            <input type="text" class="form-control {{invalidEndDate}}" validation-message="{{validations.messages.value}}"
+                   ng-model="input.end"
+                   ng-required="true"
+                   ng-maxlength="100"
+                   on-blur="validateStartEndDate"/>
+            <label ng-show="invalidEndDate" class="custom-danger nameValidationMessage">End should be equal or greater than Start</label>
+          </div>
+        </div>
+        <div class="col-xs-24 mt10">
+            <button type="button" class="btn btn-default pull-right btn-xs" ng-click="removeInput($index)">
               <span class="entypo minus"></span> delete
             </button>
-          </div>
         </div>
       </div>
     </div>
-    <div class="col-xs-24 mt10 mb10">
-      <button type="button" class="btn btn-default btn-xs" ng-click="addTag()">
-        <span class="entypo plus"></span> add tag
-      </button>
+
+    <button type="button" class="btn btn-default btn-xs mt10 mb10 addInputButton" ng-click="addInput()">
+      <span class="entypo plus"></span> ADD
+    </button>
+  </div>
+
+  <div class="col-xs-offset-1 col-xs-5 plr0px">
+    <div><label>OUTPUT(S)</label></div>
+    <div ng-repeat="output in process.outputs track by $index">
+      <div class="col-xs-24 detailsBox processCluster">
+        <div class="row">
+          <div class="col-xs-24">
+            <label class="light">Name<mandatory-field></mandatory-field></label>
+            <input type="text"
+                   ng-class="{firstOutput: $index === 0}"
+                   class="form-control"
+                   validation-message="{{validations.messages.name}}"
+                   ng-model="output.name"
+                   ng-required="true"
+                   ng-maxlength="39"
+                   ng-pattern="validations.patterns.id"/>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xs-24">
+            <label class="light">Feed<mandatory-field></mandatory-field></label>
+            <select ng-model="output.feed" ng-required="true" class="col-sm-24 form-control padding0"
+                    validation-message="{{validations.messages.feed}}" >
+              <option value="" disabled selected style='display:none;'>-Select feed-</option>
+              <option ng-repeat="feedItem in feedsList track by $index">{{feedItem.name}}</option>
+            </select>
+          </div>
+        </div>
+        <div><label class="mt15">INSTANCE</label></div>
+        <div class="row">
+          <div class="col-xs-24">
+            <label class="light">Instance<mandatory-field></mandatory-field></label>
+            <input type="text" class="form-control" validation-message="{{validations.messages.value}}"
+                   ng-model="output.outputInstance" ng-required="true" ng-maxlength="39"/>
+          </div>
+        </div>
+        <div class="row mt10">
+          <button type="button" class="btn btn-default pull-right btn-xs" ng-click="removeOutput($index)">
+            <span class="entypo minus"></span> delete
+          </button>
+        </div>
+      </div>
     </div>
 
-  <h4 class="col-xs-24">Workflow</h4>
+    <button type="button" class="btn btn-default btn-xs mb10 mt10" ng-click="addOutput()">
+      <span class="entypo plus"></span> ADD
+    </button>
+  </div>
 
   <div class="col-xs-24">
-    <div class="light">Name</div>
-    <input type="text" class="form-control" validation-optional-message="{{validations.messages.name}}"
-           id="workflowNameField"
-           ng-model="process.workflow.name"
-           ng-maxlength="100"
-           ng-pattern="validations.patterns.name"/>
+    <label>Run Duration<mandatory-field></mandatory-field></label>
   </div>
-
-  <div id="engineSection" class="col-xs-24">
-    <label class="light">Engine</label>
-    <div class="row">
-      <div class="col-xs-4">
-        <input
-                type="radio" id="oozieEngineRadio"
-                ng-change="selectWorkflow()"
-                ng-model="process.workflow.engine"
-                value="oozie" /> Oozie
+  <div class="col-xs-24" ng-repeat="cluster in process.clusters track by $index" class="validityBox">
+    <div class="col-xs-24 plr0px validityBox">
+      <div class="col-xs-24 plr0px">
+        <label class="light">Start</label>
       </div>
-      <div class="col-xs-4">
-        <input type="radio" id="pigEngineRadio"
-               ng-change="selectWorkflow()"
-               ng-model="process.workflow.engine"
-               value="pig" /> Pig
+      <div class="plr0px col-xs-2 startDateBox">
+        <input type="text"
+          name="startDateInput"
+          class="form-control dateInput"
+          placeholder="{{dateFormat | lowercase}}"
+          ng-model="cluster.validity.start.date"
+          simple-date-picker />
       </div>
-      <div class="col-xs-4">
-        <input type="radio" id="hiveEngineRadio"
-               ng-change="selectWorkflow()"
-               ng-model="process.workflow.engine"
-               value="hive" /> Hive
+      <div class="col-xs-3 startTimeBox">
+        <timepicker ng-change="constructDate()"
+                    ng-model="cluster.validity.start.time"
+                    hour-step="1"
+                    minute-step="1"
+                    show-meridian="true">
+        </timepicker>
+      </div>
+      <label class="col-xs-24 custom-danger validationMessageGral"
+             ng-if="!cluster.validity.start.date">
+        {{validations.messages.date.empty}}
+      </label>
+    </div>
+    <div class="col-xs-24 plr0px validityBox">
+      <div class="col-xs-24 plr0px">
+        <label class="light">End</label>
+      </div>
+      <div class="plr0px col-xs-2 endDateBox">
+        <input type="text"
+          name="startDateInput"
+          class="form-control dateInput"
+          placeholder="{{dateFormat | lowercase}}"
+          ng-model="cluster.validity.end.date"
+          simple-date-picker />
       </div>
+      <div class="col-xs-3 endTimeBox">
+        <timepicker ng-change="constructDate()"
+                    ng-model="cluster.validity.end.time"
+                    hour-step="1"
+                    minute-step="1"
+                    show-meridian="true">
+        </timepicker>
+      </div>
+      <label class="col-xs-24 custom-danger validationMessageGral"
+             ng-if="!cluster.validity.end.date">
+        {{validations.messages.date.empty}}
+      </label>
+    </div>
+  </div>
 
-      <select id="engineVersionField"
-              ng-model="process.workflow.version"
-              ng-show="process.workflow.engine">
+  <div class="col-xs-24">
+    <label>Frequency</label>
+  </div>
 
-        <option value="" disabled selected style='display:none;'>-Select {{process.workflow.engine}} version-</option>
+  <div class="col-xs-12 plr0px">
+    <div class="col-xs-24">
+      <label class="light">Repeat Every<mandatory-field></mandatory-field></label>
+    </div>
+    <div class="col-xs-24 inlineInputsGroup">
+      <input type="text" class="form-control" validation-message="{{validations.messages.number}}" name="frequencyQuantity"
+             ng-model="process.frequency.quantity" ng-keydown="validations.acceptOnlyNumber($event)"
+             ng-keyup="checkMininumFrequency(process.frequency.quantity,process.frequency.unit, processForm.frequencyQuantity)"
+             id="frequencyQuantity"
+             ng-required="true"
+             ng-pattern="validations.patterns.twoDigits"/>
 
-        <option ng-repeat="version in versions"
-          id="{{process.workflow.engine}}Version{{$index}}"
-          value="{{version}}"
-          ng-selected="process.workflow.version === version">
-          {{version}}
-        </option>
+      <select ng-model="process.frequency.unit" ng-required="true"
+        ng-change="checkMininumFrequency(process.frequency.quantity,process.frequency.unit, processForm.frequencyQuantity)"
+        validation-message="{{validations.messages.number}}">
+        <option selected value="minutes">minutes</option>
+        <option value="hours">hours</option>
+        <option value="days">days</option>
+        <option value="months">months</option>
       </select>
-
+      <div class="col-xs-24 custom-danger" ng-if="!isFrequencyValid">{{validations.messages.frequency.minimum}}</div>
+    </div>
+    <div class="col-xs-24">
+      <label class="light" tooltip="process.properties.timezone">Timezone<mandatory-field></mandatory-field></label>
+    </div>
+    <div class="col-xs-18">
+      <time-zone-select ng-model="process.timezone" id="timeZoneSelect" required="true">
+      </time-zone-select>
     </div>
   </div>
-  <div class="col-xs-24">
-    <label class="light">Path</label>
-    <input type="text" class="form-control"
-           id="pathField"
-           ng-model="process.workflow.path"
-           ng-required="true"
-           ng-maxlength="200"
-           validation-optional-message="{{validations.messages.path}}"
-           ng-pattern="validations.patterns.osPath"/>
-  </div>
-
-  <div class="aclBox col-xs-24">
-    <h4>Access Control List</h4>
-    <div>
-      <label>Owner
-        <input type="text"
-               name="aclOwnerInput"
-               ng-model="process.ACL.owner"
-               ng-pattern="validations.patterns.unixId"
-               ng-required="true"
-               class="form-control"
-               validation-message="{{validations.messages.acl.owner}}"/>
-      </label>
+
+  <div class="col-xs-24 advancedOption" ng-click="expandOptions = !expandOptions" id="processAdvancedOption">
+    <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 id="advancedOptionsBox" class="col-xs-24 plr0px" ng-class="{expanded:expandOptions}">
+    <div class="col-xs-24"><label>Retry Policy</label></div>
+    <div class="col-xs-24 plr0px">
+      <div class="col-xs-4 plr0px">
+        <div class="col-xs-24">
+          <label class="light" tooltip="process.properties.retryPolicy" tooltip-position="up">
+            Type
+          </label>
+        </div>
+        <div class="col-xs-24">
+          <select ng-model="process.retry.policy" ng-required="true" validation-message="{{validations.messages.option}}" ng-change="policyChange()">
+            <option value="" disabled selected style='display:none;'>-Select policy-</option>
+            <option value="periodic">Periodic</option>
+            <option value="exp-backoff">Exponential Backup</option>
+            <option value="final">None</option>
+          </select>
+        </div>
+      </div>
+      <div class="col-xs-offset-1 col-xs-5 plr0px">
+        <div class="col-xs-24">
+          <label class="light">Delay Up to</label>
+        </div>
+        <div class="col-xs-24 inlineInputsGroup">
+          <input type="text" class="form-control"
+                 ng-model="process.retry.delay.quantity" validation-message="{{validations.messages.number}}"
+                 id="delayQuantity" ng-keydown="validations.acceptOnlyNumber($event)"
+                 ng-disabled = "process.retry.policy === 'final'"
+                 ng-required="true"
+                 ng-pattern="validations.patterns.twoDigits"/>
+
+          <select ng-model="process.retry.delay.unit" ng-required="true" ng-disabled = "process.retry.policy === 'final'" validation-message="{{validations.messages.option}}">
+            <option value="" disabled selected style='display:none;'>-Select delay-</option>
+            <option 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-4 plr0px">
+        <div class="col-xs-24">
+          <label class="light">Attempts</label>
+        </div>
+        <div class="col-xs-24">
+          <input type="text" class="form-control" validation-message="{{validations.messages.number}}"
+                 ng-model="process.retry.attempts" ng-keydown="validations.acceptOnlyNumber($event)"
+                 id="attemptsField"
+                 ng-required="true"
+                 ng-disabled = "process.retry.policy === 'final'"
+                 ng-pattern="validations.patterns.twoDigits"/>
+        </div>
+      </div>
     </div>
-    <div>
-      <label>Group
-        <input type="text"
-               name="aclGroupInput"
-               ng-model="process.ACL.group"
-               ng-pattern="validations.patterns.unixId"
-               ng-required="true"
-               class="form-control"
-               validation-message="{{validations.messages.acl.group}}" />
-      </label>
+
+    <div class="col-xs-24"><label>Performance & Ordering</label></div>
+    <div class="col-xs-24 plr0px">
+      <div class="col-xs-4 plr0px">
+        <div class="col-xs-24">
+          <label class="light">Max Parallel Instances</label>
+        </div>
+        <div class="col-xs-24">
+          <select ng-model="process.parallel" ng-required="true">
+            <option ng-repeat="value in [1,2,3,4,5,6,7,8,9,10,11,12] track by $index">{{value}}</option>
+          </select>
+        </div>
+      </div>
+      <div class="col-xs-offset-1 col-xs-4 plr0px">
+        <div class="col-xs-24">
+          <label class="light" tooltip="process.properties.order">Order</label>
+        </div>
+        <div class="col-xs-24">
+          <select ng-model="process.order" ng-required="true" validation-message="{{validations.messages.option}}">
+            <option value="" disabled selected style='display:none;'>-Select order-</option>
+            <option ng-repeat="value in ['FIFO', 'LIFO', 'LAST_ONLY'] track by $index">{{value}}</option>
+          </select>
+        </div>
+      </div>
     </div>
-    <div>
-      <label>Permissions
-        <input type="text"
-               name="aclPermissionsInput"
-               ng-model="process.ACL.permission"
-               ng-pattern="validations.patterns.unixPermissions"
-               ng-required="true"
-               class="form-control"
-               validation-message="{{validations.messages.acl.permission}}" />
-      </label>
+
+    <div class="col-xs-24">
+      <label>Properties</label>
+    </div>
+    <div ng-repeat="property in process.properties track by $index" class="col-xs-24 plr0px">
+        <div class="col-xs-6 dynamic-table-spacer">
+          <input type="text" class="form-control" ng-model="property.name"
+                 ng-pattern="validations.patterns.propertyName"
+                 validation-optional-message="{{validations.messages.name}}"
+                 ng-disabled="xmlPreview.edit"
+                 ng-required="property.value" placeholder="name" />
+        </div>
+        <div class="col-xs-6 dynamic-table-spacer">
+          <input type="text" class="form-control" ng-model="property.value"
+                 validation-optional-message="{{validations.messages.value}}"
+                 ng-disabled="xmlPreview.edit"
+                 ng-required="property.name" placeholder="value" />
+        </div>
+        <div class="dynamic-table-spacer">
+          <button type="button" class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="!$first || !$last"
+               ng-disabled="xmlPreview.edit">
+            <span class="entypo minus"></span> delete
+          </button>
+          <button type="button" class="btn btn-default btn-xs" ng-click="addProperty()"
+              ng-disabled="xmlPreview.edit" ng-if="$last">
+              <span class="entypo plus"></span> ADD
+          </button>
+        </div>
+    </div>
+
+
+    <div class="col-xs-24"><label class="mt15">Access Control List</label></div>
+    <div class="col-xs-24 plr0px">
+      <div class="col-xs-4">
+          <label class="light">Owner<mandatory-field></mandatory-field></label>
+          <input type="text"
+                 name="aclOwnerInput"
+                 ng-model="process.ACL.owner"
+                 ng-pattern="validations.patterns.unixId"
+                 ng-required="true"
+                 class="form-control"
+                 validation-message="{{validations.messages.acl.owner}}"/>
+      </div>
+      <div class="col-xs-4">
+          <label class="light">Group<mandatory-field></mandatory-field></label>
+          <input type="text"
+                 name="aclGroupInput"
+                 ng-model="process.ACL.group"
+                 ng-pattern="validations.patterns.unixId"
+                 ng-required="true"
+                 class="form-control"
+                 validation-message="{{validations.messages.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="process.ACL.permission"></acl-permissions>
+        </div>
+      </div>
     </div>
   </div>
 
-  <div class="col-xs-24 mt20">
-    <button id="nextButton" class="btn nextBtn pull-right"
-         ng-disabled="buttonSpinners.show"
-         ng-click="goNext(processForm.$invalid, 'forms.process.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="nextButton" class="btn nextBtn"
+           ng-disabled="buttonSpinners.show"
+           ng-click="goNext(processForm.$invalid)" scroll-to-error>
+        NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+      </button>
+      <button class="btn nextBtn"
+           ng-disabled="processForm.$invalid || buttonSpinners.saveShow"
+           ng-click="saveEntity(processForm.$invalid)" scroll-to-error>
+        SAVE <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.saveShow" />
+      </button>
+    </div>
   </div>
 
-</form>
\ No newline at end of file
+</form>


Mime
View raw message