Skip to content

A
atlas
Commit 3c0b2746 by kevalbhatt
Options

ATLAS-3954: UI: Type system property table improvement

parent 39ff496f
Showing with 707 additions and 240 deletions
dashboardv2/public/css/scss/common.scss
...@@ -180,6 +180,11 @@ pre { ...@@ -180,6 +180,11 @@ pre {
.json-string { .json-string {
color: olive; color: olive;
&.cursor {
cursor: pointer;
text-decoration: underline;
}
} }
} }
...@@ -191,6 +196,11 @@ pre { ...@@ -191,6 +196,11 @@ pre {
.panel-body .memory-details { .panel-body .memory-details {
pre { pre {
&.code-block { &.code-block {
&.fixed-height {
max-height: 112px;
overflow: auto;
}
&.shrink { &.shrink {
height: 144px; height: 144px;
......
dashboardv2/public/css/scss/graph.scss
...@@ -193,7 +193,7 @@ span#zoom_in { ...@@ -193,7 +193,7 @@ span#zoom_in {
width: 100%; width: 100%;
right: 0; right: 0;
padding: 0 !important; padding: 0 !important;
z-index: 9999; z-index: 99;
overflow: hidden !important; overflow: hidden !important;
background: white; background: white;
...@@ -267,3 +267,37 @@ span#zoom_in { ...@@ -267,3 +267,37 @@ span#zoom_in {
} }
} }
.box-panel.fix-box {
position: fixed;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
max-height: 100vh;
z-index: 999;
bottom: 0;
width: 400px;
overflow: auto;
border-radius: 0px;
margin: 0 !important;
&.slide-from-left.size-lg {
left: -413px;
&.show-box-panel {
left: 0;
margin: 0 !important;
}
}
.body {
tbody {
overflow: auto;
height: calc(100vh - 48px);
position: absolute;
padding-bottom: 15px;
}
}
}
\ No newline at end of file
dashboardv2/public/css/scss/table.scss
...@@ -41,6 +41,7 @@ tr.empty { ...@@ -41,6 +41,7 @@ tr.empty {
} }
.entity-detail-table, .entity-detail-table,
.type-node-details,
.relationship-detail-table { .relationship-detail-table {
position: relative; position: relative;
...@@ -66,6 +67,26 @@ tr.empty { ...@@ -66,6 +67,26 @@ tr.empty {
} }
} }
.type-node-details {
.header {
.pretty.p-switch .state:before {
border: 1px solid white;
}
.pretty.p-switch .state label:after {
background-color: white !important;
}
.pretty.p-switch.p-fill input:checked~.state label:after {
background-color: #4a90e2 !important;
}
.pretty.p-switch.p-fill input:checked~.state.p-primary:before {
background-color: white !important;
}
}
}
.backgrid { .backgrid {
td { td {
white-space: normal; white-space: normal;
...@@ -98,6 +119,13 @@ tr.empty { ...@@ -98,6 +119,13 @@ tr.empty {
} }
} }
} }
.debuggging-table-header {
padding-right: 0px !important;
button{
float: right;
}
}
} }
.backgrid-paginator ul { .backgrid-paginator ul {
......
dashboardv2/public/js/external_lib/atlas-lineage/dist/index.js
This source diff could not be displayed because it is too large. You can view the blob instead.
dashboardv2/public/js/external_lib/atlas-lineage/src/Utils/LineageUtils.js
...@@ -374,7 +374,7 @@ const LineageUtils = { ...@@ -374,7 +374,7 @@ const LineageUtils = {
reader.addEventListener("load", () => callback(reader.result)); reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(file); reader.readAsDataURL(file);
}, },
imgShapeRender: function (parent, bbox, node, { dagreD3, defsEl, imgBasePath, guid }) { imgShapeRender: function (parent, bbox, node, { dagreD3, defsEl, imgBasePath, guid, isRankdirToBottom }) {
var that = this, var that = this,
viewGuid = guid, viewGuid = guid,
imageIconPath = this.getEntityIconPath({ entityData: node, imgBasePath }), imageIconPath = this.getEntityIconPath({ entityData: node, imgBasePath }),
...@@ -391,7 +391,7 @@ const LineageUtils = { ...@@ -391,7 +391,7 @@ const LineageUtils = {
var shapeSvg = parent var shapeSvg = parent
.append("circle") .append("circle")
.attr("fill", "url(#img_" + imgName + ")") .attr("fill", "url(#img_" + imgName + ")")
.attr("r", "24px") .attr("r", isRankdirToBottom ? "30px" : "24px")
.attr("data-stroke", node.id) .attr("data-stroke", node.id)
.attr("stroke-width", "2px") .attr("stroke-width", "2px")
.attr("class", "nodeImage " + (currentNode ? "currentNode" : node.isProcess ? "process" : "node")); .attr("class", "nodeImage " + (currentNode ? "currentNode" : node.isProcess ? "process" : "node"));
...@@ -478,8 +478,8 @@ const LineageUtils = { ...@@ -478,8 +478,8 @@ const LineageUtils = {
}); });
} }
}) })
.attr("x", "4") .attr("x", isRankdirToBottom ? "11" : "4")
.attr("y", currentNode ? "3" : "4") .attr("y", isRankdirToBottom ? "20" : currentNode ? "3" : "4")
.attr("width", "40") .attr("width", "40")
.attr("height", "40"); .attr("height", "40");
} }
......
dashboardv2/public/js/external_lib/atlas-lineage/src/index.js
...@@ -26,6 +26,7 @@ import "./styles/style.scss"; ...@@ -26,6 +26,7 @@ import "./styles/style.scss";
export default class LineageHelper { export default class LineageHelper {
constructor(options) { constructor(options) {
this.options = {};
this._updateOptions(options); this._updateOptions(options);
const { el, manualTrigger = false } = this.options; const { el, manualTrigger = false } = this.options;
if (el === undefined) { if (el === undefined) {
...@@ -33,6 +34,7 @@ export default class LineageHelper { ...@@ -33,6 +34,7 @@ export default class LineageHelper {
} }
this.initReturnObj = { this.initReturnObj = {
init: (arg) => this.init(arg), init: (arg) => this.init(arg),
updateOptions: (options) => this._updateAllOptions(options),
createGraph: (opt = {}) => this._createGraph(this.options, this.graphOptions, opt), createGraph: (opt = {}) => this._createGraph(this.options, this.graphOptions, opt),
clear: (arg) => this.clear(arg), clear: (arg) => this.clear(arg),
refresh: (arg) => this.refresh(arg), refresh: (arg) => this.refresh(arg),
...@@ -78,12 +80,27 @@ export default class LineageHelper { ...@@ -78,12 +80,27 @@ export default class LineageHelper {
return this.initReturnObj; return this.initReturnObj;
} }
/** /**
* [updateAllOptions]
* @param {[type]}
* @return {[type]}
*/
_updateAllOptions(options) {
Object.assign(this.options, options);
var svgRect = this.svg.node().getBoundingClientRect();
this.graphOptions.width = this.options.width || svgRect.width;
this.graphOptions.height = this.options.height || svgRect.height;
const { svg, width, height, guid } = this.graphOptions;
const { fitToScreen } = this.options;
svg.select("g").node().removeAttribute("transform");
svg.attr("viewBox", "0 0 " + width + " " + height).attr("enable-background", "new 0 0 " + width + " " + height);
this.centerAlign({ fitToScreen, guid });
}
/**
* [updateOptions get the options from user and appedn add it in this,option context] * [updateOptions get the options from user and appedn add it in this,option context]
* @param {[Object]} options [lib options from user] * @param {[Object]} options [lib options from user]
* @return {[null]} [null] * @return {[null]} [null]
*/ */
_updateOptions(options) { _updateOptions(options) {
this.options = {};
Object.assign(this.options, { filterObj: { isProcessHideCheck: false, isDeletedEntityHideCheck: false } }, options); Object.assign(this.options, { filterObj: { isProcessHideCheck: false, isDeletedEntityHideCheck: false } }, options);
} }
/** /**
...@@ -200,7 +217,7 @@ export default class LineageHelper { ...@@ -200,7 +217,7 @@ export default class LineageHelper {
if (node && node.attributes) { if (node && node.attributes) {
downloadFileName = `${node.attributes.qualifiedName || node.attributes.name || "lineage_export"}.png`; downloadFileName = `${node.attributes.qualifiedName || node.attributes.name || "lineage_export"}.png`;
} else { } else {
downloadFileName = "lineage_export.png"; downloadFileName = "export.png";
} }
} }
...@@ -258,6 +275,7 @@ export default class LineageHelper { ...@@ -258,6 +275,7 @@ export default class LineageHelper {
this.svg = select(el); this.svg = select(el);
if (!(el instanceof SVGElement)) { if (!(el instanceof SVGElement)) {
this.svg.selectAll("*").remove();
this.svg = this.svg this.svg = this.svg
.append("svg") .append("svg")
.attr("xmlns", "http://www.w3.org/2000/svg") .attr("xmlns", "http://www.w3.org/2000/svg")
...@@ -385,7 +403,19 @@ export default class LineageHelper { ...@@ -385,7 +403,19 @@ export default class LineageHelper {
* @return {[type]} [description] * @return {[type]} [description]
*/ */
_createGraph( _createGraph(
{ data = {}, imgBasePath, isShowTooltip, isShowHoverPath, onLabelClick, onPathClick, onNodeClick, zoom, fitToScreen }, {
data = {},
imgBasePath,
isShowTooltip,
isShowHoverPath,
onLabelClick,
onPathClick,
onNodeClick,
zoom,
fitToScreen,
getToolTipContent,
toolTipTitle
},
graphOptions, graphOptions,
{ refresh } { refresh }
) { ) {
...@@ -393,7 +423,8 @@ export default class LineageHelper { ...@@ -393,7 +423,8 @@ export default class LineageHelper {
this.options.beforeRender(); this.options.beforeRender();
} }
const that = this, const that = this,
{ svg, g, width, height } = graphOptions; { svg, g, width, height } = graphOptions,
isRankdirToBottom = this.options.dagreOptions && this.options.dagreOptions.rankdir === "tb";
if (svg instanceof selection === false) { if (svg instanceof selection === false) {
throw new Error("svg is not initialized or something went wrong while creatig graph instance"); throw new Error("svg is not initialized or something went wrong while creatig graph instance");
...@@ -428,6 +459,7 @@ export default class LineageHelper { ...@@ -428,6 +459,7 @@ export default class LineageHelper {
render.shapes().img = function () { render.shapes().img = function () {
return LineageUtils.imgShapeRender(...arguments, { return LineageUtils.imgShapeRender(...arguments, {
...graphOptions, ...graphOptions,
isRankdirToBottom: isRankdirToBottom,
imgBasePath: that._getValueFromUser(imgBasePath), imgBasePath: that._getValueFromUser(imgBasePath),
defsEl defsEl
}); });
...@@ -437,11 +469,17 @@ export default class LineageHelper { ...@@ -437,11 +469,17 @@ export default class LineageHelper {
.attr("class", "d3-tip") .attr("class", "d3-tip")
.offset([10, 0]) .offset([10, 0])
.html((d) => { .html((d) => {
if (getToolTipContent && typeof getToolTipContent === "function") {
return getToolTipContent(d, g.node(d));
} else {
var value = g.node(d); var value = g.node(d);
var htmlStr = ""; var htmlStr = "";
if (value.id !== this.guid) { if (toolTipTitle) {
htmlStr = "<h5 style='text-align: center;'>" + toolTipTitle + "</h5>";
} else if (value.id !== this.guid) {
htmlStr = "<h5 style='text-align: center;'>" + (value.isLineage ? "Lineage" : "Impact") + "</h5>"; htmlStr = "<h5 style='text-align: center;'>" + (value.isLineage ? "Lineage" : "Impact") + "</h5>";
} }
htmlStr += "<h5 class='text-center'><span style='color:#359f89'>" + value.toolTipLabel + "</span></h5> "; htmlStr += "<h5 class='text-center'><span style='color:#359f89'>" + value.toolTipLabel + "</span></h5> ";
if (value.typeName) { if (value.typeName) {
htmlStr += "<h5 class='text-center'><span>(" + value.typeName + ")</span></h5> "; htmlStr += "<h5 class='text-center'><span>(" + value.typeName + ")</span></h5> ";
...@@ -450,6 +488,7 @@ export default class LineageHelper { ...@@ -450,6 +488,7 @@ export default class LineageHelper {
htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> "; htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> ";
} }
return "<div class='tip-inner-scroll'>" + htmlStr + "</div>"; return "<div class='tip-inner-scroll'>" + htmlStr + "</div>";
}
}); });
svg.call(tooltip); svg.call(tooltip);
...@@ -463,7 +502,12 @@ export default class LineageHelper { ...@@ -463,7 +502,12 @@ export default class LineageHelper {
//change text postion //change text postion
svgGroupEl svgGroupEl
.selectAll("g.nodes g.label") .selectAll("g.nodes g.label")
.attr("transform", "translate(2,-35)") .attr("transform", () => {
if (isRankdirToBottom) {
return "translate(2,-20)";
}
return "translate(2,-35)";
})
.on("mouseenter", function (d) { .on("mouseenter", function (d) {
event.preventDefault(); event.preventDefault();
select(this).classed("highlight", true); select(this).classed("highlight", true);
......
dashboardv2/public/js/templates/administrator/AdministratorLayoutView_tmpl.html
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<div id="r_adminTableLayoutView"> <div id="r_adminTableLayoutView">
</div> </div>
</div> </div>
<div id="tab-typeSystem" role="typeSystem" class="tab-pane animated fadeIn" style="position: relative;"> <div id="tab-typeSystem" role="typeSystem" class="tab-pane" style="position: relative;">
<div id="r_typeSystemTreeLayoutView"> <div id="r_typeSystemTreeLayoutView">
</div> </div>
</div> </div>
......
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="tab-lineage" role="lineage" class="tab-pane animated fadeIn"> <div id="tab-lineage" role="lineage" class="tab-pane">
<div id="r_lineageLayoutView" class="animated position-relative" align="center"> <div id="r_lineageLayoutView" class="animated position-relative" align="center">
<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>
......
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -124,7 +124,13 @@ ...@@ -124,7 +124,13 @@
</button> </button>
</div> </div>
</div> </div>
<div class="box-panel size-lg node-details slide-from-left lineage-node-detail"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="legends pull-left" style="height: 25px; padding: 2px;"></div>
<div class="svg" style="height: 100%; width: 100%"></div>
</div>
<div class="box-panel size-lg slide-from-left lineage-node-detail fix-box">
<div class="header clearfix"> <div class="header clearfix">
<h4><span data-id="typeName"></span></h4> <h4><span data-id="typeName"></span></h4>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span> <span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
...@@ -135,11 +141,5 @@ ...@@ -135,11 +141,5 @@
<tbody data-id="nodeDetailTable"></tbody> <tbody data-id="nodeDetailTable"></tbody>
</table> </table>
</div> </div>
</div>
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="legends pull-left" style="height: 25px; padding: 2px;"></div>
<div class="svg" style="height: 100%; width: 100%"></div>
</div> </div>
<div class="hidden-svg"></div> <div class="hidden-svg"></div>
\ No newline at end of file
dashboardv2/public/js/templates/graph/TypeSystemTreeView_tmpl.html
...@@ -15,16 +15,30 @@ ...@@ -15,16 +15,30 @@
* limitations under the License. * limitations under the License.
--> -->
<div id="typeSystemTreeViewPage" data-id="typeSystemTreeViewPage" class="systemTypeTree" style="height: calc(100vh - 180px); width: 100%; position: relative;overflow: hidden;"> <div id="typeSystemTreeViewPage" data-id="typeSystemTreeViewPage" class="systemTypeTree" style="height: calc(100vh - 180px); width: 100%; position: relative;overflow: hidden;">
<div class="box-panel size-lg node-details slide-from-left lineage-node-detail"> <div class="box-panel size-lg type-node-details fix-box slide-from-left lineage-node-detail">
<div class="header clearfix"> <div class="header clearfix">
<h4><span data-id="typeName"></span></h4> <div class="typeDetailHeader">
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span> <h4 style="padding-right: 67px;"><span data-id="typeName"></span></h4>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span> <div class="pretty p-switch p-fill" style="position: absolute;top: 13px;right: 32px;">
<input type="checkbox" data-id="noValueToggle" title="Show empty values" />
<div class="state p-primary">
<label></label>
</div>
</div>
<span data-id="box-close" class="btn btn-sm btn-close "><i class="fa fa-close"></i></span>
</div>
<div class="typeAttrDetailHeader" style="display: none;">
<span data-id="box-back" class="btn btn-sm btn-close" style="left: 0px; right: auto;"><i class="fa fa-angle-left"></i></span>
<h4 style="padding-left: 27px;"><span data-id="typeAttrDetailHeader"></span></h4>
</div>
</div> </div>
<div class="body"> <div class="body">
<table class="table bold-key"> <table class="table bold-key">
<tbody data-id="nodeDetailTable"></tbody> <tbody data-id="nodeDetailTable" class="hide-empty-value"></tbody>
</table> </table>
<div data-id="attribute-table" style="height: calc(100vh - 60px);display: none">
<pre class="code-block" style="height: 100%"></pre>
</div>
</div> </div>
</div> </div>
<div class="fontLoader"> <div class="fontLoader">
...@@ -49,7 +63,6 @@ ...@@ -49,7 +63,6 @@
<div class="body"> <div class="body">
<div class="col-sm-12 no-padding"> <div class="col-sm-12 no-padding">
<div class="srchType clearfix"> <div class="srchType clearfix">
<label class="srchTitle">Search Lineage Entity: </label>
<div class=""> <div class="">
<div class="col-sm-12 no-padding temFilter"> <div class="col-sm-12 no-padding temFilter">
<select data-id="typeSearch"></select> <select data-id="typeSearch"></select>
...@@ -59,28 +72,62 @@ ...@@ -59,28 +72,62 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box-panel setting-box">
<div class="header clearfix">
<h4>Settings</h4>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="showOnlyHoverPath form-group text-left col-sm-12">
<div class="pretty p-switch p-fill">
<input type="checkbox" checked class="pull-left" data-id="showOnlyHoverPath" value="" />
<div class="state p-primary">
<label>On hover show current path</label>
</div>
</div>
</div>
<div class="showTooltip form-group text-left col-sm-12">
<div class="pretty p-switch p-fill">
<input type="checkbox" class="pull-left" data-id="showTooltip" value="" />
<div class="state p-primary">
<label>Show node details on hover</label>
</div>
</div>
</div>
</div>
</div>
<div class="graph-button-group pull-right"> <div class="graph-button-group pull-right">
<div> <div>
<button data-id="reset" class="btn btn-action btn-gray btn-sm" title="Realign Lineage"> <button data-id="reset" class="btn btn-action btn-gray btn-sm" title="Reset">
<i class="fa fa-retweet"></i> <i class="fa fa-retweet"></i>
</button> </button>
</div> </div>
<div> <div>
<button data-id="saveSvg" class="btn btn-action btn-gray btn-sm" title="Export to PNG">
<i class="fa fa-camera"></i>
</button>
</div>
<div>
<button type="button" data-id="setting-toggler" title="Settings" class="btn btn-action btn-gray btn-sm">
<i class="fa fa-gear"></i>
</button>
</div>
<div>
<button type="button" data-id="filter-toggler" title="Filter" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button> <button type="button" data-id="filter-toggler" title="Filter" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
</div> </div>
<div> <div>
<button type="button" data-id="search-toggler" title="Search" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button> <button type="button" data-id="search-toggler" title="Search" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="zoom-in"> <button type="button" class="btn btn-action btn-gray btn-sm" title="Zoom In" data-id="zoom-in">
<i class="fa fa-search-plus"></i> <i class="fa fa-search-plus"></i>
</button> </button>
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="zoom-out"> <button type="button" class="btn btn-action btn-gray btn-sm" title="Zoom Out" data-id="zoom-out">
<i class="fa fa-search-minus"></i> <i class="fa fa-search-minus"></i>
</button> </button>
</div> </div>
<div> <div>
<button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage"> <button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm">
<i class="fa fa-expand"></i> <i class="fa fa-expand"></i>
</button> </button>
</div> </div>
......
dashboardv2/public/js/utils/CommonViewFunction.js
...@@ -79,6 +79,8 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -79,6 +79,8 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
sortBy = options.sortBy, sortBy = options.sortBy,
valueObject = options.valueObject, valueObject = options.valueObject,
extractJSON = options.extractJSON, extractJSON = options.extractJSON,
getArrayOfStringElement = options.getArrayOfStringElement,
getArrayOfStringFormat = options.getArrayOfStringFormat,
isTable = _.isUndefined(options.isTable) ? true : options.isTable, isTable = _.isUndefined(options.isTable) ? true : options.isTable,
attributeDefs = options.attributeDefs, attributeDefs = options.attributeDefs,
formatIntVal = options.formatIntVal, formatIntVal = options.formatIntVal,
...@@ -108,6 +110,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -108,6 +110,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
return "N/A"; return "N/A";
}, },
getValue = function(val, key) { getValue = function(val, key) {
if (options && options.getValue) {
val = options.getValue(val, key);
}
if (!_.isUndefined(val) && !_.isNull(val)) { if (!_.isUndefined(val) && !_.isNull(val)) {
if ((_.isNumber(val) || !_.isNaN(parseInt(val))) && formatIntVal) { if ((_.isNumber(val) || !_.isNaN(parseInt(val))) && formatIntVal) {
return numberFormat(val); return numberFormat(val);
...@@ -185,7 +190,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -185,7 +190,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
if (_.isString(inputOutputField) || _.isBoolean(inputOutputField) || _.isNumber(inputOutputField)) { if (_.isString(inputOutputField) || _.isBoolean(inputOutputField) || _.isNumber(inputOutputField)) {
var tempVarfor$check = inputOutputField.toString(); var tempVarfor$check = inputOutputField.toString();
if (tempVarfor$check.indexOf("$") == -1) { if (tempVarfor$check.indexOf("$") == -1) {
valueOfArray.push('<span class="json-string">' + getValue(inputOutputField, key) + '</span>'); var tmpVal = getValue(inputOutputField, key)
if (getArrayOfStringElement) {
valueOfArray.push(getArrayOfStringElement(tmpVal, key));
} else {
valueOfArray.push('<span class="json-string">' + tmpVal + '</span>');
}
} }
} else if (_.isObject(inputOutputField) && !id) { } else if (_.isObject(inputOutputField) && !id) {
var attributesList = inputOutputField; var attributesList = inputOutputField;
...@@ -251,8 +261,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -251,8 +261,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
} }
} }
if (valueOfArray.length) { if (valueOfArray.length) {
if (getArrayOfStringFormat) {
subLink = getArrayOfStringFormat(valueOfArray, key);
} else {
subLink = valueOfArray.join(', '); subLink = valueOfArray.join(', ');
} }
}
return subLink === "" ? getEmptyString(key) : subLink; return subLink === "" ? getEmptyString(key) : subLink;
} }
var valueObjectKeysList = _.keys(valueObject); var valueObjectKeysList = _.keys(valueObject);
...@@ -297,12 +311,17 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -297,12 +311,17 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
if (_.isObject(valueObject[key]) && !_.isEmpty(valueObject[key])) { if (_.isObject(valueObject[key]) && !_.isEmpty(valueObject[key])) {
var matchedLinkString = val.match(/href|value-loader\w*/g), var matchedLinkString = val.match(/href|value-loader\w*/g),
matchedJson = val.match(/json-value|json-string\w*/g), matchedJson = val.match(/json-value|json-string\w*/g),
matchedKey = val.match(/json-key\w*/g),
isMatchLinkStringIsSingle = matchedLinkString && matchedLinkString.length <= 5, isMatchLinkStringIsSingle = matchedLinkString && matchedLinkString.length <= 5,
isMatchJSONStringIsSingle = matchedJson && matchedJson.length == 1, isMatchJSONStringIsSingle = matchedJson && matchedJson.length == 1,
expandCollapseButton = ""; expandCollapseButton = "";
if ((matchedJson && !isMatchJSONStringIsSingle) || (matchedLinkString && !isMatchLinkStringIsSingle)) { if ((matchedJson) || (matchedLinkString)) {
var className = "code-block fixed-height";
if (!isMatchJSONStringIsSingle) {
className += " shrink";
expandCollapseButton = '<button class="expand-collapse-button"><i class="fa"></i></button>'; expandCollapseButton = '<button class="expand-collapse-button"><i class="fa"></i></button>';
htmlTag = '<pre class="shrink code-block ' + (isMatchJSONStringIsSingle ? 'fixed-height' : '') + '">' + expandCollapseButton + '<code>' + val + '</code></pre>'; }
htmlTag = '<pre class="' + className + '">' + expandCollapseButton + '<code>' + val + '</code></pre>';
} }
} }
table += '<tr class="' + appendClass + '"><td>' + (_.escape(key) + listCount) + '</td><td>' + htmlTag + '</td></tr>'; table += '<tr class="' + appendClass + '"><td>' + (_.escape(key) + listCount) + '</td><td>' + htmlTag + '</td></tr>';
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -134,13 +134,13 @@ define(['require', ...@@ -134,13 +134,13 @@ define(['require',
}, },
onShow: function() { onShow: function() {
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.$el.resizable({ // this.$el.resizable({
handles: ' s', // handles: ' s',
minHeight: 375, // minHeight: 375,
stop: function(event, ui) { // stop: function(event, ui) {
ui.element.height(($(this).height())); // ui.element.height(($(this).height()));
}, // },
}); // });
}, },
onClickLineageFullscreenToggler: function(e) { onClickLineageFullscreenToggler: function(e) {
var icon = $(e.currentTarget).find('i'), var icon = $(e.currentTarget).find('i'),
...@@ -152,6 +152,11 @@ define(['require', ...@@ -152,6 +152,11 @@ define(['require',
icon.parent('button').attr("data-original-title", "Default View"); icon.parent('button').attr("data-original-title", "Default View");
} }
panel.toggleClass('fullscreen-mode'); panel.toggleClass('fullscreen-mode');
var node = this.$("svg").parent()[0].getBoundingClientRect();
this.LineageHelperRef.updateOptions({
width: node.width,
height: node.height
});
}, },
onCheckUnwantedEntity: function(e) { onCheckUnwantedEntity: function(e) {
var that = this; var that = this;
...@@ -210,6 +215,8 @@ define(['require', ...@@ -210,6 +215,8 @@ define(['require',
}, },
onClickResetLineage: function() { onClickResetLineage: function() {
this.LineageHelperRef.refresh(); this.LineageHelperRef.refresh();
this.searchNodeObj.selectedNode = "";
this.ui.lineageTypeSearch.data({ refresh: true }).val("").trigger("change");
}, },
onClickSaveSvg: function(e, a) { onClickSaveSvg: function(e, a) {
this.LineageHelperRef.exportLineage(); this.LineageHelperRef.exportLineage();
...@@ -249,10 +256,6 @@ define(['require', ...@@ -249,10 +256,6 @@ define(['require',
}) })
}, },
createGraph: function(data) { createGraph: function(data) {
// if (_.isEmpty(this.g._nodes)) {
// this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No relations to display</text>');
// return;
// }
var that = this; var that = this;
$('.resizeGraph').css("height", this.$('.svg').height() + "px"); $('.resizeGraph').css("height", this.$('.svg').height() + "px");
...@@ -364,9 +367,13 @@ define(['require', ...@@ -364,9 +367,13 @@ define(['require',
}).on('change.select2', function(e) { }).on('change.select2', function(e) {
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
if (!that.ui.lineageTypeSearch.data("refresh")) {
var selectedNode = $('[data-id="typeSearch"]').val(); var selectedNode = $('[data-id="typeSearch"]').val();
that.searchNodeObj.selectedNode = selectedNode; that.searchNodeObj.selectedNode = selectedNode;
that.LineageHelperRef.searchNode({ guid: selectedNode }); that.LineageHelperRef.searchNode({ guid: selectedNode });
} else {
that.ui.lineageTypeSearch.data("refresh", false);
}
}); });
if (this.searchNodeObj.selectedNode) { if (this.searchNodeObj.selectedNode) {
this.ui.lineageTypeSearch.val(this.searchNodeObj.selectedNode); this.ui.lineageTypeSearch.val(this.searchNodeObj.selectedNode);
......
dashboardv2/public/js/views/graph/TypeSystemTreeView.js
...@@ -55,16 +55,23 @@ define([ ...@@ -55,16 +55,23 @@ define([
typeSystemTreeViewPage: "[data-id='typeSystemTreeViewPage']", typeSystemTreeViewPage: "[data-id='typeSystemTreeViewPage']",
boxClose: '[data-id="box-close"]', boxClose: '[data-id="box-close"]',
nodeDetailTable: '[data-id="nodeDetailTable"]', nodeDetailTable: '[data-id="nodeDetailTable"]',
attributeTable: '[data-id="attribute-table"]',
typeSearch: '[data-id="typeSearch"]', typeSearch: '[data-id="typeSearch"]',
filterServiceType: '[data-id="filterServiceType"]', filterServiceType: '[data-id="filterServiceType"]',
onZoomIn: '[data-id="zoom-in"]', onZoomIn: '[data-id="zoom-in"]',
onZoomOut: '[data-id="zoom-out"]', onZoomOut: '[data-id="zoom-out"]',
filterBox: ".filter-box", filterBox: ".filter-box",
searchBox: ".search-box", searchBox: ".search-box",
settingBox: '.setting-box',
filterToggler: '[data-id="filter-toggler"]', filterToggler: '[data-id="filter-toggler"]',
settingToggler: '[data-id="setting-toggler"]',
searchToggler: '[data-id="search-toggler"]', searchToggler: '[data-id="search-toggler"]',
reset: '[data-id="reset"]', reset: '[data-id="reset"]',
fullscreenToggler: '[data-id="fullScreen-toggler"]' fullscreenToggler: '[data-id="fullScreen-toggler"]',
noValueToggle: "[data-id='noValueToggle']",
showOnlyHoverPath: '[data-id="showOnlyHoverPath"]',
showTooltip: '[data-id="showTooltip"]',
saveSvg: '[data-id="saveSvg"]',
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
...@@ -73,9 +80,19 @@ define([ ...@@ -73,9 +80,19 @@ define([
events["click " + this.ui.onZoomIn] = "onClickZoomIn"; events["click " + this.ui.onZoomIn] = "onClickZoomIn";
events["click " + this.ui.onZoomOut] = "onClickZoomOut"; events["click " + this.ui.onZoomOut] = "onClickZoomOut";
events["click " + this.ui.filterToggler] = "onClickFilterToggler"; events["click " + this.ui.filterToggler] = "onClickFilterToggler";
events["click " + this.ui.settingToggler] = 'onClickSettingToggler';
events["click " + this.ui.searchToggler] = "onClickSearchToggler"; events["click " + this.ui.searchToggler] = "onClickSearchToggler";
events["click " + this.ui.saveSvg] = 'onClickSaveSvg';
events["click " + this.ui.fullscreenToggler] = "onClickFullscreenToggler"; events["click " + this.ui.fullscreenToggler] = "onClickFullscreenToggler";
events["click " + this.ui.reset] = "onClickReset"; events["click " + this.ui.reset] = "onClickReset";
events["click " + this.ui.noValueToggle] = function() {
this.showAllProperties = !this.showAllProperties;
this.ui.noValueToggle.attr("data-original-title", (this.showAllProperties ? "Hide" : "Show") + " empty values");
Utils.togglePropertyRelationshipTableEmptyValues({
"inputType": this.ui.noValueToggle,
"tableEl": this.ui.nodeDetailTable
});
};
return events; return events;
}, },
...@@ -90,7 +107,35 @@ define([ ...@@ -90,7 +107,35 @@ define([
this.initializeGraph(); this.initializeGraph();
this.fetchGraphData(); this.fetchGraphData();
}, },
onRender: function() {}, onRender: function() {
var that = this;
this.$el.on("click", "code li[data-def]", function() {
if (that.selectedDetailNode) {
var dataObj = $(this).data(),
defObj = that.selectedDetailNode[dataObj.def],
newData = null;
if (dataObj.def === "businessAttributes") {
newData = defObj[dataObj.attribute];
} else {
newData = _.filter(defObj, { name: dataObj.attribute });
}
that.ui.attributeTable.find("pre").html('<code style="max-height: 100%">' + Utils.JSONPrettyPrint(newData, function(val) {
return val;
}) + '</code>');
that.$el.find('[data-id="typeAttrDetailHeader"]').text(dataObj.def);
that.ui.nodeDetailTable.hide("slide", { direction: "right" }, 400);
that.ui.attributeTable.show("slide", { direction: "left" }, 400);
that.$el.find(".typeDetailHeader").hide();
that.$el.find(".typeAttrDetailHeader").show()
}
});
this.$el.on("click", "span[data-id='box-back']", function() {
that.ui.nodeDetailTable.show("slide", { direction: "right" }, 400);
that.ui.attributeTable.hide("slide", { direction: "left" }, 400);
that.$el.find(".typeDetailHeader").show();
that.$el.find(".typeAttrDetailHeader").hide()
})
},
fetchGraphData: function(options) { fetchGraphData: function(options) {
var that = this; var that = this;
var entityTypeDef = that.entityDefCollection.fullCollection.toJSON(); var entityTypeDef = that.entityDefCollection.fullCollection.toJSON();
...@@ -101,7 +146,7 @@ define([ ...@@ -101,7 +146,7 @@ define([
} }
if (entityTypeDef.length) { if (entityTypeDef.length) {
that.generateData($.extend(true, {}, { data: entityTypeDef }, options)).then(function(graphObj) { that.generateData($.extend(true, {}, { data: entityTypeDef }, options)).then(function(graphObj) {
that.createGraph(); that.createGraph(options);
}); });
} }
}, },
...@@ -161,36 +206,22 @@ define([ ...@@ -161,36 +206,22 @@ define([
if (options.data) { if (options.data) {
if (options.filter) { if (options.filter) {
var pendingSubList = {}, // filter
pendingSuperList = {}, var pendingSuperList = {},
temp = {}, outOfFilterData = {},
doneList = {}, doneList = {};
traveseSubSuper = function(obj, ignoreSubTypes) {
var linkParents = function(obj) {
if (obj && obj.superTypes.length) {
_.each(obj.superTypes, function(superType) {
var fromEntityId = obj.guid; var fromEntityId = obj.guid;
if (!ignoreSubTypes && obj.subTypes.length) { var tempObj = doneList[superType] || outOfFilterData[superType];
_.each(obj.subTypes, function(subType) {
var tempObj = doneList[subType] || temp[subType];
if (tempObj) { if (tempObj) {
if (!doneList[superType]) {
setNode(tempObj.guid, tempObj); setNode(tempObj.guid, tempObj);
setEdge(fromEntityId, tempObj.guid);
} else {
if (pendingSubList[subType]) {
pendingSubList[subType].push(fromEntityId);
} else {
pendingSubList[subType] = [fromEntityId];
}
} }
});
}
if (obj.superTypes.length) {
_.each(obj.superTypes, function(superType) {
var tempObj = doneList[superType] || temp[superType];
if (tempObj) {
setNode(tempObj.guid, tempObj);
setEdge(tempObj.guid, fromEntityId); setEdge(tempObj.guid, fromEntityId);
if (tempObj.superTypes.length) { linkParents(tempObj);
traveseSubSuper(tempObj, true);
}
} else { } else {
if (pendingSuperList[superType]) { if (pendingSuperList[superType]) {
pendingSuperList[superType].push(fromEntityId); pendingSuperList[superType].push(fromEntityId);
...@@ -200,52 +231,31 @@ define([ ...@@ -200,52 +231,31 @@ define([
} }
}); });
} }
}; }
_.each(options.data, function(obj) { _.each(options.data, function(obj) {
var fromEntityId = obj.guid; var fromEntityId = obj.guid;
if (obj.serviceType === options.filter) { if (pendingSuperList[obj.name]) {
doneList[obj.name] = obj; doneList[obj.name] = obj;
setNode(fromEntityId, obj); setNode(fromEntityId, obj);
if (pendingSubList[obj.name]) {
_.map(pendingSubList[obj.name], function(guid) {
setEdge(guid, fromEntityId);
});
delete pendingSubList[obj.name];
}
if (pendingSuperList[obj.name]) {
_.map(pendingSuperList[obj.name], function(guid) { _.map(pendingSuperList[obj.name], function(guid) {
setEdge(fromEntityId, guid); setEdge(fromEntityId, guid);
}); });
delete pendingSuperList[obj.name]; delete pendingSuperList[obj.name];
linkParents(obj);
} }
traveseSubSuper(obj); if (obj.serviceType === options.filter) {
} else {
if (pendingSubList[obj.name]) {
setNode(fromEntityId, obj);
doneList[obj.name] = obj; doneList[obj.name] = obj;
_.map(pendingSubList[obj.name], function(guid) {
setEdge(guid, fromEntityId);
});
delete pendingSubList[obj.name];
}
if (pendingSuperList[obj.name]) {
var fromEntityId = obj.guid;
setNode(fromEntityId, obj); setNode(fromEntityId, obj);
doneList[obj.name] = obj; linkParents(obj);
_.map(pendingSuperList[obj.name], function(guid) { } else if (!doneList[obj.name] && !outOfFilterData[obj.name]) {
setEdge(fromEntityId, guid); outOfFilterData[obj.name] = obj;
});
delete pendingSuperList[obj.name];
}
if (!doneList[obj.name]) {
temp[obj.name] = obj;
}
} }
}); });
pendingSubList = null;
pendingSuperList = null; pendingSuperList = null;
doneList = null; doneList = null;
outOfFilterData = null;
} else { } else {
// Without filter
var pendingList = {}, var pendingList = {},
doneList = {}; doneList = {};
...@@ -308,11 +318,19 @@ define([ ...@@ -308,11 +318,19 @@ define([
onClickFilterToggler: function() { onClickFilterToggler: function() {
this.toggleBoxPanel({ el: this.ui.filterBox }); this.toggleBoxPanel({ el: this.ui.filterBox });
}, },
onClickSettingToggler: function() {
this.toggleBoxPanel({ el: this.ui.settingBox });
},
onClickSearchToggler: function() { onClickSearchToggler: function() {
this.toggleBoxPanel({ el: this.ui.searchBox }); this.toggleBoxPanel({ el: this.ui.searchBox });
}, },
onClickReset: function() { onClickReset: function() {
this.fetchGraphData({ refresh: true }); this.fetchGraphData({ refresh: true });
this.ui.typeSearch.data({ refresh: true }).val("").trigger("change");
this.ui.filterServiceType.data({ refresh: true }).val("").trigger("change");
},
onClickSaveSvg: function(e, a) {
this.LineageHelperRef.exportLineage({ downloadFileName: "TypeSystemView" });
}, },
onClickFullscreenToggler: function(e) { onClickFullscreenToggler: function(e) {
var icon = $(e.currentTarget).find("i"), var icon = $(e.currentTarget).find("i"),
...@@ -324,42 +342,65 @@ define([ ...@@ -324,42 +342,65 @@ define([
icon.parent("button").attr("data-original-title", "Default View"); icon.parent("button").attr("data-original-title", "Default View");
} }
panel.toggleClass("fullscreen-mode"); panel.toggleClass("fullscreen-mode");
var node = this.$("svg.main").parent()[0].getBoundingClientRect();
this.LineageHelperRef.updateOptions({
width: node.width,
height: node.height
});
}, },
updateDetails: function(data) { updateDetails: function(data) {
this.$("[data-id='typeName']").text(Utils.getName(data)); this.$("[data-id='typeName']").text(Utils.getName(data));
delete data.id;
this.selectedDetailNode = {};
this.selectedDetailNode.atttributes = data.attributeDefs;
this.selectedDetailNode.businessAttributes = data.businessAttributeDefs;
this.selectedDetailNode.relationshipAttributes = data.relationshipAttributeDefs;
//atttributes //atttributes
data["atttributes"] = (data.attributeDefs || []).map(function(obj) { data["atttributes"] = (data.attributeDefs || []).map(function(obj) {
return obj.name; return obj.name;
}); });
delete data.attributeDefs;
//businessAttributes //businessAttributes
data["businessAttributes"] = _.keys(data.businessAttributeDefs); data["businessAttributes"] = _.keys(data.businessAttributeDefs);
delete data.businessAttributeDefs;
//relationshipAttributes //relationshipAttributes
data["relationshipAttributes"] = (data.relationshipAttributeDefs || []).map(function(obj) { data["relationshipAttributes"] = (data.relationshipAttributeDefs || []).map(function(obj) {
return obj.name; return obj.name;
}); });
delete data.relationshipAttributeDefs;
console.log(data);
this.ui.nodeDetailTable.html( this.ui.nodeDetailTable.html(
CommonViewFunction.propertyTable({ CommonViewFunction.propertyTable({
scope: this, scope: this,
guidHyperLink: false, guidHyperLink: false,
getValue: function(val, key) {
if (key && key.toLowerCase().indexOf("time") > 0) {
return Utils.formatDate({ date: val });
} else {
return val;
}
},
getArrayOfStringElement: function(val, key) {
var def = null,
classname = "json-string";
if (key === "atttributes" || key === "businessAttributes" || key === "relationshipAttributes") {
def = key;
classname += " cursor";
}
return "<li class='" + classname + "' " + (def ? 'data-def="' + def + '" data-attribute="' + val + '"' : '') + ">" + val + "</li>"
},
getArrayOfStringFormat: function(valueArray) {
return valueArray.join("");
},
getEmptyString: function(key) { getEmptyString: function(key) {
if (key === "subTypes" || key === "superTypes" || key === "atttributes" || key === "relationshipAttributes") { if (key === "subTypes" || key === "superTypes" || key === "atttributes" || key === "relationshipAttributes") {
return "[]"; return "[]";
} }
return "N/A"; return "N/A";
}, },
valueObject: _.omit(data, ["isLineage", "isIncomplete", "label", "shape", "toolTipLabel", "updatedValues"]), valueObject: _.omit(data, ["id", "attributeDefs", "relationshipAttributeDefs", "businessAttributeDefs", "isLineage", "isIncomplete", "label", "shape", "toolTipLabel", "updatedValues"]),
sortBy: true sortBy: true
}) })
); );
}, },
createGraph: function(refresh) { createGraph: function(opt) {
this.LineageHelperRef.createGraph(); this.LineageHelperRef.createGraph();
}, },
filterData: function(value) { filterData: function(value) {
...@@ -377,12 +418,14 @@ define([ ...@@ -377,12 +418,14 @@ define([
setDataManually: true, setDataManually: true,
width: node.width, width: node.width,
height: node.height, height: node.height,
isShowHoverPath: true,
zoom: true, zoom: true,
fitToScreen: true, fitToScreen: true,
dagreOptions: { dagreOptions: {
rankdir: "tb" rankdir: "tb"
}, },
toolTipTitle: "Type",
isShowHoverPath: function() { return that.ui.showOnlyHoverPath.prop('checked') },
isShowTooltip: function() { return that.ui.showTooltip.prop('checked') },
onNodeClick: function(d) { onNodeClick: function(d) {
that.onClickNodeToggler(); that.onClickNodeToggler();
that.updateDetails(that.LineageHelperRef.getNode(d.clickedData, true)); that.updateDetails(that.LineageHelperRef.getNode(d.clickedData, true));
...@@ -425,14 +468,17 @@ define([ ...@@ -425,14 +468,17 @@ define([
this.ui.typeSearch this.ui.typeSearch
.select2({ .select2({
closeOnSelect: true, closeOnSelect: true,
placeholder: "Select Node" placeholder: "Select Type"
}) })
.on("change.select2", function(e) { .on("change.select2", function(e) {
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
if (!that.ui.typeSearch.data("refresh")) {
var selectedNode = $('[data-id="typeSearch"]').val(); var selectedNode = $('[data-id="typeSearch"]').val();
//that.searchNodeObj.selectedNode = selectedNode;
that.LineageHelperRef.searchNode({ guid: selectedNode }); that.LineageHelperRef.searchNode({ guid: selectedNode });
} else {
that.ui.typeSearch.data("refresh", false);
}
}); });
if (!this.ui.filterServiceType.data("select2")) { if (!this.ui.filterServiceType.data("select2")) {
this.ui.filterServiceType this.ui.filterServiceType
...@@ -443,15 +489,13 @@ define([ ...@@ -443,15 +489,13 @@ define([
.on("change.select2", function(e) { .on("change.select2", function(e) {
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
if (!that.ui.filterServiceType.data("refresh")) {
var selectedNode = $('[data-id="filterServiceType"]').val(); var selectedNode = $('[data-id="filterServiceType"]').val();
that.filterData(selectedNode); that.filterData(selectedNode);
//that.searchNodeObj.selectedNode = selectedNode; } else {
//that.LineageHelperRef.searchNode({ guid: selectedNode }); that.ui.filterServiceType.data("refresh", false);
}
}); });
// if (this.searchNodeObj.selectedNode) {
// this.ui.typeSearch.val(this.searchNodeObj.selectedNode);
// this.ui.typeSearch.trigger("change.select2");
// }
} }
} }
}); });
......
dashboardv3/public/css/scss/common.scss
...@@ -180,6 +180,11 @@ pre { ...@@ -180,6 +180,11 @@ pre {
.json-string { .json-string {
color: olive; color: olive;
&.cursor {
cursor: pointer;
text-decoration: underline;
}
} }
} }
...@@ -191,6 +196,11 @@ pre { ...@@ -191,6 +196,11 @@ pre {
.panel-body .memory-details { .panel-body .memory-details {
pre { pre {
&.code-block { &.code-block {
&.fixed-height {
max-height: 112px;
overflow: auto;
}
&.shrink { &.shrink {
height: 144px; height: 144px;
......
dashboardv3/public/css/scss/graph.scss
...@@ -197,7 +197,7 @@ span#zoom_in { ...@@ -197,7 +197,7 @@ span#zoom_in {
width: 100%; width: 100%;
right: 0; right: 0;
padding: 0 !important; padding: 0 !important;
z-index: 9999; z-index: 99;
overflow: hidden !important; overflow: hidden !important;
background: white; background: white;
...@@ -278,3 +278,37 @@ span#zoom_in { ...@@ -278,3 +278,37 @@ span#zoom_in {
} }
} }
.box-panel.fix-box {
position: fixed;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
max-height: 100vh;
z-index: 999;
bottom: 0;
width: 400px;
overflow: auto;
border-radius: 0px;
margin: 0 !important;
&.slide-from-left.size-lg {
left: -413px;
&.show-box-panel {
left: 0;
margin: 0 !important;
}
}
.body {
tbody {
overflow: auto;
height: calc(100vh - 48px);
position: absolute;
padding-bottom: 15px;
}
}
}
\ No newline at end of file
dashboardv3/public/css/scss/table.scss
...@@ -41,6 +41,7 @@ tr.empty { ...@@ -41,6 +41,7 @@ tr.empty {
} }
.entity-detail-table, .entity-detail-table,
.type-node-details,
.relationship-detail-table { .relationship-detail-table {
position: relative; position: relative;
...@@ -66,6 +67,26 @@ tr.empty { ...@@ -66,6 +67,26 @@ tr.empty {
} }
} }
.type-node-details {
.header {
.pretty.p-switch .state:before {
border: 1px solid white;
}
.pretty.p-switch .state label:after {
background-color: white !important;
}
.pretty.p-switch.p-fill input:checked~.state label:after {
background-color: #4a90e2 !important;
}
.pretty.p-switch.p-fill input:checked~.state.p-primary:before {
background-color: white !important;
}
}
}
.backgrid { .backgrid {
td { td {
white-space: normal; white-space: normal;
...@@ -98,6 +119,14 @@ tr.empty { ...@@ -98,6 +119,14 @@ tr.empty {
} }
} }
} }
.debuggging-table-header {
padding-right: 0px !important;
button {
float: right;
}
}
} }
.backgrid-paginator ul { .backgrid-paginator ul {
......
dashboardv3/public/js/external_lib/atlas-lineage/dist/index.js
This source diff could not be displayed because it is too large. You can view the blob instead.
dashboardv3/public/js/external_lib/atlas-lineage/src/Utils/LineageUtils.js
...@@ -374,7 +374,7 @@ const LineageUtils = { ...@@ -374,7 +374,7 @@ const LineageUtils = {
reader.addEventListener("load", () => callback(reader.result)); reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(file); reader.readAsDataURL(file);
}, },
imgShapeRender: function (parent, bbox, node, { dagreD3, defsEl, imgBasePath, guid }) { imgShapeRender: function (parent, bbox, node, { dagreD3, defsEl, imgBasePath, guid, isRankdirToBottom }) {
var that = this, var that = this,
viewGuid = guid, viewGuid = guid,
imageIconPath = this.getEntityIconPath({ entityData: node, imgBasePath }), imageIconPath = this.getEntityIconPath({ entityData: node, imgBasePath }),
...@@ -391,7 +391,7 @@ const LineageUtils = { ...@@ -391,7 +391,7 @@ const LineageUtils = {
var shapeSvg = parent var shapeSvg = parent
.append("circle") .append("circle")
.attr("fill", "url(#img_" + imgName + ")") .attr("fill", "url(#img_" + imgName + ")")
.attr("r", "24px") .attr("r", isRankdirToBottom ? "30px" : "24px")
.attr("data-stroke", node.id) .attr("data-stroke", node.id)
.attr("stroke-width", "2px") .attr("stroke-width", "2px")
.attr("class", "nodeImage " + (currentNode ? "currentNode" : node.isProcess ? "process" : "node")); .attr("class", "nodeImage " + (currentNode ? "currentNode" : node.isProcess ? "process" : "node"));
...@@ -478,8 +478,8 @@ const LineageUtils = { ...@@ -478,8 +478,8 @@ const LineageUtils = {
}); });
} }
}) })
.attr("x", "4") .attr("x", isRankdirToBottom ? "11" : "4")
.attr("y", currentNode ? "3" : "4") .attr("y", isRankdirToBottom ? "20" : currentNode ? "3" : "4")
.attr("width", "40") .attr("width", "40")
.attr("height", "40"); .attr("height", "40");
} }
......
dashboardv3/public/js/external_lib/atlas-lineage/src/index.js
...@@ -26,6 +26,7 @@ import "./styles/style.scss"; ...@@ -26,6 +26,7 @@ import "./styles/style.scss";
export default class LineageHelper { export default class LineageHelper {
constructor(options) { constructor(options) {
this.options = {};
this._updateOptions(options); this._updateOptions(options);
const { el, manualTrigger = false } = this.options; const { el, manualTrigger = false } = this.options;
if (el === undefined) { if (el === undefined) {
...@@ -33,6 +34,7 @@ export default class LineageHelper { ...@@ -33,6 +34,7 @@ export default class LineageHelper {
} }
this.initReturnObj = { this.initReturnObj = {
init: (arg) => this.init(arg), init: (arg) => this.init(arg),
updateOptions: (options) => this._updateAllOptions(options),
createGraph: (opt = {}) => this._createGraph(this.options, this.graphOptions, opt), createGraph: (opt = {}) => this._createGraph(this.options, this.graphOptions, opt),
clear: (arg) => this.clear(arg), clear: (arg) => this.clear(arg),
refresh: (arg) => this.refresh(arg), refresh: (arg) => this.refresh(arg),
...@@ -78,12 +80,27 @@ export default class LineageHelper { ...@@ -78,12 +80,27 @@ export default class LineageHelper {
return this.initReturnObj; return this.initReturnObj;
} }
/** /**
* [updateAllOptions]
* @param {[type]}
* @return {[type]}
*/
_updateAllOptions(options) {
Object.assign(this.options, options);
var svgRect = this.svg.node().getBoundingClientRect();
this.graphOptions.width = this.options.width || svgRect.width;
this.graphOptions.height = this.options.height || svgRect.height;
const { svg, width, height, guid } = this.graphOptions;
const { fitToScreen } = this.options;
svg.select("g").node().removeAttribute("transform");
svg.attr("viewBox", "0 0 " + width + " " + height).attr("enable-background", "new 0 0 " + width + " " + height);
this.centerAlign({ fitToScreen, guid });
}
/**
* [updateOptions get the options from user and appedn add it in this,option context] * [updateOptions get the options from user and appedn add it in this,option context]
* @param {[Object]} options [lib options from user] * @param {[Object]} options [lib options from user]
* @return {[null]} [null] * @return {[null]} [null]
*/ */
_updateOptions(options) { _updateOptions(options) {
this.options = {};
Object.assign(this.options, { filterObj: { isProcessHideCheck: false, isDeletedEntityHideCheck: false } }, options); Object.assign(this.options, { filterObj: { isProcessHideCheck: false, isDeletedEntityHideCheck: false } }, options);
} }
/** /**
...@@ -200,7 +217,7 @@ export default class LineageHelper { ...@@ -200,7 +217,7 @@ export default class LineageHelper {
if (node && node.attributes) { if (node && node.attributes) {
downloadFileName = `${node.attributes.qualifiedName || node.attributes.name || "lineage_export"}.png`; downloadFileName = `${node.attributes.qualifiedName || node.attributes.name || "lineage_export"}.png`;
} else { } else {
downloadFileName = "lineage_export.png"; downloadFileName = "export.png";
} }
} }
...@@ -258,6 +275,7 @@ export default class LineageHelper { ...@@ -258,6 +275,7 @@ export default class LineageHelper {
this.svg = select(el); this.svg = select(el);
if (!(el instanceof SVGElement)) { if (!(el instanceof SVGElement)) {
this.svg.selectAll("*").remove();
this.svg = this.svg this.svg = this.svg
.append("svg") .append("svg")
.attr("xmlns", "http://www.w3.org/2000/svg") .attr("xmlns", "http://www.w3.org/2000/svg")
...@@ -385,7 +403,19 @@ export default class LineageHelper { ...@@ -385,7 +403,19 @@ export default class LineageHelper {
* @return {[type]} [description] * @return {[type]} [description]
*/ */
_createGraph( _createGraph(
{ data = {}, imgBasePath, isShowTooltip, isShowHoverPath, onLabelClick, onPathClick, onNodeClick, zoom, fitToScreen }, {
data = {},
imgBasePath,
isShowTooltip,
isShowHoverPath,
onLabelClick,
onPathClick,
onNodeClick,
zoom,
fitToScreen,
getToolTipContent,
toolTipTitle
},
graphOptions, graphOptions,
{ refresh } { refresh }
) { ) {
...@@ -393,7 +423,8 @@ export default class LineageHelper { ...@@ -393,7 +423,8 @@ export default class LineageHelper {
this.options.beforeRender(); this.options.beforeRender();
} }
const that = this, const that = this,
{ svg, g, width, height } = graphOptions; { svg, g, width, height } = graphOptions,
isRankdirToBottom = this.options.dagreOptions && this.options.dagreOptions.rankdir === "tb";
if (svg instanceof selection === false) { if (svg instanceof selection === false) {
throw new Error("svg is not initialized or something went wrong while creatig graph instance"); throw new Error("svg is not initialized or something went wrong while creatig graph instance");
...@@ -428,6 +459,7 @@ export default class LineageHelper { ...@@ -428,6 +459,7 @@ export default class LineageHelper {
render.shapes().img = function () { render.shapes().img = function () {
return LineageUtils.imgShapeRender(...arguments, { return LineageUtils.imgShapeRender(...arguments, {
...graphOptions, ...graphOptions,
isRankdirToBottom: isRankdirToBottom,
imgBasePath: that._getValueFromUser(imgBasePath), imgBasePath: that._getValueFromUser(imgBasePath),
defsEl defsEl
}); });
...@@ -437,11 +469,17 @@ export default class LineageHelper { ...@@ -437,11 +469,17 @@ export default class LineageHelper {
.attr("class", "d3-tip") .attr("class", "d3-tip")
.offset([10, 0]) .offset([10, 0])
.html((d) => { .html((d) => {
if (getToolTipContent && typeof getToolTipContent === "function") {
return getToolTipContent(d, g.node(d));
} else {
var value = g.node(d); var value = g.node(d);
var htmlStr = ""; var htmlStr = "";
if (value.id !== this.guid) { if (toolTipTitle) {
htmlStr = "<h5 style='text-align: center;'>" + toolTipTitle + "</h5>";
} else if (value.id !== this.guid) {
htmlStr = "<h5 style='text-align: center;'>" + (value.isLineage ? "Lineage" : "Impact") + "</h5>"; htmlStr = "<h5 style='text-align: center;'>" + (value.isLineage ? "Lineage" : "Impact") + "</h5>";
} }
htmlStr += "<h5 class='text-center'><span style='color:#359f89'>" + value.toolTipLabel + "</span></h5> "; htmlStr += "<h5 class='text-center'><span style='color:#359f89'>" + value.toolTipLabel + "</span></h5> ";
if (value.typeName) { if (value.typeName) {
htmlStr += "<h5 class='text-center'><span>(" + value.typeName + ")</span></h5> "; htmlStr += "<h5 class='text-center'><span>(" + value.typeName + ")</span></h5> ";
...@@ -450,6 +488,7 @@ export default class LineageHelper { ...@@ -450,6 +488,7 @@ export default class LineageHelper {
htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> "; htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> ";
} }
return "<div class='tip-inner-scroll'>" + htmlStr + "</div>"; return "<div class='tip-inner-scroll'>" + htmlStr + "</div>";
}
}); });
svg.call(tooltip); svg.call(tooltip);
...@@ -463,7 +502,12 @@ export default class LineageHelper { ...@@ -463,7 +502,12 @@ export default class LineageHelper {
//change text postion //change text postion
svgGroupEl svgGroupEl
.selectAll("g.nodes g.label") .selectAll("g.nodes g.label")
.attr("transform", "translate(2,-35)") .attr("transform", () => {
if (isRankdirToBottom) {
return "translate(2,-20)";
}
return "translate(2,-35)";
})
.on("mouseenter", function (d) { .on("mouseenter", function (d) {
event.preventDefault(); event.preventDefault();
select(this).classed("highlight", true); select(this).classed("highlight", true);
......
dashboardv3/public/js/templates/administrator/AdministratorLayoutView_tmpl.html
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<div id="r_adminTableLayoutView"> <div id="r_adminTableLayoutView">
</div> </div>
</div> </div>
<div id="tab-typeSystem" role="typeSystem" class="tab-pane animated fadeIn" style="position: relative;"> <div id="tab-typeSystem" role="typeSystem" class="tab-pane" style="position: relative;">
<div id="r_typeSystemTreeLayoutView"> <div id="r_typeSystemTreeLayoutView">
</div> </div>
</div> </div>
......
dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="tab-lineage" role="lineage" class="tab-pane animated fadeIn"> <div id="tab-lineage" role="lineage" class="tab-pane">
<div id="r_lineageLayoutView" class="animated position-relative" align="center"> <div id="r_lineageLayoutView" class="animated position-relative" align="center">
<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>
......
dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -124,7 +124,13 @@ ...@@ -124,7 +124,13 @@
</button> </button>
</div> </div>
</div> </div>
<div class="box-panel size-lg node-details slide-from-left lineage-node-detail"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="legends pull-left" style="height: 25px; padding: 2px;"></div>
<div class="svg" style="height: 100%; width: 100%"></div>
</div>
<div class="box-panel size-lg slide-from-left lineage-node-detail fix-box">
<div class="header clearfix"> <div class="header clearfix">
<h4><span data-id="typeName"></span></h4> <h4><span data-id="typeName"></span></h4>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span> <span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
...@@ -135,11 +141,5 @@ ...@@ -135,11 +141,5 @@
<tbody data-id="nodeDetailTable"></tbody> <tbody data-id="nodeDetailTable"></tbody>
</table> </table>
</div> </div>
</div>
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="legends pull-left" style="height: 25px; padding: 2px;"></div>
<div class="svg" style="height: 100%; width: 100%"></div>
</div> </div>
<div class="hidden-svg"></div> <div class="hidden-svg"></div>
\ No newline at end of file
dashboardv3/public/js/templates/graph/TypeSystemTreeView_tmpl.html
...@@ -15,16 +15,30 @@ ...@@ -15,16 +15,30 @@
* limitations under the License. * limitations under the License.
--> -->
<div id="typeSystemTreeViewPage" data-id="typeSystemTreeViewPage" class="systemTypeTree" style="height: calc(100vh - 180px); width: 100%; position: relative;overflow: hidden;"> <div id="typeSystemTreeViewPage" data-id="typeSystemTreeViewPage" class="systemTypeTree" style="height: calc(100vh - 180px); width: 100%; position: relative;overflow: hidden;">
<div class="box-panel size-lg node-details slide-from-left lineage-node-detail"> <div class="box-panel size-lg type-node-details fix-box slide-from-left lineage-node-detail">
<div class="header clearfix"> <div class="header clearfix">
<h4><span data-id="typeName"></span></h4> <div class="typeDetailHeader">
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span> <h4 style="padding-right: 67px;"><span data-id="typeName"></span></h4>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span> <div class="pretty p-switch p-fill" style="position: absolute;top: 13px;right: 32px;">
<input type="checkbox" data-id="noValueToggle" title="Show empty values" />
<div class="state p-primary">
<label></label>
</div>
</div>
<span data-id="box-close" class="btn btn-sm btn-close "><i class="fa fa-close"></i></span>
</div>
<div class="typeAttrDetailHeader" style="display: none;">
<span data-id="box-back" class="btn btn-sm btn-close" style="left: 0px; right: auto;"><i class="fa fa-angle-left"></i></span>
<h4 style="padding-left: 27px;"><span data-id="typeAttrDetailHeader"></span></h4>
</div>
</div> </div>
<div class="body"> <div class="body">
<table class="table bold-key"> <table class="table bold-key">
<tbody data-id="nodeDetailTable"></tbody> <tbody data-id="nodeDetailTable" class="hide-empty-value"></tbody>
</table> </table>
<div data-id="attribute-table" style="height: calc(100vh - 60px);display: none">
<pre class="code-block" style="height: 100%"></pre>
</div>
</div> </div>
</div> </div>
<div class="fontLoader"> <div class="fontLoader">
...@@ -49,7 +63,6 @@ ...@@ -49,7 +63,6 @@
<div class="body"> <div class="body">
<div class="col-sm-12 no-padding"> <div class="col-sm-12 no-padding">
<div class="srchType clearfix"> <div class="srchType clearfix">
<label class="srchTitle">Search Lineage Entity: </label>
<div class=""> <div class="">
<div class="col-sm-12 no-padding temFilter"> <div class="col-sm-12 no-padding temFilter">
<select data-id="typeSearch"></select> <select data-id="typeSearch"></select>
...@@ -59,28 +72,62 @@ ...@@ -59,28 +72,62 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box-panel setting-box">
<div class="header clearfix">
<h4>Settings</h4>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="showOnlyHoverPath form-group text-left col-sm-12">
<div class="pretty p-switch p-fill">
<input type="checkbox" checked class="pull-left" data-id="showOnlyHoverPath" value="" />
<div class="state p-primary">
<label>On hover show current path</label>
</div>
</div>
</div>
<div class="showTooltip form-group text-left col-sm-12">
<div class="pretty p-switch p-fill">
<input type="checkbox" class="pull-left" data-id="showTooltip" value="" />
<div class="state p-primary">
<label>Show node details on hover</label>
</div>
</div>
</div>
</div>
</div>
<div class="graph-button-group pull-right"> <div class="graph-button-group pull-right">
<div> <div>
<button data-id="reset" class="btn btn-action btn-gray btn-sm" title="Realign Lineage"> <button data-id="reset" class="btn btn-action btn-gray btn-sm" title="Reset">
<i class="fa fa-retweet"></i> <i class="fa fa-retweet"></i>
</button> </button>
</div> </div>
<div> <div>
<button data-id="saveSvg" class="btn btn-action btn-gray btn-sm" title="Export to PNG">
<i class="fa fa-camera"></i>
</button>
</div>
<div>
<button type="button" data-id="setting-toggler" title="Settings" class="btn btn-action btn-gray btn-sm">
<i class="fa fa-gear"></i>
</button>
</div>
<div>
<button type="button" data-id="filter-toggler" title="Filter" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button> <button type="button" data-id="filter-toggler" title="Filter" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
</div> </div>
<div> <div>
<button type="button" data-id="search-toggler" title="Search" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button> <button type="button" data-id="search-toggler" title="Search" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="zoom-in"> <button type="button" class="btn btn-action btn-gray btn-sm" title="Zoom In" data-id="zoom-in">
<i class="fa fa-search-plus"></i> <i class="fa fa-search-plus"></i>
</button> </button>
<button type="button" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="zoom-out"> <button type="button" class="btn btn-action btn-gray btn-sm" title="Zoom Out" data-id="zoom-out">
<i class="fa fa-search-minus"></i> <i class="fa fa-search-minus"></i>
</button> </button>
</div> </div>
<div> <div>
<button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage"> <button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm">
<i class="fa fa-expand"></i> <i class="fa fa-expand"></i>
</button> </button>
</div> </div>
......
dashboardv3/public/js/utils/CommonViewFunction.js
...@@ -79,6 +79,8 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -79,6 +79,8 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
sortBy = options.sortBy, sortBy = options.sortBy,
valueObject = options.valueObject, valueObject = options.valueObject,
extractJSON = options.extractJSON, extractJSON = options.extractJSON,
getArrayOfStringElement = options.getArrayOfStringElement,
getArrayOfStringFormat = options.getArrayOfStringFormat,
isTable = _.isUndefined(options.isTable) ? true : options.isTable, isTable = _.isUndefined(options.isTable) ? true : options.isTable,
attributeDefs = options.attributeDefs, attributeDefs = options.attributeDefs,
formatIntVal = options.formatIntVal, formatIntVal = options.formatIntVal,
...@@ -108,6 +110,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -108,6 +110,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
return "N/A"; return "N/A";
}, },
getValue = function(val, key) { getValue = function(val, key) {
if (options && options.getValue) {
val = options.getValue(val, key);
}
if (!_.isUndefined(val) && !_.isNull(val)) { if (!_.isUndefined(val) && !_.isNull(val)) {
if ((_.isNumber(val) || !_.isNaN(parseInt(val))) && formatIntVal) { if ((_.isNumber(val) || !_.isNaN(parseInt(val))) && formatIntVal) {
return numberFormat(val); return numberFormat(val);
...@@ -185,7 +190,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -185,7 +190,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
if (_.isString(inputOutputField) || _.isBoolean(inputOutputField) || _.isNumber(inputOutputField)) { if (_.isString(inputOutputField) || _.isBoolean(inputOutputField) || _.isNumber(inputOutputField)) {
var tempVarfor$check = inputOutputField.toString(); var tempVarfor$check = inputOutputField.toString();
if (tempVarfor$check.indexOf("$") == -1) { if (tempVarfor$check.indexOf("$") == -1) {
valueOfArray.push('<span class="json-string">' + getValue(inputOutputField, key) + '</span>'); var tmpVal = getValue(inputOutputField, key)
if (getArrayOfStringElement) {
valueOfArray.push(getArrayOfStringElement(tmpVal, key));
} else {
valueOfArray.push('<span class="json-string">' + tmpVal + '</span>');
}
} }
} else if (_.isObject(inputOutputField) && !id) { } else if (_.isObject(inputOutputField) && !id) {
var attributesList = inputOutputField; var attributesList = inputOutputField;
...@@ -251,8 +261,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -251,8 +261,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
} }
} }
if (valueOfArray.length) { if (valueOfArray.length) {
if (getArrayOfStringFormat) {
subLink = getArrayOfStringFormat(valueOfArray, key);
} else {
subLink = valueOfArray.join(', '); subLink = valueOfArray.join(', ');
} }
}
return subLink === "" ? getEmptyString(key) : subLink; return subLink === "" ? getEmptyString(key) : subLink;
} }
var valueObjectKeysList = _.keys(valueObject); var valueObjectKeysList = _.keys(valueObject);
...@@ -297,12 +311,17 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -297,12 +311,17 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
if (_.isObject(valueObject[key]) && !_.isEmpty(valueObject[key])) { if (_.isObject(valueObject[key]) && !_.isEmpty(valueObject[key])) {
var matchedLinkString = val.match(/href|value-loader\w*/g), var matchedLinkString = val.match(/href|value-loader\w*/g),
matchedJson = val.match(/json-value|json-string\w*/g), matchedJson = val.match(/json-value|json-string\w*/g),
matchedKey = val.match(/json-key\w*/g),
isMatchLinkStringIsSingle = matchedLinkString && matchedLinkString.length <= 5, isMatchLinkStringIsSingle = matchedLinkString && matchedLinkString.length <= 5,
isMatchJSONStringIsSingle = matchedJson && matchedJson.length == 1, isMatchJSONStringIsSingle = matchedJson && matchedJson.length == 1,
expandCollapseButton = ""; expandCollapseButton = "";
if ((matchedJson && !isMatchJSONStringIsSingle) || (matchedLinkString && !isMatchLinkStringIsSingle)) { if ((matchedJson) || (matchedLinkString)) {
var className = "code-block fixed-height";
if (!isMatchJSONStringIsSingle) {
className += " shrink";
expandCollapseButton = '<button class="expand-collapse-button"><i class="fa"></i></button>'; expandCollapseButton = '<button class="expand-collapse-button"><i class="fa"></i></button>';
htmlTag = '<pre class="shrink code-block ' + (isMatchJSONStringIsSingle ? 'fixed-height' : '') + '">' + expandCollapseButton + '<code>' + val + '</code></pre>'; }
htmlTag = '<pre class="' + className + '">' + expandCollapseButton + '<code>' + val + '</code></pre>';
} }
} }
table += '<tr class="' + appendClass + '"><td>' + (_.escape(key) + listCount) + '</td><td>' + htmlTag + '</td></tr>'; table += '<tr class="' + appendClass + '"><td>' + (_.escape(key) + listCount) + '</td><td>' + htmlTag + '</td></tr>';
......
dashboardv3/public/js/views/graph/LineageLayoutView.js
...@@ -134,13 +134,13 @@ define(['require', ...@@ -134,13 +134,13 @@ define(['require',
}, },
onShow: function() { onShow: function() {
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.$el.resizable({ // this.$el.resizable({
handles: ' s', // handles: ' s',
minHeight: 375, // minHeight: 375,
stop: function(event, ui) { // stop: function(event, ui) {
ui.element.height(($(this).height())); // ui.element.height(($(this).height()));
}, // },
}); // });
}, },
onClickLineageFullscreenToggler: function(e) { onClickLineageFullscreenToggler: function(e) {
var icon = $(e.currentTarget).find('i'), var icon = $(e.currentTarget).find('i'),
...@@ -152,6 +152,11 @@ define(['require', ...@@ -152,6 +152,11 @@ define(['require',
icon.parent('button').attr("data-original-title", "Default View"); icon.parent('button').attr("data-original-title", "Default View");
} }
panel.toggleClass('fullscreen-mode'); panel.toggleClass('fullscreen-mode');
var node = this.$("svg").parent()[0].getBoundingClientRect();
this.LineageHelperRef.updateOptions({
width: node.width,
height: node.height
});
}, },
onCheckUnwantedEntity: function(e) { onCheckUnwantedEntity: function(e) {
var that = this; var that = this;
...@@ -210,6 +215,8 @@ define(['require', ...@@ -210,6 +215,8 @@ define(['require',
}, },
onClickResetLineage: function() { onClickResetLineage: function() {
this.LineageHelperRef.refresh(); this.LineageHelperRef.refresh();
this.searchNodeObj.selectedNode = "";
this.ui.lineageTypeSearch.data({ refresh: true }).val("").trigger("change");
}, },
onClickSaveSvg: function(e, a) { onClickSaveSvg: function(e, a) {
this.LineageHelperRef.exportLineage(); this.LineageHelperRef.exportLineage();
...@@ -249,10 +256,6 @@ define(['require', ...@@ -249,10 +256,6 @@ define(['require',
}) })
}, },
createGraph: function(data) { createGraph: function(data) {
// if (_.isEmpty(this.g._nodes)) {
// this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No relations to display</text>');
// return;
// }
var that = this; var that = this;
$('.resizeGraph').css("height", this.$('.svg').height() + "px"); $('.resizeGraph').css("height", this.$('.svg').height() + "px");
...@@ -364,9 +367,13 @@ define(['require', ...@@ -364,9 +367,13 @@ define(['require',
}).on('change.select2', function(e) { }).on('change.select2', function(e) {
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
if (!that.ui.lineageTypeSearch.data("refresh")) {
var selectedNode = $('[data-id="typeSearch"]').val(); var selectedNode = $('[data-id="typeSearch"]').val();
that.searchNodeObj.selectedNode = selectedNode; that.searchNodeObj.selectedNode = selectedNode;
that.LineageHelperRef.searchNode({ guid: selectedNode }); that.LineageHelperRef.searchNode({ guid: selectedNode });
} else {
that.ui.lineageTypeSearch.data("refresh", false);
}
}); });
if (this.searchNodeObj.selectedNode) { if (this.searchNodeObj.selectedNode) {
this.ui.lineageTypeSearch.val(this.searchNodeObj.selectedNode); this.ui.lineageTypeSearch.val(this.searchNodeObj.selectedNode);
......
dashboardv3/public/js/views/graph/TypeSystemTreeView.js
...@@ -55,16 +55,23 @@ define([ ...@@ -55,16 +55,23 @@ define([
typeSystemTreeViewPage: "[data-id='typeSystemTreeViewPage']", typeSystemTreeViewPage: "[data-id='typeSystemTreeViewPage']",
boxClose: '[data-id="box-close"]', boxClose: '[data-id="box-close"]',
nodeDetailTable: '[data-id="nodeDetailTable"]', nodeDetailTable: '[data-id="nodeDetailTable"]',
attributeTable: '[data-id="attribute-table"]',
typeSearch: '[data-id="typeSearch"]', typeSearch: '[data-id="typeSearch"]',
filterServiceType: '[data-id="filterServiceType"]', filterServiceType: '[data-id="filterServiceType"]',
onZoomIn: '[data-id="zoom-in"]', onZoomIn: '[data-id="zoom-in"]',
onZoomOut: '[data-id="zoom-out"]', onZoomOut: '[data-id="zoom-out"]',
filterBox: ".filter-box", filterBox: ".filter-box",
searchBox: ".search-box", searchBox: ".search-box",
settingBox: '.setting-box',
filterToggler: '[data-id="filter-toggler"]', filterToggler: '[data-id="filter-toggler"]',
settingToggler: '[data-id="setting-toggler"]',
searchToggler: '[data-id="search-toggler"]', searchToggler: '[data-id="search-toggler"]',
reset: '[data-id="reset"]', reset: '[data-id="reset"]',
fullscreenToggler: '[data-id="fullScreen-toggler"]' fullscreenToggler: '[data-id="fullScreen-toggler"]',
noValueToggle: "[data-id='noValueToggle']",
showOnlyHoverPath: '[data-id="showOnlyHoverPath"]',
showTooltip: '[data-id="showTooltip"]',
saveSvg: '[data-id="saveSvg"]',
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
...@@ -73,9 +80,19 @@ define([ ...@@ -73,9 +80,19 @@ define([
events["click " + this.ui.onZoomIn] = "onClickZoomIn"; events["click " + this.ui.onZoomIn] = "onClickZoomIn";
events["click " + this.ui.onZoomOut] = "onClickZoomOut"; events["click " + this.ui.onZoomOut] = "onClickZoomOut";
events["click " + this.ui.filterToggler] = "onClickFilterToggler"; events["click " + this.ui.filterToggler] = "onClickFilterToggler";
events["click " + this.ui.settingToggler] = 'onClickSettingToggler';
events["click " + this.ui.searchToggler] = "onClickSearchToggler"; events["click " + this.ui.searchToggler] = "onClickSearchToggler";
events["click " + this.ui.saveSvg] = 'onClickSaveSvg';
events["click " + this.ui.fullscreenToggler] = "onClickFullscreenToggler"; events["click " + this.ui.fullscreenToggler] = "onClickFullscreenToggler";
events["click " + this.ui.reset] = "onClickReset"; events["click " + this.ui.reset] = "onClickReset";
events["click " + this.ui.noValueToggle] = function() {
this.showAllProperties = !this.showAllProperties;
this.ui.noValueToggle.attr("data-original-title", (this.showAllProperties ? "Hide" : "Show") + " empty values");
Utils.togglePropertyRelationshipTableEmptyValues({
"inputType": this.ui.noValueToggle,
"tableEl": this.ui.nodeDetailTable
});
};
return events; return events;
}, },
...@@ -90,7 +107,35 @@ define([ ...@@ -90,7 +107,35 @@ define([
this.initializeGraph(); this.initializeGraph();
this.fetchGraphData(); this.fetchGraphData();
}, },
onRender: function() {}, onRender: function() {
var that = this;
this.$el.on("click", "code li[data-def]", function() {
if (that.selectedDetailNode) {
var dataObj = $(this).data(),
defObj = that.selectedDetailNode[dataObj.def],
newData = null;
if (dataObj.def === "businessAttributes") {
newData = defObj[dataObj.attribute];
} else {
newData = _.filter(defObj, { name: dataObj.attribute });
}
that.ui.attributeTable.find("pre").html('<code style="max-height: 100%">' + Utils.JSONPrettyPrint(newData, function(val) {
return val;
}) + '</code>');
that.$el.find('[data-id="typeAttrDetailHeader"]').text(dataObj.def);
that.ui.nodeDetailTable.hide("slide", { direction: "right" }, 400);
that.ui.attributeTable.show("slide", { direction: "left" }, 400);
that.$el.find(".typeDetailHeader").hide();
that.$el.find(".typeAttrDetailHeader").show()
}
});
this.$el.on("click", "span[data-id='box-back']", function() {
that.ui.nodeDetailTable.show("slide", { direction: "right" }, 400);
that.ui.attributeTable.hide("slide", { direction: "left" }, 400);
that.$el.find(".typeDetailHeader").show();
that.$el.find(".typeAttrDetailHeader").hide()
})
},
fetchGraphData: function(options) { fetchGraphData: function(options) {
var that = this; var that = this;
var entityTypeDef = that.entityDefCollection.fullCollection.toJSON(); var entityTypeDef = that.entityDefCollection.fullCollection.toJSON();
...@@ -101,7 +146,7 @@ define([ ...@@ -101,7 +146,7 @@ define([
} }
if (entityTypeDef.length) { if (entityTypeDef.length) {
that.generateData($.extend(true, {}, { data: entityTypeDef }, options)).then(function(graphObj) { that.generateData($.extend(true, {}, { data: entityTypeDef }, options)).then(function(graphObj) {
that.createGraph(); that.createGraph(options);
}); });
} }
}, },
...@@ -161,36 +206,22 @@ define([ ...@@ -161,36 +206,22 @@ define([
if (options.data) { if (options.data) {
if (options.filter) { if (options.filter) {
var pendingSubList = {}, // filter
pendingSuperList = {}, var pendingSuperList = {},
temp = {}, outOfFilterData = {},
doneList = {}, doneList = {};
traveseSubSuper = function(obj, ignoreSubTypes) {
var linkParents = function(obj) {
if (obj && obj.superTypes.length) {
_.each(obj.superTypes, function(superType) {
var fromEntityId = obj.guid; var fromEntityId = obj.guid;
if (!ignoreSubTypes && obj.subTypes.length) { var tempObj = doneList[superType] || outOfFilterData[superType];
_.each(obj.subTypes, function(subType) {
var tempObj = doneList[subType] || temp[subType];
if (tempObj) { if (tempObj) {
if (!doneList[superType]) {
setNode(tempObj.guid, tempObj); setNode(tempObj.guid, tempObj);
setEdge(fromEntityId, tempObj.guid);
} else {
if (pendingSubList[subType]) {
pendingSubList[subType].push(fromEntityId);
} else {
pendingSubList[subType] = [fromEntityId];
}
} }
});
}
if (obj.superTypes.length) {
_.each(obj.superTypes, function(superType) {
var tempObj = doneList[superType] || temp[superType];
if (tempObj) {
setNode(tempObj.guid, tempObj);
setEdge(tempObj.guid, fromEntityId); setEdge(tempObj.guid, fromEntityId);
if (tempObj.superTypes.length) { linkParents(tempObj);
traveseSubSuper(tempObj, true);
}
} else { } else {
if (pendingSuperList[superType]) { if (pendingSuperList[superType]) {
pendingSuperList[superType].push(fromEntityId); pendingSuperList[superType].push(fromEntityId);
...@@ -200,52 +231,31 @@ define([ ...@@ -200,52 +231,31 @@ define([
} }
}); });
} }
}; }
_.each(options.data, function(obj) { _.each(options.data, function(obj) {
var fromEntityId = obj.guid; var fromEntityId = obj.guid;
if (obj.serviceType === options.filter) { if (pendingSuperList[obj.name]) {
doneList[obj.name] = obj; doneList[obj.name] = obj;
setNode(fromEntityId, obj); setNode(fromEntityId, obj);
if (pendingSubList[obj.name]) {
_.map(pendingSubList[obj.name], function(guid) {
setEdge(guid, fromEntityId);
});
delete pendingSubList[obj.name];
}
if (pendingSuperList[obj.name]) {
_.map(pendingSuperList[obj.name], function(guid) { _.map(pendingSuperList[obj.name], function(guid) {
setEdge(fromEntityId, guid); setEdge(fromEntityId, guid);
}); });
delete pendingSuperList[obj.name]; delete pendingSuperList[obj.name];
linkParents(obj);
} }
traveseSubSuper(obj); if (obj.serviceType === options.filter) {
} else {
if (pendingSubList[obj.name]) {
setNode(fromEntityId, obj);
doneList[obj.name] = obj; doneList[obj.name] = obj;
_.map(pendingSubList[obj.name], function(guid) {
setEdge(guid, fromEntityId);
});
delete pendingSubList[obj.name];
}
if (pendingSuperList[obj.name]) {
var fromEntityId = obj.guid;
setNode(fromEntityId, obj); setNode(fromEntityId, obj);
doneList[obj.name] = obj; linkParents(obj);
_.map(pendingSuperList[obj.name], function(guid) { } else if (!doneList[obj.name] && !outOfFilterData[obj.name]) {
setEdge(fromEntityId, guid); outOfFilterData[obj.name] = obj;
});
delete pendingSuperList[obj.name];
}
if (!doneList[obj.name]) {
temp[obj.name] = obj;
}
} }
}); });
pendingSubList = null;
pendingSuperList = null; pendingSuperList = null;
doneList = null; doneList = null;
outOfFilterData = null;
} else { } else {
// Without filter
var pendingList = {}, var pendingList = {},
doneList = {}; doneList = {};
...@@ -308,11 +318,19 @@ define([ ...@@ -308,11 +318,19 @@ define([
onClickFilterToggler: function() { onClickFilterToggler: function() {
this.toggleBoxPanel({ el: this.ui.filterBox }); this.toggleBoxPanel({ el: this.ui.filterBox });
}, },
onClickSettingToggler: function() {
this.toggleBoxPanel({ el: this.ui.settingBox });
},
onClickSearchToggler: function() { onClickSearchToggler: function() {
this.toggleBoxPanel({ el: this.ui.searchBox }); this.toggleBoxPanel({ el: this.ui.searchBox });
}, },
onClickReset: function() { onClickReset: function() {
this.fetchGraphData({ refresh: true }); this.fetchGraphData({ refresh: true });
this.ui.typeSearch.data({ refresh: true }).val("").trigger("change");
this.ui.filterServiceType.data({ refresh: true }).val("").trigger("change");
},
onClickSaveSvg: function(e, a) {
this.LineageHelperRef.exportLineage({ downloadFileName: "TypeSystemView" });
}, },
onClickFullscreenToggler: function(e) { onClickFullscreenToggler: function(e) {
var icon = $(e.currentTarget).find("i"), var icon = $(e.currentTarget).find("i"),
...@@ -324,42 +342,65 @@ define([ ...@@ -324,42 +342,65 @@ define([
icon.parent("button").attr("data-original-title", "Default View"); icon.parent("button").attr("data-original-title", "Default View");
} }
panel.toggleClass("fullscreen-mode"); panel.toggleClass("fullscreen-mode");
var node = this.$("svg.main").parent()[0].getBoundingClientRect();
this.LineageHelperRef.updateOptions({
width: node.width,
height: node.height
});
}, },
updateDetails: function(data) { updateDetails: function(data) {
this.$("[data-id='typeName']").text(Utils.getName(data)); this.$("[data-id='typeName']").text(Utils.getName(data));
delete data.id;
this.selectedDetailNode = {};
this.selectedDetailNode.atttributes = data.attributeDefs;
this.selectedDetailNode.businessAttributes = data.businessAttributeDefs;
this.selectedDetailNode.relationshipAttributes = data.relationshipAttributeDefs;
//atttributes //atttributes
data["atttributes"] = (data.attributeDefs || []).map(function(obj) { data["atttributes"] = (data.attributeDefs || []).map(function(obj) {
return obj.name; return obj.name;
}); });
delete data.attributeDefs;
//businessAttributes //businessAttributes
data["businessAttributes"] = _.keys(data.businessAttributeDefs); data["businessAttributes"] = _.keys(data.businessAttributeDefs);
delete data.businessAttributeDefs;
//relationshipAttributes //relationshipAttributes
data["relationshipAttributes"] = (data.relationshipAttributeDefs || []).map(function(obj) { data["relationshipAttributes"] = (data.relationshipAttributeDefs || []).map(function(obj) {
return obj.name; return obj.name;
}); });
delete data.relationshipAttributeDefs;
console.log(data);
this.ui.nodeDetailTable.html( this.ui.nodeDetailTable.html(
CommonViewFunction.propertyTable({ CommonViewFunction.propertyTable({
scope: this, scope: this,
guidHyperLink: false, guidHyperLink: false,
getValue: function(val, key) {
if (key && key.toLowerCase().indexOf("time") > 0) {
return Utils.formatDate({ date: val });
} else {
return val;
}
},
getArrayOfStringElement: function(val, key) {
var def = null,
classname = "json-string";
if (key === "atttributes" || key === "businessAttributes" || key === "relationshipAttributes") {
def = key;
classname += " cursor";
}
return "<li class='" + classname + "' " + (def ? 'data-def="' + def + '" data-attribute="' + val + '"' : '') + ">" + val + "</li>"
},
getArrayOfStringFormat: function(valueArray) {
return valueArray.join("");
},
getEmptyString: function(key) { getEmptyString: function(key) {
if (key === "subTypes" || key === "superTypes" || key === "atttributes" || key === "relationshipAttributes") { if (key === "subTypes" || key === "superTypes" || key === "atttributes" || key === "relationshipAttributes") {
return "[]"; return "[]";
} }
return "N/A"; return "N/A";
}, },
valueObject: _.omit(data, ["isLineage", "isIncomplete", "label", "shape", "toolTipLabel", "updatedValues"]), valueObject: _.omit(data, ["id", "attributeDefs", "relationshipAttributeDefs", "businessAttributeDefs", "isLineage", "isIncomplete", "label", "shape", "toolTipLabel", "updatedValues"]),
sortBy: true sortBy: true
}) })
); );
}, },
createGraph: function(refresh) { createGraph: function(opt) {
this.LineageHelperRef.createGraph(); this.LineageHelperRef.createGraph();
}, },
filterData: function(value) { filterData: function(value) {
...@@ -377,12 +418,14 @@ define([ ...@@ -377,12 +418,14 @@ define([
setDataManually: true, setDataManually: true,
width: node.width, width: node.width,
height: node.height, height: node.height,
isShowHoverPath: true,
zoom: true, zoom: true,
fitToScreen: true, fitToScreen: true,
dagreOptions: { dagreOptions: {
rankdir: "tb" rankdir: "tb"
}, },
toolTipTitle: "Type",
isShowHoverPath: function() { return that.ui.showOnlyHoverPath.prop('checked') },
isShowTooltip: function() { return that.ui.showTooltip.prop('checked') },
onNodeClick: function(d) { onNodeClick: function(d) {
that.onClickNodeToggler(); that.onClickNodeToggler();
that.updateDetails(that.LineageHelperRef.getNode(d.clickedData, true)); that.updateDetails(that.LineageHelperRef.getNode(d.clickedData, true));
...@@ -425,14 +468,17 @@ define([ ...@@ -425,14 +468,17 @@ define([
this.ui.typeSearch this.ui.typeSearch
.select2({ .select2({
closeOnSelect: true, closeOnSelect: true,
placeholder: "Select Node" placeholder: "Select Type"
}) })
.on("change.select2", function(e) { .on("change.select2", function(e) {
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
if (!that.ui.typeSearch.data("refresh")) {
var selectedNode = $('[data-id="typeSearch"]').val(); var selectedNode = $('[data-id="typeSearch"]').val();
//that.searchNodeObj.selectedNode = selectedNode;
that.LineageHelperRef.searchNode({ guid: selectedNode }); that.LineageHelperRef.searchNode({ guid: selectedNode });
} else {
that.ui.typeSearch.data("refresh", false);
}
}); });
if (!this.ui.filterServiceType.data("select2")) { if (!this.ui.filterServiceType.data("select2")) {
this.ui.filterServiceType this.ui.filterServiceType
...@@ -443,15 +489,13 @@ define([ ...@@ -443,15 +489,13 @@ define([
.on("change.select2", function(e) { .on("change.select2", function(e) {
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
if (!that.ui.filterServiceType.data("refresh")) {
var selectedNode = $('[data-id="filterServiceType"]').val(); var selectedNode = $('[data-id="filterServiceType"]').val();
that.filterData(selectedNode); that.filterData(selectedNode);
//that.searchNodeObj.selectedNode = selectedNode; } else {
//that.LineageHelperRef.searchNode({ guid: selectedNode }); that.ui.filterServiceType.data("refresh", false);
}
}); });
// if (this.searchNodeObj.selectedNode) {
// this.ui.typeSearch.val(this.searchNodeObj.selectedNode);
// this.ui.typeSearch.trigger("change.select2");
// }
} }
} }
}); });
......
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