feat: show load factor on pipeline dashboard

Signed-off-by: Keshav Priyadarshi <git@keshav.space>

Author: keshav-space

vulnerabilities/templates/pipeline_dashboard.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
+{% load utils %}
+
 {% block title %}
 Pipeline Dashboard
 {% endblock %}
@@ -22,6 +24,18 @@
     .column {
         word-break: break-word;
     }
+
+    .has-text-orange {
+        color: #ff8c42 !important;
+    }
+
+    .has-tooltip-orange::before {
+        background-color: #ff8c42 !important;
+    }
+
+    .has-tooltip-orange::after {
+        border-top-color: #ff8c42 !important;
+    }
 </style>
 {% endblock %}
 
@@ -48,11 +62,63 @@ <h1>Pipeline Dashboard</h1>
         </form>
 
         <div class="box">
-            <div class="column has-text-right">
-                <p class="has-text-weight-semibold">
-                    {{ active_pipeline_count|default:0 }} active pipeline{{ active_pipeline_count|default:0|pluralize }},
-                    {{ disabled_pipeline_count|default:0 }} disabled pipeline{{ disabled_pipeline_count|default:0|pluralize }}
-                </p>
+            <div class="columns is-multiline is-vcentered mb-0">
+                <div class="column is-half has-text-left">
+                    {% if load_per_queue %}
+                    <p class="ml-3">
+                        <span class="has-text-weight-bold has-text-black is-size-6 has-tooltip-arrow has-tooltip-multiline"
+                            data-tooltip="Load factor is the ratio of the total compute required to run all active pipelines
+                                in a queue to the available worker capacity for that queue over a 24-hour period.
+                                A value greater than 1 indicates that the number of workers is insufficient to
+                                run all pipelines within the schedule.">
+                            Load Factor:
+                        </span>
+                        {% for queue_name, values in load_per_queue.items %}
+
+                            <span class="has-text-weight-bold is-size-6 has-tooltip-arrow has-tooltip-multiline"
+                                data-tooltip="{{ queue_name|capfirst }} priority pipeline queue.">
+                                {{ queue_name| capfirst }}
+                            </span>
+                            {% with load_factor=values|get_item:"load_factor" additional=values|get_item:"additional_worker" %}
+                                {% if load_factor == "no_worker" %}
+                                    <span class="has-text-weight-bold is-size-6 has-text-danger has-tooltip-arrow has-tooltip-multiline has-tooltip-danger"
+                                            data-tooltip="All workers in the {{ queue_name }} queue are down. Please run {{ additional }}
+                                            worker{{ additional|pluralize }} for the {{ queue_name }} queue.">
+                                        <span class="icon"><i class="fa fa-exclamation-triangle"></i></span>
+                                    </span>
+                                {% elif load_factor < 1 %}
+                                    <span class="has-text-weight-bold is-size-6 has-text-success has-tooltip-arrow has-tooltip-multiline has-tooltip-success"
+                                            data-tooltip="{{ queue_name|capfirst }} queue perfectly balanced.">
+                                        {{ load_factor|floatformat:2 }}
+                                        <span class="icon"><i class="fa fa-check-circle"></i></span>
+                                    </span>
+                                {% elif load_factor < 1.6 %}
+                                    <span class="has-text-weight-bold is-size-6 has-text-orange has-tooltip-arrow has-tooltip-multiline has-tooltip-orange"
+                                    data-tooltip="Consider adding {{ additional }} additional worker{{ additional|pluralize }} to the {{ queue_name }} queue.">
+                                        {{ load_factor|floatformat:2 }}
+                                        <span class="icon"><i class="fa fa-info-circle"></i></span>
+                                    </span>
+                                {% else %}
+                                    <span class="has-text-weight-bold is-size-6 has-text-danger has-tooltip-arrow has-tooltip-multiline has-tooltip-danger"
+                                            data-tooltip="Consider adding {{ additional }} additional worker{{ additional|pluralize }} to the {{ queue_name }} queue.">
+                                        {{ load_factor|floatformat:2 }}
+                                        <span class="icon"><i class="fa fa-exclamation-circle"></i></span>
+                                    </span>
+                                {% endif %}
+                            {% endwith %}
+
+                            {% if not forloop.last %} &bull; {% endif %}
+
+                        {% endfor %}
+                    </p>
+                    {% endif %}
+                </div>
+                <div class="column is-half has-text-right">
+                    <p class="has-text-grey-dark has-text-weight-semibold mr-3">
+                        {{ active_pipeline_count|default:0 }} active pipeline{{ active_pipeline_count|default:0|pluralize }},
+                        {{ disabled_pipeline_count|default:0 }} disabled pipeline{{ disabled_pipeline_count|default:0|pluralize }}
+                    </p>
+                </div>
             </div>
             <table class="table is-striped  is-hoverable is-fullwidth">
                 <thead>