Skip to content

A
atlas
Commit 365f6e26 by Vishal Kadam
Options

Vishal/Darshan: Added lineage for output and input

parent 1f03b1ae
Showing with 122 additions and 156 deletions
dashboard/v2/gruntfile.js
......@@ -10,7 +10,7 @@ module.exports = function(grunt) {
grunt.initConfig({
watch: {
options: {
livereload: 35730
livereload: 35729
},
js: {
files: ['public/**/*.js', '!public/lib/**', '!public/dist/**'],
......
dashboard/v2/public/css/details.css 0 → 100644
.tab-content .table-bordered {
border-top: none;
}
\ No newline at end of file
dashboard/v2/public/css/lineage.css
......@@ -66,6 +66,6 @@ div.lineage {
}
.lineage-viz {
width: 800px !important;
height: 600px !important;
padding: 10px;
margin: 0 auto;
}
dashboard/v2/public/modules/details/detailsController.js
......@@ -21,6 +21,7 @@
angular.module('dgc.details').controller('DetailsController', ['$scope', '$stateParams', 'DetailsResource',
function($scope, $stateParams, DetailsResource) {
$scope.tableName = false;
DetailsResource.get({
id: $stateParams.id
}, function(data) {
......@@ -33,5 +34,12 @@ angular.module('dgc.details').controller('DetailsController', ['$scope', '$state
$scope.schemas = DetailsResource.get({
id: $stateParams.id
});
$scope.onActivate = function tabActivate(tabname) {
$scope.$broadcast('render-lineage', {
type: tabname,
tableName: $scope.tableName
});
};
}
]);
dashboard/v2/public/modules/details/views/attribute.html
......@@ -22,9 +22,8 @@
<!--{{value}}-->
<!--</div>-->
<div class="row" data-ng-repeat="(key1,value1) in value" ng-if="value1">
<div class="col-md-6" data-ng-if="!isString(value1)" data-ng-repeat="(key2,value2) in value1 track by $index"></div>
<div data-ng-if="isString(value2)" data-ng-repeat="(key3,value3) in value2"> {{key3}}: {{value3}}</div>
<div class="col-md-6" data-ng-if="isString(value1)"> {{key1}} : {{value1 | date:'medium'}}</div>
<div class="row" data-ng-repeat="(key1, value1) in value" ng-if="value1">
<div class="col-md-6" data-ng-if="!isString(value1)" data-ng-repeat="(key2, value2) in value1 track by $index"></div>
<div data-ng-if="isString(value2)" data-ng-repeat="(key3, value3) in value2"> {{key3}}: {{value3}}</div>
<div class="col-md-6" data-ng-if="isString(value1)"> {{key1}} : {{value1 | date:'medium'}}</div>
</div>
\ No newline at end of file
dashboard/v2/public/modules/details/views/details.html
......@@ -18,25 +18,13 @@
<div role="tabpanel" class="col-md-7 col-lg-offset-3" data-ng-controller="DetailsController">
<h2>{{details.values.name}}</h2>
<h4>{{details.values.description}}</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#Details" aria-controls="Details" role="tab" data-toggle="tab">Details</a></li>
<li role="presentation" data-ng-if="details.typeName=='Table'"><a href="#Schema" aria-controls="Schema" role="tab" data-toggle="tab">Schema</a></li>
<li role="presentation" data-ng-if="details.typeName=='Table'"><a href="#Output" aria-controls="Output" role="tab" data-toggle="tab">Output</a></li>
<li role="presentation" data-ng-if="details.typeName=='Table'"><a href="#Input" aria-controls="Input" role="tab" data-toggle="tab">Input</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Details">
<h2>Name: {{details.values.name}}</h2>
<h4>Description: {{details.values.description}}</h4>
<tabset>
<tab heading="Details">
<table class="table table-bordered">
<thead>
<tr >
<tr>
<th>Key</th>
<th>Value</th>
</tr>
......@@ -44,17 +32,15 @@
<tbody>
<tr data-ng-repeat="(key,value) in details.values" ng-if="value && !(key==='columns') && !(key==='name') && !(key==='description')">
<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>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="Schema"> <section data-ng-include="'/modules/details/views/schema.html'"></section></div>
<div role="tabpanel" class="tab-pane" id="Output"><div data-ng-include="'/modules/lineage/views/outputs.html'"></div></div>
<div role="tabpanel" class="tab-pane" id="Input"><div data-ng-include="'/modules/lineage/views/inputs.html'"></div></div>
</div>
</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="Input" data-disable="!tableName" data-select="onActivate('inputs')"><ng-include data-table-type="inputs" src="'/modules/lineage/views/lineage.html'"/></tab>
</tabset>
</div>
\ No newline at end of file
dashboard/v2/public/modules/details/views/lineage.html deleted 100644 → 0
<div data-ng-include="'/modules/lineage/views/lineage.html'"></div>
\ No newline at end of file
dashboard/v2/public/modules/details/views/schema.html
......@@ -15,40 +15,38 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<div>
<table class="table table-bordered">
<thead>
<tr >
<th>Name</th>
<th>Comment</th>
<th>DataType</th>
</tr>
</thead>
<tbody>
<tr >
<td> {{details.values.columns[0].values.name}}</td>
<td>{{details.values.columns[0].values.comment}}</td>
<td> {{details.values.columns[0].values.dataType}}</td>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Comment</th>
<th>DataType</th>
</tr>
</thead>
<tbody>
<tr>
<td> {{details.values.columns[0].values.name}}</td>
<td>{{details.values.columns[0].values.comment}}</td>
<td> {{details.values.columns[0].values.dataType}}</td>
</tr>
<tr>
</tr>
<tr>
<td> {{details.values.columns[1].values.name}}</td>
<td>{{details.values.columns[1].values.comment}}</td>
<td> {{details.values.columns[1].values.dataType}}</td>
</tr>
<tr>
<td> {{details.values.columns[1].values.name}}</td>
<td>{{details.values.columns[1].values.comment}}</td>
<td> {{details.values.columns[1].values.dataType}}</td>
</tr>
<tr>
<td> {{details.values.columns[2].values.name}}</td>
<td>{{details.values.columns[2].values.comment}}</td>
<td> {{details.values.columns[2].values.dataType}}</td>
</tr>
<tr>
<td> {{details.values.columns[2].values.name}}</td>
<td>{{details.values.columns[2].values.comment}}</td>
<td> {{details.values.columns[2].values.dataType}}</td>
</tr>
<tr>
<td> {{details.values.columns[3].values.name}}</td>
<td>{{details.values.columns[3].values.comment}}</td>
<td> {{details.values.columns[3].values.dataType}}</td>
</tr>
</tbody>
</table>
</div>
\ No newline at end of file
<td> {{details.values.columns[3].values.name}}</td>
<td>{{details.values.columns[3].values.comment}}</td>
<td> {{details.values.columns[3].values.dataType}}</td>
</tr>
</tbody>
</table>
\ No newline at end of file
dashboard/v2/public/modules/lineage/lineageController.js
......@@ -21,24 +21,42 @@
angular.module('dgc.lineage').controller('LineageController', ['$element', '$scope', '$state', '$stateParams', 'lodash', 'LineageResource', 'd3', 'dagreD3',
function($element, $scope, $state, $stateParams, _, LineageResource, d3, dagreD3) {
$scope.metaData = [];
LineageResource.get({
tableName: $scope.tableName,
type: "outputs"
}, function lineageSuccess(response) {
$scope.metaData = response.results;
renderGraph(transformData(response.results), d3.select($element[0]).select('svg'));
function getLineageData(tableData, callRender) {
LineageResource.get({
tableName: tableData.tableName,
type: tableData.type
}, function lineageSuccess(response) {
$scope.lineageData = transformData(response.results);
if (callRender) {
render();
}
});
}
});
$scope.type = $element.parent().attr('data-table-type');
$scope.rendered = false;
var requested = false;
LineageResource.get({
tableName: $scope.tableName,
type: "inputs"
}, function lineageSuccess(response) {
$scope.metaData = response.results;
renderGraph(transformData(response.results), d3.select($element[0]).select('svg'));
function render() {
renderGraph($scope.lineageData, {
element: $element[0],
height: $element[0].offsetHeight,
width: $element[0].offsetWidth
});
$scope.rendered = true;
}
$scope.$on('render-lineage', function(event, lineageData) {
if (lineageData.type === $scope.type) {
if (!$scope.lineageData) {
if (!requested) {
getLineageData(lineageData, true);
requested = true;
}
} else {
render();
}
}
});
function transformData(metaData) {
......@@ -51,7 +69,7 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
nodes.push({
guid: guid,
label: name,
shape: "rect"
shape: 'rect'
});
}
......@@ -67,7 +85,7 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
nodes.push({
guid: child,
label: 'Load Process',
shape: "circle"
shape: 'circle'
});
}
edges.push({
......@@ -82,18 +100,17 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
};
}
function renderGraph(data, element) {
function renderGraph(data, container) {
// Create a new directed graph
var g = new dagreD3
.graphlib
.Graph()
.setGraph({
rankdir: "LR"
rankdir: 'LR'
});
// Automatically label each of the nodes
//g.setNode("DB (sales)", { label: "Sales DB", width: 144, height: 100 })
//g.setNode('DB (sales)', { label: 'Sales DB', width: 144, height: 100 })
//states.forEach(function(state) { g.setNode(state, { label: state }); });
_.forEach(data.nodes, function(node) {
......@@ -105,7 +122,7 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
_.forEach(data.edges, function(edge) {
g.setEdge(edge.parent, edge.child, {
label: ""
label: ''
});
});
......@@ -115,7 +132,13 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
node.rx = node.ry = 5;
});
var inner = element.select("g");
var element = d3.select(container.element),
width = Math.max(container.width, 960),
height = Math.max(container.height, 350),
inner = element.select('svg')
.attr('width', width)
.attr('height', height)
.select('g');
// Create the renderer
var render = new dagreD3.render();
......@@ -124,12 +147,12 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
render(inner, g);
// Center the graph
var initialScale = 0.75;
//var initialScale = 0.75;
// zoom
// .translate([(element.attr("width") - g.graph().width * initialScale) / 2, 20])
// .translate([(container.attr('width') - g.graph().width * initialScale) / 2, 20])
// .scale(initialScale)
// .event(element);
element.attr('height', g.graph().height * initialScale + 90);
// .event(container);
//container.attr('height', g.graph().height * initialScale + 90);
}
}
......
dashboard/v2/public/modules/lineage/views/inputs.html deleted 100644 → 0
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<div data-ng-controller="LineageController">
<div id="inputs">
<svg class="lineage-viz"><g></svg>
</div>
</div>
dashboard/v2/public/modules/lineage/views/lineage.html
......@@ -16,10 +16,9 @@
~ limitations under the License.
-->
<div data-ng-controller="LineageController">
<svg class="lineage-viz"><g></svg>
<div class="lineage-viz" data-ng-controller="LineageController">
<i data-ng-hide="rendered" class="fa fa-spinner fa-spin fa-5x"></i>
<svg>
<g/>
</svg>
</div>
dashboard/v2/public/modules/lineage/views/outputs.html deleted 100644 → 0
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<div data-ng-controller="LineageController">
<div id="outputs">
<svg class="lineage-viz"><g></svg>
</div>
</div>
dashboard/v2/public/views/includes/foot.html
......@@ -29,10 +29,4 @@
<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://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<script type="text/javascript" src="dist/app.min.js"></script>
{% if (process.env.NODE_ENV == 'local') %}
<!-- Livereload script rendered -->
<script type="text/javascript" src="http://localhost:35730/livereload.js"></script>
{% endif %}
\ No newline at end of file
<script type="text/javascript" src="dist/app.min.js"></script>
\ No newline at end of file
dashboard/v2/public/views/includes/head.html
......@@ -31,6 +31,7 @@
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/sticky-footer-navbar.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/details.css">
<link rel="stylesheet" href="/css/lineage.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
......
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