falcon-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From peeyu...@apache.org
Subject [14/16] falcon git commit: FALCON-2118 Proposal for new UI changes
Date Mon, 22 Aug 2016 04:48:07 GMT
http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/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 2be45af..5f5c197 100644
--- a/falcon-ui/app/css/styles/nav-header.less
+++ b/falcon-ui/app/css/styles/nav-header.less
@@ -19,17 +19,41 @@
 //---------navHeader----------------------//
 
 .navbar {
-  z-index: 2;
-  background-color: @headerNavBG;
+  /*z-index: 2;*/
   margin: 0;
   color: white;
-  padding: 5px 0;
+  /*padding: 5px 0;*/
   border-width: 0;
   border-radius: 0;
-  position: relative;
+  /*position: relative;*/
   &:hover{
     cursor: default;
   }
+  &.header1 {
+    background-color: @headerNavBG;
+    .loginHeaderBox {
+      /*position: relative;
+      top: 50%;*/
+      /*transform: translateY(80%);*/
+      .btn-link {
+        color: @green-light !important;
+        padding-top: 12px;
+        text-align: left;
+        /*height: 40px;*/
+        &:hover {
+          color: @green-light;
+        }
+      }
+    }
+  }
+  &.header2 {
+    min-height: 42px;
+    background-color: @header2NavBG;
+  }
+  &.header3 {
+    min-height: 32px;
+    background-color: @header3NavBG;
+  }
 }
 .logoTitle {
   background: transparent;
@@ -40,14 +64,14 @@
     display: inline-block;
   }
   .falconLogo{
-    background: url(img/falcon.png) no-repeat center center;
+    background: url(img/falcon-logo.jpg) no-repeat center center;
     background-size: 100%;
-    width: 30px;
-    height: 44px;
+    width: 100px;
+    height: 72px;
   }
 }
 .navbar-header {
-  margin: 5px 15px 5px 5px;
+  margin: 6px;
   font-size: 30px;
   cursor: pointer;
   font-weight: bolder;
@@ -58,23 +82,35 @@
 
 .createNavWrapper, .uploadNavWrapper {
   float: left;
-  margin: 0 10px;
-  > h4 {
+  padding-top:9px;
+  /*margin: 0 10px;*/
+  /*> h4 {
     font-size: 14px;
     font-weight: bold;
     margin: 2px 0;
-  }
-  > button {
-    padding: 5px 10px;
-    border: 1px solid white;
-    border-radius: 3px;
+  }*/
+  button {
+    border: none;
+    /*border: 1px solid white;*/
+    /*border-radius: 3px;*/
     display: inline-block;
     cursor: pointer;
     background-color: transparent;
+    color: @green-light;
+    &:hover {
+      color: #FFFFFF;
+    }
+    &.btn-link {
+      text-decoration: none;
+      color: @green-light;
+      height: 24px;
+      padding-top: 1px;
+    }
   }
   span {
     vertical-align: middle;
-    margin-right: 6px;
+    /*margin-right: 6px;*/
+    font-size: 13px;
     &.entypo, &.glyphicon{
       vertical-align: sub;
       &.up{
@@ -82,56 +118,111 @@
       }
     }
   }
-  .disabled {
-    //color: lighten(@headerNavBG, 30%);
-    //border-color: lighten(@headerNavBG, 10%);
-    cursor: default;
-    .background-opacity(black, 0.2);
+  ul.dropdown-menu {
+    border:none;
+    margin: 0px;
+    border-radius: inherit;
+    color: @green-light;
   }
 }
+
+/*.createNavWrapper {
+  position: relative;
+  left: -80px;
+  top: 25px;
+  height: 60px;
+  margin: 10px 0px 5px;
+}*/
+
+/** Deprecated */
 .uploadNavWrapper {
+  /*height: 35px;*/
   > div {
-    min-width:183px;
-    padding: 5px 10px;
-    border: 1px solid white;
+    width: 120px;
+    height: 20px;
+    float: left;
+    margin-right: 5px;
+    /*padding: 5px 10px;*/
     border-radius: 3px;
-    display: inline-block;
+    /*display: inline-block;*/
     cursor: pointer;
-    &.fakeFocus {
+    background-size: 100%;
+    background: 50% no-repeat;
+    /*&.fakeFocus {
       .box-shadow(0 0 2px white);
+    }*/
+    .btn-upload, .btn-create {
+      width: 120px;
+      color: @white;
+      background-color: @green-light;
+      height: 27px;
     }
   }
 }
+
 .loginHeaderBox {
-  margin: 0;
-  display: inline-block;
+  /*margin: 0;
+  display: inline-block;*/
   //width: 100%;
-  text-align: right;
-  margin-top: 10px;
+  /*float: right;*/
+  /*margin-top: 20px;*/
+  color: @green-light;
+  position: absolute;
+  right: 1%;
+  top: 25px;
+  font-size: 18px;
 
-  .pull-right;
-  >*{
+  /*.pull-right;*/
+  /*>* {
     vertical-align: middle;
     display: inline-block;
-    margin-right: 10px;
+    margin-right: 3px;
     >*{
       display: inline-block;
       vertical-align: middle;
     }
+  }*/
+  .dropdown-toggle {
+    padding-left: 6px;
+  }
+
+  .btn-link {
+    padding: 6px 3px;
+    color: @green-light;
+    text-decoration: none;
+    &:hover {
+      color: #FFFFFF;
+    }
+    .glyphicon {
+      font-size: 1.1em;
+    }
   }
   span.entypo{
     vertical-align: sub;
   }
-  span.user{
+  /*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;
+  }*/
   button {
+    padding: 5px 10px;
     border: none;
+    /*border: 1px solid white;*/
+    /*border-radius: 3px;*/
+    display: inline-block;
     cursor: pointer;
     background-color: transparent;
+    color: @green-light;
+    &:hover {
+      color: #FFFFFF;
+    }
   }
   a {
     color: white;
@@ -145,6 +236,14 @@
       text-decoration: none;
     }
   }
+  ul.dropdown-menu {
+    border:none;
+    margin: 0px;
+    border-radius: inherit;
+    color: @green-light;
+    text-align: center;
+
+  }
 }
 
 /* NOTIFICATIONS */
@@ -152,26 +251,29 @@
 .notifications .messages {
   display:none;
   position: absolute;
-  top:50px;
-  right:0px;
-  width:280px;
-  max-width:280px;
+  top:35px;
+  right:7%;
+  width:400px;
+  max-width:400px;
   max-height:300px;
   overflow: auto;
+  border: 1px solid @green-light;
+  background-color: white;
+  z-index: 1000;
 }
 
 .messagesArrow {
   content:'.';
   display:none;
   position:absolute;
-  margin-left:-10px;
-  top:30px;
-  right:130px;
+  margin-left:49px;
+  top: 17px;
+  /*right: 166px;*/
   width:0;
   height:0;
-  color:transparent;
+  color:@green-light;
   border:10px solid black;
-  border-color:transparent transparent white;
+  border-color:transparent transparent @green-light;
 }
 
 .notifications .messages:before {
@@ -201,6 +303,16 @@
   padding:10px;
   background-color:white;
   text-decoration:none;
+  font-size:14px;
+  // white-space:nowrap;
+  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
+  white-space: -webkit-pre-wrap; /*Chrome & Safari */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  white-space: pre-wrap;       /* css-3 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+  word-break: break-all;
+  white-space: normal;
   a {
     font-weight: bold;
     text-decoration: underline;
@@ -236,5 +348,17 @@
 }
 
 .unreaded-notif {
-  background-color: #EDEDED !important;
-}
\ No newline at end of file
+  background-color: #e6ece1 !important;
+}
+
+.notification-icon {
+  top: 0px;
+}
+
+.listing-icon {
+  top: -1px;
+}
+
+.settings-icon {
+  top: 0px;
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/ng-tags-input.bootstrap.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/ng-tags-input.bootstrap.less b/falcon-ui/app/css/styles/ng-tags-input.bootstrap.less
new file mode 100755
index 0000000..0e9de7a
--- /dev/null
+++ b/falcon-ui/app/css/styles/ng-tags-input.bootstrap.less
@@ -0,0 +1,167 @@
+tags-input {
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  min-height: 34px;
+}
+tags-input .host {
+  margin: 0;
+}
+tags-input .tags {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+tags-input .tags .tag-item {
+  margin-right: 3px;
+  color: white;
+  background: #428bca;
+  border: 1px solid #357ebd;
+  border-radius: 4px;
+}
+tags-input .tags .tag-item.selected {
+  color: white;
+  background: #d9534f;
+  border: 1px solid #d43f3a;
+}
+tags-input .tags .tag-item .remove-button:hover {
+  text-decoration: none;
+}
+tags-input .tags.focused {
+  border: 1px solid #66afe9;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+tags-input .autocomplete {
+  border-radius: 4px;
+}
+tags-input .autocomplete .suggestion-item.selected {
+  color: #262626;
+  background-color: whitesmoke;
+}
+tags-input .autocomplete .suggestion-item.selected em {
+  color: #262626;
+  background-color: whitesmoke;
+}
+tags-input .autocomplete .suggestion-item em {
+  color: black;
+  background-color: white;
+}
+tags-input.ng-invalid .tags {
+  border-color: #843534;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+}
+
+.input-group tags-input {
+  padding: 0;
+  display: table-cell;
+}
+.input-group tags-input:not(:first-child) .tags {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.input-group tags-input:not(:last-child) .tags {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group-lg tags-input:first-child .tags {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.input-group-lg tags-input:last-child .tags {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.input-group-sm tags-input:first-child .tags {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.input-group-sm tags-input:last-child .tags {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+tags-input.ti-input-lg, .input-group-lg tags-input {
+  min-height: 46px;
+}
+tags-input.ti-input-lg .tags, .input-group-lg tags-input .tags {
+  border-radius: 6px;
+}
+tags-input.ti-input-lg .tags .tag-item, .input-group-lg tags-input .tags .tag-item {
+  height: 38px;
+  line-height: 37px;
+  font-size: 18px;
+  border-radius: 6px;
+}
+tags-input.ti-input-lg .tags .tag-item .remove-button, .input-group-lg tags-input .tags .tag-item .remove-button {
+  font-size: 20px;
+}
+tags-input.ti-input-lg .tags .input, .input-group-lg tags-input .tags .input {
+  height: 38px;
+  font-size: 18px;
+}
+tags-input.ti-input-sm, .input-group-sm tags-input {
+  min-height: 30px;
+}
+tags-input.ti-input-sm .tags, .input-group-sm tags-input .tags {
+  border-radius: 3px;
+}
+tags-input.ti-input-sm .tags .tag-item, .input-group-sm tags-input .tags .tag-item {
+  height: 22px;
+  line-height: 21px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+tags-input.ti-input-sm .tags .tag-item .remove-button, .input-group-sm tags-input .tags .tag-item .remove-button {
+  font-size: 16px;
+}
+tags-input.ti-input-sm .tags .input, .input-group-sm tags-input .tags .input {
+  height: 22px;
+  font-size: 12px;
+}
+
+.has-feedback tags-input .tags {
+  padding-right: 30px;
+}
+
+.has-success tags-input .tags {
+  border-color: #3c763d;
+}
+.has-success tags-input .tags.focused {
+  border-color: #2b542c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+}
+
+.has-error tags-input .tags {
+  border-color: #a94442;
+}
+.has-error tags-input .tags.focused {
+  border-color: #843534;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+}
+
+.has-warning tags-input .tags {
+  border-color: #8a6d3b;
+}
+.has-warning tags-input .tags.focused {
+  border-color: #66512c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/ng-tags-input.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/ng-tags-input.less b/falcon-ui/app/css/styles/ng-tags-input.less
new file mode 100644
index 0000000..69b1480
--- /dev/null
+++ b/falcon-ui/app/css/styles/ng-tags-input.less
@@ -0,0 +1,134 @@
+tags-input {
+  display: block;
+  height: 35px;
+}
+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: 3px 1px 1px 1px;
+  overflow: hidden;
+  word-wrap: break-word;
+  cursor: text;
+  background-color: transparent;
+  border: 1px solid @search-box-border;
+  //  box-shadow: 1px 1px 1px 0 lightgray inset;
+  height: 80%;
+  padding-left: 10px;
+  overflow-y: auto;
+}
+//tags-input .tags.focused {
+tags-input .tags {
+  outline: none;
+  background-color: #fff;
+}
+tags-input .tags .tag-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+tags-input .tags .tag-item {
+  margin-right: 3px;
+  padding: 0px 5px;
+  margin-right : 3px;
+  margin-bottom: 3px;
+  display: inline-block;
+  float: left;
+  font: 13px Arial, sans-serif;
+  height: 19px;
+  background: -webkit-linear-gradient(top, #F89406 0%, #F89406 47%, #F89406 100%);
+  background: linear-gradient(to bottom, #F89406 0%, #F89406 47%, #F89406 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 Arial, sans-serif;
+  color: #585858;
+}
+tags-input .tags .tag-item .remove-button:active {
+  color: red;
+}
+tags-input .tags .input {
+  border: 0;
+  outline: none;
+  padding: 0;
+  padding-left: 5px;
+  float: left;
+  min-width: 65px !important;
+  background: transparent;
+  color: @search-input-color;
+}
+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 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 Arial, sans-serif;
+  color: black;
+  background-color: white;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/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
index 4218bc2..1de56c4 100644
--- a/falcon-ui/app/css/styles/popover.less
+++ b/falcon-ui/app/css/styles/popover.less
@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 @popover-bg-color: #fff;
+@popover-text-color: #000;
+@popover-header-color: #777;
 @popover-border-color: #d2d2d2;
 
 @popover-triangle-size: 11px;
@@ -141,7 +143,7 @@
   box-sizing: border-box;
   z-index: 100;
   background-color: transparent;
-
+  color: @popover-text-color;
   .ns-popover-tooltip {
     box-sizing: border-box;
     border: solid 1px @popover-border-color;
@@ -157,7 +159,7 @@
     h5 {
       font-weight: bold;
       font-size: 16px;
-      color: #777;
+      color: @popover-header-color;
     }
 
     ul {

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/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 5f0ad01..c20eaf9 100644
--- a/falcon-ui/app/css/styles/progress-bar.less
+++ b/falcon-ui/app/css/styles/progress-bar.less
@@ -19,18 +19,19 @@
 //---------------------------------//
 //---------progress Bar------------//
 //---------------------------------//
+/*
 .progressBar {
   overflow: hidden;
   padding: 10px 35px;
   .entypo {
-    /*float: none!important;
+    /!*float: none!important;
     position: absolute;
     margin: 0!important;
     top:0;
-    left:0;*/
-   /* line-height: 36px;
+    left:0;*!/
+   /!* line-height: 36px;
     height: 36px;
-    width: 36px;*/
+    width: 36px;*!/
 
     color: white;
     z-index:2;
@@ -310,4 +311,35 @@
       background-color: @gray-dark;
     }
   }
-}
\ No newline at end of file
+}*/
+.feedProgressBox, .clusterProgressBox, .processProgressBox, .datasetProgressBox,
+.snapshotProgressBox, .datasourceProgressBox {
+  .progressBar {
+    padding: 0px;
+    > div {
+      width: 19%;
+      margin-left: 1%;
+      float: left;
+      height: 32px;
+      border: 1px solid @progress-div-border;
+      border-bottom:1px solid @progress-div-bottom-border;
+      line-height: 32px;
+      font-size: 110%;
+      border-radius: 5px 5px 0px 0px;
+      color: @progress-div-color;
+      &.completed {
+        background-color: @progress-div-completed-bg;
+        color: @progress-div-completed-color;
+        border-color: @gray-lightest;
+        border-bottom: @progress-div-bottom-border;
+      }
+      &.active {
+        background-color: @progress-div-active-bg;
+        color: @progress-div-active-color;
+      }
+      &.fir {
+        margin-left: 0.5%;
+      }
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/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 0ab7d13..9737597 100644
--- a/falcon-ui/app/css/styles/server-messages.less
+++ b/falcon-ui/app/css/styles/server-messages.less
@@ -79,3 +79,16 @@
   text-align: center;
   margin: 10px 0;
 }
+
+.notif-close {
+  height: 15px;
+}
+
+.notif-close .close{
+  padding: 0px;
+  padding-right: 5px;
+}
+
+.notif-close .close:hover, .close:focus {
+  color: #4c8c1b;
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/snapshot-form.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/snapshot-form.less b/falcon-ui/app/css/styles/snapshot-form.less
new file mode 100644
index 0000000..a2532a8
--- /dev/null
+++ b/falcon-ui/app/css/styles/snapshot-form.less
@@ -0,0 +1,52 @@
+/**
+ * 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.
+ */
+
+#snapshotFormGeneralStep {
+  .clusterBox {
+      border: 1px solid #aaa;
+      border-left: 0;
+      border-right: 0;
+      padding: 10px 0px 15px;
+      margin-left: 5px;
+      margin: 35px 10px 10px 0px;
+      border-radius: 0px;
+
+      h3, .runJobOnBox {
+        color: inherit;
+        background-color: #FFFFFF;
+        border: 1px solid #aaa;
+        border-radius: 0px;
+        padding: 6px 6px;
+      }
+
+      h3 {
+        border: none;
+        top: -47px;
+        font-size: 13px;
+      }
+  }
+}
+
+.bandwidth-label {
+  margin-top: 5px !important;
+}
+
+.snapshotForm hr {
+  margin-top: 10px;
+  margin-bottom: 0;
+}

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/styles/white.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/white.less b/falcon-ui/app/css/styles/white.less
new file mode 100644
index 0000000..c4e34cc
--- /dev/null
+++ b/falcon-ui/app/css/styles/white.less
@@ -0,0 +1,65 @@
+@body-bg: @white;
+@header1Border: @green-light;
+@header2NavBG: @green-lighter;
+@header3NavBG: @white;
+
+/** Menu */
+/*
+@header-menu-color: @green-light;
+*/
+
+/** Search */
+@search-box-border: @green-light;
+@search-input-color: @green-light;
+@search-icon-color: @green-light;
+
+/** Search:Popover */
+@popover-text-color: @green-light;
+@popover-header-color: @green-lighter;
+
+/* Entity Detail Screen */
+@entity-detail-background-color: @white;
+
+/* Detail Screen */
+@detail-header-color: @green-light;
+@detail-header-button-background-color: @green-lighter;
+@detail-background-color: @white;
+@detail-border-color: @green-light;
+@detail-color: @green-light;
+
+/* Lineage Graph*/
+@lineage-path-stroke-color: @green-light;
+@lineage-rect-fill-color: @green-lighter;
+@lineage-rect-stroke-color: @green-light;
+@lineage-node-text-color: @green-light;
+@lineage-marker-fill-color: @green-light;
+
+/* Controls */
+@input-background-color:@gray-light; /* light gray for table instance  */
+@input-color: @white;
+@form-input-background-color: @cool-gray;
+@details-box-dt-bg : @cool-gray;
+@form-box-clusterBox-runJobOnBox : @cool-gray;
+@form-table-color :@green-light;
+@details-form-border :@green-light;
+@progress-div-bottom-border : transparent;
+@progress-div-completed-bg: @green-lighter;
+
+/** Table */
+@table-header-color: @green-light;
+@table-header-background-color: @green-lighter;
+@table-border-color: @green-light;
+@table-header-border-color: @green-light;
+@table-header-border-width: 0px 0px 1px;
+@table-header-button-color: @gray-dark;
+@table-header-button-hover-color: @green-light;
+@table-cell-color:              #000;
+@table-cell-hover-color:        @gray-dark;
+@table-row-selected-background-color: @green-lighter;
+@table-inactive-bg: @green-lighter;
+
+/** Pagination */
+@pagination-active-bg:                 @white;
+@pagination-active-color:              @green-light;
+@pagination-disabled-bg:               @green-light;
+@pagination-disabled-color:            @white;

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/variables.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/variables.less b/falcon-ui/app/css/variables.less
index f1c81ab..ccec3c7 100644
--- a/falcon-ui/app/css/variables.less
+++ b/falcon-ui/app/css/variables.less
@@ -23,13 +23,20 @@
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.
+@white: #FFFFFF;
 
 @gray-darker:            lighten(#000, 13.5%); // #222
 @gray-dark:              lighten(#000, 20%);   // #333
 @gray:                   lighten(#000, 33.5%); // #555
+@gray-lightest:           lighten(#000, 40%); // #666
 @gray-light:             lighten(#000, 46.7%); // #777
-@gray-light2:             lighten(#000, 65%); 
+@gray-light2:            lighten(#000, 65%);
 @gray-lighter:           lighten(#000, 93.5%); // #eee
+@gray-darken:           #232323;
+@cool-gray :			#aaaaaa;
+
+@green-light:           #69BE28;
+@green-lighter:         lighten(#69BE28, 40%);
 
 @brand-primary:         #428bca;
 @brand-success:         #5cb85c;
@@ -37,13 +44,64 @@
 @brand-warning:         #f0ad4e;
 @brand-danger:          #d9534f;
 
-@headerNavBG: #69BE28;
+
+@headerNavBG: @white;
+@header1Border: @white;
+@header2Border: @green-light;
+@header2NavBG: @green-light;
+@header3NavBG: @gray-dark;
+
+@search-box-border: @white;
+@search-input-color: @white;
+@search-icon-color: @white;
+/*@search-bar-background: #676567;*/
+
+/*
+@header-menu-color: #000;
+@header-menu-background-color: transparent;
+*/
+
+/* Entity Detail Screen */
+@entity-detail-background-color: @gray-darken;
+
+/* Detail Screen */
+@detail-header-color: @white;
+@detail-header-button-background-color: @gray;
+@detail-background-color: @gray-dark;
+@detail-border-color: @gray-lightest;
+@detail-color: @white;
+
+/* Lineage Graph*/
+@lineage-path-stroke-color: @white;
+@lineage-rect-fill-color: @gray-light;
+@lineage-rect-stroke-color: @white;
+@lineage-node-text-color: @white;
+@lineage-marker-fill-color: @white;
+
+/* Controls */
+@input-color: @white;
+@input-background-color: @gray-dark;
+
+@form-input-background-color: @gray-dark;
+@details-box-dt-bg : @gray-darken;
+@progress-div-active-bg:@green-light;
+@progress-div-active-color: @gray-darken;
+@progress-div-completed-bg :@gray-dark;
+@progress-div-completed-color: @gray-lightest;
+@progress-div-border : @green-light;
+@progress-div-color : @green-light;
+@form-label-color: @detail-color;
+@form-nxt-btn: @green-light;
+@form-box-clusterBox-runJobOnBox:@gray-dark;
+@form-table-color: @white;
+@details-form-border: transparent;
+@progress-div-bottom-border: @progress-div-border;
 //== Scaffolding
 //
 //## Settings for some of the most global styles.
 
 //** Background color for `<body>`.
-@body-bg:               #fff;
+@body-bg:               @gray-darken;
 //** Global text color on `<body>`.
 @text-color:            @gray-dark;
 
@@ -57,7 +115,7 @@
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-@font-family-sans-serif:  cabin, Arial, sans-serif;
+@font-family-sans-serif:  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;
@@ -93,7 +151,7 @@
 //** Load fonts from this directory.
 @icon-font-path:          "fonts/";
 //** File name for all font files.
-@icon-font-name:          "glyphicons-halflings-regular"; 
+@icon-font-name:          "glyphicons-halflings-regular";
 //** Element ID within SVG icon file.
 @icon-font-svg-id:        "glyphicons_halflingsregular";
 
@@ -137,12 +195,17 @@
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
 //** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            8px;
+@table-cell-padding:            5px;
+@table-cell-color:              @white;
+@table-cell-hover-color:        @white;
+
+@table-row-selected-background-color: @gray-dark;
 //** Padding for cells in `.table-condensed`.
 @table-condensed-cell-padding:  5px;
 
 //** Default background color used for all tables.
 @table-bg:                      transparent;
+@table-inactive-bg:             #000;
 //** Background color used for `.table-striped`.
 @table-bg-accent:               #f9f9f9;
 //** Background color used for `.table-hover`.
@@ -150,8 +213,14 @@
 @table-bg-active:               @table-bg-hover;
 
 //** Border color for table and cell borders.
-@table-border-color:            #ddd;
+@table-border-color:            transparent;
 
+@table-header-border-width: 0px 1px 1px;
+@table-header-border-color: @gray-dark;
+@table-header-color: @white;
+@table-header-background-color: @gray-dark;
+@table-header-button-color: @white;
+@table-header-button-hover-color: @white;
 
 //== Buttons
 //
@@ -453,12 +522,12 @@
 @pagination-hover-bg:                  @gray-lighter;
 @pagination-hover-border:              #ddd;
 
-@pagination-active-color:              #fff;
-@pagination-active-bg:                 @brand-primary;
+@pagination-active-color:              @white;
+@pagination-active-bg:                 @gray-dark;
 @pagination-active-border:             @brand-primary;
 
 @pagination-disabled-color:            @gray-light;
-@pagination-disabled-bg:               #fff;
+@pagination-disabled-bg:               @gray-dark;
 @pagination-disabled-border:           #ddd;
 
 
@@ -617,7 +686,7 @@
 //
 //## Define alert colors, border radius, and padding.
 
-@alert-padding:               5px; 
+@alert-padding:               5px;
 @alert-border-radius:         @border-radius-base;
 @alert-link-font-weight:      bold;
 
@@ -860,5 +929,3 @@
 @dl-horizontal-offset:        @component-offset-horizontal;
 //** Horizontal line color.
 @hr-border:                   @gray-lighter;
-
-

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/css/white-theme.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/white-theme.less b/falcon-ui/app/css/white-theme.less
new file mode 100644
index 0000000..4dbfbd9
--- /dev/null
+++ b/falcon-ui/app/css/white-theme.less
@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+// Core variables and mixins
+@import "main.less";
+@import "styles/white.less";

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/authenticating.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/authenticating.html b/falcon-ui/app/html/authenticating.html
index 8706322..9599249 100644
--- a/falcon-ui/app/html/authenticating.html
+++ b/falcon-ui/app/html/authenticating.html
@@ -26,7 +26,7 @@
       <div class="col-sm-12">
 
         <div class="col-sm-15 detailsBox centered">
-          <h3>Authenticating...</h3>
+          <h3 class="auth">Authenticating...</h3>
         </div>
 
       </div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/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 8d76c90..cc592b2 100644
--- a/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
+++ b/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
@@ -18,29 +18,30 @@
  */
 -->
 <form novalidate name="clusterForm" id="clusterGeneralStep">
-  <div class="col-xs-24">
-    <label class="light">Name</label>
-    <input type="text" class="form-control nameInput"
+  <div class="col-xs-8">
+    <label class="light" tooltip="cluster.name">Cluster Name<mandatory-field></mandatory-field></label>
+    <input type="text" class="form-control nameInput" ng-disabled="editingMode"
 	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-name="{type:'cluster', check:!editingMode}"
+        ng-class="{fakeInvalid:!validations.nameAvailable}"
+        ng-disabled="xmlPreview.edit"/>
         <!--check-type="cluster" check-name-flag="nameValid" check="true"-->
 
   </div>
-  <div class="col-xs-12">
-    <label class="light">Colo</label>
+  <div class="col-xs-16">
+    <label class="light" tooltip="cluster.colo">Data Center or Colo Name<mandatory-field></mandatory-field></label>
     <input type="text" class="form-control"
-	ng-pattern="validations.patterns.freeText"
+	ng-pattern="validations.patterns.name"
         ng-required="true" ng-disabled="xmlPreview.edit"
         ng-model="clusterEntity.clusterModel.cluster._colo" validation-message="{{validations.messages.colo}}"/>
   </div>
-  <div class="col-xs-12">
+  <div class="col-xs-24">
     <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-disabled="xmlPreview.edit"
+        ng-pattern="validations.patterns.freeText"
         ng-model="clusterEntity.clusterModel.cluster._description" />
   </div>
 
@@ -50,166 +51,207 @@
 
   <div class="col-xs-24">
     <div ng-repeat="tag in tagsArray" class="row dynamic-table-spacer">
-      <div class="col-xs-10">
+      <div class="col-xs-8">
         <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" validation-optional-message="{{validations.messages.key}}"/>
       </div>
-      <div class="col-xs-11">
+      <div class="col-xs-8">
         <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" validation-optional-message="{{validations.messages.value}}"/>
       </div>
-      <div class="col-xs-3">
-        <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-disabled="xmlPreview.edit" ng-if="$index>0">
+      <div class="col-xs-8">
+        <button type="button" class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-disabled="xmlPreview.edit" ng-if="!$first || !$last">
           <span class="entypo minus"></span> delete
         </button>
+        <button type="button" class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit" ng-if="$last">
+          <span class="entypo plus"></span> add tag
+        </button>
       </div>
     </div>
   </div>
 
-  <div class="col-xs-24 mt5">
-    <button type="button" class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit">
-      <span class="entypo plus"></span> add tag
-    </button>
-  </div>
-  <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" 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-xs-8">
-    <label class="light">Group</label>
-    <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-xs-8">
-    <label class="light">Permissions</label>
-    <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-xs-24"> Interfaces </h4>
-  <label class="col-xs-4">
+  <div class="col-xs-24"><label class="mt15">INTERFACES</label></div>
+  <div class="col-xs-24 plr0px">
+    <label class="col-xs-6">
     Type
-  </label>
-  <label class="col-xs-16">
+    </label>
+    <label class="col-xs-10">
     Endpoint
-  </label>
-  <label class="col-xs-4">
-    Version
-  </label>
-  <div id="interfaces-detail" class="col-xs-24"
+    </label>
+    <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">
+      <div class="col-xs-6">
 
           <input type="checkbox" ng-checked="registry.check" ng-model="registry.check"
-                 ng-if="_interface._type === 'registry'" ng-disabled="xmlPreview.edit"/> {{_interface._type}}
+                 ng-if="_interface._type === 'registry'" ng-disabled="xmlPreview.edit"/>
+         <input type="checkbox" ng-checked="spark.check" ng-model="spark.check"
+                ng-if="_interface._type === 'spark'" ng-disabled="xmlPreview.edit"/>
+          <label class="light font11px pt5px" tooltip="cluster.interfaces.{{_interface._type}}">{{clusterInterfaceLabels(_interface._type)}}</label>
 
       </div>
-      <div class="col-xs-16">
-        <input type="text" class="form-control" ng-pattern="validations.patterns.osPath"
+      <div class="col-xs-10">
+        <input id="interface.{{_interface._type}}" type="text" class="form-control" ng-pattern="validations.patterns.interfaceEndpoints"
                ng-model="_interface._endpoint"
-               ng-disabled="_interface._type === 'registry' && !registry.check || xmlPreview.edit"/>
-      </div>
-      <div class="col-xs-4">
-        <input type="text" class="form-control" ng-pattern="validations.patterns.versionNumbers"
-               ng-disabled="(_interface._type === 'registry' && !registry.check) || xmlPreview.edit"
-               ng-model="_interface._version">
+               ng-required="true"
+               validation-optional-message="{{validations.messages.interfaceEndpoints}}"
+               ng-disabled="xmlPreview.edit" interface-endpoint
+               ng-if="_interface._type !== 'registry' && _interface._type !== 'spark'"/>
+        <input id="interface.{{upperCase(_interface._type)}}" type="text" class="form-control" ng-pattern="validations.patterns.interfaceEndpoints"
+               ng-model="_interface._endpoint" ng-required="registry.check" validation-optional-message="{{validations.messages.interfaceEndpoints}}"
+               ng-disabled="_interface._type === 'registry' && !registry.check || xmlPreview.edit" interface-endpoint
+               ng-if="_interface._type === 'registry'"/>
+
+        <div class="col-xs-24 plr0px" ng-if="_interface._type === 'spark'">
+          <input type="radio" name="sparkInterface" value="yarn-cluster" ng-model="_interface._endpoint"
+              ng-disabled="(_interface._type === 'spark' && !spark.check) || xmlPreview.edit"/>
+          Yarn Cluster
+          <input type="radio" name="sparkInterface" class="ml20" value="yarn-client" ng-model="_interface._endpoint"
+              ng-disabled="(_interface._type === 'spark' && !spark.check) || xmlPreview.edit"/>
+          Yarn Client
+          <input type="radio" name="sparkInterface" class="ml20" value="local" ng-model="_interface._endpoint"
+              ng-disabled="(_interface._type === 'spark' && !spark.check) || xmlPreview.edit"/>
+          Local
+
+          <input type="radio" name="sparkInterface" class="ml20"
+              value="local[*]" ng-model="_interface._endpoint"
+              ng-disabled="(_interface._type === 'spark' && !spark.check) || xmlPreview.edit"/>
+          Custom
+          <input id="interface.{{_interface._type}}" type="text"
+                ng-model="_interface._endpoint"
+                ng-required="spark.check"
+                ng-if="!(_interface._endpoint==='yarn-cluster' || _interface._endpoint==='yarn-client' || _interface._endpoint==='local')"
+                validation-optional-message="{{validations.messages.interfaceEndpoints}}"
+                ng-disabled="(_interface._type === 'spark' && !spark.check) || xmlPreview.edit" interface-endpoint
+                title="Custom spark url like local[*],local[1] etc."/>
+        </div>
       </div>
     </div>
-  </div>
-
-  <h4 class="col-xs-24"> Properties </h4>
-  <label class="col-xs-7">name</label><label class="col-xs-17">value</label>
-  <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"
-             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"
-             validation-optional-message="{{validations.messages.value}}"
-             ng-disabled="xmlPreview.edit"
-             ng-required="property._name" placeholder="value" />
+  </div>
+  <div class="col-xs-24"><label class="mt15">PROPERTIES</label></div>
+  <div class="col-xs-24 plr0px">
+    <div class="row m0">
+      <label class="col-xs-8">Property Name</label><label class="col-xs-16">Value</label>
     </div>
-    <div class="col-xs-2 dynamic-table-spacer">
-      <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
-      </button>
+    <div ng-repeat="property in clusterEntity.clusterModel.cluster.properties.property" class="row m0">
+        <div class="col-xs-8 dynamic-table-spacer">
+          <input type="text" class="form-control" ng-model="property._name"
+                 ng-pattern="validations.patterns.propertyName"
+                 validation-optional-message="{{validations.messages.name}}"
+                 ng-disabled="xmlPreview.edit"
+                 ng-required="property._value" placeholder="name" />
+        </div>
+        <div class="col-xs-8 dynamic-table-spacer">
+          <input type="text" class="form-control" ng-model="property._value"
+                 validation-optional-message="{{validations.messages.value}}"
+                 ng-disabled="xmlPreview.edit"
+                 ng-required="property._name" placeholder="value" />
+        </div>
+        <div class="dynamic-table-spacer">
+          <button type="button" class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="!$first || !$last"
+               ng-disabled="xmlPreview.edit">
+            <span class="entypo minus"></span> delete
+          </button>
+          <button type="button" class="btn btn-default btn-xs" ng-click="addProperty()" ng-disabled="xmlPreview.edit" ng-if="$last">
+              <span class="entypo plus"></span> add property
+          </button>
+        </div>
     </div>
-    <div class="clearfix hidden-md"></div>
-  </div>
-  <div class="col-xs-24 dynamic-table-spacer">
-    <button type="button" class="btn btn-default btn-xs" ng-click="addProperty()" ng-disabled="xmlPreview.edit">
-      <span class="entypo plus"></span> add property
-    </button>
   </div>
 
-  <h4 class="col-xs-24"> Location </h4>
-  <label class="col-xs-7">name</label><label class="col-xs-17">path</label>
-  <div ng-repeat="location in clusterEntity.clusterModel.cluster.locations.location" class="col-xs-24">
+  <div class="col-xs-24"><label class="mt15">LOCATION</label></div>
+  <div class="col-xs-24 plr0px">
+    <div class="col-xs-24 mb5 plr0px">
+      <label class="col-xs-6">Location Name</label><label class="col-xs-10">Path</label>
+    </div>
+    <div ng-repeat="location in clusterEntity.clusterModel.cluster.locations.location" class="col-xs-24 mt5">
+        <div id="clusterLocationBox" class="row" ng-if="location._name === 'staging' || location._name === 'working' || location._name === 'temp'">
+          <div class="col-xs-6 dynamic-table-spacer">
+              <label class="light font11px pt5px" tooltip="cluster.locations.{{location._name}}">
+                {{capitalize(location._name)}}<mandatory-field></mandatory-field>
+              </label>
+          </div>
+          <div class="col-xs-10 dynamic-table-spacer">
+            <input id="location.{{location._name}}" type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.path"
+                   ng-disabled="xmlPreview.edit" ng-required="location._name===staging" validation-optional-message="{{validations.messages.location}}"/>
+            <span class="error" ng-show="locationsEqualError">Staging and Working location should be different</span>
+          </div>
+          <div class="dynamic-table-spacer">
+            <button class="btn btn-default btn-xs" ng-click="removeLocation($index)" ng-if="$index>2 && !$last"
+                 ng-disabled="xmlPreview.edit" >
+              <span class="entypo minus"></span> delete
+            </button>
+            <button type="button" class="btn btn-default btn-xs" ng-click="addLocation()" ng-disabled="xmlPreview.edit" ng-if="$last">
+                <span class="entypo plus"></span> add location
+            </button>
+          </div>
+        </div>
 
-    <div class="row" ng-if="location._name === 'staging' || location._name === 'working' || location._name === 'temp'">
-      <div class="col-xs-7 dynamic-table-spacer">
-        {{location._name}}
-      </div>
-      <div class="col-xs-15 dynamic-table-spacer">
-        <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="clearfix hidden-md"></div>
+        <!-- <div class="row" ng-if="location._name !== 'staging' && location._name !== 'working' && location._name !== 'temp'">
+          <div class="col-xs-6 dynamic-table-spacer">
+            <input type="text" class="form-control" ng-model="location._name"
+                   validation-optional-message="{{validations.messages.name}}"
+                   ng-pattern="validations.patterns.name"
+                   ng-disabled="xmlPreview.edit" ng-required="location._path" placeholder="name" />
+          </div>
+          <div class="col-xs-10 dynamic-table-spacer">
+            <input type="text" class="form-control" ng-model="location._path"
+                   validation-optional-message="{{validations.messages.path}}"
+                   ng-pattern="validations.patterns.path"
+                   ng-disabled="xmlPreview.edit" ng-required="location._name" placeholder="path" />
+          </div>
+          <div class="dynamic-table-spacer">
+            <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
+            </button>
+            <button type="button" class="btn btn-default btn-xs" ng-click="addLocation()" ng-disabled="xmlPreview.edit" ng-if="$last">
+                <span class="entypo plus"></span> add location
+            </button>
+          </div>
+        </div> -->
     </div>
+  </div>
+  <div class="col-xs-24 advancedOption" ng-click="expandOptions = !expandOptions" id="clusterAdvancedOption">
+    <label class="mt15 pointer blink-success">ADVANCED OPTIONS</label>
+    <i class="glyphicon glyphicon-chevron-down mt15" ng-if="!expandOptions"></i>
+    <i class="glyphicon glyphicon-chevron-up mt15" ng-if="expandOptions"></i>
+  </div>
 
-    <div class="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"
-               validation-optional-message="{{validations.messages.name}}"
-               ng-pattern="validations.patterns.alpha"
-               ng-disabled="xmlPreview.edit" ng-required="location._path" placeholder="name" />
+  <div id="advancedOptionsBox" class="col-xs-24 plr0px" ng-class="{expanded:expandOptions}">
+    <div class="col-xs-24"><label class="mt15">ACCESS CONTROL LIST</label></div>
+    <div class="col-xs-24 plr0px">
+      <div class="col-xs-12">
+          <label class="light">Owner<mandatory-field></mandatory-field></label>
+          <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-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 class="col-xs-12">
+          <label class="light">Group<mandatory-field></mandatory-field></label>
+          <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-xs-2 dynamic-table-spacer">
-        <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
-        </button>
+      <div class="col-xs-12">
+          <label class="light">Permissions<mandatory-field></mandatory-field></label>
+          <acl-permissions acl-model="clusterEntity.clusterModel.cluster.ACL._permission"></acl-permissions>
       </div>
-      <div class="clearfix hidden-md"></div>
     </div>
-
-  </div>
-
-  <div class="col-xs-24 dynamic-table-spacer">
-    <button type="button" class="btn btn-default btn-xs" ng-click="addLocation()" ng-disabled="xmlPreview.edit">
-      <span class="entypo plus"></span> add location
-    </button>
   </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 class="col-xs-24 pb15px mt35">
+    <div class="pull-right">
+      <a class="btn cnclBtn" ui-sref="main">
+        CANCEL
+      </a>
+      <button id="cluster.step1" class="btn nextBtn" ng-disabled="xmlPreview.edit || buttonSpinners.show"
+           ng-click="goSummaryStep(clusterForm.$invalid)" scroll-to-error>
+        NEXT <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+      </button>
+    </div>
   </div>
 
-</form>
\ No newline at end of file
+</form>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html b/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
index a7caad9..2c9c34d 100644
--- a/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
+++ b/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
@@ -18,70 +18,75 @@
  */
 -->
 <div class="row clusterSummaryRow" id="clusterSummaryStep">
+  <h4 class="col-sm-24">
+    General
+  </h4>
   <div class="col-sm-24">
-    <label>Name</label>: {{clusterEntity.clusterModel.cluster._name}}
+    <label>Cluster Name</label>:<span data-qe-id="clusterName"> {{clusterEntity.clusterModel.cluster._name}}</span>
   </div>
   <div class="col-sm-24">
-    <label>Colo</label>: {{clusterEntity.clusterModel.cluster._colo}}
+    <label>Data Center or Colo Name</label>:<span data-qe-id="clusterColo"> {{clusterEntity.clusterModel.cluster._colo}}</span>
   </div>
   <div class="col-sm-24">
-    <label>Description</label>: {{clusterEntity.clusterModel.cluster._description}}
+    <label>Description</label>:<span data-qe-id="clusterDescription"> {{clusterEntity.clusterModel.cluster._description}}</span>
   </div>
   <div class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.tags">
-    <label>Tags</label>: {{clusterEntity.clusterModel.cluster.tags}}
+    <label>Tags</label>:<span data-qe-id="clusterTags"> {{clusterEntity.clusterModel.cluster.tags}}</span>
   </div>
   <h4 class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.ACL">
-    ACL
+    Access Control List
   </h4>
   <div class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.ACL" >
-    <label>Owner</label>: {{clusterEntity.clusterModel.cluster.ACL._owner}}
-    <label>Group</label>: {{clusterEntity.clusterModel.cluster.ACL._group}}
-    <label>Permission</label>: {{clusterEntity.clusterModel.cluster.ACL._permission}}
+    <label>Owner</label>:<span data-qe-id="clusterACLOwner"> {{clusterEntity.clusterModel.cluster.ACL._owner}}</span>
+    <label>Group</label>:<span data-qe-id="clusterACLGroup"> {{clusterEntity.clusterModel.cluster.ACL._group}}</span>
+    <label>Permission</label>:<span data-qe-id="clusterACLPermission"> {{clusterEntity.clusterModel.cluster.ACL._permission}}</span>
   </div>
   <h4 class="col-sm-24">
     Interfaces
   </h4>
 
   <div class="col-sm-24" ng-repeat="_interface in clusterEntity.clusterModel.cluster.interfaces.interface">
-    <label>{{_interface._type}}</label>: {{_interface._endpoint}} - {{ _interface._version }}
+    <label>{{clusterInterfaceLabels(_interface._type)}}</label>:
+    <span data-qe-id="clusterInterface{{_interface._type}}">{{_interface._endpoint}}</span>
+     <!-- - <span data-qe-id="clusterInterface{{_interface._type}}Version">{{ _interface._version }}</span> -->
   </div>
 
   <h4 class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.properties">
     Properties
   </h4>
 
-  <div class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.properties.property.length > 0"
+  <div data-qe-id="clusterProps" 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}}
+    <label>{{property._name}}</label>:<span data-qe-id="clusterProp{{property._name}}"> {{property._value}}</span>
   </div>
 
   <h4 class="col-sm-24">
     Locations
   </h4>
 
-  <div class="col-sm-24" ng-repeat="location in clusterEntity.clusterModel.cluster.locations.location">
-    <label>{{location._name}}</label>: {{location._path}}
+  <div data-qe-id="clusterLocations" class="col-sm-24" ng-repeat="location in clusterEntity.clusterModel.cluster.locations.location">
+    <label data-qe-id="{{location._name}}">{{capitalize(location._name)}}</label>:<span data-qe-id="clusterLocation{{capitalize(location._name)}}"> {{location._path}}</span>
   </div>
 </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="col-xs-24 mt35 pb15px pl0px">
+  <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>
 
-    <button id="cluster.step2" class="btn btn-default nextBtn pull-right"
+  <div class="pull-right">
+    <a class="btn cnclBtn" ui-sref="main">
+      CANCEL
+    </a>
+    <button id="cluster.step2" class="btn nextBtn"
          ng-click="saveCluster()" ng-disabled="xmlPreview.edit || buttonSpinners.show">
-      Save <img src="css/img/ajax-loader.gif" ng-if="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
+
+</div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/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 1a65172..7b7af5e 100644
--- a/falcon-ui/app/html/cluster/clusterFormTpl.html
+++ b/falcon-ui/app/html/cluster/clusterFormTpl.html
@@ -17,67 +17,72 @@
  * limitations under the License.
  */
 -->
-<div class="col-xs-22 col-xs-offset-1 clusterForm" id="clusterForm">
-  <div class="col-xs-24">
-    <div class="row">
-
-      <h3 id="cluster.title" class="col-xs-24">
-        <span class="entypo archive icon-lg"></span> New Cluster
-      </h3>
-
-      <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>
-                <h6>General</h6>
-              </span>
-              <span>
-                <div>2</div>
-                <h6>Summary</h6>
-              </span>
-              </div>
+<div class="clusterForm">
+    <div class="col-xs-22">
+        <div class="preview pullOver">
+            <button id="previewXMLBtn" type="button" class="btn btn-default btn-md pull-right nextBtn"
+              ng-disabled="invalidXml && xmlPreview.edit" ng-click="toggleclick()" >Preview XML</button>
+        </div>
+        <br/>
+        <div class="formBoxContainer detailsBox">
+            <div class="row clusterProgressBox" ng-class="{summary:secondStep===true}">
+                <div class="progressBar col-xs-24">
+                    <div class="text-center" ng-class="{
+                active:isActive('forms.cluster.general'),
+                completed:isCompleted('forms.cluster.general')}">General</div>
+                    <div class="text-center" ng-class="{
+                active:isActive('forms.cluster.summary'),
+                completed:isCompleted('forms.cluster.summary')}">Summary</div>
+                </div>
+            </div>
+            <div class="row customContainer">
+                <div class="col-xs-offset-1 col-xs-22">
+                    <div class="col-xs-24">
+                        <label class="title"><span class="entypo archive icon-lg entypo-align-sub"></span> NEW CLUSTER</label>
+                    </div>
+                    <div ui-view></div>
+                </div>
             </div>
-          </div>
-          <div class="row">
-            <div class="col-xs-offset-1 col-xs-22" ui-view></div>
-          </div>
         </div>
-      </div>
 
-      <div ng-class="{'col-xs-12' : propsOpen, 'col-xs-4' : !propsOpen}">
-        <div class="detailsBox">
-          <div class="row">
+        <div class="hide xmlPreviewContainer detailsBox" >
+            <div class="row dt">
+                <div class="col-xs-24 pt15px">
+                    <div class="col-xs-13 noSpecial">
+                        <h5>XML Preview</h5>
+                        <label style="margin-top: -10px;margin-bottom: -2px;" ng-if="invalidXml" class="custom-danger">Invalid Xml</label>
+                    </div>
 
-            <div 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 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 class="pull-right">
+                        <button type="button"
+                                id="cluster.editXML"
+                                class="btn btn-default btn-xs"
+                                ng-click="xmlPreview.editXML()"
+                                ng-class="{'btn-warning':xmlPreview.edit}"
+                                ng-disabled="invalidXml">
+                            <div ng-if="!xmlPreview.edit">Edit XML</div>
+                            <div ng-if="xmlPreview.edit">Finish</div>
+                        </button>
 
-            <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>
+                        <button type="button"
+                                id="revertXMLBtn"
+                                class="btn btn-default btn-xs"
+                                ng-if="invalidXml"
+                                ng-click="revertXml()">
+                            <div>Revert</div>
+                        </button>
+                    </div>
+                </div>
+                <div class="col-xs-24 showValidationStyle">
+                    <textarea ng-model="prettyXml"
+                              elastic
+                              class="form-control"
+                              ng-disabled="!xmlPreview.edit"
+                              ng-class="{fakeInvalid:invalidXml}">
+                    </textarea>
                 </div>
-              </div>
             </div>
-
-          </div>
         </div>
-      </div>
-
     </div>
-  </div>
-</div>
\ No newline at end of file
+</div>
+</div>

http://git-wip-us.apache.org/repos/asf/falcon/blob/76dc2e18/falcon-ui/app/html/cluster/clusterSummary.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/cluster/clusterSummary.html b/falcon-ui/app/html/cluster/clusterSummary.html
new file mode 100644
index 0000000..abad09a
--- /dev/null
+++ b/falcon-ui/app/html/cluster/clusterSummary.html
@@ -0,0 +1,77 @@
+<!--
+/**
+ * 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="row clusterSummaryRow summaryBox" id="clusterSummaryStep">
+  <h5 class="col-sm-24">
+    General
+  </h5>
+  <div class="col-sm-24">
+    <label>Cluster Name</label>:<span> {{cluster.name}}</span>
+  </div>
+  <div class="col-sm-24">
+    <label>Data Center or Colo Name</label>:<span> {{cluster.colo}}</span>
+  </div>
+  <div class="col-sm-24">
+    <label>Description</label>:<span> {{cluster.description}}</span>
+  </div>
+
+  <div class="col-sm-24" ng-if="cluster.tags.length != 0">
+    <label>Tags</label>:
+  </div>
+
+  <div class="col-sm-24">
+    <div ng-repeat="tag in cluster.tags | filter:{key: '!!'}">
+      {{tag.key}} = {{tag.value}}
+    </div>
+  </div>
+
+  <h5 class="col-sm-24" ng-if="cluster.ACL">
+    Access Control List
+  </h5>
+  <div class="col-sm-24" ng-if="cluster.ACL" >
+    <label>Owner</label>:<span> {{cluster.ACL.owner}}</span>
+    <label>Group</label>:<span> {{cluster.ACL.group}}</span>
+    <label>Permission</label>:<span> {{cluster.ACL.permission}}</span>
+  </div>
+
+  <h5 class="col-sm-24">
+    Interfaces
+  </h5>
+
+  <div class="col-sm-24" ng-repeat="interface in cluster.interfaces">
+    <label>{{clusterInterfaceLabels(interface.type)}}</label>:<span> {{interface.endpoint}} - {{ interface.version }}<span>
+  </div>
+
+  <h5 class="col-sm-24" ng-if="cluster.properties">
+    Properties
+  </h5>
+
+  <div class="col-sm-24" ng-if="cluster.properties.length > 0"
+    ng-repeat="property in cluster.properties">
+    <label>{{property.key}}</label>:<span> {{property.value}}</span>
+  </div>
+
+  <h5 class="col-sm-24">
+    Locations
+  </h5>
+
+  <div class="col-sm-24" ng-repeat="location in cluster.locations">
+    <label>{{capitalize(location.name)}}</label>:<span> {{location.path}}</span>
+  </div>
+</div>


Mime
View raw message