diff --git a/assets/components.d.ts b/assets/components.d.ts index 736398b4..8cc1e878 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -11,18 +11,16 @@ declare module '@vue/runtime-core' { CilColumns: typeof import('~icons/cil/columns')['default'] CilFindInPage: typeof import('~icons/cil/find-in-page')['default'] ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default'] - ComplexPayload: typeof import('./components/LogViewer/ComplexPayload.vue')['default'] ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default'] ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default'] - copy: typeof import('./components/LogViewer/DockerEventLogItem copy.vue')['default'] DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default'] DropdownMenu: typeof import('./components/DropdownMenu.vue')['default'] FieldList: typeof import('./components/LogViewer/FieldList.vue')['default'] FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default'] InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default'] - JSONPayload: typeof import('./components/LogViewer/JSONPayload.vue')['default'] LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default'] LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default'] + LogDate: typeof import('./components/LogViewer/LogDate.vue')['default'] LogEventSource: typeof import('./components/LogViewer/LogEventSource.vue')['default'] LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default'] LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default'] @@ -46,6 +44,6 @@ declare module '@vue/runtime-core' { SideMenu: typeof import('./components/SideMenu.vue')['default'] SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default'] SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default'] - StringPayload: typeof import('./components/LogViewer/StringPayload.vue')['default'] + ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default'] } } diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue index f2dfda40..378b5bee 100644 --- a/assets/components/LogViewer/ComplexLogItem.vue +++ b/assets/components/LogViewer/ComplexLogItem.vue @@ -1,14 +1,19 @@ + + diff --git a/assets/components/LogViewer/LogEventSource.spec.ts b/assets/components/LogViewer/LogEventSource.spec.ts index a1e71aff..7ae58d65 100644 --- a/assets/components/LogViewer/LogEventSource.spec.ts +++ b/assets/components/LogViewer/LogEventSource.spec.ts @@ -6,7 +6,7 @@ import LogEventSource from "./LogEventSource.vue"; import LogViewer from "./LogViewer.vue"; import { settings } from "../../composables/settings"; import { useSearchFilter } from "@/composables/search"; -import { vi, describe, expect, beforeEach, test, beforeAll, afterAll, afterEach } from "vitest"; +import { vi, describe, expect, beforeEach, test, afterEach } from "vitest"; import { computed, nextTick } from "vue"; import { createRouter, createWebHistory } from "vue-router"; @@ -23,6 +23,7 @@ describe("", () => { beforeEach(() => { global.EventSource = EventSource; + // @ts-ignore window.scrollTo = vi.fn(); global.IntersectionObserver = vi.fn().mockImplementation(() => ({ observe: vi.fn(), @@ -112,6 +113,7 @@ describe("", () => { vi.runAllTimers(); await nextTick(); + // @ts-ignore const [message, _] = wrapper.vm.messages; expect(message).toMatchSnapshot(); }); diff --git a/assets/components/LogViewer/LogEventSource.vue b/assets/components/LogViewer/LogEventSource.vue index b5046dcd..b5cef1d4 100644 --- a/assets/components/LogViewer/LogEventSource.vue +++ b/assets/components/LogViewer/LogEventSource.vue @@ -12,7 +12,7 @@ const emit = defineEmits<{ }>(); const container = inject("container") as ComputedRef; -const { connect, messages, loadOlderLogs } = useLogStream(container); +const { messages, loadOlderLogs } = useLogStream(container); const beforeLoading = () => emit("loading-more", true); const afterLoading = () => emit("loading-more", false); @@ -22,6 +22,4 @@ defineExpose({ }); const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading }); - -connect(); diff --git a/assets/components/LogViewer/LogViewer.vue b/assets/components/LogViewer/LogViewer.vue index bafbd75e..a53f79d6 100644 --- a/assets/components/LogViewer/LogViewer.vue +++ b/assets/components/LogViewer/LogViewer.vue @@ -22,10 +22,7 @@ -
- - -
+ @@ -34,7 +31,7 @@ import { type ComputedRef, toRaw } from "vue"; import { useRouteHash } from "@vueuse/router"; import { type Container } from "@/types/Container"; -import { type JSONObject, type LogEntry } from "@/models/LogEntry"; +import { type JSONObject, LogEntry } from "@/models/LogEntry"; const props = defineProps<{ messages: LogEntry[]; @@ -50,10 +47,10 @@ const visible = filteredPayload(messages); const filtered = filteredMessages(visible); const events = ref(); -let lastSelectedItem = ref>(); +let lastSelectedItem: LogEntry | undefined = $ref(undefined); function handleJumpLineSelected(e: Event, item: LogEntry) { - lastSelectedItem.value = item; + lastSelectedItem = item; resetSearch(); } @@ -71,12 +68,6 @@ watch( padding: 1em 0; font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace; - &.disable-wrap { - .line { - white-space: nowrap; - } - } - & > li { display: flex; word-wrap: break-word; @@ -89,19 +80,10 @@ watch( background-color: rgba(125, 125, 125, 0.08); } - &.selected .date { - background-color: var(--menu-item-active-background-color); + &.selected { + border: 1px var(--secondary-color) solid; + } - color: var(--text-color); - } - &.selected > .date { - background-color: white; - } - & > .line { - margin: auto 0; - width: 100%; - display: flex; - } & > .line-options { display: flex; flex-direction: row-reverse; @@ -121,55 +103,4 @@ watch( font-size: 120%; } } - -@media (prefers-color-scheme: dark) { - .date { - background-color: #262626; - color: #258ccd; - } -} - -[data-theme="dark"] { - .date { - background-color: #262626; - color: #258ccd; - } -} - -@media (prefers-color-scheme: light) { - .date { - background-color: #f0f0f0; - color: #009900; - } -} - -[data-theme="light"] { - .date { - background-color: #f0f0f0; - color: #009900; - } -} - -.date { - padding-left: 5px; - padding-right: 5px; - border-radius: 3px; - white-space: nowrap; -} - -:deep(mark) { - border-radius: 2px; - background-color: var(--secondary-color); - animation: pops 200ms ease-out; - display: inline-block; -} - -@keyframes pops { - 0% { - transform: scale(1.5); - } - 100% { - transform: scale(1.05); - } -} diff --git a/assets/components/LogViewer/SimpleLogItem.vue b/assets/components/LogViewer/SimpleLogItem.vue index dae53c80..d1a411e5 100644 --- a/assets/components/LogViewer/SimpleLogItem.vue +++ b/assets/components/LogViewer/SimpleLogItem.vue @@ -1,5 +1,10 @@ diff --git a/assets/components/LogViewer/ZigZag.vue b/assets/components/LogViewer/ZigZag.vue new file mode 100644 index 00000000..6ad47115 --- /dev/null +++ b/assets/components/LogViewer/ZigZag.vue @@ -0,0 +1,19 @@ + + + diff --git a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap index 9e28d462..01c25848 100644 --- a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap +++ b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap @@ -23,7 +23,10 @@ exports[` > render html correctly > should render dates with 1 -
<test>foo bar</test>
+
+
+
<test>foo bar</test>
+
" `; @@ -51,7 +54,10 @@ exports[` > render html correctly > should render dates with 2 -
<test>foo bar</test>
+
+
+
<test>foo bar</test>
+
" `; @@ -79,7 +85,10 @@ exports[` > render html correctly > should render messages 1`] -
This is a message.
+
+
+
This is a message.
+
" `; @@ -107,7 +116,10 @@ exports[` > render html correctly > should render messages wit -
blackwhite
+
+
+
blackwhite
+
" `; @@ -135,7 +147,10 @@ exports[` > render html correctly > should render messages wit -
test bar
+
+
+
test bar
+
" `; @@ -163,7 +178,10 @@ exports[` > render html correctly > should render messages wit -
<test>foo bar</test>
+
+
+
<test>foo bar</test>
+
" `; diff --git a/assets/components/MobileMenu.vue b/assets/components/MobileMenu.vue index f078e143..b69c190d 100644 --- a/assets/components/MobileMenu.vue +++ b/assets/components/MobileMenu.vue @@ -46,10 +46,10 @@ const store = useContainerStore(); const route = useRoute(); const { visibleContainers, allContainersById } = storeToRefs(store); -const showNav = ref(false); +let showNav = $ref(false); watch(route, () => { - showNav.value = false; + showNav = false; });