[UXE-5573] feat: console real time events improved column display (#2217

)

src/helpers/build-summary.js

@@ -0,0 +1,6 @@
+export const buildSummary = (httpResponse) => {
+  return Object.entries(httpResponse)
+    .filter(([key]) => key !== 'ts')
+    .sort(([currentKey], [nextKey]) => currentKey.localeCompare(nextKey))
+    .map(([key, value]) => ({ key, value }))
+}

src/helpers/index.js

@@ -37,7 +37,7 @@ import FILTERS_RULES from './real-time-filters-rules'
 import { openGraphQlPlayground } from './open-graphql-playground.js'
 import { eventsPlaygroundOpener } from './events-playground-opener'
 import { setRedirectRoute, getRedirectRoute } from './login-redirect-manager'
-
+import { buildSummary } from './build-summary'
 export {
   InviteSession,
   azionPrivacyPolicyWindowOpener,
@@ -81,5 +81,6 @@ export {
   openGraphQlPlayground,
   eventsPlaygroundOpener,
   setRedirectRoute,
-  getRedirectRoute
+  getRedirectRoute,
+  buildSummary
 }

src/services/real-time-events-service/activity-history/list-activity-history.js

@@ -5,6 +5,7 @@ import { generateCurrentTimestamp } from '@/helpers/generate-timestamp'
 import { convertValueToDate } from '@/helpers'
 import { useGraphQLStore } from '@/stores/graphql-query'
 import { getRecordsFound } from '@/helpers/get-records-found'
+import { buildSummary } from '@/helpers'
 
 export const listActivityHistory = async (filter) => {
   const payload = adapt(filter)
@@ -39,12 +40,7 @@ const adaptResponse = (response) => {
 
   const data = body.data.activityHistoryEvents?.map((activityHistoryEvents) => ({
     id: generateCurrentTimestamp(),
-    userIp: activityHistoryEvents.userIp,
-    authorName: activityHistoryEvents.authorName,
-    title: activityHistoryEvents.title,
-    resourceType: activityHistoryEvents.resourceType,
-    resourceId: activityHistoryEvents.resourceId,
-    userId: activityHistoryEvents.userId,
+    summary: buildSummary(activityHistoryEvents),
     ts: activityHistoryEvents.ts,
     tsFormat: convertValueToDate(activityHistoryEvents.ts)
   }))

src/services/real-time-events-service/data-stream/list-data-stream.js

@@ -5,6 +5,7 @@ import { makeRealTimeEventsBaseUrl } from '../make-real-time-events-service'
 import { generateCurrentTimestamp } from '@/helpers/generate-timestamp'
 import { useGraphQLStore } from '@/stores/graphql-query'
 import { getRecordsFound } from '@/helpers/get-records-found'
+import { buildSummary } from '@/helpers'
 
 export const listDataStream = async (filter) => {
   const payload = adapt(filter)
@@ -49,21 +50,8 @@ const adaptResponse = (response) => {
 
   const data = body.data.dataStreamedEvents?.map((dataStreamedEvents) => ({
     id: generateCurrentTimestamp(),
-    configurationId: dataStreamedEvents.configurationId,
-    jobName: {
-      content: dataStreamedEvents.jobName,
-      severity: 'info'
-    },
-    endpointType: {
-      content: dataStreamedEvents.endpointType,
-      severity: 'info'
-    },
-    url: dataStreamedEvents.url,
-    statusCode: dataStreamedEvents.statusCode,
+    summary: buildSummary(dataStreamedEvents),
     ts: dataStreamedEvents.ts,
-    dataStreamed: dataStreamedEvents.dataStreamed,
-    source: dataStreamedEvents.source,
-    streamedLines: dataStreamedEvents.streamedLines,
     tsFormat: convertValueToDate(dataStreamedEvents.ts)
   }))
 

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

@@ -5,6 +5,7 @@ import { generateCurrentTimestamp } from '@/helpers/generate-timestamp'
 import { convertValueToDate } from '@/helpers'
 import { useGraphQLStore } from '@/stores/graphql-query'
 import { getRecordsFound } from '@/helpers/get-records-found'
+import { buildSummary } from '@/helpers'
 
 export const listEdgeDNS = async (filter) => {
   const payload = adapt(filter)
@@ -23,41 +24,6 @@ export const listEdgeDNS = async (filter) => {
   return adaptResponse(response)
 }
 
-const levelMap = {
-  ERROR: {
-    content: 'Error',
-    severity: 'danger',
-    icon: 'pi pi-times-circle'
-  },
-  WARN: {
-    content: 'Warning',
-    severity: 'warning',
-    icon: 'pi pi-exclamation-triangle'
-  },
-  INFO: {
-    content: 'Info',
-    severity: 'info',
-    icon: 'pi pi-info-circle'
-  },
-  DEBUG: {
-    content: 'Debug',
-    severity: 'success',
-    icon: 'pi pi-check-circle'
-  },
-  TRACE: {
-    content: 'Trace',
-    severity: 'info',
-    icon: 'pi pi-code'
-  }
-}
-
-const getLevelDNS = (level) => {
-  let words = level.trim().split(/\s+/)
-  let firstWord = words[0]
-
-  return levelMap[firstWord.toUpperCase()]
-}
-
 const adapt = (filter) => {
   const table = {
     dataset: 'idnsQueriesEvents',
@@ -74,15 +40,9 @@ const adaptResponse = (response) => {
 
   const data = body.data.idnsQueriesEvents?.map((edgeDnsQueriesEvents) => ({
     id: generateCurrentTimestamp(),
-    level: getLevelDNS(edgeDnsQueriesEvents.level),
-    zoneId: edgeDnsQueriesEvents.zoneId,
-    qtype: edgeDnsQueriesEvents.qtype,
-    resolutionType: edgeDnsQueriesEvents.resolutionType,
-    source: edgeDnsQueriesEvents.source,
-    solutionId: edgeDnsQueriesEvents.solutionId,
+    summary: buildSummary(edgeDnsQueriesEvents),
     ts: edgeDnsQueriesEvents.ts,
-    tsFormat: convertValueToDate(edgeDnsQueriesEvents.ts),
-    uuid: edgeDnsQueriesEvents.uuid
+    tsFormat: convertValueToDate(edgeDnsQueriesEvents.ts)
   }))
 
   return {

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

@@ -6,6 +6,7 @@ import { convertValueToDate } from '@/helpers'
 import { useGraphQLStore } from '@/stores/graphql-query'
 import * as Errors from '@/services/axios/errors'
 import { getRecordsFound } from '@/helpers/get-records-found'
+import { buildSummary } from '@/helpers'
 
 export const listEdgeFunctionsConsole = async (filter) => {
   const payload = adapt(filter)
@@ -28,61 +29,19 @@ const adapt = (filter) => {
   const table = {
     dataset: 'cellsConsoleEvents',
     limit: 10000,
-    fields: ['configurationId', 'functionId', 'id', 'level', 'line', 'lineSource', 'source', 'ts'],
+    fields: ['configurationId', 'functionId', 'id', 'level', 'lineSource', 'source', 'ts'],
     orderBy: 'ts_ASC'
   }
   return convertGQL(filter, table)
 }
 
-const levelMap = {
-  DEBUG: {
-    content: 'Debug',
-    severity: 'success',
-    icon: 'pi pi-check-circle'
-  },
-  ERROR: {
-    content: 'Error',
-    severity: 'danger',
-    icon: 'pi pi-times-circle'
-  },
-  WARN: {
-    content: 'Warning',
-    severity: 'warning',
-    icon: 'pi pi-exclamation-triangle'
-  },
-  INFO: {
-    content: 'Info',
-    severity: 'info',
-    icon: 'pi pi-info-circle'
-  },
-  LOG: {
-    content: 'Log',
-    severity: 'info',
-    icon: 'pi pi-code'
-  },
-  MDN: {
-    content: 'MDN',
-    severity: 'info',
-    icon: 'pi pi-code'
-  }
-}
-
 const adaptResponse = (body) => {
   const cellsConsoleEventsList = body.data?.cellsConsoleEvents
   const totalRecords = cellsConsoleEventsList?.length
   const parser = cellsConsoleEventsList?.length
     ? cellsConsoleEventsList.map((cellsConsoleEvents) => ({
-        configurationId: cellsConsoleEvents.configurationId,
-        functionId: cellsConsoleEvents.functionId,
+        summary: buildSummary(cellsConsoleEvents),
         id: generateCurrentTimestamp(),
-        originalId: cellsConsoleEvents.id,
-        level: levelMap[cellsConsoleEvents.level],
-        line: cellsConsoleEvents.line,
-        lineSource: {
-          content: cellsConsoleEvents.lineSource,
-          severity: 'info'
-        },
-        source: cellsConsoleEvents.source,
         tsFormat: convertValueToDate(cellsConsoleEvents.ts),
         ts: cellsConsoleEvents.ts
       }))

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

@@ -5,6 +5,7 @@ import { generateCurrentTimestamp } from '@/helpers/generate-timestamp'
 import { convertValueToDate } from '@/helpers'
 import { useGraphQLStore } from '@/stores/graphql-query'
 import { getRecordsFound } from '@/helpers/get-records-found'
+import { buildSummary } from '@/helpers'
 
 export const listEdgeFunctions = async (filter) => {
   const payload = adapt(filter)
@@ -46,11 +47,7 @@ const adaptResponse = (response) => {
 
   const data = body.data.edgeFunctionsEvents?.map((edgeFunctionsEvents) => ({
     id: generateCurrentTimestamp(),
-    configurationId: edgeFunctionsEvents.configurationId,
-    functionLanguage: edgeFunctionsEvents.functionLanguage,
-    edgeFunctionsInitiatorTypeList: edgeFunctionsEvents.edgeFunctionsInitiatorTypeList,
-    edgeFunctionsList: edgeFunctionsEvents.edgeFunctionsList.split(';'),
-    edgeFunctionsTime: `${edgeFunctionsEvents.edgeFunctionsTime}ms`,
+    summary: buildSummary(edgeFunctionsEvents),
     ts: edgeFunctionsEvents.ts,
     tsFormat: convertValueToDate(edgeFunctionsEvents.ts)
   }))

src/services/real-time-events-service/http-request/list-http-request.js

@@ -5,6 +5,7 @@ import { generateCurrentTimestamp } from '@/helpers/generate-timestamp'
 import { convertValueToDate } from '@/helpers'
 import { useGraphQLStore } from '@/stores/graphql-query'
 import { getRecordsFound } from '@/helpers/get-records-found'
+import { buildSummary } from '@/helpers'
 
 export const listHttpRequest = async (filter) => {
   const payload = adapt(filter)
@@ -27,7 +28,19 @@ const adapt = (filter) => {
   const table = {
     dataset: 'httpEvents',
     limit: 10000,
-    fields: ['configurationId', 'host', 'requestId', 'requestUri', 'requestMethod', 'status', 'ts'],
+    fields: [
+      'configurationId',
+      'host',
+      'requestId',
+      'httpUserAgent',
+      'requestMethod',
+      'status',
+      'ts',
+      'upstreamBytesSent',
+      'sslProtocol',
+      'wafLearning',
+      'requestTime'
+    ],
     orderBy: 'ts_ASC'
   }
   return convertGQL(filter, table)
@@ -39,12 +52,7 @@ const adaptResponse = (httpResponse) => {
 
   const data = body.data.httpEvents?.map((httpEventItem) => ({
     id: generateCurrentTimestamp(),
-    configurationId: httpEventItem.configurationId,
-    host: httpEventItem.host,
-    requestId: httpEventItem.requestId,
-    requestUri: httpEventItem.requestUri,
-    requestMethod: httpEventItem.requestMethod,
-    status: httpEventItem.status,
+    summary: buildSummary(httpEventItem),
     ts: httpEventItem.ts,
     tsFormat: convertValueToDate(httpEventItem.ts)
   }))

src/services/real-time-events-service/image-processor/list-image-processor.js

@@ -5,6 +5,7 @@ import { generateCurrentTimestamp } from '@/helpers/generate-timestamp'
 import { convertValueToDate } from '@/helpers'
 import { useGraphQLStore } from '@/stores/graphql-query'
 import { getRecordsFound } from '@/helpers/get-records-found'
+import { buildSummary } from '@/helpers'
 
 export const listImageProcessor = async (filter) => {
   const payload = adapt(filter)
@@ -27,16 +28,7 @@ const adapt = (filter) => {
   const table = {
     dataset: 'imagesProcessedEvents',
     limit: 10000,
-    fields: [
-      'configurationId',
-      'host',
-      'requestUri',
-      'status',
-      'bytesSent',
-      'httpReferer',
-      'httpUserAgent',
-      'ts'
-    ],
+    fields: ['configurationId', 'host', 'requestUri', 'status', 'bytesSent', 'httpReferer', 'ts'],
     orderBy: 'ts_ASC'
   }
   return convertGQL(filter, table)
@@ -48,13 +40,7 @@ const adaptResponse = (response) => {
 
   const data = body.data.imagesProcessedEvents?.map((imagesProcessedEvents) => ({
     id: generateCurrentTimestamp(),
-    configurationId: imagesProcessedEvents.configurationId,
-    host: imagesProcessedEvents.host,
-    requestUri: imagesProcessedEvents.requestUri,
-    status: imagesProcessedEvents.status,
-    bytesSent: imagesProcessedEvents.bytesSent,
-    httpReferer: imagesProcessedEvents.httpReferer,
-    httpUserAgent: imagesProcessedEvents.httpUserAgent,
+    summary: buildSummary(imagesProcessedEvents),
     ts: imagesProcessedEvents.ts,
     tsFormat: convertValueToDate(imagesProcessedEvents.ts)
   }))

src/services/real-time-events-service/tiered-cache/list-tiered-cache.js

@@ -5,6 +5,7 @@ import { generateCurrentTimestamp } from '@/helpers/generate-timestamp'
 import { convertValueToDate } from '@/helpers'
 import { useGraphQLStore } from '@/stores/graphql-query'
 import { getRecordsFound } from '@/helpers/get-records-found'
+import { buildSummary } from '@/helpers'
 
 export const listTieredCache = async (filter) => {
   const payload = adapt(filter)
@@ -30,7 +31,6 @@ const adapt = (filter) => {
     fields: [
       'configurationId',
       'host',
-      'requestUri',
       'requestMethod',
       'upstreamCacheStatus',
       'ts',
@@ -48,17 +48,8 @@ const adaptResponse = (response) => {
 
   const data = body.data.l2CacheEvents?.map((tieredCacheEvents) => ({
     id: generateCurrentTimestamp(),
-    configurationId: tieredCacheEvents.configurationId,
-    host: tieredCacheEvents.host,
-    requestUri: tieredCacheEvents.requestUri,
-    requestMethod: tieredCacheEvents.requestMethod,
-    upstreamCacheStatus: {
-      content: tieredCacheEvents.upstreamCacheStatus,
-      severity: 'info'
-    },
+    summary: buildSummary(tieredCacheEvents),
     ts: tieredCacheEvents.ts,
-    proxyHost: tieredCacheEvents.proxyHost,
-    source: tieredCacheEvents.source,
     tsFormat: convertValueToDate(tieredCacheEvents.ts)
   }))
 

src/templates/list-table-block/columns/column-builder.js

@@ -14,12 +14,13 @@ import TextWithTagColumn from './text-with-tag-column.vue'
 import CreditCardColumn from './credit-card-column.vue'
 import CountryFlagColumn from './country-flag-column.vue'
 import TagWithTooltip from './tag-with-tooltip'
+import LogBody from './log-body.vue'
 
 /**
  * Build and return a specific column based on the given appearance.
  *
  * @param {Object} params - The parameters to build the column.
- * @param {'expand-column'| 'expand-text-column'| 'avatar-with-text'| 'avatar-with-text-and-tooltip'| 'text-with-clipboard'| 'clickable-text'| 'clickable-tag'| 'clickable-link'| 'tag'| 'language-icon-with-text'| 'text-with-tag'| 'credit-card-column' | 'country-flag-column'} params.columnAppearance - The appearance of the column.
+ * @param {'expand-column'| 'expand-text-column'| 'avatar-with-text'| 'avatar-with-text-and-tooltip'| 'text-with-clipboard'| 'clickable-text'| 'clickable-tag'| 'clickable-link'| 'tag'| 'language-icon-with-text'| 'text-with-tag'| 'credit-card-column' | 'country-flag-column' | 'log-body'} params.columnAppearance - The appearance of the column.
  * @param {Object} params.data - The data with specific properties of the column appearance.
  * @param {Object} [params.dependencies] - (Optional) The dependencies needed for rendering this column appearance.
  *
@@ -112,6 +113,10 @@ export const columnBuilder = ({ data, columnAppearance, dependencies }) => {
         },
         tooltipText: data.tooltipText
       })
+    case 'log-body':
+      return h(LogBody, {
+        value: data
+      })
     default:
       throw new Error('Invalid column appearance')
   }