http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/main.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/main.less b/falcon-ui/app/css/main.less new file mode 100644 index 0000000..667c365 --- /dev/null +++ b/falcon-ui/app/css/main.less @@ -0,0 +1,78 @@ +/** + * 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 "variables.less"; +@import "bootstrap/less/mixins.less"; + +// Reset and dependencies +@import "bootstrap/less/normalize.less"; +@import "bootstrap/less/print.less"; +@import "bootstrap/less/glyphicons.less"; + +// Core CSS +@import "bootstrap/less/scaffolding.less"; +@import "bootstrap/less/type.less"; +@import "bootstrap/less/code.less"; +@import "bootstrap/less/grid.less"; +@import "bootstrap/less/tables.less"; +@import "bootstrap/less/forms.less"; +@import "bootstrap/less/buttons.less"; + +// Components +@import "bootstrap/less/component-animations.less"; +@import "bootstrap/less/dropdowns.less"; +@import "bootstrap/less/button-groups.less"; +@import "bootstrap/less/input-groups.less"; +@import "bootstrap/less/navs.less"; +@import "bootstrap/less/navbar.less"; +@import "bootstrap/less/breadcrumbs.less"; +@import "bootstrap/less/pagination.less"; +@import "bootstrap/less/pager.less"; +@import "bootstrap/less/labels.less"; +@import "bootstrap/less/badges.less"; +@import "bootstrap/less/jumbotron.less"; +@import "bootstrap/less/thumbnails.less"; +@import "bootstrap/less/alerts.less"; +@import "bootstrap/less/progress-bars.less"; +@import "bootstrap/less/media.less"; +@import "bootstrap/less/list-group.less"; +@import "bootstrap/less/panels.less"; +@import "bootstrap/less/responsive-embed.less"; +@import "bootstrap/less/wells.less"; +@import "bootstrap/less/close.less"; + +// Components w/ JavaScript +@import "bootstrap/less/modals.less"; +@import "bootstrap/less/tooltip.less"; +@import "bootstrap/less/popovers.less"; +@import "bootstrap/less/carousel.less"; + +// Utility classes +@import "bootstrap/less/utilities.less"; +@import "bootstrap/less/responsive-utilities.less"; + +//entypo +@import "fonts/entypo.less"; +//custom styles for the page +@import "styles/mixins.less"; +@import "styles/common.less"; +@import "styles/nav-header.less"; +@import "styles/entities-list.less"; +@import "styles/form-pages.less"; +@import "styles/progress-bar.less"; +@import "styles/server-messages.less"; \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/styles/common.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/common.less b/falcon-ui/app/css/styles/common.less new file mode 100644 index 0000000..92a8020 --- /dev/null +++ b/falcon-ui/app/css/styles/common.less @@ -0,0 +1,223 @@ +/** + * 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. + */ + +[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { + display: none !important; +} +html, body { height: 100%; } +body { background-color: rgba(246, 246, 246, 1); } + +//--------------------VALIDATION---------------------// +@shadow-valid: rgba(0, 255, 0, .6); +@shadow-invalid: rgba(255, 0, 0, .6); +@validation-error-color: #ff3333; +@validation-success-color: #009900; + +.custom-success { + color: @validation-success-color; +} +.custom-danger { + color: @validation-error-color; + font-style: normal; + font-weight:normal; +} +/*.ng-valid { + &:focus { + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-valid}"); + border-color: green; + } + &.nameAlreadyRegistered { + border-color: red; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}"); + } +}*/ +input { + &:focus { + border-color: inherit; + } +} +.ng-invalid.ng-dirty { + border-color: lighten(red, 10%); + &:focus.empty { + border-color: gray; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #777"); + } + &:focus { + border-color: red; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}"); + } + + &.empty { + border-color: red; + //.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}"); + &:focus { + border-color: gray; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #777"); + + } + } +} +.showValidationStyle { + .ng-invalid, .fakeInvalid { + border-color: lighten(red, 10%); + &.empty { + &:focus { + border-color: gray; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #777"); + } + } + &:focus { + border-color: red; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}"); + } + } + .fakeInvalid { + border: 1px solid lighten(red, 10%); + &:hover { + border-color: red; + .box-shadow(~"0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}"); + } + } + .fakeInvalidRadio { + color: red; + } + #engineSection { + input[type="radio"].ng-invalid, input[type="radio"].ng-invalid-required{ + border-width: 0; + box-shadow: unset; + } + input[type="radio"]:focus { + border-width: 0; + box-shadow: unset!important; + } + input[type="radio"] { + border-width: 0; + box-shadow: unset!important; + vertical-align: bottom; + } + } + .validationMessageGral { + display: block; + &.valid { + display: none; + } + } +} +//----------------validationDirective messages ----------// +.validationMessageGral { + display: none; + &.custom-danger { margin-top:3px; } +} +.nameValidationMessage { + &.custom-danger { margin-top:0; } +} +.validationMessageParent { + .nameValidationMessage { + display: none; + margin:0; + } + &.showNameMessage { + .nameValidationMessage { display: block; } + } +} +//------nameCheck ------------------// +.nameInputDisplay { + position: absolute; + top:27px; + right:10px; + z-index:2; +} +//----------------mozilla outline hack-------------------// +input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { + outline: none; + outline-offset: 0; +} +//-------------------------------------------------------// +.mainUIView { + //padding: 10px 0 30px 0; + padding-top: 10px; + padding-bottom: 30px; +} +//-----------------------------------------// +//----------------FILE UPLOAD---------------------// +.btn-file { + cursor: pointer; + position: relative; + overflow: hidden; + // margin: 40px 0 40px 30px; +} +.btn-file input[type=file] { + position: absolute; + top: 0; + right: 0; + min-width: 100%; + min-height: 100%; + font-size: 100px; + text-align: right; + filter: alpha(opacity=0); + opacity: 0; + outline: none; + background: white; + cursor: inherit; + display: block; +} +//-----------input crossbrowser overrides ------// +input[type="text"]{ + color: black; + padding:0; +} +input[type="password"]{ + color: black; + padding:0; +} +//-------------------------// +.padding0 { + padding: 0; +} +.dynamic-table-spacer { + margin-top: 5px; +} +.buttonsWrapper { + text-align: center; +} +.entitySummary { + text-align: center; + h3 { font-size:24px; } + h5 { font-size:12px; } + h3, h5 { + margin:0; + } +} + +.logoutBar { + position: absolute; + bottom:5px; + right:0; + min-width:400px; + .entypo { + font-size: 3em; + } +} + +.pointer{ + cursor: pointer; +} + +.timePicker { + margin-top:-10px!important; +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/styles/entities-list.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/entities-list.less b/falcon-ui/app/css/styles/entities-list.less new file mode 100644 index 0000000..feb50e3 --- /dev/null +++ b/falcon-ui/app/css/styles/entities-list.less @@ -0,0 +1,166 @@ +/** + * 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. + */ +.dashboardBox { + h3 { + margin: 0 0 5px 0; + } +} + +.listTable { + margin-top: 5px; + border-collapse: separate; + border-radius: 4px; + border: 1px solid @gray; + width: 100%; + min-height: 140px; + overflow: hidden; + position: relative; + .spinner { + .transition (all, 1s, linear); + display: none; + width:0; + height:0; + img { + margin: 60px auto 10px; + display: none; + //background-color: #323032; + color: #323032; + } + &.active { + display: block; + position: absolute; + z-index: 2; + .background-opacity(black, 0.8); + width: 100%; + height: 100%; + top: 0; + left: 0; + img { + display: block; + //.trayAnimation; + } + } + + } + h5 { + text-align: left; + font-weight: bold; + small { + margin-top: -5px; + display: block; + font-weight: bold; + } + } + thead { + padding: 5px; + text-align: left; + background-color: @gray-dark; + color: white; + tr > th { border-bottom: none; } + } + tbody { + padding: 5px; + display: table-row-group; + } + tr { + width: 100%; + } + .filtersBox { + font-weight: normal; + font-size: 10px; + width: 35%; + float:left; + margin: 3px 1%; + } + .filtersSelectBox { + float:left; + font-weight: normal; + font-size: 10px; + width: 24%; + margin: 3px 1%; + select { + padding:0; + font-size: 10px; + } + } + .buttonsRow { + height: 41px; + td { + border-top: none; + } + } + .buttonCell {} + .entityRow { + td { + padding: 0 5px; + } + &:last-child { + td { + border-bottom: none; + } + } + } + label { + font-weight: normal; + font-size: 10px; + } + .checkboxCell { + width: 20px; + text-align: center; + } + .stateCell { + width: 120px; + } + .dateCell {} + input[type="radio"] { + margin: -1px 0 0 -18px; + font-size: 10px; + } + .entypo { + font-size: 20px; + margin: 8px 0 0 0; + display: inline-block; + } + .nameCell { + cursor: pointer; + &:hover { + text-decoration: underline; + } + } +} +.buttons-to-show { + margin:2px 0; +} +/* LOGIN */ +.login { + margin-top: 20px; + h3{ + padding: 0 20px; + } + .detailsBox{ + padding: 30px 15px; + float: none; + margin: 0 auto; + } + .error{ + color: red; + } + .hint{ + color: gray; + } +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/styles/form-pages.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/form-pages.less b/falcon-ui/app/css/styles/form-pages.less new file mode 100644 index 0000000..6f27ff5 --- /dev/null +++ b/falcon-ui/app/css/styles/form-pages.less @@ -0,0 +1,330 @@ +/** + * 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. + */ + +//------------clusterForms/feedFrom/processForm ----------------// +.mt1 { + margin-top: 1px; +} +.mt10 { + margin-top: 10px; +} +.mt20 { + margin-top: 20px; +} +.mb10 { + margin-bottom: 10px; +} +.formViewContainer { + .mt10; +} +.feedBottomButtons { + .mt20; +} +.formPage { + + h3 { + font-weight: bold; + } + .entypo { + font-size: 22px; + line-height: 10px; + vertical-align: middle; + } + h4 { + font-size: 14px; + font-weight: bold; + line-height: 14px; + margin: 20px 0 5px; + } + h5 { + font-size: 14px; + font-weight: bold; + line-height: 14px; + margin: 10px 0 5px; + &.noSpecial { margin-left: 4%; margin-top:5px;} + } + label { + font-size: 12px; + line-height: 12px; + margin: 10px 0 2px 0; + } + .light { + font-weight: normal; + } + u { + line-height: 30px; + cursor: pointer; + } + input, select { + color: black; + font-size: 13px; + } + .input-group-addon { + height:13px; + border-radius:0; + } + +} +select { + .form-control; + padding:0; +} +#engineVersionField{ display: inline-block; width: auto; } +.inlineInputsGroup { + input { + display: inline-block; + margin-right: 3px; + &:last-child { margin-right:0;} + } + input[type="text"] { + width: 20px; + //height: 18px; + //line-height: 18px; + vertical-align: top; + } + select { + display: inline-block; + width: auto; + } + input[type="checkbox"] { + margin:0; + vertical-align: middle; + } + div { margin-bottom: 5px;} + #availInput { + width: 60px; + } +} + +.formTitle { + background-color: @gray-light2; + .border-bottom-radius(5px); + color: black; + padding: 5px; + font-size: 16px; + .entypo { + font-size: 35px; + line-height: 9px; + } + +} +.clusterSummaryRow { + padding: 0 10px; +} +.clusterForm, .feedForm, .entityForm { + input { + padding-left: 1px; + border-width: 1px; + } + select { + background-color: white; + } + > div { + &:first-child { + margin-top: 0; + } + margin-top: 5px; + } + + +} +#feedPropertiesBox { + label { + line-height: 25px; + } +} +#interfaces-detail, #feedPropertiesBox { + > div { + margin-top: 10px; + } + label { + font-size: 10px; + margin:0; + } + input[type="checkbox"] { + vertical-align: sub; + } +} +//---------------------------------// +.feedForm, .entityForm { + + .small { + display: inline-block; + width: 30px; + height: 20px; + } + .medium { + width: 80px; + } + .availFlagInput { + width: 85px; + } + .freqTitle { + margin: 0 0 5px 0; + } + .top-buffer { + margin-top: 8px; + } + .feedLocationNavBox { + margin-top:10px; + h4 { + margin-top: 10px; + } + &.nopointer .btn { + cursor: default; + } + } + .feedLocationNav { + color: black; + .btn { + background-color: @gray-light; + } + .active { + color: white; + background-color: @gray-dark; + } + } + + .sourceReplicationButton { + width: 45px; + display: inline-block; + border-bottom: 3px solid @gray-light; + color: @gray-light; + cursor: pointer; + small { + font-size: 60%; + margin-bottom: -5px; + display: block; + } + &.active { + border-color: @gray-dark; + color: @gray-dark; + } + + } + .addReplicationButton { + width: 70px; + display: inline-block; + border-bottom: 3px solid @gray-light; + color: @gray-light; + cursor: pointer; + small { + font-size: 60%; + margin-bottom: -5px; + display: block; + } + &.active { + border-color: @gray-dark; + color: @gray-dark; + } + + } + .validityDateBox { + .light { + display: block; + } + input { + display: inline-block; + + } + } + .input-group { + input { + font-size: 12px; + } + button { + padding: 2px 6px; + } + i { + font-size: 14px; + } + } + .timePicker { + margin-top: -22px; + .btn { + padding: 1px 5px; + border-radius: 0; + } + } + @media screen and (max-width: @grid-float-breakpoint) { + .timePicker { + margin-top: 0; + } + } + .TZSelect { + margin: 5px 0; + } + .addProperty { + margin: 12px 5px; + display: inline-block; + } +} + + +//----old entity details------------------// +.detailsHeaders { + h3 { display: inline-block;} + small{ + color: @gray-light; + display: block; + margin-bottom: -2px; + } + .btn { + margin-top: -2px; + background-color: @gray; + color: white; + } +} +.detailsBox { + border-radius: 5px; + border: 1px solid @gray-light2; + margin: 5px; + padding: 15px 5px; + font-size: 12px; + background-color: #ffffff; + h4 { + font-weight: bold; + margin:5px 0; + } + h5 { + font-weight: bold; + margin-top:2px; + } + table { + width: 100%; + border-spacing: 5px; + border-collapse: separate; + } + .tableHeader { + width: 70px; + font-weight: bold; + } + textarea { + width: 100%; + } + &.processCluster { + padding: 15px 4%; + margin: 5px auto; + h5 { + margin-top:15px; + &:first-child { + margin-top:0; + } + } + } +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/styles/mixins.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/styles/mixins.less b/falcon-ui/app/css/styles/mixins.less new file mode 100644 index 0000000..968184b --- /dev/null +++ b/falcon-ui/app/css/styles/mixins.less @@ -0,0 +1,64 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +//-------------- COMMON MIXINS -------------------// +.transition (@prop: all, @time: 1s, @ease: linear) { + -webkit-transition: @prop @time @ease; + -moz-transition: @prop @time @ease; + -o-transition: @prop @time @ease; + -ms-transition: @prop @time @ease; + transition: @prop @time @ease; +} +.background-opacity(@color,@alpha){ + @rgba: rgba(red(@color),green(@color),blue(@color),@alpha); + @argb: argb(@rgba); + background-color: @color; + background-color: @rgba; + filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})"; + -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})"; +} +.rotateY(@degrees) { + -webkit-transform: rotateY(@degrees); + -ms-transform: rotateY(@degrees); // IE9+ + transform: rotateY(@degrees); +} +.rotateX(@degrees) { + -webkit-transform: rotateX(@degrees); + -ms-transform: rotateX(@degrees); // IE9+ + transform: rotateX(@degrees); +} +.animation(@animation, @duration, @timing, @loopCount) { + -webkit-animation: @animation @duration @timing @loopCount; /* Safari 4+ */ + -moz-animation: @animation @duration @timing @loopCount; /* Fx 5+ */ + -o-animation: @animation @duration @timing @loopCount; /* Opera 12+ */ + animation: @animation @duration @timing @loopCount; /* IE 10+, Fx 29+ */ +} +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -moz-transform: scale(@ratio); + -ms-transform: scale(@ratio); + -o-transform: scale(@ratio); + transform: scale(@ratio); +} +.translate(@x, @y) { + -webkit-transform: translate(@x, @y); + -moz-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/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 new file mode 100644 index 0000000..7bc160e --- /dev/null +++ b/falcon-ui/app/css/styles/nav-header.less @@ -0,0 +1,97 @@ +/** + * 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. + */ + +//---------navHeader----------------------// + +.navbar { + z-index: 2; + background-color: @headerNavBG; + margin: 0; + color: white; + padding: 5px 0; + border-width: 0; + border-radius: 0; + position: relative; +} + +.navbar-header { + margin: 5px 15px 5px 5px; + font-size: 30px; + cursor: pointer; + font-weight: bolder; + > img { + height: 40px; + } +} + +.createNavWrapper, .uploadNavWrapper { + float: left; + margin: 0 10px; + > h4 { + font-size: 14px; + font-weight: bold; + margin: 2px 0; + } + > div { + padding: 5px 10px; + border: 1px solid white; + border-radius: 3px; + display: inline-block; + cursor: pointer; + } + .disabled { + color: lighten(@headerNavBG, 10%); + border-color: lighten(@headerNavBG, 10%); + cursor: default; + } +} +.uploadNavWrapper { + > div { + min-width:183px; + } +} + +.loginHeaderBox { + margin: 0; + display: inline-block; + //width: 100%; + text-align:right; + .pull-right; + div { + display: inline-block; + margin-right: 10px; + } +} + +@media screen and (min-width:880px) { + .loginHeaderBox { + margin-top: 36px; + } +} +@media screen and (max-width:880px) { + .loginHeaderBox { + //margin-top: 40px; + width: 100px; + } +} +@media screen and (max-width:610px) { + .loginHeaderBox { + //margin-top: 40px; + width: 100%; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/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 new file mode 100644 index 0000000..21b03d8 --- /dev/null +++ b/falcon-ui/app/css/styles/progress-bar.less @@ -0,0 +1,319 @@ +/** + * 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. + */ + +//---------------------------------// +//---------progress Bar------------// +//---------------------------------// +.progressBar { + overflow: hidden; + padding: 10px 35px; + .entypo { + font-size: 37px; + line-height: 0; + } + div { + .transition(background-color, 0.5s, ease-out); + background-color: @gray-light; + height: 10px; + border-top:2px solid @gray-light; + border-bottom:2px solid @gray-light; + span { + display: block; + width: 55px; + span { display: none;} + &:first-child { + float: left; + margin: -10px 0 0 -17px; + h6 { + font-weight: bold; + } + } + &:last-child { + float: right; + margin: -10px -15px 0 0; + div { + background-color: @gray-light; + } + } + h6 { + margin: 0; + font-size: 10px; + } + } + div { + display: inline-block; + border-radius: 30px; + line-height: 27px; + width: 30px; + height: 30px; + text-align: center; + background-color: #333; + color: white; + border: 3px solid @gray-light; + } + } +} +.clusterProgressBox { + font-weight: bold; + font-size: 16px; + span { + text-align: center; + } + &.summary { + .progressBar { + div { + background-color: @gray-dark; + border-color: @gray-dark; + span { + &:first-child { + span { + color: white; + display: block; + z-index:2; + position: relative; + margin-top: -13px; + } + div { + color: @gray-dark; + border-color: @gray-dark; + } + h6 { + font-weight: normal; + } + } + &:last-child { + div { + border-color: @gray-light; + } + h6 { + font-weight: bold; + } + } + } + } + } + } +} +.feedProgressBox { + font-size: 14px; + .entypo { + color: white; + z-index:2; + position: relative; + display: none; + font-size: 36px; + margin: -13px -15px 0 0!important; + } + .progressBar { + padding: 10px 6% 0 6%; + >div { + >span { + display: inline-block; + width: 24%; + margin: -11px 0 0 0; + &:first-child { + margin: -10px 0 0 -4%; + h6 { + font-weight: normal; + } + } + &:last-child { + margin: -10px -21% 0 0; + } + div { + background-color: @gray-dark; + } + } + div { + border-color: @gray-light; + } + h6 { + margin-left: -7px; + font-weight: normal; + } + } + } + &.general { + .fir { + background-color: @gray-dark; + & + h6 { font-weight: bold!important; } + } + .sec, .thi, .fou, .fif { + background-color: @gray-light; + } + + } + &.properties { + .fir { + .entypo {display: block;} + border-color: @gray-dark; + color: @gray-dark; + } + .sec + h6 { font-weight: bold; } + .fir, .sec { + background-color: @gray-dark; + } + .thi, .fou, .fif { + background-color: @gray-light; + } + } + &.location { + .thi + h6 { font-weight: bold; } + .fir, .sec { + .entypo {display: block;} + border-color: @gray-dark; + color: @gray-dark; + } + .fir, .sec, .thi { + background-color: @gray-dark; + } + .fou, .fif { + background-color: @gray-light; + } + } + &.clusters { + .fou + h6 { font-weight: bold; } + .fir, .sec, .thi { + .entypo {display: block;} + border-color: @gray-dark; + color: @gray-dark; + } + .fir, .sec, .thi, .fou { + background-color: @gray-dark; + } + .fif { + background-color: @gray-light; + } + } + &.summary { + .fif + h6 { font-weight: bold; } + .fir, .sec, .thi, .fou { + .entypo {display: block;} + border-color: @gray-dark; + color: @gray-dark; + } + .fir, .sec, .thi, .fou, .fif { + background-color: @gray-dark; + } + } +} +.processProgressBox { + font-size: 14px; + .entypo { + color: white; + z-index:2; + position: relative; + display: none; + font-size: 36px; + margin: -13px -15px 0 0!important; + } + + .progressBar { + padding: 10px 6% 0 6%; + >div { + >span { + display: inline-block; + width: 24%; + margin: -11px 0 0 0; + &:first-child { + margin: -10px 0 0 -4%; + h6 { + font-weight: normal; + } + } + &:last-child { + margin: -10px -21% 0 0; + } + div { + background-color: @gray-dark; + } + } + div { + border-color: @gray-light; + } + h6 { + margin-left: -7px; + font-weight: normal; + } + } + } + &.general { + .fir { + background-color: @gray-dark; + & + h6 { font-weight: bold!important; } + } + .sec, .thi, .fou, .fif { + background-color: @gray-light; + } + + } + &.properties { + .fir { + .entypo {display: block;} + border-color: @gray-dark; + color: @gray-dark; + } + .sec + h6 { font-weight: bold; } + .fir, .sec { + background-color: @gray-dark; + } + .thi, .fou, .fif { + background-color: @gray-light; + + } + } + &.clusters { + .thi + h6 { font-weight: bold; } + .fir, .sec { + .entypo {display: block;} + border-color: @gray-dark; + color: @gray-dark; + } + .fir, .sec, .thi { + background-color: @gray-dark; + } + .fou, .fif { + background-color: @gray-light; + } + } + &.inputsAndOutputs { + .fou + h6 { font-weight: bold; } + .fir, .sec, .thi { + .entypo {display: block;} + border-color: @gray-dark; + color: @gray-dark; + } + .fir, .sec, .thi, .fou { + background-color: @gray-dark; + } + .fif { + background-color: @gray-light; + } + } + &.summary { + .fif + h6 { font-weight: bold; } + .fir, .sec, .thi, .fou { + .entypo {display: block;} + border-color: @gray-dark; + color: @gray-dark; + } + .fir, .sec, .thi, .fou, .fif { + background-color: @gray-dark; + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/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 new file mode 100644 index 0000000..b606810 --- /dev/null +++ b/falcon-ui/app/css/styles/server-messages.less @@ -0,0 +1,60 @@ +/** + * 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. + */ +//------server messages ------// +.alert { + position: relative; + margin:5px 0; + .box-shadow(~"1px 1px 5px black"); + border: 1px solid white; + opacity: 1; + span { + display: inline-block; + margin: auto 5px; + } + .entypo { + position: absolute; + top:10px; + right:5px; + cursor: pointer; + } +} +.alert.repeat-animation.ng-enter, +.alert.repeat-animation.ng-leave{ + // .transition (all, 0.3s, ease); +} + +//.alert.repeat-animation.ng-leave.repeat-animation.ng-leave-active, +.alert.repeat-animation.ng-enter { + .messageAnimation; +} + +.alert.repeat-animation.ng-enter.repeat-animation.ng-enter-active, +.alert.repeat-animation.ng-leave { + //.messageAnimation; +} + +@-webkit-keyframes messageAnimation { 0% { opacity: 0;} 20% { opacity: 1;} 40% { opacity: 0;}60% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} } +@-moz-keyframes messageAnimation { 0% { opacity: 0;} 20% { opacity: 1;} 40% { opacity: 0;}60% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} } +@-o-keyframes messageAnimation { 0% { opacity: 0;} 20% { opacity: 1;} 40% { opacity: 0;}60% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} } +@keyframes messageAnimation { 0% { opacity: 0;} 20% { opacity: 1;} 40% { opacity: 0;}60% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 1;} } + +.messageAnimation { + .animation(messageAnimation, 1.5s, ease-in-out, 1); +} + + \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/css/variables.less ---------------------------------------------------------------------- diff --git a/falcon-ui/app/css/variables.less b/falcon-ui/app/css/variables.less new file mode 100644 index 0000000..f9fad79 --- /dev/null +++ b/falcon-ui/app/css/variables.less @@ -0,0 +1,864 @@ +/** + * 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. + */ +// +// Variables +// -------------------------------------------------- + + +//== Colors +// +//## Gray and brand colors for use across Bootstrap. + +@gray-darker: lighten(#000, 13.5%); // #222 +@gray-dark: lighten(#000, 20%); // #333 +@gray: lighten(#000, 33.5%); // #555 +@gray-light: lighten(#000, 46.7%); // #777 +@gray-light2: lighten(#000, 65%); +@gray-lighter: lighten(#000, 93.5%); // #eee + +@brand-primary: #428bca; +@brand-success: #5cb85c; +@brand-info: #5bc0de; +@brand-warning: #f0ad4e; +@brand-danger: #d9534f; + +@headerNavBG: #5fa33e; +//== Scaffolding +// +//## Settings for some of the most global styles. + +//** Background color for `<body>`. +@body-bg: #fff; +//** Global text color on `<body>`. +@text-color: @gray-dark; + +//** Global textual link color. +@link-color: @brand-primary; +//** Link hover color set via `darken()` function. +@link-hover-color: darken(@link-color, 15%); + + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. + +@font-family-sans-serif: "Open Sans", Helvetica, 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; +@font-family-base: @font-family-sans-serif; + +@font-size-base: 14px; +@font-size-large: ceil((@font-size-base * 1.25)); // ~18px +@font-size-small: ceil((@font-size-base * 0.85)); // ~12px + +@font-size-h1: floor((@font-size-base * 2.6)); // ~36px +@font-size-h2: floor((@font-size-base * 2.15)); // ~30px +@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px +@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px +@font-size-h5: @font-size-base; +@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px + +//** Unit-less `line-height` for use in components like buttons. +@line-height-base: 1.428571429; // 20/14 +//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. +@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px + +//** By default, this inherits from the `<body>`. +@headings-font-family: inherit; +@headings-font-weight: 500; +@headings-line-height: 1.1; +@headings-color: inherit; + + +//== Iconography +// +//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. + +//** Load fonts from this directory. +@icon-font-path: "fonts/"; +//** File name for all font files. +@icon-font-name: "glyphicons-halflings-regular"; +//** Element ID within SVG icon file. +@icon-font-svg-id: "glyphicons_halflingsregular"; + + +//== Components +// +//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). + +@padding-base-vertical: 6px; +@padding-base-horizontal: 12px; + +@padding-large-vertical: 10px; +@padding-large-horizontal: 16px; + +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; + +@padding-xs-vertical: 1px; +@padding-xs-horizontal: 5px; + +@line-height-large: 1.33; +@line-height-small: 1.5; + +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; + +//** Global color for active items (e.g., navs or dropdowns). +@component-active-color: #fff; +//** Global background color for active items (e.g., navs or dropdowns). +@component-active-bg: @brand-primary; + +//** Width of the `border` for generating carets that indicator dropdowns. +@caret-width-base: 4px; +//** Carets increase slightly in size for larger components. +@caret-width-large: 5px; + + +//== Tables +// +//## Customizes the `.table` component with basic values, each used across all table variations. + +//** Padding for `<th>`s and `<td>`s. +@table-cell-padding: 8px; +//** Padding for cells in `.table-condensed`. +@table-condensed-cell-padding: 5px; + +//** Default background color used for all tables. +@table-bg: transparent; +//** Background color used for `.table-striped`. +@table-bg-accent: #f9f9f9; +//** Background color used for `.table-hover`. +@table-bg-hover: #f5f5f5; +@table-bg-active: @table-bg-hover; + +//** Border color for table and cell borders. +@table-border-color: #ddd; + + +//== Buttons +// +//## For each of Bootstrap's buttons, define text, background and border color. + +@btn-font-weight: normal; + +@btn-default-color: #333; +@btn-default-bg: #fff; +@btn-default-border: #ccc; + +@btn-primary-color: #fff; +@btn-primary-bg: @brand-primary; +@btn-primary-border: darken(@btn-primary-bg, 5%); + +@btn-success-color: #fff; +@btn-success-bg: @brand-success; +@btn-success-border: darken(@btn-success-bg, 5%); + +@btn-info-color: #fff; +@btn-info-bg: @brand-info; +@btn-info-border: darken(@btn-info-bg, 5%); + +@btn-warning-color: #fff; +@btn-warning-bg: @brand-warning; +@btn-warning-border: darken(@btn-warning-bg, 5%); + +@btn-danger-color: #fff; +@btn-danger-bg: @brand-danger; +@btn-danger-border: darken(@btn-danger-bg, 5%); + +@btn-link-disabled-color: @gray-light; + + +//== Forms +// +//## + +//** `<input>` background color +@input-bg: #fff; +//** `<input disabled>` background color +@input-bg-disabled: @gray-lighter; + +//** Text color for `<input>`s +@input-color: @gray; +//** `<input>` border color +@input-border: @gray-light; +//** `<input>` border radius +@input-border-radius: 0; +//** Border color for inputs on focus +//@input-border-focus: #66afe9; +@input-border-focus: gray; +//** Placeholder text color +@input-color-placeholder: @gray-light2; + +//** Default `.form-control` height +@input-height-base: (@line-height-computed + (@padding-base-vertical) / 2); +//** Large `.form-control` height +@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +//** Small `.form-control` height +@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); + +@legend-color: @gray-dark; +@legend-border-color: #e5e5e5; + +//** Background color for textual input addons +@input-group-addon-bg: @gray-lighter; +//** Border color for textual input addons +@input-group-addon-border-color: @input-border; + + +//== Dropdowns +// +//## Dropdown menu container and contents. + +//** Background for the dropdown menu. +@dropdown-bg: #fff; +//** Dropdown menu `border-color`. +@dropdown-border: rgba(0,0,0,.15); +//** Dropdown menu `border-color` **for IE8**. +@dropdown-fallback-border: #ccc; +//** Divider color for between dropdown items. +@dropdown-divider-bg: #e5e5e5; + +//** Dropdown link text color. +@dropdown-link-color: @gray-dark; +//** Hover color for dropdown links. +@dropdown-link-hover-color: darken(@gray-dark, 5%); +//** Hover background for dropdown links. +@dropdown-link-hover-bg: #f5f5f5; + +//** Active dropdown menu item text color. +@dropdown-link-active-color: @component-active-color; +//** Active dropdown menu item background color. +@dropdown-link-active-bg: @component-active-bg; + +//** Disabled dropdown menu item background color. +@dropdown-link-disabled-color: @gray-light; + +//** Text color for headers within dropdown menus. +@dropdown-header-color: @gray-light; + +//** Deprecated `@dropdown-caret-color` as of v3.1.0 +@dropdown-caret-color: #000; + + +//-- Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. +// +// Note: These variables are not generated into the Customizer. + +@zindex-navbar: 1000; +@zindex-dropdown: 1000; +@zindex-popover: 1060; +@zindex-tooltip: 1070; +@zindex-navbar-fixed: 1030; +@zindex-modal-background: 1040; +@zindex-modal: 1050; + + +//== Media queries breakpoints +// +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. + +// Extra small screen / phone +//** Deprecated `@screen-xs` as of v3.0.1 +@screen-xs: 480px; +//** Deprecated `@screen-xs-min` as of v3.2.0 +@screen-xs-min: @screen-xs; +//** Deprecated `@screen-phone` as of v3.0.1 +@screen-phone: @screen-xs-min; + +// Small screen / tablet +//** Deprecated `@screen-sm` as of v3.0.1 +@screen-sm: 768px; +@screen-sm-min: @screen-sm; +//** Deprecated `@screen-tablet` as of v3.0.1 +@screen-tablet: @screen-sm-min; + +// Medium screen / desktop +//** Deprecated `@screen-md` as of v3.0.1 +@screen-md: 992px; +@screen-md-min: @screen-md; +//** Deprecated `@screen-desktop` as of v3.0.1 +@screen-desktop: @screen-md-min; + +// Large screen / wide desktop +//** Deprecated `@screen-lg` as of v3.0.1 +@screen-lg: 1200px; +@screen-lg-min: @screen-lg; +//** Deprecated `@screen-lg-desktop` as of v3.0.1 +@screen-lg-desktop: @screen-lg-min; + +// So media queries don't overlap when required, provide a maximum +@screen-xs-max: (@screen-sm-min - 1); +@screen-sm-max: (@screen-md-min - 1); +@screen-md-max: (@screen-lg-min - 1); + + +//== Grid system +// +//## Define your custom responsive grid. + +//** Number of columns in the grid. +@grid-columns: 24; +//** Padding between columns. Gets divided in half for the left and right. +@grid-gutter-width: 10px; +// Navbar collapse +//** Point at which the navbar becomes uncollapsed. +@grid-float-breakpoint: @screen-sm-min; +//** Point at which the navbar begins collapsing. +@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); + + +//== Container sizes +// +//## Define the maximum width of `.container` for different screen sizes. + +// Small screen / tablet +@container-tablet: ((720px + @grid-gutter-width)); +//** For `@screen-sm-min` and up. +@container-sm: @container-tablet; + +// Medium screen / desktop +@container-desktop: ((940px + @grid-gutter-width)); +//** For `@screen-md-min` and up. +@container-md: @container-desktop; + +// Large screen / wide desktop +@container-large-desktop: ((1140px + @grid-gutter-width)); +//** For `@screen-lg-min` and up. +@container-lg: @container-large-desktop; + + +//== Navbar +// +//## + +// Basics of a navbar +@navbar-height: 50px; +@navbar-margin-bottom: @line-height-computed; +@navbar-border-radius: @border-radius-base; +@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); +@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); +@navbar-collapse-max-height: 340px; + +@navbar-default-color: #777; +@navbar-default-bg: #f8f8f8; +@navbar-default-border: darken(@navbar-default-bg, 6.5%); + +// Navbar links +@navbar-default-link-color: #777; +@navbar-default-link-hover-color: #333; +@navbar-default-link-hover-bg: transparent; +@navbar-default-link-active-color: #555; +@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); +@navbar-default-link-disabled-color: #ccc; +@navbar-default-link-disabled-bg: transparent; + +// Navbar brand label +@navbar-default-brand-color: @navbar-default-link-color; +@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%); +@navbar-default-brand-hover-bg: transparent; + +// Navbar toggle +@navbar-default-toggle-hover-bg: #ddd; +@navbar-default-toggle-icon-bar-bg: #888; +@navbar-default-toggle-border-color: #ddd; + + +// Inverted navbar +// Reset inverted navbar basics +@navbar-inverse-color: @gray-light; +@navbar-inverse-bg: #222; +@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); + +// Inverted navbar links +@navbar-inverse-link-color: @gray-light; +@navbar-inverse-link-hover-color: #fff; +@navbar-inverse-link-hover-bg: transparent; +@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; +@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); +@navbar-inverse-link-disabled-color: #444; +@navbar-inverse-link-disabled-bg: transparent; + +// Inverted navbar brand label +@navbar-inverse-brand-color: @navbar-inverse-link-color; +@navbar-inverse-brand-hover-color: #fff; +@navbar-inverse-brand-hover-bg: transparent; + +// Inverted navbar toggle +@navbar-inverse-toggle-hover-bg: #333; +@navbar-inverse-toggle-icon-bar-bg: #fff; +@navbar-inverse-toggle-border-color: #333; + + +//== Navs +// +//## + +//=== Shared nav styles +@nav-link-padding: 10px 15px; +@nav-link-hover-bg: @gray-lighter; + +@nav-disabled-link-color: @gray-light; +@nav-disabled-link-hover-color: @gray-light; + +@nav-open-link-hover-color: #fff; + +//== Tabs +@nav-tabs-border-color: #ddd; + +@nav-tabs-link-hover-border-color: @gray-lighter; + +@nav-tabs-active-link-hover-bg: @body-bg; +@nav-tabs-active-link-hover-color: @gray; +@nav-tabs-active-link-hover-border-color: #ddd; + +@nav-tabs-justified-link-border-color: #ddd; +@nav-tabs-justified-active-link-border-color: @body-bg; + +//== Pills +@nav-pills-border-radius: @border-radius-base; +@nav-pills-active-link-hover-bg: @component-active-bg; +@nav-pills-active-link-hover-color: @component-active-color; + + +//== Pagination +// +//## + +@pagination-color: @link-color; +@pagination-bg: #fff; +@pagination-border: #ddd; + +@pagination-hover-color: @link-hover-color; +@pagination-hover-bg: @gray-lighter; +@pagination-hover-border: #ddd; + +@pagination-active-color: #fff; +@pagination-active-bg: @brand-primary; +@pagination-active-border: @brand-primary; + +@pagination-disabled-color: @gray-light; +@pagination-disabled-bg: #fff; +@pagination-disabled-border: #ddd; + + +//== Pager +// +//## + +@pager-bg: @pagination-bg; +@pager-border: @pagination-border; +@pager-border-radius: 15px; + +@pager-hover-bg: @pagination-hover-bg; + +@pager-active-bg: @pagination-active-bg; +@pager-active-color: @pagination-active-color; + +@pager-disabled-color: @pagination-disabled-color; + + +//== Jumbotron +// +//## + +@jumbotron-padding: 30px; +@jumbotron-color: inherit; +@jumbotron-bg: @gray-lighter; +@jumbotron-heading-color: inherit; +@jumbotron-font-size: ceil((@font-size-base * 1.5)); + + +//== Form states and alerts +// +//## Define colors for form feedback states and, by default, alerts. + +@state-success-text: #3c763d; +@state-success-bg: #dff0d8; +@state-success-border: darken(spin(@state-success-bg, -10), 5%); + +@state-info-text: #31708f; +@state-info-bg: #d9edf7; +@state-info-border: darken(spin(@state-info-bg, -10), 7%); + +@state-warning-text: #8a6d3b; +@state-warning-bg: #fcf8e3; +@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); + +@state-danger-text: #a94442; +@state-danger-bg: #f2dede; +@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); + + +//== Tooltips +// +//## + +//** Tooltip max width +@tooltip-max-width: 200px; +//** Tooltip text color +@tooltip-color: #fff; +//** Tooltip background color +@tooltip-bg: #000; +@tooltip-opacity: .9; + +//** Tooltip arrow width +@tooltip-arrow-width: 5px; +//** Tooltip arrow color +@tooltip-arrow-color: @tooltip-bg; + + +//== Popovers +// +//## + +//** Popover body background color +@popover-bg: #fff; +//** Popover maximum width +@popover-max-width: 276px; +//** Popover border color +@popover-border-color: rgba(0,0,0,.2); +//** Popover fallback border color +@popover-fallback-border-color: #ccc; + +//** Popover title background color +@popover-title-bg: darken(@popover-bg, 3%); + +//** Popover arrow width +@popover-arrow-width: 10px; +//** Popover arrow color +@popover-arrow-color: #fff; + +//** Popover outer arrow width +@popover-arrow-outer-width: (@popover-arrow-width + 1); +//** Popover outer arrow color +@popover-arrow-outer-color: fadein(@popover-border-color, 5%); +//** Popover outer arrow fallback color +@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); + + +//== Labels +// +//## + +//** Default label background color +@label-default-bg: @gray-light; +//** Primary label background color +@label-primary-bg: @brand-primary; +//** Success label background color +@label-success-bg: @brand-success; +//** Info label background color +@label-info-bg: @brand-info; +//** Warning label background color +@label-warning-bg: @brand-warning; +//** Danger label background color +@label-danger-bg: @brand-danger; + +//** Default label text color +@label-color: #fff; +//** Default text color of a linked label +@label-link-hover-color: #fff; + + +//== Modals +// +//## + +//** Padding applied to the modal body +@modal-inner-padding: 15px; + +//** Padding applied to the modal title +@modal-title-padding: 15px; +//** Modal title line-height +@modal-title-line-height: @line-height-base; + +//** Background color of modal content area +@modal-content-bg: #fff; +//** Modal content border color +@modal-content-border-color: rgba(0,0,0,.2); +//** Modal content border color **for IE8** +@modal-content-fallback-border-color: #999; + +//** Modal backdrop background color +@modal-backdrop-bg: #000; +//** Modal backdrop opacity +@modal-backdrop-opacity: .5; +//** Modal header border color +@modal-header-border-color: #e5e5e5; +//** Modal footer border color +@modal-footer-border-color: @modal-header-border-color; + +@modal-lg: 900px; +@modal-md: 600px; +@modal-sm: 300px; + + +//== Alerts +// +//## Define alert colors, border radius, and padding. + +@alert-padding: 5px; +@alert-border-radius: @border-radius-base; +@alert-link-font-weight: bold; + +@alert-success-bg: @state-success-bg; +@alert-success-text: @state-success-text; +@alert-success-border: @state-success-border; + +@alert-info-bg: @state-info-bg; +@alert-info-text: @state-info-text; +@alert-info-border: @state-info-border; + +@alert-warning-bg: @state-warning-bg; +@alert-warning-text: @state-warning-text; +@alert-warning-border: @state-warning-border; + +@alert-danger-bg: @state-danger-bg; +@alert-danger-text: @state-danger-text; +@alert-danger-border: @state-danger-border; + + +//== Progress bars +// +//## + +//** Background color of the whole progress component +@progress-bg: #f5f5f5; +//** Progress bar text color +@progress-bar-color: #fff; + +//** Default progress bar color +@progress-bar-bg: @brand-primary; +//** Success progress bar color +@progress-bar-success-bg: @brand-success; +//** Warning progress bar color +@progress-bar-warning-bg: @brand-warning; +//** Danger progress bar color +@progress-bar-danger-bg: @brand-danger; +//** Info progress bar color +@progress-bar-info-bg: @brand-info; + + +//== List group +// +//## + +//** Background color on `.list-group-item` +@list-group-bg: #fff; +//** `.list-group-item` border color +@list-group-border: #ddd; +//** List group border radius +@list-group-border-radius: @border-radius-base; + +//** Background color of single list items on hover +@list-group-hover-bg: #f5f5f5; +//** Text color of active list items +@list-group-active-color: @component-active-color; +//** Background color of active list items +@list-group-active-bg: @component-active-bg; +//** Border color of active list elements +@list-group-active-border: @list-group-active-bg; +//** Text color for content within active list items +@list-group-active-text-color: lighten(@list-group-active-bg, 40%); + +//** Text color of disabled list items +@list-group-disabled-color: @gray-light; +//** Background color of disabled list items +@list-group-disabled-bg: @gray-lighter; +//** Text color for content within disabled list items +@list-group-disabled-text-color: @list-group-disabled-color; + +@list-group-link-color: #555; +@list-group-link-hover-color: @list-group-link-color; +@list-group-link-heading-color: #333; + + +//== Panels +// +//## + +@panel-bg: #fff; +@panel-body-padding: 15px; +@panel-heading-padding: 10px 15px; +@panel-footer-padding: @panel-heading-padding; +@panel-border-radius: @border-radius-base; + +//** Border color for elements within panels +@panel-inner-border: #ddd; +@panel-footer-bg: #f5f5f5; + +@panel-default-text: @gray-dark; +@panel-default-border: #ddd; +@panel-default-heading-bg: #f5f5f5; + +@panel-primary-text: #fff; +@panel-primary-border: @brand-primary; +@panel-primary-heading-bg: @brand-primary; + +@panel-success-text: @state-success-text; +@panel-success-border: @state-success-border; +@panel-success-heading-bg: @state-success-bg; + +@panel-info-text: @state-info-text; +@panel-info-border: @state-info-border; +@panel-info-heading-bg: @state-info-bg; + +@panel-warning-text: @state-warning-text; +@panel-warning-border: @state-warning-border; +@panel-warning-heading-bg: @state-warning-bg; + +@panel-danger-text: @state-danger-text; +@panel-danger-border: @state-danger-border; +@panel-danger-heading-bg: @state-danger-bg; + + +//== Thumbnails +// +//## + +//** Padding around the thumbnail image +@thumbnail-padding: 4px; +//** Thumbnail background color +@thumbnail-bg: @body-bg; +//** Thumbnail border color +@thumbnail-border: #ddd; +//** Thumbnail border radius +@thumbnail-border-radius: @border-radius-base; + +//** Custom text color for thumbnail captions +@thumbnail-caption-color: @text-color; +//** Padding around the thumbnail caption +@thumbnail-caption-padding: 9px; + + +//== Wells +// +//## + +@well-bg: #f5f5f5; +@well-border: darken(@well-bg, 7%); + + +//== Badges +// +//## + +@badge-color: #fff; +//** Linked badge text color on hover +@badge-link-hover-color: #fff; +@badge-bg: @gray-light; + +//** Badge text color in active nav link +@badge-active-color: @link-color; +//** Badge background color in active nav link +@badge-active-bg: #fff; + +@badge-font-weight: bold; +@badge-line-height: 1; +@badge-border-radius: 10px; + + +//== Breadcrumbs +// +//## + +@breadcrumb-padding-vertical: 8px; +@breadcrumb-padding-horizontal: 15px; +//** Breadcrumb background color +@breadcrumb-bg: #f5f5f5; +//** Breadcrumb text color +@breadcrumb-color: #ccc; +//** Text color of current page in the breadcrumb +@breadcrumb-active-color: @gray-light; +//** Textual separator for between breadcrumb elements +@breadcrumb-separator: "/"; + + +//== Carousel +// +//## + +@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); + +@carousel-control-color: #fff; +@carousel-control-width: 15%; +@carousel-control-opacity: .5; +@carousel-control-font-size: 20px; + +@carousel-indicator-active-bg: #fff; +@carousel-indicator-border-color: #fff; + +@carousel-caption-color: #fff; + + +//== Close +// +//## + +@close-font-weight: bold; +@close-color: #000; +@close-text-shadow: 0 1px 0 #fff; + + +//== Code +// +//## + +@code-color: #c7254e; +@code-bg: #f9f2f4; + +@kbd-color: #fff; +@kbd-bg: #333; + +@pre-bg: #f5f5f5; +@pre-color: @gray-dark; +@pre-border-color: #ccc; +@pre-scrollable-max-height: 340px; + + +//== Type +// +//## + +//** Horizontal offset for forms and lists. +@component-offset-horizontal: 180px; +//** Text muted color +@text-muted: @gray-light; +//** Abbreviations and acronyms border color +@abbr-border-color: @gray-light; +//** Headings small color +@headings-small-color: @gray-light; +//** Blockquote small color +@blockquote-small-color: @gray-light; +//** Blockquote font size +@blockquote-font-size: (@font-size-base * 1.25); +//** Blockquote border color +@blockquote-border-color: @gray-lighter; +//** Page header border color +@page-header-border-color: @gray-lighter; +//** Width of horizontal description list titles +@dl-horizontal-offset: @component-offset-horizontal; +//** Horizontal line color. +@hr-border: @gray-lighter; + + http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/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 new file mode 100644 index 0000000..2ef813f --- /dev/null +++ b/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html @@ -0,0 +1,201 @@ +<!-- +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +--> +<form name="clusterForm"> + <div class="col-sm-24"> + <label class="light">Name</label> + <input type="text" class="form-control nameInput" ng-pattern="validations.patterns.name" + ng-model="clusterEntity.clusterModel.cluster._name" ng-required="true" + ng-keydown="validations.acceptNoSpaces($event)" + check-name="{type:'cluster', check:true}" ng-class="{fakeInvalid:!validations.nameAvailable}" + ng-disabled="xmlPreview.edit" /> + <!--check-type="cluster" check-name-flag="nameValid" check="true"--> + + </div> + <div class="col-sm-12"> + <label class="light">Colo</label> + <input type="text" class="form-control" ng-pattern="validations.patterns.freeText" + ng-required="true" ng-disabled="xmlPreview.edit" + ng-model="clusterEntity.clusterModel.cluster._colo" validation-message="{{validations.messages.colo}}"/> + </div> + <div class="col-sm-12"> + <label class="light">Description</label> + <input type="text" class="form-control" ng-pattern="validations.patterns.freeText" + ng-required="true" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.description}}" + ng-model="clusterEntity.clusterModel.cluster._description" /> + </div> + + <div class="col-xs-24"> + <label class="light">Tags</label> + </div> + + <div class="col-xs-24"> + <div ng-repeat="tag in tagsArray" class="row dynamic-table-spacer"> + <div class="col-xs-10"> + <input type="text" class="form-control" ng-model="tag.key" ng-disabled="xmlPreview.edit" placeholder="key" + ng-pattern="validations.patterns.alpha" ng-required="tag.value"/> + </div> + <div class="col-xs-11"> + <input type="text" class="form-control" ng-disabled="xmlPreview.edit" placeholder="value" + ng-model="tag.value" ng-pattern="validations.patterns.alpha" ng-required="tag.key"/> + </div> + <div class="col-xs-3"> + <div class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-disabled="xmlPreview.edit" ng-if="$index>0"> + <span class="entypo minus"></span> delete + </div> + </div> + </div> + </div> + + <div class="col-sm-24 dynamic-table-spacer"> + <div class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit"> + <span class="entypo plus"></span> add tag + </div> + </div> + <h4 class="col-sm-24"> Access Control List </h4> + <div class="col-sm-8"> + <label class="light">Owner</label> + <input type="text" class="form-control" ng-disabled="xmlPreview.edit" ng-pattern="validations.patterns.unixId" + ng-model="clusterEntity.clusterModel.cluster.ACL._owner"/> + </div> + <div class="col-sm-8"> + <label class="light">Group</label> + <input type="text" class="form-control" ng-disabled="xmlPreview.edit" ng-pattern="validations.patterns.unixId" + ng-model="clusterEntity.clusterModel.cluster.ACL._group"/> + </div> + <div class="col-sm-8"> + <label class="light">Permissions</label> + <input type="text" class="form-control" ng-disabled="xmlPreview.edit" + ng-pattern="validations.patterns.unixPermissions" + ng-model="clusterEntity.clusterModel.cluster.ACL._permission"/> + </div> + + <h4 class="col-sm-24"> Interfaces </h4> + <label class="col-xs-4"> + Type + </label> + <label class="col-xs-16"> + Endpoint + </label> + <label class="col-xs-4"> + Version + </label> + <div id="interfaces-detail" class="col-sm-24" + ng-repeat="_interface in clusterEntity.clusterModel.cluster.interfaces.interface"> + <div class="row"> + <div class="col-xs-4"> + <label> + <input type="checkbox" ng-checked="registry.check" ng-model="registry.check" + ng-if="_interface._type === 'registry'" ng-disabled="xmlPreview.edit"/> {{_interface._type}} + </label> + </div> + <div class="col-xs-16"> + <input type="text" class="form-control" ng-pattern="validations.patterns.osPath" + 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"> + </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" + ng-pattern="validations.patterns.alpha" ng-disabled="xmlPreview.edit" + ng-required="property._value" placeholder="name" /> + </div> + <div class="col-xs-15 dynamic-table-spacer"> + <input type="text" class="form-control" ng-model="property._value" ng-pattern="validations.patterns.alpha" + ng-disabled="xmlPreview.edit" ng-required="property._name" placeholder="value" /> + </div> + <div class="col-xs-2 dynamic-table-spacer"> + <div class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="$index > 0" + ng-disabled="xmlPreview.edit"> + <span class="entypo minus"></span> delete + </div> + </div> + <div class="clearfix hidden-md"></div> + </div> + <div class="col-xs-24 dynamic-table-spacer"> + <div class="btn btn-default btn-xs" ng-click="addProperty()" ng-disabled="xmlPreview.edit"> + <span class="entypo plus"></span> add property + </div> + </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="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 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> + + <div class="row" ng-if="location._name !== 'staging' && location._name !== 'working' && location._name !== 'temp'"> + <div class="col-xs-7 dynamic-table-spacer"> + <input type="text" class="form-control" ng-model="location._name" ng-pattern="validations.patterns.alpha" + ng-disabled="xmlPreview.edit" ng-required="location._path" placeholder="name" /> + </div> + <div class="col-xs-15 dynamic-table-spacer"> + <input type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.osPath" + ng-disabled="xmlPreview.edit" ng-required="location._name" placeholder="path" /> + </div> + <div class="col-xs-2 dynamic-table-spacer"> + <div class="btn btn-default btn-xs" ng-click="removeLocation($index)" ng-if="$index>3" + ng-disabled="xmlPreview.edit" > + <span class="entypo minus"></span> delete + </div> + </div> + <div class="clearfix hidden-md"></div> + </div> + + </div> + + <div class="col-xs-24 dynamic-table-spacer"> + <div class="btn btn-default btn-xs" ng-click="addLocation()" ng-disabled="xmlPreview.edit"> + <span class="entypo plus"></span> add location + </div> + </div> + <div class="col-xs-24"> + <div class="row mt20"> + <div class="btn btn-default col-xs-6 mt10" ui-sref="main"> + Cancel + </div> + <div class="btn btn-default col-xs-6 pull-right mt10" ng-disabled="xmlPreview.edit" + ng-click="goSummaryStep(clusterForm.$invalid)"> + Next + </div> + + </div> + </div> + +</form> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/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 new file mode 100644 index 0000000..d13b3f5 --- /dev/null +++ b/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.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"> + <div class="col-sm-24"> + <label>Name</label>: {{clusterEntity.clusterModel.cluster._name}} + </div> + <div class="col-sm-24"> + <label>Colo</label>: {{clusterEntity.clusterModel.cluster._colo}} + </div> + <div class="col-sm-24"> + <label>Description</label>: {{clusterEntity.clusterModel.cluster._description}} + </div> + <div class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.tags"> + <label>Tags</label>: {{clusterEntity.clusterModel.cluster.tags}} + </div> + <h4 class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.ACL"> + ACL + </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}} + </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 }} + </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" + ng-repeat="property in clusterEntity.clusterModel.cluster.properties.property"> + <label>{{property._name}}</label>: {{property._value}} + </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> +</div> + + +<div class="row clusterSummaryRow mt20"> + <div class="btn btn-default col-xs-6" ui-sref="forms.cluster.general" ng-click="goGeneralStep()"> + Previous + </div> + + <div class="btn btn-default col-xs-6 pull-right" ng-click="saveCluster()" ng-disabled="xmlPreview.edit"> + Save + </div> + +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/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 new file mode 100644 index 0000000..4da4cf6 --- /dev/null +++ b/falcon-ui/app/html/cluster/clusterFormTpl.html @@ -0,0 +1,71 @@ +<!-- +/** + * 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="col-sm-24 clusterForm"> + <div class="col-sm-22 col-sm-offset-2"> + <div class="row"> + <h3 class="col-sm-24"> + New Cluster + </h3> + <div class="col-sm-15 detailsBox"> + <div class="clusterProgressBox" ng-class="{summary:secondStep===true}"> + <div class="progressBar col-md-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> + </div> + <div class="row"> + <div class="col-xs-offset-1 col-xs-22" ui-view></div> + </div> + </div> + + <div class="col-sm-8 detailsBox col-sm-offset-1"> + <div class="row"> + + <h5 class="col-xs-13 col-xs-offset-1 noSpecial">XML Preview</h5> + + <div class="col-xs-9"> + <div class="btn btn-default btn-xs pull-right" ng-click="xmlPreview.editXML()" ng-class="{'btn-warning':xmlPreview.edit}"> + Edit XML + </div> + </div> + + <div class="col-xs-24"> + <div class="row"> + <div class="col-xs-22 col-xs-offset-1"> + <textarea ng-model="prettyXml" rows="35" class="form-control" ng-disabled="!xmlPreview.edit"> + </textarea> + </div> + </div> + </div> + + </div> + </div> + + </div> + </div> +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/html/directives/entitiesListDv.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/directives/entitiesListDv.html b/falcon-ui/app/html/directives/entitiesListDv.html new file mode 100644 index 0000000..6ac950f --- /dev/null +++ b/falcon-ui/app/html/directives/entitiesListDv.html @@ -0,0 +1,98 @@ +<!-- +/** + * 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. + */ +--> +<table class="listTable table"> + <thead> + + <tr> + <th colspan="3"> + <div class="filtersBox">Name <input type="text" class="form-control" ng-model="simpleFilter.name"/></div> + + <div class="filtersBox">Tags <input type="text" class="form-control" ng-model="simpleFilter.tags"/></div> + + <div ng-if="type !== 'cluster'" class="filtersSelectBox">Status + + <select class="form-control" ng-model="simpleFilter.status"> + <option value="" selected="true">ALL</option> + <option>SUBMITTED</option> + <option>RUNNING</option> + <option>SUSPENDED</option> + <option>UNKNOWN</option> + </select> + + </div> + + </th> + </tr> + </thead> + <tbody> + + <tr ng-if="input.length > 0" class="buttonsRow"> + <td class="buttonCell" colspan="4"> + <div class="btn btn-default btn-xs buttons-to-show" ng-click="scopeSchedule()" ng-hide="selectedDisabledButtons.schedule" ng-if="type !== 'cluster'"> + <span class="entypo play"></span> Schedule + </div> + <div class="btn btn-default btn-xs buttons-to-show" ng-click="scopeResume()" ng-hide="selectedDisabledButtons.resume" ng-if="type !== 'cluster'"> + <span class="entypo play"></span> Resume + </div> + <div class="btn btn-default btn-xs buttons-to-show" ng-click="scopeSuspend()" ng-hide="selectedDisabledButtons.suspend" ng-if="type !== 'cluster'"> + <span class="entypo paus"></span> Suspend + </div> + <div class="btn btn-default btn-xs buttons-to-show" ng-click="scopeEdit()" ng-hide="selectedRows.length === 0 || selectedRows.length > 1" ng-if="type !== 'cluster'"> + <span class="entypo cog"></span> Edit + </div> + <div class="btn btn-default btn-xs buttons-to-show" ng-click="scopeClone()" ng-hide="selectedRows.length === 0 || selectedRows.length > 1"> + <span class="entypo docs"></span> Copy + </div> + <div class="btn btn-default btn-xs buttons-to-show" ng-click="scopeRemove()" ng-hide="selectedRows.length === 0"> + <span class="entypo trash"></span> Delete + </div> + <div class="btn btn-default btn-xs buttons-to-show" ng-click="download()" ng-hide="selectedRows.length === 0 || selectedRows.length > 1"> + <span class="entypo down"></span> Download XML + </div> + </td> + </tr> + <tr ng-if="input.length === 0 && !server.responses.listLoaded[type]"> + <td> loading {{ type }}s </td> + </tr> + <tr ng-if="input.length === 0 && server.responses.listLoaded[type]"> + <td> There are no {{ type }}s </td> + </tr> + <tr ng-if="input.length !== 0" ng-repeat="item in input | filter:{'name':simpleFilter.name} | filter:{'status':simpleFilter.status} | tagFilter | filter:{'list':simpleFilter.tags}" class="entityRow"> + <td class="checkboxCell"> + <input type="checkbox" checklist-model="selectedRows" checklist-value="{name:item.name, type:item.type, status:item.status}" ng-change="checkButtonsToShow()"/> + </td> + <td class="nameCell" ng-click="goEntityDetails(item.name, type)"> + {{ item.name }} + </td> + <td class="stateCell"> + <span ng-if="type !== 'cluster'" ng-class="{'text-success': item.status === 'RUNNING', 'text-warning': item.status === 'SUSPENDED', 'text-danger': item.status === 'UNKNOWN'}">{{ item.status }}</span> + </td> + + </tr> + <tr> + <td ng-if="server.responses.multiRequest[type] > 0 || server.responses.listLoaded[type] === false"> + <div class="spinner" ng-class="{active: server.responses.multiRequest[type] > 0 || server.responses.listLoaded[type] === false}"> + <img src="css/img/ajax-loader.gif" /> + </div> + </td> + </tr> + </tbody> + +</table> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/html/directives/entitySummaryDv.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/directives/entitySummaryDv.html b/falcon-ui/app/html/directives/entitySummaryDv.html new file mode 100644 index 0000000..c64074b --- /dev/null +++ b/falcon-ui/app/html/directives/entitySummaryDv.html @@ -0,0 +1,42 @@ +<!-- +/** + * 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 entitySummary"> + + <div class="col-xs-6"> + <h3>{{statusCount.TOTAL_AMOUNT}}</h3> + <h5>Submitted</h5> + </div> + + <div class="col-xs-6 text-success" ng-if="type !== 'cluster'"> + <h3>{{statusCount.RUNNING}}</h3> + <h5>Running</h5> + </div> + + <div class="col-xs-6 text-warning" ng-if="type !== 'cluster'"> + <h3>{{statusCount.SUSPENDED}}</h3> + <h5>Suspended</h5> + </div> + + <div class="col-xs-6 text-danger" ng-if="type !== 'cluster'"> + <h3>{{statusCount.UNKNOWN}}</h3> + <h5>Unknown</h5> + </div> + +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/falcon/blob/c4df0a5e/falcon-ui/app/html/directives/navDv.html ---------------------------------------------------------------------- diff --git a/falcon-ui/app/html/directives/navDv.html b/falcon-ui/app/html/directives/navDv.html new file mode 100644 index 0000000..ad1223d --- /dev/null +++ b/falcon-ui/app/html/directives/navDv.html @@ -0,0 +1,50 @@ +<!-- +/** + * 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. + */ +--> +<nav class="col-sm-24 navbar navbar-default" role="navigation"> + <div class="navbar"> + + <h1 class="navbar-header" ui-sref="main"> + <img src="css/img/falcon.png" /> Falcon + </h1> + + <div class="createNavWrapper"> + <h4>Create an entity</h4> + <div ng-click="resetCluster()"> + <span class="entypo archive"></span> Cluster + </div> + <div ng-click="resetFeed()"> + <span class="entypo download"></span> Feed + </div> + <div id="createProcessButton" ng-click="resetProcess()"> + <span class="entypo cycle"></span> Process + </div> + </div> + + <div class="uploadNavWrapper"> + <h4>Upload an entity</h4> + <div class="btn-file"> + <span class="entypo up"></span> + <input type="file" id="files" name="files[]" multiple fileinput-change="handleFile" ng-model="fileJson"> + Browse for the XML file + </div> + </div> + + </div> +</nav>
