You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@falcon.apache.org by sr...@apache.org on 2015/04/01 13:10:42 UTC
[15/21] falcon git commit: FALCON-790 Falcon UI to enable
entity/process/feed edits and management. Contributed by Armando
Reyna/Kenneth Ho
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>