Add lineage link (#1)

* Added a lineage section in the table details side bar. This link can be enabled and customized by overwriting the default config values.
* Cleaned up some global styles by nesting them inside their component classes.
* Removed deprecated 'nav_link' file.
* Added comments for static configs.

amundsen_application/models/nav_links.py

-from marshmallow import Schema, fields, post_dump
-from marshmallow.exceptions import ValidationError
-
-from typing import Dict, List
-
-
-class Link:
-    def __init__(self, label: str, href: str, target: str, use_router: bool) -> None:
-        self.label = label
-        self.href = href
-        self.target = target
-        """ Specify usage of React's built-in router vs a simple <a> anchor tag """
-        self.use_router = use_router
-
-
-class LinksSchema(Schema):
-    label = fields.Str(required=True)
-    href = fields.Str(required=True)
-    target = fields.Str(required=False)
-    use_router = fields.Bool(required=False)
-
-
-class NavLinks:
-    def __init__(self, links: List = []) -> None:
-        self.links = links
-
-
-class NavLinksSchema(Schema):
-    links = fields.Nested(LinksSchema, many=True)
-
-    @post_dump
-    def validate_data(self, data: Dict) -> None:
-        links = data.get('links', [])
-        for link in links:
-            if link.get('label') is None:
-                raise ValidationError('All links must have a label')
-            if link.get('href') is None:
-                raise ValidationError('All links must have an href')

amundsen_application/static/config/config-default.ts

@@ -15,6 +15,13 @@ const configDefault: AppConfig = {
     key: 'default-key',
     sampleRate: 100,
   },
+  lineage: {
+    enabled: false,
+    generateUrl: (database: string, cluster: string, schema: string, table: string) => {
+      return `https://DEFAULT_LINEAGE_URL?schema=${schema}&cluster=${cluster}&db=${database}&table=${table}`;
+    },
+    iconPath: 'PATH_TO_ICON'
+  },
   navLinks: [
     {
       label: "Announcements",

amundsen_application/static/config/config.types.ts

@@ -8,31 +8,64 @@ export interface AppConfig {
   browse: BrowseConfig;
   exploreSql: ExploreSqlConfig;
   google: GoogleAnalyticsConfig;
+  lineage: LineageConfig;
   navLinks: Array<LinkConfig>;
 }
 
 export interface AppConfigCustom {
-  google?: GoogleAnalyticsConfig
   browse?: BrowseConfig;
   exploreSql?: ExploreSqlConfig;
+  google?: GoogleAnalyticsConfig
+  lineage?: LineageConfig;
   navLinks?: Array<LinkConfig>;
 }
 
+/**
+ * GoogleAnalyticsConfig - Customize 'gtag' - Google Tag Manager.
+ *
+ * Key - The unique analytics key for your site
+ * Sample Rate - The percentage of users (0 - 100) to track site speed.
+ */
 interface GoogleAnalyticsConfig {
   key: string;
   sampleRate: number;
 }
 
+/**
+ * BrowseConfig - Customize the 'browse' page.
+ *
+ * curatedTags - An array of tags to show in a separate section at the top.
+ * showAllTags - Shows all tags when true, or only curated tags if false
+ */
 interface BrowseConfig {
   curatedTags: Array<string>;
   showAllTags: boolean;
 }
 
+/**
+ * ExploreSqlCongfig - Customize an optional section in the 'table details' page where users can run SQL queries.
+ *
+ * enabled - Whether to show or hide this section
+ * generateUrl - Generates a URL to a third party SQL explorable website.
+ */
 interface ExploreSqlConfig {
   enabled: boolean;
   generateUrl: (database: string, cluster: string, schema: string, table: string, partitionKey?: string, partitionValue?: string) => string;
 }
 
+/**
+ * LineageConfig - Customize an optional section in the 'table details' page where users can see a table's lineage.
+ *
+ * enabled - Whether to show or hide this section
+ * generateUrl - Generate a URL to the third party lineage website
+ * iconPath - Path to an icon image to display next to the lineage URL.
+ */
+interface LineageConfig {
+  enabled: boolean;
+  generateUrl: (database: string, cluster: string, schema: string , table: string) => string;
+  iconPath: string;
+}
+
 interface LinkConfig {
   href: string;
   label: string;

amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss

 @import 'variables';
 
-/* Detail List Item */
-img {
-  height: 24px;
-  min-width: 24px;
-  border: none;
-  background-color: $gray-lighter;
-}
-img.icon-down {
-  -webkit-mask-image: url('/static/images/icons/Down.svg');
-  mask-image: url('/static/images/icons/Down.svg');
-}
-img.icon-up {
-  -webkit-mask-image: url('/static/images/icons/Up.svg');
-  mask-image: url('/static/images/icons/Up.svg');
-}
-.expand-icon {
-  width: 24px;
-  margin: 0 4px;
-}
 .detail-list-item {
   text-decoration: none;
   display: flex;
@@ -28,78 +9,103 @@ img.icon-up {
   border-top-color: $gray-lighter !important;
   border-bottom-color: $gray-lighter !important;
   background-color: transparent !important;
-}
-.detail-list-item .description {
-  color: $gray-light;
-  max-width: 100%;
-  font-size: 14px;
-  min-width: 0;
-  padding-right: 32px;
-}
 
-.truncated,
-.truncated .editable-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  img {
+    height: 24px;
+    min-width: 24px;
+    border: none;
+    background-color: $gray-lighter;
+  }
+  img.icon-down {
+    -webkit-mask-image: url('/static/images/icons/Down.svg');
+    mask-image: url('/static/images/icons/Down.svg');
+  }
+  img.icon-up {
+    -webkit-mask-image: url('/static/images/icons/Up.svg');
+    mask-image: url('/static/images/icons/Up.svg');
+  }
+  .expand-icon {
+    width: 24px;
+    margin: 0 4px;
+  }
 
-.detail-list-item .column-info {
-  display: flex;
-  flex-direction: row;
-  margin: -10px -4px 0;
-  padding: 10px 4px 0;
-}
-.detail-list-item .column-info.expandable {
-  cursor: pointer;
-}
-.column-info.expandable:hover {
-  background-image: linear-gradient($gradient-1, $gradient-1, white);
-}
-.detail-list-item .column-stats {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-top: 10px;
-  width: 100%;
-}
-.detail-list-item .title {
-  display: flex;
-  flex-direction: row;
-}
-.detail-list-item .name {
-  font-size: 16px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-  margin-right: 8px;
-}
-.detail-list-item .type {
-  color: $gradient-3;
-  font-size: 13px;
-  margin-top: 4px;
-  font-family: 'Menlo-Bold', Helvetica, Arial, sans-serif;
-}
+  .description {
+    color: $gray-light;
+    max-width: 100%;
+    font-size: 14px;
+    min-width: 0;
+    padding-right: 32px;
+  }
 
-.column-info.expandable:hover .type {
-  color: $gradient-4;
-}
-.column-info.expandable:hover .expand-icon {
-  background-color: $gradient-4;
-}
+  .truncated,
+  .truncated .editable-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-.column-stat {
-  flex: 1;
-  min-width: 120px;
-  margin-top: 8px;
-  max-width: 20%;
-}
-.column-stat .title {
-  color: $gray-light;
-  font-size: 12px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-}
-.column-stat .content {
-  color: $gradient-4;
-  font-size: 14px;
+  .column-info {
+    display: flex;
+    flex-direction: row;
+    margin: -10px -4px 0;
+    padding: 10px 4px 0;
+
+    &.expandable {
+      cursor: pointer;
+
+      &:hover {
+        background-image: linear-gradient($gradient-1, $gradient-1, white);
+
+        .type {
+          color: $gradient-4;
+        }
+
+        .expand-icon {
+          background-color: $gradient-4;
+        }
+      }
+    }
+  }
+
+  .column-stats {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    width: 100%;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+  }
+  .name {
+    font-size: 16px;
+    font-family: $font-family-sans-serif-bold;
+    font-weight: $font-weight-sans-serif-bold;
+    margin-right: 8px;
+  }
+  .type {
+    color: $gradient-3;
+    font-size: 13px;
+    margin-top: 4px;
+    font-family: 'Menlo-Bold', Helvetica, Arial, sans-serif;
+  }
+
+  .column-stat {
+    flex: 1;
+    min-width: 120px;
+    margin-top: 8px;
+    max-width: 20%;
+
+    .title {
+      color: $gray-light;
+      font-size: 12px;
+      font-family: $font-family-sans-serif-bold;
+      font-weight: $font-weight-sans-serif-bold;
+    }
+    .content {
+      color: $gradient-4;
+      font-size: 14px;
+    }
+  }
 }

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -152,6 +152,16 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
     }
   }
 
+  getAvatarForLineage = () => {
+    const href = AppConfig.lineage.generateUrl(this.database, this.cluster, this.schema, this.tableName);
+    const displayName = `${this.schema}.${this.tableName}`;
+    return (
+      <a href={ href } target='_blank'>
+        <AvatarLabel label={ displayName } src={ AppConfig.lineage.iconPath }/>
+      </a>
+    );
+  };
+
   getExploreSqlUrl = () => {
     const partition = this.state.tableData.partition;
     if (partition.is_partitioned) {
@@ -223,6 +233,11 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
       entityCardSections.push({'title': 'Source Code', 'contentRenderer': sourceRenderer, 'isEditable': false});
     }
 
+    // "Lineage" Section
+    if (AppConfig.lineage.enabled) {
+      entityCardSections.push({'title': 'Table Lineage', 'contentRenderer': this.getAvatarForLineage, 'isEditable': false});
+    }
+
     // "Preview" Section
     const previewSectionRenderer = () => {
       return (

amundsen_application/static/js/components/common/Feedback/styles.scss

@@ -5,67 +5,58 @@
   right: 25px;
   bottom: 75px;
   z-index: 2;
-  -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, .5);
-  -moz-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, .5);
-  box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, .5);
-}
-
-.feedback-component.expanded {
-  background-color: white;
-  padding: 24px;
-  width: 400px;
-  height: auto;
-  min-height: 450px;
-  border: 1px solid $gray-lighter;
-  border-top: 4px solid $brand-primary;
-  border-radius: 0px 0px 5px 5px;
-}
-.feedback-component.collapsed {
-  background-color: $brand-primary;
-  border: 2px solid white;
-  margin: 0px;
-  height: 48px;
-  width: 48px;
-  border-radius: 100px; /* makes it a circle */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor:pointer;
-}
-.feedback-component.collapsed:hover {
-   opacity: 0.5;
-}
-
-.feedback-component .title {
-  color: $gray-light;
-  font-size: 12px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-  height: 24px;
-  line-height: 32px;
-}
-
-.feedback-component img.icon-speech {
-  background-color: $brand-primary;
-  height: 36px;
-  width: 24px;
-}
-
-.feedback-header {
-  margin-bottom: 8px;
-}
-
-.feedback-component .btn-group {
-  margin: 8px auto 16px;
-}
-
-text {
-  vertical-align: inherit;
-}
-
-img {
-  background-color: $gray-light;
-}
-img:hover {
-  background-color: $gray-lighter;
+  -webkit-box-shadow: 0 0 10px -1px rgba(0, 0, 0, .5);
+  -moz-box-shadow: 0 0 10px -1px rgba(0, 0, 0, .5);
+  box-shadow: 0 0 10px -1px rgba(0, 0, 0, .5);
+
+  &.expanded {
+    background-color: white;
+    padding: 24px;
+    width: 400px;
+    height: auto;
+    min-height: 450px;
+    border: 1px solid $gray-lighter;
+    border-top: 4px solid $brand-primary;
+    border-radius: 0 0 5px 5px;
+  }
+
+  &.collapsed {
+    background-color: $brand-primary;
+    border: 2px solid white;
+    margin: 0;
+    height: 48px;
+    width: 48px;
+    border-radius: 100px; /* makes it a circle */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  .title {
+    color: $gray-light;
+    font-size: 12px;
+    font-family: $font-family-sans-serif-bold;
+    font-weight: $font-weight-sans-serif-bold;
+    height: 24px;
+    line-height: 32px;
+  }
+
+  img.icon-speech {
+    background-color: $brand-primary;
+    height: 36px;
+    width: 24px;
+  }
+
+  .feedback-header {
+    margin-bottom: 8px;
+  }
+
+  .btn-group {
+    margin: 8px auto 16px;
+  }
 }

amundsen_application/static/templates/index.html

 <html>
   <head>
-    <!-- todo: Move this part to private once we have a way to put private js code -->
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=<%= htmlWebpackPlugin.options.config.google.key%>"></script>
     <script>