(#135) adds report node type

dbt-labs · Sep 15, 2020 · 15d08f9 · 15d08f9
1 parent 05bda78
commit 15d08f9
Show file tree

Hide file tree

Showing 19 changed files with 227 additions and 47 deletions.
diff --git a/src/app/components/model_tree/model_tree.html b/src/app/components/model_tree/model_tree.html
@@ -48,6 +48,17 @@
                     <br />
                 </div>
 
+                <div ng-show="tree.reports.length > 0">
+                    <strong>Reports</strong>
+                    <ul style="display: block">
+                        <model-tree-line
+                            item="item"
+                            resource-type="report"
+                            ng-repeat="item in tree.reports"></model-tree-line>
+                    </ul>
+                    <br />
+                </div>
+
                 <strong>Projects</strong>
                 <ul>
                     <model-tree-line

diff --git a/src/app/components/references/index.html b/src/app/components/references/index.html
@@ -1,6 +1,6 @@
 <div class="panel">
     <div class="panel-body" ng-if="!has_references">
-        No resources reference this macro
+        No resources reference this {{ node.resource_type }}
     </div>
     <div class="panel-body" ng-if="has_references">
         <ul class="nav nav-tabs">

diff --git a/src/app/components/references/index.js b/src/app/components/references/index.js
@@ -8,6 +8,7 @@ angular
     return {
         scope: {
             references: '=',
+            node: '=',
         },
         restrict: 'E',
         templateUrl: template,
@@ -38,6 +39,8 @@ angular
                     return 'Analyses';
                 } else if (type == 'macro') {
                       return 'Macros';
+                } else if (type == 'report') {
+                      return 'Reports';
                 } else {
                     return 'Nodes';
                 }

diff --git a/src/app/components/table_details/table_details.js b/src/app/components/table_details/table_details.js
@@ -11,7 +11,8 @@ angular
     return {
         scope: {
             model: '=',
-            extras: '='
+            extras: '=',
+            showDefaults: '<',
         },
         templateUrl: template,
         link: function(scope) {

diff --git a/src/app/docs/analysis.html b/src/app/docs/analysis.html
@@ -34,7 +34,6 @@ <h1>
         <div class="app-frame app-pad-h">
             <ul class="nav nav-tabs">
                 <li ui-sref-active='active'><a ui-sref="dbt.analysis({'#': 'description'})">Description</a></li>
-                <li ui-sref-active='active' ng-show = "referencesLength != 0"><a ui-sref="dbt.analysis({'#': 'referenced_by'})">Referenced By</a></li>
                 <li ui-sref-active='active' ng-show = "parentsLength != 0"><a ui-sref="dbt.analysis({'#': 'depends_on'})">Depends On</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.analysis({'#': 'sql'})">SQL</a></li>
             </ul>
@@ -56,14 +55,6 @@ <h6>Description</h6>
                 </div>
             </section>
 
-            <section class="section" ng-show = "referencesLength != 0">
-                <div class="section-target" id="referenced_by"></div>
-                <div class="section-content">
-                    <h6>Referenced By</h6>
-                    <reference-list references="references" />
-                </div>
-            </section>
-
             <section class="section" ng-show = "parentsLength != 0">
                 <div class="section-target" id="depends_on"></div>
                 <div class="section-content">

diff --git a/src/app/docs/index.js b/src/app/docs/index.js
@@ -6,3 +6,4 @@ require('./snapshot');
 require('./test');
 require('./macro');
 require('./analysis');
+require('./report');
diff --git a/src/app/docs/macro.html b/src/app/docs/macro.html
@@ -63,15 +63,15 @@ <h6>Arguments</h6>
                 <div class="section-target" id="referenced_by"></div>
                 <div class="section-content">
                     <h6>Referenced By</h6>
-                    <reference-list references="references" />
+                    <reference-list references="references" node="macro" />
                 </div>
             </section>
 
             <section class="section" ng-show = "parentsLength != 0">
                 <div class="section-target" id="depends_on"></div>
                 <div class="section-content">
                     <h6>Depends On</h6>
-                    <reference-list references="parents" />
+                    <reference-list references="parents" node="macro" />
                 </div>
             </section>
 

diff --git a/src/app/docs/model.html b/src/app/docs/model.html
@@ -74,15 +74,15 @@ <h6>Columns</h6>
                 <div class="section-target" id="referenced_by"></div>
                 <div class="section-content">
                     <h6>Referenced By</h6>
-                    <reference-list references="references" />
+                    <reference-list references="references" node="model" />
                 </div>
             </section>
 
             <section class="section" ng-show = "parentsLength != 0">
                 <div class="section-target" id="depends_on"></div>
                 <div class="section-content">
                     <h6>Depends On</h6>
-                    <reference-list references="parents" />
+                    <reference-list references="parents" node="model" />
                 </div>
             </section>
 

diff --git a/src/app/docs/report.html b/src/app/docs/report.html
@@ -0,0 +1,79 @@
+<style>
+/* TODO */
+.section-target {
+    top: -8em;
+}
+
+.noflex {
+    flex: 0 0 160px !important;
+}
+
+.highlight {
+    color: #24292e;
+    background-color: white;
+}
+
+</style>
+
+<div class='app-scroll'>
+    <div class="app-links app-sticky">
+        <div class="app-title">
+            <div class="app-frame app-pad app-flush-bottom">
+
+                <h1>
+                    <span class="break">{{ report.name }}</span>
+                    <small>report</small>
+
+                    <div class='pull-right' ng-show="report.url">
+                        <a class='btn text-white btn-primary btn-sm' ng-href="{{ report.url }}" target="_blank">View this report</a>
+                    </div>
+
+                    <div class='clearfix'></div>
+                </h1>
+
+            </div>
+        </div>
+        <div class="app-frame app-pad-h">
+            <ul class="nav nav-tabs">
+                <li ui-sref-active='active'><a ui-sref="dbt.report({'#': 'details'})">Details</a></li>
+                <li ui-sref-active='active'><a ui-sref="dbt.report({'#': 'description'})">Description</a></li>
+                <li ui-sref-active='active' ng-show = "parentsLength != 0"><a ui-sref="dbt.report({'#': 'depends_on'})">Depends On</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="app-details">
+        <div class="app-frame app-pad">
+
+            <section class="section">
+                <div class="section-target" id="details"></div>
+                <table-details model="report" extras="extra_table_fields" show-defaults="false" />
+            </section>
+
+            <section class="section">
+                <div class="section-target" id="description"></div>
+                <div class="section-content">
+                    <h6>Description</h6>
+                    <div class="panel">
+                        <div class="panel-body">
+                            <div ng-show="report.url" class='margin'>
+                                View this report at <a ng-href="{{ report.url }}" target="_blank">{{ report.url }}</a>
+                            </div>
+
+                            <div ng-if="report.description" class="model-markdown" marked="report.description"></div>
+                            <div ng-if="!report.description">This {{ report.resource_type }} is not currently documented</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="section" ng-show = "parentsLength != 0">
+                <div class="section-target" id="depends_on"></div>
+                <div class="section-content">
+                    <h6>Depends On</h6>
+                    <reference-list references="parents" node="report" />
+                </div>
+            </section>
+
+        </div>
+    </div>
+</div>
diff --git a/src/app/docs/report.js b/src/app/docs/report.js
@@ -0,0 +1,41 @@
+'use strict';
+
+const angular = require('angular');
+const dag_utils = require('./dag_utils')
+require("./styles.css");
+
+angular
+.module('dbt')
+.controller('ReportCtrl', ['$scope', '$state', 'project', 'code', '$anchorScroll', '$location',
+            function($scope, $state, projectService, codeService, $anchorScroll, $location) {
+
+    $scope.model_uid = $state.params.unique_id;
+    $scope.project = projectService;
+
+    $scope.codeService = codeService;
+    $scope.extra_table_fields = [];
+    $scope.versions = {};
+
+    $scope.report = {};
+    projectService.ready(function(project) {
+        let report = project.nodes[$scope.model_uid];
+        $scope.report = report;
+        $scope.parents = dag_utils.getParents(project, report);
+        $scope.parentsLength = $scope.parents.length;
+
+        $scope.extra_table_fields = [
+            {
+                name: "Maturity",
+                value: $scope.report.maturity
+            },
+            {
+                name: "Owner",
+                value: $scope.report.owner.name
+            },
+            {
+                name: "Owner email",
+                value: $scope.report.owner.email
+            },
+        ]
+    })
+}]);
diff --git a/src/app/docs/seed.html b/src/app/docs/seed.html
@@ -73,15 +73,15 @@ <h6>Columns</h6>
                 <div class="section-target" id="referenced_by"></div>
                 <div class="section-content">
                     <h6>Referenced By</h6>
-                    <reference-list references="references" />
+                    <reference-list references="references" node="model" />
                 </div>
             </section>
 
             <section class="section" ng-show = "parentsLength != 0">
                 <div class="section-target" id="depends_on"></div>
                 <div class="section-content">
                     <h6>Depends On</h6>
-                    <reference-list references="parents" />
+                    <reference-list references="parents" node="model" />
                 </div>
             </section>
 

diff --git a/src/app/docs/snapshot.html b/src/app/docs/snapshot.html
@@ -74,15 +74,15 @@ <h6>Columns</h6>
                 <div class="section-target" id="referenced_by"></div>
                 <div class="section-content">
                     <h6>Referenced By</h6>
-                    <reference-list references="references" />
+                    <reference-list references="references" node="model" />
                 </div>
             </section>
 
             <section class="section" ng-show = "parentsLength != 0">
                 <div class="section-target" id="depends_on"></div>
                 <div class="section-content">
                     <h6>Depends On</h6>
-                    <reference-list references="parents" />
+                    <reference-list references="parents" node="model" />
                 </div>
             </section>
 

diff --git a/src/app/docs/source.html b/src/app/docs/source.html
@@ -31,7 +31,6 @@ <h1>
                 <li ui-sref-active='active'><a ui-sref="dbt.source({'#': 'description'})">Description</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.source({'#': 'columns'})">Columns</a></li>
                 <li ui-sref-active='active' ng-show = "referencesLength != 0"><a ui-sref="dbt.source({'#': 'referenced_by'})">Referenced By</a></li>
-                <li ui-sref-active='active' ng-show = "parentsLength != 0"><a ui-sref="dbt.source({'#': 'depends_on'})">Depends On</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.source({'#': 'code'})">SQL</a></li>
             </ul>
         </div>
@@ -67,15 +66,7 @@ <h6>Columns</h6>
                 <div class="section-target" id="referenced_by"></div>
                 <div class="section-content">
                     <h6>Referenced By</h6>
-                    <reference-list references="references" />
-                </div>
-            </section>
-
-            <section class="section" ng-show = "parentsLength != 0">
-                <div class="section-target" id="depends_on"></div>
-                <div class="section-content">
-                    <h6>Depends On</h6>
-                    <reference-list references="parents" />
+                    <reference-list references="references" node="model" />
                 </div>
             </section>
 

diff --git a/src/app/docs/test.html b/src/app/docs/test.html
@@ -28,7 +28,6 @@ <h1>
         <div class="app-frame app-pad-h">
             <ul class="nav nav-tabs">
                 <li ui-sref-active='active'><a ui-sref="dbt.test({'#': 'description'})">Description</a></li>
-                <li ui-sref-active='active' ng-show = "referencesLength != 0"><a ui-sref="dbt.test({'#': 'referenced_by'})">Referenced By</a></li>
                 <li ui-sref-active='active' ng-show = "parentsLength != 0"><a ui-sref="dbt.test({'#': 'depends_on'})">Depends On</a></li>
                 <li ui-sref-active='active'><a ui-sref="dbt.test({'#': 'code'})">SQL</a></li>
             </ul>
@@ -49,19 +48,11 @@ <h6>Description</h6>
                 </div>
             </section>
 
-            <section class="section" ng-show = "referencesLength != 0">
-                <div class="section-target" id="referenced_by"></div>
-                <div class="section-content">
-                    <h6>Referenced By</h6>
-                    <reference-list references="references" />
-                </div>
-            </section>
-
             <section class="section" ng-show = "parentsLength != 0">
                 <div class="section-target" id="depends_on"></div>
                 <div class="section-content">
                     <h6>Depends On</h6>
-                    <reference-list references="parents" />
+                    <reference-list references="parents" node="model" />
                 </div>
             </section>
 

diff --git a/src/app/index.routes.js b/src/app/index.routes.js
@@ -16,6 +16,7 @@ const templates = {
     test: require('./docs/test.html'),
     analysis: require('./docs/analysis.html'),
     macro: require('./docs/macro.html'),
+    report: require('./docs/report.html'),
 }
 
 angular
@@ -83,7 +84,7 @@ angular
             },
         })
         .state('dbt.analysis', {
-            url: 'analysis/:unique_id?section',
+            url: 'analysis/:unique_id?section&' + graph_params,
             controller: 'AnalysisCtrl',
             templateUrl: templates.analysis,
             params: {
@@ -99,7 +100,7 @@ angular
             },
         })
         .state('dbt.source_list', {
-            url: 'source_list/:source?' + graph_params,
+            url: 'source_list/:source?section&' + graph_params,
             controller: 'SourceListCtrl',
             templateUrl: templates.source_list,
             params: {
@@ -114,4 +115,12 @@ angular
                 unique_id: {type: 'string'}
             },
         })
