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

packages/nc-gui/components/webhook/CallLog.vue

@@ -22,6 +22,10 @@ const currentPage = $ref(1)
 
 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) {
   try {
     // cater empty records
@@ -38,7 +42,9 @@ async function loadHookLogs(page = currentPage, limit = currentLimit) {
 }
 
 onBeforeMount(async () => {
-  await loadHookLogs(currentPage, currentLimit)
+  if (showLogs.value) {
+    await loadHookLogs(currentPage, currentLimit)
+  }
 })
 </script>
 
@@ -53,7 +59,10 @@ onBeforeMount(async () => {
         The NC_AUTOMATION_LOG_LEVEL is set to “ERROR”, only error logs will be displayed.
       </span>
       <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>
         <!-- TODO: update the link -->
@@ -61,78 +70,80 @@ onBeforeMount(async () => {
       </span>
     </a-card>
 
-    <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 v-if="showLogs">
+      <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
-                    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 v-if="hookLog.type === 'URL'">
+                    <span class="font-weight-medium text-primary">
+                      {{ parseProp(hookLog.payload).method }}
+                    </span>
+                    {{ parseProp(hookLog.payload).path }}
                   </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>
-            </template>
+              </template>
 
-            <div v-if="hookLog.type === 'URL'">
-              <div class="nc-hook-log-request">
-                <div class="nc-hook-pre-title">Request</div>
-                <pre class="nc-hook-pre">{{ parseProp(hookLog.response).config.headers }}</pre>
-              </div>
+              <div v-if="hookLog.type === 'URL'">
+                <div class="nc-hook-log-request">
+                  <div class="nc-hook-pre-title">Request</div>
+                  <pre class="nc-hook-pre">{{ parseProp(hookLog.response).config.headers }}</pre>
+                </div>
 
-              <div class="nc-hook-log-response">
-                <div class="nc-hook-pre-title">Response</div>
-                <pre class="nc-hook-pre">{{ parseProp(hookLog.response).headers }}</pre>
-              </div>
+                <div class="nc-hook-log-response">
+                  <div class="nc-hook-pre-title">Response</div>
+                  <pre class="nc-hook-pre">{{ parseProp(hookLog.response).headers }}</pre>
+                </div>
 
-              <div class="nc-hook-log-payload">
-                <div class="nc-hook-pre-title">Payload</div>
-                <pre class="nc-hook-pre">{{ parseProp(parseProp(hookLog.response).config.data) }}</pre>
+                <div class="nc-hook-log-payload">
+                  <div class="nc-hook-pre-title">Payload</div>
+                  <pre class="nc-hook-pre">{{ parseProp(parseProp(hookLog.response).config.data) }}</pre>
+                </div>
               </div>
-            </div>
 
-            <div v-else-if="hookLog.type === 'Email'">
-              <div v-if="hookLog.error_message" class="mb-4">
-                {{ hookLog.error_message }}
-              </div>
-              <div class="nc-hook-log-payload">
-                <div class="nc-hook-pre-title">Payload</div>
-                <pre class="nc-hook-pre">{{ parseProp(hookLog.payload) }}</pre>
+              <div v-else-if="hookLog.type === 'Email'">
+                <div v-if="hookLog.error_message" class="mb-4">
+                  {{ hookLog.error_message }}
+                </div>
+                <div class="nc-hook-log-payload">
+                  <div class="nc-hook-pre-title">Payload</div>
+                  <pre class="nc-hook-pre">{{ parseProp(hookLog.payload) }}</pre>
+                </div>
               </div>
-            </div>
-          </a-collapse-panel>
-        </a-collapse>
-      </a-layout-content>
-      <a-layout-footer class="!bg-white text-center">
-        <a-pagination
-          v-model:current="currentPage"
-          :page-size="currentLimit"
-          :total="totalRows"
-          show-less-items
-          @change="loadHookLogs"
-        />
-      </a-layout-footer>
-    </a-layout>
+            </a-collapse-panel>
+          </a-collapse>
+        </a-layout-content>
+        <a-layout-footer class="!bg-white text-center">
+          <a-pagination
+            v-model:current="currentPage"
+            :page-size="currentLimit"
+            :total="totalRows"
+            show-less-items
+            @change="loadHookLogs"
+          />
+        </a-layout-footer>
+      </a-layout>
+    </div>
   </div>
 </template>