Link to metrics in Data Catalog

Author: Linh

src/pages/MetricDetail.svelte

@@ -32,7 +32,11 @@
     updateURLState,
     updateBreadcrumbs,
   } from "../state/stores";
-  import { getBigQueryURL, getMetricSearchURL } from "../state/urls";
+  import {
+    getBigQueryURL,
+    getDataCatalogMetricURL,
+    getMetricSearchURL,
+  } from "../state/urls";
   import { getAppBreadcrumbs } from "./AppDetail.svelte";
 
   import { isExpired, isRemoved, isRecent } from "../state/items";
@@ -528,6 +532,25 @@
           </div>
         </td>
       </tr>
+      <tr>
+        <td>
+          Data Catalog
+          <HelpHoverable
+            content={"View this metric in Mozilla's instance of DataHub"}
+          />
+        </td>
+        <td>
+          <AuthenticatedLink
+            href={getDataCatalogMetricURL(
+              selectedAppVariant.id,
+              selectedPingVariant.id,
+              selectedAppVariant.etl.bigquery_column_name
+            )}
+          >
+            {selectedAppVariant.etl.bigquery_column_name}
+          </AuthenticatedLink>
+        </td>
+      </tr>
       <tr>
         <td>
           STMO

src/state/urls.js

@@ -23,3 +23,11 @@ export function getBigQueryURL(appName, appId, pingName, metricName) {
 export function getMetricSearchURL(app, search) {
   return `/apps/${app}?search=${search}`;
 }
+
+export function getDataCatalogMetricURL(appId, pingId, bigQueryColumn) {
+  const DATA_CATALOG_URL = "https://mozilla.acryl.io";
+  return `${DATA_CATALOG_URL}/dataset/urn:li:dataset:(urn:li:dataPlatform:bigquery,moz-fx-data-shared-prod.${appId.replace(
+    /\./g,
+    "_"
+  )}.${pingId},PROD)/Lineage?column=${bigQueryColumn}`;
+}