feat: add tab on the events drawer

aziontech · Mar 3, 2025 · 57d5677 · 57d5677
1 parent e5dd427
commit 57d5677
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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