From 32f6cf9619165132f0f56e2ea6e9cd53c11f5e1e Mon Sep 17 00:00:00 2001
From: Linh <linh@LNs-MacBook-Pro.local>
Date: Thu, 31 Aug 2023 13:50:09 +0200
Subject: [PATCH] Link to metrics in Data Catalog

---
 src/pages/MetricDetail.svelte | 25 ++++++++++++++++++++++++-
 src/state/urls.js             |  8 ++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/pages/MetricDetail.svelte b/src/pages/MetricDetail.svelte
index dc4df0b13..f7302b2fc 100644
--- a/src/pages/MetricDetail.svelte
+++ b/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
diff --git a/src/state/urls.js b/src/state/urls.js
index 0ab576284..235abb2a1 100644
--- a/src/state/urls.js
+++ b/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}`;
+}