Merge pull request #1825 from aziontech/UXE-4771-implement-a-feature-…

…to-display-the-5-most-used-fields

[UXE-4771] feat: implement a feature to display the 5 most used fields

src/helpers/real-time-filters-rules.js

@@ -30,28 +30,52 @@ const FILTER_WHITELIST = {
 
 const MOST_RELEVANT_FIELDS = {
   httpMetrics: ['Domain', 'Status', 'Upstream Status', 'Upstream Cache Status', 'Request Time'],
+  httpEvents: ['Domain', 'Status', 'Upstream Status', 'Upstream Cache Status', 'Request Time'],
   l2CacheMetrics: [
     'Upstream Bytes Received',
     'Status',
     'Upstream Status',
     'Upstream Cache Status',
     'Request Time'
   ],
+  l2CacheEvents: [
+    'Upstream Bytes Received',
+    'Status',
+    'Upstream Status',
+    'Upstream Cache Status',
+    'Request Time'
+  ],
   edgeFunctionsMetrics: [
     'Domain',
     'Edge Function Id',
     'Compute Time',
     'Invocations',
     'Edge Functions Instance Id List'
   ],
+  edgeFunctionsEvents: [
+    'Domain',
+    'Edge Function Id',
+    'Compute Time',
+    'Invocations',
+    'Edge Functions Instance Id List'
+  ],
   imagesProcessedMetrics: [
     'Domain',
     'Status',
     'Upstream Status',
     'Upstream Cache Status',
     'Request Time'
   ],
+  imagesProcessedEvents: [
+    'Domain',
+    'Status',
+    'Upstream Status',
+    'Upstream Cache Status',
+    'Request Time'
+  ],
+  idnsQueriesEvents: ['Qtype', 'Requests', 'Source Loc Pop', 'Zone Id'],
   idnsQueriesMetrics: ['Qtype', 'Requests', 'Source Loc Pop', 'Zone Id'],
+  dataStreamedEvents: ['Domain', 'Data Streamed', 'Endpoint Type', 'Requests', 'Configuration Id'],
   dataStreamedMetrics: ['Domain', 'Status', 'Data Streamed', 'Endpoint Type', 'Requests']
 }
 
@@ -67,6 +91,32 @@ const FILTER_LIKE_ALIAS = {
   configurationIdIn: 'Domain'
 }
 
+/**
+ * Order by more relevant
+ *
+ * @param {array} fields - List to be sorted.
+ * @return {array} Sorted list.
+ */
+
+const sortFields = (fields) => {
+  const notRelevant = -1
+  fields.sort((fieldA, fieldB) => {
+    if (fieldA.mostRelevant === notRelevant && fieldB.mostRelevant !== notRelevant) {
+      return 1
+    }
+
+    if (fieldA.mostRelevant !== notRelevant && fieldB.mostRelevant === notRelevant) {
+      return -1
+    }
+
+    if (fieldA.mostRelevant !== fieldB.mostRelevant) {
+      return fieldA.mostRelevant - fieldB.mostRelevant
+    }
+
+    return fieldA.label.localeCompare(fieldB.label)
+  })
+}
+
 /**
  * Verify if the provided name is blacklisted.
  *
@@ -97,6 +147,7 @@ const FILTERS_RULES = {
   FILTER_WHITELIST,
   verifyWhiteListFields,
   verifyBlackListFields,
+  sortFields,
   MOST_RELEVANT_FIELDS,
   FILTER_LIKE_TYPE,
   FILTER_LIKE_ALIAS,

src/modules/real-time-events/filters/index.js

@@ -0,0 +1,3 @@
+import GetRelevantField from './relevant-fields'
+
+export { GetRelevantField }

src/modules/real-time-events/filters/relevant-fields.js

@@ -0,0 +1,13 @@
+import { FILTERS_RULES } from '@/helpers'
+
+/**
+ * Check if the given field is relevant in the specified dataset.
+ *
+ * @param {string} fieldName - The name of the field to check.
+ * @param {string} dataset - The dataset to check against.
+ * @return {number} The index of the relevant field, or -1 if not relevant.
+ */
+export default function GetRelevantField(fieldName, dataset) {
+  const fieldsRelevant = FILTERS_RULES.MOST_RELEVANT_FIELDS[dataset] || []
+  return fieldsRelevant.indexOf(fieldName)
+}

src/tests/helpers/realt-time-filter-rules.test.js

@@ -45,28 +45,64 @@ describe('RealTimeMetricsModule', () => {
             'Upstream Cache Status',
             'Request Time'
           ],
+          httpEvents: [
+            'Domain',
+            'Status',
+            'Upstream Status',
+            'Upstream Cache Status',
+            'Request Time'
+          ],
           l2CacheMetrics: [
             'Upstream Bytes Received',
             'Status',
             'Upstream Status',
             'Upstream Cache Status',
             'Request Time'
           ],
+          l2CacheEvents: [
+            'Upstream Bytes Received',
+            'Status',
+            'Upstream Status',
+            'Upstream Cache Status',
+            'Request Time'
+          ],
           edgeFunctionsMetrics: [
             'Domain',
             'Edge Function Id',
             'Compute Time',
             'Invocations',
             'Edge Functions Instance Id List'
           ],
+          edgeFunctionsEvents: [
+            'Domain',
+            'Edge Function Id',
+            'Compute Time',
+            'Invocations',
+            'Edge Functions Instance Id List'
+          ],
           imagesProcessedMetrics: [
             'Domain',
             'Status',
             'Upstream Status',
             'Upstream Cache Status',
             'Request Time'
           ],
+          imagesProcessedEvents: [
+            'Domain',
+            'Status',
+            'Upstream Status',
+            'Upstream Cache Status',
+            'Request Time'
+          ],
+          idnsQueriesEvents: ['Qtype', 'Requests', 'Source Loc Pop', 'Zone Id'],
           idnsQueriesMetrics: ['Qtype', 'Requests', 'Source Loc Pop', 'Zone Id'],
+          dataStreamedEvents: [
+            'Domain',
+            'Data Streamed',
+            'Endpoint Type',
+            'Requests',
+            'Configuration Id'
+          ],
           dataStreamedMetrics: ['Domain', 'Status', 'Data Streamed', 'Endpoint Type', 'Requests']
         },
         FILTER_LIKE_TYPE: {
@@ -114,5 +150,135 @@ describe('RealTimeMetricsModule', () => {
       const result = FILTERS_RULES.verifyWhiteListFields(unsupportedField)
       expect(result).toBe(false)
     })
+
+    it('should order by the most relevant ', () => {
+      const filters = [
+        {
+          label: 'Server Protocol',
+          value: 'serverProtocol',
+          mostRelevant: -1,
+          operator: []
+        },
+        {
+          label: 'Version',
+          value: 'version',
+          mostRelevant: -1,
+          operator: []
+        },
+        {
+          label: 'Solution',
+          value: 'solution',
+          mostRelevant: -1,
+          operator: []
+        },
+        {
+          label: 'Host',
+          value: 'host',
+          mostRelevant: -1,
+          operator: []
+        },
+        {
+          label: 'Request Time',
+          value: 'requestTime',
+          mostRelevant: 4,
+          operator: []
+        },
+        {
+          label: 'Request Method',
+          value: 'requestMethod',
+          mostRelevant: -1,
+          operator: []
+        },
+        {
+          label: 'Upstream Cache Status',
+          value: 'upstreamCacheStatus',
+          mostRelevant: 3,
+          operator: []
+        },
+        {
+          label: 'Upstream Status',
+          value: 'upstreamStatus',
+          mostRelevant: 2,
+          operator: []
+        },
+        {
+          label: 'Status',
+          value: 'status',
+          mostRelevant: 1,
+          operator: []
+        },
+        {
+          label: 'Upstream Response Time',
+          value: 'upstreamResponseTime',
+          mostRelevant: -1,
+          operator: []
+        }
+      ]
+
+      FILTERS_RULES.sortFields(filters)
+
+      expect(filters).toEqual([
+        {
+          label: 'Status',
+          mostRelevant: 1,
+          operator: [],
+          value: 'status'
+        },
+        {
+          label: 'Upstream Status',
+          mostRelevant: 2,
+          operator: [],
+          value: 'upstreamStatus'
+        },
+        {
+          label: 'Upstream Cache Status',
+          mostRelevant: 3,
+          operator: [],
+          value: 'upstreamCacheStatus'
+        },
+        {
+          label: 'Request Time',
+          mostRelevant: 4,
+          operator: [],
+          value: 'requestTime'
+        },
+        {
+          label: 'Host',
+          mostRelevant: -1,
+          operator: [],
+          value: 'host'
+        },
+        {
+          label: 'Request Method',
+          mostRelevant: -1,
+          operator: [],
+          value: 'requestMethod'
+        },
+        {
+          label: 'Server Protocol',
+          mostRelevant: -1,
+          operator: [],
+          value: 'serverProtocol'
+        },
+        {
+          label: 'Solution',
+          mostRelevant: -1,
+          operator: [],
+          value: 'solution'
+        },
+        {
+          label: 'Upstream Response Time',
+          mostRelevant: -1,
+          operator: [],
+          value: 'upstreamResponseTime'
+        },
+        {
+          label: 'Version',
+          mostRelevant: -1,
+          operator: [],
+          value: 'version'
+        }
+      ])
+    })
   })
 })

