logs refactoring
This commit is contained in:
Gani Georgiev
@@ -1,14 +1,22 @@
|
||||
<script>
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import CodeBlock from "@/components/base/CodeBlock.svelte";
|
||||
import FormattedDate from "@/components/base/FormattedDate.svelte";
|
||||
import OverlayPanel from "@/components/base/OverlayPanel.svelte";
|
||||
import CopyIcon from "@/components/base/CopyIcon.svelte";
|
||||
import LogLevel from "@/components/logs/LogLevel.svelte";
|
||||
import LogDate from "@/components/logs/LogDate.svelte";
|
||||
|
||||
let logPanel;
|
||||
let item = {};
|
||||
let log = {};
|
||||
|
||||
$: hasData = !CommonHelper.isEmpty(log.data);
|
||||
|
||||
export function show(model) {
|
||||
item = model;
|
||||
if (CommonHelper.isEmpty(model)) {
|
||||
return;
|
||||
}
|
||||
|
||||
log = model;
|
||||
|
||||
return logPanel?.show();
|
||||
}
|
||||
@@ -16,8 +24,54 @@
|
||||
export function hide() {
|
||||
return logPanel?.hide();
|
||||
}
|
||||
|
||||
const priotizedKeys = [
|
||||
"execTime",
|
||||
"type",
|
||||
"auth",
|
||||
"status",
|
||||
"method",
|
||||
"url",
|
||||
"referer",
|
||||
"remoteIp",
|
||||
"userIp",
|
||||
"error",
|
||||
"details",
|
||||
//
|
||||
];
|
||||
|
||||
function extractKeys(data) {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
|
||||
let keys = [];
|
||||
|
||||
for (let key of priotizedKeys) {
|
||||
if (typeof data[key] !== "undefined") {
|
||||
keys.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
// append the rest
|
||||
const original = Object.keys(data);
|
||||
for (let key of original) {
|
||||
if (!keys.includes(key)) {
|
||||
keys.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
return keys;
|
||||
}
|
||||
|
||||
function downloadJson() {
|
||||
CommonHelper.downloadJson(log, "log_" + log.created.replaceAll(/[-:\. ]/gi, "") + ".json");
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<OverlayPanel bind:this={logPanel} class="overlay-panel-lg log-panel" on:hide on:show>
|
||||
<svelte:fragment slot="header">
|
||||
<h4>Request log</h4>
|
||||
@@ -26,69 +80,53 @@
|
||||
<table class="table-border">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">ID</td>
|
||||
<td>{item.id}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">Status</td>
|
||||
<td class="min-width txt-hint txt-bold">id</td>
|
||||
<td>
|
||||
<span class="label" class:label-danger={item.status >= 400}>
|
||||
{item.status}
|
||||
</span>
|
||||
<div class="label">
|
||||
<CopyIcon value={log.id} />
|
||||
<div class="txt">{log.id}</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">Method</td>
|
||||
<td>{item.method?.toUpperCase()}</td>
|
||||
<td class="min-width txt-hint txt-bold">level</td>
|
||||
<td><LogLevel level={log.level} /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">Auth</td>
|
||||
<td>{item.auth}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">URL</td>
|
||||
<td>{item.url}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">Referer</td>
|
||||
<td>
|
||||
{#if item.referer}
|
||||
<a href={item.referer} target="_blank" rel="noopener noreferrer">
|
||||
{item.referer}
|
||||
</a>
|
||||
{:else}
|
||||
<span class="txt-hint">N/A</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">Remote IP</td>
|
||||
<td>{item.remoteIp}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">User IP</td>
|
||||
<td>{item.userIp}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">UserAgent</td>
|
||||
<td>{item.userAgent}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">Meta</td>
|
||||
<td>
|
||||
{#if !CommonHelper.isEmpty(item.meta)}
|
||||
<div class="block">
|
||||
<CodeBlock content={JSON.stringify(item.meta, null, 2)} />
|
||||
</div>
|
||||
{:else}
|
||||
<span class="txt-hint">N/A</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">Created</td>
|
||||
<td><FormattedDate date={item.created} /></td>
|
||||
<td class="min-width txt-hint txt-bold">created</td>
|
||||
<td><LogDate date={log.created} /></td>
|
||||
</tr>
|
||||
{#if log.data?.type != "request"}
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">message</td>
|
||||
<td>
|
||||
{#if log.message}
|
||||
<span class="txt">{log.message}</span>
|
||||
{:else}
|
||||
<span class="txt txt-hint">N/A</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each extractKeys(log.data) as key}
|
||||
{@const value = log.data[key]}
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold" class:v-align-top={hasData}>
|
||||
data.{key}
|
||||
</td>
|
||||
<td>
|
||||
{#if value !== null && typeof value == "object"}
|
||||
<CodeBlock content={JSON.stringify(value, null, 2)} />
|
||||
{:else if CommonHelper.isEmpty(value)}
|
||||
<span class="txt txt-hint">N/A</span>
|
||||
{:else}
|
||||
<span class="txt">
|
||||
{value}{key == "execTime" ? "ms" : ""}
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -96,5 +134,10 @@
|
||||
<button type="button" class="btn btn-transparent" on:click={() => hide()}>
|
||||
<span class="txt">Close</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-primary" on:click={() => downloadJson()}>
|
||||
<i class="ri-download-line" />
|
||||
<span class="txt">Download as JSON</span>
|
||||
</button>
|
||||
</svelte:fragment>
|
||||
</OverlayPanel>
|
||||
|
||||
Reference in New Issue
Block a user