removed unnecessary logs index and updated logs ui
This commit is contained in:
Gani Georgiev
@@ -17,7 +17,7 @@
|
||||
let log = {};
|
||||
let isLoading = false;
|
||||
|
||||
$: hasData = !CommonHelper.isEmpty(log.data);
|
||||
$: isRequest = log.data?.type == "request";
|
||||
|
||||
export function show(modelOrId) {
|
||||
resolveModel(modelOrId).then((model) => {
|
||||
@@ -72,6 +72,7 @@
|
||||
"referer",
|
||||
"remoteIp",
|
||||
"userIp",
|
||||
"userAgent",
|
||||
"error",
|
||||
"details",
|
||||
//
|
||||
@@ -148,7 +149,7 @@
|
||||
<td class="min-width txt-hint txt-bold">created</td>
|
||||
<td><LogDate date={log.created} /></td>
|
||||
</tr>
|
||||
{#if log.data?.type != "request"}
|
||||
{#if !isRequest}
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">message</td>
|
||||
<td>
|
||||
@@ -162,18 +163,25 @@
|
||||
{/if}
|
||||
{#each extractKeys(log.data) as key}
|
||||
{@const value = log.data[key]}
|
||||
{@const isJson = value !== null && typeof value == "object"}
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold" class:v-align-top={hasData}>
|
||||
<td class="min-width txt-hint txt-bold" class:v-align-top={isJson}>
|
||||
data.{key}
|
||||
</td>
|
||||
<td>
|
||||
{#if value !== null && typeof value == "object"}
|
||||
<CodeBlock content={JSON.stringify(value, null, 2)} />
|
||||
{:else if CommonHelper.isEmpty(value)}
|
||||
{#if CommonHelper.isEmpty(value)}
|
||||
<span class="txt txt-hint">N/A</span>
|
||||
{:else if isJson}
|
||||
<CodeBlock content={JSON.stringify(value, null, 2)} />
|
||||
{:else if key == "error"}
|
||||
<span class="label label-danger">
|
||||
{value}
|
||||
</span>
|
||||
{:else if key == "details"}
|
||||
<CodeBlock content={value} language="html" />
|
||||
{:else}
|
||||
<span class="txt">
|
||||
{value}{key == "execTime" ? "ms" : ""}
|
||||
{value}{isRequest && key == "execTime" ? "ms" : ""}
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import {
|
||||
Chart,
|
||||
BarController,
|
||||
BarElement,
|
||||
CategoryScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
LineController,
|
||||
LinearScale,
|
||||
TimeScale,
|
||||
Filler,
|
||||
@@ -73,20 +73,22 @@
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
Chart.register(BarController, BarElement, CategoryScale, LinearScale, TimeScale, Filler, Tooltip);
|
||||
Chart.register(LineElement, PointElement, LineController, LinearScale, TimeScale, Filler, Tooltip);
|
||||
|
||||
chartInst = new Chart(chartCanvas, {
|
||||
type: "bar",
|
||||
type: "line",
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: "Total requests",
|
||||
data: chartData,
|
||||
backgroundColor: "#e34562",
|
||||
maxBarThickness: 40,
|
||||
borderRadius: 2,
|
||||
minBarLength: 7,
|
||||
hoverBackgroundColor: "#e34562",
|
||||
borderColor: "#e34562",
|
||||
pointBackgroundColor: "#e34562",
|
||||
backgroundColor: "rgb(239,69,101,0.05)",
|
||||
borderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointBorderWidth: 0,
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -115,7 +117,6 @@
|
||||
},
|
||||
},
|
||||
x: {
|
||||
// offset: false,
|
||||
type: "time",
|
||||
time: {
|
||||
unit: "hour",
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import Scroller from "@/components/base/Scroller.svelte";
|
||||
import LogLevel from "@/components/logs/LogLevel.svelte";
|
||||
import LogDate from "@/components/logs/LogDate.svelte";
|
||||
import FormattedDate from "@/components/base/FormattedDate.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@@ -211,6 +212,7 @@
|
||||
<tbody>
|
||||
{#each logs as log (log.id)}
|
||||
{@const hasData = log.data && CommonHelper.isObject(log.data)}
|
||||
{@const isRequest = log.data?.type == "request"}
|
||||
<tr
|
||||
tabindex="0"
|
||||
class="row-handle"
|
||||
@@ -242,25 +244,30 @@
|
||||
|
||||
<td class="col-type-text col-field-data">
|
||||
<div class="flex flex-gap-10">
|
||||
{#if log.message}
|
||||
<span class="txt-ellipsis">{log.message}</span>
|
||||
{/if}
|
||||
|
||||
<span class="txt-ellipsis">
|
||||
{isRequest ? decodeURIComponent(log.message) : log.message}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-gap-10 m-t-10">
|
||||
{#if hasData}
|
||||
{#if log.data.status}
|
||||
<span class="label label-sm">{log.data.status}</span>
|
||||
<span class="label label-sm">status: {log.data.status}</span>
|
||||
{/if}
|
||||
{#if log.data.execTime}
|
||||
<span class="label label-sm">{log.data.execTime}ms</span>
|
||||
<span class="label label-sm">execTime: {log.data.execTime}ms</span>
|
||||
{/if}
|
||||
{#if log.data.auth}
|
||||
<span class="label label-sm">{log.data.auth}</span>
|
||||
<span class="label label-sm">auth: {log.data.auth}</span>
|
||||
{/if}
|
||||
{#if log.data.clientId}
|
||||
<span class="label label-sm">clientId: {log.data.clientId}</span>
|
||||
{/if}
|
||||
{#if log.data.userIp}
|
||||
<span class="label label-sm">{log.data.userIp}</span>
|
||||
<span class="label label-sm">userIp: {log.data.userIp}</span>
|
||||
{/if}
|
||||
{#if log.data.error}
|
||||
<span class="label label-sm label-danger">
|
||||
error:
|
||||
{CommonHelper.truncate(
|
||||
typeof log.data.error === "string"
|
||||
? log.data.error
|
||||
@@ -271,12 +278,6 @@
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if hasData}
|
||||
<div class="block txt-mono txt-xs txt-hint txt-ellipsis m-t-5">
|
||||
{CommonHelper.truncate(JSON.stringify(log.data), 350)}
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="col-type-date col-field-created">
|
||||
@@ -355,6 +356,9 @@
|
||||
margin-top: var(--smSpacing);
|
||||
bottom: var(--baseSpacing);
|
||||
}
|
||||
.col-field-level {
|
||||
min-width: 100px;
|
||||
}
|
||||
.col-field-data {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user