falcon-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sowmya...@apache.org
Subject [13/22] falcon git commit: FALCON-1315 Update falcon ui for HiveDR, secure clusters and bug fixes. Contributed by Armando Reyna/Venkat Ranganathan.
Date Tue, 13 Oct 2015 00:04:06 GMT
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/common.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/common.less b/falcon-ui/app/css/styles/common.less
index 92a8020..1ce62f7 100644
--- a/falcon-ui/app/css/styles/common.less
+++ b/falcon-ui/app/css/styles/common.less
@@ -22,6 +22,22 @@
 html, body { height: 100%; }
 body { background-color: rgba(246, 246, 246, 1); }
 
+.color-success{
+  color: #3c763d !important;
+}
+.color-info{
+  color: #31708f !important;
+}
+.color-warning{
+  color: #8a6d3b !important;
+}
+.color-danger{
+  color: #a94442 !important;
+}
+.error{
+  color: #ff3333 !important;
+}
+
 //--------------------VALIDATION---------------------//
 @shadow-valid: rgba(0, 255, 0, .6);
 @shadow-invalid: rgba(255, 0, 0, .6);
@@ -51,6 +67,7 @@ input {
     border-color: inherit;
   }
 }
+
 .ng-invalid.ng-dirty {
   border-color: lighten(red, 10%);
   &:focus.empty {
@@ -151,7 +168,7 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
 .mainUIView {
   //padding: 10px 0 30px 0;
   padding-top: 10px;
-  padding-bottom: 30px;  
+  padding-bottom: 30px;
 }
 //-----------------------------------------//
 //----------------FILE UPLOAD---------------------//
@@ -185,6 +202,19 @@ input[type="password"]{
   color: black;
   padding:0;
 }
+.dateInput {
+  //padding-right: 25px!important;
+}
+.dateInputIcon {
+  position: absolute;
+  background-color: white;
+  z-index: 2;
+  right: 5px;
+  bottom:5px;
+  /*top: 6px;*/
+  line-height: 15px;
+  font-size: 30px!important;
+}
 //-------------------------//
 .padding0 {
   padding: 0;
@@ -195,15 +225,7 @@ input[type="password"]{
 .buttonsWrapper {
   text-align: center;
 }
-.entitySummary {
-  text-align: center;
-  h3 { font-size:24px; }
-  h5 { font-size:12px; }
-  h3, h5 {
-    margin:0;
-  }
-}
-
+//-----------------------//
 .logoutBar {
   position: absolute;
   bottom:5px;
@@ -221,3 +243,638 @@ input[type="password"]{
 .timePicker {
   margin-top:-10px!important;
 }
+
+@summarySuccess: #009900;
+@summaryWarning: #E6DD00;
+@summaryDanger: #FF0000;
+
+.entitySummary {
+  text-align: center;
+  .whiteBox {
+    background-color: white;
+    border-radius: 3px;
+    margin: 0 7px 0 0;
+    padding: 5px 0;
+    &:first-child {
+      margin: 0 5px;
+    }
+  }
+  h3, h5 {
+    margin:0;
+  }
+  h3 { font-size:35px; }
+  h5 { font-size:9px; font-weight: bold; }
+  .notBold {
+    font-weight: normal;
+  }
+}
+
+@keyframes blink-success {
+  0% { color: @summarySuccess; }
+  100% { color: black; }
+}
+@-webkit-keyframes blink-success {
+  0% { color: @summarySuccess; }
+  100% { color: black; }
+}
+.blink-success {
+  -webkit-animation: blink-success 1s linear infinite;
+  -moz-animation: blink-success 1s linear infinite;
+  animation: blink-success 1s linear infinite;
+}
+
+@keyframes blink-warning {
+  0% { color: @summaryWarning; }
+  100% { color: black; }
+}
+@-webkit-keyframes blink-warning {
+  0% { color: @summaryWarning; }
+  100% { color: black; }
+}
+.blink-warning {
+  -webkit-animation: blink-warning 1s linear infinite;
+  -moz-animation: blink-warning 1s linear infinite;
+  animation: blink-warning 1s linear infinite;
+}
+
+@keyframes blink-danger {
+  0% { color: @summaryWarning; }
+  100% { color: black; }
+}
+@-webkit-keyframes blink-danger {
+  0% { color: @summaryWarning; }
+  100% { color: black; }
+}
+.blink-danger {
+  -webkit-animation: blink-danger 1s linear infinite;
+  -moz-animation: blink-danger 1s linear infinite;
+  animation: blink-danger 1s linear infinite;
+}
+
+@keyframes blink-notification {
+  0% { color: #ffff00; }
+  100% { color: white; }
+}
+@-webkit-keyframes blink-notification {
+  0% { color: #ffff00; }
+  100% { color: white; }
+}
+.blink-notification {
+  -webkit-animation: blink-notification 1s linear infinite;
+  -moz-animation: blink-notification 1s linear infinite;
+  animation: blink-notification 1s linear infinite;
+}
+
+.text-success {
+  color: @summarySuccess;
+}
+.text-warning {
+  color: @summaryWarning;
+}
+.text-danger {
+  color: @summaryDanger;
+}
+
+.border-left{
+  border-left: 2px solid @gray-lighter;
+}
+
+.border-right{
+  border-right: 2px solid @gray-lighter;
+}
+
+.summaryBox {
+  border-radius: 5px;
+  border: 1px solid @gray-light2;
+  margin: 5px 0;
+  padding: 15px 5px;
+  font-size: 12px;
+  background-color: #ffffff;
+  h4 {
+    font-weight: bold;
+    margin:5px 0;
+  }
+  h5 {
+    font-weight: bold;
+    margin-top:20px;
+  }
+  table {
+    width: 100%;
+    border-spacing: 5px;
+    border-collapse: separate;
+  }
+  .tableHeader {
+    width: 70px;
+    font-weight: bold;
+  }
+  textarea {
+    width: 100%;
+  }
+  &.processCluster {
+    padding: 15px 4%;
+    margin: 5px auto;
+    h5 {
+      margin-top:15px;
+      &:first-child {
+        margin-top:0;
+      }
+    }
+  }
+  .detailsBox{
+    margin-left: 10px;
+  }
+}
+
+/*************************************** SEARCH **************************************/
+.search {
+  height: 45px;
+  font-weight: 400;
+  font-size: 25px;
+  padding-left: 40px !important;
+  padding-right: 40px !important;
+}
+
+.searchBoxContainer{
+  margin: 25px 0;
+  .popover{
+    right: 5px !important;
+    width: 400px;
+  }
+  .arrow{
+    right: 35px !important;
+  }
+}
+
+.search-icon {
+  cursor: pointer;
+  position: absolute;
+  top: 13px;
+  left: 13px;
+  z-index: 2;
+  display: block;
+  line-height: 23px;
+  text-align: center;
+  font-size: 26px;
+  color: #777;
+}
+
+.search-loading-icon {
+  cursor: pointer;
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  z-index: 2;
+  display: block;
+  line-height: 23px;
+  text-align: center;
+  font-size: 26px;
+  color: #777;
+  margin-right: 40px;
+}
+
+.remove-icon {
+  cursor: pointer;
+  position: absolute;
+  top: 13px;
+  right: 14px;
+//  z-index: 2;
+  display: block;
+  line-height: 23px;
+  text-align: center;
+  font-size: 26px;
+  color: #777;
+}
+
+.question-icon {
+  cursor: pointer;
+  position: absolute;
+  top: 13px;
+  right: 40px;
+//  z-index: 2;
+  display: block;
+  line-height: 23px;
+  text-align: center;
+  font-size: 26px;
+  color: #777;
+  margin-right: 5px;
+}
+
+.searchBox {
+  display: inline-block;
+  .entityTypeButtons {
+    display: inline-block;
+    background-color: @gray-light2;
+    border-radius: 7px;
+    padding: 4px;
+
+    .btn {
+      background-color: @gray-light2;
+      border-radius: 7px;
+      border: none;
+      outline: none!important;
+      line-height: 1;
+      padding: 5px;
+      &.active {
+        background-color: @gray-light;
+        color: white;
+      }
+      &:focus {
+
+      }
+    }
+  }
+}
+
+.filtersSearchBox{
+  .padding0{
+    min-width: 115px;
+  }
+}
+
+tags-input {
+  display: block;
+  height: 40px;
+}
+tags-input *, tags-input *:before, tags-input *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+tags-input .host {
+  position: relative;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  height: 100%;
+}
+tags-input .host:active {
+  outline: none;
+}
+
+tags-input .tags {
+  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+  padding: 1px;
+  overflow: hidden;
+  word-wrap: break-word;
+  cursor: text;
+  background-color: white;
+//  border: 1px solid darkgray;
+//  box-shadow: 1px 1px 1px 0 lightgray inset;
+  height: 100%;
+  padding-left: 40px;
+}
+tags-input .tags.focused {
+  outline: none;
+  -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
+  -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
+  box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
+}
+tags-input .tags .tag-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+tags-input .tags .tag-item {
+  margin: 3px;
+  padding: 3px;
+  display: inline-block;
+  float: left;
+  font: 18px cabin, Arial, sans-serif;
+  height: 32px;
+  line-height: 25px;
+  border: 1px solid #acacac;
+  border-radius: 3px;
+  background: -webkit-linear-gradient(top, #ede4e4 0%, #d5cccc 47%, #bcb2b2 100%);
+  background: linear-gradient(to bottom, #ede4e4 0%, #d5cccc 47%, #bcb2b2 100%);
+}
+tags-input .tags .tag-item.selected {
+  background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+  background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+}
+tags-input .tags .tag-item .remove-button {
+  margin: 0 0 0 5px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  vertical-align: middle;
+  font: bold 18px cabin, Arial, sans-serif;
+  color: #585858;
+}
+tags-input .tags .tag-item .remove-button:active {
+  color: red;
+}
+tags-input .tags .input {
+  border: 0;
+  outline: none;
+  margin: 2px;
+  padding: 0;
+  padding-left: 5px;
+  float: left;
+  height: 32px;
+  font: 18px cabin, Arial, sans-serif;
+}
+tags-input .tags .input.invalid-tag {
+  color: red;
+}
+tags-input .tags .input::-ms-clear {
+  display: none;
+}
+tags-input.ng-invalid .tags {
+  -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+  -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+  box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+}
+
+tags-input .autocomplete {
+  margin-top: 5px;
+  position: absolute;
+  padding: 5px 0;
+  z-index: 999;
+  width: 100%;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+tags-input .autocomplete .suggestion-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+tags-input .autocomplete .suggestion-item {
+  padding: 5px 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: 16px cabin, Arial, sans-serif;
+  color: black;
+  background-color: white;
+}
+tags-input .autocomplete .suggestion-item.selected {
+  color: white;
+  background-color: #0097cf;
+}
+tags-input .autocomplete .suggestion-item.selected em {
+  color: white;
+  background-color: #0097cf;
+}
+tags-input .autocomplete .suggestion-item em {
+  font: normal bold 16px cabin, Arial, sans-serif;
+  color: black;
+  background-color: white;
+}
+
+.tag-striked{
+  text-decoration: line-through;
+}
+
+.pagination {
+  margin: 10px 0 5px 0;
+}
+
+.pagDisabled{
+  cursor: default !important;
+  background-color: #eee !important;
+}
+
+.no-margin{
+  margin: 0;
+}
+
+.buttonsRow {
+  height: 43px;
+  td {
+    border-top: none;
+    border-bottom: 1px solid @gray-lighter;
+  }
+  margin-bottom: 8px;
+}
+
+.buttonCell {
+  .entypo, div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .entypo {
+    font-size: 22px;
+    vertical-align: sub;
+    //margin: 6px 0 0 0;
+    //line-height: 18px;
+  }
+  div {
+    //margin: 3px 0 0 0;
+  }
+}
+
+.btn-gray {
+  color: #333;
+  background-color: #ccc;
+  border-color: #ccc;
+}
+
+.btn-big {
+  color: #333;
+  background-color: #ccc;
+  border-color: #ccc;
+  padding: 8px;
+  font-size: 14px;
+}
+
+.instance-title{
+  margin: 0;
+  padding: 10px;
+}
+
+.instance-status{
+  margin-top: 8px;
+}
+
+.animate-show {
+  line-height: 20px;
+  opacity: 1;
+  padding: 10px;
+}
+
+.animate-show.ng-hide-add.ng-hide-add-active,
+.animate-show.ng-hide-remove.ng-hide-remove-active {
+  -webkit-transition: all linear 0.5s;
+  transition: all linear 0.5s;
+}
+
+.animate-show.ng-hide {
+  line-height: 0;
+  opacity: 0;
+  padding: 0 10px;
+}
+
+.vertical-align {
+  min-height: 5vh;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align : center;
+  -webkit-align-items : center;
+  -moz-box-align : center;
+  -ms-flex-align : center;
+  align-items : center;
+  width: 100%;
+}
+
+.dependencies-graph{
+  text-align: center;
+}
+
+/**
+  DEPENDENCIES & LINEAGE GRAPHS
+**/
+
+.node {
+  .foreignObject {
+    padding: 5px;
+  }
+}
+
+.node-name:before {
+  font-family: 'Glyphicons Halflings';
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  padding-right: 0.3em;
+  vertical-align: -20%;
+  font-size: 110%;
+  color: #428bca;
+}
+
+.node-name-cluster:before {
+  content: "\2601";
+}
+
+.node-name-process:before {
+  content: "\e110";
+}
+
+.node-name-feed:before {
+  content: "\e181";
+}
+
+.node rect {
+  stroke-width: 0.5px;
+  stroke: #999;
+  fill: @gray-dark;
+  fill-opacity: 5%;
+  &:hover {
+    fill-opacity: 10%;
+  }
+}
+
+.edge path {
+  fill: none;
+  stroke: #333;
+  stroke-width: 1px;
+}
+
+.node-name {
+  font-size: 12px;
+  vertical-align: middle;
+  margin: 10px;
+}
+
+.lineage-link {
+  fill: none;
+  stroke: #eee;
+  stroke-width: 1.5px;
+}
+
+.lineage-node, .lineage-href {
+  cursor: pointer;
+}
+
+.lineage-node-terminal {
+  stroke: #000;
+  stroke-opacity: 0.3;
+  stroke-width: 8px;
+}
+
+.lineage-node-active {
+  stroke: #45a2b5;
+  stroke-opacity: 0.3;
+  stroke-width: 8px;
+}
+
+.lineage-node-text {
+  font-size: 8pt;
+  fill: #fff;
+  word-wrap: break-word;
+}
+
+.lineage-node-feed-instance {
+  fill: #6ab545;
+}
+
+.lineage-node-process-instance {
+  fill: #456ab5;
+}
+
+ul.lineage-legend {
+  list-style-type: none;
+}
+
+.lineage-legend li {
+  padding-left: 20px;
+  display: inline;
+}
+
+ul.lineage-legend li:before {
+  content: "\25cf";
+  position: relative;
+  display: inline-block;
+  top: 2px;
+  font-style: normal;
+  font-size: 16pt;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  padding-right: 5px;
+}
+
+.lineage-legend-feed-inst:before {
+  color: #6ab545;
+}
+
+.lineage-legend-process-inst:before {
+  color: #456ab5;
+}
+
+
+.lineage-legend-terminal:before {
+  -webkit-text-stroke-width: 2px;
+  -webkit-text-stroke-color: #ccc;
+}
+
+/* ALERT MESSAGE */
+
+.alert {
+  font-size: 16px;
+}
+
+.no-outline{
+ outline: 0;
+}
+
+.tittle-in-row{
+  margin-top: 20px !important;
+  margin-bottom: 0px !important;
+}
+
+.icon-lg{
+  font-size: 40px !important;
+}
+
+.prettyXml{
+  min-height: 800px;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/dataset-form.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/dataset-form.less b/falcon-ui/app/css/styles/dataset-form.less
new file mode 100644
index 0000000..1416dba
--- /dev/null
+++ b/falcon-ui/app/css/styles/dataset-form.less
@@ -0,0 +1,494 @@
+/**
+ * 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.
+ */
+//----------------mozilla outline hack-------------------//
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+.btn:focus, .btn:active, .btn:active:focus, .btn.active:focus, .btn:visited {
+  outline: none;
+  outline-offset: 0;
+}
+
+//--------helpers-----------------//
+.pa { position: absolute; }
+.pr { position: relative; }
+
+.p0 { padding: 0; }
+.p5 { padding: 5px; }
+.p10 { padding: 10px; }
+.p15 { padding: 15px; }
+.p20 { padding: 20px; }
+
+.m0 { margin: 0; }
+.m20 { margin: 20px; }
+.mt5 { margin-top: 5px; }
+.mt10 { margin-top: 10px; }
+.mt15 { margin-top: 15px; }
+.mt20 { margin-top: 20px; }
+.mb5 { margin-bottom: 5px; }
+.mb10 { margin-bottom: 10px; }
+.mb15 { margin-bottom: 15px; }
+.mb20 { margin-bottom: 20px; }
+
+.tl { text-align: left; }
+.tc { text-align: center; }
+.tr { text-align: right; }
+
+.pointer{ cursor: pointer; }
+.db { display: block; }
+
+//-----------------------------------------//
+
+@nextBtnBackground: #666666;
+@prevBtnBackground: #CCCCCC;
+
+#sourceClusterSelect, #targetClusterSelect {
+  display: block;
+  margin-bottom: 8px;
+}
+#formBox {
+  padding: 0 2%;
+  .dateInput {
+    padding-right:0!important;
+  }
+  .formBoxWrapper {
+    width: 500px;
+    margin:0 auto;
+  }
+  .locationBox {
+    label { margin:0 0 10px 0 };
+  }
+
+  label {
+    font-weight: normal;
+    font-size: 11px;
+    max-width: none;
+
+  }
+  input[type="text"], select {
+    .p0;
+    padding-left: 1px;
+    font-size: 13px;
+    line-height: 15px;
+    height: 25px;
+  }
+  textarea {
+    .p0;
+    padding-left: 1px;
+    font-size: 13px;
+    line-height: 15px;
+  }
+  .tablesTextArea {
+    height: 50px;
+  }
+  .databasesTextArea {
+    height: 97px;
+  }
+
+  a {
+    line-height: 30px;
+    cursor: pointer;
+    margin: 5px 15px;
+    text-decoration: underline;
+    color: black;
+    &:focus {
+      color: red;
+    }
+  }
+  h4 {
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  .formTitol {
+    width: 500px;
+    margin:0 auto;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    h1 {
+      font-size: 22px;
+      font-weight: bold;
+      margin:0;
+    }
+    a {
+      font-size: 12px;
+      line-height: 12px;
+      margin:0;
+      letter-spacing: 0.5px;
+    }
+  }
+  .tagsBox, .alertsBox {
+    .btn {
+      border-radius: 5px;
+      padding: 1px;
+      border-color: @gray;
+      height: 25px;
+      width: 65px;
+      line-height: 23px;
+      .glyphicon {
+        font-size: 8px;
+        line-height: 8px;
+        top:0;
+        color: @gray;
+      }
+    }
+  }
+
+  .typeButtonsBox {
+    background-color: @gray-lighter;
+    width: 264px;
+    padding:5px;
+    border-radius: 5px;
+    .btn {
+      padding: 5px 20px;
+      border-radius: 5px;
+      background-color: @gray-lighter;
+      border: none;
+      &.active {
+        background-color: @gray;
+        color: white;
+      }
+    }
+  }
+
+  .formBoxWrapper {
+    border: 1px solid @gray-lighter;
+    border-radius:3px;
+    .p20;
+  }
+
+  .clusterBox {
+    border: 1px solid @gray-light;
+    border-radius: 5px;
+    .mt20;
+    .mb10;
+    padding-top: 15px;
+    padding-bottom: 15px;
+
+    h3, .runJobOnBox {
+      .pa;
+      background-color: white;
+      padding: 0 5px;
+    }
+
+    h3 {
+      font-size: 16px;
+      font-weight: 700;
+      display: inline-block;
+      top: -30px;
+
+    }
+    .runJobOnBox {
+      width: 110px;
+      right: 5px;
+      top: -13px;
+    }
+    .hiveDatabasesTitol {
+      font-size: 12px;
+      padding-left: 5px;
+    }
+    .databaseRadioBox{
+      font-size: 12px;
+      input {
+        margin-left: 5px;
+      }
+    }
+  }
+  .alertsBox {
+    .mt10;
+    h4 {
+      margin: 0;
+    }
+    .emailBox {
+      padding-right: 5px;
+      width: 82%;
+      display: inline-block;
+      vertical-align: top;
+      .db { margin:0; }
+      margin-bottom:5px;
+      label {
+        width: 100%;
+      }
+    }
+    .addAlertBox {
+      margin-bottom:5px;
+      margin-left: 10px;
+      display: inline-block;
+      vertical-align: top;
+      margin-top: 24px;
+    }
+    .emailArrayRow {
+      height: 25px;
+      font-size: 12px;
+      line-height: 25px;
+      margin-bottom: 5px;
+      span {
+        font-weight: bold;
+      }
+      button {
+        float: right;
+        margin-right: 4px;
+      }
+    }
+  }
+
+}
+.advancedOptionsButton {
+  cursor: pointer;
+  hr {
+    width: 67%;
+    margin-top: -7px;
+    margin-bottom:0;
+    margin-left: 128px;
+    border-top: 1px solid @gray-dark;
+  }
+  span.entypo {
+    float: right;
+    margin: 7px 5px;
+    font-size: 50px;
+  }
+}
+#advancedOptionsBox {
+  .transition(max-height 1s ease);
+  max-height: 0;
+  overflow: hidden;
+  &.expanded {
+    max-height: 850px;
+  }
+  .frequencyBox {
+    width: 36%;
+    display: inline-block;
+    vertical-align: top;
+    input, select {
+      display: inline-block;
+    }
+    input {
+      width: 20px;
+    }
+    select {
+      width: 80px;
+    }
+    label {
+      margin:0;
+    }
+  }
+
+  .allocationBox {
+    >div>div {
+      width: 24%;
+      display: inline-block;
+    }
+
+  }
+  .retryBox {
+    .policyBox {
+      width: 45%;
+      select {
+        width: 170px;
+      }
+    }
+
+    > div {
+      width: 30%;
+      display: inline-block;
+      input, select {
+        display: inline-block;
+      }
+      input {
+        width: 20px;
+      }
+      select {
+        width: 80px;
+      }
+      label {
+        margin:0;
+      }
+      &:last-child {
+        width: 20%;
+        text-align: right;
+        padding-right: 20px;
+      }
+    }
+  }
+
+  .hiveOptBox {
+    label {
+      display: block;
+    }
+  }
+}
+
+
+//---------------SUMMARY------------------//
+
+#formSummaryBox {
+  font-size: 12px;
+  h4 {
+    margin-bottom:0;
+    font-size: 12px;
+  }
+  h5 {
+    font-size: 12px;
+    font-weight: bold;
+    display: inline-block;
+  }
+  span {
+    font-weight: bold;
+  }
+  .lightSubtitle {
+    color: @gray-light;
+    font-weight: bold;
+    font-size: 14px;
+  }
+  .box {
+    position: relative;
+    border: 1px solid @gray-lighter;
+    border-radius: 5px;
+    padding: 15px;
+    margin-top: 15px;
+
+    h3 {
+      font-size: 18px;
+      margin-top: -25px;
+      margin-left: -10px;
+      padding: 0 5px;
+      background-color: white;
+      display: inline-block;
+      position: absolute;
+    }
+    h4 {
+      margin-top:0;
+    }
+
+  }
+  .allocationSubBox {
+    width: 32%;
+    display: inline-block;
+  }
+  .previewBox {
+    text-align: right;
+  }
+  #jsonPreview {
+    width: 190px;
+    .mt20;
+    .mb20;
+  }
+
+}
+
+
+//////////////////////////////
+
+#formBox {
+  .progressBox {
+    height: 75px;
+    .pr;
+  }
+  .progressBar {
+    overflow: hidden;
+    padding: 0 35px 10px;
+    height: 100px;
+
+    h6 {
+      font-size: 10px;
+      white-space: nowrap;
+    }
+    span {
+      width: auto;
+    }
+  }
+
+  .fir, .sec {
+    .pa;
+    .transition(border, 0.4s, ease);
+    .transition(background, 0.4s, ease);
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    border: 3px solid @gray-light;
+    border-radius: 20px;
+    color: white;
+    line-height: 34px;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    span {
+      display: none;
+    }
+    h6 { .m0; .pa; top: 40px; color: black; }
+
+  }
+  .fir {
+    left:0;
+    h6 {
+      left: -5%;
+    }
+  }
+  .sec {
+    right: 0;
+    margin-left: -20px;
+    z-index: 4;
+    h6 {
+      left: -10%;
+    }
+  }
+
+  .bar1 {
+    .transition(all, 0.4s, ease);
+    .pa;
+    z-index: 3;
+    top:13px;
+    height: 10px;
+    background-color: @gray-light;
+    z-index: 5;
+    left: 38px;
+    right: 32px;
+    border-width:0;
+  }
+  .general {
+    .bar1 { background-color: @gray-light; }
+    .fir {
+      background-color: @gray-dark;
+      h6 { font-weight: bold; }
+    }
+    .sec {
+      background-color: @gray-light;
+      h6 { font-weight: normal; }
+    }
+
+  }
+
+  .summary {
+    .bar1 { background-color: @gray-dark; }
+    .fir {
+      h6 { font-weight: normal; }
+      background-color: @gray-dark;
+      border-color: @gray-dark;
+      span {
+        display: inline-block;
+      }
+      b {
+        display: none;
+      }
+    }
+    .sec {
+      background-color: @gray-dark;
+      h6 { font-weight: bold; }
+    }
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/entities-list.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/entities-list.less b/falcon-ui/app/css/styles/entities-list.less
index feb50e3..6ea757f 100644
--- a/falcon-ui/app/css/styles/entities-list.less
+++ b/falcon-ui/app/css/styles/entities-list.less
@@ -16,16 +16,17 @@
  * limitations under the License.
  */
 .dashboardBox {
+  padding: 0;
   h3 {
     margin: 0 0 5px 0;
   }
 }
 
-.listTable { 
+.listTable {
   margin-top: 5px;
   border-collapse: separate;
   border-radius: 4px;
-  border: 1px solid @gray;
+  //border: 1px solid @gray;
   width: 100%;
   min-height: 140px;
   overflow: hidden;
@@ -55,7 +56,7 @@
         //.trayAnimation;
       }
     }
-    
+
   }
   h5 {
     text-align: left;
@@ -76,6 +77,7 @@
   tbody {
     padding: 5px;
     display: table-row-group;
+    background-color: white;
   }
   tr {
     width: 100%;
@@ -86,6 +88,9 @@
     width: 35%;
     float:left;
     margin: 3px 1%;
+    &.clusterFilters {
+      width: 48%;
+    }
   }
   .filtersSelectBox {
     float:left;
@@ -97,21 +102,30 @@
       padding:0;
       font-size: 10px;
     }
-  } 
-  .buttonsRow {
-    height: 41px;
-    td {
-      border-top: none;
-    }  
-  }  
-  .buttonCell {}
+  }
+
+
   .entityRow {
+    &:hover, &.rowSelected {
+      background: #F2F2F2;
+      td {
+        border-color: #E2E2E2;
+      }
+    }
+
     td {
-      padding: 0 5px;
+      padding: 3px 3px;
+      line-height: 22px;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+      vertical-align: middle;
+    }
+    &.firstEntityRow {
+      td { padding-top: 6px; }
     }
-    &:last-child {
+    &.lastEntityRow {
       td {
-        border-bottom: none;
+        padding-bottom: 6px;
       }
     }
   }
@@ -130,12 +144,8 @@
   input[type="radio"] {
     margin: -1px 0 0 -18px;
     font-size: 10px;
-  } 
-  .entypo {
-    font-size: 20px;
-    margin: 8px 0 0 0;
-    display: inline-block;
-  }  
+  }
+
   .nameCell {
     cursor: pointer;
     &:hover {
@@ -143,7 +153,7 @@
     }
   }
 }
-.buttons-to-show { 
+.buttons-to-show {
   margin:2px 0;
 }
 /* LOGIN */
@@ -164,3 +174,39 @@
     color: gray;
   }
 }
+
+/* New Dashboard */
+
+.filtersResultBox {
+  font-weight: normal;
+//  font-size: 14px;
+  width: 35%;
+  float:left;
+  margin: 3px 1%;
+  &.clusterFilters {
+    width: 48%;
+  }
+}
+
+.tag:hover {
+  cursor: pointer;
+  color: #fff;
+  background-color: #5fa33e;
+  font-weight: bold;
+}
+
+
+
+
+.waitingLayer {
+  position: absolute;
+  background-color: red;
+  width: 100%;
+  height:100%;
+  opacity:0;
+  z-index: -1;
+  .active {
+    opacity:1;
+    z-index: 2;
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/entity-summary.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/entity-summary.less b/falcon-ui/app/css/styles/entity-summary.less
new file mode 100644
index 0000000..5d5f1e3
--- /dev/null
+++ b/falcon-ui/app/css/styles/entity-summary.less
@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/form-pages.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/form-pages.less b/falcon-ui/app/css/styles/form-pages.less
index 6f27ff5..957e148 100644
--- a/falcon-ui/app/css/styles/form-pages.less
+++ b/falcon-ui/app/css/styles/form-pages.less
@@ -20,6 +20,9 @@
 .mt1 {
   margin-top: 1px;
 }
+.mt5 {
+  margin-top: 5px;
+}
 .mt10 {
   margin-top: 10px;
 }
@@ -31,19 +34,83 @@
 }
 .formViewContainer {
   .mt10;
+
 }
-.feedBottomButtons {
-  .mt20; 
+//-----------------next and previous buttons----------//
+@nextBtnBackground: #666666;
+@prevBtnBackground: #CCCCCC;
+.nextBtn, .prevBtn {
+  .transition(background, 0.3s, ease);
+  border: 0px none;
+  width: 90px;
+  border-radius: 7px!important;
+  padding: 10px;
+}
+.nextBtn {
+  background: @nextBtnBackground;
+  color: white;
+  &:hover {
+    background: darken(@nextBtnBackground, 10%);
+    color: white;
+    outline: hidden;
+    border-radius: 7px!important;
+  }
+  &:focus, &:active, &:visited {
+    background: darken(@nextBtnBackground, 10%);
+    color: white;
+    outline: hidden;
+    border-radius: 10px!important;
+  }
+}
+.prevBtn {
+  background: @prevBtnBackground;
+  &:hover {
+    background: darken(@prevBtnBackground, 10%);
+    outline: hidden;
+    border-radius: 7px!important;
+  }
+  &:focus, &:active, &:visited {
+    background: darken(@prevBtnBackground, 10%);
+    outline: hidden;
+    border-radius: 10px!important;
+  }
+}
+//-----------------------------------------------------//
+.aclBox {
+  .mt10;
+
+  > div {
+    label {
+      margin-top:5px;
+      font-weight: normal;
+      width: 95%;
+    }
+    width: 32%;
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+.dt {
+  //display: table;
+}
+@media screen and (max-width: @grid-float-breakpoint) {
+  .xmlPreviewContainer {
+    position: relative;
+    left:0;
+    top:0;
+    width: 500px;
+  }
 }
 .formPage {
-  
+
   h3 {
     font-weight: bold;
   }
   .entypo {
     font-size: 22px;
-    line-height: 10px;
-    vertical-align: middle;
+   /* line-height: 14px;*/
+    /*vertical-align: top;
+    display: inline-table;*/
   }
   h4 {
     font-size: 14px;
@@ -66,30 +133,36 @@
   .light {
     font-weight: normal;
   }
-  u {
+  a {
     line-height: 30px;
     cursor: pointer;
+    margin: 5px 15px;
+    text-decoration: underline;
+    color: black;
+    &:focus {
+      color: red;
+    }
   }
   input, select {
-    color: black;
+    color: @gray-darker;
     font-size: 13px;
   }
   .input-group-addon {
     height:13px;
     border-radius:0;
   }
-  
+
 }
-select {  
-  .form-control;  
+select {
+  .form-control;
   padding:0;
 }
 #engineVersionField{ display: inline-block; width: auto; }
 .inlineInputsGroup {
-  input {   
-    display: inline-block;    
-    margin-right: 3px; 
-    &:last-child { margin-right:0;}   
+  input {
+    display: inline-block;
+    margin-right: 3px;
+    &:last-child { margin-right:0;}
   }
   input[type="text"] {
     width: 20px;
@@ -121,7 +194,7 @@ select {
     font-size: 35px;
     line-height: 9px;
   }
-  
+
 }
 .clusterSummaryRow {
   padding: 0 10px;
@@ -140,8 +213,8 @@ select {
     }
     margin-top: 5px;
   }
-  
-  
+
+
 }
 #feedPropertiesBox {
   label {
@@ -153,7 +226,7 @@ select {
     margin-top: 10px;
   }
   label {
-    font-size: 10px;
+    font-size: 12px;
     margin:0;
   }
   input[type="checkbox"] {
@@ -191,12 +264,34 @@ select {
   }
   .feedLocationNav {
     color: black;
+
     .btn {
-      background-color: @gray-light;
+      position: relative;
+      background-color: lighten(@gray-light2, 20%);
+      border-radius: 5px;
+      font-size: 12px;
+      letter-spacing: 0.5px;
+      padding: 4px 20px;
+
+      &:last-child {
+        margin-right: -12px;
+      }
     }
     .active {
       color: white;
-      background-color: @gray-dark;
+      background-color:lighten(@gray, 20%);
+      z-index: 1234;
+    }
+    &.disabled {
+      .btn {
+        background-color: lighten(@gray-light2, 30%);
+        opacity:1;
+        color: @gray-light2;
+      }
+      .active {
+        background-color:lighten(@gray, 30%);
+        color: white;
+      }
     }
   }
 
@@ -234,7 +329,7 @@ select {
     }
 
   }
-  .validityDateBox {
+  /*.validityDateBox {
     .light {
       display: block;
     }
@@ -242,7 +337,7 @@ select {
       display: inline-block;
 
     }
-  }
+  }*/
   .input-group {
     input {
       font-size: 12px;
@@ -290,18 +385,24 @@ select {
     color: white;
   }
 }
+
+@media screen and (max-width: @grid-float-breakpoint) {
+  .detailsBox {
+    float:none!important;
+  }
+}
 .detailsBox {
   border-radius: 5px;
   border: 1px solid @gray-light2;
-  margin: 5px;
+  margin: 5px 0;
   padding: 15px 5px;
   font-size: 12px;
   background-color: #ffffff;
   h4 {
-    font-weight: bold;    
+    font-weight: bold;
     margin:5px 0;
   }
-  h5 { 
+  h5 {
     font-weight: bold;
     margin-top:2px;
   }
@@ -320,7 +421,7 @@ select {
   &.processCluster {
     padding: 15px 4%;
     margin: 5px auto;
-    h5 { 
+    h5 {
       margin-top:15px;
       &:first-child {
         margin-top:0;
@@ -328,3 +429,92 @@ select {
     }
   }
 }
+
+.detailsBT{
+  .entypo{
+    font-size: 1.5em;
+  }
+  color: #fff;
+  padding: 3px 8px;
+  border: 1px solid white;
+  border-radius: 5px;
+  border-color: #fff;
+  display: inline-block;
+  cursor: auto;
+  background-color: #5fa33e;
+}
+
+
+///////////////////////////////////////////////
+///////VALIDITY BOXES//////////////////////////
+///////////////////////////////////////////////
+.validityBox {
+  label, input, button {
+    font-weight: normal;
+  }
+
+  > div {
+    display: inline-block;
+    margin: 0 2px;
+  }
+
+  h4 {
+    margin-top: 5px;
+    margin-bottom: 0;
+  }
+  .startDateBox, .endDateBox {
+    width: 20%;
+    vertical-align: top;
+  }
+  .startTimeBox, .endTimeBox {
+    width: 15%;
+    vertical-align: top;
+    padding-left:0;
+    input {
+      //width: 20px;
+      //margin:0;
+    }
+    button {
+      border-radius: 0;
+      width: 25px;
+      height: 25px;
+      padding:0;
+      margin-left: 1px;
+    }
+    table {
+      width: auto;
+      border-spacing: 0;
+      tr {
+        &:first-child {
+          display: none;
+        }
+        &:last-child {
+          display: none;
+        }
+      }
+    }
+
+    a {
+      display: none!important;
+    }
+  }
+  .endDateBox {
+
+  }
+  .endTimeBox {
+
+  }
+  .tzBox {
+    width: 22%;
+    //padding-top: 20px;
+  }
+}
+
+.feedForm, .entityForm {
+  .validityBox {
+    .startDateBox, .endDateBox { width: 27%;}
+    .startTimeBox, .endTimeBox {width: 17%;}
+    .endDateBox { margin-left: 20px;}
+    .error_input { border:1px solid red !important;}
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/nav-header.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/nav-header.less b/falcon-ui/app/css/styles/nav-header.less
index 7bc160e..2be45af 100644
--- a/falcon-ui/app/css/styles/nav-header.less
+++ b/falcon-ui/app/css/styles/nav-header.less
@@ -27,8 +27,25 @@
   border-width: 0;
   border-radius: 0;
   position: relative;
+  &:hover{
+    cursor: default;
+  }
+}
+.logoTitle {
+  background: transparent;
+  border: none;
+  float: left;
+  h1 span{
+    vertical-align: middle;
+    display: inline-block;
+  }
+  .falconLogo{
+    background: url(img/falcon.png) no-repeat center center;
+    background-size: 100%;
+    width: 30px;
+    height: 44px;
+  }
 }
-
 .navbar-header {
   margin: 5px 15px 5px 5px;
   font-size: 30px;
@@ -47,51 +64,177 @@
     font-weight: bold;
     margin: 2px 0;
   }
-  > div {
+  > button {
     padding: 5px 10px;
     border: 1px solid white;
     border-radius: 3px;
     display: inline-block;
     cursor: pointer;
+    background-color: transparent;
+  }
+  span {
+    vertical-align: middle;
+    margin-right: 6px;
+    &.entypo, &.glyphicon{
+      vertical-align: sub;
+      &.up{
+        font-size: 2.2em;
+      }
+    }
   }
   .disabled {
-    color: lighten(@headerNavBG, 10%);
-    border-color: lighten(@headerNavBG, 10%);
+    //color: lighten(@headerNavBG, 30%);
+    //border-color: lighten(@headerNavBG, 10%);
     cursor: default;
+    .background-opacity(black, 0.2);
   }
 }
 .uploadNavWrapper {
   > div {
     min-width:183px;
+    padding: 5px 10px;
+    border: 1px solid white;
+    border-radius: 3px;
+    display: inline-block;
+    cursor: pointer;
+    &.fakeFocus {
+      .box-shadow(0 0 2px white);
+    }
   }
 }
-
 .loginHeaderBox {
   margin: 0;
   display: inline-block;
   //width: 100%;
-  text-align:right;
+  text-align: right;
+  margin-top: 10px;
+
   .pull-right;
-  div {
+  >*{
+    vertical-align: middle;
     display: inline-block;
     margin-right: 10px;
+    >*{
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+  span.entypo{
+    vertical-align: sub;
+  }
+  span.user{
+    background: url(img/user.svg) no-repeat center center;
+    background-size: 35px 35px;
+    height: 35px;
+    width: 35px;
+  }
+  button {
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+  }
+  a {
+    color: white;
+    cursor: pointer;
+    overflow: hidden;
+    background-color: transparent;
+    &:hover {
+      text-decoration: none;
+    }
+    &:focus {
+      text-decoration: none;
+    }
   }
 }
 
-@media screen and (min-width:880px) {
-  .loginHeaderBox {
-    margin-top: 36px;
-  }
+/* NOTIFICATIONS */
+
+.notifications .messages {
+  display:none;
+  position: absolute;
+  top:50px;
+  right:0px;
+  width:280px;
+  max-width:280px;
+  max-height:300px;
+  overflow: auto;
 }
-@media screen and (max-width:880px) {
-  .loginHeaderBox {
-    //margin-top: 40px;
-    width: 100px;
-  }
+
+.messagesArrow {
+  content:'.';
+  display:none;
+  position:absolute;
+  margin-left:-10px;
+  top:30px;
+  right:130px;
+  width:0;
+  height:0;
+  color:transparent;
+  border:10px solid black;
+  border-color:transparent transparent white;
+}
+
+.notifications .messages:before {
+  content:'.';
+  display:block;
+  position:absolute;
+  margin-left:-10px;
+  left:50%;
+  top:-18px;
+  width:0;
+  height:0;
+  color:transparent;
+  border:10px solid black;
+  border-color:transparent transparent white;
+}
+
+.badge-notify{
+  background:red;
+  position:relative;
+  top: -15px;
+  right: -35px;
 }
-@media screen and (max-width:610px) {
-  .loginHeaderBox {
-    //margin-top: 40px;
-    width: 100%;
+
+.notifications .messages .message {
+  display:block;
+  position:relative;
+  padding:10px;
+  background-color:white;
+  text-decoration:none;
+  a {
+    font-weight: bold;
+    text-decoration: underline;
   }
+}
+
+.notifications .messages .message + .message {
+  border-top:1px solid #e0e0e0;
+}
+
+.icon-notif{
+  margin-right: 10px;
+}
+
+.no-margin-right{
+ margin-right: 0;
+}
+
+.bell-notif{
+  margin-right: 10px;
+}
+
+.header-icon{
+  font-size: 18px;
+}
+
+.logoutBT{
+  margin-right: -20px;
+}
+
+.no-outline{
+  outline: 0;
+}
+
+.unreaded-notif {
+  background-color: #EDEDED !important;
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/popover.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/popover.less b/falcon-ui/app/css/styles/popover.less
new file mode 100644
index 0000000..4218bc2
--- /dev/null
+++ b/falcon-ui/app/css/styles/popover.less
@@ -0,0 +1,230 @@
+/**
+ * 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.
+ */
+@popover-bg-color: #fff;
+@popover-border-color: #d2d2d2;
+
+@popover-triangle-size: 11px;
+@popover-triangle-color: @popover-bg-color;
+@popover-triangle-border-color: @popover-border-color;
+
+.ns-popover-list-theme {
+  box-sizing: border-box;
+  border: solid 1px @popover-border-color;
+  border-radius: 3px;
+  z-index: 100;
+  background-color: #fff;
+  -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+  -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+  box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+
+  ul, .list {
+    padding: 0;
+    margin: 0.625rem 0;
+    display: block;
+  }
+
+  li, .list-item {
+    list-style-type: none;
+
+    a {
+      padding: 0.1875rem 0.625rem;
+      display: block;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+
+// @mixins
+//
+// We use this to create equilateral triangles
+// @triangle-size - Used to set border-size. No default, set a px or em size.
+// @triangle-color - Used to set border-color which makes up triangle. No default
+// @triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
+.triangle(@triangle-direction,
+  @triangle-size:@popover-triangle-size,
+  @triangle-color:@popover-triangle-color,
+  @triangle-border-color:@popover-triangle-border-color) {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border: solid @triangle-size;
+  border-color: transparent;
+  position: absolute;
+
+  &:after {
+    content: " ";
+    display: block;
+    width:0;
+    height:0;
+    border: solid 10px;
+    border-color: transparent;
+    position: absolute;
+  }
+
+  & when (@triangle-direction = "top") {
+    border-top-color: @triangle-border-color;
+    left:50%;
+    bottom: -@triangle-size;
+    margin-left: -@triangle-size;
+
+    &:after {
+      border-top-color: @triangle-color;
+      border-bottom-width: 0;
+      bottom: 1px;
+      margin-left: -10px;
+    }
+  }
+
+  & when (@triangle-direction = "bottom") {
+    border-bottom-color: @triangle-border-color;
+    left:50%;
+    top: -@triangle-size;
+    margin-left: -@triangle-size;
+
+    &:after {
+      border-bottom-color: @triangle-color;
+      border-top-width: 0;
+      top: 1px;
+      margin-left: -10px;
+    }
+  }
+
+  & when (@triangle-direction = "left") {
+    border-left-color: @triangle-border-color;
+    top:50%;
+    right: -@triangle-size;
+    margin-top: -@triangle-size;
+
+    &:after {
+      border-left-color: @triangle-color;
+      border-right-width: 0;
+      right: 1px;
+      bottom: -10px;
+    }
+  }
+
+  & when (@triangle-direction = "right") {
+    border-right-color: @triangle-border-color;
+    top:50%;
+    left: -@triangle-size;
+    margin-top: -@triangle-size;
+
+    &:after {
+      border-right-color: @triangle-color;
+      border-left-width: 0;
+      left: 1px;
+      bottom: -10px;
+    }
+  }
+}
+
+.ns-popover-tooltip-theme {
+  box-sizing: border-box;
+  z-index: 100;
+  background-color: transparent;
+
+  .ns-popover-tooltip {
+    box-sizing: border-box;
+    border: solid 1px @popover-border-color;
+    border-radius: 3px;
+    z-index: 100;
+    background-color: #fff;
+    padding: 0.5625rem 0.875rem;
+    -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+    -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+    box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+    margin: 10px;
+
+    h5 {
+      font-weight: bold;
+      font-size: 16px;
+      color: #777;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0.625rem 0;
+      display: block;
+    }
+
+    li {
+      list-style-type: none;
+
+      a {
+        padding: 0.1875rem 0.625rem;
+        display: block;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+      }
+    }
+  }
+
+  &.ns-popover-bottom-placement {
+    .triangle {
+      .triangle("bottom");
+    }
+  }
+
+  &.ns-popover-top-placement {
+    .triangle {
+      .triangle("top");
+    }
+  }
+
+  &.ns-popover-right-placement {
+    .triangle {
+      .triangle("right");
+    }
+  }
+
+  &.ns-popover-left-placement {
+    .triangle {
+      .triangle("left");
+    }
+  }
+
+  &.ns-popover-left-align {
+    .ns-popover-tooltip {
+      margin-left: 0;
+    }
+  }
+
+  &.ns-popover-right-align {
+    .ns-popover-tooltip {
+      margin-right: 0;
+    }
+  }
+
+  &.ns-popover-top-align {
+    .ns-popover-tooltip {
+      margin-top: 0;
+    }
+  }
+
+  &.ns-popover-bottom-align {
+    .ns-popover-tooltip {
+      margin-bottom: 0;
+    }
+  }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/progress-bar.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/progress-bar.less b/falcon-ui/app/css/styles/progress-bar.less
index 21b03d8..5f0ad01 100644
--- a/falcon-ui/app/css/styles/progress-bar.less
+++ b/falcon-ui/app/css/styles/progress-bar.less
@@ -23,42 +23,56 @@
   overflow: hidden;
   padding: 10px 35px;
   .entypo {
-    font-size: 37px;
-    line-height: 0;
+    /*float: none!important;
+    position: absolute;
+    margin: 0!important;
+    top:0;
+    left:0;*/
+   /* line-height: 36px;
+    height: 36px;
+    width: 36px;*/
+
+    color: white;
+    z-index:2;
+    position: relative;
+    display: none;
+    font-size: 36px;
+
+    margin: -24px -15px 0 0!important;
   }
   div {
     .transition(background-color, 0.5s, ease-out);
     background-color: @gray-light;
     height: 10px;
     border-top:2px solid @gray-light;
-    border-bottom:2px solid @gray-light;    
+    border-bottom:2px solid @gray-light;
     span {
       display: block;
       width: 55px;
       span { display: none;}
       &:first-child {
         float: left;
-        margin: -10px 0 0 -17px;     
+        margin: -10px 0 0 -17px;
         h6 {
           font-weight: bold;
         }
       }
       &:last-child {
         float: right;
-        margin: -10px -15px 0 0;    
+        margin: -10px -15px 0 0;
         div {
           background-color: @gray-light;
-        } 
-      } 
+        }
+      }
       h6 {
         margin: 0;
         font-size: 10px;
       }
-    }   
+    }
     div {
       display: inline-block;
-      border-radius: 30px;      
-      line-height: 27px;    
+      border-radius: 30px;
+      line-height: 27px;
       width: 30px;
       height: 30px;
       text-align: center;
@@ -80,14 +94,8 @@
         background-color: @gray-dark;
         border-color: @gray-dark;
         span {
-          &:first-child {           
-            span {
-              color: white;
-              display: block;           
-              z-index:2;
-              position: relative;
-              margin-top: -13px;
-            }
+          &:first-child {
+            .entypo { display: block;}
             div {
               color: @gray-dark;
               border-color: @gray-dark;
@@ -103,7 +111,7 @@
             h6 {
               font-weight: bold;
             }
-          }       
+          }
         }
       }
     }
@@ -111,14 +119,6 @@
 }
 .feedProgressBox {
   font-size: 14px;
-  .entypo {     
-    color: white;                 
-    z-index:2;
-    position: relative;
-    display: none;
-    font-size: 36px;
-    margin: -13px -15px 0 0!important;  
-  }  
   .progressBar {
     padding: 10px 6% 0 6%;
     >div {
@@ -127,18 +127,18 @@
         width: 24%;
         margin: -11px 0 0 0;
         &:first-child {
-          margin: -10px 0 0 -4%;  
+          margin: -10px 0 0 -4%;
           h6 {
             font-weight: normal;
-          }  
+          }
         }
         &:last-child {
-          margin: -10px -21% 0 0;    
+          margin: -10px -21% 0 0;
         }
-        div {       
+        div {
           background-color: @gray-dark;
-        } 
-      }       
+        }
+      }
       div {
         border-color: @gray-light;
       }
@@ -150,32 +150,32 @@
   }
   &.general {
     .fir {
-      background-color: @gray-dark;    
-      & + h6 { font-weight: bold!important; }   
+      background-color: @gray-dark;
+      & + h6 { font-weight: bold!important; }
     }
     .sec, .thi, .fou, .fif {
       background-color: @gray-light;
-    }  
-    
+    }
+
   }
   &.properties {
-    .fir {   
-      .entypo {display: block;}      
+    .fir {
+      .entypo {display: block;}
       border-color: @gray-dark;
       color: @gray-dark;
     }
-    .sec + h6 { font-weight: bold; }  
+    .sec + h6 { font-weight: bold; }
     .fir, .sec {
-      background-color: @gray-dark;  
+      background-color: @gray-dark;
     }
     .thi, .fou, .fif {
-      background-color: @gray-light;     
+      background-color: @gray-light;
     }
   }
   &.location {
-    .thi + h6 { font-weight: bold; }     
+    .thi + h6 { font-weight: bold; }
     .fir, .sec {
-      .entypo {display: block;}      
+      .entypo {display: block;}
       border-color: @gray-dark;
       color: @gray-dark;
     }
@@ -187,9 +187,9 @@
     }
   }
   &.clusters {
-    .fou + h6 { font-weight: bold; }  
+    .fou + h6 { font-weight: bold; }
     .fir, .sec, .thi {
-      .entypo {display: block;}      
+      .entypo {display: block;}
       border-color: @gray-dark;
       color: @gray-dark;
     }
@@ -201,9 +201,9 @@
     }
   }
   &.summary {
-    .fif + h6 { font-weight: bold; }  
+    .fif + h6 { font-weight: bold; }
     .fir, .sec, .thi, .fou {
-      .entypo {display: block;}      
+      .entypo {display: block;}
       border-color: @gray-dark;
       color: @gray-dark;
     }
@@ -214,16 +214,10 @@
 }
 .processProgressBox {
   font-size: 14px;
-  .entypo {
-    color: white;
-    z-index:2;
-    position: relative;
-    display: none;
-    font-size: 36px;
-    margin: -13px -15px 0 0!important;
-  }
+
 
   .progressBar {
+
     padding: 10px 6% 0 6%;
     >div {
       >span {

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/server-messages.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/server-messages.less b/falcon-ui/app/css/styles/server-messages.less
index b606810..0ab7d13 100644
--- a/falcon-ui/app/css/styles/server-messages.less
+++ b/falcon-ui/app/css/styles/server-messages.less
@@ -18,13 +18,15 @@
 //------server messages ------//
 .alert {
   position: relative;
-  margin:5px 0;
+  display: inline-block;
+  margin:5px auto 0;
+  padding: 5px 20px 5px 10px;
   .box-shadow(~"1px 1px 5px black");
   border: 1px solid white;
   opacity: 1;
   span {
     display: inline-block;
-    margin: auto 5px;   
+    margin: auto 5px;
   }
   .entypo {
     position: absolute;
@@ -32,19 +34,35 @@
     right:5px;
     cursor: pointer;
   }
+  &.bg-danger {
+    border: 1px solid darken(@brand-danger, 10%);
+  }
+  &.bg-success {
+    border: 1px solid darken(@brand-success, 10%);
+  }
+  &.bg-warning {
+    border: 1px solid darken(@brand-warning, 10%);
+  }
+  a {
+    text-decoration: underline;
+    cursor: pointer;
+  }
 }
-.alert.repeat-animation.ng-enter, 
-.alert.repeat-animation.ng-leave{ 
- // .transition (all, 0.3s, ease); 
-} 
- 
+.repeat-animation {
+  text-align: center;
+}
+.repeat-animation.ng-enter,
+.repeat-animation.ng-leave{
+ // .transition (all, 0.3s, ease);
+}
+
 //.alert.repeat-animation.ng-leave.repeat-animation.ng-leave-active,
-.alert.repeat-animation.ng-enter {   
+.repeat-animation.ng-enter {
     .messageAnimation;
 }
- 
-.alert.repeat-animation.ng-enter.repeat-animation.ng-enter-active, 
-.alert.repeat-animation.ng-leave {
+
+.repeat-animation.ng-enter.repeat-animation.ng-enter-active,
+.repeat-animation.ng-leave {
     //.messageAnimation;
 }
 
@@ -54,7 +72,10 @@
 @keyframes messageAnimation { 0% { opacity: 0;} 20% { opacity: 1;} 40% { opacity: 0;}60% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} }
 
 .messageAnimation {
-  .animation(messageAnimation, 1.5s, ease-in-out, 1); 
+  .animation(messageAnimation, 1.5s, ease-in-out, 1);
 }
 
- 
\ No newline at end of file
+.repeat-leyend{
+  text-align: center;
+  margin: 10px 0;
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/variables.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/variables.less b/falcon-ui/app/css/variables.less
index f9fad79..f1c81ab 100644
--- a/falcon-ui/app/css/variables.less
+++ b/falcon-ui/app/css/variables.less
@@ -37,7 +37,7 @@
 @brand-warning:         #f0ad4e;
 @brand-danger:          #d9534f;
 
-@headerNavBG: #5fa33e;
+@headerNavBG: #69BE28;
 //== Scaffolding
 //
 //## Settings for some of the most global styles.
@@ -57,7 +57,7 @@
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-@font-family-sans-serif:  "Open Sans", Helvetica, Arial, sans-serif;
+@font-family-sans-serif:  cabin, Arial, sans-serif;
 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/authenticating.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/authenticating.html b/falcon-ui/app/html/authenticating.html
new file mode 100644
index 0000000..8706322
--- /dev/null
+++ b/falcon-ui/app/html/authenticating.html
@@ -0,0 +1,37 @@
+<!--
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+-->
+
+<form name="loginForm" ng-submit="loggUser(loginForm)" novalidate id="loginForm">
+
+  <div class="col-sm-24 dashboardBox login" ng-class="{showValidationStyle:showLoginVal.show}">
+    <div class="row">
+      <div class="col-sm-6"></div>
+      <div class="col-sm-12">
+
+        <div class="col-sm-15 detailsBox centered">
+          <h3>Authenticating...</h3>
+        </div>
+
+      </div>
+      <div class="col-sm-6"></div>
+    </div>
+  </div>
+
+</form>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html b/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
index 2ef813f..8d76c90 100644
--- a/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
+++ b/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
@@ -17,76 +17,84 @@
  * limitations under the License.
  */
 -->
-<form name="clusterForm">
-  <div class="col-sm-24">
+<form novalidate name="clusterForm" id="clusterGeneralStep">
+  <div class="col-xs-24">
     <label class="light">Name</label>
-    <input type="text" class="form-control nameInput" ng-pattern="validations.patterns.name"
-           ng-model="clusterEntity.clusterModel.cluster._name" ng-required="true"
-           ng-keydown="validations.acceptNoSpaces($event)"
-           check-name="{type:'cluster', check:true}" ng-class="{fakeInvalid:!validations.nameAvailable}"
-           ng-disabled="xmlPreview.edit" />
-           <!--check-type="cluster" check-name-flag="nameValid" check="true"-->
+    <input type="text" class="form-control nameInput"
+	ng-pattern="validations.patterns.name"
+        ng-model="clusterEntity.clusterModel.cluster._name" ng-required="true"
+        ng-keydown="validations.acceptNoSpaces($event)"
+        check-name="{type:'cluster', check:true}" ng-class="{fakeInvalid:!validations.nameAvailable}"
+        ng-disabled="xmlPreview.edit" />
+        <!--check-type="cluster" check-name-flag="nameValid" check="true"-->
 
   </div>
-  <div class="col-sm-12">
+  <div class="col-xs-12">
     <label class="light">Colo</label>
-    <input type="text" class="form-control" ng-pattern="validations.patterns.freeText"
-           ng-required="true" ng-disabled="xmlPreview.edit"
-           ng-model="clusterEntity.clusterModel.cluster._colo" validation-message="{{validations.messages.colo}}"/>
+    <input type="text" class="form-control"
+	ng-pattern="validations.patterns.freeText"
+        ng-required="true" ng-disabled="xmlPreview.edit"
+        ng-model="clusterEntity.clusterModel.cluster._colo" validation-message="{{validations.messages.colo}}"/>
   </div>
-  <div class="col-sm-12">
+  <div class="col-xs-12">
     <label class="light">Description</label>
-    <input type="text" class="form-control" ng-pattern="validations.patterns.freeText"
-           ng-required="true" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.description}}"
-           ng-model="clusterEntity.clusterModel.cluster._description" />
+    <input type="text" class="form-control"
+	ng-pattern="validations.patterns.freeText"
+        ng-required="true" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.description}}"
+        ng-model="clusterEntity.clusterModel.cluster._description" />
   </div>
-  
+
   <div class="col-xs-24">
     <label class="light">Tags</label>
   </div>
-  
+
   <div class="col-xs-24">
-    <div ng-repeat="tag in tagsArray" class="row dynamic-table-spacer">   
+    <div ng-repeat="tag in tagsArray" class="row dynamic-table-spacer">
       <div class="col-xs-10">
         <input type="text" class="form-control" ng-model="tag.key" ng-disabled="xmlPreview.edit" placeholder="key"
-               ng-pattern="validations.patterns.alpha" ng-required="tag.value"/>
+               ng-pattern="validations.patterns.alpha" ng-required="tag.value" validation-optional-message="{{validations.messages.key}}"/>
       </div>
       <div class="col-xs-11">
         <input type="text" class="form-control" ng-disabled="xmlPreview.edit" placeholder="value"
-               ng-model="tag.value" ng-pattern="validations.patterns.alpha" ng-required="tag.key"/>
+               ng-model="tag.value" ng-pattern="validations.patterns.alpha" ng-required="tag.key" validation-optional-message="{{validations.messages.value}}"/>
       </div>
       <div class="col-xs-3">
-        <div class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-disabled="xmlPreview.edit" ng-if="$index>0">
+        <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-disabled="xmlPreview.edit" ng-if="$index>0">
           <span class="entypo minus"></span> delete
-        </div>
+        </button>
       </div>
-    </div>   
+    </div>
   </div>
 
-  <div class="col-sm-24 dynamic-table-spacer">
-    <div class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit">
+  <div class="col-xs-24 mt5">
+    <button type="button" class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit">
       <span class="entypo plus"></span> add tag
-    </div>
+    </button>
   </div>
-  <h4 class="col-sm-24"> Access Control List </h4>
-  <div class="col-sm-8">
+  <h4 class="col-xs-24"> Access Control List </h4>
+  <div class="col-xs-8">
     <label class="light">Owner</label>
-    <input type="text" class="form-control" ng-disabled="xmlPreview.edit" ng-pattern="validations.patterns.unixId"
+    <input type="text" class="form-control" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.acl.owner}}"
+           ng-required="true"
+           ng-pattern="validations.patterns.unixId"
            ng-model="clusterEntity.clusterModel.cluster.ACL._owner"/>
   </div>
-  <div class="col-sm-8">
+  <div class="col-xs-8">
     <label class="light">Group</label>
-    <input type="text" class="form-control" ng-disabled="xmlPreview.edit" ng-pattern="validations.patterns.unixId"
+    <input type="text" class="form-control" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.acl.group}}"
+           ng-required="true"
+           ng-pattern="validations.patterns.unixId"
            ng-model="clusterEntity.clusterModel.cluster.ACL._group"/>
   </div>
-  <div class="col-sm-8">
+  <div class="col-xs-8">
     <label class="light">Permissions</label>
-    <input type="text" class="form-control" ng-disabled="xmlPreview.edit"
+    <input type="text" class="form-control" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.acl.permission}}"
+           ng-required="true"
            ng-pattern="validations.patterns.unixPermissions"
            ng-model="clusterEntity.clusterModel.cluster.ACL._permission"/>
   </div>
-  
-  <h4 class="col-sm-24"> Interfaces </h4> 
+
+  <h4 class="col-xs-24"> Interfaces </h4>
   <label class="col-xs-4">
     Type
   </label>
@@ -96,14 +104,14 @@
   <label class="col-xs-4">
     Version
   </label>
-  <div id="interfaces-detail" class="col-sm-24"
+  <div id="interfaces-detail" class="col-xs-24"
        ng-repeat="_interface in clusterEntity.clusterModel.cluster.interfaces.interface">
     <div class="row">
       <div class="col-xs-4">
-        <label>
+
           <input type="checkbox" ng-checked="registry.check" ng-model="registry.check"
                  ng-if="_interface._type === 'registry'" ng-disabled="xmlPreview.edit"/> {{_interface._type}}
-        </label>
+
       </div>
       <div class="col-xs-16">
         <input type="text" class="form-control" ng-pattern="validations.patterns.osPath"
@@ -123,25 +131,28 @@
   <div ng-repeat="property in clusterEntity.clusterModel.cluster.properties.property">
     <div class="col-xs-7 dynamic-table-spacer">
       <input type="text" class="form-control" ng-model="property._name"
-             ng-pattern="validations.patterns.alpha" ng-disabled="xmlPreview.edit"
+             validation-optional-message="{{validations.messages.name}}"
+             ng-disabled="xmlPreview.edit"
              ng-required="property._value" placeholder="name" />
     </div>
     <div class="col-xs-15 dynamic-table-spacer">
-      <input type="text" class="form-control" ng-model="property._value" ng-pattern="validations.patterns.alpha"
-             ng-disabled="xmlPreview.edit" ng-required="property._name" placeholder="value" />
+      <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="col-xs-2 dynamic-table-spacer">
-      <div class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="$index > 0"
+      <button type="button" class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="$index > 0"
            ng-disabled="xmlPreview.edit">
         <span class="entypo minus"></span> delete
-      </div>
+      </button>
     </div>
     <div class="clearfix hidden-md"></div>
   </div>
   <div class="col-xs-24 dynamic-table-spacer">
-    <div class="btn btn-default btn-xs" ng-click="addProperty()" ng-disabled="xmlPreview.edit">
+    <button type="button" class="btn btn-default btn-xs" ng-click="addProperty()" ng-disabled="xmlPreview.edit">
       <span class="entypo plus"></span> add property
-    </div>
+    </button>
   </div>
 
   <h4 class="col-xs-24"> Location </h4>
@@ -153,49 +164,52 @@
         {{location._name}}
       </div>
       <div class="col-xs-15 dynamic-table-spacer">
-        <input type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.osPath"
+        <input id="location.{{location._name}}" type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.osPath"
                ng-disabled="xmlPreview.edit" ng-required="true" validation-message="{{validations.messages.location}}"/>
       </div>
-      <div class="col-xs-2 dynamic-table-spacer"></div>     
+      <div class="col-xs-2 dynamic-table-spacer"></div>
       <div class="clearfix hidden-md"></div>
     </div>
 
     <div class="row" ng-if="location._name !== 'staging' && location._name !== 'working' && location._name !== 'temp'">
       <div class="col-xs-7 dynamic-table-spacer">
-        <input type="text" class="form-control" ng-model="location._name" ng-pattern="validations.patterns.alpha"
+        <input type="text" class="form-control" ng-model="location._name"
+               validation-optional-message="{{validations.messages.name}}"
+               ng-pattern="validations.patterns.alpha"
                ng-disabled="xmlPreview.edit" ng-required="location._path" placeholder="name" />
       </div>
-      <div class="col-xs-15 dynamic-table-spacer">   
-        <input type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.osPath"
+      <div class="col-xs-15 dynamic-table-spacer">
+        <input type="text" class="form-control" ng-model="location._path"
+               validation-optional-message="{{validations.messages.path}}"
+               ng-pattern="validations.patterns.osPath"
                ng-disabled="xmlPreview.edit" ng-required="location._name" placeholder="path" />
       </div>
       <div class="col-xs-2 dynamic-table-spacer">
-        <div class="btn btn-default btn-xs" ng-click="removeLocation($index)" ng-if="$index>3"
+        <button class="btn btn-default btn-xs" ng-click="removeLocation($index)" ng-if="$index>3"
              ng-disabled="xmlPreview.edit" >
           <span class="entypo minus"></span> delete
-        </div>
-      </div>    
+        </button>
+      </div>
       <div class="clearfix hidden-md"></div>
     </div>
-    
+
   </div>
 
   <div class="col-xs-24 dynamic-table-spacer">
-    <div class="btn btn-default btn-xs" ng-click="addLocation()" ng-disabled="xmlPreview.edit">
+    <button type="button" class="btn btn-default btn-xs" ng-click="addLocation()" ng-disabled="xmlPreview.edit">
       <span class="entypo plus"></span> add location
-    </div>
+    </button>
   </div>
-  <div class="col-xs-24">
-    <div class="row mt20">
-      <div class="btn btn-default col-xs-6 mt10" ui-sref="main">
-        Cancel
-      </div>
-      <div class="btn btn-default col-xs-6 pull-right mt10" ng-disabled="xmlPreview.edit"
-           ng-click="goSummaryStep(clusterForm.$invalid)">
-        Next
-      </div>
+  <div class="col-xs-24 mt20">
+
+    <button id="cluster.step1" class="btn nextBtn pull-right" ng-disabled="xmlPreview.edit || buttonSpinners.show"
+         ng-click="goSummaryStep(clusterForm.$invalid)">
+      Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+    </button>
+    <a class="pull-right" ui-sref="main">
+      Cancel
+    </a>
 
-    </div>
   </div>
 
 </form>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html b/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
index d13b3f5..a7caad9 100644
--- a/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
+++ b/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 -->
-<div class="row clusterSummaryRow">
+<div class="row clusterSummaryRow" id="clusterSummaryStep">
   <div class="col-sm-24">
     <label>Name</label>: {{clusterEntity.clusterModel.cluster._name}}
   </div>
@@ -50,7 +50,7 @@
     Properties
   </h4>
 
-  <div class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.properties.property.length > 0" 
+  <div class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.properties.property.length > 0"
     ng-repeat="property in clusterEntity.clusterModel.cluster.properties.property">
     <label>{{property._name}}</label>: {{property._value}}
   </div>
@@ -65,13 +65,23 @@
 </div>
 
 
-<div class="row clusterSummaryRow mt20">
-  <div class="btn btn-default col-xs-6" ui-sref="forms.cluster.general" ng-click="goGeneralStep()">
-    Previous
-  </div>
+<div class="row clusterSummaryRow">
+  <div class="col-xs-24 mt20">
+    <button id="cluster.backToStep1"
+         class="btn prevBtn"
+         ui-sref="forms.cluster.general"
+         ng-click="goGeneralStep()"
+         ng-disabled="buttonSpinners.backShow">
+      Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
+    </button>
 
-  <div class="btn btn-default col-xs-6 pull-right" ng-click="saveCluster()" ng-disabled="xmlPreview.edit">
-    Save
-  </div>
+    <button id="cluster.step2" class="btn btn-default nextBtn pull-right"
+         ng-click="saveCluster()" ng-disabled="xmlPreview.edit || buttonSpinners.show">
+      Save <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+    </button>
 
+    <a class="pull-right" ui-sref="main">
+      Cancel
+    </a>
+  </div>
 </div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/cluster/clusterFormTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/cluster/clusterFormTpl.html b/falcon-ui/app/html/cluster/clusterFormTpl.html
index 4da4cf6..1a65172 100644
--- a/falcon-ui/app/html/cluster/clusterFormTpl.html
+++ b/falcon-ui/app/html/cluster/clusterFormTpl.html
@@ -17,55 +17,67 @@
  * limitations under the License.
  */
 -->
-<div class="col-sm-24 clusterForm">
-  <div class="col-sm-22 col-sm-offset-2">
+<div class="col-xs-22 col-xs-offset-1 clusterForm" id="clusterForm">
+  <div class="col-xs-24">
     <div class="row">
-      <h3 class="col-sm-24">
-        New Cluster
+
+      <h3 id="cluster.title" class="col-xs-24">
+        <span class="entypo archive icon-lg"></span> New Cluster
       </h3>
-      <div class="col-sm-15 detailsBox">
-        <div class="clusterProgressBox" ng-class="{summary:secondStep===true}">        
-          <div class="progressBar col-md-24">
-            <div>
+
+      <div ng-class="{'col-xs-12' : propsOpen, 'col-xs-20' : !propsOpen}">
+        <div class="detailsBox">
+          <div class="clusterProgressBox" ng-class="{summary:secondStep===true}">
+            <div class="progressBar col-xs-24">
+              <div>
               <span>
-                <div>1<span class="entypo check"></span></div>              
+                <div>1<span class="entypo check"></span></div>
                 <h6>General</h6>
               </span>
               <span>
                 <div>2</div>
                 <h6>Summary</h6>
               </span>
-            </div>           
+              </div>
+            </div>
           </div>
-        </div>      
-        <div class="row">
-          <div class="col-xs-offset-1 col-xs-22" ui-view></div>
-        </div>        
+          <div class="row">
+            <div class="col-xs-offset-1 col-xs-22" ui-view></div>
+          </div>
+        </div>
       </div>
 
-      <div class="col-sm-8 detailsBox col-sm-offset-1">
-        <div class="row">
-         
-          <h5 class="col-xs-13 col-xs-offset-1 noSpecial">XML Preview</h5>  
-    
-          <div class="col-xs-9">
-            <div class="btn btn-default btn-xs pull-right" ng-click="xmlPreview.editXML()" ng-class="{'btn-warning':xmlPreview.edit}">
-              Edit XML
+      <div ng-class="{'col-xs-12' : propsOpen, 'col-xs-4' : !propsOpen}">
+        <div class="detailsBox">
+          <div class="row">
+
+            <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>
-          </div>
-        
-          <div class="col-xs-24">
-            <div class="row">
-              <div class="col-xs-22 col-xs-offset-1">
-                <textarea ng-model="prettyXml" rows="35" class="form-control" ng-disabled="!xmlPreview.edit">
-                </textarea>
+
+            <div ng-if="propsOpen" class="col-xs-9">
+              <button type="button"
+                      id="cluster.editXML"
+                      class="btn btn-default btn-xs pull-right"
+                      ng-click="xmlPreview.editXML()"
+                      ng-class="{'btn-warning':xmlPreview.edit}">
+                <div ng-if="!xmlPreview.edit">Edit XML</div>
+                <div ng-if="xmlPreview.edit">Finish</div>
+              </button>
+            </div>
+
+            <div ng-show="propsOpen" class="col-xs-24">
+              <div class="row">
+                <div class="col-xs-22 col-xs-offset-1">
+                  <textarea ng-model="prettyXml" elastic class="form-control prettyXml" ng-disabled="!xmlPreview.edit"></textarea>
+                </div>
               </div>
             </div>
+
           </div>
-          
         </div>
       </div>
-      
+
     </div>
   </div>
 </div>
\ No newline at end of file


Mime
View raw message