From c2e3879c1fb4363f46a5284779c4bc9e80c7ccdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Touati?= <sielver@gmail.com>
Date: Sun, 8 Dec 2024 19:44:43 +0100
Subject: [PATCH] fix: fix ansi link color + regex (#3440)

---
 assets/components/LogViewer/LogItem.vue       |  5 ----
 assets/components/LogViewer/SimpleLogItem.vue |  9 +++++-
 .../__snapshots__/EventSource.spec.ts.snap    | 30 +++++++++----------
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/assets/components/LogViewer/LogItem.vue b/assets/components/LogViewer/LogItem.vue
index 781de69b..aab49111 100644
--- a/assets/components/LogViewer/LogItem.vue
+++ b/assets/components/LogViewer/LogItem.vue
@@ -26,8 +26,3 @@ const { hosts } = useHosts();
 const container = currentContainer(toRef(() => logEntry.containerID));
 const host = computed(() => hosts.value[container.value.host]);
 </script>
-<style scoped lang="postcss">
-.log-wrapper :deep(a) {
-  @apply text-primary underline-offset-4 hover:underline;
-}
-</style>
diff --git a/assets/components/LogViewer/SimpleLogItem.vue b/assets/components/LogViewer/SimpleLogItem.vue
index a7e19c6c..8dc3c22c 100644
--- a/assets/components/LogViewer/SimpleLogItem.vue
+++ b/assets/components/LogViewer/SimpleLogItem.vue
@@ -28,7 +28,14 @@ defineProps<{
 }>();
 
 const colorize = (value: string) => ansiConvertor.toHtml(value);
-const urlPattern = /(https?:\/\/[^\s]+)/g;
+const urlPattern =
+  /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b[-a-zA-Z0-9()@:%_+.~#?&\/=]*/g;
 const linkify = (text: string) =>
   text.replace(urlPattern, (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`);
 </script>
+
+<style scoped lang="postcss">
+.log-wrapper :deep(a) {
+  @apply text-primary underline-offset-4 hover:underline;
+}
+</style>
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index 4afebbac..5dfbd404 100644
--- a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
@@ -3,16 +3,16 @@
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium" show-container-name="false">
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start shrink-0 select-none" size="small">
+      <div data-v-961504e7="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start shrink-0 select-none" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
-      <div class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
-      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
+      <div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
+      <div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
       </div>
     </div>
@@ -23,16 +23,16 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium" show-container-name="false">
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start shrink-0 select-none" size="small">
+      <div data-v-961504e7="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start shrink-0 select-none" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
       </div>
-      <div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
-      <div class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
-      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
+      <div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
+      <div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
       </div>
     </div>
@@ -43,16 +43,16 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium" show-container-name="false">
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
       <!--v-if-->
       <!--v-if-->
-      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start shrink-0 select-none" size="small">
+      <div data-v-961504e7="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start shrink-0 select-none" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
-      <div class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
-      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
+      <div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
+      <div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
       </div>
     </div>