Skip to content

A
atlas
Commit 57fa7b9a by Vishal Kadam
Options

Merge pull request #8 from MPR-Global/HDPDGI-37

HDPDGI-37: Use new lineage design, according to aetna
parents aea51890 6eb60f1e
Showing with 247 additions and 210 deletions
dashboard/v2/public/css/common.css
...@@ -65,11 +65,6 @@ header.navbar-top { ...@@ -65,11 +65,6 @@ header.navbar-top {
margin-bottom: 0px; margin-bottom: 0px;
} }
.search {
padding-top: 20px;
padding-bottom: 10px;
}
header .container { header .container {
padding: 12px; padding: 12px;
} }
...@@ -94,10 +89,15 @@ footer.navbar-bottom img { ...@@ -94,10 +89,15 @@ footer.navbar-bottom img {
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 10px; padding: 10px;
} }
.mt10px { .mt10px {
margin-top: 10px; margin-top: 10px;
} }
.mt20px {
margin-top: 20px;
}
.searchresults:first-child { .searchresults:first-child {
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
...@@ -119,15 +119,4 @@ footer.navbar-bottom img { ...@@ -119,15 +119,4 @@ footer.navbar-bottom img {
height: auto; height: auto;
min-height: 0; min-height: 0;
padding: 5px 5px 5px 0; padding: 5px 5px 5px 0;
}
#Details
{
height: 800px;
}
.pagination {
float: right;
}
.resultsPagination {
height:140px;
} }
\ No newline at end of file
dashboard/v2/public/css/lineage.css
...@@ -16,26 +16,28 @@ ...@@ -16,26 +16,28 @@
* limitations under the License. * limitations under the License.
*/ */
g circle { /*g circle {*/
cursor: pointer; /*cursor: pointer;*/
stroke: green; /*stroke: green;*/
stroke-width: 2px; /*stroke-width: 2px;*/
fill: url(#process-image); /*fill: url(#process-image);*/
} /*}*/
g circle.empty { /*g circle.empty {*/
fill: #90ef96; /*fill: #90ef96;*/
} /*}*/
.link { .link {
fill: none; fill: none;
stroke: green; stroke: green;
stroke-width: 2px; stroke-width: 2px;
} }
g text { g text {
pointer-events: none; pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
text-align: center;
} }
.d3-tip pre { .d3-tip pre {
...@@ -44,28 +46,34 @@ g text { ...@@ -44,28 +46,34 @@ g text {
div.lineage { div.lineage {
border-bottom: 2px solid #006600; border-bottom: 2px solid #006600;
margin-bottom: 30px;
}
.node rect {
stroke: #333;
fill: #fff;
} }
/*.node rect {*/
/*stroke: #333;*/
/*fill: #fff;*/
/*}*/
.edgePath path { .edgePath path {
stroke: #333; stroke: #333;
fill: #333; fill: #333;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
.node rect, /*.node rect,*/
.node circle { /*.node circle {*/
stroke: #333; /*stroke: #333;*/
fill: #fff; /*fill: #fff;*/
stroke-width: 1.5px; /*stroke-width: 1.5px;*/
} /*}*/
.lineage-viz { .lineage-viz {
padding: 10px;
margin: 0 auto; margin: 0 auto;
overflow: auto;
/*border: 1px solid #ddd;
border-top: none;*/
} }
/*.images {*/
/*background-image: url("../img/process.png");*/
/*}​*/
dashboard/v2/public/css/sticky-footer-navbar.css
...@@ -8,6 +8,11 @@ body { ...@@ -8,6 +8,11 @@ body {
/* Margin bottom by footer height */ /* Margin bottom by footer height */
margin-bottom: 60px; margin-bottom: 60px;
} }
.content {
padding-bottom: 90px;
}
.footer { .footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
......
dashboard/v2/public/img/process.png 100755 → 100644
File mode changed from 100755 to 100644
dashboard/v2/public/js/app.js
...@@ -38,10 +38,6 @@ angular.module('dgc').factory('lodash', ['$window', ...@@ -38,10 +38,6 @@ angular.module('dgc').factory('lodash', ['$window',
function($window) { function($window) {
return $window.d3; return $window.d3;
} }
]).factory('dagreD3', ['$window',
function($window) {
return $window.dagreD3;
}
]).factory('Global', ['$window', ]).factory('Global', ['$window',
function($window) { function($window) {
return { return {
......
dashboard/v2/public/modules/details/views/details.html
...@@ -16,31 +16,31 @@ ...@@ -16,31 +16,31 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div class="row">
<div role="tabpanel" class="col-md-7 col-lg-offset-3" data-ng-controller="DetailsController"> <div role="tabpanel" class="col-lg-12" data-ng-controller="DetailsController">
<h2>Name: {{details.values.name}}</h2> <h2>Name: {{details.values.name}}</h2>
<h4>Description: {{details.values.description}}</h4> <h4>Description: {{details.values.description}}</h4>
<tabset> <tabset>
<tab heading="Details"> <tab heading="Details">
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Value</th> <th>Value</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr data-ng-repeat="(key,value) in details.values" ng-if="value && !(key==='columns') && !(key==='name') && !(key==='description')"> <tr data-ng-repeat="(key,value) in details.values" ng-if="value && !(key==='columns') && !(key==='name') && !(key==='description')">
<td>{{key}}</td> <td>{{key}}</td>
<td data-ng-if="!isString(value)" data-ng-include="'/modules/details/views/attribute.html'"></td> <td data-ng-if="!isString(value)" data-ng-include="'/modules/details/views/attribute.html'"></td>
<td data-ng-if="isString(value)">{{value | date:'medium'}}</td> <td data-ng-if="isString(value)">{{value | date:'medium'}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</tab> </tab>
<tab data-heading="Schema"><ng-include src="'/modules/details/views/schema.html'"/></tab> <tab data-heading="Schema"><ng-include src="'/modules/details/views/schema.html'"/></tab>
<tab data-heading="Output" data-disable="!tableName" data-select="onActivate('outputs')"><ng-include data-table-type="outputs" src="'/modules/lineage/views/lineage.html'"/></tab> <tab data-heading="Output" data-disable="!tableName" data-select="onActivate('outputs')"><ng-include data-table-type="outputs" src="'/modules/lineage/views/lineage.html'"/></tab>
<tab data-heading="Input" data-disable="!tableName" data-select="onActivate('inputs')"><ng-include data-table-type="inputs" src="'/modules/lineage/views/lineage.html'"/></tab> <tab data-heading="Input" data-disable="!tableName" data-select="onActivate('inputs')"><ng-include data-table-type="inputs" src="'/modules/lineage/views/lineage.html'"/></tab>
</tabset> </tabset>
</div>
</div> </div>
\ No newline at end of file
dashboard/v2/public/modules/home/views/header.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div data-ng-controller="HeaderController"> <div data-ng-controller="HeaderController" class="row">
<div class="navbar-header"> <div class="navbar-header">
<button class="navbar-toggle" type="button" data-ng-click="isCollapsed = !isCollapsed"> <button class="navbar-toggle" type="button" data-ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
......
dashboard/v2/public/modules/lineage/lineageController.js
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
* distributed with this work for additional information * distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file * regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the * to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance * 'License'); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at * with the License. You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an 'AS IS' BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* 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.
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
'use strict'; 'use strict';
angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$state', '$stateParams', 'lodash', 'LineageResource', 'd3', 'dagreD3', angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$state', '$stateParams', 'lodash', 'LineageResource', 'd3',
function($element, $scope, $state, $stateParams, _, LineageResource, d3, dagreD3) { function($element, $scope, $state, $stateParams, _, LineageResource, d3) {
function getLineageData(tableData, callRender) { function getLineageData(tableData, callRender) {
LineageResource.get({ LineageResource.get({
...@@ -62,99 +62,148 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco ...@@ -62,99 +62,148 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
}); });
function transformData(metaData) { function transformData(metaData) {
var nodes = []; var edges = metaData.values.edges,
var name, guid; vertices = metaData.values.vertices,
var nodeGuids = Object.keys(metaData.values.vertices); nodes = {};
for (var index in nodeGuids) {
name = metaData.values.vertices[nodeGuids[index]].values.name; function getNode(guid) {
guid = nodeGuids[index]; var vertex = {
nodes.push({
guid: guid, guid: guid,
label: name, name: vertices.hasOwnProperty(guid) ? vertices[guid].values.name : 'Load Process',
shape: 'rect' type: vertices.hasOwnProperty(guid) ? vertices[guid].values.vertexId.values.typeName : 'LoadProcess'
};
if (!nodes.hasOwnProperty(guid)) {
nodes[guid] = vertex;
}
return nodes[guid];
}
function attachParent(edge, node) {
edge.forEach(function eachPoint(childGuid) {
var childNode = getNode(childGuid);
node.children = node.children || [];
node.children.push(childNode);
childNode.parent = node.guid;
}); });
} }
var edges = []; /* Loop through all edges and attach them to correct parent */
var parent; for (var guid in edges) {
var child; var edge = edges[guid],
var edgesParents = Object.keys(metaData.values.edges); node = getNode(guid);
for (index in edgesParents) {
parent = edgesParents[index]; /* Attach parent to each endpoint of edge */
for (var j = 0; j < metaData.values.edges[parent].length; j++) { attachParent(edge, node);
child = metaData.values.edges[parent][j];
if (!metaData.values.vertices.hasOwnProperty(child)) {
nodes.push({
guid: child,
label: 'Load Process',
shape: 'circle'
});
}
edges.push({
parent: parent,
child: child
});
}
} }
return {
nodes: nodes, /* Return the first node w/o parent, this is root node*/
edges: edges return _.find(nodes, function(node) {
}; return !node.hasOwnProperty('parent');
});
} }
function renderGraph(data, container) { function renderGraph(data, container) {
// Create a new directed graph // ************** Generate the tree diagram *****************
var g = new dagreD3 var element = d3.select(container.element),
.graphlib width = Math.max(container.width, 960),
.Graph() height = Math.max(container.height, 350);
.setGraph({
rankdir: 'LR'
});
// Automatically label each of the nodes var margin = {
//g.setNode('DB (sales)', { label: 'Sales DB', width: 144, height: 100 }) top: 100,
//states.forEach(function(state) { g.setNode(state, { label: state }); }); right: 50,
bottom: 30,
left: 50
};
width = width - margin.right - margin.left;
height = height - margin.top - margin.bottom;
var i = 0;
_.forEach(data.nodes, function(node) { var tree = d3.layout.tree()
g.setNode(node.guid, { .size([height, width]);
label: node.label,
shape: node.shape var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.y, d.x];
}); });
});
_.forEach(data.edges, function(edge) { var svg = element.select('svg')
g.setEdge(edge.parent, edge.child, { .attr('width', width + margin.right + margin.left)
label: '' .attr('height', height + margin.top + margin.bottom)
.select('g')
.attr('transform',
'translate(' + margin.left + ',' + margin.right + ')');
//arrow
svg.append("svg:defs").append("svg:marker").attr("id", "arrow").attr("viewBox", "0 0 10 10").attr("refX", 26).attr("refY", 5).attr("markerUnits", "strokeWidth").attr("markerWidth", 6).attr("markerHeight", 9).attr("orient", "auto").append("svg:path").attr("d", "M 0 0 L 10 5 L 0 10 z");
var root = data;
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(source).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = d.depth * 180;
}); });
});
// Set some general styles // Declare the nodes…
g.nodes().forEach(function(v) { var node = svg.selectAll('g.node')
var node = g.node(v); .data(nodes, function(d) {
node.rx = node.ry = 5; return d.id || (d.id = ++i);
}); });
var element = d3.select(container.element), // Enter the nodes.
width = Math.max(container.width, 960), var nodeEnter = node.enter().append('g')
height = Math.max(container.height, 350), .attr('class', 'node')
inner = element.select('svg') .attr('transform', function(d) {
.attr('width', width) return 'translate(' + d.y + ',' + d.x + ')';
.attr('height', height) });
.select('g');
nodeEnter.append("image")
// Create the renderer .attr("xlink:href", function(d) {
var render = new dagreD3.render(); //return d.icon;
return d.type === 'Table' ? '../img/tableicon.png' : '../img/process.png';
// Run the renderer. This is what draws the final graph. })
render(inner, g); .attr("x", "-12px")
.attr("y", "-12px")
// Center the graph .attr("width", "24px")
//var initialScale = 0.75; .attr("height", "24px");
// zoom
// .translate([(container.attr('width') - g.graph().width * initialScale) / 2, 20]) nodeEnter.append('text')
// .scale(initialScale) .attr('x', function(d) {
// .event(container); return d.children || d._children ?
//container.attr('height', g.graph().height * initialScale + 90); (5) * -1 : +15;
})
.attr('dy', '-1.35em')
.attr('text-anchor', function(d) {
return d.children || d._children ? 'middle' : 'middle';
})
.text(function(d) {
return d.name;
})
.style('fill-opacity', 1);
// Declare the links…
var link = svg.selectAll('path.link')
.data(links, function(d) {
return d.target.id;
});
link.enter().insert('path', 'g')
.attr('class', 'link')
//.style('stroke', function(d) { return d.target.level; })
.style('stroke', 'green')
.attr('d', diagonal);
link.attr("marker-end", "url(#arrow)");
}
update(root);
} }
} }
......
dashboard/v2/public/modules/lineage/views/lineage.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="lineage-viz" data-ng-controller="LineageController"> <div class="lineage-viz" data-ng-controller="LineageController">
<h4 data-ng-if="!requested && !lineageData">No lineage data found</h4> <h4 data-ng-if="!requested && !lineageData">No lineage data found</h4>
<i data-ng-if="requested" class="fa fa-spinner fa-spin fa-5x"></i> <i data-ng-if="requested" class="fa fa-spinner fa-spin fa-5x"></i>
<svg> <svg >
<g/> <g/>
</svg> </svg>
</div> </div>
dashboard/v2/public/modules/navigation/views/navigation.html
...@@ -17,11 +17,8 @@ ...@@ -17,11 +17,8 @@
--> -->
<div data-ng-controller="NavigationController"> <div data-ng-controller="NavigationController">
<div class="col-lg-3"> <h4>Tags</h4>
<h4>Tags</h4> <div class="list-group">
<div class="list-group"> <a ng-repeat="nav in leftnav" ui-sref="search({ query: nav })" class="list-group-item">{{nav}} </a>
<a ng-repeat="nav in leftnav" ui-sref="search({ query: nav })" class="list-group-item">{{nav}} </a>
</div>
</div> </div>
</div> </div>
\ No newline at end of file
dashboard/v2/public/modules/search/views/search.html
...@@ -16,57 +16,49 @@ ...@@ -16,57 +16,49 @@
~ limitations under the License. ~ limitations under the License.
--> -->
<div> <div class="row mt20px">
<div class="search"> <form class="col-lg-offset-3 col-lg-9" name="form" novalidate>
<form name="form" novalidate class="container"> <div class="input-group">
<div class="col-lg-7 col-lg-offset-3"> <input type="text" class="form-control" placeholder="Search" data-ng-model="query" required/>
<div class="row input-group"> <span class="input-group-btn">
<input type="text" class="form-control" placeholder="Search" data-ng-model="query" required/> <button class="btn btn-success" type="submit" data-ng-disabled="form.$invalid" ui-sref="search({ query: query })">
<span class="input-group-btn"> <i class="glyphicon glyphicon-search white "></i>
<button class="btn btn-success" type="submit" data-ng-disabled="form.$invalid" ui-sref="search({ query: query })"> </button>
<i class="glyphicon glyphicon-search white "></i> </span>
</button> </div>
</span> <div>
</div> <small class="small-txt">Search: Table, DB, Column</small>
<div class="row"> </div>
<small class="small-txt">search: Table, DB, Column</small> </form>
</div> </div>
</div> <div class="row mt10px">
</form> <div class="col-lg-3" data-ng-include="'/modules/navigation/views/navigation.html'"></div>
</div> <div class="col-lg-9" ng-show='resultCount > 0'>
<div class="container"> <h4 ng-show="searchMessage">{{searchMessage}}</h4>
<div class="row"> <ul class="list-unstyled">
<li ng-repeat="result in filteredResults" class="searchresults">
<div data-ng-include="'/modules/navigation/views/navigation.html'"></div> <h4><a data-ui-sref="details({id:result['$id$'].id})">{{result.name}}</a></h4>
<div class="col-lg-9" ng-show='resultCount > 0' >
<h4 ng-show="searchMessage">{{searchMessage}}</h4>
<ul class="list-unstyled"> <p>{{result.description}}</p>
<li ng-repeat="result in filteredResults" class="searchresults"> <span ng-repeat="(key, value) in filterSearchResults(result)">
<h4><a data-ui-sref="details({id:result['$id$'].id})">{{result.name}}</a></h4>
<p>{{result.description}}</p>
<span ng-repeat="(key, value) in filterSearchResults(result)" >
<span ng-show="$index < 4 "><b>{{key}}: </b>{{value}} {{(($index+1 === limit) || $last ) ? '' : ', '}}</span> <span ng-show="$index < 4 "><b>{{key}}: </b>{{value}} {{(($index+1 === limit) || $last ) ? '' : ', '}}</span>
</span> </span>
<div collapse="isCollapsed">
<span ng-repeat="(key, value) in filterSearchResults(result)" > <div collapse="isCollapsed">
<span ng-repeat="(key, value) in filterSearchResults(result)">
<span ng-show="$index > 4"><b>{{key}}: </b>{{value}}{{$last ? '' : ', '}}</span> <span ng-show="$index > 4"><b>{{key}}: </b>{{value}}{{$last ? '' : ', '}}</span>
</span> </span>
</div>
<a href ng-show="isCollapsed && (keyLength > 4)" ng-click="doToggle($event,isCollapsed)">..show more</a>
<a href ng-show="!isCollapsed" ng-click="doToggle($event,isCollapsed)">..show less</a>
<h5 ng-show="!dataTransitioned">Tags : <a ng-repeat="(key, value) in result['$traits$']" data-ui-sref="search({query: key})">{{key}}</a> </h5>
</li>
</ul>
<div class="resultsPagination" ng-show='resultCount > 0'>
<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<p>
</div> </div>
<a href ng-show="isCollapsed && (keyLength > 4)" ng-click="doToggle($event,isCollapsed)">..show more</a>
<a href ng-show="!isCollapsed" ng-click="doToggle($event,isCollapsed)">..show less</a>
<h5 ng-show="!dataTransitioned">Tags : <a ng-repeat="(key, value) in result['$traits$']" data-ui-sref="search({query: key})">{{key}}</a></h5>
</div> </li>
</ul>
<div class="pull-right" ng-show='resultCount > 0'>
<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<p>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
dashboard/v2/public/views/includes/foot.html
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
<!-- Angular UI --> <!-- Angular UI -->
<script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap.js"></script> <script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap.js"></script>
<script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap-tpls.js"></script> <script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!--<script type="text/javascript" src="/lib/d3/d3.min.js"></script> <script type="text/javascript" src="/lib/d3/d3.min.js"></script>
<script type="text/javascript" src="/lib/d3-tip/index.js"></script>--> <!--<script type="text/javascript" src="/lib/d3-tip/index.js"></script>-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script> <script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>-->
<script type="text/javascript" src="dist/app.min.js"></script> <script type="text/javascript" src="dist/app.min.js"></script>
\ No newline at end of file
dashboard/v2/public/views/index.html
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</header> </header>
<div class="content"> <div class="content">
<div data-ng-include="'/modules/notification/views/notifications.html'"></div> <div data-ng-include="'/modules/notification/views/notifications.html'"></div>
<div data-ui-view></div> <div class="container" data-ui-view></div>
</div> </div>
<footer class="footer navbar-bottom"> <footer class="footer navbar-bottom">
<div class="container"> <div class="container">
......
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