add contract/constraints (#441)

* add contract/constraints * changelog
dbt-labs · Aug 7, 2023 · 579b24d · 579b24d
1 parent c3e3310
commit 579b24d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 1 deletion.
diff --git a/.changes/unreleased/Docs-20230804-131815.yaml b/.changes/unreleased/Docs-20230804-131815.yaml
@@ -0,0 +1,6 @@
+kind: Docs
+body: Display contract and column constraints on the model page
+time: 2023-08-04T13:18:15.627005-05:00
+custom:
+  Author: emmyoop
+  Issue: "433"
diff --git a/src/app/components/column_details/column_details.html b/src/app/components/column_details/column_details.html
@@ -12,6 +12,7 @@
                         <th style="background-color: white; position: sticky; top: 0; z-index: 1;">Column</th>
                         <th style="background-color: white; position: sticky; top: 0; z-index: 1;">Type</th>
                         <th style="background-color: white; position: sticky; top: 0; z-index: 1;">Description</th>
+                        <th style="width: 1px; background-color: white; position: sticky; top: 0; z-index: 1;">Constraints</th>
                         <th style="width: 1px; background-color: white; position: sticky; top: 0; z-index: 1;">Tests</th>
                         <th style="width: 1px; background-color: white; position: sticky; top: 0; z-index: 1;" class='text-center'>More?</th>
                     </tr>
@@ -34,6 +35,15 @@
                         <td style="text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; max-width: 1px;">
                             <span ng-show="!column.expanded">{{ column.description }}</span>
                         </td>
+                        <td>
+                            <span class="text-light" ng-show="!column.expanded">
+                                <span data-toggle="tooltip" title="Not Null" ng-if="has_constraint(column, 'not_null')">N</span>
+                                <span data-toggle="tooltip" title="Primary Key" ng-if="has_constraint(column, 'primary_key')">PK</span>
+                                <span data-toggle="tooltip" title="Foreign Key" ng-if="has_constraint(column, 'foreign_key')">FK</span>
+                                <span data-toggle="tooltip" title="Check" ng-if="has_constraint(column, 'check')">C</span>
+                                <span data-toggle="tooltip" title="Custom" ng-if="has_constraint(column, 'custom')">+</span>
+                            </span>
+                        </td>
                         <td>
                             <span class="text-light" ng-show="!column.expanded">
                                 <span data-toggle="tooltip" title="Unique" ng-if="has_test(column, 'U')">U</span>
@@ -76,6 +86,23 @@ <h5>Description</h5>
                                     <span marked="column.description"></span>
                                 </div>
 
+                                <div ng-show="column.constraints && column.constraints.length" style="margin-bottom: 15px">
+                                    <h5>Constraints</h5>
+                                    <div class="detail-group" style="padding-bottom: 0">
+                                        <div class="detail-body" style="padding-left: 0">
+                                            <dl class="detail" ng-style="{'padding-left': $index == 0 ? 0 : 'auto'}"
+                                                ng-repeat="constraint in column.constraints">
+                                                <dt class="detail-label">Name</dt>
+                                                <dd class="detail-value">{{ constraint.name }}</dd>
+                                                <dt class="detail-label">Type</dt>
+                                                <dd class="detail-value">{{ constraint.type }}</dd>
+                                                <dt class="detail-label">Expression</dt>
+                                                <dd class="detail-value">{{ constraint.expression }}</dd>
+                                            </dl>
+                                        </div>
+                                    </div>
+                                </div>
+
                                 <div ng-show="column.tests && column.tests.length" style="margin-bottom: 15px">
                                     <h5>Generic Tests</h5>
                                     <ul class="list-unstyled" style="margin-top: 2px">

diff --git a/src/app/components/column_details/column_details.js b/src/app/components/column_details/column_details.js
@@ -18,13 +18,18 @@ angular
                 var test_types = _.pluck(col.tests, 'short');
                 return test_types.indexOf(test_name) != -1;
             }
+
+            scope.has_constraint = function(col, constraint_name) {
+                return col.constraints.some(constraint => constraint.type === constraint_name)
+            }
 
             scope.has_more_info = function(column) {
                 var tests = (column.tests || []);
                 var description = (column.description || "");
                 var meta = (column.meta || {});
+                var constraints = (column.constraints || []);
 
-                return tests.length || description.length || !_.isEmpty(meta);
+                return tests.length || description.length || constraints.length || !_.isEmpty(meta);
             }
 
             scope.toggle_column_expanded = function(column) {

diff --git a/src/app/components/table_details/table_details.js b/src/app/components/table_details/table_details.js
@@ -140,6 +140,10 @@ angular
                         name: "Version",
                         value: model.version
                     },
+                    {
+                        name: "Contract",
+                        value: model.config.contract.enforced ? "Enforced" : "Not Enforced"
+                    },
                 ]
 
                 return _.filter(stats, function(s) { return s.value !== undefined })