[UXE-6354] feat: add total records found tag in waf rules tunning page

src/services/waf-rules-services/list-waf-rules-tuning-service.js

@@ -5,7 +5,7 @@ import * as Errors from '@/services/axios/errors'
 export const listWafRulesTuningService = async ({ wafId, domains, network, hourRange, filter }) => {
   if (!wafId) {
     return parseHttpResponse({
-      body: [],
+      body: { data: [], recordsFound: 0 },
       statusCode: 200
     })
   }
@@ -65,8 +65,8 @@ const adapt = (httpResponse) => {
    */
 
   if (httpResponse.statusCode !== 200) return httpResponse
-
   const isArray = Array.isArray(httpResponse.body.results)
+  const count = isArray ? httpResponse.body.results.length : 0
   const parsedWafRulesTuning = isArray
     ? httpResponse.body.results.map((event, index) => {
         const values = {
@@ -89,7 +89,7 @@ const adapt = (httpResponse) => {
     : []
 
   return {
-    body: parsedWafRulesTuning,
+    body: { data: parsedWafRulesTuning, recordsFound: count },
     statusCode: httpResponse.statusCode
   }
 }

src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js

@@ -61,22 +61,25 @@ describe('WafRulesService', () => {
 
     const result = await sut(fixtures.payload)
 
-    expect(result).toEqual([
-      {
-        hitCount: fixtures.wafRulesMock.hit_count,
-        topIps: fixtures?.wafRulesMock?.top_10_ips?.[0]?.[1] || '',
-        ruleId: fixtures.wafRulesMock.rule_id,
-        id: `${fixtures.wafRulesMock.rule_id}0`,
-        ruleIdDescription: `${fixtures.wafRulesMock.rule_id} - ${fixtures.wafRulesMock.rule_description}`,
-        ipCount: fixtures.wafRulesMock.ip_count,
-        matchZone: fixtures.wafRulesMock.match_zone,
-        pathCount: fixtures.wafRulesMock.path_count,
-        topCountries: fixtures?.wafRulesMock?.top_10_countries?.[0]?.[1] || '',
-        matchesOn: fixtures.wafRulesMock.matches_on,
-        ruleDescription: fixtures.wafRulesMock.rule_description,
-        countryCount: fixtures.wafRulesMock.country_count
-      }
-    ])
+    expect(result).toEqual({
+      data: [
+        {
+          hitCount: fixtures.wafRulesMock.hit_count,
+          topIps: fixtures?.wafRulesMock?.top_10_ips?.[0]?.[1] || '',
+          ruleId: fixtures.wafRulesMock.rule_id,
+          id: `${fixtures.wafRulesMock.rule_id}0`,
+          ruleIdDescription: `${fixtures.wafRulesMock.rule_id} - ${fixtures.wafRulesMock.rule_description}`,
+          ipCount: fixtures.wafRulesMock.ip_count,
+          matchZone: fixtures.wafRulesMock.match_zone,
+          pathCount: fixtures.wafRulesMock.path_count,
+          topCountries: fixtures?.wafRulesMock?.top_10_countries?.[0]?.[1] || '',
+          matchesOn: fixtures.wafRulesMock.matches_on,
+          ruleDescription: fixtures.wafRulesMock.rule_description,
+          countryCount: fixtures.wafRulesMock.country_count
+        }
+      ],
+      recordsFound: 1
+    })
   })
   it('should return empty data when the values in the parameter are not passed in ', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
@@ -87,7 +90,10 @@ describe('WafRulesService', () => {
 
     const result = await sut({})
 
-    expect(result).toEqual([])
+    expect(result).toEqual({
+      data: [],
+      recordsFound: 0
+    })
   })
 
   it('Should return an API error for an 400 response status', async () => {

src/views/WafRules/ListWafRulesTuning.vue

@@ -1,50 +1,58 @@
 <template>
-  <div class="flex flex-shrink gap-6 mt-4 flex-col sm:flex-row sm:w-xs">
-    <Dropdown
-      appendTo="self"
-      optionValue="value"
-      optionLabel="name"
-      :options="timeOptions"
-      v-model="selectedFilter.hourRange"
-      @change="filterTuning"
-      class="w-full sm:max-w-xs"
-    />
-
-    <FieldMultiselectLazyLoader
-      data-testid="waf-tuning-list__domains-field"
-      name="valueDomainId"
-      :service="props.listDomainsService"
-      :loadService="props.loadDomainService"
-      optionLabel="name"
-      optionValue="id"
-      :value="valueDomainId"
-      appendTo="self"
-      class="w-full sm:max-w-xs overflow-hidden"
-      placeholder="Select domain"
-      @onChange="setDomainsSelectedOptions"
-    />
-
-    <FieldDropdownLazyLoader
-      data-testid="waf-tuning-list__network-list-field"
-      name="valueNetworkId"
-      :service="props.listNetworkListService"
-      :loadService="props.loadNetworkListService"
-      optionLabel="name"
-      optionValue="id"
-      :value="valueNetworkId"
-      :moreOptions="['value']"
-      appendTo="self"
-      placeholder="Select an network list"
-      @onClear="setNetworkListSelectedOption(null)"
-      @onSelectOption="setNetworkListSelectedOption"
-      class="w-full sm:max-w-xs"
-      enableClearOption
-    />
-  </div>
-
   <div
-    class="border-1 border-bottom-none border-round-top-xl p-3.5 surface-border rounded-md mt-5 rounded-b-none"
+    class="border-1 border-bottom-none border-round-top-xl p-3.5 surface-border rounded-md mt-5 rounded-b-none flex flex-col gap-6 md:gap-4"
   >
+    <div class="w-full flex md:flex-row flex-col gap-4 md:items-center">
+      <div class="flex gap-6 flex-col sm:flex-row w-full">
+        <Dropdown
+          appendTo="self"
+          optionValue="value"
+          optionLabel="name"
+          :options="timeOptions"
+          v-model="selectedFilter.hourRange"
+          @change="filterTuning"
+          class="w-full sm:max-w-xs"
+        />
+
+        <FieldMultiselectLazyLoader
+          data-testid="waf-tuning-list__domains-field"
+          name="valueDomainId"
+          :service="props.listDomainsService"
+          :loadService="props.loadDomainService"
+          optionLabel="name"
+          optionValue="id"
+          :value="valueDomainId"
+          appendTo="self"
+          class="w-full sm:max-w-xs overflow-hidden"
+          placeholder="Select domain"
+          @onChange="setDomainsSelectedOptions"
+        />
+
+        <FieldDropdownLazyLoader
+          data-testid="waf-tuning-list__network-list-field"
+          name="valueNetworkId"
+          :service="props.listNetworkListService"
+          :loadService="props.loadNetworkListService"
+          optionLabel="name"
+          optionValue="id"
+          :value="valueNetworkId"
+          :moreOptions="['value']"
+          appendTo="self"
+          placeholder="Select an network list"
+          @onClear="setNetworkListSelectedOption(null)"
+          @onSelectOption="setNetworkListSelectedOption"
+          class="w-full sm:max-w-xs"
+          enableClearOption
+        />
+      </div>
+      <div class="flex items-center justify-end">
+        <PrimeTag
+          class="no-wrap whitespace-nowrap ml-auto"
+          :value="recordsFoundLabel"
+          severity="info"
+        />
+      </div>
+    </div>
     <advancedFilter
       v-model:externalFilter="selectedFilter"
       v-model:filterAdvanced="selectedFilterAdvanced"
@@ -55,7 +63,7 @@
   <ListTableBlock
     v-show="showListTable"
     pageTitleDelete="WAF rules tuning"
-    :listService="props.listWafRulesTuningService"
+    :listService="listService"
     ref="listServiceWafTunningRef"
     :columns="wafRulesAllowedColumns"
     :hasListService="true"
@@ -72,7 +80,6 @@
     title="Select a domain to query data"
     description="To use this feature, a domain must be associated with the edge firewall that has a behavior running this WAF rule set."
     :documentationService="props.documentationServiceTuning"
-    inTabs
     noShowBorderTop
     class="!mt-0"
   >
@@ -135,6 +142,7 @@
   import { computed, onMounted, ref, inject } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
   import { handleTrackerError } from '@/utils/errorHandlingTracker'
+  import PrimeTag from 'primevue/tag'
 
   /** @type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
   const tracker = inject('tracker')
@@ -195,6 +203,7 @@
     hourRange: '1'
   })
   const selectedEvents = ref([])
+  const totalRecordsFound = ref(0)
   const isLoadingAllowed = ref(null)
   const showDialogAllowRule = ref(false)
   const showDetailsOfAttack = ref(false)
@@ -211,6 +220,10 @@
   const valueNetworkId = ref(null)
   const valueDomainId = ref(null)
 
+  const recordsFoundLabel = computed(() => {
+    return `${totalRecordsFound.value} records found`
+  })
+
   const timeName = computed(
     () => timeOptions.value.find((item) => item.value === selectedFilter.value.hourRange).name
   )
@@ -318,6 +331,12 @@
     return selectedFilter.value.domains?.length
   })
 
+  const listService = async (params) => {
+    const response = await props.listWafRulesTuningService(params)
+    totalRecordsFound.value = response.recordsFound
+    return response.data
+  }
+
   const setNetworkListSelectedOption = (value) => {
     selectedFilter.value.network = value
     filterTuning()