feat: added the cards to the card tab in the real-time events drawer

src/services/real-time-events-service/edge-dns/load-edge-dns.js

@@ -46,13 +46,36 @@ const adapt = (filter) => {
   return convertGQL(formatFilter, table)
 }
 
+const qtypeMap = (value) => {
+  const defaultText = value
+    ? 'Address Mapping record (A Record), also known as a DNS host record, stores a hostname and its corresponding IPv4 address.'
+    : '-'
+
+  const mapType = {
+    AAAA: 'IP Version 6 Address record (AAAA Record) stores a hostname and its corresponding IPv6 address.',
+    ANAME:
+      'ALIAS record is a virtual record type created to provide CNAME, like behavior on apex domains.',
+    CAA: 'A CAA record allows a DNS domain name holder to specify one or more Certification Authorities (CAs) authorized to issue certificates for that domain or subdomain.',
+    CNAME:
+      'Canonical Name record (CNAME Record) can be used to alias a hostname to another hostname. When a DNS client requests a record that contains a CNAME, which points to another hostname, the DNS resolution process is repeated with the new hostname.',
+    MX: 'Mail exchanger record (MX Record) specifies an SMTP email server for the domain, used to route outgoing emails to an email server.',
+    NS: 'NS-records identify the DNS servers responsible (authoritative) for a zone. A zone should contain one NS-record for each of its own DNS servers (primary and secondaries).',
+    PTR: 'PTR records are used for the Reverse DNS (Domain Name System) lookup. Using the IP address, you can get the associated domain/hostname. An A record should exist for every PTR record. The usage of a reverse DNS setup for a mail server is a good solution.',
+    SRV: 'A Service record (SRV record) is a specification of data in the Domain Name System defining the location. For example: the hostname and port number, of servers for specified services. It’s defined in RFC 2782, and its type code is 33.',
+    TXT: 'A TXT record (short for text record) is a type of resource record in the Domain Name System (DNS) used to provide the ability to associate arbitrary text with a host or other name, such as human readable information about a server, network, data center, or other accounting information.'
+  }
+
+  return mapType[value] || defaultText
+}
+
 const adaptResponse = (response) => {
   const { body } = response
   const [edgeDnsQueriesEvents = {}] = body.data.idnsQueriesEvents
 
   return {
     ts: edgeDnsQueriesEvents.ts,
     qtype: edgeDnsQueriesEvents.qtype,
+    qTypeDescription: qtypeMap(edgeDnsQueriesEvents.qtype),
     data: buildSummary(edgeDnsQueriesEvents)
   }
 }

src/services/real-time-events-service/edge-functions/load-edge-functions.js

