github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(nc-gui): revise call log display logic

pull/5349/head
Wing-Kam Wong 2 years ago
parent
5636eddcc4
commit
505c8f84d7
1 changed files with 76 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 141
      packages/nc-gui/components/webhook/CallLog.vue

141
packages/nc-gui/components/webhook/CallLog.vue
Unescape View File

@ -22,6 +22,10 @@ const currentPage = $ref(1)
const currentLimit = $ref(10) const currentLimit = $ref(10)
const showLogs = computed(
() => !(appInfo.value.automationLogLevel === 'OFF' || (appInfo.value.automationLogLevel === 'ALL' && !appInfo.value.ee)),
)
async function loadHookLogs(page = currentPage, limit = currentLimit) { async function loadHookLogs(page = currentPage, limit = currentLimit) {
try { try {
// cater empty records // cater empty records
@ -38,7 +42,9 @@ async function loadHookLogs(page = currentPage, limit = currentLimit) {
} }
onBeforeMount(async () => { onBeforeMount(async () => {
await loadHookLogs(currentPage, currentLimit) if (showLogs.value) {
await loadHookLogs(currentPage, currentLimit)
}
}) })
</script> </script>
@ -53,7 +59,10 @@ onBeforeMount(async () => {
The NC_AUTOMATION_LOG_LEVEL is set to “ERROR”, only error logs will be displayed. The NC_AUTOMATION_LOG_LEVEL is set to “ERROR”, only error logs will be displayed.
</span> </span>
<span v-if="appInfo.automationLogLevel === 'ALL'"> <span v-if="appInfo.automationLogLevel === 'ALL'">
The NC_AUTOMATION_LOG_LEVEL is set to “ALL”, both error and success logs will be displayed. <span v-if="appInfo.ee">
The NC_AUTOMATION_LOG_LEVEL is set to “ALL”, both error and success logs will be displayed.
</span>
<span v-else> Upgrade to Enterprise Edition to show all the logs. </span>
</span> </span>
<span> <span>
<!-- TODO: update the link --> <!-- TODO: update the link -->
@ -61,78 +70,80 @@ onBeforeMount(async () => {
</span> </span>
</a-card> </a-card>
<a-empty v-if="!hookLogs.length" /> <div v-if="showLogs">
<a-layout v-else> <a-empty v-if="!hookLogs.length" />
<a-layout-content> <a-layout v-else>
<a-collapse v-model:activeKey="activeKey" class="nc-hook-log-collapse"> <a-layout-content>
<a-collapse-panel v-for="(hookLog, idx) of hookLogs" :key="idx"> <a-collapse v-model:activeKey="activeKey" class="nc-hook-log-collapse">
<template #header> <a-collapse-panel v-for="(hookLog, idx) of hookLogs" :key="idx">
<div class="w-full cursor-pointer"> <template #header>
<div class="font-weight-medium flex"> <div class="w-full cursor-pointer">
<div class="flex-1"> <div class="font-weight-medium flex">
{{ hookLog.type }}: records.{{ hookLog.event }}.{{ hookLog.operation }} ({{ timeAgo(hookLog.created_at) }}) <div class="flex-1">
{{ hookLog.type }}: records.{{ hookLog.event }}.{{ hookLog.operation }} ({{ timeAgo(hookLog.created_at) }})
</div>
<div
v-if="hookLog.type === 'URL'"
class="mx-1 px-2 py-1 text-white rounded bg-red-500 text-xs"
:class="{ '!bg-green-500': parseProp(hookLog.response).status === 200 }"
>
{{ parseProp(hookLog.response).status }}
{{ parseProp(hookLog.response).statusText }}
</div>
<div v-if="hookLog.type === 'Email'">
<div v-if="hookLog.error_message" class="mx-1 px-2 py-1 text-white rounded text-xs bg-red-500">ERROR</div>
<div v-else class="mx-1 px-2 py-1 text-white rounded text-xs bg-green-500">OK</div>
</div>
</div> </div>
<div <div v-if="hookLog.type === 'URL'">
v-if="hookLog.type === 'URL'" <span class="font-weight-medium text-primary">
class="mx-1 px-2 py-1 text-white rounded bg-red-500 text-xs" {{ parseProp(hookLog.payload).method }}
:class="{ '!bg-green-500': parseProp(hookLog.response).status === 200 }" </span>
> {{ parseProp(hookLog.payload).path }}
{{ parseProp(hookLog.response).status }}
{{ parseProp(hookLog.response).statusText }}
</div> </div>
<div v-if="hookLog.type === 'Email'">
<div v-if="hookLog.error_message" class="mx-1 px-2 py-1 text-white rounded text-xs bg-red-500">ERROR</div>
<div v-else class="mx-1 px-2 py-1 text-white rounded text-xs bg-green-500">OK</div>
</div>
</div>
<div v-if="hookLog.type === 'URL'">
<span class="font-weight-medium text-primary">
{{ parseProp(hookLog.payload).method }}
</span>
{{ parseProp(hookLog.payload).path }}
</div> </div>
</div> </template>
</template>
<div v-if="hookLog.type === 'URL'"> <div v-if="hookLog.type === 'URL'">
<div class="nc-hook-log-request"> <div class="nc-hook-log-request">
<div class="nc-hook-pre-title">Request</div> <div class="nc-hook-pre-title">Request</div>
<pre class="nc-hook-pre">{{ parseProp(hookLog.response).config.headers }}</pre> <pre class="nc-hook-pre">{{ parseProp(hookLog.response).config.headers }}</pre>
</div> </div>
<div class="nc-hook-log-response"> <div class="nc-hook-log-response">
<div class="nc-hook-pre-title">Response</div> <div class="nc-hook-pre-title">Response</div>
<pre class="nc-hook-pre">{{ parseProp(hookLog.response).headers }}</pre> <pre class="nc-hook-pre">{{ parseProp(hookLog.response).headers }}</pre>
</div> </div>
<div class="nc-hook-log-payload"> <div class="nc-hook-log-payload">
<div class="nc-hook-pre-title">Payload</div> <div class="nc-hook-pre-title">Payload</div>
<pre class="nc-hook-pre">{{ parseProp(parseProp(hookLog.response).config.data) }}</pre> <pre class="nc-hook-pre">{{ parseProp(parseProp(hookLog.response).config.data) }}</pre>
</div>
</div> </div>
</div>
<div v-else-if="hookLog.type === 'Email'"> <div v-else-if="hookLog.type === 'Email'">
<div v-if="hookLog.error_message" class="mb-4"> <div v-if="hookLog.error_message" class="mb-4">
{{ hookLog.error_message }} {{ hookLog.error_message }}
</div> </div>
<div class="nc-hook-log-payload"> <div class="nc-hook-log-payload">
<div class="nc-hook-pre-title">Payload</div> <div class="nc-hook-pre-title">Payload</div>
<pre class="nc-hook-pre">{{ parseProp(hookLog.payload) }}</pre> <pre class="nc-hook-pre">{{ parseProp(hookLog.payload) }}</pre>
</div>
</div> </div>
</div> </a-collapse-panel>
</a-collapse-panel> </a-collapse>
</a-collapse> </a-layout-content>
</a-layout-content> <a-layout-footer class="!bg-white text-center">
<a-layout-footer class="!bg-white text-center"> <a-pagination
<a-pagination v-model:current="currentPage"
v-model:current="currentPage" :page-size="currentLimit"
:page-size="currentLimit" :total="totalRows"
:total="totalRows" show-less-items
show-less-items @change="loadHookLogs"
@change="loadHookLogs" />
/> </a-layout-footer>
</a-layout-footer> </a-layout>
</a-layout> </div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save