DENG-9703: STMO links lead to appropriate query templates that are populated

src/components/AuthenticatedLink.svelte

@@ -2,11 +2,12 @@
   import tippy from "./tippy";
 
   export let href;
+  export let target = "";
   export let label = null; // a prop for glean click events
   export let type = null; // a prop for glean click events
 </script>
 
-<a {href} data-glean-label={label} data-glean-type={type}><slot /></a>
+<a {href} {target} data-glean-label={label} data-glean-type={type}><slot /></a>
 <a
   class="lock-link"
   href="https://docs.telemetry.mozilla.org/concepts/gaining_access.html"

src/data/gleanSql.js

@@ -13,6 +13,9 @@ WHERE
 -- IMPORTANT: Remove the limit clause when the query is ready.
 LIMIT 10`;
 
+export const getGleanQuerySTMOTemplateUrl = (columnName, table) =>
+  `https://sql.telemetry.mozilla.org/queries/110672/source?p_columnName=${columnName}&p_table=${table}`;
+
 export const getGleanLabeledCounterQuery = (columnName, table) => `
 -- Auto-generated by the Glean Dictionary.
 -- https://docs.telemetry.mozilla.org/cookbooks/accessing_glean_data.html#accessing-glean-data-in-bigquery
@@ -33,6 +36,9 @@ GROUP BY 1, 2
 -- IMPORTANT: Remove the limit clause when the query is ready.
 LIMIT 10`;
 
+export const getGleanLabeledCounterQuerySTMOTemplateUrl = (columnName, table) =>
+  `https://sql.telemetry.mozilla.org/queries/110677/source?p_columnName=${columnName}&p_table=${table}`;
+
 export const getGleanDualLabeledCounterQuery = (columnName, table) => `
 -- Auto-generated by the Glean Dictionary.
 -- https://docs.telemetry.mozilla.org/cookbooks/accessing_glean_data.html#accessing-glean-data-in-bigquery
@@ -55,6 +61,12 @@ WHERE
 -- IMPORTANT: Remove the limit clause when the query is ready.
 LIMIT 10`;
 
+export const getGleanDualLabeledCounterQuerySTMOTemplateUrl = (
+  columnName,
+  table
+) =>
+  `https://sql.telemetry.mozilla.org/queries/110678/source?p_columnName=${columnName}&p_table=${table}`;
+
 export const getGleanLegacyEventQuery = (table, additionalInfo) => `
 -- Auto-generated by the Glean Dictionary.
 -- https://docs.telemetry.mozilla.org/cookbooks/accessing_glean_data.html#event-metrics
@@ -81,6 +93,12 @@ SELECT * FROM events
 -- IMPORTANT: Remove the limit clause when the query is ready.
 LIMIT 10`;
 
+export const getGleanLegacyEventQuerySTMOTemplateUrl = (
+  table,
+  additionalInfo
+) =>
+  `https://sql.telemetry.mozilla.org/queries/110679/source?p_table=${table}&p_eventCategory=${additionalInfo.category}&p_eventName=${additionalInfo.name}`;
+
 export const getGleanEventQuery = (table, additionalInfo) => `
 -- Auto-generated by the Glean Dictionary.
 -- https://docs.telemetry.mozilla.org/cookbooks/accessing_glean_data.html#event-metrics
@@ -110,6 +128,9 @@ ORDER BY event_timestamp DESC
 -- IMPORTANT: Remove the limit clause when the query is ready.
 LIMIT 10`;
 
+export const getGleanEventQuerySTMOTemplateUrl = (table, additionalInfo) =>
+  `https://sql.telemetry.mozilla.org/queries/110680/source?p_table=${table}&p_eventCategory=${additionalInfo.category}&p_eventName=${additionalInfo.name}`;
+
 export const getGleanAutoEventQuery = (table, additionalInfo) => `
 -- Auto-generated by the Glean Dictionary.
 -- https://docs.telemetry.mozilla.org/cookbooks/accessing_glean_data.html#event-metrics
@@ -136,6 +157,9 @@ ORDER BY event_timestamp DESC
 -- IMPORTANT: Remove the limit clause when the query is ready.
 LIMIT 10`;
 
+export const getGleanAutoEventQuerySTMOTemplateUrl = (table, additionalInfo) =>
+  `https://sql.telemetry.mozilla.org/queries/110681/source?p_table=${table}&p_eventCategory=${additionalInfo.category}&p_eventName=${additionalInfo.name}&p_autoEventId=${additionalInfo.auto_event_id}`;
+
 export const getGleanPingQuery = (table) => `
 -- Autogenerated by the Glean Dictionary.
 -- https://mozilla.github.io/glean/book/user/pings/index.html#payload-structure
@@ -151,3 +175,6 @@ WHERE
   DATE(submission_timestamp) = DATE_SUB(CURRENT_DATE(), INTERVAL 1 DAY)
 -- IMPORTANT: Remove the limit clause when the query is ready.
 LIMIT 10`;
+
+export const getGleanPingQuerySTMOTemplateUrl = (table) =>
+  `https://sql.telemetry.mozilla.org/queries/110682/source?p_table=${table}`;

src/pages/MetricDetail.svelte

@@ -48,6 +48,12 @@
     getGleanEventQuery,
     getGleanLegacyEventQuery,
     getGleanAutoEventQuery,
+    getGleanAutoEventQuerySTMOTemplateUrl,
+    getGleanEventQuerySTMOTemplateUrl,
+    getGleanLegacyEventQuerySTMOTemplateUrl,
+    getGleanLabeledCounterQuerySTMOTemplateUrl,
+    getGleanDualLabeledCounterQuerySTMOTemplateUrl,
+    getGleanQuerySTMOTemplateUrl,
   } from "../data/gleanSql";
 
   export let params;
