Add metric "labels" to metric detail (#669)

To do this, rename "labels" to "tags" -- we already use "labels" to
mean something else (in labeled counter metrics)

scripts/build-glean-metadata.py

@@ -219,7 +219,7 @@ def get_app_variant_description(app):
                     "expires": metric.definition["expires"],
                 }
                 if annotation and annotation.get("labels"):
-                    base_definition.update({"labels": annotation["labels"]})
+                    base_definition.update({"tags": annotation["labels"]})
                 if metric.definition["origin"] != app_name:
                     base_definition.update({"origin": metric.definition["origin"]})
 
@@ -235,11 +235,8 @@ def get_app_variant_description(app):
                 app_metrics[metric.identifier] = dict(
                     metric.definition,
                     name=metric.identifier,
-                    annotation=(
-                        annotations_index.get(metric.definition["origin"], {})
-                        .get("metrics", {})
-                        .get(metric.identifier)
-                    ),
+                    tags=annotation.get("labels") if annotation else [],
+                    commentary=annotation.get("content") if annotation else None,
                     # convert send_in_pings to a list so we can sort (see below)
                     send_in_pings=list(metric.definition["send_in_pings"]),
                     repo_url=app.app["url"],
@@ -450,20 +447,18 @@ def get_app_variant_description(app):
             )
         )
 
