feat(dbt): show source and compiled code in the UI

datahub-project · Mar 12, 2024 · a876291 · a876291
1 parent 2a6ad21
commit a876291
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/...-core/src/main/java/com/linkedin/datahub/graphql/types/dataset/mappers/DatasetMapper.java b/...-core/src/main/java/com/linkedin/datahub/graphql/types/dataset/mappers/DatasetMapper.java
@@ -238,6 +238,7 @@ private void mapViewProperties(@Nonnull Dataset dataset, @Nonnull DataMap dataMa
     graphqlProperties.setMaterialized(properties.isMaterialized());
     graphqlProperties.setLanguage(properties.getViewLanguage());
     graphqlProperties.setLogic(properties.getViewLogic());
+    graphqlProperties.setFormattedLogic(properties.getFormattedViewLogic());
     dataset.setViewProperties(graphqlProperties);
   }
 

diff --git a/datahub-graphql-core/src/main/resources/entity.graphql b/datahub-graphql-core/src/main/resources/entity.graphql
@@ -3186,6 +3186,12 @@ type ViewProperties {
   """
   logic: String!
 
+  """
+  A formatted version of the logic associated with the view.
+  For dbt, this contains the compiled SQL.
+  """
+  formattedLogic: String
+
   """
   The language in which the view logic is written, for example SQL
   """

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/View/ViewDefinitionTab.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/View/ViewDefinitionTab.tsx
@@ -1,5 +1,5 @@
-import { Typography } from 'antd';
-import React from 'react';
+import { Radio, Typography } from 'antd';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { GetDatasetQuery } from '../../../../../../graphql/dataset.generated';
@@ -23,9 +23,14 @@ const InfoItemContent = styled.div`
     padding-top: 8px;
 `;
 
+const FormattingSelector = styled.div`
+    margin-top: 10px;
+`;
+
 const QueryText = styled(Typography.Paragraph)`
-    margin-top: 20px;
+    margin-top: 15px;
     background-color: ${ANTD_GRAY[2]};
+    border-radius: 5px;
 `;
 
 // NOTE: Yes, using `!important` is a shame. However, the SyntaxHighlighter is applying styles directly
@@ -38,9 +43,15 @@ const NestedSyntax = styled(SyntaxHighlighter)`
 export default function ViewDefinitionTab() {
     const baseEntity = useBaseEntity<GetDatasetQuery>();
     const logic = baseEntity?.dataset?.viewProperties?.logic || 'UNKNOWN';
+    const formattedLogic = baseEntity?.dataset?.viewProperties?.formattedLogic;
     const materialized = (baseEntity?.dataset?.viewProperties?.materialized && true) || false;
     const language = baseEntity?.dataset?.viewProperties?.language || 'UNKNOWN';
 
+    const isDbt = baseEntity?.dataset?.platform?.name?.toLowerCase() === 'dbt';
+    const canShowFormatted = formattedLogic && true;
+    const [showFormatted, setShowFormatted] = useState(false);
+    const formatOptions = isDbt ? ['Source', 'Compiled'] : ['Raw', 'Formatted'];
+
     return (
         <>
             <InfoSection>
@@ -56,8 +67,21 @@ export default function ViewDefinitionTab() {
             </InfoSection>
             <InfoSection>
                 <Typography.Title level={5}>Logic</Typography.Title>
+                {canShowFormatted && (
+                    <FormattingSelector>
+                        <Radio.Group
+                            options={[
+                                { label: formatOptions[0], value: false },
+                                { label: formatOptions[1], value: true },
+                            ]}
+                            onChange={(e) => setShowFormatted(e.target.value)}
+                            value={showFormatted}
+                            optionType="button"
+                        />
+                    </FormattingSelector>
+                )}
                 <QueryText>
-                    <NestedSyntax language="sql">{logic}</NestedSyntax>
+                    <NestedSyntax language="sql">{showFormatted ? formattedLogic : logic}</NestedSyntax>
                 </QueryText>
             </InfoSection>
         </>

diff --git a/datahub-web-react/src/graphql/dataset.graphql b/datahub-web-react/src/graphql/dataset.graphql
@@ -230,6 +230,7 @@ fragment viewProperties on Dataset {
     viewProperties {
         materialized
         logic
+        formattedLogic
         language
     }
 }