From d13163b0d937a6f138fbf481e81603fa7e3f8cfd Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 29 Aug 2024 08:59:50 -0700
Subject: [PATCH] chore: removes tag if not there for level (#3242)

---
 assets/components/FuzzySearchModal.vue        |  6 +++---
 assets/components/LogViewer/LogDetails.vue    | 21 +++++++++++--------
 .../__snapshots__/EventSource.spec.ts.snap    |  2 +-
 assets/components/common/SideDrawer.vue       |  2 +-
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index f1846f43..41974d98 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -50,14 +50,14 @@
             </div>
 
             <DistanceTime :date="result.item.created" class="text-xs font-light" />
-            <a
+            <span
               @click.stop.prevent="addColumn(result.item)"
               :title="$t('tooltip.pin-column')"
               class="hover:text-secondary"
             >
               <ic:sharp-keyboard-return v-if="index === selectedIndex" />
-              <cil:columns v-else />
-            </a>
+              <cil:columns v-else-if="result.item.type === 'container'" />
+            </span>
           </a>
         </li>
       </ul>
diff --git a/assets/components/LogViewer/LogDetails.vue b/assets/components/LogViewer/LogDetails.vue
index e2bf7f0f..1f6f79d0 100644
--- a/assets/components/LogViewer/LogDetails.vue
+++ b/assets/components/LogViewer/LogDetails.vue
@@ -1,35 +1,38 @@
 <template>
   <header class="flex items-center gap-4">
-    <Tag :data-level="entry.level" class="uppercase text-white">{{ entry.level }}</Tag>
+    <Tag :data-level="entry.level" class="uppercase text-white" v-if="entry.level">{{ entry.level }}</Tag>
     <h1 class="text-lg">
       <DateTime :date="entry.date" />
     </h1>
     <h2 class="text-sm"><DistanceTime :date="entry.date" /> on {{ entry.std }}</h2>
   </header>
 
-  <div class="mt-8 flex flex-col gap-4">
+  <div class="mt-8 flex flex-col gap-10">
     <section class="grid grid-cols-3 gap-2">
       <div>
         <div class="font-thin">Container Name</div>
-        <div class="text-lg font-bold">{{ container.name }}</div>
+        <div class="truncate text-lg font-bold">{{ container.name }}</div>
       </div>
       <div>
         <div class="font-thin">Host</div>
-        <div class="text-lg font-bold">
+        <div class="truncate text-lg font-bold">
           {{ hosts[container.host].name }}
         </div>
       </div>
       <div>
         <div class="font-thin">Image</div>
-        <div class="text-lg font-bold">{{ container.image }}</div>
+        <div class="truncate text-lg font-bold">{{ container.image }}</div>
       </div>
     </section>
-    <table class="table" v-if="entry instanceof ComplexLogEntry">
+    <table class="table table-fixed" v-if="entry instanceof ComplexLogEntry">
+      <caption class="caption-top">
+        You can drag and drop the fields to reorder them.
+      </caption>
       <thead class="text-lg">
         <tr>
-          <th>Field</th>
+          <th class="w-60">Field</th>
           <th>Value</th>
-          <th>Show</th>
+          <th class="w-20">Show</th>
         </tr>
       </thead>
       <tbody ref="list">
@@ -37,7 +40,7 @@
           <td class="cursor-move font-mono">
             {{ key.join(".") }}
           </td>
-          <td>
+          <td class="truncate">
             <code v-html="JSON.stringify(value)"></code>
           </td>
           <td>
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index 865015a8..88396947 100644
--- a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
@@ -106,7 +106,7 @@ exports[`<ContainerEventSource /> > renders loading correctly 1`] = `
 "<div class="flex min-h-[1px] justify-center"><span class="loading loading-bars loading-md mt-4 text-primary" style="display: none;"></span></div>
 <dialog data-v-43493931="" class="modal-right modal items-start outline-none backdrop:bg-none">
   <div data-v-43493931="" class="modal-box">
-    <form data-v-43493931="" method="dialog"><button data-v-43493931="" class="swap swap-rotate absolute right-4 top-4 hover:swap-active"><svg data-v-43493931="" viewBox="0 0 24 24" width="1.2em" height="1.2em" class="swap-off">
+    <form data-v-43493931="" method="dialog"><button data-v-43493931="" class="swap swap-rotate absolute right-4 top-4 outline-none hover:swap-active"><svg data-v-43493931="" viewBox="0 0 24 24" width="1.2em" height="1.2em" class="swap-off">
           <path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1zm10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2"></path>
         </svg><svg data-v-43493931="" viewBox="0 0 24 24" width="1.2em" height="1.2em" class="swap-on">
           <path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
diff --git a/assets/components/common/SideDrawer.vue b/assets/components/common/SideDrawer.vue
index c585f731..9d886c2a 100644
--- a/assets/components/common/SideDrawer.vue
+++ b/assets/components/common/SideDrawer.vue
@@ -2,7 +2,7 @@
   <dialog ref="panel" class="modal-right modal items-start outline-none backdrop:bg-none">
     <div class="modal-box">
       <form method="dialog">
-        <button class="swap swap-rotate absolute right-4 top-4 hover:swap-active">
+        <button class="swap swap-rotate absolute right-4 top-4 outline-none hover:swap-active">
           <mdi:keyboard-esc class="swap-off" />
           <mdi:close class="swap-on" />
         </button>