Updated logs page
This commit is contained in:
@@ -3,7 +3,8 @@
|
|||||||
// import
|
// import
|
||||||
|
|
||||||
import hljs from "highlight.js";
|
import hljs from "highlight.js";
|
||||||
import javascript from "highlight.js/lib/languages/javascript";
|
import json from "highlight.js/lib/languages/json";
|
||||||
|
import xml from "highlight.js/lib/languages/xml";
|
||||||
import "highlight.js/styles/atom-one-dark.css";
|
import "highlight.js/styles/atom-one-dark.css";
|
||||||
import LogDate from "~/components/server-logs/LogDate.vue";
|
import LogDate from "~/components/server-logs/LogDate.vue";
|
||||||
import { useQuery } from "@tanstack/vue-query";
|
import { useQuery } from "@tanstack/vue-query";
|
||||||
@@ -11,7 +12,7 @@ import { useQuery } from "@tanstack/vue-query";
|
|||||||
// meta
|
// meta
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware : "check-is-debug",
|
middleware: "check-is-debug",
|
||||||
layout: "none"
|
layout: "none"
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -41,7 +42,9 @@ const logIcon = (status: number) => {
|
|||||||
// lifecycle
|
// lifecycle
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
hljs.registerLanguage("json", javascript);
|
hljs.registerLanguage("json", json);
|
||||||
|
hljs.registerLanguage("xml", xml);
|
||||||
|
|
||||||
hljs.highlightAll();
|
hljs.highlightAll();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -103,40 +106,40 @@ onMounted(() => {
|
|||||||
<summary class="cursor-pointer select-none">Details :</summary>
|
<summary class="cursor-pointer select-none">Details :</summary>
|
||||||
<div class="flex flex-col gap-2 mt-2 ml-4">
|
<div class="flex flex-col gap-2 mt-2 ml-4">
|
||||||
<details
|
<details
|
||||||
v-if="log.response && typeof log.response === 'string' && log.response.includes('<!DOCTYPE html>')"
|
v-if="log.response && typeof log.response === 'string' && (log.response.startsWith('<!DOCTYPE html>') || log.response.startsWith('<html>'))"
|
||||||
class="text-white"
|
class="text-white"
|
||||||
>
|
>
|
||||||
<summary class="cursor-pointer select-none">Preview :</summary>
|
<summary class="cursor-pointer select-none">Preview :</summary>
|
||||||
<iframe class="w-full h-[500px]" :srcdoc="log.response"></iframe>
|
<iframe class="w-full h-[500px] bg-white" :srcdoc="log.response"></iframe>
|
||||||
</details>
|
</details>
|
||||||
<details v-if="log.response" class="text-white">
|
<details v-if="log.response" class="text-white">
|
||||||
<summary class="cursor-pointer select-none">Response :</summary>
|
<summary class="cursor-pointer select-none">Response :</summary>
|
||||||
<pre>
|
<pre style="tab-size: 2">
|
||||||
<code class="language-json">
|
<code class="whitespace-pre-wrap">
|
||||||
{{ log.response }}
|
{{ String(log.response) }}
|
||||||
</code>
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
</details>
|
</details>
|
||||||
<details class="text-white">
|
<details class="text-white">
|
||||||
<summary class="cursor-pointer select-none">Req Headers :</summary>
|
<summary class="cursor-pointer select-none">Req Headers :</summary>
|
||||||
<pre class="whitespace-pre-line">
|
<pre style="tab-size: 2">
|
||||||
<code class="language-json">
|
<code class="whitespace-pre-line">
|
||||||
{{ log.requestHeaders }}
|
{{ log.requestHeaders }}
|
||||||
</code>
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
</details>
|
</details>
|
||||||
<details class="text-white">
|
<details class="text-white">
|
||||||
<summary class="cursor-pointer select-none">Res Headers :</summary>
|
<summary class="cursor-pointer select-none">Res Headers :</summary>
|
||||||
<pre>
|
<pre style="tab-size: 2">
|
||||||
<code class="language-json">
|
<code class="whitespace-pre-line">
|
||||||
{{ log.responseHeaders }}
|
{{ log.responseHeaders }}
|
||||||
</code>
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
</details>
|
</details>
|
||||||
<details v-if="log.payload" class="text-white">
|
<details v-if="log.payload" class="text-white">
|
||||||
<summary class="cursor-pointer select-none">Payload :</summary>
|
<summary class="cursor-pointer select-none">Payload :</summary>
|
||||||
<pre>
|
<pre style="tab-size: 2">
|
||||||
<code class="language-json">
|
<code class="whitespace-pre-line">
|
||||||
{{ log.payload }}
|
{{ log.payload }}
|
||||||
</code>
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
@@ -158,11 +161,11 @@ onMounted(() => {
|
|||||||
|
|
||||||
@keyframes log-fade-in {
|
@keyframes log-fade-in {
|
||||||
from {
|
from {
|
||||||
opacity : 0;
|
opacity: 0;
|
||||||
scale: 0.8;
|
scale: 0.8;
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity : 1;
|
opacity: 1;
|
||||||
scale: 1;
|
scale: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user