From 09d6dc90ee69a704f7edb17a56e226d3edd05015 Mon Sep 17 00:00:00 2001
From: Jordan Blasenhauer <blasenhauer.jordan.dev@gmail.com>
Date: Mon, 5 Feb 2024 10:34:26 +0100
Subject: [PATCH] only fetch and show stats if plugin activate

---
 src/common/core/antibot/ui/template.html     | 73 +++++++++++++++-----
 src/common/core/badbehavior/ui/template.html | 43 +++++++++++-
 src/common/core/blacklist/ui/template.html   | 41 +++++++++++
 src/common/core/bunkernet/ui/template.html   | 41 +++++++++++
 src/common/core/cors/ui/template.html        | 41 +++++++++++
 src/common/core/dnsbl/ui/template.html       | 41 +++++++++++
 src/common/core/greylist/ui/template.html    | 42 +++++++++++
 src/common/core/redis/ui/template.html       | 42 +++++++++++
 src/common/core/reversescan/ui/template.html | 42 +++++++++++
 src/common/core/whitelist/ui/template.html   | 42 +++++++++++
 src/ui/static/js/plugins/setup.js            | 12 ++--
 11 files changed, 437 insertions(+), 23 deletions(-)

diff --git a/src/common/core/antibot/ui/template.html b/src/common/core/antibot/ui/template.html
index 338068f13..e5e3d03ce 100644
--- a/src/common/core/antibot/ui/template.html
+++ b/src/common/core/antibot/ui/template.html
@@ -8,6 +8,7 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_ANTIBOT'].get('value') == "yes" %}
   <!-- info-->
   <div
     class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
@@ -66,22 +67,62 @@
     </div>
     <!-- end icon -->
   </div>
+
+  <script>
+    // Use SetupPlugin class that is on static/js/plugins/setup.js
+    const setPlugin = new SetupPlugin({
+      info: {
+        el: document.querySelector("[data-info]"),
+        value: "{{ plugin['description'] or ''}}",
+        type: "text",
+      },
+      counter_failed_challenges: {
+        el: document.querySelector("[data-count]"),
+        value: "unknown",
+        type: "text",
+      },
+    });
+  </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 
-<script>
-  // Use SetupPlugin class that is on static/js/plugins/setup.js
-  const setPlugin = new SetupPlugin({
-    info: {
-      el: document.querySelector("[data-info]"),
-      value: "{{ plugin['description'] or ''}}",
-      type: "text",
-    },
-    counter_failed_challenges: {
-      el: document.querySelector("[data-count]"),
-      value: "unknown",
-      type: "text",
-    },
-  });
-</script>
-
 {% endblock %}
diff --git a/src/common/core/badbehavior/ui/template.html b/src/common/core/badbehavior/ui/template.html
index 3ce5e9fd2..7f236dae9 100644
--- a/src/common/core/badbehavior/ui/template.html
+++ b/src/common/core/badbehavior/ui/template.html
@@ -8,6 +8,7 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_BAD_BEHAVIOR'].get('value') == "yes" %}
   <!-- info-->
   <div
     class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
@@ -27,7 +28,7 @@
     data-fetch-success-show
     class="hidden 2xl:col-span-4 3xl:col-span-3 w-full md:max-w-[350px] overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
   >
-    <div class="col-span-12">
+    <div class="col-span-12 flex">
       <h5 class="mb-4 mt-2 font-bold dark:text-white/90 mx-2">
         BAD BEHAVIOR LIST
       </h5>
@@ -86,5 +87,45 @@
       },
     });
   </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 {% endblock %}
diff --git a/src/common/core/blacklist/ui/template.html b/src/common/core/blacklist/ui/template.html
index e2c75a2a7..a9d53d346 100644
--- a/src/common/core/blacklist/ui/template.html
+++ b/src/common/core/blacklist/ui/template.html
@@ -8,6 +8,7 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_BLACKLIST'].get('value') == "yes" %}
   <div class="col-span-12 grid grid-cols-12 gap-4">
     <!-- info-->
     <div
@@ -262,5 +263,45 @@
       },
     });
   </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 {% endblock %}
diff --git a/src/common/core/bunkernet/ui/template.html b/src/common/core/bunkernet/ui/template.html
index be65a1807..ed9eee28e 100644
--- a/src/common/core/bunkernet/ui/template.html
+++ b/src/common/core/bunkernet/ui/template.html
@@ -8,6 +8,7 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_BUNKERNET'].get('value') == "yes" %}
   <!-- status -->
   <div class="col-span-12 grid grid-cols-12 gap-4">
     <div
@@ -202,6 +203,46 @@
       };
     }
   </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 
 {% endblock %}
diff --git a/src/common/core/cors/ui/template.html b/src/common/core/cors/ui/template.html
index 9bf0114e8..c1c296513 100644
--- a/src/common/core/cors/ui/template.html
+++ b/src/common/core/cors/ui/template.html
@@ -9,6 +9,7 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_CORS'].get('value') == "yes" %}
   <!-- info-->
   <div
     class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
@@ -81,5 +82,45 @@
       },
     });
   </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 {% endblock %}
diff --git a/src/common/core/dnsbl/ui/template.html b/src/common/core/dnsbl/ui/template.html
index 95b022b0e..08a65835d 100644
--- a/src/common/core/dnsbl/ui/template.html
+++ b/src/common/core/dnsbl/ui/template.html
@@ -8,6 +8,7 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_DNSBL'].get('value') == "yes" %}
   <!-- info-->
   <div
     class="h-fit transition hover:scale-102 col-span-12 md:col-span-4 2xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
@@ -80,6 +81,46 @@
       },
     });
   </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 
 {% endblock %}
diff --git a/src/common/core/greylist/ui/template.html b/src/common/core/greylist/ui/template.html
index 1f45133cc..32e67ec1b 100644
--- a/src/common/core/greylist/ui/template.html
+++ b/src/common/core/greylist/ui/template.html
@@ -8,6 +8,8 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_GREYLIST'].get('value') == "yes" %}
+
   <!-- info-->
   <div
     class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
@@ -79,5 +81,45 @@
       },
     });
   </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 {% endblock %}
diff --git a/src/common/core/redis/ui/template.html b/src/common/core/redis/ui/template.html
index 683670611..88b676f20 100644
--- a/src/common/core/redis/ui/template.html
+++ b/src/common/core/redis/ui/template.html
@@ -8,6 +8,8 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_REDIS'].get('value') == "yes" %}
+
   <!-- status -->
   <div class="col-span-12 grid grid-cols-12 gap-4">
     <div
@@ -199,6 +201,46 @@
       };
     }
   </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 
 {% endblock %}
diff --git a/src/common/core/reversescan/ui/template.html b/src/common/core/reversescan/ui/template.html
index 0381cb69a..a06afbf2a 100644
--- a/src/common/core/reversescan/ui/template.html
+++ b/src/common/core/reversescan/ui/template.html
@@ -8,6 +8,8 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_REVERSE_SCAN'].get('value') == "yes" %}
+
   <!-- info-->
   <div
     class="h-fit transition hover:scale-102 col-span-12 md:col-span-4 2xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
@@ -86,5 +88,45 @@
       },
     });
   </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 {% endblock %}
diff --git a/src/common/core/whitelist/ui/template.html b/src/common/core/whitelist/ui/template.html
index c71c6b106..df6c34e29 100644
--- a/src/common/core/whitelist/ui/template.html
+++ b/src/common/core/whitelist/ui/template.html
@@ -8,6 +8,8 @@
 />
 
 <div class="col-span-12 grid grid-cols-12 gap-4">
+  {% if plugin['settings']['USE_WHITELIST'].get('value') == "yes" %}
+
   <!-- info-->
   <div
     class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
@@ -93,5 +95,45 @@
       },
     });
   </script>
+  {% else %}
+  <div
+    class="h-fit transition hover:scale-102 col-span-12 md:col-span-6 2xl:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
+  >
+    <div class="flex justify-between">
+      <h5 class="mb-2 font-bold dark:text-white/90">Deactived</h5>
+      <!-- icon -->
+      <div
+        role="img"
+        class="dark:brightness-90 inline-block w-12 h-12 text-center rounded-circle bg-yellow-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="scale-75 leading-none text-lg relative fill-yellow-500 stroke-white"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+          />
+        </svg>
+      </div>
+      <!-- end icon -->
+    </div>
+
+    <div class="mx-1 flex justify-start items-center my-2">
+      <p
+        data-info
+        class="transition duration-300 ease-in-out mb-0 font-sans text-sm leading-normal dark:text-gray-500 dark:opacity-80"
+      >
+        This plugin need to be activated to get metrics.
+      </p>
+    </div>
+  </div>
+  <!-- end info -->
+  {% endif %}
 </div>
 {% endblock %}
diff --git a/src/ui/static/js/plugins/setup.js b/src/ui/static/js/plugins/setup.js
index ab624400c..778842b36 100644
--- a/src/ui/static/js/plugins/setup.js
+++ b/src/ui/static/js/plugins/setup.js
@@ -31,7 +31,7 @@ class SetupPlugin {
         */
     // Hidden elements that will be shown on success, like ping buttons or list rendering
     this.showOnSuccessEls = document.querySelectorAll(
-      "[data-fetch-success-show]"
+      "[data-fetch-success-show]",
     );
 
     this.init();
@@ -77,7 +77,7 @@ class SetupPlugin {
       ],
       "bg-sky-500 p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-[300px] min-h-20 rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border",
       "",
-      ""
+      "",
     );
 
     this.alertCloseEl = this.createEl(
@@ -85,7 +85,7 @@ class SetupPlugin {
       [["data-fetch-close", ""]],
       "absolute right-7 top-1.5",
       "",
-      this.alertEl
+      this.alertEl,
     );
 
     this.alertCloseIconEl = this.createEl(
@@ -96,7 +96,7 @@ class SetupPlugin {
       ],
       "cursor-pointer fill-white dark:fill-gray-300 dark:opacity-80 absolute h-5 w-5",
       "",
-      this.alertCloseEl
+      this.alertCloseEl,
     );
 
     // Close icon paths
@@ -116,7 +116,7 @@ class SetupPlugin {
       [["data-fetch-status", ""]],
       "text-lg mb-0 text-white dark:text-gray-300",
       "Fetching",
-      this.alertEl
+      this.alertEl,
     );
 
     this.alertMsgEl = this.createEl(
@@ -124,7 +124,7 @@ class SetupPlugin {
       [["data-fetch-msg", ""]],
       "text-white dark:text-gray-300 mb-0 text-sm",
       "Please wait...",
-      this.alertEl
+      this.alertEl,
     );
 
     document.body.appendChild(this.alertEl);