You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@falcon.apache.org by so...@apache.org on 2015/10/13 02:04:06 UTC
[13/22] falcon git commit: FALCON-1315 Update falcon ui for HiveDR,
secure clusters and bug fixes. Contributed by Armando Reyna/Venkat
Ranganathan.
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/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
index 92a8020..1ce62f7 100644
--- a/falcon-ui/app/css/styles/common.less
+++ b/falcon-ui/app/css/styles/common.less
@@ -22,6 +22,22 @@
html, body { height: 100%; }
body { background-color: rgba(246, 246, 246, 1); }
+.color-success{
+ color: #3c763d !important;
+}
+.color-info{
+ color: #31708f !important;
+}
+.color-warning{
+ color: #8a6d3b !important;
+}
+.color-danger{
+ color: #a94442 !important;
+}
+.error{
+ color: #ff3333 !important;
+}
+
//--------------------VALIDATION---------------------//
@shadow-valid: rgba(0, 255, 0, .6);
@shadow-invalid: rgba(255, 0, 0, .6);
@@ -51,6 +67,7 @@ input {
border-color: inherit;
}
}
+
.ng-invalid.ng-dirty {
border-color: lighten(red, 10%);
&:focus.empty {
@@ -151,7 +168,7 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
.mainUIView {
//padding: 10px 0 30px 0;
padding-top: 10px;
- padding-bottom: 30px;
+ padding-bottom: 30px;
}
//-----------------------------------------//
//----------------FILE UPLOAD---------------------//
@@ -185,6 +202,19 @@ input[type="password"]{
color: black;
padding:0;
}
+.dateInput {
+ //padding-right: 25px!important;
+}
+.dateInputIcon {
+ position: absolute;
+ background-color: white;
+ z-index: 2;
+ right: 5px;
+ bottom:5px;
+ /*top: 6px;*/
+ line-height: 15px;
+ font-size: 30px!important;
+}
//-------------------------//
.padding0 {
padding: 0;
@@ -195,15 +225,7 @@ input[type="password"]{
.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;
@@ -221,3 +243,638 @@ input[type="password"]{
.timePicker {
margin-top:-10px!important;
}
+
+@summarySuccess: #009900;
+@summaryWarning: #E6DD00;
+@summaryDanger: #FF0000;
+
+.entitySummary {
+ text-align: center;
+ .whiteBox {
+ background-color: white;
+ border-radius: 3px;
+ margin: 0 7px 0 0;
+ padding: 5px 0;
+ &:first-child {
+ margin: 0 5px;
+ }
+ }
+ h3, h5 {
+ margin:0;
+ }
+ h3 { font-size:35px; }
+ h5 { font-size:9px; font-weight: bold; }
+ .notBold {
+ font-weight: normal;
+ }
+}
+
+@keyframes blink-success {
+ 0% { color: @summarySuccess; }
+ 100% { color: black; }
+}
+@-webkit-keyframes blink-success {
+ 0% { color: @summarySuccess; }
+ 100% { color: black; }
+}
+.blink-success {
+ -webkit-animation: blink-success 1s linear infinite;
+ -moz-animation: blink-success 1s linear infinite;
+ animation: blink-success 1s linear infinite;
+}
+
+@keyframes blink-warning {
+ 0% { color: @summaryWarning; }
+ 100% { color: black; }
+}
+@-webkit-keyframes blink-warning {
+ 0% { color: @summaryWarning; }
+ 100% { color: black; }
+}
+.blink-warning {
+ -webkit-animation: blink-warning 1s linear infinite;
+ -moz-animation: blink-warning 1s linear infinite;
+ animation: blink-warning 1s linear infinite;
+}
+
+@keyframes blink-danger {
+ 0% { color: @summaryWarning; }
+ 100% { color: black; }
+}
+@-webkit-keyframes blink-danger {
+ 0% { color: @summaryWarning; }
+ 100% { color: black; }
+}
+.blink-danger {
+ -webkit-animation: blink-danger 1s linear infinite;
+ -moz-animation: blink-danger 1s linear infinite;
+ animation: blink-danger 1s linear infinite;
+}
+
+@keyframes blink-notification {
+ 0% { color: #ffff00; }
+ 100% { color: white; }
+}
+@-webkit-keyframes blink-notification {
+ 0% { color: #ffff00; }
+ 100% { color: white; }
+}
+.blink-notification {
+ -webkit-animation: blink-notification 1s linear infinite;
+ -moz-animation: blink-notification 1s linear infinite;
+ animation: blink-notification 1s linear infinite;
+}
+
+.text-success {
+ color: @summarySuccess;
+}
+.text-warning {
+ color: @summaryWarning;
+}
+.text-danger {
+ color: @summaryDanger;
+}
+
+.border-left{
+ border-left: 2px solid @gray-lighter;
+}
+
+.border-right{
+ border-right: 2px solid @gray-lighter;
+}
+
+.summaryBox {
+ border-radius: 5px;
+ border: 1px solid @gray-light2;
+ margin: 5px 0;
+ padding: 15px 5px;
+ font-size: 12px;
+ background-color: #ffffff;
+ h4 {
+ font-weight: bold;
+ margin:5px 0;
+ }
+ h5 {
+ font-weight: bold;
+ margin-top:20px;
+ }
+ 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;
+ }
+ }
+ }
+ .detailsBox{
+ margin-left: 10px;
+ }
+}
+
+/*************************************** SEARCH **************************************/
+.search {
+ height: 45px;
+ font-weight: 400;
+ font-size: 25px;
+ padding-left: 40px !important;
+ padding-right: 40px !important;
+}
+
+.searchBoxContainer{
+ margin: 25px 0;
+ .popover{
+ right: 5px !important;
+ width: 400px;
+ }
+ .arrow{
+ right: 35px !important;
+ }
+}
+
+.search-icon {
+ cursor: pointer;
+ position: absolute;
+ top: 13px;
+ left: 13px;
+ z-index: 2;
+ display: block;
+ line-height: 23px;
+ text-align: center;
+ font-size: 26px;
+ color: #777;
+}
+
+.search-loading-icon {
+ cursor: pointer;
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ z-index: 2;
+ display: block;
+ line-height: 23px;
+ text-align: center;
+ font-size: 26px;
+ color: #777;
+ margin-right: 40px;
+}
+
+.remove-icon {
+ cursor: pointer;
+ position: absolute;
+ top: 13px;
+ right: 14px;
+// z-index: 2;
+ display: block;
+ line-height: 23px;
+ text-align: center;
+ font-size: 26px;
+ color: #777;
+}
+
+.question-icon {
+ cursor: pointer;
+ position: absolute;
+ top: 13px;
+ right: 40px;
+// z-index: 2;
+ display: block;
+ line-height: 23px;
+ text-align: center;
+ font-size: 26px;
+ color: #777;
+ margin-right: 5px;
+}
+
+.searchBox {
+ display: inline-block;
+ .entityTypeButtons {
+ display: inline-block;
+ background-color: @gray-light2;
+ border-radius: 7px;
+ padding: 4px;
+
+ .btn {
+ background-color: @gray-light2;
+ border-radius: 7px;
+ border: none;
+ outline: none!important;
+ line-height: 1;
+ padding: 5px;
+ &.active {
+ background-color: @gray-light;
+ color: white;
+ }
+ &:focus {
+
+ }
+ }
+ }
+}
+
+.filtersSearchBox{
+ .padding0{
+ min-width: 115px;
+ }
+}
+
+tags-input {
+ display: block;
+ height: 40px;
+}
+tags-input *, tags-input *:before, tags-input *:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+tags-input .host {
+ position: relative;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ height: 100%;
+}
+tags-input .host:active {
+ outline: none;
+}
+
+tags-input .tags {
+ -moz-appearance: textfield;
+ -webkit-appearance: textfield;
+ padding: 1px;
+ overflow: hidden;
+ word-wrap: break-word;
+ cursor: text;
+ background-color: white;
+// border: 1px solid darkgray;
+// box-shadow: 1px 1px 1px 0 lightgray inset;
+ height: 100%;
+ padding-left: 40px;
+}
+tags-input .tags.focused {
+ outline: none;
+ -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
+ -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
+ box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
+}
+tags-input .tags .tag-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+tags-input .tags .tag-item {
+ margin: 3px;
+ padding: 3px;
+ display: inline-block;
+ float: left;
+ font: 18px cabin, Arial, sans-serif;
+ height: 32px;
+ line-height: 25px;
+ border: 1px solid #acacac;
+ border-radius: 3px;
+ background: -webkit-linear-gradient(top, #ede4e4 0%, #d5cccc 47%, #bcb2b2 100%);
+ background: linear-gradient(to bottom, #ede4e4 0%, #d5cccc 47%, #bcb2b2 100%);
+}
+tags-input .tags .tag-item.selected {
+ background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+ background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+}
+tags-input .tags .tag-item .remove-button {
+ margin: 0 0 0 5px;
+ padding: 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+ vertical-align: middle;
+ font: bold 18px cabin, Arial, sans-serif;
+ color: #585858;
+}
+tags-input .tags .tag-item .remove-button:active {
+ color: red;
+}
+tags-input .tags .input {
+ border: 0;
+ outline: none;
+ margin: 2px;
+ padding: 0;
+ padding-left: 5px;
+ float: left;
+ height: 32px;
+ font: 18px cabin, Arial, sans-serif;
+}
+tags-input .tags .input.invalid-tag {
+ color: red;
+}
+tags-input .tags .input::-ms-clear {
+ display: none;
+}
+tags-input.ng-invalid .tags {
+ -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+ -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+ box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
+}
+
+tags-input .autocomplete {
+ margin-top: 5px;
+ position: absolute;
+ padding: 5px 0;
+ z-index: 999;
+ width: 100%;
+ background-color: white;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+tags-input .autocomplete .suggestion-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+tags-input .autocomplete .suggestion-item {
+ padding: 5px 10px;
+ cursor: pointer;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font: 16px cabin, Arial, sans-serif;
+ color: black;
+ background-color: white;
+}
+tags-input .autocomplete .suggestion-item.selected {
+ color: white;
+ background-color: #0097cf;
+}
+tags-input .autocomplete .suggestion-item.selected em {
+ color: white;
+ background-color: #0097cf;
+}
+tags-input .autocomplete .suggestion-item em {
+ font: normal bold 16px cabin, Arial, sans-serif;
+ color: black;
+ background-color: white;
+}
+
+.tag-striked{
+ text-decoration: line-through;
+}
+
+.pagination {
+ margin: 10px 0 5px 0;
+}
+
+.pagDisabled{
+ cursor: default !important;
+ background-color: #eee !important;
+}
+
+.no-margin{
+ margin: 0;
+}
+
+.buttonsRow {
+ height: 43px;
+ td {
+ border-top: none;
+ border-bottom: 1px solid @gray-lighter;
+ }
+ margin-bottom: 8px;
+}
+
+.buttonCell {
+ .entypo, div {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .entypo {
+ font-size: 22px;
+ vertical-align: sub;
+ //margin: 6px 0 0 0;
+ //line-height: 18px;
+ }
+ div {
+ //margin: 3px 0 0 0;
+ }
+}
+
+.btn-gray {
+ color: #333;
+ background-color: #ccc;
+ border-color: #ccc;
+}
+
+.btn-big {
+ color: #333;
+ background-color: #ccc;
+ border-color: #ccc;
+ padding: 8px;
+ font-size: 14px;
+}
+
+.instance-title{
+ margin: 0;
+ padding: 10px;
+}
+
+.instance-status{
+ margin-top: 8px;
+}
+
+.animate-show {
+ line-height: 20px;
+ opacity: 1;
+ padding: 10px;
+}
+
+.animate-show.ng-hide-add.ng-hide-add-active,
+.animate-show.ng-hide-remove.ng-hide-remove-active {
+ -webkit-transition: all linear 0.5s;
+ transition: all linear 0.5s;
+}
+
+.animate-show.ng-hide {
+ line-height: 0;
+ opacity: 0;
+ padding: 0 10px;
+}
+
+.vertical-align {
+ min-height: 5vh;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-box-align : center;
+ -webkit-align-items : center;
+ -moz-box-align : center;
+ -ms-flex-align : center;
+ align-items : center;
+ width: 100%;
+}
+
+.dependencies-graph{
+ text-align: center;
+}
+
+/**
+ DEPENDENCIES & LINEAGE GRAPHS
+**/
+
+.node {
+ .foreignObject {
+ padding: 5px;
+ }
+}
+
+.node-name:before {
+ font-family: 'Glyphicons Halflings';
+ -webkit-font-smoothing: antialiased;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ padding-right: 0.3em;
+ vertical-align: -20%;
+ font-size: 110%;
+ color: #428bca;
+}
+
+.node-name-cluster:before {
+ content: "\2601";
+}
+
+.node-name-process:before {
+ content: "\e110";
+}
+
+.node-name-feed:before {
+ content: "\e181";
+}
+
+.node rect {
+ stroke-width: 0.5px;
+ stroke: #999;
+ fill: @gray-dark;
+ fill-opacity: 5%;
+ &:hover {
+ fill-opacity: 10%;
+ }
+}
+
+.edge path {
+ fill: none;
+ stroke: #333;
+ stroke-width: 1px;
+}
+
+.node-name {
+ font-size: 12px;
+ vertical-align: middle;
+ margin: 10px;
+}
+
+.lineage-link {
+ fill: none;
+ stroke: #eee;
+ stroke-width: 1.5px;
+}
+
+.lineage-node, .lineage-href {
+ cursor: pointer;
+}
+
+.lineage-node-terminal {
+ stroke: #000;
+ stroke-opacity: 0.3;
+ stroke-width: 8px;
+}
+
+.lineage-node-active {
+ stroke: #45a2b5;
+ stroke-opacity: 0.3;
+ stroke-width: 8px;
+}
+
+.lineage-node-text {
+ font-size: 8pt;
+ fill: #fff;
+ word-wrap: break-word;
+}
+
+.lineage-node-feed-instance {
+ fill: #6ab545;
+}
+
+.lineage-node-process-instance {
+ fill: #456ab5;
+}
+
+ul.lineage-legend {
+ list-style-type: none;
+}
+
+.lineage-legend li {
+ padding-left: 20px;
+ display: inline;
+}
+
+ul.lineage-legend li:before {
+ content: "\25cf";
+ position: relative;
+ display: inline-block;
+ top: 2px;
+ font-style: normal;
+ font-size: 16pt;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ padding-right: 5px;
+}
+
+.lineage-legend-feed-inst:before {
+ color: #6ab545;
+}
+
+.lineage-legend-process-inst:before {
+ color: #456ab5;
+}
+
+
+.lineage-legend-terminal:before {
+ -webkit-text-stroke-width: 2px;
+ -webkit-text-stroke-color: #ccc;
+}
+
+/* ALERT MESSAGE */
+
+.alert {
+ font-size: 16px;
+}
+
+.no-outline{
+ outline: 0;
+}
+
+.tittle-in-row{
+ margin-top: 20px !important;
+ margin-bottom: 0px !important;
+}
+
+.icon-lg{
+ font-size: 40px !important;
+}
+
+.prettyXml{
+ min-height: 800px;
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/dataset-form.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/dataset-form.less b/falcon-ui/app/css/styles/dataset-form.less
new file mode 100644
index 0000000..1416dba
--- /dev/null
+++ b/falcon-ui/app/css/styles/dataset-form.less
@@ -0,0 +1,494 @@
+/**
+ * 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.
+ */
+//----------------mozilla outline hack-------------------//
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+.btn:focus, .btn:active, .btn:active:focus, .btn.active:focus, .btn:visited {
+ outline: none;
+ outline-offset: 0;
+}
+
+//--------helpers-----------------//
+.pa { position: absolute; }
+.pr { position: relative; }
+
+.p0 { padding: 0; }
+.p5 { padding: 5px; }
+.p10 { padding: 10px; }
+.p15 { padding: 15px; }
+.p20 { padding: 20px; }
+
+.m0 { margin: 0; }
+.m20 { margin: 20px; }
+.mt5 { margin-top: 5px; }
+.mt10 { margin-top: 10px; }
+.mt15 { margin-top: 15px; }
+.mt20 { margin-top: 20px; }
+.mb5 { margin-bottom: 5px; }
+.mb10 { margin-bottom: 10px; }
+.mb15 { margin-bottom: 15px; }
+.mb20 { margin-bottom: 20px; }
+
+.tl { text-align: left; }
+.tc { text-align: center; }
+.tr { text-align: right; }
+
+.pointer{ cursor: pointer; }
+.db { display: block; }
+
+//-----------------------------------------//
+
+@nextBtnBackground: #666666;
+@prevBtnBackground: #CCCCCC;
+
+#sourceClusterSelect, #targetClusterSelect {
+ display: block;
+ margin-bottom: 8px;
+}
+#formBox {
+ padding: 0 2%;
+ .dateInput {
+ padding-right:0!important;
+ }
+ .formBoxWrapper {
+ width: 500px;
+ margin:0 auto;
+ }
+ .locationBox {
+ label { margin:0 0 10px 0 };
+ }
+
+ label {
+ font-weight: normal;
+ font-size: 11px;
+ max-width: none;
+
+ }
+ input[type="text"], select {
+ .p0;
+ padding-left: 1px;
+ font-size: 13px;
+ line-height: 15px;
+ height: 25px;
+ }
+ textarea {
+ .p0;
+ padding-left: 1px;
+ font-size: 13px;
+ line-height: 15px;
+ }
+ .tablesTextArea {
+ height: 50px;
+ }
+ .databasesTextArea {
+ height: 97px;
+ }
+
+ a {
+ line-height: 30px;
+ cursor: pointer;
+ margin: 5px 15px;
+ text-decoration: underline;
+ color: black;
+ &:focus {
+ color: red;
+ }
+ }
+ h4 {
+ font-size: 14px;
+ font-weight: 700;
+ }
+
+ .formTitol {
+ width: 500px;
+ margin:0 auto;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ h1 {
+ font-size: 22px;
+ font-weight: bold;
+ margin:0;
+ }
+ a {
+ font-size: 12px;
+ line-height: 12px;
+ margin:0;
+ letter-spacing: 0.5px;
+ }
+ }
+ .tagsBox, .alertsBox {
+ .btn {
+ border-radius: 5px;
+ padding: 1px;
+ border-color: @gray;
+ height: 25px;
+ width: 65px;
+ line-height: 23px;
+ .glyphicon {
+ font-size: 8px;
+ line-height: 8px;
+ top:0;
+ color: @gray;
+ }
+ }
+ }
+
+ .typeButtonsBox {
+ background-color: @gray-lighter;
+ width: 264px;
+ padding:5px;
+ border-radius: 5px;
+ .btn {
+ padding: 5px 20px;
+ border-radius: 5px;
+ background-color: @gray-lighter;
+ border: none;
+ &.active {
+ background-color: @gray;
+ color: white;
+ }
+ }
+ }
+
+ .formBoxWrapper {
+ border: 1px solid @gray-lighter;
+ border-radius:3px;
+ .p20;
+ }
+
+ .clusterBox {
+ border: 1px solid @gray-light;
+ border-radius: 5px;
+ .mt20;
+ .mb10;
+ padding-top: 15px;
+ padding-bottom: 15px;
+
+ h3, .runJobOnBox {
+ .pa;
+ background-color: white;
+ padding: 0 5px;
+ }
+
+ h3 {
+ font-size: 16px;
+ font-weight: 700;
+ display: inline-block;
+ top: -30px;
+
+ }
+ .runJobOnBox {
+ width: 110px;
+ right: 5px;
+ top: -13px;
+ }
+ .hiveDatabasesTitol {
+ font-size: 12px;
+ padding-left: 5px;
+ }
+ .databaseRadioBox{
+ font-size: 12px;
+ input {
+ margin-left: 5px;
+ }
+ }
+ }
+ .alertsBox {
+ .mt10;
+ h4 {
+ margin: 0;
+ }
+ .emailBox {
+ padding-right: 5px;
+ width: 82%;
+ display: inline-block;
+ vertical-align: top;
+ .db { margin:0; }
+ margin-bottom:5px;
+ label {
+ width: 100%;
+ }
+ }
+ .addAlertBox {
+ margin-bottom:5px;
+ margin-left: 10px;
+ display: inline-block;
+ vertical-align: top;
+ margin-top: 24px;
+ }
+ .emailArrayRow {
+ height: 25px;
+ font-size: 12px;
+ line-height: 25px;
+ margin-bottom: 5px;
+ span {
+ font-weight: bold;
+ }
+ button {
+ float: right;
+ margin-right: 4px;
+ }
+ }
+ }
+
+}
+.advancedOptionsButton {
+ cursor: pointer;
+ hr {
+ width: 67%;
+ margin-top: -7px;
+ margin-bottom:0;
+ margin-left: 128px;
+ border-top: 1px solid @gray-dark;
+ }
+ span.entypo {
+ float: right;
+ margin: 7px 5px;
+ font-size: 50px;
+ }
+}
+#advancedOptionsBox {
+ .transition(max-height 1s ease);
+ max-height: 0;
+ overflow: hidden;
+ &.expanded {
+ max-height: 850px;
+ }
+ .frequencyBox {
+ width: 36%;
+ display: inline-block;
+ vertical-align: top;
+ input, select {
+ display: inline-block;
+ }
+ input {
+ width: 20px;
+ }
+ select {
+ width: 80px;
+ }
+ label {
+ margin:0;
+ }
+ }
+
+ .allocationBox {
+ >div>div {
+ width: 24%;
+ display: inline-block;
+ }
+
+ }
+ .retryBox {
+ .policyBox {
+ width: 45%;
+ select {
+ width: 170px;
+ }
+ }
+
+ > div {
+ width: 30%;
+ display: inline-block;
+ input, select {
+ display: inline-block;
+ }
+ input {
+ width: 20px;
+ }
+ select {
+ width: 80px;
+ }
+ label {
+ margin:0;
+ }
+ &:last-child {
+ width: 20%;
+ text-align: right;
+ padding-right: 20px;
+ }
+ }
+ }
+
+ .hiveOptBox {
+ label {
+ display: block;
+ }
+ }
+}
+
+
+//---------------SUMMARY------------------//
+
+#formSummaryBox {
+ font-size: 12px;
+ h4 {
+ margin-bottom:0;
+ font-size: 12px;
+ }
+ h5 {
+ font-size: 12px;
+ font-weight: bold;
+ display: inline-block;
+ }
+ span {
+ font-weight: bold;
+ }
+ .lightSubtitle {
+ color: @gray-light;
+ font-weight: bold;
+ font-size: 14px;
+ }
+ .box {
+ position: relative;
+ border: 1px solid @gray-lighter;
+ border-radius: 5px;
+ padding: 15px;
+ margin-top: 15px;
+
+ h3 {
+ font-size: 18px;
+ margin-top: -25px;
+ margin-left: -10px;
+ padding: 0 5px;
+ background-color: white;
+ display: inline-block;
+ position: absolute;
+ }
+ h4 {
+ margin-top:0;
+ }
+
+ }
+ .allocationSubBox {
+ width: 32%;
+ display: inline-block;
+ }
+ .previewBox {
+ text-align: right;
+ }
+ #jsonPreview {
+ width: 190px;
+ .mt20;
+ .mb20;
+ }
+
+}
+
+
+//////////////////////////////
+
+#formBox {
+ .progressBox {
+ height: 75px;
+ .pr;
+ }
+ .progressBar {
+ overflow: hidden;
+ padding: 0 35px 10px;
+ height: 100px;
+
+ h6 {
+ font-size: 10px;
+ white-space: nowrap;
+ }
+ span {
+ width: auto;
+ }
+ }
+
+ .fir, .sec {
+ .pa;
+ .transition(border, 0.4s, ease);
+ .transition(background, 0.4s, ease);
+ width: 40px;
+ height: 40px;
+ display: inline-block;
+ border: 3px solid @gray-light;
+ border-radius: 20px;
+ color: white;
+ line-height: 34px;
+ font-size: 18px;
+ font-weight: bold;
+ text-align: center;
+ span {
+ display: none;
+ }
+ h6 { .m0; .pa; top: 40px; color: black; }
+
+ }
+ .fir {
+ left:0;
+ h6 {
+ left: -5%;
+ }
+ }
+ .sec {
+ right: 0;
+ margin-left: -20px;
+ z-index: 4;
+ h6 {
+ left: -10%;
+ }
+ }
+
+ .bar1 {
+ .transition(all, 0.4s, ease);
+ .pa;
+ z-index: 3;
+ top:13px;
+ height: 10px;
+ background-color: @gray-light;
+ z-index: 5;
+ left: 38px;
+ right: 32px;
+ border-width:0;
+ }
+ .general {
+ .bar1 { background-color: @gray-light; }
+ .fir {
+ background-color: @gray-dark;
+ h6 { font-weight: bold; }
+ }
+ .sec {
+ background-color: @gray-light;
+ h6 { font-weight: normal; }
+ }
+
+ }
+
+ .summary {
+ .bar1 { background-color: @gray-dark; }
+ .fir {
+ h6 { font-weight: normal; }
+ background-color: @gray-dark;
+ border-color: @gray-dark;
+ span {
+ display: inline-block;
+ }
+ b {
+ display: none;
+ }
+ }
+ .sec {
+ background-color: @gray-dark;
+ h6 { font-weight: bold; }
+ }
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/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
index feb50e3..6ea757f 100644
--- a/falcon-ui/app/css/styles/entities-list.less
+++ b/falcon-ui/app/css/styles/entities-list.less
@@ -16,16 +16,17 @@
* limitations under the License.
*/
.dashboardBox {
+ padding: 0;
h3 {
margin: 0 0 5px 0;
}
}
-.listTable {
+.listTable {
margin-top: 5px;
border-collapse: separate;
border-radius: 4px;
- border: 1px solid @gray;
+ //border: 1px solid @gray;
width: 100%;
min-height: 140px;
overflow: hidden;
@@ -55,7 +56,7 @@
//.trayAnimation;
}
}
-
+
}
h5 {
text-align: left;
@@ -76,6 +77,7 @@
tbody {
padding: 5px;
display: table-row-group;
+ background-color: white;
}
tr {
width: 100%;
@@ -86,6 +88,9 @@
width: 35%;
float:left;
margin: 3px 1%;
+ &.clusterFilters {
+ width: 48%;
+ }
}
.filtersSelectBox {
float:left;
@@ -97,21 +102,30 @@
padding:0;
font-size: 10px;
}
- }
- .buttonsRow {
- height: 41px;
- td {
- border-top: none;
- }
- }
- .buttonCell {}
+ }
+
+
.entityRow {
+ &:hover, &.rowSelected {
+ background: #F2F2F2;
+ td {
+ border-color: #E2E2E2;
+ }
+ }
+
td {
- padding: 0 5px;
+ padding: 3px 3px;
+ line-height: 22px;
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ vertical-align: middle;
+ }
+ &.firstEntityRow {
+ td { padding-top: 6px; }
}
- &:last-child {
+ &.lastEntityRow {
td {
- border-bottom: none;
+ padding-bottom: 6px;
}
}
}
@@ -130,12 +144,8 @@
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 {
@@ -143,7 +153,7 @@
}
}
}
-.buttons-to-show {
+.buttons-to-show {
margin:2px 0;
}
/* LOGIN */
@@ -164,3 +174,39 @@
color: gray;
}
}
+
+/* New Dashboard */
+
+.filtersResultBox {
+ font-weight: normal;
+// font-size: 14px;
+ width: 35%;
+ float:left;
+ margin: 3px 1%;
+ &.clusterFilters {
+ width: 48%;
+ }
+}
+
+.tag:hover {
+ cursor: pointer;
+ color: #fff;
+ background-color: #5fa33e;
+ font-weight: bold;
+}
+
+
+
+
+.waitingLayer {
+ position: absolute;
+ background-color: red;
+ width: 100%;
+ height:100%;
+ opacity:0;
+ z-index: -1;
+ .active {
+ opacity:1;
+ z-index: 2;
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/entity-summary.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/entity-summary.less b/falcon-ui/app/css/styles/entity-summary.less
new file mode 100644
index 0000000..5d5f1e3
--- /dev/null
+++ b/falcon-ui/app/css/styles/entity-summary.less
@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/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
index 6f27ff5..957e148 100644
--- a/falcon-ui/app/css/styles/form-pages.less
+++ b/falcon-ui/app/css/styles/form-pages.less
@@ -20,6 +20,9 @@
.mt1 {
margin-top: 1px;
}
+.mt5 {
+ margin-top: 5px;
+}
.mt10 {
margin-top: 10px;
}
@@ -31,19 +34,83 @@
}
.formViewContainer {
.mt10;
+
}
-.feedBottomButtons {
- .mt20;
+//-----------------next and previous buttons----------//
+@nextBtnBackground: #666666;
+@prevBtnBackground: #CCCCCC;
+.nextBtn, .prevBtn {
+ .transition(background, 0.3s, ease);
+ border: 0px none;
+ width: 90px;
+ border-radius: 7px!important;
+ padding: 10px;
+}
+.nextBtn {
+ background: @nextBtnBackground;
+ color: white;
+ &:hover {
+ background: darken(@nextBtnBackground, 10%);
+ color: white;
+ outline: hidden;
+ border-radius: 7px!important;
+ }
+ &:focus, &:active, &:visited {
+ background: darken(@nextBtnBackground, 10%);
+ color: white;
+ outline: hidden;
+ border-radius: 10px!important;
+ }
+}
+.prevBtn {
+ background: @prevBtnBackground;
+ &:hover {
+ background: darken(@prevBtnBackground, 10%);
+ outline: hidden;
+ border-radius: 7px!important;
+ }
+ &:focus, &:active, &:visited {
+ background: darken(@prevBtnBackground, 10%);
+ outline: hidden;
+ border-radius: 10px!important;
+ }
+}
+//-----------------------------------------------------//
+.aclBox {
+ .mt10;
+
+ > div {
+ label {
+ margin-top:5px;
+ font-weight: normal;
+ width: 95%;
+ }
+ width: 32%;
+ display: inline-block;
+ vertical-align: top;
+ }
+}
+.dt {
+ //display: table;
+}
+@media screen and (max-width: @grid-float-breakpoint) {
+ .xmlPreviewContainer {
+ position: relative;
+ left:0;
+ top:0;
+ width: 500px;
+ }
}
.formPage {
-
+
h3 {
font-weight: bold;
}
.entypo {
font-size: 22px;
- line-height: 10px;
- vertical-align: middle;
+ /* line-height: 14px;*/
+ /*vertical-align: top;
+ display: inline-table;*/
}
h4 {
font-size: 14px;
@@ -66,30 +133,36 @@
.light {
font-weight: normal;
}
- u {
+ a {
line-height: 30px;
cursor: pointer;
+ margin: 5px 15px;
+ text-decoration: underline;
+ color: black;
+ &:focus {
+ color: red;
+ }
}
input, select {
- color: black;
+ color: @gray-darker;
font-size: 13px;
}
.input-group-addon {
height:13px;
border-radius:0;
}
-
+
}
-select {
- .form-control;
+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 {
+ display: inline-block;
+ margin-right: 3px;
+ &:last-child { margin-right:0;}
}
input[type="text"] {
width: 20px;
@@ -121,7 +194,7 @@ select {
font-size: 35px;
line-height: 9px;
}
-
+
}
.clusterSummaryRow {
padding: 0 10px;
@@ -140,8 +213,8 @@ select {
}
margin-top: 5px;
}
-
-
+
+
}
#feedPropertiesBox {
label {
@@ -153,7 +226,7 @@ select {
margin-top: 10px;
}
label {
- font-size: 10px;
+ font-size: 12px;
margin:0;
}
input[type="checkbox"] {
@@ -191,12 +264,34 @@ select {
}
.feedLocationNav {
color: black;
+
.btn {
- background-color: @gray-light;
+ position: relative;
+ background-color: lighten(@gray-light2, 20%);
+ border-radius: 5px;
+ font-size: 12px;
+ letter-spacing: 0.5px;
+ padding: 4px 20px;
+
+ &:last-child {
+ margin-right: -12px;
+ }
}
.active {
color: white;
- background-color: @gray-dark;
+ background-color:lighten(@gray, 20%);
+ z-index: 1234;
+ }
+ &.disabled {
+ .btn {
+ background-color: lighten(@gray-light2, 30%);
+ opacity:1;
+ color: @gray-light2;
+ }
+ .active {
+ background-color:lighten(@gray, 30%);
+ color: white;
+ }
}
}
@@ -234,7 +329,7 @@ select {
}
}
- .validityDateBox {
+ /*.validityDateBox {
.light {
display: block;
}
@@ -242,7 +337,7 @@ select {
display: inline-block;
}
- }
+ }*/
.input-group {
input {
font-size: 12px;
@@ -290,18 +385,24 @@ select {
color: white;
}
}
+
+@media screen and (max-width: @grid-float-breakpoint) {
+ .detailsBox {
+ float:none!important;
+ }
+}
.detailsBox {
border-radius: 5px;
border: 1px solid @gray-light2;
- margin: 5px;
+ margin: 5px 0;
padding: 15px 5px;
font-size: 12px;
background-color: #ffffff;
h4 {
- font-weight: bold;
+ font-weight: bold;
margin:5px 0;
}
- h5 {
+ h5 {
font-weight: bold;
margin-top:2px;
}
@@ -320,7 +421,7 @@ select {
&.processCluster {
padding: 15px 4%;
margin: 5px auto;
- h5 {
+ h5 {
margin-top:15px;
&:first-child {
margin-top:0;
@@ -328,3 +429,92 @@ select {
}
}
}
+
+.detailsBT{
+ .entypo{
+ font-size: 1.5em;
+ }
+ color: #fff;
+ padding: 3px 8px;
+ border: 1px solid white;
+ border-radius: 5px;
+ border-color: #fff;
+ display: inline-block;
+ cursor: auto;
+ background-color: #5fa33e;
+}
+
+
+///////////////////////////////////////////////
+///////VALIDITY BOXES//////////////////////////
+///////////////////////////////////////////////
+.validityBox {
+ label, input, button {
+ font-weight: normal;
+ }
+
+ > div {
+ display: inline-block;
+ margin: 0 2px;
+ }
+
+ h4 {
+ margin-top: 5px;
+ margin-bottom: 0;
+ }
+ .startDateBox, .endDateBox {
+ width: 20%;
+ vertical-align: top;
+ }
+ .startTimeBox, .endTimeBox {
+ width: 15%;
+ vertical-align: top;
+ padding-left:0;
+ input {
+ //width: 20px;
+ //margin:0;
+ }
+ button {
+ border-radius: 0;
+ width: 25px;
+ height: 25px;
+ padding:0;
+ margin-left: 1px;
+ }
+ table {
+ width: auto;
+ border-spacing: 0;
+ tr {
+ &:first-child {
+ display: none;
+ }
+ &:last-child {
+ display: none;
+ }
+ }
+ }
+
+ a {
+ display: none!important;
+ }
+ }
+ .endDateBox {
+
+ }
+ .endTimeBox {
+
+ }
+ .tzBox {
+ width: 22%;
+ //padding-top: 20px;
+ }
+}
+
+.feedForm, .entityForm {
+ .validityBox {
+ .startDateBox, .endDateBox { width: 27%;}
+ .startTimeBox, .endTimeBox {width: 17%;}
+ .endDateBox { margin-left: 20px;}
+ .error_input { border:1px solid red !important;}
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/nav-header.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/nav-header.less b/falcon-ui/app/css/styles/nav-header.less
index 7bc160e..2be45af 100644
--- a/falcon-ui/app/css/styles/nav-header.less
+++ b/falcon-ui/app/css/styles/nav-header.less
@@ -27,8 +27,25 @@
border-width: 0;
border-radius: 0;
position: relative;
+ &:hover{
+ cursor: default;
+ }
+}
+.logoTitle {
+ background: transparent;
+ border: none;
+ float: left;
+ h1 span{
+ vertical-align: middle;
+ display: inline-block;
+ }
+ .falconLogo{
+ background: url(img/falcon.png) no-repeat center center;
+ background-size: 100%;
+ width: 30px;
+ height: 44px;
+ }
}
-
.navbar-header {
margin: 5px 15px 5px 5px;
font-size: 30px;
@@ -47,51 +64,177 @@
font-weight: bold;
margin: 2px 0;
}
- > div {
+ > button {
padding: 5px 10px;
border: 1px solid white;
border-radius: 3px;
display: inline-block;
cursor: pointer;
+ background-color: transparent;
+ }
+ span {
+ vertical-align: middle;
+ margin-right: 6px;
+ &.entypo, &.glyphicon{
+ vertical-align: sub;
+ &.up{
+ font-size: 2.2em;
+ }
+ }
}
.disabled {
- color: lighten(@headerNavBG, 10%);
- border-color: lighten(@headerNavBG, 10%);
+ //color: lighten(@headerNavBG, 30%);
+ //border-color: lighten(@headerNavBG, 10%);
cursor: default;
+ .background-opacity(black, 0.2);
}
}
.uploadNavWrapper {
> div {
min-width:183px;
+ padding: 5px 10px;
+ border: 1px solid white;
+ border-radius: 3px;
+ display: inline-block;
+ cursor: pointer;
+ &.fakeFocus {
+ .box-shadow(0 0 2px white);
+ }
}
}
-
.loginHeaderBox {
margin: 0;
display: inline-block;
//width: 100%;
- text-align:right;
+ text-align: right;
+ margin-top: 10px;
+
.pull-right;
- div {
+ >*{
+ vertical-align: middle;
display: inline-block;
margin-right: 10px;
+ >*{
+ display: inline-block;
+ vertical-align: middle;
+ }
+ }
+ span.entypo{
+ vertical-align: sub;
+ }
+ span.user{
+ background: url(img/user.svg) no-repeat center center;
+ background-size: 35px 35px;
+ height: 35px;
+ width: 35px;
+ }
+ button {
+ border: none;
+ cursor: pointer;
+ background-color: transparent;
+ }
+ a {
+ color: white;
+ cursor: pointer;
+ overflow: hidden;
+ background-color: transparent;
+ &:hover {
+ text-decoration: none;
+ }
+ &:focus {
+ text-decoration: none;
+ }
}
}
-@media screen and (min-width:880px) {
- .loginHeaderBox {
- margin-top: 36px;
- }
+/* NOTIFICATIONS */
+
+.notifications .messages {
+ display:none;
+ position: absolute;
+ top:50px;
+ right:0px;
+ width:280px;
+ max-width:280px;
+ max-height:300px;
+ overflow: auto;
}
-@media screen and (max-width:880px) {
- .loginHeaderBox {
- //margin-top: 40px;
- width: 100px;
- }
+
+.messagesArrow {
+ content:'.';
+ display:none;
+ position:absolute;
+ margin-left:-10px;
+ top:30px;
+ right:130px;
+ width:0;
+ height:0;
+ color:transparent;
+ border:10px solid black;
+ border-color:transparent transparent white;
+}
+
+.notifications .messages:before {
+ content:'.';
+ display:block;
+ position:absolute;
+ margin-left:-10px;
+ left:50%;
+ top:-18px;
+ width:0;
+ height:0;
+ color:transparent;
+ border:10px solid black;
+ border-color:transparent transparent white;
+}
+
+.badge-notify{
+ background:red;
+ position:relative;
+ top: -15px;
+ right: -35px;
}
-@media screen and (max-width:610px) {
- .loginHeaderBox {
- //margin-top: 40px;
- width: 100%;
+
+.notifications .messages .message {
+ display:block;
+ position:relative;
+ padding:10px;
+ background-color:white;
+ text-decoration:none;
+ a {
+ font-weight: bold;
+ text-decoration: underline;
}
+}
+
+.notifications .messages .message + .message {
+ border-top:1px solid #e0e0e0;
+}
+
+.icon-notif{
+ margin-right: 10px;
+}
+
+.no-margin-right{
+ margin-right: 0;
+}
+
+.bell-notif{
+ margin-right: 10px;
+}
+
+.header-icon{
+ font-size: 18px;
+}
+
+.logoutBT{
+ margin-right: -20px;
+}
+
+.no-outline{
+ outline: 0;
+}
+
+.unreaded-notif {
+ background-color: #EDEDED !important;
}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/popover.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/popover.less b/falcon-ui/app/css/styles/popover.less
new file mode 100644
index 0000000..4218bc2
--- /dev/null
+++ b/falcon-ui/app/css/styles/popover.less
@@ -0,0 +1,230 @@
+/**
+ * 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.
+ */
+@popover-bg-color: #fff;
+@popover-border-color: #d2d2d2;
+
+@popover-triangle-size: 11px;
+@popover-triangle-color: @popover-bg-color;
+@popover-triangle-border-color: @popover-border-color;
+
+.ns-popover-list-theme {
+ box-sizing: border-box;
+ border: solid 1px @popover-border-color;
+ border-radius: 3px;
+ z-index: 100;
+ background-color: #fff;
+ -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+ -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+ box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+
+ ul, .list {
+ padding: 0;
+ margin: 0.625rem 0;
+ display: block;
+ }
+
+ li, .list-item {
+ list-style-type: none;
+
+ a {
+ padding: 0.1875rem 0.625rem;
+ display: block;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
+ }
+ }
+}
+
+// @mixins
+//
+// We use this to create equilateral triangles
+// @triangle-size - Used to set border-size. No default, set a px or em size.
+// @triangle-color - Used to set border-color which makes up triangle. No default
+// @triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
+.triangle(@triangle-direction,
+ @triangle-size:@popover-triangle-size,
+ @triangle-color:@popover-triangle-color,
+ @triangle-border-color:@popover-triangle-border-color) {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: solid @triangle-size;
+ border-color: transparent;
+ position: absolute;
+
+ &:after {
+ content: " ";
+ display: block;
+ width:0;
+ height:0;
+ border: solid 10px;
+ border-color: transparent;
+ position: absolute;
+ }
+
+ & when (@triangle-direction = "top") {
+ border-top-color: @triangle-border-color;
+ left:50%;
+ bottom: -@triangle-size;
+ margin-left: -@triangle-size;
+
+ &:after {
+ border-top-color: @triangle-color;
+ border-bottom-width: 0;
+ bottom: 1px;
+ margin-left: -10px;
+ }
+ }
+
+ & when (@triangle-direction = "bottom") {
+ border-bottom-color: @triangle-border-color;
+ left:50%;
+ top: -@triangle-size;
+ margin-left: -@triangle-size;
+
+ &:after {
+ border-bottom-color: @triangle-color;
+ border-top-width: 0;
+ top: 1px;
+ margin-left: -10px;
+ }
+ }
+
+ & when (@triangle-direction = "left") {
+ border-left-color: @triangle-border-color;
+ top:50%;
+ right: -@triangle-size;
+ margin-top: -@triangle-size;
+
+ &:after {
+ border-left-color: @triangle-color;
+ border-right-width: 0;
+ right: 1px;
+ bottom: -10px;
+ }
+ }
+
+ & when (@triangle-direction = "right") {
+ border-right-color: @triangle-border-color;
+ top:50%;
+ left: -@triangle-size;
+ margin-top: -@triangle-size;
+
+ &:after {
+ border-right-color: @triangle-color;
+ border-left-width: 0;
+ left: 1px;
+ bottom: -10px;
+ }
+ }
+}
+
+.ns-popover-tooltip-theme {
+ box-sizing: border-box;
+ z-index: 100;
+ background-color: transparent;
+
+ .ns-popover-tooltip {
+ box-sizing: border-box;
+ border: solid 1px @popover-border-color;
+ border-radius: 3px;
+ z-index: 100;
+ background-color: #fff;
+ padding: 0.5625rem 0.875rem;
+ -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+ -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+ box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
+ margin: 10px;
+
+ h5 {
+ font-weight: bold;
+ font-size: 16px;
+ color: #777;
+ }
+
+ ul {
+ padding: 0;
+ margin: 0.625rem 0;
+ display: block;
+ }
+
+ li {
+ list-style-type: none;
+
+ a {
+ padding: 0.1875rem 0.625rem;
+ display: block;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
+ }
+ }
+ }
+
+ &.ns-popover-bottom-placement {
+ .triangle {
+ .triangle("bottom");
+ }
+ }
+
+ &.ns-popover-top-placement {
+ .triangle {
+ .triangle("top");
+ }
+ }
+
+ &.ns-popover-right-placement {
+ .triangle {
+ .triangle("right");
+ }
+ }
+
+ &.ns-popover-left-placement {
+ .triangle {
+ .triangle("left");
+ }
+ }
+
+ &.ns-popover-left-align {
+ .ns-popover-tooltip {
+ margin-left: 0;
+ }
+ }
+
+ &.ns-popover-right-align {
+ .ns-popover-tooltip {
+ margin-right: 0;
+ }
+ }
+
+ &.ns-popover-top-align {
+ .ns-popover-tooltip {
+ margin-top: 0;
+ }
+ }
+
+ &.ns-popover-bottom-align {
+ .ns-popover-tooltip {
+ margin-bottom: 0;
+ }
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/progress-bar.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/progress-bar.less b/falcon-ui/app/css/styles/progress-bar.less
index 21b03d8..5f0ad01 100644
--- a/falcon-ui/app/css/styles/progress-bar.less
+++ b/falcon-ui/app/css/styles/progress-bar.less
@@ -23,42 +23,56 @@
overflow: hidden;
padding: 10px 35px;
.entypo {
- font-size: 37px;
- line-height: 0;
+ /*float: none!important;
+ position: absolute;
+ margin: 0!important;
+ top:0;
+ left:0;*/
+ /* line-height: 36px;
+ height: 36px;
+ width: 36px;*/
+
+ color: white;
+ z-index:2;
+ position: relative;
+ display: none;
+ font-size: 36px;
+
+ margin: -24px -15px 0 0!important;
}
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;
+ border-bottom:2px solid @gray-light;
span {
display: block;
width: 55px;
span { display: none;}
&:first-child {
float: left;
- margin: -10px 0 0 -17px;
+ margin: -10px 0 0 -17px;
h6 {
font-weight: bold;
}
}
&:last-child {
float: right;
- margin: -10px -15px 0 0;
+ 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;
+ border-radius: 30px;
+ line-height: 27px;
width: 30px;
height: 30px;
text-align: center;
@@ -80,14 +94,8 @@
background-color: @gray-dark;
border-color: @gray-dark;
span {
- &:first-child {
- span {
- color: white;
- display: block;
- z-index:2;
- position: relative;
- margin-top: -13px;
- }
+ &:first-child {
+ .entypo { display: block;}
div {
color: @gray-dark;
border-color: @gray-dark;
@@ -103,7 +111,7 @@
h6 {
font-weight: bold;
}
- }
+ }
}
}
}
@@ -111,14 +119,6 @@
}
.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 {
@@ -127,18 +127,18 @@
width: 24%;
margin: -11px 0 0 0;
&:first-child {
- margin: -10px 0 0 -4%;
+ margin: -10px 0 0 -4%;
h6 {
font-weight: normal;
- }
+ }
}
&:last-child {
- margin: -10px -21% 0 0;
+ margin: -10px -21% 0 0;
}
- div {
+ div {
background-color: @gray-dark;
- }
- }
+ }
+ }
div {
border-color: @gray-light;
}
@@ -150,32 +150,32 @@
}
&.general {
.fir {
- background-color: @gray-dark;
- & + h6 { font-weight: bold!important; }
+ background-color: @gray-dark;
+ & + h6 { font-weight: bold!important; }
}
.sec, .thi, .fou, .fif {
background-color: @gray-light;
- }
-
+ }
+
}
&.properties {
- .fir {
- .entypo {display: block;}
+ .fir {
+ .entypo {display: block;}
border-color: @gray-dark;
color: @gray-dark;
}
- .sec + h6 { font-weight: bold; }
+ .sec + h6 { font-weight: bold; }
.fir, .sec {
- background-color: @gray-dark;
+ background-color: @gray-dark;
}
.thi, .fou, .fif {
- background-color: @gray-light;
+ background-color: @gray-light;
}
}
&.location {
- .thi + h6 { font-weight: bold; }
+ .thi + h6 { font-weight: bold; }
.fir, .sec {
- .entypo {display: block;}
+ .entypo {display: block;}
border-color: @gray-dark;
color: @gray-dark;
}
@@ -187,9 +187,9 @@
}
}
&.clusters {
- .fou + h6 { font-weight: bold; }
+ .fou + h6 { font-weight: bold; }
.fir, .sec, .thi {
- .entypo {display: block;}
+ .entypo {display: block;}
border-color: @gray-dark;
color: @gray-dark;
}
@@ -201,9 +201,9 @@
}
}
&.summary {
- .fif + h6 { font-weight: bold; }
+ .fif + h6 { font-weight: bold; }
.fir, .sec, .thi, .fou {
- .entypo {display: block;}
+ .entypo {display: block;}
border-color: @gray-dark;
color: @gray-dark;
}
@@ -214,16 +214,10 @@
}
.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 {
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/styles/server-messages.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/styles/server-messages.less b/falcon-ui/app/css/styles/server-messages.less
index b606810..0ab7d13 100644
--- a/falcon-ui/app/css/styles/server-messages.less
+++ b/falcon-ui/app/css/styles/server-messages.less
@@ -18,13 +18,15 @@
//------server messages ------//
.alert {
position: relative;
- margin:5px 0;
+ display: inline-block;
+ margin:5px auto 0;
+ padding: 5px 20px 5px 10px;
.box-shadow(~"1px 1px 5px black");
border: 1px solid white;
opacity: 1;
span {
display: inline-block;
- margin: auto 5px;
+ margin: auto 5px;
}
.entypo {
position: absolute;
@@ -32,19 +34,35 @@
right:5px;
cursor: pointer;
}
+ &.bg-danger {
+ border: 1px solid darken(@brand-danger, 10%);
+ }
+ &.bg-success {
+ border: 1px solid darken(@brand-success, 10%);
+ }
+ &.bg-warning {
+ border: 1px solid darken(@brand-warning, 10%);
+ }
+ a {
+ text-decoration: underline;
+ cursor: pointer;
+ }
}
-.alert.repeat-animation.ng-enter,
-.alert.repeat-animation.ng-leave{
- // .transition (all, 0.3s, ease);
-}
-
+.repeat-animation {
+ text-align: center;
+}
+.repeat-animation.ng-enter,
+.repeat-animation.ng-leave{
+ // .transition (all, 0.3s, ease);
+}
+
//.alert.repeat-animation.ng-leave.repeat-animation.ng-leave-active,
-.alert.repeat-animation.ng-enter {
+.repeat-animation.ng-enter {
.messageAnimation;
}
-
-.alert.repeat-animation.ng-enter.repeat-animation.ng-enter-active,
-.alert.repeat-animation.ng-leave {
+
+.repeat-animation.ng-enter.repeat-animation.ng-enter-active,
+.repeat-animation.ng-leave {
//.messageAnimation;
}
@@ -54,7 +72,10 @@
@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);
+ .animation(messageAnimation, 1.5s, ease-in-out, 1);
}
-
\ No newline at end of file
+.repeat-leyend{
+ text-align: center;
+ margin: 10px 0;
+}
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/css/variables.less
----------------------------------------------------------------------
diff --git a/falcon-ui/app/css/variables.less b/falcon-ui/app/css/variables.less
index f9fad79..f1c81ab 100644
--- a/falcon-ui/app/css/variables.less
+++ b/falcon-ui/app/css/variables.less
@@ -37,7 +37,7 @@
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
-@headerNavBG: #5fa33e;
+@headerNavBG: #69BE28;
//== Scaffolding
//
//## Settings for some of the most global styles.
@@ -57,7 +57,7 @@
//
//## Font, line-height, and color for body text, headings, and more.
-@font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
+@font-family-sans-serif: cabin, 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;
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/authenticating.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/authenticating.html b/falcon-ui/app/html/authenticating.html
new file mode 100644
index 0000000..8706322
--- /dev/null
+++ b/falcon-ui/app/html/authenticating.html
@@ -0,0 +1,37 @@
+<!--
+/**
+ * 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="loginForm" ng-submit="loggUser(loginForm)" novalidate id="loginForm">
+
+ <div class="col-sm-24 dashboardBox login" ng-class="{showValidationStyle:showLoginVal.show}">
+ <div class="row">
+ <div class="col-sm-6"></div>
+ <div class="col-sm-12">
+
+ <div class="col-sm-15 detailsBox centered">
+ <h3>Authenticating...</h3>
+ </div>
+
+ </div>
+ <div class="col-sm-6"></div>
+ </div>
+ </div>
+
+</form>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html b/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
index 2ef813f..8d76c90 100644
--- a/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
+++ b/falcon-ui/app/html/cluster/clusterFormGeneralStepTpl.html
@@ -17,76 +17,84 @@
* limitations under the License.
*/
-->
-<form name="clusterForm">
- <div class="col-sm-24">
+<form novalidate name="clusterForm" id="clusterGeneralStep">
+ <div class="col-xs-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"-->
+ <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">
+ <div class="col-xs-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}}"/>
+ <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">
+ <div class="col-xs-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" />
+ <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 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"/>
+ ng-pattern="validations.patterns.alpha" ng-required="tag.value" validation-optional-message="{{validations.messages.key}}"/>
</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"/>
+ ng-model="tag.value" ng-pattern="validations.patterns.alpha" ng-required="tag.key" validation-optional-message="{{validations.messages.value}}"/>
</div>
<div class="col-xs-3">
- <div class="btn btn-default btn-xs" ng-click="removeTag($index)" ng-disabled="xmlPreview.edit" ng-if="$index>0">
+ <button type="button" 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>
+ </button>
</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">
+ <div class="col-xs-24 mt5">
+ <button type="button" class="btn btn-default btn-xs" ng-click="addTag()" ng-disabled="xmlPreview.edit">
<span class="entypo plus"></span> add tag
- </div>
+ </button>
</div>
- <h4 class="col-sm-24"> Access Control List </h4>
- <div class="col-sm-8">
+ <h4 class="col-xs-24"> Access Control List </h4>
+ <div class="col-xs-8">
<label class="light">Owner</label>
- <input type="text" class="form-control" ng-disabled="xmlPreview.edit" ng-pattern="validations.patterns.unixId"
+ <input type="text" class="form-control" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.acl.owner}}"
+ ng-required="true"
+ ng-pattern="validations.patterns.unixId"
ng-model="clusterEntity.clusterModel.cluster.ACL._owner"/>
</div>
- <div class="col-sm-8">
+ <div class="col-xs-8">
<label class="light">Group</label>
- <input type="text" class="form-control" ng-disabled="xmlPreview.edit" ng-pattern="validations.patterns.unixId"
+ <input type="text" class="form-control" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.acl.group}}"
+ ng-required="true"
+ ng-pattern="validations.patterns.unixId"
ng-model="clusterEntity.clusterModel.cluster.ACL._group"/>
</div>
- <div class="col-sm-8">
+ <div class="col-xs-8">
<label class="light">Permissions</label>
- <input type="text" class="form-control" ng-disabled="xmlPreview.edit"
+ <input type="text" class="form-control" ng-disabled="xmlPreview.edit" validation-message="{{validations.messages.acl.permission}}"
+ ng-required="true"
ng-pattern="validations.patterns.unixPermissions"
ng-model="clusterEntity.clusterModel.cluster.ACL._permission"/>
</div>
-
- <h4 class="col-sm-24"> Interfaces </h4>
+
+ <h4 class="col-xs-24"> Interfaces </h4>
<label class="col-xs-4">
Type
</label>
@@ -96,14 +104,14 @@
<label class="col-xs-4">
Version
</label>
- <div id="interfaces-detail" class="col-sm-24"
+ <div id="interfaces-detail" class="col-xs-24"
ng-repeat="_interface in clusterEntity.clusterModel.cluster.interfaces.interface">
<div class="row">
<div class="col-xs-4">
- <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"
@@ -123,25 +131,28 @@
<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"
+ validation-optional-message="{{validations.messages.name}}"
+ ng-disabled="xmlPreview.edit"
ng-required="property._value" placeholder="name" />
</div>
<div class="col-xs-15 dynamic-table-spacer">
- <input type="text" class="form-control" ng-model="property._value" ng-pattern="validations.patterns.alpha"
- ng-disabled="xmlPreview.edit" ng-required="property._name" placeholder="value" />
+ <input type="text" class="form-control" ng-model="property._value"
+ validation-optional-message="{{validations.messages.value}}"
+ ng-disabled="xmlPreview.edit"
+ ng-required="property._name" placeholder="value" />
</div>
<div class="col-xs-2 dynamic-table-spacer">
- <div class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="$index > 0"
+ <button type="button" class="btn btn-default btn-xs" ng-click="removeProperty($index)" ng-if="$index > 0"
ng-disabled="xmlPreview.edit">
<span class="entypo minus"></span> delete
- </div>
+ </button>
</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">
+ <button type="button" class="btn btn-default btn-xs" ng-click="addProperty()" ng-disabled="xmlPreview.edit">
<span class="entypo plus"></span> add property
- </div>
+ </button>
</div>
<h4 class="col-xs-24"> Location </h4>
@@ -153,49 +164,52 @@
{{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"
+ <input id="location.{{location._name}}" type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.osPath"
ng-disabled="xmlPreview.edit" ng-required="true" validation-message="{{validations.messages.location}}"/>
</div>
- <div class="col-xs-2 dynamic-table-spacer"></div>
+ <div class="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"
+ <input type="text" class="form-control" ng-model="location._name"
+ validation-optional-message="{{validations.messages.name}}"
+ ng-pattern="validations.patterns.alpha"
ng-disabled="xmlPreview.edit" ng-required="location._path" placeholder="name" />
</div>
- <div class="col-xs-15 dynamic-table-spacer">
- <input type="text" class="form-control" ng-model="location._path" ng-pattern="validations.patterns.osPath"
+ <div class="col-xs-15 dynamic-table-spacer">
+ <input type="text" class="form-control" ng-model="location._path"
+ validation-optional-message="{{validations.messages.path}}"
+ ng-pattern="validations.patterns.osPath"
ng-disabled="xmlPreview.edit" ng-required="location._name" placeholder="path" />
</div>
<div class="col-xs-2 dynamic-table-spacer">
- <div class="btn btn-default btn-xs" ng-click="removeLocation($index)" ng-if="$index>3"
+ <button class="btn btn-default btn-xs" ng-click="removeLocation($index)" ng-if="$index>3"
ng-disabled="xmlPreview.edit" >
<span class="entypo minus"></span> delete
- </div>
- </div>
+ </button>
+ </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">
+ <button type="button" class="btn btn-default btn-xs" ng-click="addLocation()" ng-disabled="xmlPreview.edit">
<span class="entypo plus"></span> add location
- </div>
+ </button>
</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 class="col-xs-24 mt20">
+
+ <button id="cluster.step1" class="btn nextBtn pull-right" ng-disabled="xmlPreview.edit || buttonSpinners.show"
+ ng-click="goSummaryStep(clusterForm.$invalid)">
+ Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+ </button>
+ <a class="pull-right" ui-sref="main">
+ Cancel
+ </a>
- </div>
</div>
</form>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html b/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
index d13b3f5..a7caad9 100644
--- a/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
+++ b/falcon-ui/app/html/cluster/clusterFormSummaryStepTpl.html
@@ -17,7 +17,7 @@
* limitations under the License.
*/
-->
-<div class="row clusterSummaryRow">
+<div class="row clusterSummaryRow" id="clusterSummaryStep">
<div class="col-sm-24">
<label>Name</label>: {{clusterEntity.clusterModel.cluster._name}}
</div>
@@ -50,7 +50,7 @@
Properties
</h4>
- <div class="col-sm-24" ng-if="clusterEntity.clusterModel.cluster.properties.property.length > 0"
+ <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>
@@ -65,13 +65,23 @@
</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="row clusterSummaryRow">
+ <div class="col-xs-24 mt20">
+ <button id="cluster.backToStep1"
+ class="btn prevBtn"
+ ui-sref="forms.cluster.general"
+ ng-click="goGeneralStep()"
+ ng-disabled="buttonSpinners.backShow">
+ Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
+ </button>
- <div class="btn btn-default col-xs-6 pull-right" ng-click="saveCluster()" ng-disabled="xmlPreview.edit">
- Save
- </div>
+ <button id="cluster.step2" class="btn btn-default nextBtn pull-right"
+ ng-click="saveCluster()" ng-disabled="xmlPreview.edit || buttonSpinners.show">
+ Save <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
+ </button>
+ <a class="pull-right" ui-sref="main">
+ Cancel
+ </a>
+ </div>
</div>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/falcon/blob/86180d93/falcon-ui/app/html/cluster/clusterFormTpl.html
----------------------------------------------------------------------
diff --git a/falcon-ui/app/html/cluster/clusterFormTpl.html b/falcon-ui/app/html/cluster/clusterFormTpl.html
index 4da4cf6..1a65172 100644
--- a/falcon-ui/app/html/cluster/clusterFormTpl.html
+++ b/falcon-ui/app/html/cluster/clusterFormTpl.html
@@ -17,55 +17,67 @@
* limitations under the License.
*/
-->
-<div class="col-sm-24 clusterForm">
- <div class="col-sm-22 col-sm-offset-2">
+<div class="col-xs-22 col-xs-offset-1 clusterForm" id="clusterForm">
+ <div class="col-xs-24">
<div class="row">
- <h3 class="col-sm-24">
- New Cluster
+
+ <h3 id="cluster.title" class="col-xs-24">
+ <span class="entypo archive icon-lg"></span> New Cluster
</h3>
- <div class="col-sm-15 detailsBox">
- <div class="clusterProgressBox" ng-class="{summary:secondStep===true}">
- <div class="progressBar col-md-24">
- <div>
+
+ <div ng-class="{'col-xs-12' : propsOpen, 'col-xs-20' : !propsOpen}">
+ <div class="detailsBox">
+ <div class="clusterProgressBox" ng-class="{summary:secondStep===true}">
+ <div class="progressBar col-xs-24">
+ <div>
<span>
- <div>1<span class="entypo check"></span></div>
+ <div>1<span class="entypo check"></span></div>
<h6>General</h6>
</span>
<span>
<div>2</div>
<h6>Summary</h6>
</span>
- </div>
+ </div>
+ </div>
</div>
- </div>
- <div class="row">
- <div class="col-xs-offset-1 col-xs-22" ui-view></div>
- </div>
+ <div class="row">
+ <div class="col-xs-offset-1 col-xs-22" ui-view></div>
+ </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 ng-class="{'col-xs-12' : propsOpen, 'col-xs-4' : !propsOpen}">
+ <div class="detailsBox">
+ <div class="row">
+
+ <div class="col-xs-13 col-xs-offset-1 noSpecial">
+ <h5><i class="pointer glyphicon" ng-click="propsOpen = !propsOpen" ng-class="propsOpen ? 'glyphicon-minus-sign':'glyphicon-plus-sign'"></i> XML Preview</h5>
</div>
- </div>
-
- <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 ng-if="propsOpen" class="col-xs-9">
+ <button type="button"
+ id="cluster.editXML"
+ class="btn btn-default btn-xs pull-right"
+ ng-click="xmlPreview.editXML()"
+ ng-class="{'btn-warning':xmlPreview.edit}">
+ <div ng-if="!xmlPreview.edit">Edit XML</div>
+ <div ng-if="xmlPreview.edit">Finish</div>
+ </button>
+ </div>
+
+ <div ng-show="propsOpen" class="col-xs-24">
+ <div class="row">
+ <div class="col-xs-22 col-xs-offset-1">
+ <textarea ng-model="prettyXml" elastic class="form-control prettyXml" ng-disabled="!xmlPreview.edit"></textarea>
+ </div>
</div>
</div>
+
</div>
-
</div>
</div>
-
+
</div>
</div>
</div>
\ No newline at end of file