Skip to content

A
atlas
Commit 2735f96f by kevalbhatt Committed by Madhan Neethiraj
Options

ATLAS-2487: UI updates to render entity relationships

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 0120003a
Showing with 306 additions and 108 deletions
dashboardv2/public/css/bootstrap-sidebar.css
...@@ -4,14 +4,15 @@ ...@@ -4,14 +4,15 @@
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/ */
/* Toggle Styles */ /* Toggle Styles */
#wrapper { #wrapper {
padding-left: 0; padding-left: 0;
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.3s ease;
-moz-transition: all 0.5s ease; -moz-transition: all 0.3s ease;
-o-transition: all 0.5s ease; -o-transition: all 0.3s ease;
transition: all 0.5s ease; transition: all 0.3s ease;
} }
#wrapper.toggled { #wrapper.toggled {
...@@ -27,14 +28,15 @@ ...@@ -27,14 +28,15 @@
margin-left: -350px; margin-left: -350px;
overflow-y: auto; overflow-y: auto;
background: #323544; background: #323544;
-webkit-transition: all 0.5s ease; -moz-transition: left 0.3s;
-moz-transition: all 0.5s ease; -o-transition: left 0.3s;
-o-transition: all 0.5s ease; -webkit-transition: left 0.3s;
transition: all 0.5s ease; transition: left 0.3s;
} }
#wrapper.toggled #sidebar-wrapper { #wrapper.toggled #sidebar-wrapper {
width: 350px;} width: 350px;
}
#page-content-wrapper { #page-content-wrapper {
width: 100%; width: 100%;
...@@ -46,67 +48,76 @@ ...@@ -46,67 +48,76 @@
margin-right: -350px; margin-right: -350px;
} }
/* Sidebar Styles */ /* Sidebar Styles */
.sidebar-nav { .sidebar-nav {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.sidebar-nav > li { .sidebar-nav>li {
line-height: 50px; line-height: 50px;
padding: 0 20px; padding: 0 20px;
border-bottom: 1px #1c1e2a solid; border-bottom: 1px #1c1e2a solid;
} }
.sidebar-nav > li a {
.sidebar-nav>li a {
display: block; display: block;
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
} }
.sidebar-nav > li a:hover { .sidebar-nav>li a:hover {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
} }
.sidebar-nav > li a:active, .sidebar-nav>li a:active,
.sidebar-nav > li a:focus { .sidebar-nav>li a:focus {
text-decoration: none; text-decoration: none;
} }
.sidebar-nav > .sidebar-brand { .sidebar-nav>.sidebar-brand {
font-size: 18px; font-size: 18px;
line-height: 60px; line-height: 50px;
} }
.sidebar-nav > .sidebar-brand a { .sidebar-nav>.sidebar-brand a {
color: #ddd; color: #ddd;
letter-spacing: 1px; letter-spacing: 1px;
} }
.sidebar-nav > .sidebar-brand a:hover { .sidebar-nav>.sidebar-brand a:hover {
color: #fff; color: #fff;
background: none; background: none;
} }
/* Extended Elements */ /* Extended Elements */
.sidebar-input .input-group { .sidebar-input .input-group {
margin: 10px 0px; margin: 10px 0px;
} }
.sidebar-input .form-control, .sidebar-input .form-control,
.sidebar-input .input-group-addon { .sidebar-input .input-group-addon {
background-color: transparent; background-color: transparent;
border-radius: 0px; border-radius: 0px;
} }
.sidebar-input .form-control { .sidebar-input .form-control {
border-right: none; border-right: none;
color: #eee; color: #eee;
} }
.sidebar-input .input-group-addon { .sidebar-input .input-group-addon {
border-left: none; border-left: none;
color: #ccc; color: #ccc;
} }
.sidebar-input .form-control:focus + .input-group-addon {
.sidebar-input .form-control:focus+.input-group-addon {
border-color: #66afe9; border-color: #66afe9;
} }
...@@ -120,7 +131,8 @@ ...@@ -120,7 +131,8 @@
} }
#sidebar-wrapper { #sidebar-wrapper {
width: 350px; } width: 350px;
}
#wrapper.toggled #sidebar-wrapper { #wrapper.toggled #sidebar-wrapper {
width: 0; width: 0;
......
dashboardv2/public/css/scss/common.scss
...@@ -54,3 +54,22 @@ ...@@ -54,3 +54,22 @@
} }
} }
} }
.details-backbutton {
display: none !important;
}
.full-screen {
#sidebar-wrapper {
left: 0;
}
#wrapper {
padding-left: 0px;
}
}
.detail-page {
.details-backbutton {
display: block !important;
}
}
\ No newline at end of file
dashboardv2/public/css/scss/form.scss
...@@ -208,7 +208,7 @@ button:focus { ...@@ -208,7 +208,7 @@ button:focus {
padding: 2px 6px; padding: 2px 6px;
} }
&.btn-md { &.btn-md {
padding: 5px 10px; padding: 6px 10px;
} }
} }
......
dashboardv2/public/css/scss/nav.scss
...@@ -65,3 +65,7 @@ ...@@ -65,3 +65,7 @@
box-shadow: 0 2px $white; box-shadow: 0 2px $white;
} }
} }
.navbar-nav>li>a{
padding: 15px 10px;
}
\ No newline at end of file
dashboardv2/public/css/scss/override.scss
...@@ -417,3 +417,6 @@ div.columnmanager-dropdown-container { ...@@ -417,3 +417,6 @@ div.columnmanager-dropdown-container {
.text-center { .text-center {
text-align: center !important; text-align: center !important;
} }
.margin-15{
margin: 15px 0px;
}
\ No newline at end of file
dashboardv2/public/css/scss/relationship.scss 0 → 100644
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.relationship-box {
.relatioship-link {
fill: none;
stroke-width: 1.5px;
}
.relationship-details {
position: absolute;
left: 0;
overflow: auto;
top: 0px;
max-height: 100%;
box-shadow: 4px 13px 14px -12px;
background: #e7e7e7;
transform: scaleX(0);
width: 200px;
transition: transform 0.3s ease-in;
&.open {
transform: scaleX(1);
}
.title {
background: black;
color: white;
padding: 10px;
margin-top: 0;
}
.close-details {
position: absolute;
top: 0;
color: white;
left: 0;
height: 21px;
width: 21px;
cursor: pointer;
font-size: 16px;
}
.entity-list {
overflow: auto;
list-style-type: disc;
list-style-position: outside;
padding-left: 18px;
}
ul>li {
word-wrap: break-word;
margin-bottom: 5px;
text-align: left;
}
}
}
\ No newline at end of file
dashboardv2/public/css/scss/style.scss
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
@import "panel.scss"; @import "panel.scss";
@import "loader.scss"; @import "loader.scss";
@import "graph.scss"; @import "graph.scss";
@import "relationship.scss";
@import "old-style.scss"; @import "old-style.scss";
@import "theme.scss"; @import "theme.scss";
@import "tag.scss"; @import "tag.scss";
......
dashboardv2/public/css/scss/tab.scss
...@@ -162,3 +162,18 @@ ul.tabs li.tab { ...@@ -162,3 +162,18 @@ ul.tabs li.tab {
border-top: none; border-top: none;
} }
} }
.default-tab {
.nav-tabs {
>li {
&.active {
>a {
color: $color_jungle_green_approx;
}
}
>a {
color: $black;
}
}
}
}
\ No newline at end of file
dashboardv2/public/css/scss/theme.scss
...@@ -43,7 +43,7 @@ header { ...@@ -43,7 +43,7 @@ header {
>a { >a {
display: inline-block; display: inline-block;
color: $color_ironside_gray_approx; color: $color_ironside_gray_approx;
padding: 16px 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;
...@@ -53,7 +53,6 @@ header { ...@@ -53,7 +53,6 @@ header {
padding: 5px; padding: 5px;
} }
i { i {
margin-top: 7px;
font-size: 18px; font-size: 18px;
} }
} }
...@@ -95,7 +94,11 @@ header { ...@@ -95,7 +94,11 @@ header {
.page-title { .page-title {
background-color: $white; background-color: $white;
padding: 25px; padding: 10px 15px;
.title {
padding-top: 0;
margin-top: 0;
}
h1 { h1 {
// margin-top: 50px; // margin-top: 50px;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -206,8 +209,7 @@ hr[size="10"] { ...@@ -206,8 +209,7 @@ hr[size="10"] {
} }
.gray-bg { .gray-bg {
background-color: #f6f7fb; background-color: $color_white_lilac_approx
padding-bottom: 4%;
} }
......
dashboardv2/public/js/templates/common/TableLayout_tmpl.html
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<div data-id="r_pagination" class="inline"></div> <div data-id="r_pagination" class="inline"></div>
{{#if includePageSize}} {{#if includePageSize}}
<div class="inline"> <div class="inline">
<div class="form-group inline-content"> <div class="inline-content">
<span class="control-label-sm inline ">Page Limit :</span> <span class="control-label-sm inline ">Page Limit :</span>
<div class="select inline" style="width: 80px;"> <div class="select inline" style="width: 80px;">
<select data-id="pageSize" class="form-control"></select> <select data-id="pageSize" class="form-control"></select>
......
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
...@@ -19,10 +19,7 @@ ...@@ -19,10 +19,7 @@
<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">
<div class="row"> <h1 class="title row"><span data-id="title"></span></h1> {{#if entityUpdate}}
<a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a>
</div>
<h1 class="form-group"><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">
...@@ -39,84 +36,69 @@ ...@@ -39,84 +36,69 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="container-fluid gray-bg">
<div class="row"> <div class="row">
<div class="col-sm-custom"> <div class="col-sm-12 default-tab">
<div class=""> <ul class="nav nav-tabs" data-id="tab-list">
<!-- <h4 class="lineageLabel"></h4> --> <li role="properties" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li>
<div class="lineageLayout"> <li role="lineage" class="tab"><a href="#tab-lineage" aria-controls="tab-lineage" role="tab" data-toggle="tab">Lineage</a></li>
<div class="panel panel-default" id="panel"> <li role="relationship" class="tab"><a href="#tab-relationship" aria-controls="tab-relationship" role="tab" data-toggle="tab">Relationships</a></li>
<div class="panel-heading clearfix"> <li role="classification"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Classifications</a></li>
<h4 class="panel-title pull-left"> LINEAGE & IMPACT</h4> <li role="audit" class="tab"><a href="#tab-audit" aria-controls="tab-audit" role="tab" data-toggle="tab">Audits</a></li>
<div class="btn-group pull-right"> <li role="schema" class="tab schemaTable" style="display:none"><a href="#tab-schema" aria-controls="tab-schema" role="tab" data-toggle="tab">Schema</a></li>
<button type="button" class="fullscreen_panel" id="fullscreen_panel" title="Fullscreen"><i class="fa fa-expand" aria-hidden="true"></i></button> <li role="profile" class="tab profileTab" style="display:none"><a href="#tab-profile" aria-controls="tab-profile" role="tab" data-toggle="tab">Profile</a></li>
<button type="button" id="expand_collapse_panel" class="expand_collapse_panel" title="Collapse"><i class="fa fa-chevron-up" aria-hidden="true"></i></button> </ul>
</div>
</div>
<div id="panel_body" class="panel-body graph-bg resize-graph animated" align="center" style="height:375px;">
<div id="r_lineageLayoutView">
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div>
<div class="gray-bg">
<div class="tab-content">
<div id="tab-details" role="properties" class="tab-pane active animated fadeIn">
<div id="r_entityDetailTableLayoutView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div id="tab-lineage" role="lineage" class="tab-pane animated fadeIn">
<div class="col-sm-custom"> <div class="resize-graph animated" align="center" style="height:64vh;">
<div class="panel with-nav-tabs panel-default"> <div id="r_lineageLayoutView">
<div class="panel-heading clearfix"> <div class="fontLoader-relative">
<h4 class="panel-title pull-left">DETAILS</h4> <i class="fa fa-refresh fa-spin-custom"></i>
<div class="btn-group pull-right">
<button type="button" class="expand_collapse_panel" title="Collapse"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
</div> </div>
</div> </div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs ">
<li role="properties" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li>
<li role="tags"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Classifications</a></li>
<li role="audits" class="tab"><a href="#tab-audit" aria-controls="tab-audit" role="tab" data-toggle="tab">Audits</a></li>
<li role="schema" class="tab schemaTable" style="display:none"><a href="#tab-schema" aria-controls="tab-schema" role="tab" data-toggle="tab">Schema</a></li>
<li role="profile" class="tab profileTab" style="display:none"><a href="#tab-profile" aria-controls="tab-profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>
</div> </div>
</div> </div>
<div class="tab-content"> <div id="tab-relationship" role="relationship" class="tab-pane animated fadeIn">
<div id="tab-details" role="properties" class="tab-pane active"> <div class="resize-graph animated" align="center" style="height:64vh;">
<div id="r_entityDetailTableLayoutView"> <div id="r_relationshipLayoutView">
<div class="fontLoader-relative"> <div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
</div> </div>
</div> </div>
<div id="tab-tagTable" role="tags" class="tab-pane fade"> </div>
<div id="tab-tagTable" role="classification" class="tab-pane animated fadeIn">
<div id="r_tagTableLayoutView"> <div id="r_tagTableLayoutView">
<div class="fontLoader-relative"> <div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
</div> </div>
</div> </div>
<div id="tab-audit" role="audits" class="tab-pane"> <div id="tab-audit" role="audit" class="tab-pane animated fadeIn">
<div id="r_auditTableLayoutView"> <div id="r_auditTableLayoutView">
<div class="fontLoader-relative"> <div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
</div> </div>
</div> </div>
<div id="tab-schema" role="schema" class="tab-pane"> <div id="tab-schema" role="schema" class="tab-pane animated fadeIn">
<div id="r_schemaTableLayoutView"> <div id="r_schemaTableLayoutView">
<div class="fontLoader-relative"> <div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
</div> </div>
</div> </div>
<div id="tab-profile" role="profile" class="tab-pane"> <div id="tab-profile" role="profile" class="tab-pane animated fadeIn">
<div id="r_profileLayoutView"> <div id="r_profileLayoutView">
<div class="fontLoader-relative"> <div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
...@@ -124,9 +106,5 @@ ...@@ -124,9 +106,5 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
\ No newline at end of file
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -14,11 +14,12 @@ ...@@ -14,11 +14,12 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<div style="position: absolute;height: calc(100% - 45px);width: calc(100% - 30px);"> <!-- <div class="graph-toolbar clearfix"></div> -->
<div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding">
<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="100%" " viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> <svg width="100%" height="calc(100% - 30px)" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
<div class="legends" style="height: 20px"> <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="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> <i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i>
......
dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html 0 → 100644
<!--
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<!-- <div class="graph-toolbar clearfix"></div> -->
<div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding relationship-box">
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<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>
<div class="relationship-details">
<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" />
<ul data-id="entityList" class="entity-list"></ul>
</div>
</div>
</div>
\ No newline at end of file
dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<div> <div class="position-relative">
<div class="tableOverlay"></div> <div class="tableOverlay"></div>
<div class="inline-content-fr table-action-btn"> <div class="inline-content-fr table-action-btn">
<div class="inline" data-id="checkDeletedEntity"> <div class="inline" data-id="checkDeletedEntity">
......
dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
...@@ -23,12 +23,12 @@ ...@@ -23,12 +23,12 @@
<div class="ellipsis" style="display: none;"><span class="searchResult" style=" font-size: 16px;"></span> <div class="ellipsis" style="display: none;"><span class="searchResult" style=" font-size: 16px;"></span>
</div> </div>
<div class="searchTable"> <div class="searchTable">
<div class="row well"> <div class="row well" style="padding-top: 0px;">
<div class="row form-group pagination-box filter-box" style="display: none;"> <div class="row form-group pagination-box filter-box" style="display: none;">
<div class="col-sm-3"> <div class="col-sm-4">
<span class="labelShowRecord pull-left" data-id="pageRecordText"> </span> <span class="labelShowRecord pull-left" data-id="pageRecordText"> </span>
</div> </div>
<div class="col-sm-9 inline-content-fr no-padding-left"> <div class="col-sm-8 inline-content-fr no-padding-left">
<div class="inline" data-id="colManager"></div> <div class="inline" data-id="colManager"></div>
<div class="inline" data-id="containerCheckBox" style="display: none;"> <div class="inline" data-id="containerCheckBox" style="display: none;">
<label class="checkbox-inline btn" for="inputLabel"> <label class="checkbox-inline btn" for="inputLabel">
...@@ -84,12 +84,12 @@ ...@@ -84,12 +84,12 @@
<div class="input-group" data-id="goToPageDiv"> <div class="input-group" data-id="goToPageDiv">
<input type="text" class="form-control number-input" data-id="gotoPage" placeholder="Goto Page" /> <input type="text" class="form-control number-input" data-id="gotoPage" placeholder="Goto Page" />
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-secondary" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button> <button class="btn btn-atlas btn-md no-margin" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button>
</span> </span>
</div> </div>
</div> </div>
<div class="inline"> <div class="inline">
<div class="form-group inline-content"> <div class="inline-content">
<span class="control-label-sm inline ">Page Limit :</span> <span class="control-label-sm inline ">Page Limit :</span>
<div class="inline" style="width: 80px;"> <div class="inline" style="width: 80px;">
<select data-id="showPage" multiple="multiple" class="form-control"> <select data-id="showPage" multiple="multiple" class="form-control">
......
dashboardv2/public/js/templates/site/Header.html
...@@ -15,6 +15,12 @@ ...@@ -15,6 +15,12 @@
* limitations under the License. * limitations under the License.
--> -->
<header class="clearfix"> <header class="clearfix">
<ul class="nav navbar-nav">
<li>
<a href="javascript:void(0);" data-id="menuHamburger"><i class="fa fa-bars"></i></a>
</li>
<li class="details-backbutton"><a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a></li>
</ul>
<div class="btn-group pull-right header-menu "> <div class="btn-group pull-right header-menu ">
<a target="_blank" href="http://atlas.apache.org/"><i class="fa fa-question-circle"></i></a> <a target="_blank" href="http://atlas.apache.org/"><i class="fa fa-question-circle"></i></a>
<a href="javascript:void(0);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="user-dropdown"><i class="fa fa-user user-circle "></i><span class="userName"></span></a> <a href="javascript:void(0);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="user-dropdown"><i class="fa fa-user user-circle "></i><span class="userName"></span></a>
......
dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<div> <div class="position-relative">
<div class="tableOverlay"></div> <div class="tableOverlay"></div>
<div class="inline-content-fr table-action-btn"> <div class="inline-content-fr table-action-btn">
<div class="inline" > <div class="inline" >
......
dashboardv2/public/js/utils/Enums.js
...@@ -100,5 +100,10 @@ define(['require'], function(require) { ...@@ -100,5 +100,10 @@ define(['require'], function(require) {
} }
} }
} }
Enums.graphIcon = {
// hive_db: { icon: "fa-database", textContent: '\uf1c0' },
// hive_column: { icon: "fa-columns", textContent: '\uf0db' },
// hive_table: { icon: "fa-table", textContent: '\uf0ce' }
}
return Enums; return Enums;
}); });
\ No newline at end of file
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -44,8 +44,8 @@ define(['require', ...@@ -44,8 +44,8 @@ define(['require',
RTagTableLayoutView: "#r_tagTableLayoutView", RTagTableLayoutView: "#r_tagTableLayoutView",
RLineageLayoutView: "#r_lineageLayoutView", RLineageLayoutView: "#r_lineageLayoutView",
RAuditTableLayoutView: "#r_auditTableLayoutView", RAuditTableLayoutView: "#r_auditTableLayoutView",
RProfileLayoutView: "#r_profileLayoutView" RProfileLayoutView: "#r_profileLayoutView",
RRelationshipLayoutView: "#r_relationshipLayoutView"
}, },
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
...@@ -57,11 +57,11 @@ define(['require', ...@@ -57,11 +57,11 @@ define(['require',
description: '[data-id="description"]', description: '[data-id="description"]',
editBox: '[data-id="editBox"]', editBox: '[data-id="editBox"]',
deleteTag: '[data-id="deleteTag"]', deleteTag: '[data-id="deleteTag"]',
backButton: "[data-id='backButton']",
addTag: '[data-id="addTag"]', addTag: '[data-id="addTag"]',
tagList: '[data-id="tagList"]', tagList: '[data-id="tagList"]',
propagatedTagList: '[data-id="propagatedTagList"]', propagatedTagList: '[data-id="propagatedTagList"]',
fullscreenPanel: "#fullscreen_panel" fullscreenPanel: "#fullscreen_panel",
tablist: '[data-id="tab-list"] li'
}, },
templateHelpers: function() { templateHelpers: function() {
return { return {
...@@ -83,8 +83,16 @@ define(['require', ...@@ -83,8 +83,16 @@ define(['require',
}; };
events["click " + this.ui.deleteTag] = 'onClickTagCross'; events["click " + this.ui.deleteTag] = 'onClickTagCross';
events["click " + this.ui.addTag] = 'onClickAddTagBtn'; events["click " + this.ui.addTag] = 'onClickAddTagBtn';
events['click ' + this.ui.backButton] = function() { events["click " + this.ui.tablist] = function(e) {
Backbone.history.history.back(); var tabValue = $(e.currentTarget).attr('role');
Utils.setUrl({
url: Utils.getUrlState.getQueryUrl().queyParams[0],
urlParams: { tabActive: tabValue || 'properties' },
mergeBrowserUrl: false,
trigger: false,
updateTabState: true
});
}; };
return events; return events;
}, },
...@@ -95,6 +103,7 @@ define(['require', ...@@ -95,6 +103,7 @@ define(['require',
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection', 'classificationDefCollection')); _.extend(this, _.pick(options, 'value', 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection', 'classificationDefCollection'));
this.bindEvents(); this.bindEvents();
$('body').addClass("detail-page");
}, },
bindEvents: function() { bindEvents: function() {
var that = this; var that = this;
...@@ -176,6 +185,7 @@ define(['require', ...@@ -176,6 +185,7 @@ define(['require',
})() })()
} }
this.renderEntityDetailTableLayoutView(obj); this.renderEntityDetailTableLayoutView(obj);
this.renderRelationshipLayoutView(obj);
this.renderAuditTableLayoutView(obj); this.renderAuditTableLayoutView(obj);
this.renderTagTableLayoutView(obj); this.renderTagTableLayoutView(obj);
if (collectionJSON && (!_.isUndefined(collectionJSON.attributes['profileData']) || collectionJSON.typeName === "hive_db" || collectionJSON.typeName === "hbase_namespace")) { if (collectionJSON && (!_.isUndefined(collectionJSON.attributes['profileData']) || collectionJSON.typeName === "hive_db" || collectionJSON.typeName === "hbase_namespace")) {
...@@ -201,7 +211,7 @@ define(['require', ...@@ -201,7 +211,7 @@ define(['require',
} }
}, this); }, this);
this.listenTo(this.collection, 'error', function(model, response) { this.listenTo(this.collection, 'error', function(model, response) {
this.$('.fontLoader').hide(); this.$('.fontLoader-relative').removeClass('show');
if (response.responseJSON) { if (response.responseJSON) {
Utils.notifyError({ Utils.notifyError({
content: response.responseJSON.errorMessage || response.responseJSON.error content: response.responseJSON.errorMessage || response.responseJSON.error
...@@ -212,7 +222,7 @@ define(['require', ...@@ -212,7 +222,7 @@ define(['require',
onRender: function() { onRender: function() {
var that = this; var that = this;
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail')); Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
this.$('.fontLoader').show(); // to show tab loader this.$('.fontLoader-relative').addClass('show'); // to show tab loader
this.renderLineageLayoutView({ this.renderLineageLayoutView({
guid: this.id, guid: this.id,
entityDefCollection: this.entityDefCollection, entityDefCollection: this.entityDefCollection,
...@@ -253,12 +263,17 @@ define(['require', ...@@ -253,12 +263,17 @@ define(['require',
}, },
onShow: function() { onShow: function() {
var params = Utils.getUrlState.getQueryParams(); var params = Utils.getUrlState.getQueryParams();
if (params && params.profile) { if (params && params.tabActive) {
this.$('.nav.nav-tabs').find('.profileTab').addClass('active').siblings().removeClass('active'); this.$('.nav.nav-tabs').find('[role="' + params.tabActive + '"]').addClass('active').siblings().removeClass('active');
this.$('.tab-content').find('#tab-profile').addClass('active').siblings().removeClass('active'); this.$('.tab-content').find('[role="' + params.tabActive + '"]').addClass('active').siblings().removeClass('active');
$("html, body").animate({ scrollTop: (this.$('.tab-content').offset().top + 1200) }, 1000); $("html, body").animate({ scrollTop: (this.$('.tab-content').offset().top + 1200) }, 1000);
} }
}, },
onDestroy: function() {
if (!Utils.getUrlState.isDetailPage()) {
$('body').removeClass("detail-page");
}
},
fetchCollection: function() { fetchCollection: function() {
this.collection.fetch({ reset: true }); this.collection.fetch({ reset: true });
}, },
...@@ -375,6 +390,12 @@ define(['require', ...@@ -375,6 +390,12 @@ define(['require',
that.RLineageLayoutView.show(new LineageLayoutView(obj)); that.RLineageLayoutView.show(new LineageLayoutView(obj));
}); });
}, },
renderRelationshipLayoutView: function(obj) {
var that = this;
require(['views/graph/RelationshipLayoutView'], function(RelationshipLayoutView) {
that.RRelationshipLayoutView.show(new RelationshipLayoutView(obj));
});
},
renderSchemaLayoutView: function(obj) { renderSchemaLayoutView: function(obj) {
var that = this; var that = this;
require(['views/schema/SchemaLayoutView'], function(SchemaLayoutView) { require(['views/schema/SchemaLayoutView'], function(SchemaLayoutView) {
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -201,7 +201,9 @@ define(['require', ...@@ -201,7 +201,9 @@ define(['require',
); );
}, },
createGraph: function() { createGraph: function() {
var that = this; var that = this,
width = this.$('svg').width(),
height = this.$('svg').height();
this.g.nodes().forEach(function(v) { this.g.nodes().forEach(function(v) {
var node = that.g.node(v); var node = that.g.node(v);
// Round the corners of the nodes // Round the corners of the nodes
...@@ -283,7 +285,9 @@ define(['require', ...@@ -283,7 +285,9 @@ define(['require',
return shapeSvg; return shapeSvg;
}; };
// Set up an SVG group so that we can translate the final graph. // Set up an SVG group so that we can translate the final graph.
var svg = this.svg = d3.select(this.$("svg")[0]), var svg = this.svg = d3.select(this.$("svg")[0])
.attr("viewBox", "0 0 " + width + " " + height)
.attr("enable-background", "new 0 0 " + width + " " + height),
svgGroup = svg.append("g"); svgGroup = svg.append("g");
var zoom = this.zoom = d3.behavior.zoom() var zoom = this.zoom = d3.behavior.zoom()
.scaleExtent([0.5, 6]) .scaleExtent([0.5, 6])
...@@ -392,7 +396,7 @@ define(['require', ...@@ -392,7 +396,7 @@ define(['require',
.on('dblclick', function(d) { .on('dblclick', function(d) {
tooltip.hide(d); tooltip.hide(d);
Utils.setUrl({ Utils.setUrl({
url: '#!/detailPage/' + d, url: '#!/detailPage/' + d + '?tabActive=lineage',
mergeBrowserUrl: false, mergeBrowserUrl: false,
trigger: true trigger: true
}); });
......
dashboardv2/public/js/views/profile/ProfileTableLayoutView.js
...@@ -154,7 +154,7 @@ define(['require', ...@@ -154,7 +154,7 @@ define(['require',
mergeBrowserUrl: false, mergeBrowserUrl: false,
trigger: true, trigger: true,
urlParams: { urlParams: {
'profile': true tabActive: 'profile'
} }
}); });
}); });
......
dashboardv2/public/js/views/site/Header.js
...@@ -19,15 +19,37 @@ ...@@ -19,15 +19,37 @@
define(['require', define(['require',
'hbs!tmpl/site/Header', 'hbs!tmpl/site/Header',
'utils/CommonViewFunction', 'utils/CommonViewFunction',
'utils/Globals' 'utils/Globals',
], function(require, tmpl, CommonViewFunction, Globals) { 'utils/Utils'
], function(require, tmpl, CommonViewFunction, Globals, Utils) {
'use strict'; 'use strict';
var Header = Marionette.LayoutView.extend({ var Header = Marionette.LayoutView.extend({
template: tmpl, template: tmpl,
regions: {}, regions: {},
events: {}, ui: {
backButton: "[data-id='backButton']",
menuHamburger: "[data-id='menuHamburger']",
},
events: function() {
var events = {};
events['click ' + this.ui.backButton] = function() {
Utils.setUrl({
url: Globals.saveApplicationState.tabState.searchUrl,
mergeBrowserUrl: false,
trigger: true,
updateTabState: true
});
};
events['click ' + this.ui.menuHamburger] = function() {
$('body').toggleClass("full-screen");
};
return events;
},
initialize: function(options) {}, initialize: function(options) {},
onRender: function() { onRender: function() {
var that = this; var that = this;
if (Globals.userLogedIn.status) { if (Globals.userLogedIn.status) {
......
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