Skip to content

A
atlas
Commit a5e5cec6 by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-2951: UI : Show entity specific icon for the lineage node

Signed-off-by: 's avatarSarath Subramanian <ssubramanian@hortonworks.com>
parent b919d3d0
Showing with 448 additions and 106 deletions
dashboardv2/gruntfile.js
...@@ -144,7 +144,8 @@ module.exports = function(grunt) { ...@@ -144,7 +144,8 @@ module.exports = function(grunt) {
}], }],
'query-builder.default.min.css': { 'jQuery-QueryBuilder/dist/css': 'jQueryQueryBuilder/css' }, 'query-builder.default.min.css': { 'jQuery-QueryBuilder/dist/css': 'jQueryQueryBuilder/css' },
'daterangepicker.css': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/css' }, 'daterangepicker.css': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/css' },
'nv.d3.min.css': { 'nvd3/build': 'nvd3/css' } 'nv.d3.min.css': { 'nvd3/build': 'nvd3/css' },
'pretty-checkbox.min.css': { 'pretty-checkbox/dist': 'pretty-checkbox/css' }
} }
}, },
...@@ -168,7 +169,8 @@ module.exports = function(grunt) { ...@@ -168,7 +169,8 @@ module.exports = function(grunt) {
{ 'dagre-d3': 'dagre-d3' }, { 'dagre-d3': 'dagre-d3' },
{ 'platform': 'platform/' }, { 'platform': 'platform/' },
{ 'jQuery-QueryBuilder': 'jQueryQueryBuilder/' }, { 'jQuery-QueryBuilder': 'jQueryQueryBuilder/' },
{ 'moment-timezone': 'moment-timezone' } { 'moment-timezone': 'moment-timezone' },
{ 'pretty-checkbox': 'pretty-checkbox' }
], ],
'LICENSE.md': [{ 'backbone.babysitter': 'backbone-babysitter' }, 'LICENSE.md': [{ 'backbone.babysitter': 'backbone-babysitter' },
{ 'backbone.wreqr': 'backbone-wreqr' }, { 'backbone.wreqr': 'backbone-wreqr' },
......
dashboardv2/package.json
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
"nvd3": "1.8.5", "nvd3": "1.8.5",
"platform": "1.3.4", "platform": "1.3.4",
"pnotify": "3.2.0", "pnotify": "3.2.0",
"pretty-checkbox": "3.0.3",
"requirejs": "2.3.3", "requirejs": "2.3.3",
"requirejs-text": "2.0.15", "requirejs-text": "2.0.15",
"select2": "4.0.3", "select2": "4.0.3",
......
dashboardv2/public/css/scss/graph.scss
...@@ -28,33 +28,41 @@ ...@@ -28,33 +28,41 @@
.node { .node {
cursor: pointer; cursor: pointer;
text { text {
font-size: 10px; font-size: 10px;
font-family: $font_1; font-family: $font_1;
} }
rect { rect {
stroke: $color_mountain_mist_approx; stroke: $color_mountain_mist_approx;
fill: $white; fill: $white;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.label { .label {
fill: $color_suva_gray_approx; fill: $color_suva_gray_approx;
} }
circle { circle {
-moz-transition: all 0.3s; -moz-transition: all 0.3s;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
stroke-width: 1.5px; stroke-width: 1.5px;
&.nodeImage { &.nodeImage {
&.green:hover { &.green:hover {
stroke: #8bc152; stroke: #ffb203;
} }
&.blue:hover { &.blue:hover {
stroke: #4b91e2; stroke: #4b91e2;
} }
&.currentNode { &.currentNode {
stroke: #fb4200; stroke: #fb4200;
} }
&:hover { &:hover {
-moz-transform: scale(1.4); -moz-transform: scale(1.4);
-webkit-transform: scale(1.4); -webkit-transform: scale(1.4);
...@@ -62,15 +70,18 @@ ...@@ -62,15 +70,18 @@
} }
} }
} }
&.active { &.active {
circle { circle {
-moz-transform: scale(1.4); -moz-transform: scale(1.4);
-webkit-transform: scale(1.4); -webkit-transform: scale(1.4);
transform: scale(1.4); transform: scale(1.4);
&.nodeImage { &.nodeImage {
&.green { &.green {
stroke: #8bc152; stroke: #ffb203;
} }
&.blue { &.blue {
stroke: #4b91e2; stroke: #4b91e2;
} }
...@@ -102,10 +113,12 @@ ...@@ -102,10 +113,12 @@
z-index: 999; z-index: 999;
max-width: 300px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius) max-width: 300px; //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 2px; border-radius: 2px;
.tip-inner-scroll { .tip-inner-scroll {
overflow: auto; overflow: auto;
max-height: 300px; max-height: 300px;
} }
/* Creates a small triangle extender for the tooltip */ /* Creates a small triangle extender for the tooltip */
&:after { &:after {
box-sizing: border-box; box-sizing: border-box;
...@@ -116,6 +129,7 @@ ...@@ -116,6 +129,7 @@
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
position: absolute; position: absolute;
} }
/* Nrthward tooltips */ /* Nrthward tooltips */
&.n:after { &.n:after {
content: "\25BC"; content: "\25BC";
...@@ -124,6 +138,7 @@ ...@@ -124,6 +138,7 @@
left: 0; left: 0;
text-align: center; text-align: center;
} }
/* Eastward tooltips */ /* Eastward tooltips */
&.e:after { &.e:after {
content: "\25C0"; content: "\25C0";
...@@ -131,6 +146,7 @@ ...@@ -131,6 +146,7 @@
top: 50%; top: 50%;
left: -8px; left: -8px;
} }
/* Southward tooltips */ /* Southward tooltips */
&.s:after { &.s:after {
content: "\25B2"; content: "\25B2";
...@@ -139,6 +155,7 @@ ...@@ -139,6 +155,7 @@
left: 0; left: 0;
text-align: center; text-align: center;
} }
/* Westward tooltips */ /* Westward tooltips */
&.w:after { &.w:after {
content: "\25B6"; content: "\25B6";
...@@ -152,10 +169,6 @@ g.type-TK>rect { ...@@ -152,10 +169,6 @@ g.type-TK>rect {
fill: $color_bright_turquoise_approx; fill: $color_bright_turquoise_approx;
} }
.hideProcessContainer {
position: absolute;
top: 12px;
}
.graph-toolbar { .graph-toolbar {
background-color: $white; background-color: $white;
...@@ -183,9 +196,11 @@ g.type-TK>rect { ...@@ -183,9 +196,11 @@ g.type-TK>rect {
transform: scaleX(0); transform: scaleX(0);
width: 200px; width: 200px;
transition: transform 0.3s ease-in; transition: transform 0.3s ease-in;
&.open { &.open {
transform: scaleX(1); transform: scaleX(1);
} }
.title { .title {
background: black; background: black;
color: white; color: white;
...@@ -193,12 +208,14 @@ g.type-TK>rect { ...@@ -193,12 +208,14 @@ g.type-TK>rect {
padding-left: 17px; padding-left: 17px;
margin-top: 0; margin-top: 0;
font-size: 14px; font-size: 14px;
.navigation-font { .navigation-font {
font-family: sans-serif; font-family: sans-serif;
padding: 0px 5px; padding: 0px 5px;
color: #fb4200; color: #fb4200;
} }
} }
.close-details { .close-details {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -209,12 +226,14 @@ g.type-TK>rect { ...@@ -209,12 +226,14 @@ g.type-TK>rect {
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
} }
.propagation-list { .propagation-list {
overflow: auto; overflow: auto;
list-style-type: none; list-style-type: none;
list-style-position: outside; list-style-position: outside;
padding-left: 30px; padding-left: 30px;
} }
.overlay { .overlay {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -224,6 +243,7 @@ g.type-TK>rect { ...@@ -224,6 +243,7 @@ g.type-TK>rect {
background: #d2d2d2b8; background: #d2d2d2b8;
z-index: 99; z-index: 99;
} }
ul>li { ul>li {
word-wrap: break-word; word-wrap: break-word;
margin-bottom: 5px; margin-bottom: 5px;
...@@ -240,13 +260,94 @@ g.type-TK>rect { ...@@ -240,13 +260,94 @@ g.type-TK>rect {
box-shadow: 1px 3px 3px 2px #bfbfbf; box-shadow: 1px 3px 3px 2px #bfbfbf;
} }
.zoomButtonGroup { .graph-button-group {
text-align: right; position: absolute;
top: 5px;
right: 5px;
.zoom-button-group {
margin-top: 8px;
border: 1px solid;
border-radius: 5px;
background-color: white;
[type="button"] {
display: block;
padding: 2px 6px;
cursor: pointer;
}
}
}
.lineage-fltr-panel {
position: absolute;
border: 1px solid #ccc;
width: 250px;
max-height: 99%;
overflow: auto;
transition: all 0.3s ease;
right: -273px;
box-shadow: 9px -14px 26px 6px;
background-color: #f5f5f5;
//color: $white;
z-index: 999;
.header {
background: black;
color: white;
text-align: center;
margin-bottom: 15px;
position: absolute;
width: 100%;
>h4 {
padding: 0px 36px 0px 10px;
word-break: break-all;
}
.fltr-togler {
position: absolute;
right: 0px;
top: 0px;
}
}
.body {
padding: 10px;
margin-top: 39px;
width: 100%;
position: relative;
height: 200px;
overflow: auto;
}
}
.show-filter-panel {
right: 0px !important;
}
.btn-gray {
border: 1px solid #686868;
color: $dark_gray;
background: white;
}
.btn-gray:hover {
border: 1px solid #686868;
color: $dark_gray !important;
background-color: transparent !important;
}
span#zoom_in {
border-bottom: 1px solid #625555;
} }
.depthContainer { .depthContainer {
display: inline-block;
margin-top: 3px; //display: inline-block;
//margin-top: 3px;
.inline { .inline {
display: inline-block; display: inline-block;
} }
......
dashboardv2/public/css/scss/override.scss
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
.tabs li.tab.active { .tabs li.tab.active {
border-bottom: 2px solid $color_keppel_approx; border-bottom: 2px solid $color_keppel_approx;
a { a {
color: $color_keppel_approx; color: $color_keppel_approx;
} }
...@@ -40,6 +41,7 @@ ...@@ -40,6 +41,7 @@
padding: 15px; padding: 15px;
text-align: right; text-align: right;
border-top: 1px solid #DEDEDE; border-top: 1px solid #DEDEDE;
.btn+.btn { .btn+.btn {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -51,6 +53,7 @@ ...@@ -51,6 +53,7 @@
max-height: 400px; max-height: 400px;
min-height: 70px; min-height: 70px;
overflow: auto; overflow: auto;
.btn+.btn { .btn+.btn {
margin-bottom: 2px; margin-bottom: 2px;
} }
...@@ -71,14 +74,17 @@ ...@@ -71,14 +74,17 @@
box-shadow: 0px 0px 4px #d8d8d8; box-shadow: 0px 0px 4px #d8d8d8;
overflow: scroll !important; overflow: scroll !important;
max-height: 500px; max-height: 500px;
.resizeHandler { .resizeHandler {
&.grid-draggable { &.grid-draggable {
background-color: $color_jungle_green_approx !important; background-color: $color_jungle_green_approx !important;
} }
&:hover { &:hover {
border-left: 1px solid #d2d2d2; border-left: 1px solid #d2d2d2;
} }
} }
>thead>tr>th { >thead>tr>th {
border-width: thin; border-width: thin;
border-color: $color_jungle_green_approx; border-color: $color_jungle_green_approx;
...@@ -93,6 +99,7 @@ ...@@ -93,6 +99,7 @@
letter-spacing: 0.25px; letter-spacing: 0.25px;
color: rgba(52, 52, 52, 1); color: rgba(52, 52, 52, 1);
} }
>tbody>tr>td { >tbody>tr>td {
border-color: $color_gallery_approx; border-color: $color_gallery_approx;
color: #333333; color: #333333;
...@@ -102,6 +109,7 @@ ...@@ -102,6 +109,7 @@
} }
td { td {
div.scroll-y, div.scroll-y,
pre.scroll-y { pre.scroll-y {
max-height: 200px; max-height: 200px;
...@@ -113,6 +121,7 @@ td { ...@@ -113,6 +121,7 @@ td {
td { td {
white-space: normal; white-space: normal;
} }
.select-all-header-cell { .select-all-header-cell {
width: 42px; width: 42px;
} }
...@@ -152,9 +161,11 @@ td { ...@@ -152,9 +161,11 @@ td {
background: $transparent; background: $transparent;
color: $color_keppel_approx; color: $color_keppel_approx;
@include ellipsis(); @include ellipsis();
i { i {
font-weight: bold; font-weight: bold;
} }
&:hover { &:hover {
color: $white; color: $white;
background: $color_keppel_approx background: $color_keppel_approx
...@@ -165,6 +176,7 @@ td { ...@@ -165,6 +176,7 @@ td {
>.disabled>a, >.disabled>a,
>li>button[disabled] { >li>button[disabled] {
color: $color_mountain_mist_approx; color: $color_mountain_mist_approx;
&:hover { &:hover {
cursor: not-allowed; cursor: not-allowed;
color: $white; color: $white;
...@@ -177,32 +189,58 @@ td { ...@@ -177,32 +189,58 @@ td {
width: 100% !important; width: 100% !important;
} }
.select2-mini {
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
min-height: 28px;
}
.select2-container--default .select2-selection--single {
.select2-selection__rendered {
line-height: 28px;
font-size: 13px;
}
.select2-selection__arrow {
height: 28px;
}
}
}
.select2-container--default { .select2-container--default {
.select2-selection--multiple { .select2-selection--multiple {
background-color: $color_white_lilac_approx !important; background-color: $color_white_lilac_approx !important;
border: 1px $color_mystic_approx solid !important; border: 1px $color_mystic_approx solid !important;
&.errorClass { &.errorClass {
border: 1px solid red !important; border: 1px solid red !important;
} }
} }
.select2-selection--single { .select2-selection--single {
.select2-selection__arrow { .select2-selection__arrow {
height: 34px; height: 34px;
} }
.select2-selection__rendered { .select2-selection__rendered {
line-height: 32px; line-height: 32px;
font-size: 14px; font-size: 14px;
} }
} }
&.select2-container--focus .select2-selection--multiple { &.select2-container--focus .select2-selection--multiple {
border-color: $color_bali_hai_approx !important; border-color: $color_bali_hai_approx !important;
} }
} }
.select2-container { .select2-container {
.select2-selection--single, .select2-selection--single,
.select2-selection--multiple { .select2-selection--multiple {
min-height: 34px; min-height: 34px;
.select2-selection__rendered { .select2-selection__rendered {
padding-left: 12px; padding-left: 12px;
} }
...@@ -225,15 +263,18 @@ td { ...@@ -225,15 +263,18 @@ td {
.select2-selection--multiple { .select2-selection--multiple {
.select2-selection__rendered { .select2-selection__rendered {
padding-right: 13px; padding-right: 13px;
.select2-selection__choice { .select2-selection__choice {
font-size: 14px; font-size: 14px;
color: $color_mountain_mist_approx; color: $color_mountain_mist_approx;
border: 1px solid $color_mountain_mist_approx; border: 1px solid $color_mountain_mist_approx;
} }
.select2-search__field { .select2-search__field {
font-size: 14px; font-size: 14px;
} }
} }
.select2-selection__clear { .select2-selection__clear {
position: absolute; position: absolute;
float: none; float: none;
...@@ -267,11 +308,13 @@ td { ...@@ -267,11 +308,13 @@ td {
.popover-content { .popover-content {
max-height: 150px; max-height: 150px;
overflow: auto; overflow: auto;
ul { ul {
color: $dark_gray; color: $dark_gray;
padding: 0px 5px; padding: 0px 5px;
margin-bottom: 0px; margin-bottom: 0px;
cursor: pointer; cursor: pointer;
a { a {
color: $dark_gray; color: $dark_gray;
padding: 5px; padding: 5px;
...@@ -291,35 +334,43 @@ td { ...@@ -291,35 +334,43 @@ td {
.query-builder { .query-builder {
.rule-container { .rule-container {
margin: 6px 0; margin: 6px 0;
.rule-header { .rule-header {
.rule-actions { .rule-actions {
padding: 7px 0px; padding: 7px 0px;
} }
} }
.rule-value-container { .rule-value-container {
display: inline-block !important; display: inline-block !important;
.form-control { .form-control {
width: 220px !important; width: 220px !important;
padding: 6px 12px !important; padding: 6px 12px !important;
} }
} }
.rule-filter-container { .rule-filter-container {
.form-control { .form-control {
width: 200px !important; width: 200px !important;
} }
} }
.rule-operator-container { .rule-operator-container {
.form-control { .form-control {
width: auto !important; width: auto !important;
} }
} }
} }
.rules-list>:first-child::before { .rules-list>:first-child::before {
top: -8px; top: -8px;
} }
.rules-group-container { .rules-group-container {
border-color: transparent; border-color: transparent;
background: none; background: none;
.rules-group-header { .rules-group-header {
.group-actions { .group-actions {
.btn-success { .btn-success {
...@@ -327,18 +378,21 @@ td { ...@@ -327,18 +378,21 @@ td {
background-color: transparent !important; background-color: transparent !important;
border-color: #38BB9B !important; border-color: #38BB9B !important;
} }
.btn-danger { .btn-danger {
color: #e14f00; color: #e14f00;
background-color: transparent; background-color: transparent;
border-color: #e14f00; border-color: #e14f00;
} }
} }
.group-conditions { .group-conditions {
.btn-primary { .btn-primary {
color: #333 !important; color: #333 !important;
background-color: #fff !important; background-color: #fff !important;
border-color: #ccc !important; border-color: #ccc !important;
} }
.active { .active {
color: #fff !important; color: #fff !important;
background-color: #5bc0de !important; background-color: #5bc0de !important;
...@@ -357,6 +411,7 @@ td { ...@@ -357,6 +411,7 @@ td {
div.columnmanager-visibilitycontrol { div.columnmanager-visibilitycontrol {
width: auto; width: auto;
margin-bottom: 5px; margin-bottom: 5px;
&.open .btn-action { &.open .btn-action {
background-color: #37bb9b; background-color: #37bb9b;
color: #fff; color: #fff;
...@@ -367,6 +422,7 @@ div.columnmanager-dropdown-container { ...@@ -367,6 +422,7 @@ div.columnmanager-dropdown-container {
&.open { &.open {
overflow: auto; overflow: auto;
} }
>li>span.column-label { >li>span.column-label {
width: auto; width: auto;
} }
...@@ -378,16 +434,19 @@ div.columnmanager-dropdown-container { ...@@ -378,16 +434,19 @@ div.columnmanager-dropdown-container {
left: calc(50% - 250px) !important; left: calc(50% - 250px) !important;
margin-left: 0 !important; margin-left: 0 !important;
} }
&.width-500 { &.width-500 {
width: 500px !important; width: 500px !important;
left: calc(50% - 216px) !important; left: calc(50% - 216px) !important;
margin-left: 0 !important; margin-left: 0 !important;
} }
&.width-400 { &.width-400 {
width: 400px !important; width: 400px !important;
left: calc(50% - 183px); left: calc(50% - 183px);
margin-left: 0 !important; margin-left: 0 !important;
} }
.alert.ui-pnotify-container { .alert.ui-pnotify-container {
color: $color_ironside_gray_approx; color: $color_ironside_gray_approx;
background-color: $white; background-color: $white;
...@@ -396,10 +455,12 @@ div.columnmanager-dropdown-container { ...@@ -396,10 +455,12 @@ div.columnmanager-dropdown-container {
outline: 0; outline: 0;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
.ui-pnotify-icon, .ui-pnotify-icon,
.ui-pnotify-title { .ui-pnotify-title {
padding: 15px; padding: 15px;
} }
.ui-pnotify-text { .ui-pnotify-text {
position: relative; position: relative;
padding: 15px; padding: 15px;
...@@ -426,7 +487,7 @@ div.columnmanager-dropdown-container { ...@@ -426,7 +487,7 @@ div.columnmanager-dropdown-container {
border-radius: 11px; border-radius: 11px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
background-color: transparent!important; background-color: transparent !important;
color: #626467; color: #626467;
border: 1px solid black; border: 1px solid black;
} }
......
dashboardv2/public/css/scss/relationship.scss
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
fill: none; fill: none;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.relationship-details { .relationship-details {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -32,15 +33,19 @@ ...@@ -32,15 +33,19 @@
transform: scaleX(0); transform: scaleX(0);
width: 240px; width: 240px;
transition: transform 0.3s ease-in; transition: transform 0.3s ease-in;
&.open { &.open {
transform: scaleX(1); transform: scaleX(1);
} }
.title { .title {
background: black; background: black;
color: white; color: white;
padding: 10px; padding: 10px 38px 10px 10px;
word-break: break-all;
margin-top: 0; margin-top: 0;
} }
.close-details { .close-details {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -51,12 +56,14 @@ ...@@ -51,12 +56,14 @@
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
} }
.entity-list { .entity-list {
overflow: auto; overflow: auto;
list-style-type: decimal; list-style-type: decimal;
list-style-position: outside; list-style-position: outside;
padding-left: 15px; padding-left: 15px;
} }
ul>li { ul>li {
word-wrap: break-word; word-wrap: break-word;
margin-bottom: 5px; margin-bottom: 5px;
...@@ -66,6 +73,7 @@ ...@@ -66,6 +73,7 @@
a { a {
color: #BB5838 !important; color: #BB5838 !important;
} }
.deleteBtn { .deleteBtn {
padding: 2px 8px !important; padding: 2px 8px !important;
margin: 5px 5px !important; margin: 5px 5px !important;
......
dashboardv2/public/css/scss/theme.scss
...@@ -33,25 +33,31 @@ header { ...@@ -33,25 +33,31 @@ header {
.header-menu { .header-menu {
.dropdown-menu>li>a { .dropdown-menu>li>a {
color: $color_ironside_gray_approx; color: $color_ironside_gray_approx;
&:hover { &:hover {
color: $color_jungle_green_approx; color: $color_jungle_green_approx;
} }
i { i {
padding-right: 3px; padding-right: 3px;
} }
} }
>a { >a {
display: inline-block; display: inline-block;
color: $color_ironside_gray_approx; color: $color_ironside_gray_approx;
padding: 15px 14px; padding: 15px 14px;
&:hover { &:hover {
border-bottom: 2px solid $color_jungle_green_approx; border-bottom: 2px solid $color_jungle_green_approx;
padding: 14px 14px; padding: 14px 14px;
color: $color_jungle_green_approx; color: $color_jungle_green_approx;
} }
span { span {
padding: 5px; padding: 5px;
} }
i { i {
font-size: 18px; font-size: 18px;
} }
...@@ -68,6 +74,7 @@ header { ...@@ -68,6 +74,7 @@ header {
font-size: 18px; font-size: 18px;
font-style: italic; font-style: italic;
} }
.input-group-addon { .input-group-addon {
font-size: 20px; font-size: 20px;
color: $color_bombay_approx; color: $color_bombay_approx;
...@@ -84,6 +91,7 @@ header { ...@@ -84,6 +91,7 @@ header {
#sideNav-wrapper { #sideNav-wrapper {
color: $white; color: $white;
font-size: 16px !important; font-size: 16px !important;
.well { .well {
background-color: $color_tuna_approx; background-color: $color_tuna_approx;
border: 1px solid #666363; border: 1px solid #666363;
...@@ -93,19 +101,26 @@ header { ...@@ -93,19 +101,26 @@ header {
} }
.page-title { .page-title {
background-color: $white; background-color: $color_white_lilac_approx;
padding: 10px 15px; padding: 10px 15px 0px 15px;
.title { .title {
padding-top: 0; padding-top: 0;
margin-top: 0; margin-top: 0;
} }
h1 { h1 {
&.title {
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();
max-width: 91%; max-width: 91%;
display: inline-block; display: inline-block;
small { small {
position: relative; position: relative;
bottom: 5px; bottom: 5px;
...@@ -118,6 +133,7 @@ header { ...@@ -118,6 +133,7 @@ header {
text-transform: uppercase; text-transform: uppercase;
} }
} }
.sub-title { .sub-title {
margin-bottom: 40px; margin-bottom: 40px;
} }
...@@ -138,12 +154,14 @@ header { ...@@ -138,12 +154,14 @@ header {
a { a {
color: $color_jungle_green_approx; color: $color_jungle_green_approx;
cursor: pointer; cursor: pointer;
&:focus { &:focus {
color: $color_puerto_rico_approx; color: $color_puerto_rico_approx;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
} }
&:hover { &:hover {
color: $color_puerto_rico_approx; color: $color_puerto_rico_approx;
text-decoration: none; text-decoration: none;
...@@ -158,11 +176,13 @@ a { ...@@ -158,11 +176,13 @@ a {
.blue-link { .blue-link {
color: $color_havelock_blue_approx; color: $color_havelock_blue_approx;
&:focus { &:focus {
color: $color_havelock_blue_approx; color: $color_havelock_blue_approx;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
} }
&:hover { &:hover {
color: $color_havelock_blue_approx; color: $color_havelock_blue_approx;
text-decoration: underline; text-decoration: underline;
...@@ -190,6 +210,7 @@ hr[size="10"] { ...@@ -190,6 +210,7 @@ hr[size="10"] {
margin-bottom: 2px; margin-bottom: 2px;
background-color: $white; background-color: $white;
max-width: none; max-width: none;
.table { .table {
width: auto; width: auto;
} }
...@@ -227,13 +248,16 @@ hr[size="10"] { ...@@ -227,13 +248,16 @@ hr[size="10"] {
padding: 25px 0; padding: 25px 0;
margin-top: 25px; margin-top: 25px;
border-top: 1px $color_mystic_approx solid; border-top: 1px $color_mystic_approx solid;
.comment { .comment {
margin-bottom: 25px; margin-bottom: 25px;
} }
.author { .author {
color: $color_keppel_approx; color: $color_keppel_approx;
margin-bottom: 0; margin-bottom: 0;
} }
.date { .date {
color: $color_star_dust_approx; color: $color_star_dust_approx;
} }
...@@ -318,9 +342,11 @@ hr[size="10"] { ...@@ -318,9 +342,11 @@ hr[size="10"] {
.readOnlyLink { .readOnlyLink {
@include ellipsis(); @include ellipsis();
.deleteBtn { .deleteBtn {
padding: 0px 5px; padding: 0px 5px;
} }
a { a {
color: $delete_link !important; color: $delete_link !important;
} }
...@@ -348,6 +374,7 @@ fieldset.fieldset-child-pd>div { ...@@ -348,6 +374,7 @@ fieldset.fieldset-child-pd>div {
.inline-content { .inline-content {
>.inline { >.inline {
display: inline-block; display: inline-block;
&+.inline { &+.inline {
margin-left: 5px; margin-left: 5px;
} }
...@@ -356,6 +383,7 @@ fieldset.fieldset-child-pd>div { ...@@ -356,6 +383,7 @@ fieldset.fieldset-child-pd>div {
.inline-content-fl { .inline-content-fl {
@extend .inline-content; @extend .inline-content;
>.inline { >.inline {
display: block; display: block;
float: left; float: left;
...@@ -364,8 +392,10 @@ fieldset.fieldset-child-pd>div { ...@@ -364,8 +392,10 @@ fieldset.fieldset-child-pd>div {
.inline-content-fr { .inline-content-fr {
@extend .inline-content-fl; @extend .inline-content-fl;
>.inline { >.inline {
float: right; float: right;
&+.inline { &+.inline {
margin-right: 5px; margin-right: 5px;
} }
...@@ -373,6 +403,7 @@ fieldset.fieldset-child-pd>div { ...@@ -373,6 +403,7 @@ fieldset.fieldset-child-pd>div {
} }
.has-error { .has-error {
.select2-selection--single, .select2-selection--single,
.select2-selection--multiple { .select2-selection--multiple {
border-color: $color_apple_blossom_approx; border-color: $color_apple_blossom_approx;
...@@ -383,3 +414,20 @@ fieldset.fieldset-child-pd>div { ...@@ -383,3 +414,20 @@ fieldset.fieldset-child-pd>div {
position: absolute; position: absolute;
right: 0px; right: 0px;
} }
.entity-icon-box {
display: inline-block;
background: #cee0fa;
padding: 10px;
border-radius: 50%;
min-width: 76.25px;
min-height: 70px;
&.disabled {
background: #e3e3e3;
}
img {
height: 50px;
}
}
\ No newline at end of file
dashboardv2/public/index.html.tpl
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
<link href="js/libs/bootstrap-daterangepicker/css/daterangepicker.css?bust=<%- bust %>" rel="stylesheet"> <link href="js/libs/bootstrap-daterangepicker/css/daterangepicker.css?bust=<%- bust %>" rel="stylesheet">
<link rel="stylesheet" href="js/libs/nvd3/css/nv.d3.min.css?bust=<%- bust %>"> <link rel="stylesheet" href="js/libs/nvd3/css/nv.d3.min.css?bust=<%- bust %>">
<link href="js/libs/jstree/css/default-dark/default-dark-theme.min.css?bust=<%- bust %>" rel="stylesheet"> <link href="js/libs/jstree/css/default-dark/default-dark-theme.min.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/pretty-checkbox/css/pretty-checkbox.min.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/jstree/css/default/default-theme.min.css?bust=<%- bust %>" rel="stylesheet"> <link href="js/libs/jstree/css/default/default-theme.min.css?bust=<%- bust %>" rel="stylesheet">
<link href="css/style.css?bust=<%- bust %>" rel="stylesheet"> <link href="css/style.css?bust=<%- bust %>" rel="stylesheet">
</head> </head>
......
dashboardv2/public/js/main.js
...@@ -229,17 +229,18 @@ require(['App', ...@@ -229,17 +229,18 @@ require(['App',
CommonViewFunction.userDataFetch({ CommonViewFunction.userDataFetch({
url: UrlLinks.sessionApiUrl(), url: UrlLinks.sessionApiUrl(),
callback: function(response) { callback: function(response) {
if (response && response.userName) { if (response) {
if (response.userName) {
Globals.userLogedIn.status = true; Globals.userLogedIn.status = true;
Globals.userLogedIn.response = response; Globals.userLogedIn.response = response;
} }
if (response && response['atlas.entity.create.allowed'] !== undefined) { if (response['atlas.entity.create.allowed'] !== undefined) {
Globals.entityCreate = response['atlas.entity.create.allowed']; Globals.entityCreate = response['atlas.entity.create.allowed'];
} }
if (response && response['atlas.entity.update.allowed'] !== undefined) { if (response['atlas.entity.update.allowed'] !== undefined) {
Globals.entityUpdate = response['atlas.entity.update.allowed']; Globals.entityUpdate = response['atlas.entity.update.allowed'];
} }
if (response && response['atlas.ui.editable.entity.types'] !== undefined) { if (response['atlas.ui.editable.entity.types'] !== undefined) {
var entityTypeList = response['atlas.ui.editable.entity.types'].trim().split(","); var entityTypeList = response['atlas.ui.editable.entity.types'].trim().split(",");
if (entityTypeList.length) { if (entityTypeList.length) {
if (entityTypeList[0] === "*") { if (entityTypeList[0] === "*") {
...@@ -249,6 +250,7 @@ require(['App', ...@@ -249,6 +250,7 @@ require(['App',
} }
} }
} }
}
--that.asyncFetchCounter; --that.asyncFetchCounter;
startApp(); startApp();
} }
......
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
...@@ -19,7 +19,11 @@ ...@@ -19,7 +19,11 @@
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
<div class="entityDetail form-horizontal col-sm-12"> <div class="entityDetail form-horizontal col-sm-12">
<h1 class="title row"><span data-id="title"></span></h1> {{#if entityUpdate}} <h1 class="title row">
<div data-id="entityIcon" class="entity-icon-box"></div>
<span data-id="title"></span>
</h1>
{{#if entityUpdate}}
<div data-id="editButtonContainer" class="pull-right"></div> <div data-id="editButtonContainer" class="pull-right"></div>
{{/if}} {{/if}}
<div class="form-group"> <div class="form-group">
...@@ -59,7 +63,7 @@ ...@@ -59,7 +63,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="gray-bg"> <div>
<div class="tab-content"> <div class="tab-content">
<div id="tab-details" role="properties" class="tab-pane active animated fadeIn"> <div id="tab-details" role="properties" class="tab-pane active animated fadeIn">
<div id="r_entityDetailTableLayoutView"> <div id="r_entityDetailTableLayoutView">
......
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -15,36 +15,53 @@ ...@@ -15,36 +15,53 @@
* limitations under the License. * limitations under the License.
--> -->
<!-- <div class="graph-toolbar clearfix"></div> --> <!-- <div class="graph-toolbar clearfix"></div> -->
<div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding lineage-box"> <div style="position: absolute;height:100%;width:100%;overflow: hidden;" class="white-bg no-padding lineage-box">
<div class="lineage-filter-box clearfix"> <div class="lineage-fltr-panel">
<div class="hideProcessContainer"> <div class="header clearfix">
<span class="pull-left"><b>Load Process:</b>&nbsp</span> <h4>Filters</h4>
<span class="pull-left">Show</span> <span data-id="fltr-togler" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
<label class="switch pull-left"> </div>
<input type="checkbox" class="switch-input" data-id="checkHideProcess" value="" /> <div class="body">
<span class="switch-slider"></span> <div class="hideProcessContainer form-group text-left col-sm-12">
</label> <div class="pretty p-switch p-fill">
<span class="pull-left">Hide</span> <input type="checkbox" class="pull-left" data-id="checkHideProcess" value="" />
</div> <div class="state p-primary">
<div class="depthContainer"> <label>Hide Process</label>
<div> </div>
<span class="control-label-sm inline ">Depth :</span> </div>
<div class="select inline" style="width: 80px;"> </div>
<div class="hideDeletedContainer form-group text-left col-sm-12">
<div class="pretty p-switch p-fill">
<input type="checkbox" data-id="checkDeletedEntity" value="" />
<div class="state p-primary">
<label>Hide Deleted Entity</label>
</div>
</div>
</div>
<div class="depthContainer form-group select2-mini">
<label class="control-label col-sm-4">Depth:</label>
<div class="col-sm-4 no-padding">
<select data-id="selectDepth" class="form-control"></select> <select data-id="selectDepth" class="form-control"></select>
</div> </div>
</div> </div>
</div> </div>
<div class="zoomButtonGroup pull-right"> </div>
<span type="button" id="zoom_in" class="btn btn-atlas btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span> <div class="graph-button-group">
<span type="button" id="zoom_out" class="btn btn-atlas btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span> <div>
<button type="button" data-id="fltr-togler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
</div>
<div class="zoom-button-group pull-right">
<span type="button" id="zoom_in" class="btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
<span type="button" id="zoom_out" class="btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
</div> </div>
</div> </div>
<div class="fontLoader"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
<svg width="100%" height="calc(100% - 80px)" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> <div class="legends" style="height: 25px; padding: 2px;">
<div class="legends" style="height: 20px"> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw" aria-hidden="true"></i>Current Entity</span>
<i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;">&nbsp<span>Lineage</span></i> <span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Lineage</span>
<i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Impact</span>
</div> </div>
<svg width="100%" height="calc(100% - 28px)" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
</div> </div>
\ No newline at end of file
dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
...@@ -20,14 +20,17 @@ ...@@ -20,14 +20,17 @@
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
<div style="position: absolute;height:100%;width:100%;"> <div style="position: absolute;height:100%;width:100%;">
<svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> <div class="graph-button-group">
<div class="zoom-button-group">
<span type="button" id="zoom_in" class="btn-md lineageZoomButton" title="Zoom In"> <i class="fa fa-search-plus"></i></span>
<span type="button" id="zoom_out" class="btn-md lineageZoomButton" title="Zoom Out"> <i class="fa fa-search-minus"></i></span>
</div>
</div> </div>
<div class="zoomButtonGroup"> <svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
<span type="button" id="zoom_in" class="btn btn-action btn-md lineageZoomButton" title="Zoom In"> <i class="fa fa-search-plus"></i></span>
<span type="button" id="zoom_out" class="btn btn-action btn-md lineageZoomButton" title="Zoom Out"> <i class="fa fa-search-minus"></i></span>
</div> </div>
<div class="relationship-details"> <div class="relationship-details">
<div data-id="close" class="close-details"><i class="fa fa-times"></i></div> <span data-id="close" style="margin: 7px;position: absolute;right: 0" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
<!-- <div data-id="close" class="close-details"><i class="fa fa-times"></i></div> -->
<h4 class="title"><span data-id="typeName"></span></h4> <h4 class="title"><span data-id="typeName"></span></h4>
<div class="col-md-12"> <div class="col-md-12">
<input data-id="searchNode" class="form-control form-group" placeholder="Search Entities" /> <input data-id="searchNode" class="form-control form-group" placeholder="Search Entities" />
......
dashboardv2/public/js/utils/Globals.js
...@@ -36,5 +36,6 @@ define(['require'], function(require) { ...@@ -36,5 +36,6 @@ define(['require'], function(require) {
status: false, status: false,
response: {} response: {}
} }
Globals.entityImgPath = "/img/entity-icon/"
return Globals; return Globals;
}); });
\ No newline at end of file
dashboardv2/public/js/utils/Utils.js
...@@ -76,6 +76,49 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -76,6 +76,49 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
Utils.getBaseUrl = function(url) { Utils.getBaseUrl = function(url) {
return url.replace(/\/[\w-]+.(jsp|html)|\/+$/ig, ''); return url.replace(/\/[\w-]+.(jsp|html)|\/+$/ig, '');
}; };
Utils.getEntityIconPath = function(options) {
var entityData = null,
serviceType = null,
status = null,
iconBasePath = Utils.getBaseUrl(window.location.pathname) + Globals.entityImgPath;
if (options) {
entityData = options.entityData;
serviceType = entityData && entityData.serviceType;
status = entityData && entityData.status;
}
if (entityData) {
if (options.errorUrl) {
var isErrorInDefaultServiceType = (serviceType && options.errorUrl && options.errorUrl.match("/" + serviceType + "/" + serviceType + ".png|/" + serviceType + "/disabled/" + serviceType + ".png") ? true : false);
if (serviceType && !isErrorInDefaultServiceType) {
var imageName = serviceType + ".png";
return iconBasePath + serviceType + (Enums.entityStateReadOnly[status] ? "/disabled/" + imageName : "/" + imageName);
} else {
if (entityData.isProcess) {
if (Enums.entityStateReadOnly[status]) {
return iconBasePath + 'default/disabled/process.png';
} else {
return iconBasePath + 'default/process.png';
}
} else {
if (Enums.entityStateReadOnly[status]) {
return iconBasePath + 'default/disabled/table.png';
} else {
return iconBasePath + 'default/table.png';
}
}
}
} else {
var imageName = entityData.typeName + ".png";
if (serviceType) {
return iconBasePath + serviceType + (Enums.entityStateReadOnly[status] ? "/disabled/" + imageName : "/" + imageName);
} else {
return iconBasePath + (Enums.entityStateReadOnly[status] ? "default/disabled/" + imageName : "default/" + imageName);
}
}
}
}
pnotify.prototype.options.styling = "fontawesome"; pnotify.prototype.options.styling = "fontawesome";
var notify = function(options) { var notify = function(options) {
return new pnotify(_.extend({ return new pnotify(_.extend({
......
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -66,7 +66,8 @@ define(['require', ...@@ -66,7 +66,8 @@ define(['require',
termList: '[data-id="termList"]', termList: '[data-id="termList"]',
propagatedTagList: '[data-id="propagatedTagList"]', propagatedTagList: '[data-id="propagatedTagList"]',
fullscreenPanel: "#fullscreen_panel", fullscreenPanel: "#fullscreen_panel",
tablist: '[data-id="tab-list"] li' tablist: '[data-id="tab-list"] li',
entityIcon: '[data-id="entityIcon"]'
}, },
templateHelpers: function() { templateHelpers: function() {
return { return {
...@@ -126,6 +127,7 @@ define(['require', ...@@ -126,6 +127,7 @@ define(['require',
this.listenTo(this.collection, 'reset', function() { this.listenTo(this.collection, 'reset', function() {
this.entityObject = this.collection.first().toJSON(); this.entityObject = this.collection.first().toJSON();
var collectionJSON = this.entityObject.entity; var collectionJSON = this.entityObject.entity;
this.activeEntityDef = this.entityDefCollection.fullCollection.find({ name: collectionJSON.typeName });
if (collectionJSON && _.startsWith(collectionJSON.typeName, "AtlasGlossary")) { if (collectionJSON && _.startsWith(collectionJSON.typeName, "AtlasGlossary")) {
this.$(".termBox").hide(); this.$(".termBox").hide();
...@@ -161,6 +163,15 @@ define(['require', ...@@ -161,6 +163,15 @@ define(['require',
titleName += '<button title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i> Deleted</button>'; titleName += '<button title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i> Deleted</button>';
} }
this.ui.title.html(titleName); this.ui.title.html(titleName);
var entityData = _.extend({ serviceType: this.activeEntityDef && this.activeEntityDef.get('serviceType') }, collectionJSON);
if (this.readOnly) {
this.ui.entityIcon.addClass('disabled');
} else {
this.ui.entityIcon.removeClass('disabled');
}
this.ui.entityIcon.attr('title', _.escape(collectionJSON.typeName)).html('<img src="' + Utils.getEntityIconPath({ entityData: entityData }) + '"/>').find("img").on('error', function() {
this.src = Utils.getEntityIconPath({ entityData: entityData, errorUrl: this.src });
});
} else { } else {
this.ui.title.hide(); this.ui.title.hide();
} }
...@@ -194,7 +205,6 @@ define(['require', ...@@ -194,7 +205,6 @@ define(['require',
} }
} }
this.hideLoader(); this.hideLoader();
this.activeEntityDef = this.entityDefCollection.fullCollection.find({ name: collectionJSON.typeName });
var obj = { var obj = {
entity: collectionJSON, entity: collectionJSON,
guid: this.id, guid: this.id,
...@@ -252,9 +262,13 @@ define(['require', ...@@ -252,9 +262,13 @@ define(['require',
} }
var containsList = Utils.getNestedSuperTypes({ data: this.activeEntityDef.toJSON(), collection: this.entityDefCollection }), var processCheck = false,
containsList = Utils.getNestedSuperTypes({ data: this.activeEntityDef.toJSON(), collection: this.entityDefCollection }),
superType = _.find(containsList, function(type) { superType = _.find(containsList, function(type) {
if (type === "DataSet" || type === "Process") { if (type === "DataSet" || type === "Process") {
if (type === "Process") {
processCheck = true;
}
return true; return true;
} }
}); });
...@@ -262,6 +276,7 @@ define(['require', ...@@ -262,6 +276,7 @@ define(['require',
if (superType) { if (superType) {
this.$('.lineageGraph').show(); this.$('.lineageGraph').show();
this.renderLineageLayoutView({ this.renderLineageLayoutView({
processCheck: processCheck,
guid: this.id, guid: this.id,
entityDefCollection: this.entityDefCollection, entityDefCollection: this.entityDefCollection,
fetchCollection: this.fetchCollection.bind(this), fetchCollection: this.fetchCollection.bind(this),
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -26,8 +26,9 @@ define(['require', ...@@ -26,8 +26,9 @@ define(['require',
'd3-tip', 'd3-tip',
'utils/Enums', 'utils/Enums',
'utils/UrlLinks', 'utils/UrlLinks',
'utils/Globals',
'platform' 'platform'
], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks, platform) { ], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks, Globals, platform) {
'use strict'; 'use strict';
var LineageLayoutView = Backbone.Marionette.LayoutView.extend( var LineageLayoutView = Backbone.Marionette.LayoutView.extend(
...@@ -44,14 +45,19 @@ define(['require', ...@@ -44,14 +45,19 @@ define(['require',
ui: { ui: {
graph: ".graph", graph: ".graph",
checkHideProcess: "[data-id='checkHideProcess']", checkHideProcess: "[data-id='checkHideProcess']",
selectDepth: 'select[data-id="selectDepth"]' checkDeletedEntity: "[data-id='checkDeletedEntity']",
selectDepth: 'select[data-id="selectDepth"]',
fltrTogler: '[data-id="fltr-togler"]',
lineageFilterPanel: '.lineage-fltr-panel'
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
var events = {}; var events = {};
events["click " + this.ui.checkHideProcess] = 'onCheckHideProcess'; events["click " + this.ui.checkHideProcess] = 'onCheckUnwantedEntity';
events["click " + this.ui.checkDeletedEntity] = 'onCheckUnwantedEntity';
events['change ' + this.ui.selectDepth] = 'onSelectDepthChange'; events['change ' + this.ui.selectDepth] = 'onSelectDepthChange';
events["click " + this.ui.fltrTogler] = 'onClickFiltrTogler';
return events; return events;
}, },
...@@ -69,6 +75,7 @@ define(['require', ...@@ -69,6 +75,7 @@ define(['require',
this.edgeCall; this.edgeCall;
this.filterObj = { this.filterObj = {
isProcessHideCheck: false, isProcessHideCheck: false,
isDeletedEntityHideCheck: false,
depthCount: '' depthCount: ''
}; };
}, },
...@@ -114,13 +121,21 @@ define(['require', ...@@ -114,13 +121,21 @@ define(['require',
onShow: function() { onShow: function() {
this.$('.fontLoader').show(); this.$('.fontLoader').show();
}, },
onCheckHideProcess: function(e) { onCheckUnwantedEntity: function(e) {
var data = $.extend(true, {}, this.lineageData); var data = $.extend(true, {}, this.lineageData);
this.fromToObj = {}; this.fromToObj = {};
this.initializeGraph(); this.initializeGraph();
if ($(e.target).data("id") === "checkHideProcess") {
this.filterObj.isProcessHideCheck = e.target.checked; this.filterObj.isProcessHideCheck = e.target.checked;
} else {
this.filterObj.isDeletedEntityHideCheck = e.target.checked;
}
this.generateData(data.relations, data.guidEntityMap); this.generateData(data.relations, data.guidEntityMap);
}, },
onClickFiltrTogler: function() {
var lineageFilterPanel = this.ui.lineageFilterPanel;
$(lineageFilterPanel).toggleClass("show-filter-panel");
},
onSelectDepthChange: function(e, options) { onSelectDepthChange: function(e, options) {
this.initializeGraph(); this.initializeGraph();
...@@ -132,6 +147,8 @@ define(['require', ...@@ -132,6 +147,8 @@ define(['require',
var that = this, var that = this,
queryParam = options && options.queryParam || {}; queryParam = options && options.queryParam || {};
this.fromToObj = {}; this.fromToObj = {};
this.$('.fontLoader').show();
this.$('svg>g').hide();
this.collection.getLineage(this.guid, { this.collection.getLineage(this.guid, {
skipDefaultError: true, skipDefaultError: true,
queryParam: queryParam, queryParam: queryParam,
...@@ -147,6 +164,10 @@ define(['require', ...@@ -147,6 +164,10 @@ define(['require',
cust_error: function(model, response) { cust_error: function(model, response) {
that.lineageData = []; that.lineageData = [];
that.noLineage(); that.noLineage();
},
complete: function() {
that.$('.fontLoader').hide();
that.$('svg>g').show();
} }
}) })
}, },
...@@ -170,6 +191,29 @@ define(['require', ...@@ -170,6 +191,29 @@ define(['require',
return _.contains(Utils.getNestedSuperTypes({ data: entityDef.toJSON(), collection: that.entityDefCollection }), "Process") return _.contains(Utils.getNestedSuperTypes({ data: entityDef.toJSON(), collection: that.entityDefCollection }), "Process")
} }
function isDeleted(status) {
return Enums.entityStateReadOnly[status];
}
function isNodeToBeUpdated(node) {
if (that.filterObj.isProcessHideCheck) {
return isProcess(node.typeName);
} else if (that.filterObj.isDeletedEntityHideCheck) {
return isDeleted(node.status);
}
}
function getServiceType(typeName) {
var serviceType = null;
if (typeName) {
var entityDef = that.entityDefCollection.fullCollection.find({ name: typeName });
if (entityDef) {
serviceType = entityDef.get("serviceType") || null;
}
}
return serviceType;
}
function makeNodeObj(relationObj) { function makeNodeObj(relationObj) {
var obj = {}; var obj = {};
obj['shape'] = "img"; obj['shape'] = "img";
...@@ -179,6 +223,7 @@ define(['require', ...@@ -179,6 +223,7 @@ define(['require',
obj['id'] = relationObj.guid; obj['id'] = relationObj.guid;
obj['isLineage'] = true; obj['isLineage'] = true;
obj['queryText'] = relationObj.queryText; obj['queryText'] = relationObj.queryText;
obj['serviceType'] = getServiceType(relationObj.typeName);
if (relationObj.status) { if (relationObj.status) {
obj['status'] = relationObj.status; obj['status'] = relationObj.status;
} }
...@@ -191,14 +236,18 @@ define(['require', ...@@ -191,14 +236,18 @@ define(['require',
return obj; return obj;
} }
var newRelations = []; var newRelations = [],
finalRelations = relations,
if (this.filterObj.isProcessHideCheck) { isHideFilterOn = this.filterObj.isProcessHideCheck || this.filterObj.isDeletedEntityHideCheck;
if (isHideFilterOn) {
_.each(relations, function(obj, index, relationArr) { _.each(relations, function(obj, index, relationArr) {
var isFromEntityIdProcess = isProcess(guidEntityMap[obj.fromEntityId].typeName); var toNodeToBeUpdated = isNodeToBeUpdated(guidEntityMap[obj.toEntityId]);
var isToEntityProcess = isProcess(guidEntityMap[obj.toEntityId].typeName); var fromNodeToBeUpdated = isNodeToBeUpdated(guidEntityMap[obj.fromEntityId]);
if (isToEntityProcess) { if (toNodeToBeUpdated) {
if (that.filterObj.isProcessHideCheck) {
//We have already checked entity is process or not inside isNodeToBeUpdated();
guidEntityMap[obj.toEntityId]["isProcess"] = true; guidEntityMap[obj.toEntityId]["isProcess"] = true;
}
_.filter(relationArr, function(flrObj) { _.filter(relationArr, function(flrObj) {
if (flrObj.fromEntityId === obj.toEntityId) { if (flrObj.fromEntityId === obj.toEntityId) {
newRelations.push({ newRelations.push({
...@@ -207,8 +256,12 @@ define(['require', ...@@ -207,8 +256,12 @@ define(['require',
}); });
} }
}) })
} else if (isFromEntityIdProcess) { } else if (fromNodeToBeUpdated) {
if (that.filterObj.isProcessHideCheck) {
//We have already checked entity is process or not inside isNodeToBeUpdated();
guidEntityMap[obj.fromEntityId]["isProcess"] = true; guidEntityMap[obj.fromEntityId]["isProcess"] = true;
}
_.filter(relationArr, function(flrObj) { _.filter(relationArr, function(flrObj) {
if (flrObj.toEntityId === obj.fromEntityId) { if (flrObj.toEntityId === obj.fromEntityId) {
newRelations.push({ newRelations.push({
...@@ -221,13 +274,9 @@ define(['require', ...@@ -221,13 +274,9 @@ define(['require',
newRelations.push(obj); newRelations.push(obj);
} }
}); });
finalRelations = newRelations;
} }
var finalRelations = this.filterObj.isProcessHideCheck ? newRelations : relations;
_.each(finalRelations, function(obj, index) { _.each(finalRelations, function(obj, index) {
if (!that.fromToObj[obj.fromEntityId]) { if (!that.fromToObj[obj.fromEntityId]) {
that.fromToObj[obj.fromEntityId] = makeNodeObj(guidEntityMap[obj.fromEntityId]); that.fromToObj[obj.fromEntityId] = makeNodeObj(guidEntityMap[obj.fromEntityId]);
...@@ -239,8 +288,8 @@ define(['require', ...@@ -239,8 +288,8 @@ define(['require',
} }
var styleObj = { var styleObj = {
fill: 'none', fill: 'none',
stroke: '#8bc152', stroke: '#ffb203',
width: 2 width: 3
} }
that.g.setEdge(obj.fromEntityId, obj.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + ";stroke-width:" + styleObj.width + "", 'styleObj': styleObj }); that.g.setEdge(obj.fromEntityId, obj.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + ";stroke-width:" + styleObj.width + "", 'styleObj': styleObj });
}); });
...@@ -264,7 +313,7 @@ define(['require', ...@@ -264,7 +313,7 @@ define(['require',
var styleObj = { var styleObj = {
fill: 'none', fill: 'none',
stroke: '#fb4200', stroke: '#fb4200',
width: 2 width: 3
} }
that.g.setEdge(node.fromEntityId, node.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + ";stroke-width:" + styleObj.width + "", 'styleObj': styleObj }); that.g.setEdge(node.fromEntityId, node.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + ";stroke-width:" + styleObj.width + "", 'styleObj': styleObj });
that.checkForLineageOrImpactFlag(relations, node.toEntityId); that.checkForLineageOrImpactFlag(relations, node.toEntityId);
...@@ -281,7 +330,7 @@ define(['require', ...@@ -281,7 +330,7 @@ define(['require',
} }
}, },
setGraphZoomPositionCal: function(argument) { setGraphZoomPositionCal: function(argument) {
var initialScale = 1.2, var initialScale = 1.6,
svgEl = this.$('svg'), svgEl = this.$('svg'),
scaleEl = this.$('svg').find('>g'), scaleEl = this.$('svg').find('>g'),
translateValue = [(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2] translateValue = [(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2]
...@@ -294,7 +343,7 @@ define(['require', ...@@ -294,7 +343,7 @@ define(['require',
if (svgEl.hasClass('noScale')) { if (svgEl.hasClass('noScale')) {
if (!scaleEl.hasClass('scaleLinage')) { if (!scaleEl.hasClass('scaleLinage')) {
scaleEl.addClass('scaleLinage'); scaleEl.addClass('scaleLinage');
initialScale = 1.2; initialScale = 1.6;
} else { } else {
scaleEl.removeClass('scaleLinage'); scaleEl.removeClass('scaleLinage');
initialScale = 0; initialScale = 0;
...@@ -330,19 +379,16 @@ define(['require', ...@@ -330,19 +379,16 @@ define(['require',
var marker = parent.append("marker") var marker = parent.append("marker")
.attr("id", id) .attr("id", id)
.attr("viewBox", "0 0 10 10") .attr("viewBox", "0 0 10 10")
.attr("refX", 9) .attr("refX", 8)
.attr("refY", 5) .attr("refY", 5)
.attr("markerUnits", "strokeWidth") .attr("markerUnits", "strokeWidth")
.attr("markerWidth", 10) .attr("markerWidth", 4)
.attr("markerHeight", 8) .attr("markerHeight", 4)
.attr("orient", "auto"); .attr("orient", "auto");
var path = marker.append("path") var path = marker.append("path")
.attr("d", "M 0 0 L 10 5 L 0 10 z") .attr("d", "M 0 0 L 10 5 L 0 10 z")
.style("stroke-width", 1) .style("fill", edge.styleObj.stroke);
.style("stroke-dasharray", "1,0")
.style("fill", edge.styleObj.stroke)
.style("stroke", edge.styleObj.stroke);
dagreD3.util.applyStyle(path, edge[type + "Style"]); dagreD3.util.applyStyle(path, edge[type + "Style"]);
}; };
render.shapes().img = function circle(parent, bbox, node) { render.shapes().img = function circle(parent, bbox, node) {
...@@ -352,8 +398,8 @@ define(['require', ...@@ -352,8 +398,8 @@ define(['require',
} }
var shapeSvg = parent.append('circle') var shapeSvg = parent.append('circle')
.attr('fill', 'url(#img_' + node.id + ')') .attr('fill', 'url(#img_' + node.id + ')')
.attr('r', currentNode ? '15px' : '14px') .attr('r', '24px')
.attr("class", "nodeImage " + (currentNode ? "currentNode" : (node.isProcess ? "blue" : "green"))); .attr("class", "nodeImage " + (currentNode ? "currentNode" : (node.isProcess ? "process" : "node")));
parent.insert("defs") parent.insert("defs")
.append("pattern") .append("pattern")
...@@ -366,33 +412,19 @@ define(['require', ...@@ -366,33 +412,19 @@ define(['require',
.append('image') .append('image')
.attr("xlink:href", function(d) { .attr("xlink:href", function(d) {
if (node) { if (node) {
if (node.isProcess) { return Utils.getEntityIconPath({ entityData: node });
if (Enums.entityStateReadOnly[node.status]) {
return UrlLinks.apiBaseUrl + '/img/icon-gear-delete.png';
} else if (node.id == that.guid) {
return UrlLinks.apiBaseUrl + '/img/icon-gear-active.png';
} else {
return UrlLinks.apiBaseUrl + '/img/icon-gear.png';
}
} else {
if (Enums.entityStateReadOnly[node.status]) {
return UrlLinks.apiBaseUrl + '/img/icon-table-delete.png';
} else if (node.id == that.guid) {
return UrlLinks.apiBaseUrl + '/img/icon-table-active.png';
} else {
return UrlLinks.apiBaseUrl + '/img/icon-table.png';
}
}
} }
}) })
.attr("x", "2") .attr("x", currentNode ? "3" : "6")
.attr("y", "2") .attr("y", currentNode ? "3" : "4")
.attr("width", currentNode ? "26" : "24") .attr("width", "40")
.attr("height", currentNode ? "26" : "24") .attr("height", "40")
.on("error", function() {
this.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', Utils.getEntityIconPath({ entityData: node, errorUrl: this.href.baseVal }));
});
node.intersect = function(point) { node.intersect = function(point) {
//return dagreD3.intersect.circle(node, points, point); return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point);
return dagreD3.intersect.circle(node, currentNode ? 16 : 13, point);
}; };
return shapeSvg; return shapeSvg;
}; };
...@@ -482,7 +514,7 @@ define(['require', ...@@ -482,7 +514,7 @@ define(['require',
.on("wheel.zoom", null); .on("wheel.zoom", null);
//change text postion //change text postion
svgGroup.selectAll("g.nodes g.label") svgGroup.selectAll("g.nodes g.label")
.attr("transform", "translate(2,-30)"); .attr("transform", "translate(2,-35)");
svgGroup.selectAll("g.nodes g.node") svgGroup.selectAll("g.nodes g.node")
.on('mouseenter', function(d) { .on('mouseenter', function(d) {
that.activeNode = true; that.activeNode = true;
......
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