You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by db...@apache.org on 2016/10/27 19:04:18 UTC

[05/10] ambari git commit: AMBARI-18691. Improve and Update Workflow designer to support coordinators and bundles. (Belliraj HB via dipayanb)

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/services/workspace-manager.js
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/services/workspace-manager.js b/contrib/views/wfmanager/src/main/resources/ui/app/services/workspace-manager.js
new file mode 100644
index 0000000..f5eb6e7
--- /dev/null
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/services/workspace-manager.js
@@ -0,0 +1,62 @@
+/*
+*    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.
+*/
+
+import Ember from 'ember';
+
+export default Ember.Service.extend({
+  tabsInfo : {},
+  workInProgress : {},
+  setLastActiveTab(tabId){
+    console.log("setting last active tabId "+tabId);
+    localStorage.setItem('lastActiveTab', tabId);
+  },
+  getLastActiveTab(){
+    console.log("get last active "+localStorage.getItem('lastActiveTab'));
+    return localStorage.getItem('lastActiveTab');
+  },
+  restoreTabs(){
+    var tabs = localStorage.getItem('tabsInfo');
+    console.log("Restoring tabs "+tabs);
+    return JSON.parse(tabs);
+  },
+  saveTabs(tabs){
+    if(!tabs){
+      return;
+    }
+    var tabArray = [];
+    tabs.forEach((tab)=>{
+      tabArray.push({
+        type : tab.type,
+        id : tab.id,
+        name : tab.name
+      });
+    });
+    console.log("Saving tabs "+JSON.stringify(tabArray));
+    localStorage.setItem('tabsInfo', JSON.stringify(tabArray));
+  },
+  restoreWorkInProgress(id){
+    console.log("Restoring workInProgress "+id);
+    return localStorage.getItem(id);
+  },
+  saveWorkInProgress(id, workInProgress){
+    console.log("Restoring workInProgress "+id);
+    localStorage.setItem(id, workInProgress);
+  },
+  deleteWorkInProgress(id){
+    localStorage.removeItem(id);
+  }
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/styles/app.less
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/styles/app.less b/contrib/views/wfmanager/src/main/resources/ui/app/styles/app.less
new file mode 100644
index 0000000..5d1b3a3
--- /dev/null
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/styles/app.less
@@ -0,0 +1,1497 @@
+/*
+ *    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.
+ */
+
+@bgColor: #eee;
+@bgGreenActive: #5bb75b;
+@moduleHeaderBgColor: #fafafa;
+@nodeDefaultHeight: 40px;
+@nodeDefaultWidth: 40px;
+@defaultRed: red;
+@defaultBorderRadius: 5px;
+@nodeActionBgColor: #E5E5E5;
+@defaultPropertiesEditorHeight: 350px;
+
+body {
+    background: @bgColor;
+    padding: 0;
+    margin: 0;
+}
+a {
+  color: #000;
+}
+.padding0 {
+  padding: 0px;
+}
+.paddingtop7{
+  padding-top:7px;
+}
+.paddingtop8{
+  padding-top:7px;
+}
+.paddingbottom8{
+  padding-bottom:7px;
+}
+.paddingtop10{
+  padding-top:10px;
+}
+.padding10{
+    margin-top: 10px;
+}
+.padding20{
+    margin-top: 20px;
+}
+.marginleft20{
+  margin-left: 20px !important;
+}
+.paddingright10{
+  padding-right: 10px;
+}
+.marginright5{
+  margin-right: 5px !important;
+}
+#arrow{
+    top: 24%;
+    left: -22px;
+    margin-top: -11px;
+    border-right-color: #999 !important;
+    border-right-color: rgba(0, 0, 0, .25);
+    border-left-width: 0;
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 11px;
+}
+
+.container-custom {
+  background-color: @moduleHeaderBgColor;
+}
+
+.disabled {
+    cursor:none;
+}
+#header {
+    white-space: nowrap;
+    background: @bgGreenActive;
+    background-position: 10px;
+    color: yellow;
+    height: 50px;
+    padding: 10px;
+    font-size: 20px;
+}
+.branch{
+    padding: 0px !important;
+    border: 0px !important;
+    background: inherit !important;
+}
+
+.branch input {
+  border: 0px;
+  text-align: center;
+}
+
+#designer {
+  position: relative;
+}
+
+#wf_title {
+  border-bottom: 1px dotted #000;
+}
+
+.editable {
+  padding: 5px 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  white-space: nowrap;
+  text-align: left;
+  margin: 0 2px;
+}
+
+.editable:focus,
+.editable:hover {
+    border: 1px solid #999;
+    background: #fff;
+    cursor: text;
+}
+
+.action {
+    float: left;
+    padding: 5px;
+    margin: 2px;
+    height: 60px;
+    line-height: 50px;
+    width: 62px;
+    font-size: small;
+    overflow: hidden;
+    text-align: center;
+}
+
+.node,
+.actions_list_left li:hover {
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
+    background: #ffffff;
+}
+
+.node {
+    text-align: center;
+    position: absolute;
+    left: 50%;
+    border: 1px solid #bbb;
+    overflow: visible;
+    background: transparent;
+    border: none;
+}
+
+.node-item{
+  background:#e5e5e5;
+  border:  1px solid #ABABAB;
+  z-index:4;
+
+}
+
+.action_node {
+    min-width: 195px;
+}
+
+.fork,
+.join {
+    border-radius: 70px;
+    width: @nodeDefaultWidth;
+    height: @nodeDefaultHeight;
+    white-space: wrap;
+    padding-top: 10px;
+}
+
+.start,
+.end {
+    border-radius: 60px;
+    width: @nodeDefaultWidth;
+    height: @nodeDefaultHeight;
+    background: #fff;
+    line-height: 25px;
+    cursor: not-allowed;
+}
+
+.start {
+  top: 20px;
+  padding-left: 7px;
+  padding-top: 6px;
+}
+.kill{
+  border-radius: @defaultBorderRadius;
+  min-width: 178px;
+  height: @nodeDefaultHeight;
+}
+.kill .fa-ban {
+  color: @defaultRed;
+}
+.hrClass{
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.kill-name{
+  padding-left: 40px;
+  margin-top: -35px;
+}
+
+.node .editable {
+    padding: 2px 5px;
+    width: 8em;
+    text-align: center;
+}
+
+.node .error{
+     border: 1px solid #a94442;
+}
+
+.connector_overlay {
+    transition: all .3s ease-in;
+    white-space: nowrap;
+    opacity: .8;
+    border: 1px solid #ddd;
+    background: #1a8cff;
+    border-radius: 30px;
+    width: 30px;
+    height: 30px;
+    line-height: 28px;
+    text-align: center;
+    cursor: pointer;
+    transform: scale(0.8);
+
+}
+
+.jsplumb-hover .connector_overlay,
+.connector_overlay:hover {
+    opacity: 1;
+}
+
+.node_actions {
+    transition: opacity 1s ease-in;
+    opacity: 0;
+    position: absolute;
+    white-space: nowrap;
+    border: 1px solid #999;
+    background: @nodeActionBgColor;
+    border-radius: 3px;
+    min-width: 20px;
+    height: 28px;
+    cursor: pointer;
+}
+.node_actions i{
+  padding: 5px;
+}
+.node_properties {
+    border-radius: 30px;
+    cursor: pointer;
+}
+.node_properties:hover {
+    cursor: pointer;
+}
+.decision_node .node_properties {
+  margin-top: -16px;
+}
+.decisionNodeError{
+    position: relative;
+    left: 50px;
+ }
+.action-node {
+    border-radius: @defaultBorderRadius;
+    height: 38px;
+}
+.node_left .fa-trash-o{
+    color: @defaultRed;
+}
+.node_left {
+  right: -45px;
+  top: -61%;
+}
+.decision_node .node_left{
+    transform: rotate(315deg) scale(1.4);
+    right: -50px;
+    top: -126%;
+}
+.nodeEnd{
+    top:15%;
+    position: relative;
+}
+.nodeStart{
+    right:5%;
+    position: relative;
+}
+.node_bottom {
+    bottom: 50%;
+    left: 50%;
+    z-index: 5;
+    transform: translate(-50%, -20%) scale(0.8);
+    opacity: 1;
+    border-radius: 3px;
+    width: 40px;
+    height: 24px;
+}
+.fork .node_bottom {
+    top: 80%;
+}
+.node_bottom_actions{
+  position: absolute;
+  background: @nodeActionBgColor;
+  white-space: nowrap;
+}
+.node:hover .node_actions {
+    opacity: 1;
+}
+
+.action_node {
+    border-radius: 4px;
+}
+
+input:invalid {
+    border: 1px solid @defaultRed;
+}
+
+.fa-exclamation-triangle {
+    color: @defaultRed;
+}
+
+.actions_list_left {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.actions_list_left li.disabled {
+    cursor: not-allowed;
+    background: #eee;
+    color: #ccc;
+}
+
+.actions_list_left li {
+    background: #fff;
+    width: 60px;
+    padding: 10px;
+    border: 1px solid silver;
+    border-radius: @defaultBorderRadius;
+    margin: 2px 0;
+    cursor: move;
+    z-index: 1000;
+    display: inline-block;
+    position: relative;
+    text-align: center;
+}
+
+.control_flow_node,
+.control_flow li:hover {
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fdfeea+0,e8f135+100 */
+    /*background: #fdfeea;*/
+    /* Old browsers */
+    /*background: -moz-linear-gradient(top, #fdfeea 0%, #e8f135 100%);*/
+    /* FF3.6-15 */
+    /*background: -webkit-linear-gradient(top, #fdfeea 0%, #e8f135 100%);*/
+    /* Chrome10-25,Safari5.1-6 */
+    /*background: linear-gradient(to bottom, #fdfeea 0%, #e8f135 100%);*/
+    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    /*filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fdfeea', endColorstr='#e8f135', GradientType=0);*/
+    /* IE6-9 */
+}
+.decision-condition {
+  white-space: nowrap;
+  width: 10em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid #D0D0D0;
+  border-radius: 3px;
+  background-color: #F5F5F5;
+  padding: 3px;
+  font-size: 11px;
+  opacity: 0.8;
+}
+.decision_node {
+  transform: rotate(45deg) scale(.7);
+  width: 60px;
+  height: 60px;
+  padding: 5px;
+  float: right;
+  margin: 0 2px;
+}
+.decision-data-wrapper{
+  transform: rotate(-45deg) scale(1.3); ;
+}
+.decision_node_data .editable{
+  margin-right: 10px;
+}
+.decision_node_data {
+  padding-right: 31px;
+  float: right;
+  margin: 0 2px;
+}
+.fork_node_data {
+  float: right;
+  margin-top: -15px;
+}
+.fork_node_data .editable {
+  margin-right: 5px;
+}
+.decision_node .content {
+    text-align: center;
+    position: absolute;
+    padding: 0 5px;
+    width: 120px;
+    height: 70px;
+    transform: rotate(-45deg) scale(1.2) translate(-13%, 30%);
+    white-space: nowrap;
+}
+
+.breadcrumb {
+    margin: 0;
+}
+
+.collapse.width {
+    height: auto;
+    -webkit-transition: width 0.35s ease;
+    -moz-transition: width 0.35s ease;
+    -o-transition: width 0.35s ease;
+    transition: width 0.35s ease;
+}
+
+.highlighter-always {
+    opacity: 1;
+    animation-name: highlighter;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-out;
+}
+
+@keyframes highlighter {
+    0% {
+        transform: scale(1)
+    }
+    50% {
+        transform: scale(1.5)
+    }
+    100% {
+        transform: scale(1)
+    }
+}
+
+.control_flow li._fork {
+    margin: 4px 8px;
+}
+
+.control_flow li.switch {
+    border-radius: 0px;
+    transform: rotate(45deg) translate(0%, -0%) scale(.9);
+}
+
+.action_node_data {
+    padding: 5px;
+    float: left;
+    margin: 0 2px;
+}
+
+#content {
+    padding: 0;
+    margin: 0;
+    float: left;
+    position: relative;
+    transition: left .6s cubic-bezier(0.175, 0.885, 0.320, 1.275);
+}
+
+.expanded {
+    left: 0px;
+}
+
+.expanded:after {
+    content: "\f100" !important;
+}
+
+.collapsed {
+    left: -215px;
+}
+
+.title-btn,
+.title-btn:hover {
+    border: 0;
+    background: transparent;
+}
+
+.back_button {
+    height: 30px;
+    background-color: #fff;
+    position: relative;
+    margin-left: 13px;
+    border-radius: @defaultBorderRadius;
+    border: 1px solid #ccc;
+}
+
+.back_button:before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: -13px;
+    border-style: solid;
+    border-width: 15px 15px 15px 0;
+    border-color: transparent #ccc transparent transparent;
+}
+
+.back_button:after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: -12px;
+    border-style: solid;
+    border-width: 14px 14px 14px 0;
+    border-color: transparent #fff transparent transparent;
+}
+
+.back_button > a {
+    display: block;
+    text-decoration: none;
+    text-align: center;
+    color: #000;
+    padding: 0 10px 0 5px;
+    line-height: 27px;
+    font-size: smaller;
+}
+
+.ambari-view #header {
+    display: none;
+}
+
+.ambari-view #content {
+    padding: 0;
+}
+
+.ambari-view body {
+    background: #fff;
+}
+
+.messageDiv {
+    position: absolute;
+    left: 40%;
+    top: 100px;
+    z-index: 1;
+}
+
+.workflow-error {
+    top:50px;
+    left: 75%;
+    z-index: 1;
+}
+
+#action_properties_dialog .modal-body {
+    max-height: @defaultPropertiesEditorHeight;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+#action_properties_dialog .container,
+#global_properties_dialog .container {
+    max-width: 180%;
+}
+
+#action_properties_dialog .blank-form {
+    right: 15px;
+    position: relative;
+}
+
+#action_properties_dialog .modal-dialog,
+#workflow_sla_dialog .modal-dialog,
+#global_properties_dialog .modal-dialog,
+#workflow_parameters_dialog .modal-dialog,
+#workflow_credentials_dialog .modal-dialog,
+#version-settings-dialog .modal-dialog,
+#control-dialog .modal-dialog,
+#ConfirmDialog .modal-dialog,
+#killnode-manager-dialog .modal-dialog {
+    width: 800px;
+}
+#configureJob .modal-dialog{
+  width: 650px;
+}
+#collapseOne{
+    margin: 10px;
+}
+.panel-heading {
+    padding: 4px 15px;
+}
+
+#action_properties_dialog .panel-default > .panel-heading,
+#global_properties_dialog .panel-default > .panel-heading,
+#workflow_sla_dialog .panel-default > .panel-heading,
+#workflow_credentials_dialog .panel-default > .panel-heading,
+#configureWorkfowModal .panel-default > .panel-heading,
+#workflow_parameters_dialog .panel-default > .panel-heading,
+#killnode-manager-dialog .panel-default > .panel-heading,
+ .whiteLabel, .whiteLabel:hover, .whiteLabel:focus, .whiteLabel:visited, .whiteLabel:active {
+    background-color: @bgGreenActive;
+    color: #fff;
+}
+.btn-primary{
+    background-color: @bgGreenActive !important;
+    border-color: #289028 !important;
+    color: #fff;
+}
+.btn-primary:visited,.btn-primary:focus,.btn-primary:active,.btn-primary.active{
+    background-color: @bgGreenActive !important;
+    border-color: #289028 !important;
+    color: #fff;
+}
+.btn-primary:hover{
+  background-color: #289028 !important;
+  border-color: #289028 !important;
+  color: #fff;
+}
+._actions_popup {
+    padding: 4px;
+}
+
+._actions_popup .control_flow {
+    padding-left: 20%;
+}
+
+._actions_popup ul {
+    padding: 0;
+    margin: 0;
+}
+
+._actions_popup h4 {
+    font-size: 10px;
+    font-weight: bold;
+    border-bottom: 1px solid #e5e5e5;
+    padding-bottom: 5px;
+}
+
+._actions_popup li {
+    list-style: none;
+    float: left;
+    width: 53px;
+    height: 50px;
+    border: 1px solid silver;
+    margin: 3px;
+    padding: 10px;
+    text-align: center;
+    font-size: 11px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+.labels {
+    width:70px;
+}
+.error{
+    border: 2px solid @defaultRed;
+}
+.validated{
+    border: 2px solid #4cae4c;
+}
+.notification {
+    width:40%;
+    left:50%;
+    position: relative;
+}
+.redColor{
+    color: @defaultRed;
+}
+.killNode{
+    width: 150px;
+}
+.zoom-buttons {
+  position: absolute;
+  top: 9px;
+  right: 2%;
+}
+.legend {
+    right: 1%;
+
+}
+.globlaPropetiesInfo{
+        width: 80%;
+    left: 10%;
+    position: relative;
+}
+.zoom-buttons .btn {
+    font-size: 8px;
+}
+
+.requiredField {
+    color: @defaultRed;
+}
+#search-bar .twitter-typeahead {
+    position: inherit !important;
+}
+#search-bar .tt-hint {
+  display: none !important;
+}
+#search-bar .bootstrap-tagsinput {
+    width: 260px;
+    border-radius: 0px;
+    line-height: 20px;
+    vertical-align: top;
+    height: 30px;
+    overflow-y: auto;
+}
+#search-bar .bootstrap-tagsinput .label-info{
+    background-color : @bgGreenActive;
+}
+#search-bar .tt-menu {
+    position: absolute;
+    top: 100%;
+    left: inherit !important;
+    z-index: 100;
+    border: 1px solid rgba(0,0,0,0.2);
+    margin-top: 7px;
+    background-color: white;
+    width: 60% !important;
+    padding: 0 5px;
+}
+#job-detail-app-path{
+  overflow-x: scroll;
+}
+
+#search-bar .search-icon {
+  display: inline-block;
+  border: 1px solid #ccc;
+  padding: 4px 10px;
+  border-left: 0px;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+#startDate, #endDate {
+  height: 30px;
+  width: 162px;
+}
+
+.jobTitle {
+  height: 24px;
+  margin-left: 10px;
+  line-height: 30px;
+}
+
+.info {
+    float: left;
+    margin-right: 20px;
+    color: #777;
+    padding-top: 4px;
+}
+
+.pages {
+    margin-right: 40px;
+}
+
+.listing-footer {
+  border-top: 1px solid #d2d2d2;
+  border-bottom: 1px solid #d2d2d2;
+  padding: 3px 0px;
+  margin: 0 0 5px 0;
+}
+
+.page-selector {
+  padding: 4px 12px;
+  border-radius: 0px;
+}
+
+.listing thead {
+    background: #f5f5f5;
+}
+
+.listing th {
+  border-left : 1px solid #ddd;
+  border-bottom: 1px solid #ddd !important;
+}
+
+.listing tr th:first-child {
+  border-left: 0;
+}
+
+.listing > tbody > tr > td {
+  vertical-align: middle;
+  padding: 5px;
+  border-left: 0;
+  border-right: 0;
+}
+
+.job-listing > tbody > tr > td {
+  border-bottom: 1px solid #ddd;
+}
+
+
+.pointer {
+  cursor: pointer;
+}
+
+#job-details .nav-tabs {
+  background: #eee;
+  margin-bottom: 10px;
+}
+
+.preview pre.prettyprint {
+  border: none;
+  background: #fff;
+}
+
+.preview pre {
+  border: none;
+  background: #fff;
+}
+
+.date-picker {
+  position: relative;
+}
+
+.actions-col .loading-container{
+  position: relative;
+}
+
+#bulk-action-loader .loading-container{
+  position: relative;
+}
+
+.decisionNodeHandler {
+    left: 10%;
+    bottom: 30%;
+    position: relative;
+}
+
+.decisionBox {
+    right: 10px;
+    top: 13%;
+    width:75px;
+    position: relative;
+}
+
+.pages .open .dropdown-menu {
+  max-height: 120px;
+  overflow-y: scroll;
+  min-width : 75px;
+  width : 75px;
+}
+
+#action-details .panel-heading {
+  padding: 10px 15px;
+}
+
+#bulk-action-button .dropdown-menu li .fa {
+  margin-right: 10px;
+}
+
+#dashboard, #dashboard .panel, .panel-heading, .panel-body {
+  border-radius: 0px;
+}
+
+#job-details, #job-details .panel, .panel-heading, .panel-body {
+  border-radius: 0px;
+}
+
+#dashboard .listing-error{
+  text-align: center;
+}
+
+#dashboard .panel {
+  border: 0;
+  border-bottom: 1px solid #ddd;
+}
+
+#loading {
+    position: absolute;
+    top: 90px;
+    left: 0;
+    display: none;
+    width: 100vw;
+    height: 80vh;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.loader img {
+  height: 40px;
+  width: 50px;
+}
+
+#search-table {
+    margin-bottom: 0px;
+}
+
+#search-table .bulk-actions-buttons {
+    margin-left: -124px;
+    margin-top: 3px;
+    position: fixed;
+    transition: all .5s ease;
+}
+
+#search-table .bulk-actions-buttons:before {
+    display: block;
+    content: "";
+    width: 0;
+    height: 0;
+    left: -10px;
+    top: 10px;
+    border: 5px solid transparent;
+    border-right: 10px solid #666;
+    position: absolute;
+}
+
+#search-table .bulk-actions-buttons.shown {
+    margin-left: 30px;
+}
+
+#search-table .actions-col {
+      white-space: nowrap;
+      text-align: center;
+      min-width: 150px;
+  }
+
+  .btn-kill:hover,
+  .btn-kill:focus {
+      background: #d9534f;
+      color: #fff;
+      border-color: @defaultRed;
+  }
+
+  .actions-col .btn {
+      color: gray;
+      cursor: not-allowed;
+      opacity: .5;
+      font-size: 10px;
+  }
+
+  .actions-col .btn.isOn {
+      color: #000;
+      cursor: pointer;
+      opacity: 1;
+  }
+  .pages .btn {
+      /*color: @bgGreenActive;*/
+  }
+
+  .pages .btn.disabled {
+      color: gray;
+  }
+
+  .pages .btn-primary {
+      color: #fff;
+  }
+  .cbox {
+      width: 20px;
+  }
+
+  .main-panel {
+      padding: 0px;
+  }
+
+  #dashboard .main-panel {
+    padding: 5px;
+  }
+
+  .first-col {
+      text-align: center;
+  }
+
+
+
+.DONEWITHERROR,
+.FAILED,
+.KILLED {
+    color: #d9534f;
+}
+
+.RUNNING {
+    color: green;
+}
+
+.PAUSED,
+.PAUSEDWITHERROR,
+.PREPPAUSED,
+.RUNNINGWITHERROR,
+.SUSPENDED,
+.SUSPENDEDWITHERROR {
+    color: #f0ad4e;
+}
+
+.SUCCEEDED {
+    color: #5cb85c;
+}
+
+.mb0 {
+  margin-bottom: 0;
+}
+
+.pb5 {
+    padding-bottom: 5px;
+}
+
+.navbar-header {
+  width: 100%;
+}
+
+#create-new-button {
+  float: right;
+  padding-top: 8px;
+}
+
+.width100Per{
+  width: 100%;
+}
+.hdfs-browse{
+  max-height: 500px;
+  overflow: scroll;
+}
+#wf_title{
+    margin-left: 2px;
+    width: 150px;
+    font-size: 12px;
+}
+.backto-dashboard{
+  text-decoration: blink !important;
+}
+.file-upload-control input[type="file"]{
+  width: 200px;
+  display: inline;
+  border: 1px solid #ccc;
+}
+.file-upload-control  input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
+    padding: 6px 12px;
+    border-radius: 4px;
+    background-color: #fff;
+    line-height: 1.42857143;
+    border: none;
+}
+.close-icon{
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1;
+  text-shadow: 0 1px 0 #fff;
+  color: #AFAFAF;
+  background: transparent;
+  padding: 3px;
+}
+#flow-designer{
+  position: relative;
+  top:10%;
+}
+.designer-main-panel{
+   position: relative;
+   width: 100%;
+   border: none;
+   height: 0px;
+}
+.connector_overlay_new {
+    white-space: nowrap;
+    border: 1px solid #ddd;
+    background: #E5E5E5;
+    border-radius: 30px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    cursor: pointer;
+    transform: scale(0.8);
+    font-size: 12px;
+}
+.connector_overlay_new:hover .node_actions{
+    opacity: 1;
+}
+.placeholder-node{
+  width:1px;
+  height: 1px;
+  background: transparent;
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-left: 4px;
+  /*  transform: translate(0%, -6%);*/
+}
+.decision_end{
+  width: 10px;
+  height: 10px;
+  border-radius: 16px;
+}
+#decision-properties-table {
+  width: 70%;
+  margin-left: 50px;
+}
+.preview-xml{
+  border: none;
+  padding: 8px;
+}
+.workflow-actions-pop{
+  width: 250px;
+}
+#killnodes-container{
+  width: 300px;
+  height: 100px;
+  padding: 5px;
+  border-radius: 3px;
+}
+.decision-add-branch-popover{
+  position: absolute;
+  left: 44px;
+  top: -7px;
+  z-index: 5;
+}
+
+.jsplumb-connector { z-index:1; }
+.jsplumb-endpoint { z-index:2; }
+.jsplumb-overlay { z-index:3; }
+#selector-content .panel-body{
+    width:400px;
+}
+
+.decisionSplit {
+    border-radius: 24px;
+    width: 24px;
+    height: 24px;
+    left: 70% !important;
+    top: 67% !important;
+    transform:rotate(315deg) !important;
+}
+
+.forkSplit {
+    border-radius: 24px;
+    width: 24px;
+    height: 18px;
+    left: 50% !important;
+    top: 75% !important;
+}
+
+.control_flow_node {
+    cursor: not-allowed;
+}
+.join {
+  background: #fff;
+}
+.default-condition{
+  background-color: blue;
+}
+.query-text-area {
+  width: 540px;
+}
+.decisionText{
+    position: absolute;
+    transform: rotate(315deg);
+    top: 30%;
+    left: 0px;
+    right: 0px;
+}
+.decisionIcon{
+    position: relative;
+    right: 5px;
+}
+.actionNodes li{
+    padding: 10px 0px !important;
+    height: auto;
+}
+.dr_action_fork{
+    width: 45px !important;
+    height: auto !important;
+    padding: 10px 0px !important;
+    border-radius: 0px !important;
+}
+.dr_action_switch{
+    width: 45px !important;
+    height: 45px !important;
+    padding: 10px 0px !important;
+}
+.paddingClass{
+    padding-top: 0.5%;
+}
+.margin0{
+    margin-bottom: 0px;
+}
+.editor-icon-title span{
+  padding-left: 5px;
+}
+.icon_map_red{
+  background: url(data:image/png;base64,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)
+}
+.node_actions i{
+  border-right: 1px solid #ababab;
+  border-radius: 0px;
+  min-width: 26px;
+}
+.node_actions i:last-child {
+  border-right:none;
+}
+.wf-path {
+    font-size: 12px;
+    float: left;
+    color: gray;
+    margin-top: 17px;
+    max-width: 150px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.cred-type{
+  font-size: 12px;
+  color: gray;
+  margin-left: 5px;
+}
+.labelCheckbox{
+    padding-left:35px !important;
+}
+.file-op-setting{
+   padding-left: 105px;
+}
+.rightAlign{
+    text-align: left !important;
+}
+.bottom-margin-zero{
+    margin-bottom: 5px !important;
+}
+#credentials_config .fa-trash-o{
+    color: @defaultRed;
+    cursor: pointer;
+}
+.credential-list {
+  margin-top: 37px;
+}
+.credential-list .fa-trash-o{
+  color: @defaultRed;
+  cursor: pointer;
+}
+.credential-list .fa-pencil{
+  color : @bgGreenActive;
+  cursor: pointer;
+}
+.check-class{
+    padding-left: 3%;
+}
+.popover-title{
+  background-color:#fff
+}
+.centralize-panel{
+  margin-left: 17%;
+}
+.dataset-list {
+  margin-top: 37px;
+}
+
+.dataset-list .fa-trash-o{
+  color: @defaultRed;
+  cursor: pointer;
+}
+
+.dataset-list .fa-pencil{
+  color : @bgGreenActive;
+  cursor: pointer;
+}
+
+.node {
+  stroke: #fff;
+  stroke-width: 2px;
+}
+
+.link {
+  fill: none;
+  stroke: #000;
+}
+
+.cy-panel {
+  height: 500px;
+  position: relative;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+}
+
+.cy-panzoom {
+  left: 90%;
+  z-index: 999;
+}
+
+.overlay_node_editor {
+  position: absolute;
+  z-index: 100;
+  overflow: hidden;
+  margin-top: 3px;
+  margin-left: 5px;
+  display: none;
+}
+
+.overlay-node-label {
+  position: absolute;
+  z-index: 100;
+  display: none;
+  background-color: #fbfbfb;
+  min-width: 110px;
+  border: 1px solid #999;
+  padding: 0 5px;
+  height: 18px;
+  font-size: 12px;
+}
+
+#cyRenderer .editable {
+  padding: 7px 10px;
+  border: 1px solid #999;
+  background: #fff;
+  cursor: text;
+  white-space: nowrap;
+  text-align: left;
+  width: 140px;
+}
+
+#cyRenderer .error {
+  padding: 5px 10px;
+  border: 1px solid @defaultRed;
+  background: #fff;
+  cursor: text;
+  white-space: nowrap;
+  text-align: left;
+  width: 140px;
+}
+
+#cyRenderer input:invalid {
+  border: 1px solid @defaultRed;
+}
+
+.decision-condition-label {
+  border-bottom: 1px solid #D0D0D0;
+  padding: 3px;
+  min-width: 120px;
+}
+
+.decision-condition-header {
+  font-weight: bold;
+}
+
+.overlay-transition-content,
+.overlay-node-actions {
+  position: absolute;
+  z-index: 100;
+  overflow: hidden;
+  display: none;
+  border: 1px solid #999;
+  background: #fff;
+  border-radius: 3px;
+  min-width: 25px;
+}
+
+.overlay-node-actions {
+  height: 32px;
+  cursor: pointer;
+  padding: 2px;
+}
+
+.overlay-transition-actions {
+  float: right;
+  height: 30px;
+  cursor: pointer;
+  padding: 2px;
+}
+
+.overlay-node-actions span {
+  display: none;
+}
+
+.overlay-transition-actions span i,
+.overlay-node-actions span i {
+  min-width: 20px;
+  padding: 5px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+
+.overlay-transition-actions span i:hover,
+.overlay-node-actions span i:hover{
+  border: 1px solid #ababab;
+}
+
+.overlay-trash-transition-icon .fa-trash-o,
+.overlay-trash-icon .fa-trash-o {
+    color: @defaultRed;
+}
+
+.overlay-plus-icon .fa-plus-square {
+  color: @bgGreenActive;
+}
+.cyScrollMsg {
+  text-align: center;
+}
+
+.cyScrollMsgContent {
+  width: 30px;
+  background-color: #ccc;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.green-border {
+  border-color: green;
+}
+
+.configuration-property-table .propertyName {
+  word-break: break-all;
+  width: 20%;
+}
+
+.configuration-property-table .propertyValue {
+  width: 80%;
+  word-break: break-all;
+}
+
+.undo {
+  cursor: pointer;
+}
+
+.paste-action {
+  font-size: 10px;
+}
+
+.paste-action-btn {
+  border: 1px solid silver;
+  border-radius: 6px;
+  margin-left: 5px;
+  margin-bottom: 4px
+}
+#notificationWidget{
+  width: 20%;
+  float: left;
+  position: fixed;
+  top: 15%;
+  left: 66%;
+  word-break: break-all;
+  height: 50%;
+  max-height: 600px;
+  overflow-y: scroll;
+  z-index: 1040;
+}
+
+.closeTab {
+  margin-left: 10px;
+  cursor: pointer;
+  color: @defaultRed;
+}
+
+.tab-panel-heading {
+  margin-top: 2px;
+}
+
+.borderTopNone {
+  border-top: none;
+}
+
+.borderRadiusNone {
+  border-radius: 0px;
+}
+
+.borderRightRadiusNone {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.kill-message {
+  font-style: italic;
+  color: gray;
+}
+
+.ok-to-warning {
+  font-style: italic;
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+}
+
+.kill-nodes-list {
+  height: 200px;
+  overflow-y: auto;
+}
+
+.kill-nodes-list .fa-trash-o{
+  color: @defaultRed;
+  cursor: pointer;
+}
+
+.kill-nodes-list .fa-pencil{
+  color : @bgGreenActive;
+  cursor: pointer;
+}
+
+#killnode-manager-dialog .panel-footer {
+  background-color: #fff;
+}
+
+.plr0px {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+#stackTrace{
+  white-space: pre-wrap;
+  max-width: 100%;
+  max-height: 400px;
+  overflow: scroll;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/.gitkeep
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/.gitkeep b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/.gitkeep
new file mode 100644
index 0000000..e69de29

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-config.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-config.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-config.hbs
new file mode 100644
index 0000000..27168a4
--- /dev/null
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-config.hbs
@@ -0,0 +1,129 @@
+{{!
+* 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="main">
+  <nav class="navbar navbar-default mb0 borderTopNone">
+    <div class="container-fluid container-custom">
+      <div class="navbar-header">
+        <div class="form-inline col-xs-6 paddingtop8">
+          <div class="form-group {{if (v-get this 'bundle.name' 'isInvalid') 'has-error'}}" >
+            <label for="wf_title">Name<span class="requiredField">&nbsp;*</span></label>
+            {{input class="form-control" type="text" name="bundle_title" value=bundle.name title="Bundle Name" placeholder="Bundle Name"}}
+            {{#if (v-get this 'bundle.name' 'isInvalid')}}
+              <span class="text-danger" title="Name is required"><i class="fa fa-close"></i>Name is required</span>
+            {{/if}}
+          </div>
+        </div>
+        <div class="navbar-brand pull-right paddingtop8 col-xs-18">
+          <div class="btn-group" role="group" aria-label="...">
+            <button type="button" class="btn btn-default"  data-toggle="modal" data-target="#ConfirmDialog" title="New Workflow" {{action "confirmReset"}}>
+              <i class="fa fa-refresh"> Reset</i>
+            </button>
+            <button  type="button" class="btn btn-default" title="Import workflow" {{action "openFileBrowser" "bundleFilePath"}}>
+              <i class="fa fa-download"> Import</i>
+            </button>
+            <button  id="import-bundle-test" type="button" class="btn btn-default hide" title="Import Bundle Test" {{action "importBundleTest"}}>
+              <i class="fa fa-download"></i>
+            </button>
+            <div class="btn-group">
+              <div class="dropdown">
+                <button class="btn btn-default dropdown-toggle borderRadiusNone" type="button" data-toggle="dropdown"><i class="marginright5"></i>More
+                <span class="caret"></span></button>
+                <ul class="dropdown-menu">
+                  <li>
+                    <a href="javascript:void(0)" data-toggle="modal" data-target="#previewModal"  title="Preview Xml" {{action "preview"}}>
+                      <i class="fa fa-eye marginright5"></i>Preview xml
+                    </a>
+                  </li>
+                  <!-- <li>
+                    <a href="javascript:void(0)" data-toggle="modal" title="Download workflow" {{action "downloadWorkflowXml"}}>
+                      <i class="fa fa-download marginright5"></i>Download xml
+                    </a>
+                  </li> -->
+                </ul>
+              </div>
+            </div>
+            <button type="button" class="btn btn-primary" title="Submit Bundle" {{action "submitBundle"}}>
+              <i class="fa fa-upload"> Submit</i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <div class="container-fluid">
+    <form class="form-horizontal">
+      <div class="col-sm-12 paddingtop10">
+        <div class="col-sm-8 centralize-panel">
+
+          <div class="panel panel-default">
+            <div class="panel-heading clearfix">
+              <h4 class="panel-title pull-left paddingtop7">Coordinators</h4>
+              <button id="coordinator-create-btn" {{action 'createCoordinator'}} type="button" class="btn btn-default pull-right">
+                      <i class="fa fa-plus-circle"></i> Add Coordinator
+              </button>
+            </div>
+            <div class="panel-body">
+                <ul class="list-group">
+                  {{#each bundle.coordinators as |coordinator index|}}
+                  <li class="list-group-item">
+                    {{coordinator.name}}
+                    <span class="pull-right">
+                      <i class="fa fa-trash-o" title="Delete" {{action "deleteCoordinator" index bubbles=false}}></i>
+                    </span>
+                    <span class="pull-right paddingright10">
+                      <i class="fa fa-pencil" title="Edit" {{action "editCoordinator" index bubbles=false}}></i>
+                    </span>
+                  </li>
+                  {{else}}
+                  <li class="list-group-item">No Coordinators Configured.</li>
+                  {{/each}}
+                </ul>
+                {{#field-error model=this field='bundle.coordinators' showErrorMessage=true}}{{/field-error}}
+
+              {{#if coordinatorCreateMode}}
+              {{#bundle-coord-config coordinator=currentCoordinator openTab="openTab" openFileBrowser="openFileBrowser" add="addCoordinator" cancel="cancelCoordinatorOperation" createMode=coordinatorCreateMode}}{{/bundle-coord-config}}
+              {{/if}}
+              {{#if coordinatorEditMode}}
+              {{#bundle-coord-config coordinator=currentCoordinator openTab="openTab" openFileBrowser="openFileBrowser" update="updateCoordinator" cancel="cancelCoordinatorOperation" editMode=coordinatorEditMode}}{{/bundle-coord-config}}
+              {{/if}}
+            </div>
+          </div>
+          <div class="panel panel-default">
+            <div class="panel-body">
+              {{#date-with-expr inputName="kickOffTime" label="Kick off Time" inputPlaceholder="Kick Off Time" dateField=bundle.kickOffTime}}{{/date-with-expr}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+{{#if showingFileBrowser}}
+  {{hdfs-browser closeFileBrowser="closeFileBrowser" selectFileCallback=selectFileCallback filePath=filePath}}
+{{/if}}
+{{#if showingJobConfig}}
+  {{job-config type='bundle' closeJobConfigs="closeBundleSubmitConfig" jobFilePath=bundleFilePath openFileBrowser="openFileBrowser" closeFileBrowser="closeFileBrowser" jobConfigs=bundleConfigs}}
+{{/if}}
+{{#if showingResetConfirmation}}
+  {{#confirmation-dialog title="Confirm Bundle Reset"
+  confirmationMessage="Any unsaved changes may be lost. Do you want to proceed resetting the bundle ?"
+  okBtnText="Continue" cancelBtnText="Cancel" onOk="resetBundle"}}{{/confirmation-dialog}}
+{{/if}}
+{{#if showingPreview}}
+  {{#preview-dialog title="Bundle XML Preview" previewXml=previewXml}}{{/preview-dialog}}
+{{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-coord-config.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-coord-config.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-coord-config.hbs
new file mode 100644
index 0000000..86a49b9
--- /dev/null
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-coord-config.hbs
@@ -0,0 +1,58 @@
+{{!
+* 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="well">
+  <div class="form-group">
+    <label class="control-label col-xs-2">Coordinator Name<span class="requiredField">&nbsp;*</span></label>
+    <div class="col-xs-7">
+      {{input type="text" class="form-control" name="name" value=coordinator.name placeholder="Coordinator Name"}}
+      {{#field-error model=this field='coordinator.name' showErrorMessage=showErrorMessage}}{{/field-error}}
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="control-label col-xs-2">Coordinator Path<span class="requiredField">&nbsp;*</span></label>
+    <div class="col-xs-7">
+      <div class="input-group">
+        {{input type="text" class="form-control" name="appPath" focus-out="showCoordinatorName" value=coordinator.appPath placeholder="Path of the coordinator file"}}
+        <span class="input-group-btn">
+          <button class="btn btn-primary" type="button" {{action "openFileBrowser" "coordinator.appPath"}}>Browse</button>
+          <button class="btn btn-default" type="button" {{action "openTab" 'coord' coordinator.appPath}} name="button"><i class="fa fa-external-link"></i></button>
+        </span>
+      </div>
+      {{#if coordinatorName}}
+        <span title="Name of the coordinator">({{coordinatorName}})</span>
+      {{/if}}
+      {{#field-error model=this field='coordinator.appPath' showErrorMessage=showErrorMessage}}{{/field-error}}
+    </div>
+  </div>
+  <div class="panel panel-default">
+    <div class="panel-heading">Configuration</div>
+    <div class="panel-body handlerPanel">
+      {{#name-value-config configuration=coordinator.configuration}}{{/name-value-config}}
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-xs-7 pull-right">
+      <button id="coordinator-cancel-btn" {{action 'cancelCoordinatorOperation'}} type="button" class="btn btn-default">Cancel</button>
+      {{#if createMode}}
+      <button id="coordinator-add-btn" {{action 'addCoordinator'}} type="button" class="btn btn-primary">Add</button>
+      {{else}}
+      <button id="coordinator-update-btn" {{action 'updateCoordinator'}} type="button" class="btn btn-primary"> Update </button>
+      {{/if}}
+    </div>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-job-details.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-job-details.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-job-details.hbs
index b1f1d7e..f6b491b 100644
--- a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-job-details.hbs
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/bundle-job-details.hbs
@@ -95,7 +95,22 @@
   <div role="tabpanel" class="tab-pane" id="jobConfig">
     <div class="panel panel-default">
       <div class="panel-body preview">
-        <pre class="prettyprint">{{model.conf}}</pre>
+        <table class="table table-striped configuration-property-table">
+          <thead>
+            <tr>
+              <th class="propertyName">Name</th>
+              <th class="propertyValue">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each model.configurationProperties as |configurationProperty|}}
+              <tr>
+                <td class="propertyName">{{configurationProperty.name}}</td>
+                <td class="propertyValue">{{configurationProperty.value}}</td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
       </div>
     </div>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/conditional-data-input.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/conditional-data-input.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/conditional-data-input.hbs
new file mode 100644
index 0000000..03eb0d8
--- /dev/null
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/conditional-data-input.hbs
@@ -0,0 +1,64 @@
+{{!
+* 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="form-inline">
+  <select onchange={{action (mut condition.operator) value="target.value"}} name="select-input" class="form-control" data-show-icon="true">
+    {{#each conditionsList as |condition index|}}
+    <option value={{condition.value}} selected={{eq condition.operator condition.value}}>{{condition.displayName}}</option>
+    {{/each}}
+  </select>
+  {{#if (not (eq condition.operator "combine"))}}
+    <button id="data-add-btn" {{action 'addCondition'}} type="button" class="btn btn-default form-control">
+    <i class="fa fa-plus-circle"></i>&nbsp;Condition</button>
+  {{/if}}
+  <button id="data-add-btn" {{action 'addDataInput'}} type="button" class="btn btn-default form-control">
+    <i class="fa fa-plus-circle"></i>&nbsp;Data Input</button>
+  {{#if showAdvanced}}
+  {{input type="text" class="form-control" name="conditionName" title="Condition Name" value=condition.name placeholder="Condition Name"}}
+  {{input type=text class="form-control" value=condition.min placeholder="Mininum Inputs"}}
+  {{input type=text class="form-control" value=condition.wait placeholder="Wait Time"}}
+  <button id="data-add-btn" {{action 'hideAdvanced'}} type="button" title="Configure Advanced Options" class="form-control btn btn-default">
+    <i class="fa fa-chevron-left"></i>&nbsp;Advanced
+  </button>
+  {{else}}
+  <button id="data-add-btn" {{action 'showAdvanced'}} type="button" title="Configure Advanced Options" class="form-control btn btn-default">
+    <i class="fa fa-chevron-right"></i>&nbsp;Advanced
+  </button>
+  {{/if}}
+  {{yield}}
+  {{field-error model=this field='condition.operator' showErrorMessage=showErrorMessage}}
+  {{field-error model=this field='condition.operands' showErrorMessage=showErrorMessage}}
+</div>
+<ul class="list-group">
+  {{#each condition.operands as |operand index|}}
+  <li class="list-group-item">
+    {{#if (eq operand.type 'condition') }}
+    {{#conditional-data-input condition=operand datasets=datasets}}
+    <span class="pull-right">
+      <i class="fa fa-trash-o" title="Delete" {{action "deleteOperand" index bubbles=false}}></i>
+    </span>
+    {{/conditional-data-input}}
+    {{else}}
+      {{#data-input datasets=datasets dataInput=operand register="registerChild" deregister="deregisterChild"}}
+      <span class="pull-right">
+        <i class="fa fa-trash-o" title="Delete" {{action "deleteOperand" index bubbles=false}}></i>
+      </span>
+      {{/data-input}}
+    {{/if}}
+  </li>
+  {{/each}}
+</ul>

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/confirmation-dialog.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/confirmation-dialog.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/confirmation-dialog.hbs
new file mode 100644
index 0000000..fc86286
--- /dev/null
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/confirmation-dialog.hbs
@@ -0,0 +1,34 @@
+{{!
+* 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 id="ConfirmDialog" class="modal fade" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+        <h4 class="modal-title">{{title}}</h4>
+      </div>
+      <div class="modal-body">
+      {{confirmationMessage}}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{cancelBtnText}}</button>
+        <button type="button" class="btn btn-primary" {{action "onOk"}} data-dismiss="modal">{{okBtnText}}</button>
+      </div>
+    </div>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-config.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-config.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-config.hbs
new file mode 100644
index 0000000..a6edcec
--- /dev/null
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-config.hbs
@@ -0,0 +1,352 @@
+{{!
+* 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="main">
+  <nav class="navbar navbar-default mb0 borderTopNone">
+    <div class="container-fluid container-custom">
+      <div class="navbar-header">
+        <div class="form-inline col-xs-6 paddingtop8">
+          <div class="form-group {{if (v-get this 'coordinator.name' 'isInvalid') 'has-error'}}">
+            <label for="wf_title">Name </label>
+            {{input class="form-control" type="text" name="coord_title" value=coordinator.name title="Coordinator Name" placeholder="Coordinator Name"}}
+            {{#if (v-get this 'coordinator.name' 'isInvalid')}}
+              <span class="text-danger" title="Name is required"><i class="fa fa-close"></i>Name is required</span>
+            {{/if}}
+          </div>
+        </div>
+        <div class="navbar-brand pull-right paddingtop8 col-xs-18">
+          <div class="btn-group" role="group" aria-label="...">
+            <button type="button" class="btn btn-default"  data-toggle="modal" data-target="#ConfirmDialog" title="New Workflow" {{action "confirmReset"}}>
+              <i class="fa fa-refresh"> Reset</i>
+            </button>
+            <button  type="button" class="btn btn-default" title="Import workflow" {{action "openFileBrowser" "coordinatorFilePath"}}>
+              <i class="fa fa-download"> Import</i>
+            </button>
+
+            <button  id="import-test" type="button" class="btn btn-default hide" title="Import coordinator Test" {{action "importCoordinatorTest"}}>
+              <i class="fa fa-download"></i>
+            </button>
+            <button type="button" class="btn btn-default" title="Parameters Configuration" {{action "showParameterSettings" true}}>
+              <i class="fa fa-cog marginright5"></i>Parameters
+            </button>
+            <button type="button" class="btn btn-default"  data-toggle="modal" data-target="#control-dialog" title="Coordinator Controls" {{action "showControlConfig"}}>
+                 <i class="fa fa-wrench marginright5"></i>Controls
+            </button>
+            <div class="btn-group">
+              <div class="dropdown">
+                <button class="btn btn-default dropdown-toggle borderRadiusNone" type="button" data-toggle="dropdown"><i class="marginright5"></i>More
+                <span class="caret"></span></button>
+                <ul class="dropdown-menu">
+                  <li>
+                    <a href="javascript:void(0)" data-toggle="modal" data-target="#previewModal"  title="Preview Xml" {{action "preview"}}>
+                      <i class="fa fa-eye marginright5"></i>Preview xml
+                    </a>
+                  </li>
+                  <!-- <li>
+                    <a href="javascript:void(0)" data-toggle="modal" title="Download workflow" {{action "downloadWorkflowXml"}}>
+                      <i class="fa fa-download marginright5"></i>Download xml
+                    </a>
+                  </li> -->
+                </ul>
+              </div>
+            </div>
+            <button type="button" class="btn btn-primary" title="Submit Coordinator" {{action "submitCoordinator"}}>
+              <i class="fa fa-upload marginright5"></i>Submit
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <div class="container-fluid">
+    <form class="form-horizontal">
+      <div class="col-sm-12 paddingtop10">
+        <div class="col-sm-8 centralize-panel">
+          <div class="panel panel-default">
+            <div class="panel-body">
+              <div class="form-group">
+                <label class="control-label col-xs-2">Workflow Path<span class="requiredField">&nbsp;*</span></label>
+                <div class="col-xs-7">
+                  <div class="input-group">
+                    {{input type="text" class="form-control" name="appPath" focus-out="showWorkflowName" value=coordinator.workflow.appPath placeholder="Path of the workflow file"}}
+                    <span class="input-group-btn">
+                      <button class="btn btn-primary" type="button" {{action "openFileBrowser" "coordinator.workflow.appPath"}}>Browse</button>
+                      <button class="btn btn-default" type="button" {{action "openTab" 'wf' coordinator.workflow.appPath}} name="button"><i class="fa fa-external-link"></i></button>
+                    </span>
+                  </div>
+                  {{#if workflowName}}
+                    <span title="Name of the workflow">({{workflowName}})</span>
+                  {{/if}}
+                  {{#field-error model=this field='coordinator.workflow.appPath' showErrorMessage=showErrorMessage}}{{/field-error}}
+                </div>
+              </div>
+              <div class="form-group">
+                <label class="control-label col-xs-2">Frequency<span class="requiredField">&nbsp;*</span></label>
+                <div class="col-xs-2">
+                  <select class="form-control" name="frequency-type" title="Frequency type" onchange={{action (mut coordinator.frequency.type) value="target.value"}}>
+                    {{#each timeUnitOptions as |timeUnit|}}
+                    <option value={{timeUnit.value}} selected={{eq timeUnit.value coordinator.frequency.type}}>{{timeUnit.displayName}}</option>
+                    {{/each}}
+                  </select>
+                  {{#field-error model=this field='coordinator.frequency.type' showErrorMessage=showErrorMessage}}{{/field-error}}
+                </div>
+                <div class="col-xs-3">
+                  {{input class="form-control" type="text" value=coordinator.frequency.value placeholder="frequency" title="Periodic intervals at which datasets that are produced, and coordinator applications are scheduled to run"}}
+                  {{field-error model=this field='coordinator.frequency.value' showErrorMessage=showErrorMessage}}
+                </div>
+              </div>
+              {{#date-with-expr required=true inputName="start" label="Start" inputPlaceholder="Start Time" dateField=coordinator.start timezone=coordinator.timezone register="registerChild" deregister="deregisterChild"}}{{/date-with-expr}}
+              {{#date-with-expr required=true inputName="end" label="End" inputPlaceholder="End Time" dateField=coordinator.end timezone=coordinator.timezone register="registerChild" deregister="deregisterChild"}}{{/date-with-expr}}
+              <div class="form-group">
+                <label for="" class="control-label col-xs-2">Time Zone<span class="requiredField">&nbsp;*</span></label>
+                <div class="col-xs-7">
+                  <select onchange={{action (mut coordinator.timezone) value="target.value"}} name="select-input" class="form-control" data-show-icon="true">
+                    {{#each timezoneList as |timezone index|}}
+                    <option value={{timezone.value}} selected={{eq timezone.value coordinator.timezone}}>{{timezone.displayName}}</option>
+                    {{/each}}
+                  </select>
+                  {{field-error  model=this field='coordinator.timezone' showErrorMessage=showErrorMessage}}
+                </div>
+              </div>
+              <div class="panel panel-default">
+                <div class="panel-heading clearfix">
+                  <h4 class="panel-title pull-left paddingtop7">Configuration</h4>
+                </div>
+                <div class="panel-body handlerPanel">
+                  {{#name-value-config configuration=coordinator.workflow.configuration}}{{/name-value-config}}
+                </div>
+              </div>
+              {{#sla-info slaInfo=coordinator.slaInfo register="registerChild" slaEnabled=coordinator.slaEnabled}}{{/sla-info}}
+            </div>
+          </div>
+          <div class="panel panel-default">
+            <div class="panel-heading clearfix">
+              <h4 class="panel-title pull-left paddingtop7">Data</h4>
+            </div>
+            <div class="panel-body handlerPanel">
+              <div class="panel panel-default">
+                <div class="panel-heading clearfix">
+                  <h4 class="panel-title pull-left paddingtop7">Datasets</h4>
+                  <button id="dataset-create-btn" {{action 'createDataset'}} type="button" class="btn btn-default pull-right">
+                    <i class="fa fa-plus-circle"></i> Add Dataset
+                  </button>
+                </div>
+                <div class="panel-body">
+                  <ul class="list-group">
+                    {{#each coordinator.datasets as |dataset index|}}
+                    <li class="list-group-item">
+                      {{dataset.name}}
+                      <span class="pull-right">
+                        <i class="fa fa-trash-o" title="Delete" {{action "deleteDataset" index bubbles=false}}></i>
+                      </span>
+                      <span class="pull-right paddingright10">
+                        <i class="fa fa-pencil" title="Edit" {{action "editDataset" index bubbles=false}}></i>
+                      </span>
+                    </li>
+                    {{else}}
+                    <li class="list-group-item">No Datasets Configured.</li>
+                    {{/each}}
+                  </ul>
+                  {{#if datasetCreateMode}}
+                    {{#dataset-config dataset=currentDataset add="addDataset" cancel="cancelDatasetOperation" createMode=datasetCreateMode}}{{/dataset-config}}
+                  {{/if}}
+                  {{#if datasetEditMode}}
+                    {{#dataset-config dataset=currentDataset update="updateDataset" cancel="cancelDatasetOperation" editMode=datasetEditMode}}{{/dataset-config}}
+                  {{/if}}
+                </div>
+              </div>
+              <div class="panel panel-default">
+                <div class="panel-heading clearfix">
+                  <h4 class="panel-title pull-left paddingtop7">Inputs</h4>
+                </div>
+                <div class="panel-body handlerPanel">
+                  {{#if coordinator.supportsConditionalDataInput}}
+                  <div class="">
+                    <label for="" class="control-label col-xs-2">Data Input Type</label>
+                    <div class="btn-group">
+                      <button {{action 'toggleDataTnput' 'simple'}} type="button" class="btn btn-default {{if (eq coordinator.dataInputType 'simple') 'btn-primary' ''}} scope-btn">
+                        Simple
+                      </button>
+                      <button {{action 'toggleDataTnput' 'logical'}} type="button" class="btn btn-default {{if (eq coordinator.dataInputType 'logical') 'btn-primary' ''}} scope-btn">
+                        Conditional
+                      </button>
+                    </div>
+                  </div>
+                  {{/if}}
+                  <div class="panel panel-default">
+                    <div class="panel-heading clearfix">
+                      <h4 class="panel-title pull-left paddingtop7">Datasets</h4>
+                      {{#if (eq coordinator.dataInputType 'simple')}}
+                        <button id="dataset-create-btn" {{action 'createDataInput'}} type="button" class="btn btn-default pull-right">
+                          <i class="fa fa-plus-circle"></i> Add Data Input
+                        </button>
+                      {{else}}
+                        {{#if (not conditionalDataInExists)}}
+                        <button id="condition-create-btn" {{action 'createCondition'}} type="button" class="btn btn-default pull-right">
+                          <i class="fa fa-plus-circle"></i> Add Condition
+                        </button>
+                        {{/if}}
+                      {{/if}}
+                    </div>
+                    <div class="panel-body">
+                      {{#if (eq coordinator.dataInputType 'simple')}}
+                        <ul class="list-group">
+                          {{#each coordinator.dataInputs as |data index|}}
+                          <li class="list-group-item">
+                            {{data.name}}
+                            <span class="pull-right">
+                              <i class="fa fa-trash-o" title="Delete" {{action "deleteDataInput" index bubbles=false}}></i>
+                            </span>
+                            <span class="pull-right paddingright10">
+                              <i class="fa fa-pencil" title="Edit" {{action "editDataInput" index bubbles=false}}></i>
+                            </span>
+                          </li>
+                          {{else}}
+                          <li class="list-group-item">No Data inputs Configured</li>
+                          {{/each}}
+                        </ul>
+                        {{#if dataInputCreateMode}}
+                          {{#data-input-output-config datasets=datasetsForInputs data=currentDataInput type="input" add="addDataInput" cancel="cancelDataInputOperation" createMode=dataInputCreateMode}}{{/data-input-output-config}}
+                        {{/if}}
+                        {{#if dataInputEditMode}}
+                          {{#data-input-output-config datasets=datasetsForInputs data=currentDataInput type="input" update="updateDataInput" cancel="cancelDataInputOperation" editMode=dataInputEditMode}}{{/data-input-output-config}}
+                        {{/if}}
+                      {{/if}}
+                      {{#if (eq coordinator.dataInputType 'logical')}}
+                      <ul class="list-groups">
+                        {{#if conditionalDataInExists}}
+                        <li class="list-group-item">
+                          {{#conditional-data-input condition=coordinator.conditionalDataInput datasets=datasetsForInputs isToplevel=true register="registerChild" deregister="deregisterChild"}}
+                          <span class="pull-right">
+                            <i class="fa fa-trash-o" title="Delete" {{action "deleteCondition" index bubbles=false}}></i>
+                          </span>
+                          {{/conditional-data-input}}
+                        </li>
+                        {{else}}
+                        <li class="list-group-item">No Conditional Data Inputs Configured</li>
+                        {{/if}}
+                      </ul>
+                      {{/if}}
+                    </div>
+                  </div>
+                  <div class="panel panel-default">
+                    <div class="panel-heading clearfix">
+                      <h4 class="panel-title pull-left paddingtop7">Conditional Inputs</h4>
+                      {{#if (not inputLogicExists)}}
+                      <button id="condition-create-btn" {{action 'createInputLogic'}} type="button" class="btn btn-default pull-right">
+                        <i class="fa fa-plus-circle"></i> Add Condition
+                      </button>
+                      {{/if}}
+                    </div>
+                    <div class="panel-body handlerPanel">
+                      <ul class="list-group">
+                        {{#if inputLogicExists}}
+                        <li class="list-group-item">
+                          {{#conditional-data-input condition=coordinator.inputLogic datasets=datasetsForInputs isToplevel=true register="registerChild" deregister="deregisterChild"}}
+                          <span class="pull-right">
+                            <i class="fa fa-trash-o" title="Delete" {{action "deleteInputLogic" index bubbles=false}}></i>
+                          </span>
+                          {{/conditional-data-input}}
+                        </li>
+                        {{else}}
+                        <li class="list-group-item">No Conditional Data Inputs Configured</li>
+                        {{/if}}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="panel panel-default">
+                <div class="panel-heading clearfix">
+                  <h4 class="panel-title pull-left paddingtop7">Outputs</h4>
+                  <button id="dataset-create-btn" {{action 'createDataOutput'}} type="button" class="btn btn-default pull-right">
+                    <i class="fa fa-plus-circle"></i> Add Data Output
+                  </button>
+                </div>
+                <div class="panel-body">
+                  <ul class="list-group">
+                    {{#each coordinator.dataOutputs as |data index|}}
+                    <li class="list-group-item">
+                      {{data.name}}
+                      <span class="pull-right">
+                        <i class="fa fa-trash-o" title="Delete" {{action "deleteDataOutput" index bubbles=false}}></i>
+                      </span>
+                      <span class="pull-right paddingright10">
+                        <i class="fa fa-pencil" title="Edit" {{action "editDataOutput" index bubbles=false}}></i>
+                      </span>
+                    </li>
+                    {{else}}
+                    <li class="list-group-item">No Data Ouputs Configured</li>
+                    {{/each}}
+                  </ul>
+                  {{#if dataOutputCreateMode}}
+                    {{#data-input-output-config datasets=datasetsForOutputs data=currentDataOutput type="output" add="addDataOutput" cancel="cancelDataOutputOperation" createMode=dataOutputCreateMode}}{{/data-input-output-config}}
+                  {{/if}}
+                  {{#if dataOutputEditMode}}
+                    {{#data-input-output-config datasets=datasetsForOutputs data=currentDataOutput type="output" update="updateDataOutput" cancel="cancelDataOutputOperation" editMode=dataOutputEditMode}}{{/data-input-output-config}}
+                  {{/if}}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+{{#if showingFileBrowser}}
+  {{hdfs-browser closeFileBrowser="closeFileBrowser" selectFileCallback=selectFileCallback filePath=filePath}}
+{{/if}}
+{{#if showingJobConfig}}
+  {{job-config type='coord' closeJobConfigs="closeCoordSubmitConfig" jobFilePath=coordinatorFilePath openFileBrowser="openFileBrowser" closeFileBrowser="closeFileBrowser" jobConfigs=coordinatorConfigs}}
+{{/if}}
+{{#if showingResetConfirmation}}
+  {{#confirmation-dialog title="Confirm Coordinator Reset"
+    confirmationMessage="Any unsaved changes may be lost. Do you want to proceed resetting the coordinator ?"
+    okBtnText="Continue" cancelBtnText="Cancel" onOk="resetCoordinator"}}{{/confirmation-dialog}}
+{{/if}}
+{{#if showingPreview}}
+  {{#preview-dialog title="Coordinator XML Preview" previewXml=previewXml}}{{/preview-dialog}}
+{{/if}}
+{{#if showParameterSettings}}
+  {{#workflow-parameters type='coord' closeWorkFlowParam="closeWorkFlowParam" saveWorkFlowParam="saveWorkFlowParam" parameters=parameters}}{{/workflow-parameters}}
+{{/if}}
+{{#if showControlConfig}}
+  <div id="control-dialog" class="modal fade" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">Controls</h4>
+        </div>
+        <div class="modal-body">
+          <div class="panel panel-default">
+            <div class="panel-body handlerPanel form-horizontal">
+              {{#each coordinatorControls as |property|}}
+                {{#named-properties property=property labelWidthClass="col-xs-4" inputWidthClass="col-xs-8"}}{{/named-properties}}
+              {{/each}}
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-dismiss="modal" {{action "saveCoordControls"}}>Save</button>
+          <button type="button" class="btn btn-default" data-dismiss="modal" onclick={{action (mut showControlConfig) false}}>Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+{{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-job-details.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-job-details.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-job-details.hbs
index 65aed2d..350f873 100644
--- a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-job-details.hbs
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/coord-job-details.hbs
@@ -119,7 +119,22 @@
   <div role="tabpanel" class="tab-pane" id="jobConfig">
     <div class="panel panel-default">
       <div class="panel-body preview">
-        <pre class="prettyprint">{{model.conf}}</pre>
+        <table class="table table-striped configuration-property-table">
+          <thead>
+            <tr>
+              <th class="propertyName">Name</th>
+              <th class="propertyValue">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each model.configurationProperties as |configurationProperty|}}
+              <tr>
+                <td class="propertyName">{{configurationProperty.name}}</td>
+                <td class="propertyValue">{{configurationProperty.value}}</td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
       </div>
     </div>
   </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/credentials-config.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/credentials-config.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/credentials-config.hbs
index 129b7df..366920d 100644
--- a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/credentials-config.hbs
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/credentials-config.hbs
@@ -18,26 +18,18 @@
 <form class="form-horizontal" id="credentials_config">
   <div class="panel panel-default">
     {{#if (eq mode 'edit')}}
-      <div class="panel-heading" id="credential-head" {{action 'togglePanel'}}>
-        <span>{{credential.name}}</span><span class="cred-type">({{credential.type}})</span>
-        {{#if isOpen}}
-          <i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
-        {{else}}
-          <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
-        {{/if}}
-        <span class="col-xs-1 pull-right">
-          <i class="fa fa-trash-o" title="Delete" {{action "delete" credential.name bubbles=false}}></i>
-        </span>
+      <div class="panel-heading" id="credential-head">
+        <span>Edit - {{credential.name}}</span><span class="cred-type">({{credential.type}})</span>
       </div>
     {{else if (eq mode 'create')}}
-      <div class="panel-heading" id="credential-head" {{action 'togglePanel'}}>Create New</div>
+      <div class="panel-heading" id="credential-head">Create New</div>
     {{/if}}
-    <div class="panel-body handlerPanel collapse panel-collapse">
+    <div class="panel-body">
       <div class="form-group">
         <label class="control-label col-xs-2">Name<span class="requiredField">&nbsp;*</span></label>
         <div class=" col-xs-4">
           {{input class="form-control" type="text" value=credential.name}}
-          {{field-error error=errors.credential.name}}
+          {{field-error model=this field='credential.name' showErrorMessage=showErrorMessage}}
         </div>
       </div>
       <div class="form-group">
@@ -48,7 +40,7 @@
               <option value={{type.value}} selected={{eq type.value credential.type}}>{{type.displayName}}</option>
             {{/each}}
           </select>
-          {{field-error error=errors.credential.type}}
+          {{field-error model=this field='credential.type' showErrorMessage=showErrorMessage}}
         </div>
       </div>
       {{#if credential.type}}
@@ -56,7 +48,7 @@
           <div class="panel-heading">Properties</div>
           <div class="panel-body handlerPanel">
             {{#each staticProps as |property|}}
-              {{#named-properties property=property required=true register="register" labelWidthClass="col-xs-4" inputWidthClass="col-xs-4"}}{{/named-properties}}
+              {{#named-properties property=property unregisterRequired=true required=true unregister="unregister" register="register" labelWidthClass="col-xs-4" inputWidthClass="col-xs-8"}}{{/named-properties}}
             {{/each}}
           </div>
         </div>
@@ -73,11 +65,14 @@
           {{#name-value-config configuration=credential register="register"}}{{/name-value-config}}
         </div>
       </div>
-      {{#if (eq mode 'create')}}
-      <div class="col-xs-2 pull-right">
-        <input class="form-control btn btn-success" type="button" {{action "add"}} value="Add">
+      <div class="col-xs-24 pull-right">
+        <input class="btn btn-default marginright5" type="button" {{action "cancel"}} value="Cancel">
+        {{#if (eq mode 'create')}}
+          <input class="btn btn-primary" type="button" {{action "add"}} value="Add">
+        {{else}}
+          <input class="btn btn-primary" type="button" {{action "add"}} value="Update">
+        {{/if}}
       </div>
-      {{/if}}
     </div>
   </div>
 </form>

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/data-input-output-config.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/data-input-output-config.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/data-input-output-config.hbs
new file mode 100644
index 0000000..2185d0d
--- /dev/null
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/data-input-output-config.hbs
@@ -0,0 +1,68 @@
+{{!
+* 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="well">
+  <div class="form-group">
+    <label for="" class="control-label col-xs-2">Name<span class="requiredField">&nbsp;*</span></label>
+    <div class="col-xs-7">
+      {{input type="text" class="form-control" name="coord-name" value=data.name placeholder="Name"}}
+      {{field-error model=this field='data.name' showErrorMessage=showErrorMessage}}
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="control-label col-xs-2">Dataset<span class="requiredField">&nbsp;*</span></label>
+    <div class="col-xs-7">
+      <select onchange={{action (mut data.dataset) value="target.value"}} name="select-input" class="form-control" data-show-icon="true">
+        <option value="">Select Dataset</option>
+        {{#each datasets as |dataset index|}}
+        <option value={{dataset.name}} selected={{eq dataset.name data.dataset}}>{{dataset.name}}</option>
+        {{/each}}
+      </select>
+      {{field-error model=this field='data.dataset' showErrorMessage=showErrorMessage}}
+    </div>
+  </div>
+  {{#if (eq type 'input')}}
+  <div class="form-group">
+    <label class="control-label col-xs-2">Instance Type<span class="requiredField">&nbsp;*</span></label>
+    <div class="col-xs-3">
+      <input type="radio" class="marginright5" name="instanceType" checked={{if (eq data.isList true) 'checked'}} onChange={{action "onInstanceTypeChange" true}}>List of Instances
+    </div>
+    <div class="col-xs-3">
+      <input type="radio" class="marginright5" name="instanceType" checked={{if (eq data.isList false) 'checked'}} onChange={{action "onInstanceTypeChange" false}}>With Start and End
+    </div>
+  </div>
+  {{#if data.isList}}
+    {{#instance-list-config instances=data.instances title="Instance"}}{{/instance-list-config}}
+  {{else}}
+    {{#date-with-expr required=true inputName="start" label="Start" inputPlaceholder="Start Time" dateField=data.start register="registerChild" deregister="deregisterChild"}}{{/date-with-expr}}
+    {{#date-with-expr required=true inputName="end" label="End" inputPlaceholder="End Time" dateField=data.end register="registerChild" deregister="deregisterChild"}}{{/date-with-expr}}
+  {{/if}}
+  {{/if}}
+  {{#if (eq type 'output')}}
+  {{#date-with-expr required=true inputName="instance" label="Instance" inputPlaceholder="Instance" dateField=data.instance register="registerChild" deregister="deregisterChild"}}{{/date-with-expr}}
+  {{/if}}
+  <div class="form-group">
+    <div class="col-xs-7 pull-right">
+      <button id="data-add-btn" {{action 'cancel'}} type="button" class="btn btn-default">Cancel</button>
+      {{#if createMode}}
+      <button id="data-add-btn" {{action 'add'}} type="button" class="btn btn-primary">Save</button>
+      {{else}}
+      <button id="data-update-btn" {{action 'update'}} type="button" class="btn btn-primary"> Update </button>
+      {{/if}}
+    </div>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/7c7412ed/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/data-input.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/data-input.hbs b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/data-input.hbs
new file mode 100644
index 0000000..b09d763
--- /dev/null
+++ b/contrib/views/wfmanager/src/main/resources/ui/app/templates/components/data-input.hbs
@@ -0,0 +1,40 @@
+{{!
+* 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="form-inline">
+  <label class="control-label">Data Input</label>
+  <select onchange={{action (mut dataInput.dataset) value="target.value"}} name="select-input" class="form-control" data-show-icon="true">
+    <option value="">Select Dataset</option>
+    {{#each datasets as |dataset index|}}
+    <option value={{dataset.name}} selected={{eq dataset.name dataInput.dataset}}>{{dataset.name}}</option>
+    {{/each}}
+  </select>
+  {{#if showAdvanced}}
+    {{input type=text class="form-control" value=dataInput.name placeholder="Data Input Name"}}
+    {{input type=text class="form-control" value=dataInput.min placeholder="Mininum Inputs"}}
+    {{input type=text class="form-control" value=dataInput.wait placeholder="Wait Time"}}
+    <button id="data-add-btn" {{action 'hideAdvanced'}} type="button" title="Configure Advanced Options" class="form-control btn btn-default">
+      <i class="fa fa-chevron-left"></i>&nbsp;Advanced
+    </button>
+  {{else}}
+    <button id="data-add-btn" {{action 'showAdvanced'}} type="button" title="Configure Advanced Options" class="form-control btn btn-default">
+      <i class="fa fa-chevron-right"></i>&nbsp;Advanced
+    </button>
+  {{/if}}
+  {{yield}}
+</div>
+{{field-error model=this field='dataInput.dataset' showErrorMessage=showErrorMessage}}