Update TableDetail Page (amundsen-io#210)

* Some fixes * Remove a unecessary workaround * Css cleanup
DataChefHQ · Jun 30, 2022 · da1037d · da1037d
1 parent d1a1c8a
commit da1037d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 20 deletions.
diff --git a/...amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/index.tsx b/...amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/index.tsx
@@ -72,10 +72,10 @@ class DetailListItem extends React.Component<DetailListItemProps, DetailListItem
     return (
       <li className='list-group-item detail-list-item'>
         <div className={'column-info ' + (isExpandable ? 'expandable' : '')} onClick={ isExpandable? this.onClick : null }>
-          <div style={{ width: '100%', display: 'inline-grid' }}>
+          <div className='title-section'>
             <div className='title-row'>
               <div className='name title-2'>{metadata.name}</div>
-              <div className='column-type'>{metadata.type || 'null'}</div>
+              <div className='column-type'>{metadata.type ? metadata.type.toLowerCase() : 'null'}</div>
             </div>
           </div>
           {

diff --git a/...undsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss b/...undsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss
@@ -31,15 +31,22 @@
     margin: -10px -4px 0;
     padding: 10px 4px 0;
 
-    .title-row {
-      display: flex;
-      flex-direction: row;
+    .title-section {
+      width: 100%;
+      overflow-wrap: break-word;
 
-      .name {
-        margin-right: 8px;
-      }
-      .column-type {
-        margin-top: 4px;
+      .title-row {
+        display: flex;
+        flex-direction: row;
+
+        .name {
+          margin-right: 8px;
+          max-width: 85%;
+        }
+        .column-type {
+          margin-top: 4px;
+          max-width: 15%;
+        }
       }
     }
 

diff --git a/frontend/amundsen_application/static/js/components/TableDetail/index.tsx b/frontend/amundsen_application/static/js/components/TableDetail/index.tsx
@@ -195,8 +195,7 @@ export class TableDetail extends React.Component<TableDetailProps & RouteCompone
     }
   };
 
-  getAvatarForLineage = () => {
-    const href = AppConfig.tableLineage.urlGenerator(this.database, this.cluster, this.schema, this.tableName);
+  renderAvatarForLineage = (href: string) => {
     return (
       <a href={ href } target='_blank' id="explore-lineage" onClick={logClick}>
         <AvatarLabel label={ this.displayName } src={ AppConfig.tableLineage.iconPath }/>
@@ -217,6 +216,14 @@ export class TableDetail extends React.Component<TableDetailProps & RouteCompone
 
     const entityCardSections = [];
 
+    // "Data Store" section
+    const dataStoreRenderer = () => {
+      return (
+        <label className="m-auto">{ data.database.toUpperCase() }</label>
+      );
+    };
+    entityCardSections.push({'title': 'Data Store', 'contentRenderer': dataStoreRenderer, 'isEditable': false});
+
     // "Owned By" section
     const ownerSectionRenderer = () => {
       return (
@@ -271,23 +278,27 @@ export class TableDetail extends React.Component<TableDetailProps & RouteCompone
 
     // "Lineage" Section
     if (AppConfig.tableLineage.isEnabled) {
-      entityCardSections.push({
-        'title': 'Table Lineage' + (AppConfig.tableLineage.isBeta ? ' (beta)' : ''),
-        'contentRenderer': this.getAvatarForLineage,
-        'isEditable': false
-      });
+      const href = AppConfig.tableLineage.urlGenerator(this.database, this.cluster, this.schema, this.tableName);
+      if (!!href) {
+        entityCardSections.push({
+          'title': 'Table Lineage' + (AppConfig.tableLineage.isBeta ? ' (beta)' : ''),
+          'contentRenderer': () => { return this.renderAvatarForLineage(href) },
+          'isEditable': false
+        });
+      };
     }
 
     // "Preview" Section
     const previewSectionRenderer = () => {
+      const exploreSqlHref = AppConfig.tableProfile.isExploreEnabled ? this.getExploreSqlUrl() : '';
       return (
         <div>
           <DataPreviewButton modalTitle={ this.displayName } />
           {
-            AppConfig.tableProfile.isExploreEnabled &&
+            exploreSqlHref &&
               <a
                 className="btn btn-default btn-block"
-                href={this.getExploreSqlUrl()}
+                href={exploreSqlHref}
                 role="button"
                 target="_blank"
                 id="explore-sql"

diff --git a/frontend/amundsen_application/static/js/ducks/tableMetadata/reducer.ts b/frontend/amundsen_application/static/js/ducks/tableMetadata/reducer.ts
@@ -161,7 +161,6 @@ export default function reducer(state: TableMetadataReducerState = initialState,
     case GetLastIndexed.SUCCESS:
       return { ...state, lastIndexed: (<GetLastIndexedResponse>action).payload.lastIndexedEpoch };
     case GetPreviewData.FAILURE:
-      return { ...state, preview: initialPreviewState };
     case GetPreviewData.SUCCESS:
       return { ...state, preview: (<GetPreviewDataResponse>action).payload };
     case UpdateTableOwner.REQUEST: