From 57d56771abd92b91364a459898976055fe6c88e8 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 3 Mar 2025 14:44:06 -0300
Subject: [PATCH] feat: add tab on the events drawer

---
 .../http-request/list-http-request.js            | 12 +++++++++++-
 .../constants/tabs-events.test.js                |  2 +-
 .../http-request/list-http-request.test.js       | 10 ++++++++++
 .../Blocks/constants/tabs-events.js              | 16 ++++++++--------
 .../RealTimeEvents/Drawer/activityHistory.vue    | 15 ++++++++++++---
 src/views/RealTimeEvents/Drawer/dataStream.vue   | 15 ++++++++++++---
 src/views/RealTimeEvents/Drawer/edgeDNS.vue      | 15 ++++++++++++---
 .../RealTimeEvents/Drawer/edgeFunctions.vue      | 16 ++++++++++++----
 .../Drawer/edgeFunctionsConsole.vue              | 15 ++++++++++++---
 src/views/RealTimeEvents/Drawer/httpRequests.vue | 15 ++++++++++++---
 .../RealTimeEvents/Drawer/imageProcessor.vue     | 15 ++++++++++++---
 src/views/RealTimeEvents/Drawer/tableEvents.vue  |  2 +-
 src/views/RealTimeEvents/Drawer/tieredCache.vue  | 15 ++++++++++++---
 13 files changed, 127 insertions(+), 36 deletions(-)

diff --git a/src/services/real-time-events-service/http-request/list-http-request.js b/src/services/real-time-events-service/http-request/list-http-request.js
index 56a2c20bb..12052a97b 100644
--- a/src/services/real-time-events-service/http-request/list-http-request.js
+++ b/src/services/real-time-events-service/http-request/list-http-request.js
@@ -39,7 +39,17 @@ const adapt = (filter) => {
       'upstreamBytesSent',
       'sslProtocol',
       'wafLearning',
-      'requestTime'
+      'requestTime',
+      'serverProtocol',
+      'upstreamCacheStatus',
+      'httpReferer',
+      'remoteAddress',
+      'wafMatch',
+      'serverPort',
+      'sslCipher',
+      'wafEvheaders',
+      'serverAddr',
+      'scheme'
     ],
     orderBy: 'ts_ASC'
   }
diff --git a/src/tests/modules/real-time-events/constants/tabs-events.test.js b/src/tests/modules/real-time-events/constants/tabs-events.test.js
index 5758f278d..3718a3cbd 100644
--- a/src/tests/modules/real-time-events/constants/tabs-events.test.js
+++ b/src/tests/modules/real-time-events/constants/tabs-events.test.js
@@ -81,7 +81,7 @@ describe('RealTimeEventsModule', () => {
         const tsFormatColumn = tabData.columns.find((column) => column.field === 'tsFormat')
         expect(tsFormatColumn).toBeDefined()
         expect(tsFormatColumn.field).toBe('tsFormat')
-        expect(tsFormatColumn.header).toBe('TS')
+        expect(tsFormatColumn.header).toBe('Time')
       })
     })
   })
diff --git a/src/tests/services/real-time-events-service/http-request/list-http-request.test.js b/src/tests/services/real-time-events-service/http-request/list-http-request.test.js
index a8ef40785..50ec49a7f 100644
--- a/src/tests/services/real-time-events-service/http-request/list-http-request.test.js
+++ b/src/tests/services/real-time-events-service/http-request/list-http-request.test.js
@@ -62,6 +62,16 @@ describe('HttpRequestServices', () => {
       `\t\tsslProtocol`,
       `\t\twafLearning`,
       `\t\trequestTime`,
+      '\t\tserverProtocol',
+      '\t\tupstreamCacheStatus',
+      '\t\thttpReferer',
+      '\t\tremoteAddress',
+      '\t\twafMatch',
+      '\t\tserverPort',
+      '\t\tsslCipher',
+      '\t\twafEvheaders',
+      '\t\tserverAddr',
+      '\t\tscheme',
       `\t}`,
       `}`
     ].join('\n')
diff --git a/src/views/RealTimeEvents/Blocks/constants/tabs-events.js b/src/views/RealTimeEvents/Blocks/constants/tabs-events.js
index d0e38bcc3..ed2999d66 100644
--- a/src/views/RealTimeEvents/Blocks/constants/tabs-events.js
+++ b/src/views/RealTimeEvents/Blocks/constants/tabs-events.js
@@ -12,7 +12,7 @@ const TABS_EVENTS = {
       {
         field: 'tsFormat',
         sortField: 'ts',
-        header: 'TS'
+        header: 'Time'
       },
       {
         field: 'summary',
@@ -38,7 +38,7 @@ const TABS_EVENTS = {
       {
         field: 'tsFormat',
         sortField: 'ts',
-        header: 'TS'
+        header: 'Time'
       },
       {
         field: 'summary',
@@ -65,7 +65,7 @@ const TABS_EVENTS = {
       {
         field: 'tsFormat',
         sortField: 'ts',
-        header: 'TS'
+        header: 'Time'
       },
       {
         field: 'summary',
@@ -94,7 +94,7 @@ const TABS_EVENTS = {
       {
         field: 'tsFormat',
         sortField: 'ts',
-        header: 'TS'
+        header: 'Time'
       },
       {
         field: 'summary',
@@ -120,7 +120,7 @@ const TABS_EVENTS = {
       {
         field: 'tsFormat',
         sortField: 'ts',
-        header: 'TS'
+        header: 'Time'
       },
       {
         field: 'summary',
@@ -146,7 +146,7 @@ const TABS_EVENTS = {
       {
         field: 'tsFormat',
         sortField: 'ts',
-        header: 'TS'
+        header: 'Time'
       },
       {
         field: 'summary',
@@ -172,7 +172,7 @@ const TABS_EVENTS = {
       {
         field: 'tsFormat',
         sortField: 'ts',
-        header: 'TS'
+        header: 'Time'
       },
       {
         field: 'summary',
@@ -200,7 +200,7 @@ const TABS_EVENTS = {
       {
         field: 'tsFormat',
         sortField: 'ts',
-        header: 'TS'
+        header: 'Time'
       },
       {
         field: 'summary',
diff --git a/src/views/RealTimeEvents/Drawer/activityHistory.vue b/src/views/RealTimeEvents/Drawer/activityHistory.vue
index 55418d525..3a325f614 100644
--- a/src/views/RealTimeEvents/Drawer/activityHistory.vue
+++ b/src/views/RealTimeEvents/Drawer/activityHistory.vue
@@ -4,6 +4,8 @@
   import InfoDrawerBlock from '@/templates/info-drawer-block'
   import TableEvents from './tableEvents.vue'
   import Skeleton from 'primevue/skeleton'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
 
   defineOptions({ name: 'drawer-events-image-processor' })
 
@@ -68,10 +70,17 @@
           :tags="tags"
           :loading="loading"
         />
-        <TableEvents
+        <TabView
+          class="w-full h-full"
           v-if="!loading"
-          :data="details.data"
-        />
+        >
+          <TabPanel header="Table">
+            <TableEvents :data="details.data" />
+          </TabPanel>
+          <TabPanel header="Cards">
+            <h4>Cards</h4>
+          </TabPanel>
+        </TabView>
         <div
           class="flex flex-col gap-3 w-full flex-1 border rounded-md surface-border p-4"
           v-else
diff --git a/src/views/RealTimeEvents/Drawer/dataStream.vue b/src/views/RealTimeEvents/Drawer/dataStream.vue
index b9f5cb901..bfe0f2845 100644
--- a/src/views/RealTimeEvents/Drawer/dataStream.vue
+++ b/src/views/RealTimeEvents/Drawer/dataStream.vue
@@ -3,6 +3,8 @@
   import InfoSection from '@/templates/info-drawer-block/info-section'
   import Skeleton from 'primevue/skeleton'
   import TableEvents from './tableEvents.vue'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
 
   import { computed, ref, watch } from 'vue'
 
@@ -70,10 +72,17 @@
           :loading="loading"
         />
 
-        <TableEvents
+        <TabView
+          class="w-full h-full"
           v-if="!loading"
-          :data="details.data"
-        />
+        >
+          <TabPanel header="Table">
+            <TableEvents :data="details.data" />
+          </TabPanel>
+          <TabPanel header="Cards">
+            <h4>Cards</h4>
+          </TabPanel>
+        </TabView>
         <div
           class="flex flex-col gap-3 w-full flex-1 border rounded-md surface-border p-4"
           v-else
diff --git a/src/views/RealTimeEvents/Drawer/edgeDNS.vue b/src/views/RealTimeEvents/Drawer/edgeDNS.vue
index 8ebc6d816..2649233fa 100644
--- a/src/views/RealTimeEvents/Drawer/edgeDNS.vue
+++ b/src/views/RealTimeEvents/Drawer/edgeDNS.vue
@@ -4,6 +4,8 @@
   import InfoDrawerBlock from '@/templates/info-drawer-block'
   import TableEvents from './tableEvents.vue'
   import Skeleton from 'primevue/skeleton'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
 
   defineOptions({ name: 'drawer-events-image-processor' })
 
@@ -68,10 +70,17 @@
           :tags="tags"
           :loading="loading"
         />
-        <TableEvents
+        <TabView
+          class="w-full h-full"
           v-if="!loading"
-          :data="details.data"
-        />
+        >
+          <TabPanel header="Table">
+            <TableEvents :data="details.data" />
+          </TabPanel>
+          <TabPanel header="Cards">
+            <h4>Cards</h4>
+          </TabPanel>
+        </TabView>
         <div
           class="flex flex-col gap-3 w-full flex-1 border rounded-md surface-border p-4"
           v-else
diff --git a/src/views/RealTimeEvents/Drawer/edgeFunctions.vue b/src/views/RealTimeEvents/Drawer/edgeFunctions.vue
index 5a9fafcd0..b1250a4de 100644
--- a/src/views/RealTimeEvents/Drawer/edgeFunctions.vue
+++ b/src/views/RealTimeEvents/Drawer/edgeFunctions.vue
@@ -5,6 +5,8 @@
   import TableEvents from './tableEvents.vue'
   import Skeleton from 'primevue/skeleton'
   import InfoDrawerBlock from '@/templates/info-drawer-block'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
 
   defineOptions({ name: 'DrawerEventsFunctions' })
 
@@ -58,11 +60,17 @@
           :loading="loading"
         />
 
-        <TableEvents
+        <TabView
+          class="w-full h-full"
           v-if="!loading"
-          :data="details.data"
-        />
-
+        >
+          <TabPanel header="Table">
+            <TableEvents :data="details.data" />
+          </TabPanel>
+          <TabPanel header="Cards">
+            <h4>Cards</h4>
+          </TabPanel>
+        </TabView>
         <div
           class="flex flex-col gap-3 w-full flex-1 border rounded-md surface-border p-4"
           v-else
diff --git a/src/views/RealTimeEvents/Drawer/edgeFunctionsConsole.vue b/src/views/RealTimeEvents/Drawer/edgeFunctionsConsole.vue
index 0e2cadbf9..8cfefc799 100644
--- a/src/views/RealTimeEvents/Drawer/edgeFunctionsConsole.vue
+++ b/src/views/RealTimeEvents/Drawer/edgeFunctionsConsole.vue
@@ -5,6 +5,8 @@
   import InfoDrawerBlock from '@/templates/info-drawer-block'
   import TableEvents from './tableEvents.vue'
   import Skeleton from 'primevue/skeleton'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
 
   defineOptions({ name: 'drawer-events-functions-console' })
 
@@ -69,10 +71,17 @@
           :tags="tags"
           :loading="loading"
         />
-        <TableEvents
+        <TabView
+          class="w-full h-full"
           v-if="!loading"
-          :data="details.data"
-        />
+        >
+          <TabPanel header="Table">
+            <TableEvents :data="details.data" />
+          </TabPanel>
+          <TabPanel header="Cards">
+            <h4>Cards</h4>
+          </TabPanel>
+        </TabView>
         <div
           class="flex flex-col gap-3 w-full flex-1 border rounded-md surface-border p-4"
           v-else
diff --git a/src/views/RealTimeEvents/Drawer/httpRequests.vue b/src/views/RealTimeEvents/Drawer/httpRequests.vue
index 26f79873f..c20c906f3 100644
--- a/src/views/RealTimeEvents/Drawer/httpRequests.vue
+++ b/src/views/RealTimeEvents/Drawer/httpRequests.vue
@@ -3,6 +3,8 @@
   import TableEvents from './tableEvents.vue'
   import { computed, ref, watch } from 'vue'
   import Skeleton from 'primevue/skeleton'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
 
   import InfoDrawerBlock from '@/templates/info-drawer-block'
   defineOptions({ name: 'drawer-events-http-requests' })
@@ -66,10 +68,17 @@
           :tags="hostTag"
           :loading="loading"
         />
-        <TableEvents
+        <TabView
+          class="w-full h-full"
           v-if="!loading"
-          :data="details.data"
-        />
+        >
+          <TabPanel header="Table">
+            <TableEvents :data="details.data" />
+          </TabPanel>
+          <TabPanel header="Cards">
+            <h4>Cards</h4>
+          </TabPanel>
+        </TabView>
         <div
           class="flex flex-col gap-3 w-full flex-1 border rounded-md surface-border p-4"
           v-else
diff --git a/src/views/RealTimeEvents/Drawer/imageProcessor.vue b/src/views/RealTimeEvents/Drawer/imageProcessor.vue
index 9d4dfb66a..3cf99f124 100644
--- a/src/views/RealTimeEvents/Drawer/imageProcessor.vue
+++ b/src/views/RealTimeEvents/Drawer/imageProcessor.vue
@@ -3,6 +3,8 @@
   import InfoSection from '@/templates/info-drawer-block/info-section'
   import TableEvents from './tableEvents.vue'
   import Skeleton from 'primevue/skeleton'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
 
   import { computed, ref, watch } from 'vue'
   defineOptions({ name: 'drawer-events-image-processor' })
@@ -63,10 +65,17 @@
           :tags="schemeTag"
           :loading="loading"
         />
-        <TableEvents
+        <TabView
+          class="w-full h-full"
           v-if="!loading"
-          :data="details.data"
-        />
+        >
+          <TabPanel header="Table">
+            <TableEvents :data="details.data" />
+          </TabPanel>
+          <TabPanel header="Cards">
+            <h4>Cards</h4>
+          </TabPanel>
+        </TabView>
         <div
           class="flex flex-col gap-3 w-full flex-1 border rounded-md surface-border p-4"
           v-else
diff --git a/src/views/RealTimeEvents/Drawer/tableEvents.vue b/src/views/RealTimeEvents/Drawer/tableEvents.vue
index 82efa2817..ce8c906ac 100644
--- a/src/views/RealTimeEvents/Drawer/tableEvents.vue
+++ b/src/views/RealTimeEvents/Drawer/tableEvents.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mt-4">
     <DataTable
       :value="data"
       v-model:filters="filters"
diff --git a/src/views/RealTimeEvents/Drawer/tieredCache.vue b/src/views/RealTimeEvents/Drawer/tieredCache.vue
index 109307766..735d1acc8 100644
--- a/src/views/RealTimeEvents/Drawer/tieredCache.vue
+++ b/src/views/RealTimeEvents/Drawer/tieredCache.vue
@@ -3,6 +3,8 @@
   import InfoSection from '@/templates/info-drawer-block/info-section'
   import TableEvents from './tableEvents.vue'
   import Skeleton from 'primevue/skeleton'
+  import TabPanel from 'primevue/tabpanel'
+  import TabView from 'primevue/tabview'
 
   import { computed, ref, watch } from 'vue'
 
@@ -68,10 +70,17 @@
           :tags="proxyTag"
           :loading="loading"
         />
-        <TableEvents
+        <TabView
+          class="w-full h-full"
           v-if="!loading"
-          :data="details.data"
-        />
+        >
+          <TabPanel header="Table">
+            <TableEvents :data="details.data" />
+          </TabPanel>
+          <TabPanel header="Cards">
+            <h4>Cards</h4>
+          </TabPanel>
+        </TabView>
         <div
           class="flex flex-col gap-3 w-full flex-1 border rounded-md surface-border p-4"
           v-else