Skip to content

A
atlas
Commit 39b059e0 by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-3128: UI: Create entity is not working after new relationship attribute introduce

Signed-off-by: 's avatarSarath Subramanian <ssubramanian@hortonworks.com>
parent 1a5009ea
Showing with 163 additions and 22 deletions
dashboardv2/public/css/scss/form.scss
...@@ -23,10 +23,12 @@ ...@@ -23,10 +23,12 @@
.control-label-sm { .control-label-sm {
padding-top: 3px; padding-top: 3px;
} }
.control-label-sm-pl { .control-label-sm-pl {
@extend .control-label-sm; @extend .control-label-sm;
padding-left: 10px; padding-left: 10px;
} }
.control-label-sm-pr { .control-label-sm-pr {
@extend .control-label-sm; @extend .control-label-sm;
padding-right: 10px; padding-right: 10px;
...@@ -44,6 +46,7 @@ ...@@ -44,6 +46,7 @@
&.text-left { &.text-left {
text-align: left; text-align: left;
} }
&.text-right { &.text-right {
text-align: right; text-align: right;
} }
...@@ -53,6 +56,7 @@ ...@@ -53,6 +56,7 @@
//Instead of the line below you could use @include border-radius($radius, $vertical-radius) //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
background-color: $color_mystic_approx; background-color: $color_mystic_approx;
border: 1px $color_mystic_approx solid; border: 1px $color_mystic_approx solid;
&:focus { &:focus {
border-color: $color_bali_hai_approx; border-color: $color_bali_hai_approx;
outline: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) outline: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
...@@ -62,6 +66,7 @@ ...@@ -62,6 +66,7 @@
} }
.form-color { .form-color {
.form-group span[class^="select2-selection select2-selection--"], .form-group span[class^="select2-selection select2-selection--"],
.form-control { .form-control {
background-color: #e8e8e8 !important; background-color: #e8e8e8 !important;
...@@ -70,6 +75,7 @@ ...@@ -70,6 +75,7 @@
.sidebar-wrapper { .sidebar-wrapper {
z-index: 9 !important; z-index: 9 !important;
.form-control { .form-control {
background-color: $white; background-color: $white;
border: 1px $white solid; border: 1px $white solid;
...@@ -83,6 +89,7 @@ ...@@ -83,6 +89,7 @@
textarea { textarea {
resize: none; resize: none;
&:focus { &:focus {
outline: none !important; outline: none !important;
} }
...@@ -99,6 +106,7 @@ button:focus { ...@@ -99,6 +106,7 @@ button:focus {
.btn { .btn {
//Instead of the line below you could use @include border-radius($radius, $vertical-radius) //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
...@@ -106,6 +114,7 @@ button:focus { ...@@ -106,6 +114,7 @@ button:focus {
[class^="col-md-"], [class^="col-md-"],
[class^="col-sm-"] { [class^="col-sm-"] {
.btn.checkbox-inline, .btn.checkbox-inline,
.btn.radio-inline { .btn.radio-inline {
padding-left: 19px; padding-left: 19px;
...@@ -116,6 +125,7 @@ button:focus { ...@@ -116,6 +125,7 @@ button:focus {
color: $white; color: $white;
background-color: $color_blue_bayoux_approx; background-color: $color_blue_bayoux_approx;
border-color: $color_blue_bayoux_approx; border-color: $color_blue_bayoux_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_pickled_bluewood_approx; background-color: $color_pickled_bluewood_approx;
...@@ -127,11 +137,13 @@ button:focus { ...@@ -127,11 +137,13 @@ button:focus {
color: $white; color: $white;
background-color: $color_jungle_green_approx; background-color: $color_jungle_green_approx;
border-color: $color_jungle_green_approx; border-color: $color_jungle_green_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_jungle_green_approx; background-color: $color_jungle_green_approx;
border-color: $color_jungle_green_approx; border-color: $color_jungle_green_approx;
} }
&:focus { &:focus {
color: $white; color: $white;
background-color: $color_jungle_green_approx; background-color: $color_jungle_green_approx;
...@@ -143,11 +155,13 @@ button:focus { ...@@ -143,11 +155,13 @@ button:focus {
color: $white; color: $white;
background-color: $color_picton_blue_approx; background-color: $color_picton_blue_approx;
border-color: $color_picton_blue_approx; border-color: $color_picton_blue_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
} }
&:focus { &:focus {
color: $white; color: $white;
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
...@@ -159,11 +173,13 @@ button:focus { ...@@ -159,11 +173,13 @@ button:focus {
color: $white; color: $white;
background-color: $color_yellow_sea_approx; background-color: $color_yellow_sea_approx;
border-color: $color_yellow_sea_approx; border-color: $color_yellow_sea_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_gamboge_approx; background-color: $color_gamboge_approx;
border-color: $color_gamboge_approx; border-color: $color_gamboge_approx;
} }
&:focus { &:focus {
color: $white; color: $white;
background-color: $color_gamboge_approx; background-color: $color_gamboge_approx;
...@@ -175,11 +191,13 @@ button:focus { ...@@ -175,11 +191,13 @@ button:focus {
color: $white; color: $white;
background-color: $color_trinidad_approx; background-color: $color_trinidad_approx;
border-color: $color_trinidad_approx; border-color: $color_trinidad_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_grenadier_approx; background-color: $color_grenadier_approx;
border-color: $color_grenadier_approx; border-color: $color_grenadier_approx;
} }
&:focus { &:focus {
color: $white; color: $white;
background-color: $color_grenadier_approx; background-color: $color_grenadier_approx;
...@@ -196,17 +214,21 @@ button:focus { ...@@ -196,17 +214,21 @@ button:focus {
border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
transition: all .3s ease; transition: all .3s ease;
margin: 2px; margin: 2px;
&:hover { &:hover {
@include btn-action-effect('default'); @include btn-action-effect('default');
background-color: $transparent; background-color: $transparent;
} }
&:focus { &:focus {
@include btn-action-effect('default'); @include btn-action-effect('default');
background-color: $transparent; background-color: $transparent;
} }
&.btn-sm { &.btn-sm {
padding: 2px 6px; padding: 2px 6px;
} }
&.btn-md { &.btn-md {
padding: 6px 10px; padding: 6px 10px;
} }
...@@ -222,17 +244,20 @@ button:focus { ...@@ -222,17 +244,20 @@ button:focus {
.btn-fixed-width { .btn-fixed-width {
.btn-icon { .btn-icon {
min-width: 100px; min-width: 100px;
&.propagte-classification { &.propagte-classification {
>span { >span {
width: 98px; width: 98px;
} }
} }
>span { >span {
@include ellipsis(); @include ellipsis();
float: left; float: left;
width: 76px; width: 76px;
padding: 2px 5px !important; padding: 2px 5px !important;
} }
>i { >i {
float: right; float: right;
line-height: 15px; line-height: 15px;
...@@ -246,6 +271,7 @@ button:focus { ...@@ -246,6 +271,7 @@ button:focus {
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
background-color: $transparent; background-color: $transparent;
&.active { &.active {
@include btn-action-hover-effect('default'); @include btn-action-hover-effect('default');
} }
...@@ -262,33 +288,41 @@ button:focus { ...@@ -262,33 +288,41 @@ button:focus {
&.btn-sm { &.btn-sm {
padding: 2px 6px; padding: 2px 6px;
} }
&.btn-md { &.btn-md {
padding: 5px 10px; padding: 5px 10px;
} }
&.btn-blue { &.btn-blue {
@include btn-action-effect('blue'); @include btn-action-effect('blue');
&.active { &.active {
@include btn-action-hover-effect('blue'); @include btn-action-hover-effect('blue');
} }
&:hover { &:hover {
@include btn-action-hover-effect('blue'); @include btn-action-hover-effect('blue');
} }
&:focus { &:focus {
@include btn-action-effect('blue'); @include btn-action-effect('blue');
} }
&.btn-icon { &.btn-icon {
@include btn-action-effect('blue'); @include btn-action-effect('blue');
color: $tag_color !important; color: $tag_color !important;
&:hover { &:hover {
color: $color_havelock_blue_approx; color: $color_havelock_blue_approx;
background-color: $transparent; background-color: $transparent;
} }
>span { >span {
&:hover { &:hover {
@include btn-action-hover-effect('blue'); @include btn-action-hover-effect('blue');
} }
} }
i.fa { i.fa {
&:hover { &:hover {
@include btn-action-hover-effect('blue'); @include btn-action-hover-effect('blue');
...@@ -301,10 +335,12 @@ button:focus { ...@@ -301,10 +335,12 @@ button:focus {
border: 1px $action_gray solid; border: 1px $action_gray solid;
color: $action_gray; color: $action_gray;
cursor: default; cursor: default;
i.fa { i.fa {
position: relative; position: relative;
right: -5px; right: -5px;
} }
&:hover { &:hover {
color: $white; color: $white;
background-color: $action_gray; background-color: $action_gray;
...@@ -315,25 +351,31 @@ button:focus { ...@@ -315,25 +351,31 @@ button:focus {
padding: 0px; padding: 0px;
overflow: hidden; overflow: hidden;
background-color: $transparent; background-color: $transparent;
&:hover { &:hover {
color: $color_keppel_approx; color: $color_keppel_approx;
background-color: $transparent; background-color: $transparent;
} }
>span { >span {
padding: 5px; padding: 5px;
&:hover { &:hover {
@include btn-action-hover-effect('default'); @include btn-action-hover-effect('default');
} }
} }
i.fa { i.fa {
position: relative; position: relative;
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@include btn-action-hover-effect('default'); @include btn-action-hover-effect('default');
} }
} }
} }
&.btn-icon-pd { &.btn-icon-pd {
i.fa { i.fa {
padding: 5px; padding: 5px;
...@@ -343,6 +385,7 @@ button:focus { ...@@ -343,6 +385,7 @@ button:focus {
} }
.btn-group { .btn-group {
.btn-atlas, .btn-atlas,
.btn-action { .btn-action {
margin: 0px; margin: 0px;
...@@ -353,10 +396,12 @@ button:focus { ...@@ -353,10 +396,12 @@ button:focus {
>a { >a {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
&:focus { &:focus {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
} }
&:hover { &:hover {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
...@@ -366,10 +411,12 @@ button:focus { ...@@ -366,10 +411,12 @@ button:focus {
>span { >span {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
&:focus { &:focus {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
} }
&:hover { &:hover {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
...@@ -382,6 +429,7 @@ button:focus { ...@@ -382,6 +429,7 @@ button:focus {
color: $color_mountain_mist_approx; color: $color_mountain_mist_approx;
cursor: default; cursor: default;
margin: 5px 10px; margin: 5px 10px;
&:hover { &:hover {
border-color: $color_mountain_mist_approx; border-color: $color_mountain_mist_approx;
color: $color_mountain_mist_approx !important; color: $color_mountain_mist_approx !important;
...@@ -401,4 +449,43 @@ button:focus { ...@@ -401,4 +449,43 @@ button:focus {
.list-style-disc { .list-style-disc {
list-style: disc; list-style: disc;
}
.create-entity-form {
&.all {
.attribute-dash-box {
&.alloptional {
display: block;
}
}
}
.attribute-dash-box {
border-style: dashed;
border-width: 2px;
border-spacing: 8px;
border-radius: 12px;
border-color: #cbcbcb;
position: relative;
padding: 0px 10px;
margin-top: 25px;
span.required:after {
content: "*";
padding-left: 1%;
color: $red
}
&.alloptional {
display: none;
}
.attribute-type-label {
background: $white;
padding: 5px 10px;
position: absolute;
top: -16px;
}
}
} }
\ No newline at end of file
dashboardv2/public/css/scss/override.scss
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
.modal-body { .modal-body {
position: relative; position: relative;
padding: 15px; padding: 15px;
max-height: 72vh; max-height: calc(100vh - 200px);
min-height: 70px; min-height: 70px;
overflow: auto; overflow: auto;
......
dashboardv2/public/css/scss/theme.scss
...@@ -112,7 +112,9 @@ header { ...@@ -112,7 +112,9 @@ header {
h1 { h1 {
&.title { &.title {
word-break: break-all; word-break: break-all;
} // margin-top: 50px; }
// margin-top: 50px;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: 600; font-weight: 600;
@include ellipsis(); @include ellipsis();
...@@ -286,15 +288,18 @@ hr[size="10"] { ...@@ -286,15 +288,18 @@ hr[size="10"] {
.panel-title { .panel-title {
display: inline-block; display: inline-block;
} }
i.ec-icon:before { i.ec-icon:before {
content: "\f078" content: "\f078"
} }
&.collapsed, &.collapsed,
&[aria-expanded="false"] { &[aria-expanded="false"] {
i.ec-icon:before { i.ec-icon:before {
content: "\f078" content: "\f078"
} }
} }
&[aria-expanded="true"] { &[aria-expanded="true"] {
i.ec-icon:before { i.ec-icon:before {
content: "\f077" content: "\f077"
...@@ -388,10 +393,6 @@ hr[size="10"] { ...@@ -388,10 +393,6 @@ hr[size="10"] {
box-shadow: none !important; box-shadow: none !important;
} }
fieldset.fieldset-child-pd>div {
padding-left: 12px;
}
.inline-content { .inline-content {
>.inline { >.inline {
display: inline-block; display: inline-block;
......
dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12 entityInputData" data-id="entityInputData"></div> <div class="col-sm-12 entityInputData create-entity-form" data-id="entityInputData"></div>
</div> </div>
</form> </form>
<div class="fontLoader-relative entityLoader" style="display:none"> <div class="fontLoader-relative entityLoader" style="display:none">
......
dashboardv2/public/js/utils/Helper.js
...@@ -32,6 +32,9 @@ define(['require', ...@@ -32,6 +32,9 @@ define(['require',
return false; return false;
} }
}, },
toArrayifObject: function(val) {
return _.isObject(val) ? [val] : val;
},
startsWith: function(str, matchStr) { startsWith: function(str, matchStr) {
if (str && matchStr && _.isString(str) && _.isString(matchStr)) { if (str && matchStr && _.isString(str) && _.isString(matchStr)) {
return str.lastIndexOf(matchStr, 0) === 0 return str.lastIndexOf(matchStr, 0) === 0
......
dashboardv2/public/js/utils/Utils.js
...@@ -599,27 +599,56 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -599,27 +599,56 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
return _.uniq(superTypes); return _.uniq(superTypes);
} }
Utils.getNestedSuperTypeObj = function(options) { Utils.getNestedSuperTypeObj = function(options) {
var flag = 0, var mainData = options.data,
data = options.data, collection = options.collection,
collection = options.collection; attrMerge = options.attrMerge,
if (options.attrMerge) { mergeRelationAttributes = options.mergeRelationAttributes || false,
var attributeDefs = []; seperateRelatioshipAttr = options.seperateRelatioshipAttr || false;
} else { if (mergeRelationAttributes && seperateRelatioshipAttr) {
var attributeDefs = {}; throw "Both mergeRelationAttributes & seperateRelatioshipAttr cannot be true!"
}
var attributeDefs = {};
if (attrMerge && !seperateRelatioshipAttr) {
attributeDefs = [];
} else if (options.attrMerge && seperateRelatioshipAttr) {
attributeDefs = {
attributeDefs: [],
relationshipAttributeDefs: []
}
}
var getRelationshipAttributeDef = function(data) {
return _.filter(
data.relationshipAttributeDefs,
function(obj, key) {
return obj;
})
} }
var getData = function(data, collection) { var getData = function(data, collection) {
if (options.attrMerge) { if (options.attrMerge) {
attributeDefs = attributeDefs.concat(data.attributeDefs); if (seperateRelatioshipAttr) {
attributeDefs.attributeDefs = attributeDefs.attributeDefs.concat(data.attributeDefs);
attributeDefs.relationshipAttributeDefs = attributeDefs.relationshipAttributeDefs.concat(getRelationshipAttributeDef(data));
} else {
attributeDefs = attributeDefs.concat(data.attributeDefs);
if (mergeRelationAttributes) {
attributeDefs = attributeDefs.concat(getRelationshipAttributeDef(data));
}
}
} else { } else {
if (attributeDefs[data.name]) { if (attributeDefs[data.name]) {
if (_.isArray(attributeDefs[data.name])) { attributeDefs[data.name] = _.toArrayifObject(attributeDefs[data.name]).concat(data.attributeDefs);
attributeDefs[data.name] = attributeDefs[data.name].concat(data.attributeDefs); } else {
if (seperateRelatioshipAttr) {
attributeDefs[data.name] = {
attributeDefs: data.attributeDefs,
relationshipAttributeDefs: data.relationshipAttributeDefs
};
} else { } else {
_.extend(attributeDefs[data.name], data.attributeDefs); attributeDefs[data.name] = data.attributeDefs;
if (mergeRelationAttributes) {
attributeDefs[data.name] = _.toArrayifObject(attributeDefs[data.name]).concat(getRelationshipAttributeDef(data));
}
} }
} else {
attributeDefs[data.name] = data.attributeDefs;
} }
} }
if (data.superTypes && data.superTypes.length) { if (data.superTypes && data.superTypes.length) {
...@@ -638,7 +667,27 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -638,7 +667,27 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
}); });
} }
} }
getData(data, collection); getData(mainData, collection);
if (attrMerge) {
if (seperateRelatioshipAttr) {
attributeDefs = {
attributeDefs: _.uniq(_.sortBy(attributeDefs.attributeDefs, 'name'), true, function(obj) {
return obj.name
}),
relationshipAttributeDefs: _.uniq(_.sortBy(attributeDefs.relationshipAttributeDefs, 'name'), true, function(obj) {
return (obj.name + obj.relationshipTypeName)
})
}
} else {
attributeDefs = _.uniq(_.sortBy(attributeDefs, 'name'), true, function(obj) {
if (obj.relationshipTypeName) {
(obj.name + obj.relationshipTypeName)
} else {
(obj.name)
}
});
}
}
return attributeDefs; return attributeDefs;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment