add color coding legend

iximiuz · Oct 9, 2023 · 2efc072 · 2efc072
1 parent ff1e917
commit 2efc072
Showing 1 changed file with 44 additions and 1 deletion.
diff --git a/ui/src/components/GraphScreenBottomBar.vue b/ui/src/components/GraphScreenBottomBar.vue
@@ -12,6 +12,7 @@ defineProps({
     <span class="flex font-semibold h-full invisible items-center mr-40 px-6">
       Kubernetes Explorer
     </span>
+
     <div
       class="broder-box flex h-full hover:bg-base-300 hover:tooltip-open tooltip tooltip-top z-50"
       data-tip="Open web terminal"
@@ -26,6 +27,7 @@ defineProps({
         </span>
       </button>
     </div>
+
     <div
       class="broder-box flex h-full hover:bg-base-300 hover:tooltip-open tooltip tooltip-top z-50"
       data-tip="Watch cluster events - Coming soon!"
@@ -40,7 +42,48 @@ defineProps({
       </button>
     </div>
 
-    <div class="ml-auto mr-1">
+    <div
+      class="broder-box flex h-full hover:bg-base-300 z-50"
+    >
+      <div class="dropdown dropdown-hover dropdown-top">
+        <label
+          tabindex="0"
+          class="btn btn-ghost btn-xs gap-1 hover:opacity-100 hover:shadow-none normal-case opacity-70 rounded-none"
+        >
+          <div class="bg-[rgb(21,128,61)] border border-black h-4 rounded-sm w-4" />
+          <div class="bg-[rgb(36,158,235)] border border-black h-4 rounded-sm w-4" />
+          <div class="bg-[rgb(245,158,11)] border border-black h-4 rounded-sm w-4" />
+          <div class="bg-[rgb(239,68,68)] border border-black h-4 rounded-sm w-4" />
+        </label>
+        <ul
+          tabindex="0"
+          class="-ml-[50%] bg-base-200 border border-neutral-content dropdown-content flex flex-col gap-y-1 p-2 px-3 rounded-md shadow-lg w-80 z-[50]"
+        >
+          <h2 class="font-semibold mb-2 text-base">
+            Color coding of graph objects
+          </h2>
+
+          <li class="flex items-center text-sm">
+            <div class="bg-[rgb(21,128,61)] border border-black h-4 rounded-sm w-4" />&nbsp;- Recently created
+          </li>
+          <li class="flex items-center text-sm">
+            <div class="bg-[rgb(36,158,235)] border border-black h-4 rounded-sm w-4" />&nbsp;- No change for last ~5 sec
+          </li>
+          <li class="flex items-center text-sm">
+            <div class="bg-[rgb(245,158,11)] border border-black h-4 rounded-sm w-4" />&nbsp;- Recently updated
+          </li>
+          <li class="flex items-center text-sm">
+            <div class="bg-[rgb(239,68,68)] border border-black h-4 rounded-sm w-4" />&nbsp;- Deletion timestamp is set
+          </li>
+
+          <p class="mt-2 text-sm">
+            Objects are removed from the graph ~5 sec after they disappear from the API response.
+          </p>
+        </ul>
+      </div>
+    </div>
+
+    <div class="ml-auto mr-2">
       <a
         target="_blank"
         href="https://github.com/iximiuz/kexp"