mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-31 10:07:22 +01:00
Code Issues Projects Releases Wiki Activity

fix: fixes search and urls in detail panel (#3907)

Browse Source
This commit is contained in:
Amir Raminfar
2025-05-21 19:59:00 -07:00
committed by GitHub
parent 804199aa9a
commit b70c2da290
9 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/components/LogViewer/EventSource.spec.ts
View File

@@ -138,7 +138,7 @@ describe("<ContainerEventSource />", () => {
const wrapper = createLogEventSource();
sources[sourceUrl].emitOpen();
sources[sourceUrl].emitMessage({
data: `{"ts":1560336942459, "m":"This is a message.", "id":1}`,
data: `{"ts":1560336942459, "m":"This is a message.", "id":1, "rm": "This is a message."}`,
});
vi.runAllTimers();
@@ -154,7 +154,7 @@ describe("<ContainerEventSource />", () => {
const wrapper = createLogEventSource();
sources[sourceUrl].emitOpen();
sources[sourceUrl].emitMessage({
data: `{"ts":1560336942459, "m":"This is a message.", "id":1}`,
data: `{"ts":1560336942459, "m":"This is a message.", "id":1, "rm": "This is a message."}`,
});
vi.runAllTimers();
@@ -167,7 +167,7 @@ describe("<ContainerEventSource />", () => {
const wrapper = createLogEventSource({ hourStyle: "12" });
sources[sourceUrl].emitOpen();
sources[sourceUrl].emitMessage({
data: `{"ts":1560336942459, "m":"foo bar", "id":1}`,
data: `{"ts":1560336942459, "m":"foo bar", "id":1, "rm": "foo bar"}`,
});
vi.runAllTimers();

15
assets/components/LogViewer/LogDetails.vue
View File

@@ -29,7 +29,7 @@
<div class="flex gap-2">
Raw JSON
<UseClipboard v-slot="{ copy, copied }" :source="JSON.stringify(entry.unfilteredMessage)">
<UseClipboard v-slot="{ copy, copied }" :source="entry.rawMessage">
<button class="swap outline-hidden" @click="copy()" :class="{ 'hover:swap-active': copied }">
<mdi:check class="swap-on" />
<mdi:content-copy class="swap-off" />
@@ -37,7 +37,7 @@
</UseClipboard>
</div>
<div class="bg-base-200 max-h-48 overflow-scroll rounded-sm border border-white/20 p-2">
<pre v-html="syntaxHighlight(entry.unfilteredMessage)"></pre>
<pre v-html="syntaxHighlight(entry.rawMessage)"></pre>
</div>
</section>
<table class="table-pin-rows table table-fixed" v-if="entry instanceof ComplexLogEntry">
@@ -59,7 +59,7 @@
{{ key.join(".") }}
</td>
<td class="truncate max-md:hidden">
<code v-html="JSON.stringify(value)"></code>
<code>{{ JSON.stringify(value) }}</code>
</td>
<td>
<input type="checkbox" class="toggle toggle-primary" :checked="enabled" @change="toggleField(key)" />
@@ -96,14 +96,15 @@ function toggleField(key: string[]) {
const fields = computed({
get() {
const fieldsWithValue: { key: string[]; value: any; enabled: boolean }[] = [];
const allFields = flattenJSONToMap(entry.unfilteredMessage);
const rawFields = JSON.parse(entry.rawMessage);
const allFields = flattenJSONToMap(rawFields);
if (visibleKeys.value.size === 0) {
for (const [key, value] of allFields) {
fieldsWithValue.push({ key, value, enabled: true });
}
} else {
for (const [key, enabled] of visibleKeys.value) {
const value = getDeep(entry.unfilteredMessage, key);
const value = getDeep(rawFields, key);
fieldsWithValue.push({ key, value, enabled });
}
@@ -141,8 +142,8 @@ const toggleAllFields = computed({
},
});
function syntaxHighlight(json: any) {
json = JSON.stringify(json, null, 2);
function syntaxHighlight(json: string) {
json = JSON.stringify(JSON.parse(json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")), null, 2);
return json.replace(
/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|\b\d+\b)/g,
function (match: string) {

3
assets/components/LogViewer/SimpleLogItem.vue
View File

@@ -6,14 +6,13 @@
></div>
<LogMessageActions
class="absolute -right-1 opacity-0 transition-opacity delay-150 duration-250 group-hover/entry:opacity-100"
:message="() => decodeXML(stripAnsi(logEntry.message))"
:message="() => stripAnsi(logEntry.rawMessage)"
:log-entry="logEntry"
/>
</LogItem>
</template>
<script lang="ts" setup>
import { SimpleLogEntry } from "@/models/LogEntry";
import { decodeXML } from "entities";
import AnsiConvertor from "ansi-to-html";
import stripAnsi from "strip-ansi";

1
assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
View File

@@ -74,6 +74,7 @@ SimpleLogEntry {
"id": 1,
"level": undefined,
"position": undefined,
"rawMessage": "This is a message.",
"std": "stderr",
}
`;