mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-24 06:28:42 +01:00
Code Issues Projects Releases Wiki Activity

feat: adds a side panel for complex logs that enables reordering and enabling fields (#3237)

Browse Source
This commit is contained in:
Amir Raminfar
2024-08-28 17:37:04 -07:00
committed by GitHub
parent 62a2ef9eb4
commit 85271a595a
31 changed files with 345 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
assets/components/LogViewer/LogViewer.vue
View File

@@ -1,20 +1,18 @@
<template>
<LogList
:messages="filtered"
:last-selected-item="lastSelectedItem"
:visible-keys="visibleKeys"
:show-container-name="showContainerName"
/>
<SideDrawer ref="drawer">
<LogDetails :entry="entry" v-if="entry && entry instanceof ComplexLogEntry" />
</SideDrawer>
<LogList :messages="filtered" :last-selected-item="lastSelectedItem" :show-container-name="showContainerName" />
</template>
<script lang="ts" setup>
import { useRouteHash } from "@vueuse/router";
import { type JSONObject, LogEntry } from "@/models/LogEntry";
import SideDrawer from "@/components/common/SideDrawer.vue";
import { ComplexLogEntry, type JSONObject, LogEntry } from "@/models/LogEntry";
const props = defineProps<{
messages: LogEntry<string | JSONObject>[];
visibleKeys: string[][];
visibleKeys: Map<string[], boolean>;
showContainerName: boolean;
}>();
@@ -23,6 +21,10 @@ const { messages, visibleKeys } = toRefs(props);
const { filteredPayload } = useVisibleFilter(visibleKeys);
const { filteredMessages } = useSearchFilter();
const drawer = ref<InstanceType<typeof SideDrawer>>() as Ref<InstanceType<typeof SideDrawer>>;
const { entry } = provideLogDetails(drawer);
const visible = filteredPayload(messages);
const filtered = filteredMessages(visible);