From 8011a1d9d47da6fe18e20ea5a04ca2966aca2ed7 Mon Sep 17 00:00:00 2001
From: Michal Fiedorowicz <mfiedorowicz@netboxlabs.com>
Date: Wed, 18 Sep 2024 10:48:38 +0100
Subject: [PATCH] add ingestion metrics

Signed-off-by: Michal Fiedorowicz <mfiedorowicz@netboxlabs.com>
---
 .../templates/diode/ingestion_logs.html       | 140 ++++++++++++++++--
 1 file changed, 130 insertions(+), 10 deletions(-)

diff --git a/netbox_diode_plugin/templates/diode/ingestion_logs.html b/netbox_diode_plugin/templates/diode/ingestion_logs.html
index 95961fe..ba06ac2 100644
--- a/netbox_diode_plugin/templates/diode/ingestion_logs.html
+++ b/netbox_diode_plugin/templates/diode/ingestion_logs.html
@@ -6,32 +6,152 @@
 
 {% block title %}{% trans "Ingestion Logs" %}{% endblock %}
 
-{% block content %}
+{% block tabs %}
+<ul class="nav nav-tabs px-3">
+    <li class="nav-item" role="presentation">
+        <a class="nav-link active" id="ingestion-logs-tab" data-bs-toggle="tab" data-bs-target="#ingestion-logs" type="button" role="tab">{% trans "Logs" %}</a>
+    </li>
+    <li class="nav-item" role="presentation">
+        <a class="nav-link" id="ingestion-metrics-tab" data-bs-toggle="tab" data-bs-target="#ingestion-metrics" type="button" role="tab">{% trans "Metrics" %}</a>
+    </li>
+</ul>
+{% endblock tabs %}
 
+{% block content %}
 {% if ingestion_logs_disabled %}
 <div class="alert alert-warning mt-3" role="alert">
     <p>⚠️: Ingestion logs are disabled.</p>
 </div>
 {% endif %}
-
 {% if error %}
 <div class="alert alert-danger mt-3" role="alert">
     <h4 class="alert-heading">{% trans "Error" %}</h4>
     <p>{{ error.status_code }}: {{ error.details }}</p>
 </div>
 {% else %}
-<div class="row mb-3">
-    <div class="col col-md-12">
-        <div class="card">
-            <div class="table-responsive">
-                {% render_table ingestion_logs_table 'diode/ingestion_logs_table.html' %}
-                {% if ingestion_logs_table.data %}
-                    {% include 'diode/ingestion_logs_paginator.html' with next_page_token=next_page_token total_count=total_count %}
-                {% endif %}
+<div class="tab-pane show active" id="ingestion-logs" role="tabpanel" aria-labelledby="ingestion-logs-tab">
+    <div class="row mb-3">
+        <div class="col col-md-12">
+            <div class="card">
+                <div class="table-responsive">
+                    {% render_table ingestion_logs_table 'diode/ingestion_logs_table.html' %}
+                    {% if ingestion_logs_table.data %}
+                        {% include 'diode/ingestion_logs_paginator.html' with next_page_token=next_page_token total_count=total_count %}
+                    {% endif %}
+                </div>
             </div>
         </div>
     </div>
 </div>
+<div class="tab-pane show" id="ingestion-metrics" role="tabpanel" aria-labelledby="ingestion-metrics-tab">
+    <div class="row mb-3">
+        <div class="col col-md-12">
+            <div class="card p-3">
+                <div class="row d-flex flex-wrap justify-content-evenly">
+                    <div class="w-auto p-0">
+                        <canvas id="ingestions-new"></canvas>
+                        <div class="text-center metric-label">New</div>
+                    </div>
+                    <div class="w-auto p-0">
+                        <canvas id="ingestions-reconciled"></canvas>
+                        <div class="text-center metric-label">Reconciled</div>
+                    </div>
+                    <div class="w-auto p-0">
+                        <canvas id="ingestions-failed"></canvas>
+                        <div class="text-center metric-label">Failed</div>
+                    </div>
+                    <div class="w-auto p-0">
+                        <canvas id="ingestions-no-changes"></canvas>
+                        <div class="text-center metric-label">No Changes</div>
+                    </div>
+                    <div class="w-auto p-0">
+                        <canvas id="ingestions-total"></canvas>
+                        <div class="text-center metric-label">Total</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript">
+    function drawGauge(ctx, value, color) {
+        const pixelRatio = window.devicePixelRatio || 1;
+        const parentWidth = ctx.canvas.parentElement.querySelector('div.metric-label').clientWidth;
+        const width = parentWidth;
+        const height = width/2;
+
+        // Scale the canvas
+        ctx.canvas.width = width * pixelRatio;
+        ctx.canvas.height = height * pixelRatio;
+        ctx.canvas.style.width = `${width}px`;
+        ctx.canvas.style.height = `${height}px`;
+        ctx.scale(pixelRatio, pixelRatio);
+
+        const startAngle = Math.PI;
+        const endAngle = 2 * Math.PI;
+        const radius = 80;
+        const centerX = width / 2;
+        const centerY = height;
+        const totalIngestions = {{ ingestion_metrics.total }};
+
+        // Clear the canvas
+        ctx.clearRect(0, 0, width, height);
+
+        // Draw the background arc
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius, startAngle, endAngle);
+        ctx.lineWidth = 20;
+        ctx.strokeStyle = '#e0e0e0';
+        ctx.stroke();
+
+        // Draw the foreground arc
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius, startAngle, startAngle + (value / totalIngestions) * Math.PI);
+        ctx.lineWidth = 20;
+        ctx.strokeStyle = color || '#007bff';
+        ctx.stroke();
+
+        // Detect dark mode
+        const body = document.querySelector('body');
+        const isDarkMode = body.hasAttribute('data-bs-theme') && body.getAttribute('data-bs-theme') === 'dark';
+
+        // Draw the text
+        ctx.font = '18px Arial';
+        ctx.fillStyle = isDarkMode ? '#FFF' : '#000';
+        ctx.textAlign = 'center';
+        ctx.fillText(value, centerX, centerY - 10);
+    }
+
+
+    document.addEventListener('DOMContentLoaded', function() {
+        function redrawMetrics() {
+            drawGauge(document.getElementById('ingestions-new').getContext('2d'), {{ ingestion_metrics.new }}, '#FFFF00');
+            drawGauge(document.getElementById('ingestions-reconciled').getContext('2d'), {{ ingestion_metrics.reconciled }}, '#4CAF50');
+            drawGauge(document.getElementById('ingestions-failed').getContext('2d'), {{ ingestion_metrics.failed }}, '#FF0000');
+            drawGauge(document.getElementById('ingestions-no-changes').getContext('2d'), {{ ingestion_metrics.no_changes }}, '#40E0D0');
+            drawGauge(document.getElementById('ingestions-total').getContext('2d'), {{ ingestion_metrics.total }}, '#0D6EFD');
+        }
+
+        // Observe changes to the data-bs-theme attribute on the body tag
+        const body = document.querySelector('body');
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.attributeName === 'data-bs-theme') {
+                    redrawMetrics();
+                }
+            });
+        });
+
+        metricsTab = document.getElementById('ingestion-metrics-tab');
+        metricsTab.addEventListener('click', function() {
+            redrawMetrics()
+            observer.observe(body, { attributes: true });
+        });
+        window.addEventListener('resize', function() {
+            redrawMetrics()
+        });
+    });
+</script>
 {% endif %}
 
 {% endblock content %}