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>