@@ -56,13 +62,12 @@
   let selectedPingVariant;
   let pingData = {};
 
-  const STMO_NEW_QUERY_URL = "https://sql.telemetry.mozilla.org/queries/new";
-
-  function getSampleSQLQueryCode(
+  function getSQLResource(
     metricType,
     table,
     columnName,
-    additionalInfo
+    additionalInfo,
+    isSTMOTemplate
   ) {
     if (metricType === "event") {
       // Although events might come from other pings, we override that and
@@ -72,20 +77,32 @@
       const override = `${tableNameParts[0]}.events_stream`;
       if (tableNameParts[1] === "events") {
         if (additionalInfo.is_auto) {
-          return getGleanAutoEventQuery(override, additionalInfo);
+          return isSTMOTemplate
+            ? getGleanAutoEventQuerySTMOTemplateUrl(override, additionalInfo)
+            : getGleanAutoEventQuery(override, additionalInfo);
         }
-        return getGleanEventQuery(override, additionalInfo);
+        return isSTMOTemplate
+          ? getGleanEventQuerySTMOTemplateUrl(override, additionalInfo)
+          : getGleanEventQuery(override, additionalInfo);
       }
-      return getGleanLegacyEventQuery(table, additionalInfo);
+      return isSTMOTemplate
+        ? getGleanLegacyEventQuerySTMOTemplateUrl(table, additionalInfo)
+        : getGleanLegacyEventQuery(table, additionalInfo);
     }
     if (metricType === "labeled_counter") {
-      return getGleanLabeledCounterQuery(columnName, table);
+      return isSTMOTemplate
+        ? getGleanLabeledCounterQuerySTMOTemplateUrl(columnName, table)
+        : getGleanLabeledCounterQuery(columnName, table);
     }
     if (metricType === "dual_labeled_counter") {
-      return getGleanDualLabeledCounterQuery(columnName, table);
+      return isSTMOTemplate
+        ? getGleanDualLabeledCounterQuerySTMOTemplateUrl(columnName, table)
+        : getGleanDualLabeledCounterQuery(columnName, table);
     }
 
-    return getGleanQuery(columnName, table);
+    return isSTMOTemplate
+      ? getGleanQuerySTMOTemplateUrl(columnName, table)
+      : getGleanQuery(columnName, table);
   }
 
   const metricDataPromise = getMetricData(params.app, params.metric).then(
@@ -587,7 +604,13 @@
           <div>
             Start a query in
             <AuthenticatedLink
-              href={STMO_NEW_QUERY_URL}
+              href={getSQLResource(
+                metric.type,
+                pingData.bigquery_table,
+                selectedAppVariant.etl.bigquery_column_name,
+                metric.event_info,
+                true
+              )}
               target="_blank"
               label="STMO"
               type="MetricDetail.Access.STMO.NewQueryURL"
@@ -597,11 +620,12 @@
           <SqlModal
             openModalText="Generate SQL"
             type="MetricDetail.Access.STMO.GenerateSQL"
-            sqlContent={getSampleSQLQueryCode(
+            sqlContent={getSQLResource(
               metric.type,
               pingData.bigquery_table,
               selectedAppVariant.etl.bigquery_column_name,
-              metric.event_info
+              metric.event_info,
+              false
             )}
           />
         </td>

src/pages/PingDetail.svelte

@@ -32,7 +32,10 @@
   import { getMetricSearchURL } from "../state/urls";
   import { isRemoved, isRecent } from "../state/items";
   import { getAppBreadcrumbs } from "./AppDetail.svelte";
-  import { getGleanPingQuery } from "../data/gleanSql";
+  import {
+    getGleanPingQuery,
+    getGleanPingQuerySTMOTemplateUrl,
+  } from "../data/gleanSql";
 
   export let params;
 
@@ -200,26 +203,30 @@
           </td>
         </tr>
       {/if}
-      <td>
-        STMO
-        <HelpHoverable
-          content={"Query this metric in Mozilla's instance of Redash."}
-          link={"https://docs.telemetry.mozilla.org/tools/stmo.html"}
-        />
-      </td>
-      <td class="stmo">
-        <div>
-          Start a query in
-          <AuthenticatedLink
-            href="https://sql.telemetry.mozilla.org/queries/new"
-            target="_blank">STMO</AuthenticatedLink
-          > with the following SQL ➡ &nbsp;
-        </div>
-        <SqlModal
-          openModalText="Generate SQL"
-          sqlContent={getGleanPingQuery(selectedAppVariant.table)}
-        />
-      </td>
+      <tr>
+        <td>
+          STMO
+          <HelpHoverable
+            content={"Query this metric in Mozilla's instance of Redash."}
+            link={"https://docs.telemetry.mozilla.org/tools/stmo.html"}
+          />
+        </td>
+        <td class="stmo">
+          <div>
+            Explore this ping in
+            <AuthenticatedLink
+              href={getGleanPingQuerySTMOTemplateUrl(selectedAppVariant.table)}
+              target="_blank">STMO</AuthenticatedLink
+            > or use the following SQL ➡ &nbsp;
+          </div>
+          <div>
+            <SqlModal
+              openModalText="Generate SQL"
+              sqlContent={getGleanPingQuery(selectedAppVariant.table)}
+            />
+          </div>
+        </td>
+      </tr>
     </table>
   {/if}