Skip to content

Commit 3541c32

Browse files
amir20amir20
authored
feat: auto links url for simple logs. fixes #3063 (#3100)
1 parent 15685ce commit 3541c32

File tree

2 files changed

+35
-27
lines changed

2 files changed

+35
-27
lines changed

‎assets/components/LogViewer/SimpleLogItem.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<LogDate :date="logEntry.date" v-if="showTimestamp" class="select-none" />
66
<LogLevel class="flex" :level="logEntry.level" :position="logEntry.position" />
77
<div
8-
class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
9-
v-html="colorize(logEntry.message)"
8+
class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
9+
v-html="linkify(colorize(logEntry.message))"
1010
></div>
1111
<LogMessageActions
1212
class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
@@ -34,4 +34,12 @@ const { showContainerName = false } = defineProps<{
3434
3535
const { markSearch } = useSearchFilter();
3636
const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));
37+
const urlPattern = /(https?:\/\/[^\s]+)/g;
38+
const linkify = (text: string) =>
39+
text.replace(urlPattern, (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`);
3740
</script>
41+
<style scoped lang="postcss">
42+
.log-wrapper > :deep(a) {
43+
@apply text-primary underline-offset-4 hover:underline;
44+
}
45+
</style>

‎assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
exports[`<ContainerEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
44
"<ul data-v-cf9ff940="" class="events group py-4 medium">
55
<li data-v-cf9ff940="" data-key="1" class="group/entry">
6-
<div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
6+
<div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
77
<!--v-if-->
88
<!--v-if-->
9-
<div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
9+
<div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
1010
<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>
1111
</div>
12-
<div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
13-
<div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
14-
<div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
12+
<div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
13+
<div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
14+
<div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
1515
<!--v-if-->
1616
<!--v-if-->
1717
</div>
@@ -23,15 +23,15 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
2323
exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
2424
"<ul data-v-cf9ff940="" class="events group py-4 medium">
2525
<li data-v-cf9ff940="" data-key="1" class="group/entry">
26-
<div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
26+
<div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
2727
<!--v-if-->
2828
<!--v-if-->
29-
<div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
29+
<div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
3030
<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>
3131
</div>
32-
<div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
33-
<div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
34-
<div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
32+
<div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
33+
<div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
34+
<div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
3535
<!--v-if-->
3636
<!--v-if-->
3737
</div>
@@ -43,15 +43,15 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
4343
exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
4444
"<ul data-v-cf9ff940="" class="events group py-4 medium">
4545
<li data-v-cf9ff940="" data-key="1" class="group/entry">
46-
<div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
46+
<div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
4747
<!--v-if-->
4848
<!--v-if-->
49-
<div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
49+
<div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
5050
<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>
5151
</div>
52-
<div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
53-
<div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
54-
<div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
52+
<div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
53+
<div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
54+
<div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
5555
<!--v-if-->
5656
<!--v-if-->
5757
</div>
@@ -63,15 +63,15 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
6363
exports[`<ContainerEventSource /> > render html correctly > should render messages with filter 1`] = `
6464
"<ul data-v-cf9ff940="" class="events group py-4 medium">
6565
<li data-v-cf9ff940="" data-key="2" class="group/entry">
66-
<div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
66+
<div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
6767
<!--v-if-->
6868
<!--v-if-->
69-
<div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
69+
<div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
7070
<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>
7171
</div>
72-
<div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
73-
<div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"><mark>test</mark> bar</div>
74-
<div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
72+
<div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
73+
<div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"><mark>test</mark> bar</div>
74+
<div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
7575
<!--v-if-->
7676
<div class="flex min-w-[0.98rem] items-start justify-end align-bottom hover:cursor-pointer" title="log_actions.jump_to_context"><a class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700" href="#2"><svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
7777
<path fill="currentColor" d="m30 28.586l-4.688-4.688a8.028 8.028 0 1 0-1.415 1.414L28.586 30zM19 25a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6M2 12h8v2H2zM2 2h16v2H2zm0 5h16v2H2z"></path>
@@ -85,15 +85,15 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
8585
exports[`<ContainerEventSource /> > render html correctly > should render messages with html entities 1`] = `
8686
"<ul data-v-cf9ff940="" class="events group py-4 medium">
8787
<li data-v-cf9ff940="" data-key="1" class="group/entry">
88-
<div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
88+
<div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
8989
<!--v-if-->
9090
<!--v-if-->
91-
<div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
91+
<div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
9292
<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>
9393
</div>
94-
<div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
95-
<div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
96-
<div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
94+
<div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
95+
<div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
96+
<div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
9797
<!--v-if-->
9898
<!--v-if-->
9999
</div>

0 commit comments

Comments
 (0)