feat(nimbus): improve feature monitoring card messaging and links (#16065)

Because

- The metric-hub config and feature monitoring doc links in the Feature
Monitoring card rendered empty, because the features view rebuilt its
context without `EXTERNAL_URLS`.
- When no dashboard is available, users had no way to see what feature
monitoring actually looks like.
- When a dashboard is available, there was no context explaining what it
shows.

This commit

- Adds `EXTERNAL_URLS` to the features view context so the doc and
metric-hub config links resolve.
- Shows a short info line describing the dashboard when monitoring is
available.
- Adds an example dashboard link when monitoring is not available, so
users can preview what they'll get after adding a featmon config.

fixes #16064

Co-authored-by: Yashika Khurana <yashikakhurana@Yashikas-MBP.home.local>

Author: yashikakhurana

experimenter/experimenter/experiments/constants.py

@@ -1247,6 +1247,7 @@ class FunnelTextColor(models.TextChoices):
     "PREVIEW_LAUNCH_DOC": "https://experimenter.info/platform-guides/desktop/preview",
     "FEATURE_MONITORING_DOC": "https://experimenter.info/feature-monitoring",
     "METRIC_HUB_FEATMON_CONFIG": "https://github.com/mozilla/metric-hub/blob/main/featmon/firefox_desktop.toml",
+    "FEATURE_MONITORING_EXAMPLE": "https://yardstick.mozilla.org/d/dtfz7xv/nimbus-feature-monitoring?orgId=1&var-feature_slug=newtabSponsoredContent&var-application=firefox_desktop&var-metric=All",
 }
 
 

experimenter/experimenter/nimbus_ui/constants.py

@@ -221,6 +221,12 @@ class NimbusUIConstants:
     NOTABLE_CHANGES_ABSENT_TEXT = "There are no notable changes in this experiment"
     FEATURE_MONITORING_CARD_TITLE = "Feature Monitoring"
     FEATURE_MONITORING_OPEN_DASHBOARD_TEXT = "Open in Grafana"
+    FEATURE_MONITORING_DASHBOARD_INFO = (
+        "This dashboard shows aggregate health and enrollment metrics for this "
+        "feature across all live and completed rollouts."
+    )
+    FEATURE_MONITORING_EXAMPLE_TEXT = "Once configured, you'll get a dashboard like"
+    FEATURE_MONITORING_EXAMPLE_LINK_TEXT = "this example"
 
     FEATURE_PAGE_LINKS = {
         "feature_learn_more_url": "https://experimenter.info/getting-started/for-experiment-owners",

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/features.html

@@ -72,6 +72,7 @@ <h5 class="fw-semibold mb-0 d-flex align-items-center">
             </a>
           </div>
           {% if selected_feature_config.has_metric_hub_monitoring %}
+            <p class="text-muted small mb-2">{{ NimbusUIConstants.FEATURE_MONITORING_DASHBOARD_INFO }}</p>
             <div class="d-flex align-items-center gap-2 mb-3">
               <a href="{{ selected_feature_config.feature_monitoring_url }}"
                  target="_blank"
@@ -97,6 +98,13 @@ <h5 class="fw-semibold mb-0 d-flex align-items-center">
                    target="_blank"
                    rel="noopener noreferrer">feature monitoring docs</a>
                 for instructions.
+                <hr class="my-2">
+                <span class="small">
+                  {{ NimbusUIConstants.FEATURE_MONITORING_EXAMPLE_TEXT }}
+                  <a href="{{ EXTERNAL_URLS.FEATURE_MONITORING_EXAMPLE }}"
+                     target="_blank"
+                     rel="noopener noreferrer">{{ NimbusUIConstants.FEATURE_MONITORING_EXAMPLE_LINK_TEXT }}</a>.
+                </span>
               </div>
             </div>
           {% endif %}

experimenter/experimenter/nimbus_ui/tests/test_views.py

@@ -8,6 +8,7 @@
 from django.core.files.uploadedfile import SimpleUploadedFile
 from django.test import TestCase, override_settings
 from django.urls import reverse
+from django.utils.html import escape
 from parameterized import parameterized
 from PIL import Image
 
@@ -16,7 +17,7 @@
     LanguageFactory,
     LocaleFactory,
 )
-from experimenter.experiments.constants import NimbusConstants
+from experimenter.experiments.constants import EXTERNAL_URLS, NimbusConstants
 from experimenter.experiments.models import (
     NimbusExperiment,
     NimbusExperimentBranchThroughExcluded,
@@ -5707,6 +5708,40 @@ def test_qa_runs_table_shows_experiments_with_testrail_urls_when_qa_status_not_s
         self.assertNotIn(experiment_without_urls, qa_runs)
         self.assertIn(experiment_with_status, qa_runs)
 
+    def _features_url_for(self, slug):
+        feature = self.feature_configs[slug]
+        url = reverse("nimbus-ui-features")
+        return f"{url}?application={feature.application}&feature_configs={feature.pk}"
+
+    @patch("experimenter.jetstream.client.get_featmon_slugs")
+    def test_monitoring_card_shows_dashboard_and_info_when_monitored(self, mock_slugs):
+        mock_slugs.return_value = frozenset({"feature-desktop"})
+
+        response = self.client.get(self._features_url_for("feature-desktop"))
+
+        self.assertEqual(response.status_code, 200)
+        content = response.content.decode()
+        self.assertIn("Open Grafana Dashboard", content)
+        self.assertIn(NimbusUIConstants.FEATURE_MONITORING_DASHBOARD_INFO, content)
+        self.assertIn(
+            escape(self.feature_configs["feature-desktop"].feature_monitoring_url),
+            content,
+        )
+
+    @patch("experimenter.jetstream.client.get_featmon_slugs")
+    def test_monitoring_card_shows_docs_and_example_when_not_monitored(self, mock_slugs):
+        mock_slugs.return_value = frozenset()
+
+        response = self.client.get(self._features_url_for("feature-desktop"))
+
+        self.assertEqual(response.status_code, 200)
+        content = response.content.decode()
+        self.assertIn("Grafana dashboard not available", content)
+        self.assertIn(EXTERNAL_URLS["FEATURE_MONITORING_DOC"], content)
+        self.assertIn(EXTERNAL_URLS["METRIC_HUB_FEATMON_CONFIG"], content)
+        self.assertIn(escape(EXTERNAL_URLS["FEATURE_MONITORING_EXAMPLE"]), content)
+        self.assertIn(escape(NimbusUIConstants.FEATURE_MONITORING_EXAMPLE_TEXT), content)
+
 
 class TestTagsManageView(AuthTestCase):
     def test_tags_manage_view_renders(self):

experimenter/experimenter/nimbus_ui/views.py

@@ -1108,6 +1108,7 @@ def get_context_data(self, **kwargs):
 
         context = {
             "form": form,
+            "EXTERNAL_URLS": EXTERNAL_URLS,
             "application": self.request.GET.get("application"),
             "feature_configs": self.request.GET.get("feature_configs"),
             "selected_feature_config": selected_feature_config,