From 85271a595ade08b4a0a76622e76b1b8ce3a1534c Mon Sep 17 00:00:00 2001 From: Amir Raminfar Date: Wed, 28 Aug 2024 17:37:04 -0700 Subject: [PATCH] feat: adds a side panel for complex logs that enables reordering and enabling fields (#3237) --- assets/auto-imports.d.ts | 11 ++ assets/components.d.ts | 3 + assets/components/FuzzySearchModal.vue | 7 +- .../components/GroupedViewer/GroupedLog.vue | 3 +- .../components/LogViewer/ComplexLogItem.vue | 15 +-- assets/components/LogViewer/FieldList.vue | 74 ----------- assets/components/LogViewer/LogDetails.vue | 119 ++++++++++++++++++ assets/components/LogViewer/LogLevel.vue | 11 +- assets/components/LogViewer/LogList.vue | 8 +- .../LogViewer/LogMessageActions.vue | 4 +- assets/components/LogViewer/LogViewer.vue | 20 +-- .../components/LogViewer/ViewerWithSource.vue | 2 +- .../__snapshots__/EventSource.spec.ts.snap | 20 ++- .../MultiContainerLog.vue | 5 +- assets/components/ScrollableView.vue | 4 +- .../components/ServiceViewer/ServiceLog.vue | 3 +- assets/components/StackViewer/StackLog.vue | 3 +- assets/components/common/SideDrawer.vue | 34 +++++ assets/composable/profileStorage.ts | 36 +++++- assets/composable/showLogDetails.ts | 22 ++++ assets/composable/storage.ts | 26 ++-- assets/composable/visible.ts | 2 +- assets/models/LogEntry.ts | 17 +-- assets/pages/settings.vue | 3 - assets/stores/config.ts | 2 +- assets/utils/index.ts | 22 +++- internal/profile/disk.go | 12 +- internal/web/auth_test.go | 1 + locales/en.yml | 6 +- package.json | 3 +- pnpm-lock.yaml | 21 +++- 31 files changed, 345 insertions(+), 174 deletions(-) delete mode 100644 assets/components/LogViewer/FieldList.vue create mode 100644 assets/components/LogViewer/LogDetails.vue create mode 100644 assets/components/common/SideDrawer.vue create mode 100644 assets/composable/showLogDetails.ts diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts index 247ab533..a81ea7b3 100644 --- a/assets/auto-imports.d.ts +++ b/assets/auto-imports.d.ts @@ -50,6 +50,7 @@ declare global { const effectScope: typeof import('vue')['effectScope'] const extendRef: typeof import('@vueuse/core')['extendRef'] const flattenJSON: typeof import('./utils/index')['flattenJSON'] + const flattenJSONToMap: typeof import('./utils/index')['flattenJSONToMap'] const formatBytes: typeof import('./utils/index')['formatBytes'] const getActivePinia: typeof import('pinia')['getActivePinia'] const getCurrentInstance: typeof import('vue')['getCurrentInstance'] @@ -104,6 +105,7 @@ declare global { const persistentVisibleKeysForContainer: typeof import('./composable/storage')['persistentVisibleKeysForContainer'] const pinnedContainers: typeof import('./composable/storage')['pinnedContainers'] const provide: typeof import('vue')['provide'] + const provideDetails: typeof import('./composable/showDetails')['provideDetails'] const provideLocal: typeof import('@vueuse/core')['provideLocal'] const provideLogDetails: typeof import('./composable/showLogDetails')['provideLogDetails'] const provideLoggingContext: typeof import('./composable/logContext')['provideLoggingContext'] @@ -205,6 +207,7 @@ declare global { const useDebounce: typeof import('@vueuse/core')['useDebounce'] const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn'] const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory'] + const useDetails: typeof import('./composable/showDetails')['useDetails'] const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion'] const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation'] const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio'] @@ -413,6 +416,7 @@ declare module 'vue' { readonly effectScope: UnwrapRef readonly extendRef: UnwrapRef readonly flattenJSON: UnwrapRef + readonly flattenJSONToMap: UnwrapRef readonly formatBytes: UnwrapRef readonly getActivePinia: UnwrapRef readonly getCurrentInstance: UnwrapRef @@ -468,6 +472,7 @@ declare module 'vue' { readonly pinnedContainers: UnwrapRef readonly provide: UnwrapRef readonly provideLocal: UnwrapRef + readonly provideLogDetails: UnwrapRef readonly provideLoggingContext: UnwrapRef readonly provideScrollContext: UnwrapRef readonly reactify: UnwrapRef @@ -497,6 +502,7 @@ declare module 'vue' { readonly shallowReadonly: UnwrapRef readonly shallowRef: UnwrapRef readonly showAllContainers: UnwrapRef + readonly showLogDetails: UnwrapRef readonly showStd: UnwrapRef readonly showTimestamp: UnwrapRef readonly size: UnwrapRef @@ -607,6 +613,7 @@ declare module 'vue' { readonly useKeyModifier: UnwrapRef readonly useLastChanged: UnwrapRef readonly useLocalStorage: UnwrapRef + readonly useLogDetails: UnwrapRef readonly useLogSearchContext: UnwrapRef readonly useLoggingContext: UnwrapRef readonly useMagicKeys: UnwrapRef @@ -766,6 +773,7 @@ declare module '@vue/runtime-core' { readonly effectScope: UnwrapRef readonly extendRef: UnwrapRef readonly flattenJSON: UnwrapRef + readonly flattenJSONToMap: UnwrapRef readonly formatBytes: UnwrapRef readonly getActivePinia: UnwrapRef readonly getCurrentInstance: UnwrapRef @@ -821,6 +829,7 @@ declare module '@vue/runtime-core' { readonly pinnedContainers: UnwrapRef readonly provide: UnwrapRef readonly provideLocal: UnwrapRef + readonly provideLogDetails: UnwrapRef readonly provideLoggingContext: UnwrapRef readonly provideScrollContext: UnwrapRef readonly reactify: UnwrapRef @@ -850,6 +859,7 @@ declare module '@vue/runtime-core' { readonly shallowReadonly: UnwrapRef readonly shallowRef: UnwrapRef readonly showAllContainers: UnwrapRef + readonly showLogDetails: UnwrapRef readonly showStd: UnwrapRef readonly showTimestamp: UnwrapRef readonly size: UnwrapRef @@ -960,6 +970,7 @@ declare module '@vue/runtime-core' { readonly useKeyModifier: UnwrapRef readonly useLastChanged: UnwrapRef readonly useLocalStorage: UnwrapRef + readonly useLogDetails: UnwrapRef readonly useLogSearchContext: UnwrapRef readonly useLoggingContext: UnwrapRef readonly useMagicKeys: UnwrapRef diff --git a/assets/components.d.ts b/assets/components.d.ts index 4f6e7e14..e0487b12 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -49,6 +49,7 @@ declare module 'vue' { LabeledInput: typeof import('./components/common/LabeledInput.vue')['default'] Links: typeof import('./components/Links.vue')['default'] LogDate: typeof import('./components/LogViewer/LogDate.vue')['default'] + LogDetails: typeof import('./components/LogViewer/LogDetails.vue')['default'] LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default'] LogList: typeof import('./components/LogViewer/LogList.vue')['default'] LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default'] @@ -69,6 +70,7 @@ declare module 'vue' { 'Mdi:hexagonMultiple': typeof import('~icons/mdi/hexagon-multiple')['default'] 'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default'] 'Mdi:magnify': typeof import('~icons/mdi/magnify')['default'] + 'Mdi:mdi:close': typeof import('~icons/mdi/mdi')['default'] 'Mdi:satelliteVariant': typeof import('~icons/mdi/satellite-variant')['default'] MobileMenu: typeof import('./components/common/MobileMenu.vue')['default'] MultiContainerActionToolbar: typeof import('./components/LogViewer/MultiContainerActionToolbar.vue')['default'] @@ -97,6 +99,7 @@ declare module 'vue' { ScrollProgress: typeof import('./components/ScrollProgress.vue')['default'] Search: typeof import('./components/Search.vue')['default'] ServiceLog: typeof import('./components/ServiceViewer/ServiceLog.vue')['default'] + SideDrawer: typeof import('./components/common/SideDrawer.vue')['default'] SideMenu: typeof import('./components/SideMenu.vue')['default'] SidePanel: typeof import('./components/SidePanel.vue')['default'] SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default'] diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue index 7940357e..f1846f43 100644 --- a/assets/components/FuzzySearchModal.vue +++ b/assets/components/FuzzySearchModal.vue @@ -13,7 +13,12 @@ v-model="query" :placeholder="$t('placeholder.search-containers')" /> - +
+ +
@@ -43,6 +43,5 @@ const { customGroups } = storeToRefs(swarmStore); const group = computed(() => customGroups.value.find((g) => g.name === name) ?? new GroupedContainers("", [])); -const visibleKeys = ref([]); provideLoggingContext(toRef(() => group.value.containers)); diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue index 6c7f3b5f..b4d020d3 100644 --- a/assets/components/LogViewer/ComplexLogItem.vue +++ b/assets/components/LogViewer/ComplexLogItem.vue @@ -1,10 +1,5 @@ @@ -36,7 +36,6 @@ const { name, scrollable = false } = defineProps<{ name: string; }>(); -const visibleKeys = ref([]); const viewer = ref>(); const store = useSwarmStore(); const { services } = storeToRefs(store) as unknown as { services: Ref }; diff --git a/assets/components/StackViewer/StackLog.vue b/assets/components/StackViewer/StackLog.vue index 197a8f88..8920e4cf 100644 --- a/assets/components/StackViewer/StackLog.vue +++ b/assets/components/StackViewer/StackLog.vue @@ -22,7 +22,7 @@ ref="viewer" :stream-source="useStackStream" :entity="stack" - :visible-keys="visibleKeys" + :visible-keys="new Map()" :show-container-name="true" /> @@ -38,7 +38,6 @@ const { name, scrollable = false } = defineProps<{ name: string; }>(); -const visibleKeys = ref([]); const viewer = ref>(); const store = useSwarmStore(); const { stacks } = storeToRefs(store) as unknown as { stacks: Ref }; diff --git a/assets/components/common/SideDrawer.vue b/assets/components/common/SideDrawer.vue new file mode 100644 index 00000000..c585f731 --- /dev/null +++ b/assets/components/common/SideDrawer.vue @@ -0,0 +1,34 @@ + + + diff --git a/assets/composable/profileStorage.ts b/assets/composable/profileStorage.ts index ed45e308..7b70990d 100644 --- a/assets/composable/profileStorage.ts +++ b/assets/composable/profileStorage.ts @@ -1,14 +1,34 @@ import { Profile } from "@/stores/config"; -export function useProfileStorage(key: K, defaultValue: NonNullable) { +interface SerializerTransformer { + from: (raw: U) => T; + to: (value: T) => U; +} + +export function useProfileStorage( + key: K, + defaultValue: NonNullable, + transformer?: SerializerTransformer, any>, +) { const storageKey = "DOZZLE_" + key.toUpperCase(); const storage = useStorage>(storageKey, defaultValue, undefined, { writeDefaults: false, mergeDefaults: true, + serializer: transformer + ? { + read: (raw) => transformer.from(JSON.parse(raw)), + write: (value) => JSON.stringify(transformer.to(value)), + } + : undefined, + onError: (e) => { + console.error(`Failed to read ${storageKey} from storage`, e); + }, }); if (config.profile?.[key]) { - if (storage.value instanceof Set && config.profile[key] instanceof Array) { + if (transformer) { + storage.value = transformer.from(config.profile[key]); + } else if (storage.value instanceof Set && config.profile[key] instanceof Array) { storage.value = new Set([...(config.profile[key] as Iterable)]) as unknown as NonNullable; } else if (config.profile[key] instanceof Array) { storage.value = config.profile[key] as NonNullable; @@ -23,9 +43,19 @@ export function useProfileStorage(key: K, defaultValue: watch( storage, (value) => { + const transformedValue = transformer ? transformer.to(value) : value; + fetch(withBase("/api/profile"), { method: "PATCH", - body: JSON.stringify({ [key]: value }, (_, value) => (value instanceof Set ? [...value] : value)), + body: JSON.stringify({ [key]: transformedValue }, (_, value) => { + if (value instanceof Set) { + return Array.from(value); + } else if (value instanceof Map) { + return Array.from(value.entries()); + } else { + return value; + } + }), }); }, { deep: true }, diff --git a/assets/composable/showLogDetails.ts b/assets/composable/showLogDetails.ts new file mode 100644 index 00000000..63f6411e --- /dev/null +++ b/assets/composable/showLogDetails.ts @@ -0,0 +1,22 @@ +import { JSONObject, LogEntry } from "@/models/LogEntry"; +import SideDrawer from "@/components/common/SideDrawer.vue"; + +export const showLogDetails = Symbol("showLogDetails") as InjectionKey< + (logEntry: LogEntry) => void +>; + +export const provideLogDetails = (drawer: Ref>) => { + const entry = ref>(); + + provide(showLogDetails, (logEntry: LogEntry) => { + entry.value = logEntry; + drawer.value?.open(); + }); + + return { entry }; +}; + +export const useLogDetails = () => { + const showDetails = inject(showLogDetails, () => {}); + return showDetails; +}; diff --git a/assets/composable/storage.ts b/assets/composable/storage.ts index 1a8865d7..3df01363 100644 --- a/assets/composable/storage.ts +++ b/assets/composable/storage.ts @@ -7,17 +7,21 @@ if (config.hosts.length === 1 && !sessionHost.value) { sessionHost.value = config.hosts[0].id; } -export function persistentVisibleKeysForContainer(container: Ref): Ref { - const storage = useProfileStorage("visibleKeys", {}); - return computed(() => { - if (!(container.value.storageKey in storage.value)) { - // Returning a temporary ref here to avoid writing an empty array to storage - const visibleKeys = ref([]); - watchOnce(visibleKeys, () => (storage.value[container.value.storageKey] = visibleKeys.value), { deep: true }); - return visibleKeys.value; - } - - return storage.value[container.value.storageKey]; +const storage = useProfileStorage("visibleKeys", new Map>(), { + from(transformed: [string, [string[], boolean][]][]) { + return new Map(transformed.map(([key, value]) => [key, new Map(value)])); + }, + to(value: Map>) { + const outer = Array.from(value.entries()); + const inner = outer.map(([key, value]) => [key, Array.from(value.entries())]); + return inner; + }, +}); +export function persistentVisibleKeysForContainer(container: Ref): Ref> { + // Computed property to only store to storage when the value changes + return computed({ + get: () => storage.value.get(container.value.storageKey) || new Map(), + set: (value: Map) => storage.value.set(container.value.storageKey, value), }); } diff --git a/assets/composable/visible.ts b/assets/composable/visible.ts index 14502d1f..dcbee4f8 100644 --- a/assets/composable/visible.ts +++ b/assets/composable/visible.ts @@ -1,7 +1,7 @@ import { ComplexLogEntry, type JSONObject, type LogEntry } from "@/models/LogEntry"; import type { Ref } from "vue"; -export function useVisibleFilter(visibleKeys: Ref) { +export function useVisibleFilter(visibleKeys: Ref>) { function filteredPayload(messages: Ref[]>) { return computed(() => { return messages.value.map((d) => { diff --git a/assets/models/LogEntry.ts b/assets/models/LogEntry.ts index 6a95be6e..39eaa609 100644 --- a/assets/models/LogEntry.ts +++ b/assets/models/LogEntry.ts @@ -67,15 +67,18 @@ export class ComplexLogEntry extends LogEntry { date: Date, public readonly level: Level, public readonly std: Std, - visibleKeys?: Ref, + visibleKeys?: Ref>, ) { super(message, containerID, id, date, std, level); if (visibleKeys) { this.filteredMessage = computed(() => { - if (!visibleKeys.value.length) { + if (visibleKeys.value.size === 0) { return flattenJSON(message); } else { - return visibleKeys.value.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(message, attr) }), {}); + const keys = Array.from(visibleKeys.value.entries()) + .filter(([, value]) => value) + .map(([key]) => key); + return keys.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(message, attr) }), {}); } }); } else { @@ -87,14 +90,14 @@ export class ComplexLogEntry extends LogEntry { } public get message(): JSONObject { - return this.filteredMessage.value; + return unref(this.filteredMessage); } public get unfilteredMessage(): JSONObject { return this._message; } - static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref): ComplexLogEntry { + static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref>): ComplexLogEntry { return new ComplexLogEntry( event._message, event.containerID, @@ -165,7 +168,7 @@ export function asLogEntry(event: LogEvent): LogEntry { event.id, new Date(event.ts), event.l, - event.s === "unknown" ? "stderr" : event.s ?? "stderr", + event.s === "unknown" ? "stderr" : (event.s ?? "stderr"), ); } else { return new SimpleLogEntry( @@ -175,7 +178,7 @@ export function asLogEntry(event: LogEvent): LogEntry { new Date(event.ts), event.l, event.p, - event.s === "unknown" ? "stderr" : event.s ?? "stderr", + event.s === "unknown" ? "stderr" : (event.s ?? "stderr"), ); } } diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue index 3d560bc0..f9c61de8 100644 --- a/assets/pages/settings.vue +++ b/assets/pages/settings.vue @@ -108,7 +108,6 @@