@@ -50,6 +50,7 @@ const adapt = (filter) => {
 const adaptResponse = (response) => {
   const { body } = response
   const [edgeFunctionsEvents = {}] = body.data.edgeFunctionsEvents
+  edgeFunctionsEvents.edgeFunctionsList = edgeFunctionsEvents.edgeFunctionsList?.split(';')
 
   return {
     id: edgeFunctionsEvents.ts + edgeFunctionsEvents.configurationId,

src/templates/info-drawer-block/info-section/index.vue

@@ -29,13 +29,16 @@
 
 <template>
   <div
-    class="flex max-w-screen-2xl mx-auto gap-4 w-full surface-section rounded-md border surface-border p-3 sm:p-8 flex-wrap min-w-[2rem]"
+    class="flex max-w-screen-3xl mx-auto gap-4 w-full surface-section rounded-md border surface-border p-3 sm:p-8 flex-wrap min-w-[2rem]"
   >
     <div
-      v-if="!loading"
+      v-if="!loading && props.title"
       class="whitespace-nowrap flex-col justify-center items-start gap-3 flex"
     >
-      <div class="flex flex-wrap gap-2">
+      <div
+        class="flex flex-wrap gap-2"
+        v-if="props.title"
+      >
         <h2 class="whitespace-normal text-color text-xl font-medium">
           {{ props.title }}
         </h2>
@@ -58,11 +61,11 @@
     </div>
 
     <Skeleton
-      v-else
+      v-else-if="props.title"
       class="w-full h-12 mt-7"
     />
 
-    <Divider v-if="!loading" />
+    <Divider v-if="!loading && props.title" />
     <slot name="body"></slot>
   </div>
 </template>

src/tests/services/real-time-events-service/edge-dns/load-edge-dns.test.js

@@ -69,6 +69,8 @@ describe('ImageProcessorServices', () => {
     expect(response).toEqual({
       qtype: fixtures.edgeDns.qtype,
       ts: fixtures.edgeDns.ts,
+      qTypeDescription:
+        'Address Mapping record (A Record), also known as a DNS host record, stores a hostname and its corresponding IPv4 address.',
       data: [
         { key: 'level', value: fixtures.edgeDns.level },
         { key: 'qtype', value: fixtures.edgeDns.qtype },

src/tests/services/real-time-events-service/edge-functions/load-edge-functions.test.js

@@ -80,7 +80,7 @@ describe('DataStreamingServices', () => {
           key: 'edgeFunctionsInstanceIdList',
           value: fixtures.edgeFunction.edgeFunctionsInstanceIdList
         },
-        { key: 'edgeFunctionsList', value: 'function-1; function-2; function-3' },
+        { key: 'edgeFunctionsList', value: ['function-1', ' function-2', ' function-3'] },
         { key: 'edgeFunctionsSolutionId', value: fixtures.edgeFunction.edgeFunctionsSolutionId },
         { key: 'edgeFunctionsTime', value: fixtures.edgeFunction.edgeFunctionsTime },
         { key: 'functionLanguage', value: fixtures.edgeFunction.functionLanguage },

src/views/RealTimeEvents/Drawer/activityHistory.vue

@@ -6,6 +6,7 @@
   import Skeleton from 'primevue/skeleton'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
+  import TextInfo from '@/templates/info-drawer-block/info-labels/text-info.vue'
 
   defineOptions({ name: 'drawer-events-image-processor' })
 
@@ -31,6 +32,11 @@
     }
   }
 
+  const getValueByKey = (key) => {
+    const item = details.value.data.find((obj) => obj.key === key)
+    return item ? item.value : '-'
+  }
+
   watch(
     () => showDrawer.value,
     (value) => {
@@ -78,7 +84,21 @@
             <TableEvents :data="details.data" />
           </TabPanel>
           <TabPanel header="Cards">
-            <h4>Cards</h4>
+            <InfoSection class="mt-4">
+              <template #body>
+                <div class="flex flex-col sm:flex-row sm:gap-8 gap-3 w-full">
+                  <div class="flex flex-col gap-3 w-full sm:w-5/12 flex-1">
+                    <TextInfo label="Author Name">{{ getValueByKey('authorName') }}</TextInfo>
+                    <TextInfo label="Account ID">{{ getValueByKey('accountId') }}</TextInfo>
+                    <TextInfo label="User ID">{{ getValueByKey('userId') }}</TextInfo>
+                  </div>
+                  <div class="flex flex-col gap-3 w-full sm:w-5/12 flex-1">
+                    <TextInfo label="Author E-mail">{{ getValueByKey('authorEmail') }}</TextInfo>
+                    <TextInfo label="Comment">{{ getValueByKey('comment') }}</TextInfo>
+                  </div>
+                </div>
+              </template>
+            </InfoSection>
           </TabPanel>
         </TabView>
         <div

src/views/RealTimeEvents/Drawer/dataStream.vue

@@ -5,6 +5,8 @@
   import TableEvents from './tableEvents.vue'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
+  import BigNumber from '@/templates/info-drawer-block/info-labels/big-number.vue'
+  import TextInfo from '@/templates/info-drawer-block/info-labels/text-info.vue'
 
   import { computed, ref, watch } from 'vue'
 
@@ -20,6 +22,10 @@
   const details = ref({})
   const showDrawer = ref(false)
   const loading = ref(false)
+  const streamedLinesTooltip =
+    'Total amount of lines streamed to the configured endpoint. Maximum value of 2000. This field is the result of a sum.'
+  const dataStreamedTooltip =
+    'Total amount of data streamed, in bytes, to the configured endpoint. This field is the result of a sum.'
 
   const openDetailDrawer = async (item) => {
     showDrawer.value = true
@@ -32,6 +38,11 @@
     }
   }
 
+  const getValueByKey = (key) => {
+    const item = details.value.data.find((obj) => obj.key === key)
+    return item ? item.value : '-'
+  }
+
   watch(
     () => showDrawer.value,
     (value) => {
@@ -80,7 +91,42 @@
             <TableEvents :data="details.data" />
           </TabPanel>
           <TabPanel header="Cards">
-            <h4>Cards</h4>
+            <InfoSection class="mt-4">
+              <template #body>
+                <div class="grid grid-cols-2 lg:grid-cols-3 w-full ml-[1px] gap-4 lg:gap-8">
+                  <BigNumber
+                    label="Streamed Lines"
+                    sufix="lines"
+                    class="flex-1"
+                    :tooltipMessage="streamedLinesTooltip"
+                  >
+                    {{ getValueByKey('streamedLines') }}
+                  </BigNumber>
+                  <BigNumber
+                    label="Data Streamed"
+                    sufix="bytes"
+                    class="flex-1"
+                    :tooltipMessage="dataStreamedTooltip"
+                  >
+                    {{ getValueByKey('dataStreamed') }}
+                  </BigNumber>
+                </div>
+
+                <Divider />
+
+                <div class="flex flex-col sm:flex-row sm:gap-8 gap-3 w-full">
+                  <div class="flex flex-col gap-3 w-full sm:w-5/12 flex-1">
+                    <TextInfo label="Configuration ID">{{
+                      getValueByKey('configurationId')
+                    }}</TextInfo>
+                    <TextInfo label="Status Code">{{ getValueByKey('statusCode') }}</TextInfo>
+                  </div>
+                  <div class="flex flex-col gap-3 w-full sm:w-5/12 flex-1">
+                    <TextInfo label="Endpoint Type">{{ getValueByKey('endpointType') }}</TextInfo>
+                  </div>
+                </div>
+              </template>
+            </InfoSection>
           </TabPanel>
         </TabView>
         <div

src/views/RealTimeEvents/Drawer/edgeDNS.vue

@@ -6,6 +6,7 @@
   import Skeleton from 'primevue/skeleton'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
+  import TextInfo from '@/templates/info-drawer-block/info-labels/text-info.vue'
 
   defineOptions({ name: 'drawer-events-image-processor' })
 
@@ -30,6 +31,11 @@
     }
   }
 
+  const getValueByKey = (key) => {
+    const item = details.value.data.find((obj) => obj.key === key)
+    return item ? item.value : '-'
+  }
+
   watch(
     () => showDrawer.value,
     (value) => {
@@ -78,7 +84,24 @@
             <TableEvents :data="details.data" />
           </TabPanel>
           <TabPanel header="Cards">
-            <h4>Cards</h4>
+            <InfoSection class="mt-4">
+              <template #body>
+                <div class="flex flex-col sm:flex-row sm:gap-8 gap-3 w-full">
+                  <div class="flex flex-col gap-3 w-full sm:w-5/12 flex-1">
+                    <TextInfo label="UUID">{{ getValueByKey('uuid') }}</TextInfo>
+                    <TextInfo label="Q Type Description">{{ details.qTypeDescription }}</TextInfo>
+                  </div>
+                  <div class="flex flex-col gap-3 w-full sm:w-5/12 flex-1">
+                    <TextInfo label="Zone ID">{{ getValueByKey('zoneId') }}</TextInfo>
+                    <TextInfo label="Status Code">{{ getValueByKey('statusCode') }}</TextInfo>
+                    <TextInfo label="Resolution Type">{{
+                      getValueByKey('resolutionType')
+                    }}</TextInfo>
+                    <TextInfo label="Solution ID">{{ getValueByKey('solutionId') }}</TextInfo>
+                  </div>
+                </div>
+              </template>
+            </InfoSection>
           </TabPanel>
         </TabView>
         <div

src/views/RealTimeEvents/Drawer/edgeFunctions.vue

@@ -7,6 +7,8 @@
   import InfoDrawerBlock from '@/templates/info-drawer-block'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
+  import TextInfo from '@/templates/info-drawer-block/info-labels/text-info.vue'
+  import BigNumber from '@/templates/info-drawer-block/info-labels/big-number.vue'
 
   defineOptions({ name: 'DrawerEventsFunctions' })
 
@@ -33,6 +35,11 @@
     }
   }
 
+  const getValueByKey = (key) => {
+    const item = details.value.data.find((obj) => obj.key === key)
+    return item ? item.value : '-'
+  }
+
   watch(showDrawer, (isVisible) => {
     if (!isVisible) details.value = {}
   })
@@ -68,7 +75,56 @@
             <TableEvents :data="details.data" />
           </TabPanel>
           <TabPanel header="Cards">
-            <h4>Cards</h4>
+            <InfoSection class="mt-4">
+              <template #body>
+                <div class="gap-8 flex flex-col sm:flex-row w-full">
+                  <TextInfo
+                    label="Edge Functions List"
+                    class="w-full sm:w-5/12 flex-1"
+                  >
+                    <ul>
+                      <li
+                        :key="index"
+                        v-for="(functionType, index) in getValueByKey('edgeFunctionsList')"
+                      >
+                        {{ functionType }}
+                      </li>
+                    </ul>
+                  </TextInfo>
+                  <BigNumber
+                    class="flex-1"
+                    label="Edge Functions Time"
+                    sufix="s"
+                    :tooltipMessage="edgeFunctionsTime"
+                    >{{ getValueByKey('edgeFunctionsTime') }}</BigNumber
+                  >
+                </div>
+
+                <Divider />
+
+                <div class="flex flex-col sm:flex-row sm:gap-8 gap-3 w-full">
+                  <div class="flex flex-col gap-3 flex-1">
+                    <TextInfo label="Edge Functions Initiator Type List">
+                      {{ getValueByKey('edgeFunctionsInitiatorTypeList') }}
+                    </TextInfo>
+                    <TextInfo label="Edge Functions Instance ID List">
+                      {{ getValueByKey('edgeFunctionsInstanceIdList') }}
+                    </TextInfo>
+                    <TextInfo label="Edge Functions Solution ID">
+                      {{ getValueByKey('edgeFunctionsSolutionId') }}
+                    </TextInfo>
+                  </div>
+                  <div class="flex flex-col gap-3 w-full sm:w-5/12 flex-1">
+                    <TextInfo label="Virtual Host ID">{{
+                      getValueByKey('virtualHostId')
+                    }}</TextInfo>
+                    <TextInfo label="Configuration ID">{{
+                      getValueByKey('configurationId')
+                    }}</TextInfo>
+                  </div>
+                </div>
+              </template>
+            </InfoSection>
           </TabPanel>
         </TabView>
         <div

src/views/RealTimeEvents/Drawer/edgeFunctionsConsole.vue

@@ -7,6 +7,7 @@
   import Skeleton from 'primevue/skeleton'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
+  import TextInfo from '@/templates/info-drawer-block/info-labels/text-info.vue'
 
   defineOptions({ name: 'drawer-events-functions-console' })
 
@@ -40,6 +41,11 @@
     }
   )
 
+  const getValueByKey = (key) => {
+    const item = details.value.data.find((obj) => obj.key === key)
+    return item ? item.value : '-'
+  }
+
   const tags = computed(() => {
     if (details.value.level) {
       return [
@@ -79,7 +85,23 @@
             <TableEvents :data="details.data" />
           </TabPanel>
           <TabPanel header="Cards">
-            <h4>Cards</h4>
+            <InfoSection class="mt-4">
+              <template #body>
+                <div class="flex flex-col sm:flex-row sm:gap-8 gap-3 w-full">
+                  <div class="flex flex-col gap-3 w-full sm:w-5/12 flex-1">
+                    <TextInfo label="Line">{{ getValueByKey('line') }}</TextInfo>
+                    <TextInfo label="ID">{{ getValueByKey('id') }}</TextInfo>
+                  </div>
+                  <div class="flex flex-col gap-3 w-full sm:w-5/12 flex-1">
+                    <TextInfo label="Solution ID">{{ getValueByKey('solutionId') }}</TextInfo>
+                    <TextInfo label="Function ID">{{ getValueByKey('functionId') }}</TextInfo>
+                    <TextInfo label="Configuration ID">{{
+                      getValueByKey('configurationId')
+                    }}</TextInfo>
+                  </div>
+                </div>
+              </template>
+            </InfoSection>
           </TabPanel>
         </TabView>
         <div