Fix UI bug causing Essentials and EPSS tabs to overlap

Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>

Author: Samk1710

vulnerabilities/templates/advisory_detail.html

@@ -25,7 +25,7 @@
 
         <div class="tabs is-boxed" id="tabs">
             <ul>
-                <li class="{% if not 'epss_page' in request.GET %}is-active{% endif %}" data-tab="essentials">
+                <li class="{% if not is_epss_tab_active %}is-active{% endif %}" data-tab="essentials">
                     <a>
                         <span>Essentials</span>
                     </a>
@@ -55,7 +55,7 @@
                     </li>
                 {% endif %}
 
-                <li class="{% if 'epss_page' in request.GET %}is-active{% endif %}" data-tab="epss">
+                <li class="{% if is_epss_tab_active %}is-active{% endif %}" data-tab="epss">
                     <a>
                         <span>
                             EPSS
@@ -101,7 +101,7 @@
             </ul>
         </div>
         <div id="tab-content">
-            <div class="tab-div is-active" data-content="essentials">
+            <div class="tab-div {% if not is_epss_tab_active %}is-active{% endif %}" data-content="essentials">
                 <div class="tab-nested-div">
                     <table class="table vcio-table width-100-pct mt-2">
                         <tbody>
@@ -459,7 +459,7 @@
                 {% endfor %}
             </div>
 
-            <div class="tab-div content {% if 'epss_page' in request.GET %}is-active{% endif %}" data-content="epss">
+            <div class="tab-div content {% if is_epss_tab_active %}is-active{% endif %}" data-content="epss">
                 {% if epss_data %}
                     <div class="has-text-weight-bold tab-nested-div ml-1 mb-1 mt-1">
                         Exploit Prediction Scoring System (EPSS)

vulnerabilities/views.py

@@ -806,6 +806,7 @@ def add_ssvc(ssvc):
         )
 
         show_epss_chart = "epss_page" in self.request.GET or advisory.severities.exists()
+        is_epss_tab_active = "epss_page" in self.request.GET
 
         context.update(
             {
@@ -821,6 +822,7 @@ def add_ssvc(ssvc):
                 "epss_history_data": epss_history_data,
                 "epss_pagination_obj": epss_pagination_obj,
                 "show_epss_chart": show_epss_chart,
+                "is_epss_tab_active": is_epss_tab_active,
             }
         )
         return context