You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@falcon.apache.org by pe...@apache.org on 2016/08/22 04:48:07 UTC
[14/16] falcon git commit: FALCON-2118 Proposal for new UI changes
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>