src/views/RealTimeEvents/TabsView.vue

@@ -34,6 +34,9 @@
   import { useRoute, useRouter } from 'vue-router'
   import TabView from 'primevue/tabview'
   import TabPanel from 'primevue/tabpanel'
+  import { GetRelevantField } from '@/modules/real-time-events/filters'
+  import { FILTERS_RULES } from '@/helpers'
+
   import TabPanelBlock from '@/views/RealTimeEvents/Blocks/tab-panel-block.vue'
   import TABS_EVENTS from '@/views/RealTimeEvents/Blocks/constants/tabs-events'
   import {
@@ -144,6 +147,22 @@
     await fetchFieldsWithOperator(tabPanels[tabSelectIndex.value])
   }
 
+  const sortByMostRelevantFilters = (filters) => {
+    const { dataset } = tabPanels[tabSelectIndex.value]
+    const newOptions = filters.map(({ label, operator, value }) => {
+      const mostRelevant = GetRelevantField(label, dataset)
+      return {
+        label,
+        value,
+        mostRelevant,
+        operator
+      }
+    })
+
+    FILTERS_RULES.sortFields(newOptions)
+    return newOptions
+  }
+
   let abortController = null
   const fetchFieldsWithOperator = async (tabSelected) => {
     if (abortController) abortController.abort()
@@ -158,7 +177,8 @@
         signal: abortController.signal
       })
 
