feat(nimbus): Iframe monitoring dashboard (#15344)

Because

- We want to include the feature monitoring dashboard (Grafana) on
experimenter feature page, but before doing that I want to test the
authworkflow, so adding it as a new url to test the iframe

This commit

- Adds the new url for the dashbaord, later will remove the url and
include it self in a feature page

Fixes #15342

---------

Co-authored-by: Yashika Khurana <yashikakhurana@Yashikas-MacBook-Pro.local>

Author: yashikakhurana

experimenter/experimenter/experiments/models.py

@@ -2591,6 +2591,13 @@ class Meta:
     def __str__(self):  # pragma: no cover
         return f"{self.name} ({self.application})"
 
+    @property
+    def feature_monitoring_url(self):
+        application = (self.application or "").replace("-", "_")
+        return settings.FEATURE_MONITORING_URL.format(
+            slug=self.slug, application=application
+        )
+
     def schemas_between_versions(
         self,
         min_version: packaging.version.Version,

experimenter/experimenter/experiments/tests/test_models.py

@@ -5775,6 +5775,18 @@ def test_clone_screenshot_with_missing_image_skips(self):
 
 
 class NimbusFeatureConfigTests(TestCase):
+    def test_feature_monitoring_url(self):
+        feature = NimbusFeatureConfigFactory.create(
+            slug="my-feature",
+            application=NimbusExperiment.Application.DESKTOP,
+        )
+        self.assertEqual(
+            feature.feature_monitoring_url,
+            settings.FEATURE_MONITORING_URL.format(
+                slug="my-feature", application="firefox_desktop"
+            ),
+        )
+
     def test_schemas_between_versions(self):
         feature = NimbusFeatureConfigFactory.create()
 

experimenter/experimenter/nimbus_ui/constants.py

@@ -172,6 +172,9 @@ class NimbusUIConstants:
         "All statistically significant changes that have occurred in the experiment"
     )
     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_PAGE_LINKS = {
         "feature_learn_more_url": "https://experimenter.info/getting-started/for-experiment-owners",
         "deliveries_table_tooltip": """This shows all Nimbus experiments, rollouts, Labs

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/feature_monitoring.html

@@ -0,0 +1,42 @@
+{% extends "experimenter_base.html" %}
+
+{% load static %}
+
+{% block content %}
+  <div class="bg-body-tertiary py-4">
+    <div class="container">
+      <div class="mb-3 d-flex align-items-center justify-content-between">
+        <div>
+          <h4 class="fw-semibold mb-1">
+            <i class="fa-solid fa-chart-line me-2"></i>
+            Feature Monitoring — {{ feature_config.name }}
+          </h4>
+          <p class="text-muted mb-0 small">{{ feature_config.application }}</p>
+        </div>
+        <div class="d-flex gap-2">
+          <a href="{% url 'nimbus-ui-features' %}?application={{ feature_config.application }}&feature_configs={{ feature_config.pk }}"
+             class="btn btn-outline-secondary btn-sm">
+            <i class="fa-solid fa-arrow-left me-1"></i>
+            Back to Feature Page
+          </a>
+          <a href="{{ feature_config.feature_monitoring_url }}"
+             target="_blank"
+             rel="noopener noreferrer"
+             class="btn btn-outline-primary btn-sm">
+            <i class="fa-solid fa-arrow-up-right-from-square me-1"></i>
+            Open in Grafana
+          </a>
+        </div>
+      </div>
+      <div class="card shadow-sm border-0 rounded-3">
+        <div class="card-body p-0">
+          <iframe src="{{ feature_config.feature_monitoring_url }}&kiosk"
+                  width="100%"
+                  height="800"
+                  frameborder="0"
+                  title="Feature Monitoring Dashboard"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}

experimenter/experimenter/nimbus_ui/urls.py

@@ -33,6 +33,7 @@
     NimbusExperimentsListTableView,
     NimbusExperimentsPromoteToRolloutView,
     NimbusExperimentsSidebarCloneView,
+    NimbusFeatureMonitoringView,
     NimbusFeaturesView,
     NimbusRolloutDetailView,
     OverviewUpdateView,
@@ -70,6 +71,11 @@
         NimbusFeaturesView.as_view(),
         name="nimbus-ui-features",
     ),
+    re_path(
+        r"^feature-monitoring/(?P<pk>\d+)/$",
+        NimbusFeatureMonitoringView.as_view(),
+        name="nimbus-ui-feature-monitoring",
+    ),
     re_path(
         r"^tags/manage/$",
         TagsManageView.as_view(),

experimenter/experimenter/nimbus_ui/views.py

@@ -1129,6 +1129,12 @@ def get_context_data(self, **kwargs):
         return context
 
 
+class NimbusFeatureMonitoringView(DetailView):
+    template_name = "nimbus_experiments/feature_monitoring.html"
+    model = NimbusFeatureConfig
+    context_object_name = "feature_config"
+
+
 class NimbusExperimentsHomeView(FilterView):
     template_name = "nimbus_experiments/home.html"
     filterset_class = NimbusExperimentsHomeFilter

experimenter/experimenter/settings.py

@@ -436,6 +436,10 @@
     "https://mozilla.cloud.looker.com/dashboards/operational_monitoring::{slug}"
 )
 ROLLOUT_MONITORING_EXPIRATION_DAYS = 90
+FEATURE_MONITORING_URL = (
+    "https://yardstick.mozilla.org/d/dtfz7xv/nimbus-feature-monitoring"
+    "?orgId=1&var-feature_slug={slug}&var-application={application}"
+)
 
 # Statsd via Markus
 STATSD_BACKEND = config(