Skip to content

Commit 7ccc312

Browse files
amir20amir20
authored
fix: improves condense view by expanding the tags (#3402)
1 parent 484260d commit 7ccc312

File tree

9 files changed

+60
-56
lines changed

9 files changed

+60
-56
lines changed

‎assets/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ declare module 'vue' {
4949
LogAnalytics: typeof import('./components/LogViewer/LogAnalytics.vue')['default']
5050
LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
5151
LogDetails: typeof import('./components/LogViewer/LogDetails.vue')['default']
52+
LogItem: typeof import('./components/LogViewer/LogItem.vue')['default']
5253
LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
5354
LogList: typeof import('./components/LogViewer/LogList.vue')['default']
5455
LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default']

‎assets/components/LogViewer/ComplexLogItem.vue‎

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,16 @@
11
<template>
2-
<div class="group/item clickable relative flex w-full gap-x-2" @click="showDrawer(LogDetails, { entry: logEntry })">
3-
<div v-if="showContainerName">
4-
<ContainerName :id="logEntry.containerID" />
5-
</div>
6-
<div v-if="showStd">
7-
<LogStd :std="logEntry.std" />
8-
</div>
9-
<div v-if="showTimestamp">
10-
<LogDate :date="logEntry.date" class="select-none" />
11-
</div>
12-
<div class="flex">
13-
<LogLevel :level="logEntry.level" />
14-
</div>
15-
<div>
16-
<ul class="fields space-x-4">
17-
<li v-for="(value, name) in validValues" :key="name">
18-
<span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
19-
<template v-else-if="Array.isArray(value)">
20-
<span class="font-bold" v-html="JSON.stringify(value)"> </span>
21-
</template>
22-
<span class="font-bold" v-html="stripAnsi(value.toString())" v-else></span>
23-
</li>
24-
<li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
25-
</ul>
26-
</div>
27-
</div>
2+
<LogItem :logEntry :showContainerName @click="showDrawer(LogDetails, { entry: logEntry })" class="clickable">
3+
<ul class="fields space-x-4">
4+
<li v-for="(value, name) in validValues" :key="name">
5+
<span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
6+
<template v-else-if="Array.isArray(value)">
7+
<span class="font-bold" v-html="JSON.stringify(value)"> </span>
8+
</template>
9+
<span class="font-bold" v-html="stripAnsi(value.toString())" v-else></span>
10+
</li>
11+
<li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
12+
</ul>
13+
</LogItem>
2814
</template>
2915
<script lang="ts" setup>
3016
import stripAnsi from "strip-ansi";

‎assets/components/LogViewer/ContainerName.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="grid w-40 overflow-hidden rounded text-center text-sm text-white">
2+
<div class="tag grid w-40 overflow-hidden rounded text-center text-sm text-white">
33
<div class="random-color col-start-1 row-start-1 brightness-75"></div>
44
<div class="col-start-1 row-start-1 truncate px-2 brightness-100 [direction:rtl]">{{ containerNames[id] }}</div>
55
</div>

‎assets/components/LogViewer/LogDate.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<Tag size="small">
2+
<Tag size="small" class="!items-start">
33
<DateTime :date="date" class="whitespace-nowrap text-blue" />
44
</Tag>
55
</template>

‎assets/components/LogViewer/LogItem.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
3+
<LogStd :std="logEntry.std" class="select-none" v-if="showStd" />
4+
<ContainerName class="shrink-0 select-none" :id="logEntry.containerID" v-if="showContainerName" />
5+
<LogDate :date="logEntry.date" v-if="showTimestamp" class="select-none" />
6+
<LogLevel
7+
class="flex select-none"
8+
:level="logEntry.level"
9+
:position="logEntry instanceof SimpleLogEntry ? logEntry.position : undefined"
10+
/>
11+
<slot />
12+
</div>
13+
</template>
14+
<script lang="ts" setup>
15+
import { LogEntry, SimpleLogEntry } from "@/models/LogEntry";
16+
17+
const { showContainerName = false, logEntry } = defineProps<{
18+
logEntry: LogEntry<any>;
19+
showContainerName?: boolean;
20+
}>();
21+
</script>
22+
<style scoped lang="postcss">
23+
.log-wrapper :deep(a) {
24+
@apply text-primary underline-offset-4 hover:underline;
25+
}
26+
</style>

‎assets/components/LogViewer/LogStd.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<Tag size="small" :std="std">
2+
<Tag size="small" :std="std" class="!items-start">
33
{{ std }}
44
</Tag>
55
</template>

‎assets/components/LogViewer/SimpleLogItem.vue‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<template>
2-
<div class="relative flex w-full items-start gap-x-2">
3-
<LogStd :std="logEntry.std" v-if="showStd" />
4-
<ContainerName class="flex-none" :id="logEntry.containerID" v-if="showContainerName" />
5-
<LogDate :date="logEntry.date" v-if="showTimestamp" class="select-none" />
6-
<LogLevel class="flex" :level="logEntry.level" :position="logEntry.position" />
2+
<LogItem :logEntry :showContainerName>
73
<div
84
class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
95
v-html="linkify(colorize(logEntry.message))"
@@ -13,7 +9,7 @@
139
:message="() => decodeXML(stripAnsi(logEntry.message))"
1410
:log-entry="logEntry"
1511
/>
16-
</div>
12+
</LogItem>
1713
</template>
1814
<script lang="ts" setup>
1915
import { SimpleLogEntry } from "@/models/LogEntry";
@@ -37,8 +33,3 @@ const urlPattern = /(https?:\/\/[^\s]+)/g;
3733
const linkify = (text: string) =>
3834
text.replace(urlPattern, (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`);
3935
</script>
40-
<style scoped lang="postcss">
41-
.log-wrapper :deep(a) {
42-
@apply text-primary underline-offset-4 hover:underline;
43-
}
44-
</style>

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

Lines changed: 15 additions & 15 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 pt-4 medium">
55
<li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
6-
<div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
6+
<div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
77
<!--v-if-->
88
<!--v-if-->
9-
<div data-v-961504e7="" data-v-a49e52d4="" class="tag 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-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start 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="" 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">foo bar</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">
12+
<div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
13+
<div class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
14+
<div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
1515
<!--v-if-->
1616
</div>
1717
</div>
@@ -22,15 +22,15 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
2222
exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
2323
"<ul data-v-cf9ff940="" class="events group pt-4 medium">
2424
<li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
25-
<div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
25+
<div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
2626
<!--v-if-->
2727
<!--v-if-->
28-
<div data-v-961504e7="" data-v-a49e52d4="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
28+
<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 select-none" size="small">
2929
<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>
3030
</div>
31-
<div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
32-
<div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
33-
<div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
31+
<div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
32+
<div class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
33+
<div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
3434
<!--v-if-->
3535
</div>
3636
</div>
@@ -41,15 +41,15 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
4141
exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
4242
"<ul data-v-cf9ff940="" class="events group pt-4 medium">
4343
<li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
44-
<div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
44+
<div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
4545
<!--v-if-->
4646
<!--v-if-->
47-
<div data-v-961504e7="" data-v-a49e52d4="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
47+
<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 select-none" size="small">
4848
<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>
4949
</div>
50-
<div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
51-
<div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
52-
<div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
50+
<div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
51+
<div class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
52+
<div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
5353
<!--v-if-->
5454
</div>
5555
</div>

‎assets/components/ScrollableView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</div>
2424
<div
2525
class="animate-background h-1 w-1/2 bg-gradient-radial from-primary to-transparent to-75%"
26-
v-show="!scrollContext.paused && !scrollContext.loading"
26+
v-show="!scrollContext.paused"
2727
></div>
2828
<div ref="scrollObserver" class="h-px"></div>
2929
</main>

0 commit comments

Comments
 (0)