-      generatedFilterFields.value = adapterFields(fieldAllDataset.value, operatorsData, dataset)
+      const filters = adapterFields(fieldAllDataset.value, operatorsData, dataset)
+      generatedFilterFields.value = sortByMostRelevantFilters(filters)
     } catch (error) {
       if (error.name !== 'AbortError') {
         generatedFilterFields.value = []

src/views/RealTimeMetrics/blocks/content-filter-block.vue

@@ -4,6 +4,7 @@
   import { computed, ref, watch, inject } from 'vue'
   import { MAP_SERVICE_OPERATION } from '@modules/real-time-metrics/constants'
   import { GetRelevantField } from '@/modules/real-time-metrics/filters'
+  import { FILTERS_RULES } from '@/helpers'
 
   const {
     getDatasetAvailableFilters,
@@ -87,7 +88,7 @@
         }))
       }
     })
-    sortFields(newOptions)
+    FILTERS_RULES.sortFields(newOptions)
     return newOptions
   })
 
@@ -139,25 +140,6 @@
     }
   })
 
-  const sortFields = (fields) => {
-    const notRelevant = -1
-    fields.sort((fieldA, fieldB) => {
-      if (fieldA.mostRelevant === notRelevant && fieldB.mostRelevant !== notRelevant) {
-        return 1
-      }
-
-      if (fieldA.mostRelevant !== notRelevant && fieldB.mostRelevant === notRelevant) {
-        return -1
-      }
-
-      if (fieldA.mostRelevant !== fieldB.mostRelevant) {
-        return fieldA.mostRelevant - fieldB.mostRelevant
-      }
-
-      return fieldA.label.localeCompare(fieldB.label)
-    })
-  }
-
   const clickedAppliedFilterOnRealTimeMetrics = () => {
     const payload = {
       section: props.groupData.current.value,