+        .state('dbt.report', {
+            url: 'report/:unique_id?section&' + graph_params,
+            controller: 'ReportCtrl',
+            templateUrl: templates.report,
+            params: {
+                unique_id: {type: 'string'}
+            },
+        })
 }])
diff --git a/src/app/main/index.js b/src/app/main/index.js
@@ -87,6 +87,7 @@ angular
         $scope.tree.database = tree.database;
         $scope.tree.project = tree.project;
         $scope.tree.sources = tree.sources;
+        $scope.tree.reports = tree.reports;
 
         setTimeout(function() {
             scrollToSelectedModel($scope.model_uid);

diff --git a/src/app/services/graph.service.js b/src/app/services/graph.service.js
@@ -179,6 +179,12 @@ angular
                         'background-color': '#5fb825',
                     }
                 },
+                {
+                    selector: 'node[resource_type="report"]',
+                    style: {
+                        'background-color': '#ff694b',
+                    }
+                },
                 {
                     selector: 'node[selected=1]',
                     style: {
@@ -323,7 +329,7 @@ angular
 
 
         _.each(_.filter(service.manifest.nodes, function(node) {
-            var is_graph_type = _.includes(['model', 'seed', 'source', 'snapshot', 'analysis'], node.resource_type);
+            var is_graph_type = _.includes(['model', 'seed', 'source', 'snapshot', 'analysis', 'report'], node.resource_type);
             var is_data_test = node.resource_type == 'test' && _.includes(node.tags, 'data');
             return is_graph_type || is_data_test;
         }), function(node) {