Skip to content

Commit

Permalink
add ingestion metrics
Browse files Browse the repository at this point in the history 
Signed-off-by: Michal Fiedorowicz <[email protected]>
  • Loading branch information
@mfiedorowicz
mfiedorowicz committed Sep 18, 2024
1 parent 88156fa commit 8011a1d
Showing 1 changed file with 130 additions and 10 deletions.
140 changes: 130 additions & 10 deletions netbox_diode_plugin/templates/diode/ingestion_logs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

0 comments on commit 8011a1d

Please sign in to comment.