fix(nc-gui): webhook logs details section header ui changes

This commit is contained in:
Ramesh Mane
2025-06-28 16:30:12 +00:00
parent ae10a6c134
commit 2789fd3524
4 changed files with 25 additions and 25 deletions

View File

@@ -56,33 +56,35 @@ const hookType = (item: HookLogType) => {
<span class="value">{{ item.execution_time }} ms</span>
</div>
<div class="log-detail-item">
<span class="label">Webhook Type</span>
<span class="label">Trigger type</span>
<span class="value">{{ hookType(item) }}</span>
</div>
<div class="log-detail-item">
<span class="label">Request Time</span>
<span class="value">{{ hookLogFormatter(item.created_at) }}</span>
</div>
<div class="log-detail-item">
<span class="label">ID</span>
<span class="value">{{ item.id }}</span>
</div>
<div class="log-detail-item">
<span class="label">Triggered By</span>
<span class="value">{{ item.triggered_by }}</span>
</div>
<div class="log-detail-item">
<span class="label">Test call</span>
<span class="value">{{ !!item.test_call }}</span>
</div>
<div class="log-detail-item">
<span class="label">ID</span>
<span class="value">{{ item.id }}</span>
</div>
<div v-if="item.error_code" class="log-detail-item">
<span class="label">Error code</span>
<span class="value">{{ item.error_code }}</span>
</div>
<div v-if="item.error_message" class="log-detail-item">
<span class="label">Error message</span>
<span class="value">{{ item.error_message }}</span>
</div>
<div class="log-detail-item">
<span class="label">Triggered By</span>
<span class="value">{{ item.triggered_by }}</span>
</div>
</div>
<div class="request-response-wrapper">
@@ -115,11 +117,11 @@ const hookType = (item: HookLogType) => {
.log-detail-item {
@apply flex flex-row;
.label {
@apply w-30 font-bold text-small1;
@apply w-30 font-bold text-small1 text-nc-content-gray-emphasis;
}
.value {
@apply text-gray-500 text-small1;
@apply text-nc-content-gray-subtle2 font-500 text-small1;
}
}
}

View File

@@ -70,14 +70,12 @@ const emit = defineEmits<Emit>()
.item {
@apply cursor-pointer flex gap-2 p-3 rounded-lg;
&:hover {
@apply bg-gray-50;
}
@apply hover:bg-nc-bg-gray-extralight;
&.active {
@apply bg-[#F0F3FF];
@apply bg-nc-bg-brand;
h4 {
@apply text-[#2952CC];
@apply text-brand-600;
font-weight: bold;
}
}

View File

@@ -40,14 +40,14 @@ const formattedPayload = computed(() => {
<span class="text-gray-500 font-weight-bold text-xs leading-[18px]">Header</span>
<div class="log-details">
<div v-for="(value, key) in headers" :key="key" class="log-detail-item">
<nc-tooltip class="text-small1 min-w-40">
<NcTooltip class="text-small1 min-w-40">
<template #title>{{ key }}</template>
<span class="label"> {{ key }}</span>
</nc-tooltip>
<nc-tooltip class="text-small1">
</NcTooltip>
<NcTooltip class="text-small1">
<template #title>{{ value }}</template>
<span class="value"> {{ value }}</span>
</nc-tooltip>
</NcTooltip>
</div>
</div>
</div>
@@ -55,14 +55,14 @@ const formattedPayload = computed(() => {
<span class="text-gray-500 font-weight-bold text-xs leading-[18px]">Params</span>
<div class="log-details">
<div v-for="(value, key) in params" :key="key" class="log-detail-item">
<nc-tooltip class="text-small1 min-w-40">
<NcTooltip class="text-small1 min-w-40">
<template #title>{{ key }}</template>
<span class="label"> {{ key }}</span>
</nc-tooltip>
<nc-tooltip class="text-small1">
</NcTooltip>
<NcTooltip class="text-small1">
<template #title>{{ value }}</template>
<span class="value"> {{ value }}</span>
</nc-tooltip>
</NcTooltip>
</div>
</div>
</div>