feat(nimbus): Add basic feature tracking table to feature health page.

Author: b4handjr

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

@@ -331,6 +331,66 @@ <h5 class="fw-semibold">
             </div>
           </div>
         </div>
+        <hr>
+        <h5 class="fw-semibold">
+          <img src="{% static 'assets/qa-runs.svg' %}"
+            <img src="{% static 'assets/feature-changes.svg' %}"
+                 alt="Hugging Foxes"
+                 style="width: 60px;
+                        height: auto" />
+            Feature Changes
+            <i class="fa-regular fa-circle-question"
+               data-bs-toggle="tooltip"
+               data-bs-placement="top"
+               data-bs-title="This shows any changes made to the Nimbus feature manifest such as code changes for the feature you have chosen"></i>
+            |
+            <span class="badge bg-secondary">Number of changes: {{ feature_changes.count|default:"0" }}</span>
+          </h5>
+          <div>
+            <div id="feature-changes-table">
+              <table class="table table-hover table-borderless align-middle mb-3">
+                <thead>
+                  <tr>
+                    <th scope="col" class="fw-semibold text-body">
+                      <span>Feature Change</span>
+                    </th>
+                    <th scope="col" class="fw-semibold text-body">
+                      <span>Date / Time</span>
+                    </th>
+                    <th scope="col" class="fw-semibold text-body">
+                      <span>Change Size</span>
+                    </th>
+                    <th scope="col" class="fw-semibold text-body">
+                      <span>Change Diff</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for change in feature_changes %}
+                    <tr scope="row">
+                      <td id="feature-change-link">
+                        {% if change.change_link %}
+                          <a href="{{ change.change_link }}"
+                             target="_blank"
+                             class="text-decoration-none">{{ change.change_link|truncatechars:50 }}</a>
+                        {% else %}
+                          <span class="text-danger">Not set</span>
+                        {% endif %}
+                      </td>
+                      <td id="feature-change-date">{{ change.change_date|date:"m/d/Y @ H:i"|format_not_set }}</td>
+                      <td id="feature-change-size">{{ change.change_size|format_not_set }}</td>
+                      <td id="feature-change-complexity">{{ change.softvision_complexity|format_not_set }}</td>
+                    </tr>
+                  {% empty %}
+                    <tr>
+                      <td colspan="11" class="text-center text-muted py-5">No Tracked Feature Changes</td>
+                    </tr>
+                  </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
     </div>
   </div>

experimenter/experimenter/nimbus_ui/tests/test_views.py

@@ -3576,14 +3576,18 @@ def test_features_view_renders_table_with_correct_elements(
         )
 
         feature_id = self.feature_configs[feature_config].id
-        url = reverse("nimbus-ui-features")
         response = self.client.get(
-            f"{url}?application={application.value}&feature_configs={feature_id}"
+            reverse("nimbus-ui-features"),
+            {
+                "application": application.value,
+                "feature_configs": feature_id,
+            },
         )
 
         self.assertEqual(response.status_code, 200)
         self.assertContains(response, "deliveries-table")
         self.assertContains(response, "qa-info-table")
+        self.assertContains(response, "feature-changes-table")
         self.assertContains(response, experiment)
 
     def test_features_view_deliveries_table_can_sort_by_recipe_name(self):