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