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 377 additions and 68 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),
......
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