-    # write labels (if any)
-    labels = [
+    # write tags (if any)
+    tags = [
         {"name": k, "description": v}
         for (k, v) in annotations_index.get(app.app_name, {}).get("labels", {}).items()
     ]
-    if labels:
-        app_data["labels"] = labels
-        for label in labels:
-            label_metrics = [
-                metric
-                for metric in app_data["metrics"]
-                if label["name"] in metric.get("labels", [])
+    if tags:
+        app_data["tags"] = tags
+        for tag in tags:
+            tag_metrics = [
+                metric for metric in app_data["metrics"] if tag["name"] in metric.get("tags", [])
             ]
-            label["metric_count"] = len(label_metrics)
+            tag["metric_count"] = len(tag_metrics)
 
     # sort the information in the app-level summary, then write it out
     # (we don't sort application id information, that's already handled

src/components/Commentary.svelte

@@ -11,8 +11,8 @@
       : `${item.origin}/${itemType}s/${item.name}/README.md`;
 </script>
 
-{#if item.annotation}
-  <Markdown text={item.annotation.content} inline={false} />
+{#if item.commentary}
+  <Markdown text={item.commentary} inline={false} />
   <p>
     <a
       href={`https://github.com/mozilla/glean-annotations/edit/main/annotations/${annotationPath}`}

src/components/ItemList.svelte

@@ -28,22 +28,21 @@
   $: {
     const search = ($pageState.search || "").toLowerCase();
 
-    // filter on match either on name, origin, or label
+    // filter on match either on name, origin, or tag
     // in all cases a partial match is ok and we'll do a case insensitive
     // match
 
     const originMatch = (item) =>
       item.origin && item.origin.toLowerCase().includes(search);
 
-    const labelMatch = (item) =>
-      item.labels &&
-      item.labels.some((label) => label.toLowerCase().includes(search));
+    const tagMatch = (item) =>
+      item.tags && item.tags.some((tag) => tag.toLowerCase().includes(search));
 
     filteredItems = items.filter(
       (item) =>
         item.name.toLowerCase().includes(search) ||
         originMatch(item) ||
-        labelMatch(item)
+        tagMatch(item)
     );
 
     // also filter out expired items (if we're not showing expired)
@@ -96,17 +95,17 @@
       <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity -->
       <col width="35%" />
       <col
-        width={itemType === "metrics" || itemType === "labels" ? "20%" : "65%"}
+        width={itemType === "metrics" || itemType === "tags" ? "20%" : "65%"}
       />
       <col
-        width={itemType === "metrics" || itemType === "labels" ? "45%" : "0"}
+        width={itemType === "metrics" || itemType === "tags" ? "45%" : "0"}
       />
       <thead>
         <tr>
           <th scope="col" style="text-align: center;">Name</th>
           {#if itemType === "metrics"}
             <th scope="col" style="text-align: center;">Type</th>
-          {:else if itemType === "labels"}
+          {:else if itemType === "tags"}
             <th scope="col" style="text-align: center;">Metric Count</th>
           {/if}
           <th scope="col" style="text-align: center;">Description</th>
@@ -135,13 +134,9 @@
                     clickable
                   />
                 {/if}
-                {#if item.labels}
-                  {#each item.labels as label}
-                    <Label
-                      text={label}
-                      clickable
-                      on:click={updateSearch(label)}
-                    />
+                {#if item.tags}
+                  {#each item.tags as tag}
+                    <Label text={tag} clickable on:click={updateSearch(tag)} />
                   {/each}
                 {/if}
                 {#if isExpired(item.expires)}
@@ -156,7 +151,7 @@
               <td style="text-align: center;">
                 <div class="item-property"><code>{item.type}</code></div>
               </td>
-            {:else if itemType === "labels"}
+            {:else if itemType === "tags"}
               <td style="text-align: center;">
                 <div class="item-property">
                   {item.metric_count}

src/pages/AppDetail.svelte

@@ -74,13 +74,13 @@
   >
     <Tab key="metrics">Metrics</Tab>
     <Tab key="pings">Pings</Tab>
-    {#if app.labels && app.labels.length}
-      <Tab key="labels">Features</Tab>
+    {#if app.tags && app.tags.length}
+      <Tab key="tags">Features</Tab>
     {/if}
     <Tab key="app_ids">Application IDs</Tab>
 
-    <TabContent key="labels">
-      <ItemList itemType="labels" items={app.labels} appName={app.app_name} />
+    <TabContent key="tags">
+      <ItemList itemType="tags" items={app.tags} appName={app.app_name} />
     </TabContent>
 
     <TabContent key="pings">

src/pages/MetricDetail.svelte

@@ -5,6 +5,7 @@
   import VariantSelector from "../components/VariantSelector.svelte";
   import AuthenticatedLink from "../components/AuthenticatedLink.svelte";
   import Commentary from "../components/Commentary.svelte";
+  import Label from "../components/Label.svelte";
   import Markdown from "../components/Markdown.svelte";
   import NotFound from "../components/NotFound.svelte";
   import HelpHoverable from "../components/HelpHoverable.svelte";
@@ -65,6 +66,10 @@
 
     return `${sourceDocs}${links[type]}` || sourceDocs;
   }
+
+  function getMetricSearchURL(search) {
+    return `/apps/${params.app}?search=${search}`;
+  }
 </script>
 
 {#await metricDataPromise then metric}
@@ -83,6 +88,18 @@
   {/if}
 
   <PageTitle text={metric.name} />
+  {#if metric.origin !== params.app || metric.tags.length}
+    <div class="tags-container">
+      {#if metric.origin !== params.app}
+        <a href={getMetricSearchURL(metric.origin)}
+          ><Label text={metric.origin} /></a
+        >
+      {/if}
+      {#each metric.tags as tag}
+        <a href={getMetricSearchURL(tag)}><Label text={tag} /></a>
+      {/each}
+    </div>
+  {/if}
 
   <Markdown text={metric.description} inline={false} />
 
@@ -260,6 +277,13 @@
     @include text-title-xs;
   }
 
+  .tags-container {
+    margin-top: -12px;
+    padding-bottom: 16px;
+    a {
+      padding-right: 4px;
+    }
+  }
   .access-selectors {
     display: grid;
     grid-template-columns: min-content min-content;

src/state/urls.js

@@ -6,6 +6,9 @@ function getResourceName(name) {
 }
 
 export function getItemURL(appName, itemType, itemName) {
+  if (itemType === "tags") {
+    return `/apps/${appName}?itemType=metrics&search=${itemName}`;
+  }
   return `/apps/${appName}/${itemType}/${getResourceName(itemName)}`;
 }