feat(admin): chart to visualize spike detector output

Author: Kl0ven

.pre-commit-config.yaml

@@ -78,6 +78,7 @@ repos:
     hooks:
       - id: codespell
         args: ["-w"]
+        exclude: "static/.*"
 
   - repo: https://github.com/alessandrojcm/commitlint-pre-commit-hook
     rev: v9.0.0

controller/sentry/admin.py

@@ -18,13 +18,14 @@
 from controller.sentry.choices import EventType, MetricType
 from controller.sentry.forms import BumpForm, MetricForm
 from controller.sentry.inlines import AppEventInline, ProjectEventInline
-from controller.sentry.mixins import PrettyTypeMixin, ProjectLinkMixin
+from controller.sentry.mixins import ChartMixin, PrettyTypeMixin, ProjectLinkMixin
 from controller.sentry.models import App, Event, Project
 from controller.sentry.utils import invalidate_cache
 
 
 @admin.register(Project)
 class ProjectAdmin(
+    ChartMixin,
     AdminConfirmMixin,
     ActionFormMixin,
     DjangoObjectActions,
@@ -41,18 +42,76 @@ class ProjectAdmin(
     ordering = search_fields
 
     formfield_overrides = {
-        models.JSONField: {"widget": JSONEditorWidget},
+        models.JSONField: {"widget": JSONEditorWidget(width="100%")},
     }
 
     fieldsets = [
         [
             None,
-            {"fields": ("sentry_id", "sentry_project_slug", "detection_param")},
+            {
+                "fields": (
+                    "sentry_id",
+                    "sentry_project_slug",
+                    ("detection_param", "detection_result"),
+                )
+            },
         ]
     ]
 
     inlines = [ProjectEventInline]
 
+    def get_chart_data(self, sentry_id):
+        project = Project.objects.get(sentry_id=sentry_id)
+        if project.detection_result is None:
+            return None
+
+        threshold = project.detection_param["threshold"]
+
+        options = {
+            "aspectRatio": 4,
+            "scales": {
+                "xAxis": {"type": "timeseries"},
+                "series": {"position": "left"},
+                "signal": {"position": "right"},
+            },
+            "plugins": {"legend": {"position": "bottom"}, "title": {"display": True, "text": "Detection Result"}},
+            "elements": {"line": {"stepped": True}, "point": {"radius": 0}},
+            "interaction": {"mode": "index", "intersect": False},
+        }
+        data = {
+            "datasets": [
+                {
+                    "label": "Series",
+                    "backgroundColor": "#36a2eb",
+                    "borderColor": "#36a2eb",
+                    "data": project.detection_result["series"],
+                    "yAxisID": "series",
+                },
+                {
+                    "label": "Signal",
+                    "backgroundColor": "#ff6384",
+                    "borderColor": "#ff6384",
+                    "data": project.detection_result["signal"],
+                    "yAxisID": "signal",
+                },
+                {
+                    "label": "Threshold",
+                    "backgroundColor": "#9966ff",
+                    "borderColor": "#9966ff",
+                    "data": [
+                        avg_filter + threshold * std_filter
+                        for avg_filter, std_filter in zip(
+                            project.detection_result["avg_filter"],
+                            project.detection_result["std_filter"],
+                        )
+                    ],
+                    "yAxisID": "series",
+                },
+            ],
+            "labels": project.detection_result["intervals"],
+        }
+        return data, options
+
 
 @admin.register(Event)
 class EventAdmin(
@@ -71,7 +130,7 @@ class EventAdmin(
     ordering = search_fields
 
     formfield_overrides = {
-        models.JSONField: {"widget": JSONEditorWidget},
+        models.JSONField: {"widget": JSONEditorWidget(width="100%")},
     }
 
     fieldsets = [
@@ -109,7 +168,7 @@ class AppAdmin(
     ordering = search_fields
 
     formfield_overrides = {
-        models.JSONField: {"widget": JSONEditorWidget},
+        models.JSONField: {"widget": JSONEditorWidget(width="100%")},
     }
 
     fieldsets = [

controller/sentry/detector.py

@@ -56,10 +56,17 @@ def compute_sentry(self, stats):
         if series is None:
             raise ValueError("No series with accepted outcome")
 
-        signal, _, _ = self.compute(series)
+        signal, avg_filter, std_filter = self.compute(series)
 
         annotated_result = OrderedDict((date, signal) for date, signal in zip(stats["intervals"], signal))
-        return annotated_result
+        dump = {
+            "signal": signal,
+            "avg_filter": avg_filter,
+            "std_filter": std_filter,
+            "series": series,
+            "intervals": stats["intervals"],
+        }
+        return annotated_result, dump
 
     def compute(self, data):
         signals = [0] * self.lag

controller/sentry/migrations/0012_project_detection_result.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.1.6 on 2023-02-09 13:24
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("sentry", "0011_alter_event_options_and_more"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="project",
+            name="detection_result",
+            field=models.JSONField(blank=True, null=True),
+        ),
+    ]

controller/sentry/mixins.py

@@ -19,3 +19,22 @@ def get_project(self, obj):
             return None
         url = reverse("admin:%s_%s_change" % (self.model._meta.app_label, "project"), args=(obj.project.pk,))
         return format_html('<a href="%s">%s</a>' % (url, str(obj.project)))
+
+
+class ChartMixin:
+    change_form_template = "admin/chart_change_form.html"
+
+    def change_view(self, request, object_id, form_url="", extra_context=None):
+
+        if extra_context is None:
+            extra_context = {}
+
+        if result := self.get_chart_data(object_id):
+            dataset, options = result
+            extra_context["adminchart_chartjs_config"] = {
+                "type": "line",
+                "data": dataset,
+                "options": options,
+            }
+
+        return super().change_view(request, object_id, form_url, extra_context)

controller/sentry/models.py

@@ -24,6 +24,7 @@ class Project(models.Model):
     sentry_project_slug = models.CharField(max_length=50, db_index=True, null=True, blank=True)
 
     detection_param = models.JSONField(default=partial(settings_default_value, "DEFAULT_SPIKE_DETECTION_PARAM"))
+    detection_result = models.JSONField(blank=True, null=True)
 
     def __str__(self) -> str:
         return f"Project({self.sentry_id} - {self.sentry_project_slug if self.sentry_project_slug else 'Pending'})"

controller/sentry/static/admin/chart/js/adminchart.js

@@ -0,0 +1,23 @@
+if (document.readyState !== 'loading') {
+    init_chart();
+} else {
+    document.addEventListener('DOMContentLoaded', init_chart);
+}
+
+function init_chart() {
+    const configScript = document.getElementById("adminchart-chartjs-config");
+    if (!configScript) return;
+    const chartConfig = JSON.parse(configScript.textContent);
+    if (!chartConfig) return;
+    var container = document.getElementById('admincharts')
+    var canvas = document.createElement("canvas")
+    container.appendChild(canvas)
+    var ctx = canvas.getContext('2d');
+    const style = getComputedStyle(document.documentElement)
+    const fg_color = style.getPropertyValue('--body-fg');
+    const bg_color = style.getPropertyValue('--hairline-color');
+    Chart.defaults.borderColor = bg_color;
+    Chart.defaults.color = fg_color;
+    var chart = new Chart(ctx, chartConfig);
+
+}

controller/sentry/static/admin/chart/js/chart.date.min.js

@@ -87,7 +87,10 @@ def perform_detect(sentry_id) -> None:
 
     stats = client.get_stats(project.sentry_id)
     detector = SpikesDetector.from_project(project)
-    res = detector.compute_sentry(stats)
+    res, dump = detector.compute_sentry(stats)
+
+    project.detection_result = dump
+    project.save()
 
     previous_signal = 0
     events = []