Vishal/Darshan: Added lineage for output and input

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

+.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

-<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>
+        <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
\ 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

-<!--
-  ~ 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

-<!--
-  ~ 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>
-
+<script type="text/javascript" src="dist/app.min.js"></script>
\ No newline at end of file
-
-{% 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

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>