feat: Table and Column Lineage Polish (#970)

Cleanup / polish of lineage features - Reordeered upstream/downstream tabs - Hide upstream/downstream tabs when no tables are found - Add loading state for column lineage
amundsen-io · Apr 14, 2021 · cd2f4c4 · cd2f4c4
1 parent 072d531
commit cd2f4c4
Show file tree

Hide file tree

Showing 14 changed files with 255 additions and 61 deletions.
diff --git a/amundsen_application/static/.betterer.results b/amundsen_application/static/.betterer.results
@@ -1033,10 +1033,10 @@ exports[`eslint`] = {
       [29, 22, 21, "Must use destructuring props assignment", "587844958"],
       [30, 7, 20, "\'watermark\' is already declared in the upper scope.", "1311337087"]
     ],
-    "js/pages/TableDetailPage/index.spec.tsx:1735345187": [
-      [60, 6, 25, "Use object destructuring.", "1230260048"]
+    "js/pages/TableDetailPage/index.spec.tsx:3538331913": [
+      [68, 6, 25, "Use object destructuring.", "1230260048"]
     ],
-    "js/pages/TableDetailPage/index.tsx:801208432": [
+    "js/pages/TableDetailPage/index.tsx:144152621": [
       [136, 2, 20, "key should be placed after componentDidUpdate", "3916788587"],
       [146, 22, 12, "\'getTableData\' is already declared in the upper scope.", "3938384029"],
       [159, 22, 12, "\'getTableData\' is already declared in the upper scope.", "3938384029"],

diff --git a/amundsen_application/static/js/ducks/tableMetadata/reducer.ts b/amundsen_application/static/js/ducks/tableMetadata/reducer.ts
@@ -445,6 +445,19 @@ export default function reducer(
           status: (<GetTableLineageResponse>action).payload.status,
         },
       };
+    case GetColumnLineage.REQUEST: {
+      const { columnName } = (<GetColumnLineageRequest>action).payload;
+      return {
+        ...state,
+        columnLineageMap: {
+          ...state.columnLineageMap,
+          [columnName]: {
+            lineage: emptyLineage,
+            isLoading: true,
+          },
+        },
+      };
+    }
     case GetColumnLineage.SUCCESS:
     case GetColumnLineage.FAILURE: {
       const { columnName, lineage: columnLineage } = (<
@@ -454,7 +467,10 @@ export default function reducer(
         ...state,
         columnLineageMap: {
           ...state.columnLineageMap,
-          [columnName]: columnLineage,
+          [columnName]: {
+            lineage: columnLineage,
+            isLoading: false,
+          },
         },
       };
     }

diff --git a/amundsen_application/static/js/features/ColumnList/ColumnLineage/index.tsx b/amundsen_application/static/js/features/ColumnList/ColumnLineage/index.tsx
@@ -8,6 +8,7 @@ import { GlobalState } from 'ducks/rootReducer';
 import { emptyLineage } from 'ducks/tableMetadata/reducer';
 import { getColumnLineageLink } from 'config/config-utils';
 import { Lineage, LineageItem, TableMetadata } from 'interfaces/TableMetadata';
+import ColumnLineageLoader from '../ColumnLineageLoader';
 import {
   COLUMN_LINEAGE_LIST_SIZE,
   COLUMN_LINEAGE_DOWNSTREAM_TITLE,
@@ -25,6 +26,7 @@ interface ColumnLineageListOwnProps {
 interface StateFromProps {
   columnLineage: Lineage;
   tableData: TableMetadata;
+  isLoading: boolean;
 }
 
 type ColumnLineageListProps = ColumnLineageListOwnProps & StateFromProps;
@@ -66,7 +68,6 @@ const LineageList: React.FC<LineageListProps> = ({
   <div className="column-lineage-list">
     <div className="header-row">
       <span className="column-lineage-title">{title}</span>
-      &nbsp;
       <a href={link} className="body-link" rel="noreferrer" target="_blank">
         {COLUMN_LINEAGE_MORE_TEXT}
       </a>
@@ -79,24 +80,32 @@ export const ColumnLineageList: React.FC<ColumnLineageListProps> = ({
   columnName,
   columnLineage,
   tableData,
+  isLoading,
 }) => {
+  if (isLoading) {
+    return <ColumnLineageLoader />;
+  }
   const { downstream_entities, upstream_entities } = columnLineage;
+  const externalLink = getColumnLineageLink(tableData, columnName);
   if (!downstream_entities.length && !upstream_entities.length) {
     return null;
   }
-  const externalLink = getColumnLineageLink(tableData, columnName);
   return (
     <article className="column-lineage-wrapper">
-      <LineageList
-        link={externalLink}
-        title={COLUMN_LINEAGE_UPSTREAM_TITLE}
-        lineageItems={upstream_entities}
-      />
-      <LineageList
-        link={externalLink}
-        title={COLUMN_LINEAGE_DOWNSTREAM_TITLE}
-        lineageItems={downstream_entities}
-      />
+      {upstream_entities.length && (
+        <LineageList
+          link={externalLink}
+          title={COLUMN_LINEAGE_UPSTREAM_TITLE}
+          lineageItems={upstream_entities}
+        />
+      )}
+      {downstream_entities.length && (
+        <LineageList
+          link={externalLink}
+          title={COLUMN_LINEAGE_DOWNSTREAM_TITLE}
+          lineageItems={downstream_entities}
+        />
+      )}
     </article>
   );
 };
@@ -106,10 +115,14 @@ export const mapStateToProps = (
   ownProps: ColumnLineageListOwnProps
 ) => {
   const { columnLineageMap, tableData } = state.tableMetadata;
-  const columnLineage = columnLineageMap[ownProps.columnName] || emptyLineage;
+  const columnStateObject = columnLineageMap[ownProps.columnName];
+  const lineage =
+    (columnStateObject && columnStateObject.lineage) || emptyLineage;
+  const isLoading = columnStateObject && columnStateObject.isLoading;
   return {
-    columnLineage,
     tableData,
+    isLoading,
+    columnLineage: lineage,
   };
 };
 

diff --git a/amundsen_application/static/js/features/ColumnList/ColumnLineage/styles.scss b/amundsen_application/static/js/features/ColumnList/ColumnLineage/styles.scss
@@ -15,6 +15,8 @@ article.column-lineage-wrapper {
     @extend %text-title-w3;
 
     color: $text-secondary;
+    font-style: italic;
+    margin-right: $spacer-2;
   }
 
   .column-lineage-list {

diff --git a/amundsen_application/static/js/features/ColumnList/ColumnLineageLoader/index.spec.tsx b/amundsen_application/static/js/features/ColumnList/ColumnLineageLoader/index.spec.tsx
@@ -0,0 +1,37 @@
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+import ColumnLineageLoader from '.';
+
+const setup = () => {
+  const wrapper = shallow(<ColumnLineageLoader />);
+
+  return wrapper;
+};
+
+describe('ColumnLineageLoader', () => {
+  describe('render', () => {
+    it('should render without errors', () => {
+      expect(() => {
+        setup();
+      }).not.toThrow();
+    });
+
+    it('should render two columns', () => {
+      const expected = 2;
+      const actual = setup().find('.shimmer-loader-column').length;
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('should render four cells', () => {
+      const expected = 4;
+      const actual = setup().find('.shimmer-loader-cell').length;
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});
diff --git a/amundsen_application/static/js/features/ColumnList/ColumnLineageLoader/index.tsx b/amundsen_application/static/js/features/ColumnList/ColumnLineageLoader/index.tsx
@@ -0,0 +1,21 @@
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+
+import './styles.scss';
+
+const ColumnLineageLoader: React.FC = () => (
+  <div className="column-lineage-loader">
+    <div className="shimmer-loader-column">
+      <div className="shimmer-loader-cell header is-shimmer-animated" />
+      <div className="shimmer-loader-cell content is-shimmer-animated" />
+    </div>
+    <div className="shimmer-loader-column">
+      <div className="shimmer-loader-cell header is-shimmer-animated" />
+      <div className="shimmer-loader-cell content is-shimmer-animated" />
+    </div>
+  </div>
+);
+
+export default ColumnLineageLoader;
diff --git a/amundsen_application/static/js/features/ColumnList/ColumnLineageLoader/styles.scss b/amundsen_application/static/js/features/ColumnList/ColumnLineageLoader/styles.scss
@@ -0,0 +1,46 @@
+// Copyright Contributors to the Amundsen project.
+// SPDX-License-Identifier: Apache-2.0
+
+@import 'variables';
+
+$shimmer-height: 120px;
+$shimmer-block-spacing: $spacer-1;
+$shimmer-max-width: 800px;
+$shimmer-header-height: 24px;
+
+.column-lineage-loader {
+  display: flex;
+  height: $shimmer-height;
+  margin-top: $shimmer-block-spacing;
+  max-width: $shimmer-max-width;
+
+  .shimmer-loader-column {
+    display: flex;
+    flex-basis: 45%;
+    flex-direction: column;
+    height: 100%;
+    margin-right: $shimmer-block-spacing;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .shimmer-loader-cell {
+      margin-bottom: $shimmer-block-spacing;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &.header {
+        height: $shimmer-header-height;
+      }
+
+      &.content {
+        height: (
+          $shimmer-height - $shimmer-header-height - $shimmer-block-spacing
+        );
+      }
+    }
+  }
+}
diff --git a/amundsen_application/static/js/fixtures/metadata/table.ts b/amundsen_application/static/js/fixtures/metadata/table.ts
@@ -172,11 +172,38 @@ export const tableMetadata: TableMetadata = {
   ],
 };
 
-export const tableLineage: Lineage = {
+export const emptyTableLineage: Lineage = {
   downstream_entities: [],
   upstream_entities: [],
 };
 
+export const tableLineage: Lineage = {
+  downstream_entities: [
+    {
+      badges: [],
+      cluster: 'cluster',
+      database: 'database',
+      key: 'database://cluster.schema/table_name',
+      level: 1,
+      name: 'table_name',
+      schema: 'schema',
+      usage: 1398,
+    },
+  ],
+  upstream_entities: [
+    {
+      badges: [],
+      cluster: 'cluster',
+      database: 'database',
+      key: 'database://cluster.schema/table_name',
+      level: 1,
+      name: 'table_name',
+      schema: 'schema',
+      usage: 1398,
+    },
+  ],
+};
+
 export const relatedDashboards: DashboardResource[] = [
   {
     group_name: 'Test Group 1',

diff --git a/amundsen_application/static/js/interfaces/TableMetadata.ts b/amundsen_application/static/js/interfaces/TableMetadata.ts
@@ -142,7 +142,10 @@ export interface Lineage {
 }
 
 export interface ColumnLineageMap {
-  [column: string]: Lineage;
+  [columnName: string]: {
+    lineage: Lineage;
+    isLoading: boolean;
+  };
 }
 
 export interface TableLineageParams {

diff --git a/amundsen_application/static/js/pages/DashboardPage/ShimmeringDashboardLoader/index.spec.tsx b/amundsen_application/static/js/pages/DashboardPage/ShimmeringDashboardLoader/index.spec.tsx
@@ -20,9 +20,9 @@ describe('ShimmeringDashboardLoader', () => {
       }).not.toThrow();
     });
 
-    it('should render three rows', () => {
+    it('should render three columns', () => {
       const expected = 3;
-      const actual = setup().find('.shimmer-loader-row').length;
+      const actual = setup().find('.shimmer-loader-column').length;
 
       expect(actual).toEqual(expected);
     });

diff --git a/amundsen_application/static/js/pages/DashboardPage/ShimmeringDashboardLoader/index.tsx b/amundsen_application/static/js/pages/DashboardPage/ShimmeringDashboardLoader/index.tsx
@@ -6,16 +6,16 @@ import * as React from 'react';
 import './styles.scss';
 
 const ShimmeringDashboardLoader: React.FC = () => (
-  <div className="shimmer-loader">
-    <div className="shimmer-loader-row">
+  <div className="dashboard-shimmer-loader">
+    <div className="shimmer-loader-column">
       <div className="shimmer-loader-cell double is-shimmer-animated" />
       <div className="shimmer-loader-cell simple is-shimmer-animated" />
     </div>
-    <div className="shimmer-loader-row">
+    <div className="shimmer-loader-column">
       <div className="shimmer-loader-cell simple is-shimmer-animated" />
       <div className="shimmer-loader-cell double is-shimmer-animated" />
     </div>
-    <div className="shimmer-loader-row">
+    <div className="shimmer-loader-column">
       <div className="shimmer-loader-cell double is-shimmer-animated" />
       <div className="shimmer-loader-cell simple is-shimmer-animated" />
     </div>

diff --git a/amundsen_application/static/js/pages/DashboardPage/ShimmeringDashboardLoader/styles.scss b/amundsen_application/static/js/pages/DashboardPage/ShimmeringDashboardLoader/styles.scss
@@ -7,39 +7,39 @@ $shimmer-border-color: $gray20;
 $shimmer-height: 22vh;
 $shimmer-block-spacing: 16px;
 
-.shimmer-loader {
+.dashboard-shimmer-loader {
   border: 1px solid $shimmer-border-color;
   display: flex;
   height: $shimmer-height;
   justify-content: space-around;
   padding: $shimmer-block-spacing;
   width: 100%;
-}
 
-.shimmer-loader-row {
-  display: flex;
-  flex-basis: 33%;
-  flex-direction: column;
-  height: 100%;
-  margin-right: $shimmer-block-spacing;
+  .shimmer-loader-column {
+    display: flex;
+    flex-basis: 33%;
+    flex-direction: column;
+    height: 100%;
+    margin-right: $shimmer-block-spacing;
 
-  &:last-child {
-    margin-right: 0;
+    &:last-child {
+      margin-right: 0;
+    }
   }
-}
 
-.shimmer-loader-cell {
-  margin-bottom: $shimmer-block-spacing;
+  .shimmer-loader-cell {
+    margin-bottom: $shimmer-block-spacing;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+    &:last-child {
+      margin-bottom: 0;
+    }
 
-  &.simple {
-    height: 40%;
-  }
+    &.simple {
+      height: 40%;
+    }
 
-  &.double {
-    height: 60%;
+    &.double {
+      height: 60%;
+    }
   }
 }