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

feat(nc-gui): include NC_AUTOMATION_LOG_LEVEL message

pull/5349/head
Wing-Kam Wong 1 year ago
parent
77fc7770a4
commit
5636eddcc4
1 changed files with 85 additions and 66 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. 151
      packages/nc-gui/components/webhook/CallLog.vue

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

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HookLogType, HookType } from 'nocodb-sdk' import type { HookLogType, HookType } from 'nocodb-sdk'
import { extractSdkResponseErrorMsg, onBeforeMount, parseProp, timeAgo, useApi } from '#imports' import { extractSdkResponseErrorMsg, onBeforeMount, parseProp, timeAgo, useApi, useGlobal } from '#imports'
interface Props { interface Props {
hook: HookType hook: HookType
@ -14,11 +14,13 @@ const hookLogs = ref<HookLogType[]>([])
const activeKey = ref() const activeKey = ref()
const { appInfo } = useGlobal()
let totalRows = $ref(0) let totalRows = $ref(0)
const currentPage = $ref(1) const currentPage = $ref(1)
const currentLimit = $ref(25) const currentLimit = $ref(10)
async function loadHookLogs(page = currentPage, limit = currentLimit) { async function loadHookLogs(page = currentPage, limit = currentLimit) {
try { try {
@ -42,79 +44,96 @@ onBeforeMount(async () => {
<template> <template>
<a-skeleton v-if="isLoading" /> <a-skeleton v-if="isLoading" />
<a-empty v-else-if="!hookLogs.length" /> <div v-else>
<a-layout v-else> <a-card class="!mb-[20px]" :body-style="{ padding: '10px' }">
<a-layout-content> <span v-if="appInfo.automationLogLevel === 'OFF'">
<a-collapse v-model:activeKey="activeKey" class="nc-hook-log-collapse"> The NC_AUTOMATION_LOG_LEVEL is set to “OFF”, no logs will be displayed.
<a-collapse-panel v-for="(hookLog, idx) of hookLogs" :key="idx"> </span>
<template #header> <span v-if="appInfo.automationLogLevel === 'ERROR'">
<div class="w-full cursor-pointer"> The NC_AUTOMATION_LOG_LEVEL is set to “ERROR”, only error logs will be displayed.
<div class="font-weight-medium flex"> </span>
<div class="flex-1"> <span v-if="appInfo.automationLogLevel === 'ALL'">
{{ hookLog.type }}: records.{{ hookLog.event }}.{{ hookLog.operation }} ({{ timeAgo(hookLog.created_at) }}) The NC_AUTOMATION_LOG_LEVEL is set to “ALL”, both error and success logs will be displayed.
</div> </span>
<div <span>
v-if="hookLog.type === 'URL'" <!-- TODO: update the link -->
class="mx-1 px-2 py-1 text-white rounded bg-red-500 text-xs" For additional configuration options, please refer the documentation <a href="#" target="_blank">here</a>.
:class="{ '!bg-green-500': parseProp(hookLog.response).status === 200 }" </span>
> </a-card>
{{ parseProp(hookLog.response).status }}
{{ parseProp(hookLog.response).statusText }} <a-empty v-if="!hookLogs.length" />
<a-layout v-else>
<a-layout-content>
<a-collapse v-model:activeKey="activeKey" class="nc-hook-log-collapse">
<a-collapse-panel v-for="(hookLog, idx) of hookLogs" :key="idx">
<template #header>
<div class="w-full cursor-pointer">
<div class="font-weight-medium flex">
<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 v-if="hookLog.type === 'Email'"> <div v-if="hookLog.type === 'URL'">
<div v-if="hookLog.error_message" class="mx-1 px-2 py-1 text-white rounded text-xs bg-red-500">ERROR</div> <span class="font-weight-medium text-primary">
<div v-else class="mx-1 px-2 py-1 text-white rounded text-xs bg-green-500">OK</div> {{ parseProp(hookLog.payload).method }}
</span>
{{ parseProp(hookLog.payload).path }}
</div> </div>
</div> </div>
<div v-if="hookLog.type === 'URL'"> </template>
<span class="font-weight-medium text-primary">
{{ parseProp(hookLog.payload).method }}
</span>
{{ parseProp(hookLog.payload).path }}
</div>
</div>
</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"
style="width: calc(100% - 50px)" :total="totalRows"
:page-size="currentLimit" show-less-items
:total="totalRows" @change="loadHookLogs"
show-less-items />
@change="loadHookLogs" </a-layout-footer>
/> </a-layout>
</a-layout-footer> </div>
</a-layout>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">

Write Preview
Loading…
Cancel
Save