Skip to content

A
atlas
Commit d0cb5c37 by kalyani Committed by Madhan Neethiraj
Options

ATLAS-1688: fix lineage UI resize issues

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 401d39af
Showing with 227 additions and 67 deletions
dashboardv2/public/css/scss/graph.scss
...@@ -28,11 +28,6 @@ ...@@ -28,11 +28,6 @@
.node { .node {
cursor: pointer; cursor: pointer;
circle {
fill: $white;
stroke: $steel_blue;
stroke-width: 1.5px;
}
text { text {
font-size: 10px; font-size: 10px;
font-family: $font_1; font-family: $font_1;
...@@ -45,11 +40,21 @@ ...@@ -45,11 +40,21 @@
.label { .label {
fill: $color_suva_gray_approx; fill: $color_suva_gray_approx;
} }
image { circle {
&.nodeImage {
-moz-transition: all 0.3s; -moz-transition: all 0.3s;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
stroke-width: 1.5px;
&.nodeImage {
&.green:hover {
stroke: #8bc152;
}
&.blue:hover {
stroke: #4b91e2;
}
&.currentNode {
stroke: #fb4200;
}
&:hover { &:hover {
-moz-transform: scale(1.4); -moz-transform: scale(1.4);
-webkit-transform: scale(1.4); -webkit-transform: scale(1.4);
...@@ -57,6 +62,21 @@ ...@@ -57,6 +62,21 @@
} }
} }
} }
&.active {
circle {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
&.nodeImage {
&.green {
stroke: #8bc152;
}
&.blue {
stroke: #4b91e2;
}
}
}
}
} }
.overlay {} .overlay {}
...@@ -74,19 +94,12 @@ ...@@ -74,19 +94,12 @@
background: $black_80; background: $black_80;
color: $white; color: $white;
z-index: 999; z-index: 999;
max-width: 300px;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius) //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 2px; border-radius: 2px;
&:after { .tip-inner-scroll {
//Instead of the line below you could use @include box-sizing($bs) overflow: auto;
box-sizing: border-box; max-height: 300px;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: $black_80;
content: "\25BC";
position: absolute;
text-align: center;
} }
&.n:after { &.n:after {
margin: -1px 0 0; margin: -1px 0 0;
...@@ -100,6 +113,7 @@ g.type-TK > rect { ...@@ -100,6 +113,7 @@ g.type-TK > rect {
} }
.zoomButtonGroup { .zoomButtonGroup {
background-color: $white;
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 5px; right: 5px;
......
dashboardv2/public/css/scss/main.scss
...@@ -320,8 +320,23 @@ ul { ...@@ -320,8 +320,23 @@ ul {
@media (min-width: 768px) { @media (min-width: 768px) {
.col-sm-custom { .col-sm-custom {
width: 92%; //width: 92%;
margin: 36px 36px 0px; margin: 25px 25px 0px;
position: relative; position: relative;
} }
} }
.panel-fullscreen {
position: fixed;
height: 100%;
top: 0px;
bottom: 0;
left: 0;
width: 100%;
right: 0;
z-index: 999;
}
.no-padding {
padding: 0px !important;
}
dashboardv2/public/css/scss/override.scss
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
.table-quickMenu>thead>tr>th { .table-quickMenu>thead>tr>th {
border-width: thin; border-width: thin;
border-color: $action_gray; border-color: $color_jungle_green_approx;
border-bottom-style: solid; border-bottom-style: solid;
box-shadow: none; box-shadow: none;
padding: 20px 30px; padding: 20px 30px;
......
dashboardv2/public/css/scss/panel.scss
...@@ -19,27 +19,57 @@ ...@@ -19,27 +19,57 @@
/* panel.scss */ /* panel.scss */
.panel { .panel-default {
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 0;
}
.panel-primary {
border-color: $color_hoki_approx;
> .panel-heading { > .panel-heading {
color: $white; color: $color_jungle_green_approx;
background-color: $color_hoki_approx; background: $white;
border-color: $color_hoki_approx; border-color: $color_jungle_green_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius) button {
border-radius: 0; color: $color_jungle_green_approx;
background: $white;
border: none;
}
.panel-title {
font-weight: bold;
padding-top: 8px;
}
}
.nav-tabs {
> li {
&.active {
>a {
color: $color_jungle_green_approx;
}
}
>a {
color: $black;
}
}
} }
} }
.appForm { .panel-fullscreen {
.panel-body { .panel-body {
padding-bottom: 0; //overflow: hidden;
height: calc(100% - 46px)!important;
}
.ui-resizable-handle{
display: none !important;
}
}
.nav-tabs {
>li {
&:first-child {
margin-left: 25px;
}
}
}
.with-nav-tabs {
.tab-content {
> .tab-pane.active {
padding: 20px 10px 0px 10px;
} }
.panel-footer {
margin-bottom: 0;
} }
} }
\ No newline at end of file
dashboardv2/public/css/scss/tab.scss
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
/* tab.scss */ /* tab.scss */
.atlast-tabbable { .atlast-tabbable {
margin: 50px 0; margin: 25px 0;
.nav-tabs { .nav-tabs {
border-bottom: 1px solid $color_mystic_approx; border-bottom: 1px solid $color_mystic_approx;
> li { > li {
...@@ -119,7 +119,7 @@ ul.tabs li.tab { ...@@ -119,7 +119,7 @@ ul.tabs li.tab {
} }
.atlast-tabbable { .atlast-tabbable {
margin: 50px 0; margin: 25px 0;
.nav-tabs { .nav-tabs {
border-bottom: 1px solid $color_mystic_approx; border-bottom: 1px solid $color_mystic_approx;
> li { > li {
......
dashboardv2/public/css/scss/theme.scss
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
.page-title { .page-title {
background-color: $white; background-color: $white;
padding: 50px; padding: 25px;
h1 { h1 {
margin-top: 50px; margin-top: 50px;
margin-bottom: 10px; margin-bottom: 10px;
......
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
...@@ -23,20 +23,20 @@ ...@@ -23,20 +23,20 @@
<a href="javascript:void(0);" class="backButton" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a> <a href="javascript:void(0);" class="backButton" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a>
</div> </div>
<h1><span data-id="title"></span></h1> {{#if entityUpdate}} <h1><span data-id="title"></span></h1> {{#if entityUpdate}}
<button data-id="editButton" style="display:none" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button> <button data-id="editButton" title="Edit Entity" style="display:none" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
{{/if}} {{/if}}
<div class="tagTerm"> <div class="tagTerm">
<span class="tagSpan">Tags:</span> <span class="tagSpan">Tags:</span>
<div class="" data-id="tagList"> <div class="" data-id="tagList">
<div class="addTag-dropdown" data-id="addTag"> <div class="addTag-dropdown" data-id="addTag">
<div class="addTagBase tagBox" data-id="addTagPlus"><i class="fa fa-plus"></i></div> <div class="addTagBase tagBox" title="Add Tag" data-id="addTagPlus"><i class="fa fa-plus"></i></div>
</div> </div>
</div> </div>
<hr class="termTagLine"> {{#if taxonomy}} <hr class="termTagLine"> {{#if taxonomy}}
<span class="termSpan">Terms:</span> <span class="termSpan">Terms:</span>
<div class="" data-id="termList"> <div class="" data-id="termList">
<div class="addTag-dropdown" data-id="addTerm"> <div class="addTag-dropdown" data-id="addTerm">
<div class="addTagBase termBox" data-id="addTermPlus"><i class="fa fa-plus"></i></div> <div class="addTagBase termBox" title="Add Term" data-id="addTermPlus"><i class="fa fa-plus"></i></div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
...@@ -46,10 +46,19 @@ ...@@ -46,10 +46,19 @@
<div class="container-fluid gray-bg"> <div class="container-fluid gray-bg">
<div class="row"> <div class="row">
<div class="col-sm-custom"> <div class="col-sm-custom">
<div class="atlast-tabbable"> <div class="">
<h4 class="lineageLabel">LINEAGE & IMPACT</h4> <!-- <h4 class="lineageLabel"></h4> -->
<div class="panel panel-default lineageLayout"> <div class="lineageLayout">
<div id="r_lineageLayoutView" style="height:405px"> <div class="panel panel-default" id="panel">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left"> LINEAGE & IMPACT</h4>
<div class="btn-group pull-right">
<button type="button" class="fullscreen_panel" id="fullscreen_panel" title="Fullscreen"><i class="fa fa-expand" aria-hidden="true"></i></button>
<button type="button" id="expand_collapse_panel" class="expand_collapse_panel" title="Collapse"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
</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"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
...@@ -58,11 +67,21 @@ ...@@ -58,11 +67,21 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-sm-custom"> <div class="col-sm-custom">
<div class="atlast-tabbable"> <div class="panel with-nav-tabs panel-default">
<h4 class="detailLabel">DETAILS</h4> <div class="panel-heading clearfix">
<ul class="nav nav-tabs" role="tablist"> <h4 class="panel-title pull-left">DETAILS</h4>
<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 class="panel-body">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs ">
<li role="presentation" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li> <li role="presentation" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li>
<li role="presentation"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Tags</a></li> <li role="presentation"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Tags</a></li>
{{#if taxonomy}} {{#if taxonomy}}
...@@ -71,6 +90,8 @@ ...@@ -71,6 +90,8 @@
<li role="presentation" class="tab"><a href="#tab-audit" aria-controls="tab-audit" role="tab" data-toggle="tab">Audits</a></li> <li role="presentation" class="tab"><a href="#tab-audit" aria-controls="tab-audit" role="tab" data-toggle="tab">Audits</a></li>
<li role="presentation" class="tab schemaTable" style="display:none"><a href="#tab-schema" aria-controls="tab-schema" role="tab" data-toggle="tab">Schema</a></li> <li role="presentation" class="tab schemaTable" style="display:none"><a href="#tab-schema" aria-controls="tab-schema" role="tab" data-toggle="tab">Schema</a></li>
</ul> </ul>
</div>
</div>
<div class="tab-content"> <div class="tab-content">
<div id="tab-details" role="tabpanel" class="tab-pane active"> <div id="tab-details" role="tabpanel" class="tab-pane active">
<div id="r_entityDetailTableLayoutView" style="position: relative;"> <div id="r_entityDetailTableLayoutView" style="position: relative;">
...@@ -79,7 +100,7 @@ ...@@ -79,7 +100,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="tab-tagTable" role="tabpanel" class="tab-pane"> <div id="tab-tagTable" role="tabpanel" class="tab-pane fade">
<div id="r_tagTableLayoutView" style="position: relative;"> <div id="r_tagTableLayoutView" style="position: relative;">
<div class="fontLoader"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
...@@ -111,4 +132,6 @@ ...@@ -111,4 +132,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -14,21 +14,17 @@ ...@@ -14,21 +14,17 @@
* 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 class="panel-body graph-bg resize-graph" align="center"> <div style="position: absolute;height: calc(100% - 45px);width: calc(100% - 30px);">
<div class="graph" id="tree-container">
</div>
<div style="position:relative">
<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=350></svg> <svg width="100%" height="100%"></svg>
<div class="legends"> <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>
</div> </div>
<div class="zoomButtonGroup"> <div class="zoomButtonGroup">
<button type="button" class="zoomButton" id="zoom_in">+</button> <span type="button" id="zoom_in" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
<button type="button" class="zoomButton" id="zoom_out">-</button> <span type="button" id="zoom_out" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
</div>
</div> </div>
</div> </div>
dashboardv2/public/js/utils/Utils.js
...@@ -396,5 +396,51 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button ...@@ -396,5 +396,51 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button
loaderEl.hide(); loaderEl.hide();
titleBoxEl.fadeIn(); titleBoxEl.fadeIn();
} }
$.fn.toggleAttribute = function(attributeName, firstString, secondString) {
if (this.attr(attributeName) == firstString) {
this.attr(attributeName, secondString);
} else {
this.attr(attributeName, firstString);
}
}
$('body').on('click', '.expand_collapse_panel', function() {
var icon = $(this).find('i'),
panel = $(this).parents('.panel'),
panelBody = panel.find('.panel-body');
icon.toggleClass('fa-chevron-up fa-chevron-down');
$(this).toggleAttribute('title', 'Collapse', 'Expand');
panelBody.toggle('0.5', 'linear');
$(this).trigger('expand_collapse_panel', [$(this).parents('.panel')]);
});
$('body').on('click', '.fullscreen_panel', function() {
var icon = $(this).find('i'),
panel = $(this).parents('.panel'),
panelBody = panel.find('.panel-body');
icon.toggleClass('fa-expand fa-compress');
$(this).toggleAttribute('title', 'Fullscreen', 'Exit Fullscreen');
panel.toggleClass('panel-fullscreen');
panel.find('.expand_collapse_panel').toggle();
// Condition if user clicks on fullscree button and body is in collapse mode.
if (panel.hasClass('panel-fullscreen')) {
$('body').css("position", "fixed");
if (!panelBody.is(':visible')) {
panelBody.show();
panelBody.addClass('full-visible');
}
//first show body to get width and height for postion then trigger the event.
$(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
} else if (panelBody.hasClass('full-visible')) {
$(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
//first trigger the event to getwidth and height for postion then hide body.
panelBody.hide();
panelBody.removeClass('full-visible');
} else {
$('body').removeAttr("style");
$(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
}
});
return Utils; return Utils;
}); });
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -24,7 +24,8 @@ define(['require', ...@@ -24,7 +24,8 @@ define(['require',
'utils/Globals', 'utils/Globals',
'utils/Enums', 'utils/Enums',
'utils/Messages', 'utils/Messages',
'utils/UrlLinks' 'utils/UrlLinks',
'jquery-ui'
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) { ], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
'use strict'; 'use strict';
...@@ -57,7 +58,8 @@ define(['require', ...@@ -57,7 +58,8 @@ define(['require',
addTag: '[data-id="addTag"]', addTag: '[data-id="addTag"]',
addTerm: '[data-id="addTerm"]', addTerm: '[data-id="addTerm"]',
tagList: '[data-id="tagList"]', tagList: '[data-id="tagList"]',
termList: '[data-id="termList"]' termList: '[data-id="termList"]',
fullscreenPanel: "#fullscreen_panel"
}, },
templateHelpers: function() { templateHelpers: function() {
return { return {
...@@ -197,7 +199,43 @@ define(['require', ...@@ -197,7 +199,43 @@ define(['require',
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').show(); // to show tab loader
this.renderLineageLayoutView({ guid: this.id, entityDefCollection: this.entityDefCollection }); this.renderLineageLayoutView({
guid: this.id,
entityDefCollection: this.entityDefCollection,
actionCallBack: function() {
that.$('#expand_collapse_panel').click();
}
});
this.$(".resize-graph").resizable({
handles: ' s',
minHeight: 375,
stop: function(event, ui) {
that.$('.resize-graph').height(($(this).height()));
},
});
this.ui.fullscreenPanel.on('fullscreen_done', function(e, panel) {
var svgEl = panel.find('.panel-body svg'),
scaleEl = svgEl.find('>g'),
zoom = that.RLineageLayoutView.currentView.zoom,
svg = that.RLineageLayoutView.currentView.svg,
viewThis = that.RLineageLayoutView.currentView,
setGraphZoomPositionCal = that.RLineageLayoutView.currentView.setGraphZoomPositionCal,
zoomed = that.RLineageLayoutView.currentView.zoomed;;
if (zoom) {
setGraphZoomPositionCal.call(viewThis);
zoomed.call(viewThis);
if ($(e.currentTarget).find('i').hasClass('fa fa-compress')) {
svg.call(zoom)
.on("dblclick.zoom", null);
} else {
svg.call(zoom)
.on("wheel.zoom", null)
.on("dblclick.zoom", null);
}
}
})
}, },
fetchCollection: function() { fetchCollection: function() {
this.collection.fetch({ reset: true }); this.collection.fetch({ reset: true });
......
dashboardv2/public/js/views/schema/SchemaLayoutView.js
...@@ -99,7 +99,7 @@ define(['require', ...@@ -99,7 +99,7 @@ define(['require',
includePagination: true, includePagination: true,
includePageSize: false, includePageSize: false,
includeFooterRecords: true, includeFooterRecords: true,
includeOrderAbleColumns: true, includeOrderAbleColumns: false,
gridOpts: { gridOpts: {
className: "table table-hover backgrid table-quickMenu", className: "table table-hover backgrid table-quickMenu",
emptyText: 'No records found!' emptyText: 'No records found!'
...@@ -204,8 +204,7 @@ define(['require', ...@@ -204,8 +204,7 @@ define(['require',
var columns = new columnCollection(that.getSchemaTableColumns()); var columns = new columnCollection(that.getSchemaTableColumns());
//columns.setPositions().sort(); //columns.setPositions().sort();
that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, { that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
columns: columns, columns: columns
includeOrderAbleColumns: true
}))); })));
that.$('.multiSelectTerm').hide(); that.$('.multiSelectTerm').hide();
that.$('.multiSelectTag').hide(); that.$('.multiSelectTag').hide();
......
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