From 11d7d501a70e946643e1f8e2eecf6fa00558646e Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 18 Jan 2024 14:34:55 -0300
Subject: [PATCH 01/26] feat: add tuning list and their services

---
 src/router/routes/waf-rules-routes/index.js   |   8 +-
 .../delete-waf-rules-allowed-service.js       |   2 +-
 src/services/waf-rules-services/index.js      |   8 +-
 .../list-network-list-service.js              |  28 +++
 .../list-waf-rules-domain-service.js          |  39 +++
 .../list-waf-rules-tuning-service.js          |  44 ++++
 .../action-bar-with-teleport.vue              |   4 +-
 .../delete-waf-rules-allowed-service.test.js  |   4 +-
 .../list-network-list-service.test.js         |  63 +++++
 .../list-waf-rules-domain-service.test.js     |  62 +++++
 src/views/WafRules/EditView.vue               |   5 +
 .../WafRules/FormFields/FormFieldsAllowed.vue |   7 +-
 src/views/WafRules/ListWafRulesTuning.vue     | 222 ++++++++++++++++++
 src/views/WafRules/TabsView.vue               |  22 +-
 14 files changed, 503 insertions(+), 15 deletions(-)
 create mode 100644 src/services/waf-rules-services/list-network-list-service.js
 create mode 100644 src/services/waf-rules-services/list-waf-rules-domain-service.js
 create mode 100644 src/services/waf-rules-services/list-waf-rules-tuning-service.js
 create mode 100644 src/tests/services/waf-rules-services/list-network-list-service.test.js
 create mode 100644 src/tests/services/waf-rules-services/list-waf-rules-domain-service.test.js
 create mode 100644 src/views/WafRules/ListWafRulesTuning.vue

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index fe17e084c..0ffa67e8f 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -1,5 +1,7 @@
 import * as Helpers from '@/helpers'
 import * as WafRulesService from '@/services/waf-rules-services'
+import { listCountriesService } from '@/services/network-lists-services'
+
 
 /** @type {import('vue-router').RouteRecordRaw} */
 export const wafRulesRoutes = {
@@ -62,7 +64,11 @@ export const wafRulesRoutes = {
           loadWafRulesService: WafRulesService.loadWafRulesService
         },
         wafTuning: {
-          documentationServiceTuning: Helpers.documentationCatalog.wafTuning
+          documentationServiceTuning: Helpers.documentationCatalog.wafTuning,
+          listWafRulesTuningService: WafRulesService.listWafRulesTuningService,
+          listNetworkListService: WafRulesService.listNetworkListService,
+          listCountriesService: listCountriesService,
+          listWafRulesDomainsService: WafRulesService.listWafRulesDomainsService
         }
       },
       meta: {
diff --git a/src/services/waf-rules-services/delete-waf-rules-allowed-service.js b/src/services/waf-rules-services/delete-waf-rules-allowed-service.js
index 6545cf49f..b04a2cc8c 100644
--- a/src/services/waf-rules-services/delete-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/delete-waf-rules-allowed-service.js
@@ -19,7 +19,7 @@ export const deleteWafRulesAllowedService = async ({ wafId, allowedId }) => {
  */
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
-    case 200:
+    case 202:
       return 'Waf rule allowed successfully deleted'
     case 400:
       throw new Errors.NotFoundError().message
diff --git a/src/services/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index b13c20751..c31941e89 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -8,6 +8,9 @@ import { deleteWafRulesAllowedService } from './delete-waf-rules-allowed-service
 import { createWafRulesAllowedService } from './create-waf-rules-allowed-service'
 import { loadWafRulesAllowedService } from './load-waf-rules-allowed-service'
 import { editWafRulesAllowedService } from './edit-waf-rules-allowed-service'
+import { listWafRulesTuningService } from './list-waf-rules-tuning-service'
+import { listNetworkListService } from './list-network-list-service'
+import { listWafRulesDomainsService } from './list-waf-rules-domain-service'
 
 export {
   listWafRulesService,
@@ -19,5 +22,8 @@ export {
   deleteWafRulesAllowedService,
   createWafRulesAllowedService,
   loadWafRulesAllowedService,
-  editWafRulesAllowedService
+  editWafRulesAllowedService,
+  listWafRulesTuningService,
+  listNetworkListService,
+  listWafRulesDomainsService
 }
diff --git a/src/services/waf-rules-services/list-network-list-service.js b/src/services/waf-rules-services/list-network-list-service.js
new file mode 100644
index 000000000..ca8278396
--- /dev/null
+++ b/src/services/waf-rules-services/list-network-list-service.js
@@ -0,0 +1,28 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeNetworkListBaseUrl } from '../network-lists-services/make-network-list-base-url'
+
+export const listNetworkListService = async () => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeNetworkListBaseUrl()}?pagination=false&exclude_azion_lists=true`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  const isArray = Array.isArray(httpResponse.body.results)
+
+  const networkList = isArray
+    ? httpResponse.body.results.map((networkList) => ({
+        id: networkList.id,
+        name: networkList.name,
+      }))
+    : []
+
+  return {
+    body: networkList,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/services/waf-rules-services/list-waf-rules-domain-service.js b/src/services/waf-rules-services/list-waf-rules-domain-service.js
new file mode 100644
index 000000000..96bb9a135
--- /dev/null
+++ b/src/services/waf-rules-services/list-waf-rules-domain-service.js
@@ -0,0 +1,39 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
+
+export const listWafRulesDomainsService = async ({ wafId }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesBaseUrl()}/${wafId}/domains`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+
+
+const adapt = (httpResponse) => {
+  /**
+   * Necessary until the API gets the common pattern
+   * of returning the array of data inside results property
+   * like other andpoints.
+   */
+
+  // eslint-disable-next-line no-console
+  const isArray = Array.isArray(httpResponse.body.results)
+
+
+  const parsedWafRulesDomain = isArray
+    ? httpResponse.body.results.map((domain) => ({
+      domain: domain.domain,
+      id: domain.id,
+      name: domain.name,
+    })) : []
+
+  return {
+    body: parsedWafRulesDomain,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
new file mode 100644
index 000000000..cc89d5685
--- /dev/null
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
@@ -0,0 +1,44 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
+
+export const listWafRulesTuningService = async ({ wafId }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesBaseUrl()}/${wafId}/waf_events`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+// const parseStatusData = (status) => {
+//   const parsedStatus = status
+//     ? {
+//         content: 'Active',
+//         severity: 'success'
+//       }
+//     : {
+//         content: 'Inactive',
+//         severity: 'danger'
+//       }
+
+//   return parsedStatus
+// }
+
+
+
+const adapt = (httpResponse) => {
+  /**
+   * Necessary until the API gets the common pattern
+   * of returning the array of data inside results property
+   * like other andpoints.
+   */
+
+  // eslint-disable-next-line no-console
+  console.log(httpResponse.body);
+
+  return {
+    body: httpResponse.body,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/templates/action-bar-block/action-bar-with-teleport.vue b/src/templates/action-bar-block/action-bar-with-teleport.vue
index 1f94b169f..b41958cab 100644
--- a/src/templates/action-bar-block/action-bar-with-teleport.vue
+++ b/src/templates/action-bar-block/action-bar-with-teleport.vue
@@ -9,7 +9,8 @@
     id: { type: String, default: '#action-bar' },
     loading: Boolean,
     cancelDisabled: Boolean,
-    submitDisabled: Boolean
+    submitDisabled: Boolean,
+    primaryActionLabel: String
   })
 
   const handleSubmit = () => {
@@ -37,6 +38,7 @@
       :cancelDisabled="props.cancelDisabled"
       :submitDisabled="props.submitDisabled"
       :inDrawer="false"
+      :primaryActionLabel="props.primaryActionLabel"
       @onSubmit="handleSubmit"
       @onCancel="handleCancel"
     />
diff --git a/src/tests/services/waf-rules-services/delete-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/delete-waf-rules-allowed-service.test.js
index 14c1c21ea..6456eee76 100644
--- a/src/tests/services/waf-rules-services/delete-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/delete-waf-rules-allowed-service.test.js
@@ -14,7 +14,7 @@ const makeSut = () => {
 describe('WafRulesServices', () => {
   it('should call API with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 200
+      statusCode: 202
     })
     const wafRuleIdMock = 765678
     const { sut } = makeSut()
@@ -28,7 +28,7 @@ describe('WafRulesServices', () => {
 
   it('should return a feedback message on successfully deleted', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 200
+      statusCode: 202
     })
     const wafRuleIdMock = 7816825367
     const { sut } = makeSut()
diff --git a/src/tests/services/waf-rules-services/list-network-list-service.test.js b/src/tests/services/waf-rules-services/list-network-list-service.test.js
new file mode 100644
index 000000000..21884ea52
--- /dev/null
+++ b/src/tests/services/waf-rules-services/list-network-list-service.test.js
@@ -0,0 +1,63 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listNetworkListService } from '@/services/waf-rules-services'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  networkMock: {
+    id: 123123123,
+    name: 'Network AZ',
+  }
+}
+
+const makeSut = () => {
+  const sut = listNetworkListService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: null
+      }
+    })
+
+    const { sut } = makeSut()
+    await sut()
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: `v3/network_lists?pagination=false&exclude_azion_lists=true`,
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly each network record', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: {
+        results: [fixtures.networkMock]
+      }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut()
+
+    expect(result).toEqual([
+      {
+        id: fixtures.networkMock.id,
+        name: fixtures.networkMock.name,
+      }
+    ])
+  })
+})
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-domain-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-domain-service.test.js
new file mode 100644
index 000000000..d4204db3c
--- /dev/null
+++ b/src/tests/services/waf-rules-services/list-waf-rules-domain-service.test.js
@@ -0,0 +1,62 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listWafRulesDomainsService } from '@/services/waf-rules-services'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesDomainMock: {
+    cnames: [],
+    domain: "erwc1eveo1.map.azionedge.net",
+    id: 1705587704,
+    name: "atack"
+  },
+}
+
+const makeSut = () => {
+  const sut = listWafRulesDomainsService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { result: null }
+    })
+
+    const { sut } = makeSut()
+    await sut({ wafId: 100 })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v3/waf/100/domains',
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly domain', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.wafRulesDomainMock] }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ wafId: 100 })
+
+    expect(result).toEqual([
+      {
+        domain: fixtures.wafRulesDomainMock.domain,
+        id: fixtures.wafRulesDomainMock.id,
+        name: fixtures.wafRulesDomainMock.name,
+      },
+    ])
+  })
+})
diff --git a/src/views/WafRules/EditView.vue b/src/views/WafRules/EditView.vue
index c6d7f347c..ea87ab8d6 100644
--- a/src/views/WafRules/EditView.vue
+++ b/src/views/WafRules/EditView.vue
@@ -11,6 +11,7 @@
     </template>
     <template #action-bar="{ onSubmit, formValid, onCancel, loading }">
       <ActionBarTemplate
+        v-if="showActionBar"
         @onSubmit="onSubmit"
         @onCancel="onCancel"
         :loading="loading"
@@ -38,6 +39,10 @@
     loadWafRulesService: {
       type: Function,
       required: true
+    },
+    showActionBar: {
+      type: Boolean,
+      required: true
     }
   })
 
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index 3b1e6c7c7..fc8dd4fe5 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -120,7 +120,7 @@
         align="left"
         type="dashed"
       >
-        <b>Then</b>
+        Then
       </Divider>
       <div class="flex flex-col gap-8">
         <div
@@ -129,7 +129,7 @@
           class="flex flex-col gap-6"
         >
           <div
-            class="flex"
+            class="flex gap-3"
             v-if="index"
           >
             <Divider
@@ -137,9 +137,10 @@
               type="dashed"
               :key="index"
             >
-              <b>And</b>
+              And
             </Divider>
             <PrimeButton
+              outlined
               severity="secondary"
               icon="pi pi-trash"
               aria-label="Trash"
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
new file mode 100644
index 000000000..d0b8d6006
--- /dev/null
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flex gap-6 mt-4">
+    <Dropdown
+      optionValue="value"
+      optionLabel="name"
+      :options="timeOptions"
+      v-model="time"
+      class="w-full sm:w-1/5"
+    />
+    <MultiSelect
+      placeholder="Sample Domain"
+      optionValue="id"
+      optionLabel="name"
+      filter
+      :options="domainsOptions.options"
+      v-model="selectedDomain"
+      :loading="!domainsOptions.done"
+      class="w-full sm:w-1/5"
+    />
+  </div>
+  <ListTableNoHeaderBlock
+    v-if="true"
+    pageTitleDelete="Waf Rules Tuning"
+    :columns="wafRulesAllowedColumns"
+    :listService="handleListWafRulesTuningService"
+    @on-load-data="handleLoadData"
+    emptyListMessage="No Waf Rules Tuning found."
+  >
+    <template #addButton>
+      <PrimeButton
+        label="search"
+        @click="filterTuning"
+      />
+    </template>
+  </ListTableNoHeaderBlock>
+
+  <EmptyResultsBlock
+    v-else
+    title="Select a domain and filter possible attacks"
+    description="Select at least one domain to get insights into your WAF Rule Set."
+    :documentationService="props.documentationServiceTuning"
+    :inTabs="true"
+  >
+    <template #default>
+      <PrimeButton
+        severity="secondary"
+        icon="pi pi-plus"
+        label="Domain"
+      />
+    </template>
+    <template #illustration>
+      <Illustration />
+    </template>
+  </EmptyResultsBlock>
+  <ActionBarTemplate
+    v-if="showActionBar"
+    @onSubmit="onSubmit"
+    @onCancel="onCancel"
+    :loading="loading"
+    :submitDisabled="!formValid"
+    primaryActionLabel="Allow Rules"
+  />
+</template>
+<script setup>
+  import Illustration from '@/assets/svg/illustration-layers.vue'
+  import EmptyResultsBlock from '@/templates/empty-results-block'
+  import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
+
+  import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
+  import PrimeButton from 'primevue/button'
+  import Dropdown from 'primevue/dropdown'
+
+  import MultiSelect from 'primevue/multiselect'
+
+  import { ref, onMounted } from 'vue'
+  import { useRoute } from 'vue-router'
+  import { useToast } from 'primevue/usetoast'
+
+  const route = useRoute()
+  const hasContentToList = ref(false)
+  const selectedDomain = ref([])
+  // const country = ref([])
+  const time = ref('60')
+  const timeOptions = ref([
+    {
+      name: 'Last 1 hour',
+      value: '60'
+    },
+    {
+      name: 'Last 3 hours',
+      value: '180'
+    },
+    {
+      name: 'Last 6 hours',
+      value: '360'
+    },
+    {
+      name: 'Last 12 hours',
+      value: '720'
+    },
+    {
+      name: 'Last day',
+      value: '1'
+    },
+    {
+      name: 'Last 2 days',
+      value: '2'
+    },
+    {
+      name: 'Last 3 days',
+      value: '3'
+    }
+  ])
+
+  const props = defineProps({
+    listWafRulesTuningService: {
+      type: Function,
+      required: true
+    },
+    documentationServiceTuning: {
+      required: true,
+      type: Function
+    },
+    listCountriesService: {
+      required: true,
+      type: Function
+    },
+    listNetworkListService: {
+      required: true,
+      type: Function
+    },
+    listWafRulesDomainsService: {
+      required: true,
+      type: Function
+    },
+    showActionBar: {
+      type: Boolean,
+      required: true
+    }
+  })
+
+  const toast = useToast()
+
+  const showToast = (summary, severity) => {
+    return toast.add({
+      severity,
+      summary,
+      closable: true
+    })
+  }
+
+  const wafRuleId = ref(route.params.id)
+
+  const wafRulesAllowedColumns = ref([
+    {
+      field: 'ruleId',
+      header: 'Rule ID'
+    },
+    {
+      field: 'reason',
+      header: 'Description'
+    },
+    {
+      field: 'path',
+      header: 'URI'
+    }
+  ])
+
+  const handleListWafRulesTuningService = async () => {
+    return await props.listWafRulesTuningService({ wafId: wafRuleId.value })
+  }
+
+  const handleLoadData = (event) => {
+    hasContentToList.value = event
+  }
+
+  const countriesOptions = ref({ options: [], done: true })
+  const netWorkListOptions = ref({ options: [], done: true })
+  const domainsOptions = ref({ options: [], done: true })
+
+  const setCountriesOptions = async () => {
+    countriesOptions.value.done = false
+    try {
+      const response = await props.listCountriesService()
+      countriesOptions.value.options = response
+    } catch (error) {
+      showToast(error, 'error')
+    } finally {
+      countriesOptions.value.done = true
+    }
+  }
+
+  const setNetWorkListOptions = async () => {
+    netWorkListOptions.value.done = false
+    try {
+      const response = await props.listNetworkListService()
+      netWorkListOptions.value.options = response
+    } catch (error) {
+      showToast(error, 'error')
+    } finally {
+      netWorkListOptions.value.done = true
+    }
+  }
+
+  const setDomainsOptions = async () => {
+    domainsOptions.value.done = false
+    try {
+      const response = await props.listWafRulesDomainsService({ wafId: wafRuleId.value })
+      domainsOptions.value.options = response
+    } catch (error) {
+      showToast(error, 'error')
+    } finally {
+      domainsOptions.value.done = true
+    }
+  }
+
+  onMounted(async () => {
+    await setCountriesOptions()
+    await setNetWorkListOptions()
+    await setDomainsOptions()
+  })
+</script>
diff --git a/src/views/WafRules/TabsView.vue b/src/views/WafRules/TabsView.vue
index 37229005d..8a4c1fd69 100644
--- a/src/views/WafRules/TabsView.vue
+++ b/src/views/WafRules/TabsView.vue
@@ -2,7 +2,8 @@
   import ContentBlock from '@/templates/content-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
   import EditView from '@/views/WafRules/EditView.vue'
-  import ListViewWafRulesAllowed from '@/views/WafRules/ListWafRulesAllowed.vue'
+  import ListWafRulesAllowed from '@/views/WafRules/ListWafRulesAllowed.vue'
+  import ListWafRulesTuning from '@/views/WafRules/ListWafRulesTuning.vue'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
 
@@ -13,7 +14,8 @@
 
   const props = defineProps({
     wafServices: { type: Object, required: true },
-    wafRulesAllowed: { type: Object, required: true }
+    wafRulesAllowed: { type: Object, required: true },
+    wafTuning: { type: Object, required: true }
   })
 
   const mapTabs = {
@@ -71,20 +73,28 @@
           <EditView
             :editWafRulesService="props.wafServices.editWafRulesService"
             :loadWafRulesService="props.wafServices.loadWafRulesService"
-          ></EditView>
+            :showActionBar="activeTab === mapTabs.mainSettings"
+          />
         </TabPanel>
         <TabPanel header="Tuning">
-          <h1>Tuning</h1>
+          <ListWafRulesTuning
+            :documentationServiceTuning="props.wafTuning.documentationServiceTuning"
+            :listWafRulesTuningService="props.wafTuning.listWafRulesTuningService"
+            :listCountriesService="props.wafTuning.listCountriesService"
+            :listNetworkListService="props.wafTuning.listNetworkListService"
+            :listWafRulesDomainsService="props.wafTuning.listWafRulesDomainsService"
+            :showActionBar="activeTab === mapTabs.tuning"
+          />
         </TabPanel>
         <TabPanel header="Allowed Rules">
-          <ListViewWafRulesAllowed
+          <ListWafRulesAllowed
             :listWafRulesAllowedService="props.wafRulesAllowed.listWafRulesAllowedService"
             :deleteWafRulesAllowedService="props.wafRulesAllowed.deleteWafRulesAllowedService"
             :createWafRulesAllowedService="props.wafRulesAllowed.createWafRulesAllowedService"
             :loadWafRulesAllowedService="props.wafRulesAllowed.loadWafRulesAllowedService"
             :editWafRulesAllowedService="props.wafRulesAllowed.editWafRulesAllowedService"
             :documentationServiceAllowed="props.wafRulesAllowed.documentationServiceAllowed"
-          ></ListViewWafRulesAllowed>
+          />
         </TabPanel>
       </TabView>
     </template>

From 9fcd4c42d8c53d8a398fc378495a92e18b483f7f Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 18 Jan 2024 14:36:52 -0300
Subject: [PATCH 02/26] feat: husky format

---
 src/router/routes/waf-rules-routes/index.js          |  1 -
 .../waf-rules-services/list-network-list-service.js  |  2 +-
 .../list-waf-rules-domain-service.js                 | 12 +++++-------
 .../list-waf-rules-tuning-service.js                 |  4 +---
 src/templates/edit-drawer-block/index.vue            |  2 +-
 .../list-table-block/dialog/delete-dialog.vue        |  6 ++++--
 .../search-domains-metrics-service.test.js           |  1 -
 .../list-network-list-service.test.js                |  4 ++--
 .../list-waf-rules-domain-service.test.js            | 10 +++++-----
 9 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 0ffa67e8f..7cd8c1070 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -2,7 +2,6 @@ import * as Helpers from '@/helpers'
 import * as WafRulesService from '@/services/waf-rules-services'
 import { listCountriesService } from '@/services/network-lists-services'
 
-
 /** @type {import('vue-router').RouteRecordRaw} */
 export const wafRulesRoutes = {
   path: '/waf',
diff --git a/src/services/waf-rules-services/list-network-list-service.js b/src/services/waf-rules-services/list-network-list-service.js
index ca8278396..d4c09088f 100644
--- a/src/services/waf-rules-services/list-network-list-service.js
+++ b/src/services/waf-rules-services/list-network-list-service.js
@@ -17,7 +17,7 @@ const adapt = (httpResponse) => {
   const networkList = isArray
     ? httpResponse.body.results.map((networkList) => ({
         id: networkList.id,
-        name: networkList.name,
+        name: networkList.name
       }))
     : []
 
diff --git a/src/services/waf-rules-services/list-waf-rules-domain-service.js b/src/services/waf-rules-services/list-waf-rules-domain-service.js
index 96bb9a135..b9ad24b71 100644
--- a/src/services/waf-rules-services/list-waf-rules-domain-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-domain-service.js
@@ -12,8 +12,6 @@ export const listWafRulesDomainsService = async ({ wafId }) => {
   return parseHttpResponse(httpResponse)
 }
 
-
-
 const adapt = (httpResponse) => {
   /**
    * Necessary until the API gets the common pattern
@@ -24,13 +22,13 @@ const adapt = (httpResponse) => {
   // eslint-disable-next-line no-console
   const isArray = Array.isArray(httpResponse.body.results)
 
-
   const parsedWafRulesDomain = isArray
     ? httpResponse.body.results.map((domain) => ({
-      domain: domain.domain,
-      id: domain.id,
-      name: domain.name,
-    })) : []
+        domain: domain.domain,
+        id: domain.id,
+        name: domain.name
+      }))
+    : []
 
   return {
     body: parsedWafRulesDomain,
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
index cc89d5685..f4e82c3ee 100644
--- a/src/services/waf-rules-services/list-waf-rules-tuning-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
@@ -25,8 +25,6 @@ export const listWafRulesTuningService = async ({ wafId }) => {
 //   return parsedStatus
 // }
 
-
-
 const adapt = (httpResponse) => {
   /**
    * Necessary until the API gets the common pattern
@@ -35,7 +33,7 @@ const adapt = (httpResponse) => {
    */
 
   // eslint-disable-next-line no-console
-  console.log(httpResponse.body);
+  console.log(httpResponse.body)
 
   return {
     body: httpResponse.body,
diff --git a/src/templates/edit-drawer-block/index.vue b/src/templates/edit-drawer-block/index.vue
index ecb7382f1..1e59e069e 100644
--- a/src/templates/edit-drawer-block/index.vue
+++ b/src/templates/edit-drawer-block/index.vue
@@ -13,7 +13,7 @@
   const emit = defineEmits(['update:visible', 'onSuccess', 'onError'])
   const props = defineProps({
     id: {
-      type: [ String, Number ],
+      type: [String, Number],
       required: true
     },
     visible: {
diff --git a/src/templates/list-table-block/dialog/delete-dialog.vue b/src/templates/list-table-block/dialog/delete-dialog.vue
index d358d68ca..275f6ef0a 100644
--- a/src/templates/list-table-block/dialog/delete-dialog.vue
+++ b/src/templates/list-table-block/dialog/delete-dialog.vue
@@ -27,7 +27,9 @@
         </p>
       </div>
 
-      <Divider class="-ml-4 w-[calc(100%+2rem)] md:-ml-8 w-[calc(100%+4rem) md:w-[calc(100%+4rem)]"/>
+      <Divider
+        class="-ml-4 w-[calc(100%+2rem)] md:-ml-8 w-[calc(100%+4rem) md:w-[calc(100%+4rem)]"
+      />
 
       <div>
         <div class="flex flex-col w-full gap-2">
@@ -53,7 +55,7 @@
     </div>
 
     <template #footer>
-      <div class=" justify-end w-full flex gap-4">
+      <div class="justify-end w-full flex gap-4">
         <PrimeButton
           severity="primary"
           outlined
diff --git a/src/tests/services/metrics-services/search-domains-metrics-service.test.js b/src/tests/services/metrics-services/search-domains-metrics-service.test.js
index 8d537a2ad..f6b5afa10 100644
--- a/src/tests/services/metrics-services/search-domains-metrics-service.test.js
+++ b/src/tests/services/metrics-services/search-domains-metrics-service.test.js
@@ -3,7 +3,6 @@ import { searchDomainsMetricsService } from '@/services/metrics-services'
 import * as Errors from '@services/axios/errors'
 import { describe, expect, it, vi } from 'vitest'
 
-
 const makeSut = () => {
   const sut = searchDomainsMetricsService
 
diff --git a/src/tests/services/waf-rules-services/list-network-list-service.test.js b/src/tests/services/waf-rules-services/list-network-list-service.test.js
index 21884ea52..0719b019b 100644
--- a/src/tests/services/waf-rules-services/list-network-list-service.test.js
+++ b/src/tests/services/waf-rules-services/list-network-list-service.test.js
@@ -5,7 +5,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const fixtures = {
   networkMock: {
     id: 123123123,
-    name: 'Network AZ',
+    name: 'Network AZ'
   }
 }
 
@@ -56,7 +56,7 @@ describe('WafRulesServices', () => {
     expect(result).toEqual([
       {
         id: fixtures.networkMock.id,
-        name: fixtures.networkMock.name,
+        name: fixtures.networkMock.name
       }
     ])
   })
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-domain-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-domain-service.test.js
index d4204db3c..e6873f689 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-domain-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-domain-service.test.js
@@ -5,10 +5,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const fixtures = {
   wafRulesDomainMock: {
     cnames: [],
-    domain: "erwc1eveo1.map.azionedge.net",
+    domain: 'erwc1eveo1.map.azionedge.net',
     id: 1705587704,
-    name: "atack"
-  },
+    name: 'atack'
+  }
 }
 
 const makeSut = () => {
@@ -55,8 +55,8 @@ describe('WafRulesServices', () => {
       {
         domain: fixtures.wafRulesDomainMock.domain,
         id: fixtures.wafRulesDomainMock.id,
-        name: fixtures.wafRulesDomainMock.name,
-      },
+        name: fixtures.wafRulesDomainMock.name
+      }
     ])
   })
 })

From 04e52f9ab5eb662205d83a546b5a57d8b0067a54 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Fri, 19 Jan 2024 15:37:13 -0300
Subject: [PATCH 03/26] feat: add create allowed in tuning

---
 src/router/routes/waf-rules-routes/index.js   |   3 +-
 .../create-waf-rules-allowed-service.js       |  15 +-
 ...create-waf-rules-allowed-tuning-service.js |  80 +++++++++++
 src/services/waf-rules-services/index.js      |   5 +-
 .../list-waf-rules-tuning-service.js          |  43 +++---
 src/templates/list-table-block/no-header.vue  |  31 ++++-
 ...e-waf-rules-allowed-tuning-service.test.js | 106 ++++++++++++++
 .../list-waf-rules-tuning-service.test.js     |  75 ++++++++++
 src/views/WafRules/Dialog/index.vue           |  88 ++++++++++++
 src/views/WafRules/ListWafRulesTuning.vue     | 129 +++++++++++++-----
 src/views/WafRules/TabsView.vue               |   1 +
 11 files changed, 518 insertions(+), 58 deletions(-)
 create mode 100644 src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
 create mode 100644 src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js
 create mode 100644 src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
 create mode 100644 src/views/WafRules/Dialog/index.vue

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 7cd8c1070..42cfa3f50 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -67,7 +67,8 @@ export const wafRulesRoutes = {
           listWafRulesTuningService: WafRulesService.listWafRulesTuningService,
           listNetworkListService: WafRulesService.listNetworkListService,
           listCountriesService: listCountriesService,
-          listWafRulesDomainsService: WafRulesService.listWafRulesDomainsService
+          listWafRulesDomainsService: WafRulesService.listWafRulesDomainsService,
+          createWafRulesAllowedTuningService: WafRulesService.createWafRulesAllowedTuningService
         }
       },
       meta: {
diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index 64f7c6ddb..10d3db342 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -62,8 +62,19 @@ const parseHttpResponse = (httpResponse) => {
  * @returns {string|undefined} The result message based on the status code.
  */
 const extractErrorKey = (errorSchema, key) => {
-  const [keyError] = Object.keys(errorSchema[key]?.[0])
-  return errorSchema[key]?.[0][keyError][0]
+  if (typeof errorSchema[key][0] === 'string') {
+    return `${key}: ${errorSchema[key][0]}`
+  }
+  const keyValuePair = [];
+  errorSchema[key].forEach(obj => {
+    for (let key in obj) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (obj.hasOwnProperty(key)) {
+        keyValuePair.push({ key, value: obj[key][0] });
+      }
+    }
+  });
+  return `${keyValuePair[0].key}: ${keyValuePair[0].value}`
 }
 
 /**
diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
new file mode 100644
index 000000000..f43fdc199
--- /dev/null
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
@@ -0,0 +1,80 @@
+import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
+
+export const createWafRulesAllowedTuningService = async ({ payload, wafId }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesAllowedBaseUrl()}/${wafId}/allowed_rules`,
+    method: 'POST',
+    body: adapt(payload)
+  })
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (payload) => {
+  return {
+    allowed_rules: payload.allowedRules,
+    reason: payload.reason,
+  }
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @param {String} httpResponse.statusCode - The HTTP status code.
+ * @returns {string} The result message based on the status code.
+ * @throws {Error} If there is an error with the response.
+ */
+const parseHttpResponse = (httpResponse) => {
+  switch (httpResponse.statusCode) {
+    case 202:
+      return 'Your waf rule allowed has been created'
+    case 400:
+      const apiError = extractApiError(httpResponse)
+      throw new Error(apiError).message
+    case 401:
+      throw new Errors.InvalidApiTokenError().message
+    case 403:
+      throw new Errors.PermissionError().message
+    case 404:
+      throw new Errors.NotFoundError().message
+    case 500:
+      throw new Errors.InternalServerError().message
+    default:
+      throw new Errors.UnexpectedError().message
+  }
+}
+
+/**
+ * @param {Object} errorSchema - The error schema.
+ * @param {string} key - The error key of error schema.
+ * @returns {string|undefined} The result message based on the status code.
+ */
+const extractErrorKey = (errorSchema, key) => {
+  if (typeof errorSchema[key][0] === 'string') {
+    return `${key}: ${errorSchema[key][0]}`
+  }
+  const keyValuePair = [];
+  errorSchema[key].forEach(obj => {
+    for (let key in obj) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (obj.hasOwnProperty(key)) {
+        keyValuePair.push({ key, value: obj[key][0] });
+      }
+    }
+  });
+  return `${keyValuePair[0].key}: ${keyValuePair[0].value}`
+}
+
+/**
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The result message based on the status code.
+ */
+const extractApiError = (httpResponse) => {
+  const [firstKey] = Object.keys(httpResponse.body)
+  const errorMessage = extractErrorKey(httpResponse.body, firstKey)
+
+  return errorMessage
+}
diff --git a/src/services/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index c31941e89..c9640ed97 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -11,7 +11,7 @@ import { editWafRulesAllowedService } from './edit-waf-rules-allowed-service'
 import { listWafRulesTuningService } from './list-waf-rules-tuning-service'
 import { listNetworkListService } from './list-network-list-service'
 import { listWafRulesDomainsService } from './list-waf-rules-domain-service'
-
+import { createWafRulesAllowedTuningService } from './create-waf-rules-allowed-tuning-service'
 export {
   listWafRulesService,
   deleteWafRulesService,
@@ -25,5 +25,6 @@ export {
   editWafRulesAllowedService,
   listWafRulesTuningService,
   listNetworkListService,
-  listWafRulesDomainsService
+  listWafRulesDomainsService,
+  createWafRulesAllowedTuningService
 }
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
index f4e82c3ee..b087e6cba 100644
--- a/src/services/waf-rules-services/list-waf-rules-tuning-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
@@ -1,9 +1,9 @@
 import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
 import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
 
-export const listWafRulesTuningService = async ({ wafId }) => {
+export const listWafRulesTuningService = async ({ wafId, query }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeWafRulesBaseUrl()}/${wafId}/waf_events`,
+    url: `${makeWafRulesBaseUrl()}/${wafId}/waf_events${query}`,
     method: 'GET'
   })
 
@@ -11,19 +11,6 @@ export const listWafRulesTuningService = async ({ wafId }) => {
 
   return parseHttpResponse(httpResponse)
 }
-// const parseStatusData = (status) => {
-//   const parsedStatus = status
-//     ? {
-//         content: 'Active',
-//         severity: 'success'
-//       }
-//     : {
-//         content: 'Inactive',
-//         severity: 'danger'
-//       }
-
-//   return parsedStatus
-// }
 
 const adapt = (httpResponse) => {
   /**
@@ -33,10 +20,32 @@ const adapt = (httpResponse) => {
    */
 
   // eslint-disable-next-line no-console
-  console.log(httpResponse.body)
+  const isArray = Array.isArray(httpResponse.body.results)
+
+
+  const parsedWafRulesTuning = isArray
+  ? httpResponse.body.results.map((event, index) => {
+      const values = {
+        hitCount: event.hit_count,
+        topIps: event.top_10_ips,
+        id: index,
+        ruleId: event.rule_id,
+        ruleIdDescription: `${event.rule_id} - ${event.rule_description}`,
+        ipCount: event.ip_count,
+        matchZone: event.match_zone,
+        pathCount: event.path_count,
+        topCountries: event.top_10_countries,
+        matchesOn: event.matches_on,
+        ruleDescription: event.rule_description,
+        countryCount: event.country_count
+      }
+
+      return values
+    })
+  : []
 
   return {
-    body: httpResponse.body,
+    body: parsedWafRulesTuning,
     statusCode: httpResponse.statusCode
   }
 }
diff --git a/src/templates/list-table-block/no-header.vue b/src/templates/list-table-block/no-header.vue
index 2f5835adf..7050a4e69 100644
--- a/src/templates/list-table-block/no-header.vue
+++ b/src/templates/list-table-block/no-header.vue
@@ -1,4 +1,6 @@
+
 <template>
+  <!-- @row-click="editItemSelected" -->
   <div>
     <div class="max-w-full mt-4">
       <DataTable
@@ -13,9 +15,9 @@
         :rows="MINIMUN_OF_ITEMS_PER_PAGE"
         :globalFilterFields="filterBy"
         :loading="isLoading"
-        selectionMode="single"
-        @row-click="editItemSelected"
+        v-model:selection="selectedProduct"
         @rowReorder="onRowReorder"
+        @row-click="editItemSelected"
         :pt="pt"
       >
         <template #header>
@@ -44,6 +46,8 @@
           rowReorder
           headerStyle="width: 3rem"
         />
+        <Column selectionMode="multiple"  headerStyle="width: 3rem"></Column>
+
         <Column
           sortable
           v-for="col of selectedColumns"
@@ -91,7 +95,7 @@
               </OverlayPanel>
             </div>
           </template>
-          <template #body="{ data: rowData }">
+          <template #body="{ data: rowData } ">
             <div class="flex justify-end">
               <PrimeMenu
                 ref="menu"
@@ -223,6 +227,14 @@
     emptyListMessage: {
       type: String,
       default: () => 'No registers found.'
+    },
+    dataFilted: {
+      type: Array,
+      default: () => []
+    },
+    hasListService: {
+      type: Boolean,
+      default: false
     }
   })
 
@@ -235,6 +247,7 @@
   const informationForDeletion = ref({})
   const selectedItemData = ref(null)
   const selectedColumns = ref([])
+  const selectedProduct = ref();
 
   onMounted(() => {
     loadData({ page: 1 })
@@ -271,9 +284,11 @@
 
   const loadData = async ({ page }) => {
     try {
+      if (props.hasListService) return
       isLoading.value = true
       const response = await props.listService({ page })
       data.value = response
+
     } catch (error) {
       data.value = []
       toast.add({
@@ -362,4 +377,14 @@
     const hasData = currentState.length > 0
     emit('on-load-data', hasData)
   })
+
+  watch(selectedProduct, (selectedData) => {
+    // eslint-disable-next-line no-console
+    emit('on-select-data', selectedData)
+  })
+
+
+  watch(
+    () => props.dataFilted,
+    (newValue) => data.value = newValue)
 </script>
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js
new file mode 100644
index 000000000..3a792a852
--- /dev/null
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js
@@ -0,0 +1,106 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import * as Errors from '@/services/axios/errors'
+import { createWafRulesAllowedTuningService } from '@/services/waf-rules-services'
+import { describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    allowedRules: [{
+        match_on: '',
+        match_zones: '',
+        rule_id: ''
+    }],
+    reason: ''
+  }
+}
+
+const makeSut = () => {
+  const sut = createWafRulesAllowedTuningService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesServices', () => {
+  it('should call API with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 202,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+    await sut({ payload: fixtures.wafRulesMock, wafId: 10 })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v4/edge/waf/10/allowed_rules',
+      method: 'POST',
+      body: {
+        allowed_rules: fixtures.wafRulesMock.allowedRules,
+        reason: fixtures.wafRulesMock.reason,
+      }
+    })
+  })
+
+  it('should return a feedback message on successfully created', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 202,
+      body: fixtures.wafRulesMock
+    })
+    const { sut } = makeSut()
+
+    const data = await sut({ payload: fixtures.wafRulesMock, wafId: 10 })
+
+    expect(data).toStrictEqual('Your waf rule allowed has been created')
+  })
+
+  it('Should return an API error for an 400 response status', async () => {
+    const errorKey = 'detail'
+    const apiErrorMock = 'This field is required.'
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 400,
+      body: {
+        [errorKey]: [{ error: [apiErrorMock] }]
+      }
+    })
+    const { sut } = makeSut()
+
+    const feedbackMessage = sut({ payload: fixtures.wafRulesMock, wafId: 10 })
+
+    expect(feedbackMessage).rejects.toThrow(apiErrorMock)
+  })
+
+  it.each([
+    {
+      statusCode: 401,
+      expectedError: new Errors.InvalidApiTokenError().message
+    },
+    {
+      statusCode: 403,
+      expectedError: new Errors.PermissionError().message
+    },
+    {
+      statusCode: 404,
+      expectedError: new Errors.NotFoundError().message
+    },
+    {
+      statusCode: 500,
+      expectedError: new Errors.InternalServerError().message
+    },
+    {
+      statusCode: 'unmappedStatusCode',
+      expectedError: new Errors.UnexpectedError().message
+    }
+  ])(
+    'should throw when request fails with status code $statusCode',
+    async ({ statusCode, expectedError }) => {
+      vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+        statusCode
+      })
+      const { sut } = makeSut()
+
+      const response = sut({ payload: fixtures.wafRulesMock, id: 10 })
+
+      expect(response).rejects.toBe(expectedError)
+    }
+  )
+})
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
new file mode 100644
index 000000000..004fbc318
--- /dev/null
+++ b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
@@ -0,0 +1,75 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listWafRulesTuningService } from '@/services/waf-rules-services'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    hit_count: 10,
+    top_10_ips: [],
+    rule_id: 1000,
+    ip_count: 8,
+    match_zone: 'value',
+    path_count: 10,
+    top_10_countries: [],
+    matches_on: 'query_string',
+    rule_description: 'Possible SQL Injection attack: SQL keywords found in Query String',
+    country_count: 10
+  }
+}
+
+const makeSut = () => {
+  const sut = listWafRulesTuningService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesService', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.wafRulesMock] }
+    })
+    const { sut } = makeSut()
+    await sut({ wafId: 4044, query: '?hour_range=48&domains_ids=1705587704' })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v3/waf/4044/waf_events?hour_range=48&domains_ids=1705587704',
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly the returned waf rules tuning', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.wafRulesMock] }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ wafId: 4044, query: '?hour_range=48&domains_ids=1705587704' })
+
+    expect(result).toEqual(
+        [{
+        hitCount: fixtures.wafRulesMock.hit_count,
+        topIps: fixtures.wafRulesMock.top_10_ips,
+        id: 0,
+        ruleId: fixtures.wafRulesMock.rule_id,
+        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,
+        matchesOn: fixtures.wafRulesMock.matches_on,
+        ruleDescription: fixtures.wafRulesMock.rule_description,
+        countryCount: fixtures.wafRulesMock.country_count
+      }]
+    )
+  })
+})
diff --git a/src/views/WafRules/Dialog/index.vue b/src/views/WafRules/Dialog/index.vue
new file mode 100644
index 000000000..473d74272
--- /dev/null
+++ b/src/views/WafRules/Dialog/index.vue
@@ -0,0 +1,88 @@
+<script setup>
+  import { ref, watch } from 'vue'
+  import PrimeDialog from 'primevue/dialog'
+  import PrimeButton from 'primevue/button'
+  import TextArea from 'primevue/textarea'
+
+  defineOptions({ name: 'dialog-allow-rule' })
+
+  const emit = defineEmits(['update:visible'])
+  const reason = ref('')
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const showDialog = ref(false)
+
+  const closeDialog = () => {
+    emit('closeDialog')
+  }
+
+  const handleAllowRule = () => {
+    emit('reason', reason.value)
+  }
+
+  watch(
+    () => props.visible,
+    (value) => {
+      showDialog.value = value
+    }
+  )
+</script>
+
+<template>
+  <div>
+    <PrimeDialog
+      :blockScroll="true"
+      v-model:visible="showDialog"
+      modal
+      :closable="false"
+      :pt="{
+        root: { class: 'p-0 w-[676px]' },
+        header: { class: 'flex p-5 items-center self-stretch border-b border-solid' },
+        content: { class: 'p-0 h-full' },
+        footer: {
+          class: 'flex p-5 justify-end items-end border-t border-solid'
+        }
+      }"
+    >
+      <template #header>
+        <h5 class="text-lg not-italic font-bold leading-5">
+          Allow all rules from a list of possible attacks
+        </h5>
+      </template>
+      <div class="p-5 flex justify-center flex-col">
+        <div class="text-secondary-color text-sm mb-5">
+          For each URI, this action will create a separate rule for each possible attack.
+        </div>
+        <div class="text-color font-semibold text-sm">
+          To confirm, enter the reason for allowing these rules or provide additional information in
+          the box below:
+        </div>
+        <TextArea
+          v-model="reason"
+          type="text"
+          rows="5"
+          cols="60"
+        />
+      </div>
+      <template #footer>
+        <PrimeButton
+          severity="primary"
+          label="Cancel"
+          outlined
+          @click="closeDialog"
+        />
+        <PrimeButton
+          severity="secondary"
+          label="Allow Rules"
+          @click="handleAllowRule"
+        />
+      </template>
+    </PrimeDialog>
+  </div>
+</template>
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index d0b8d6006..c9e8c995e 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -5,6 +5,7 @@
       optionLabel="name"
       :options="timeOptions"
       v-model="time"
+      @change="filterTuning"
       class="w-full sm:w-1/5"
     />
     <MultiSelect
@@ -15,23 +16,20 @@
       :options="domainsOptions.options"
       v-model="selectedDomain"
       :loading="!domainsOptions.done"
+      @change="filterTuning"
       class="w-full sm:w-1/5"
     />
   </div>
   <ListTableNoHeaderBlock
-    v-if="true"
+    v-if="selectedDomain.length"
     pageTitleDelete="Waf Rules Tuning"
     :columns="wafRulesAllowedColumns"
-    :listService="handleListWafRulesTuningService"
-    @on-load-data="handleLoadData"
+    :hasListService="true"
+    :dataFilted="dataFiltedComputed"
+    @on-select-data="selectedItems"
     emptyListMessage="No Waf Rules Tuning found."
   >
-    <template #addButton>
-      <PrimeButton
-        label="search"
-        @click="filterTuning"
-      />
-    </template>
+    <template #addButton> </template>
   </ListTableNoHeaderBlock>
 
   <EmptyResultsBlock
@@ -54,17 +52,24 @@
   </EmptyResultsBlock>
   <ActionBarTemplate
     v-if="showActionBar"
-    @onSubmit="onSubmit"
-    @onCancel="onCancel"
-    :loading="loading"
-    :submitDisabled="!formValid"
+    @onSubmit="openDialog"
+    @onCancel="closeDialog"
+    :submitDisabled="!selectedEvents.length"
     primaryActionLabel="Allow Rules"
   />
+
+  <DialogAllowRule
+    v-model:visible="showDialogAllowRule"
+    @closeDialog="closeDialog"
+    @reason="handleAllowRules"
+  >
+  </DialogAllowRule>
 </template>
 <script setup>
   import Illustration from '@/assets/svg/illustration-layers.vue'
   import EmptyResultsBlock from '@/templates/empty-results-block'
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
+  import DialogAllowRule from './Dialog'
 
   import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
   import PrimeButton from 'primevue/button'
@@ -72,43 +77,46 @@
 
   import MultiSelect from 'primevue/multiselect'
 
-  import { ref, onMounted } from 'vue'
+  import { ref, onMounted, computed } from 'vue'
   import { useRoute } from 'vue-router'
   import { useToast } from 'primevue/usetoast'
 
   const route = useRoute()
-  const hasContentToList = ref(false)
   const selectedDomain = ref([])
-  // const country = ref([])
-  const time = ref('60')
+  const dataFilted = ref([])
+  const selectedEvents = ref([])
+  const showDialogAllowRule = ref(false)
+
+  const dataFiltedComputed = computed(() => dataFilted.value)
+  const time = ref('1')
   const timeOptions = ref([
     {
       name: 'Last 1 hour',
-      value: '60'
+      value: '1'
     },
     {
       name: 'Last 3 hours',
-      value: '180'
+      value: '3'
     },
     {
       name: 'Last 6 hours',
-      value: '360'
+      value: '6'
     },
     {
       name: 'Last 12 hours',
-      value: '720'
+      value: '12'
     },
     {
       name: 'Last day',
-      value: '1'
+      value: '24'
     },
     {
       name: 'Last 2 days',
-      value: '2'
+      value: '48'
     },
     {
       name: 'Last 3 days',
-      value: '3'
+      value: '72'
     }
   ])
 
@@ -136,6 +144,10 @@
     showActionBar: {
       type: Boolean,
       required: true
+    },
+    createWafRulesAllowedTuningService: {
+      type: Function,
+      required: true
     }
   })
 
@@ -153,25 +165,76 @@
 
   const wafRulesAllowedColumns = ref([
     {
-      field: 'ruleId',
+      field: 'ruleIdDescription',
       header: 'Rule ID'
     },
     {
-      field: 'reason',
-      header: 'Description'
+      field: 'hitCount',
+      header: 'Hits'
     },
     {
-      field: 'path',
-      header: 'URI'
+      field: 'pathCount',
+      header: 'Paths'
+    },
+    {
+      field: 'ipCount',
+      header: 'IPs'
+    },
+    {
+      field: 'countryCount',
+      header: 'Countries'
+    },
+    {
+      field: 'topIps',
+      header: 'Top 10 IPs Adress'
+    },
+    {
+      field: 'topCountries',
+      header: 'Top 10 Countries'
     }
   ])
 
-  const handleListWafRulesTuningService = async () => {
-    return await props.listWafRulesTuningService({ wafId: wafRuleId.value })
+  const selectedItems = (events) => {
+    selectedEvents.value = events
+  }
+
+  const openDialog = () => {
+    showDialogAllowRule.value = true
+  }
+
+  const closeDialog = () => {
+    showDialogAllowRule.value = false
+  }
+
+  const handleAllowRules = async (reason) => {
+    const allowedRules = []
+    for (const allowed of selectedEvents.value) {
+      allowedRules.push({
+        match_zone: allowed.matchZone,
+        matches_on: allowed.matchesOn,
+        rule_id: allowed.ruleId
+      })
+    }
+
+    const payload = {
+      reason,
+      allowedRules
+    }
+
+    try {
+      await props.createWafRulesAllowedTuningService({ payload, wafId: wafRuleId.value })
+    } catch (error) {
+      showToast(error, 'error')
+    }
   }
 
-  const handleLoadData = (event) => {
-    hasContentToList.value = event
+  const filterTuning = async () => {
+    if (!selectedDomain.value.length) return
+    const query = `?hour_range=${time.value}&domains_ids=${encodeURIComponent(
+      selectedDomain.value
+    )}`
+    const response = await props.listWafRulesTuningService({ wafId: wafRuleId.value, query })
+    dataFilted.value = response
   }
 
   const countriesOptions = ref({ options: [], done: true })
diff --git a/src/views/WafRules/TabsView.vue b/src/views/WafRules/TabsView.vue
index 8a4c1fd69..f3ee293c0 100644
--- a/src/views/WafRules/TabsView.vue
+++ b/src/views/WafRules/TabsView.vue
@@ -84,6 +84,7 @@
             :listNetworkListService="props.wafTuning.listNetworkListService"
             :listWafRulesDomainsService="props.wafTuning.listWafRulesDomainsService"
             :showActionBar="activeTab === mapTabs.tuning"
+            :createWafRulesAllowedTuningService="props.wafTuning.createWafRulesAllowedTuningService"
           />
         </TabPanel>
         <TabPanel header="Allowed Rules">

From 7786cb252c64db3ab96ec7f2f8fe585ea491abc1 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Fri, 19 Jan 2024 15:38:19 -0300
Subject: [PATCH 04/26] feat: husky format

---
 .../create-waf-rules-allowed-service.js       |  8 ++--
 ...create-waf-rules-allowed-tuning-service.js | 10 ++---
 .../list-waf-rules-tuning-service.js          | 39 +++++++++----------
 src/templates/list-table-block/no-header.vue  | 15 +++----
 ...e-waf-rules-allowed-tuning-service.test.js |  8 ++--
 .../list-waf-rules-tuning-service.test.js     |  8 ++--
 6 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index 10d3db342..c57ec4791 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -65,15 +65,15 @@ const extractErrorKey = (errorSchema, key) => {
   if (typeof errorSchema[key][0] === 'string') {
     return `${key}: ${errorSchema[key][0]}`
   }
-  const keyValuePair = [];
-  errorSchema[key].forEach(obj => {
+  const keyValuePair = []
+  errorSchema[key].forEach((obj) => {
     for (let key in obj) {
       // eslint-disable-next-line no-prototype-builtins
       if (obj.hasOwnProperty(key)) {
-        keyValuePair.push({ key, value: obj[key][0] });
+        keyValuePair.push({ key, value: obj[key][0] })
       }
     }
-  });
+  })
   return `${keyValuePair[0].key}: ${keyValuePair[0].value}`
 }
 
diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
index f43fdc199..b75e61d24 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
@@ -15,7 +15,7 @@ export const createWafRulesAllowedTuningService = async ({ payload, wafId }) =>
 const adapt = (payload) => {
   return {
     allowed_rules: payload.allowedRules,
-    reason: payload.reason,
+    reason: payload.reason
   }
 }
 
@@ -55,15 +55,15 @@ const extractErrorKey = (errorSchema, key) => {
   if (typeof errorSchema[key][0] === 'string') {
     return `${key}: ${errorSchema[key][0]}`
   }
-  const keyValuePair = [];
-  errorSchema[key].forEach(obj => {
+  const keyValuePair = []
+  errorSchema[key].forEach((obj) => {
     for (let key in obj) {
       // eslint-disable-next-line no-prototype-builtins
       if (obj.hasOwnProperty(key)) {
-        keyValuePair.push({ key, value: obj[key][0] });
+        keyValuePair.push({ key, value: obj[key][0] })
       }
     }
-  });
+  })
   return `${keyValuePair[0].key}: ${keyValuePair[0].value}`
 }
 
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
index b087e6cba..a2cd29728 100644
--- a/src/services/waf-rules-services/list-waf-rules-tuning-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
@@ -22,27 +22,26 @@ const adapt = (httpResponse) => {
   // eslint-disable-next-line no-console
   const isArray = Array.isArray(httpResponse.body.results)
 
-
   const parsedWafRulesTuning = isArray
-  ? httpResponse.body.results.map((event, index) => {
-      const values = {
-        hitCount: event.hit_count,
-        topIps: event.top_10_ips,
-        id: index,
-        ruleId: event.rule_id,
-        ruleIdDescription: `${event.rule_id} - ${event.rule_description}`,
-        ipCount: event.ip_count,
-        matchZone: event.match_zone,
-        pathCount: event.path_count,
-        topCountries: event.top_10_countries,
-        matchesOn: event.matches_on,
-        ruleDescription: event.rule_description,
-        countryCount: event.country_count
-      }
-
-      return values
-    })
-  : []
+    ? httpResponse.body.results.map((event, index) => {
+        const values = {
+          hitCount: event.hit_count,
+          topIps: event.top_10_ips,
+          id: index,
+          ruleId: event.rule_id,
+          ruleIdDescription: `${event.rule_id} - ${event.rule_description}`,
+          ipCount: event.ip_count,
+          matchZone: event.match_zone,
+          pathCount: event.path_count,
+          topCountries: event.top_10_countries,
+          matchesOn: event.matches_on,
+          ruleDescription: event.rule_description,
+          countryCount: event.country_count
+        }
+
+        return values
+      })
+    : []
 
   return {
     body: parsedWafRulesTuning,
diff --git a/src/templates/list-table-block/no-header.vue b/src/templates/list-table-block/no-header.vue
index 7050a4e69..791215a64 100644
--- a/src/templates/list-table-block/no-header.vue
+++ b/src/templates/list-table-block/no-header.vue
@@ -1,4 +1,3 @@
-
 <template>
   <!-- @row-click="editItemSelected" -->
   <div>
@@ -46,7 +45,10 @@
           rowReorder
           headerStyle="width: 3rem"
         />
-        <Column selectionMode="multiple"  headerStyle="width: 3rem"></Column>
+        <Column
+          selectionMode="multiple"
+          headerStyle="width: 3rem"
+        ></Column>
 
         <Column
           sortable
@@ -95,7 +97,7 @@
               </OverlayPanel>
             </div>
           </template>
-          <template #body="{ data: rowData } ">
+          <template #body="{ data: rowData }">
             <div class="flex justify-end">
               <PrimeMenu
                 ref="menu"
@@ -247,7 +249,7 @@
   const informationForDeletion = ref({})
   const selectedItemData = ref(null)
   const selectedColumns = ref([])
-  const selectedProduct = ref();
+  const selectedProduct = ref()
 
   onMounted(() => {
     loadData({ page: 1 })
@@ -288,7 +290,6 @@
       isLoading.value = true
       const response = await props.listService({ page })
       data.value = response
-
     } catch (error) {
       data.value = []
       toast.add({
@@ -383,8 +384,8 @@
     emit('on-select-data', selectedData)
   })
 
-
   watch(
     () => props.dataFilted,
-    (newValue) => data.value = newValue)
+    (newValue) => (data.value = newValue)
+  )
 </script>
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js
index 3a792a852..7e126569c 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js
@@ -5,11 +5,13 @@ import { describe, expect, it, vi } from 'vitest'
 
 const fixtures = {
   wafRulesMock: {
-    allowedRules: [{
+    allowedRules: [
+      {
         match_on: '',
         match_zones: '',
         rule_id: ''
-    }],
+      }
+    ],
     reason: ''
   }
 }
@@ -36,7 +38,7 @@ describe('WafRulesServices', () => {
       method: 'POST',
       body: {
         allowed_rules: fixtures.wafRulesMock.allowedRules,
-        reason: fixtures.wafRulesMock.reason,
+        reason: fixtures.wafRulesMock.reason
       }
     })
   })
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
index 004fbc318..7429df0e5 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
@@ -55,8 +55,8 @@ describe('WafRulesService', () => {
 
     const result = await sut({ wafId: 4044, query: '?hour_range=48&domains_ids=1705587704' })
 
-    expect(result).toEqual(
-        [{
+    expect(result).toEqual([
+      {
         hitCount: fixtures.wafRulesMock.hit_count,
         topIps: fixtures.wafRulesMock.top_10_ips,
         id: 0,
@@ -69,7 +69,7 @@ describe('WafRulesService', () => {
         matchesOn: fixtures.wafRulesMock.matches_on,
         ruleDescription: fixtures.wafRulesMock.rule_description,
         countryCount: fixtures.wafRulesMock.country_count
-      }]
-    )
+      }
+    ])
   })
 })

From badc25beb7b415098e1ce3216ec2b5052775af5a Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 23 Jan 2024 13:27:50 -0300
Subject: [PATCH 05/26] feat: add drawer tuning

---
 src/router/routes/waf-rules-routes/index.js   |   3 +-
 ...create-waf-rules-allowed-tuning-service.js |   3 +-
 src/services/waf-rules-services/index.js      |   4 +-
 .../list-waf-rules-tuning-attacks-service.js  |  50 ++++
 .../list-waf-rules-tuning-service.js          |   4 +-
 src/templates/list-table-block/no-header.vue  |  30 +-
 ...e-waf-rules-allowed-tuning-service.test.js |  14 +-
 ...st-waf-rules-tuning-attack-service.test.js |  77 +++++
 .../list-waf-rules-tuning-service.test.js     |   8 +-
 src/views/WafRules/Dialog/index.vue           |  21 +-
 src/views/WafRules/Drawer/index.vue           | 275 ++++++++++++++++++
 src/views/WafRules/ListWafRulesTuning.vue     | 203 +++++++++----
 src/views/WafRules/TabsView.vue               |   1 +
 13 files changed, 613 insertions(+), 80 deletions(-)
 create mode 100644 src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
 create mode 100644 src/tests/services/waf-rules-services/list-waf-rules-tuning-attack-service.test.js
 create mode 100644 src/views/WafRules/Drawer/index.vue

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 42cfa3f50..835432884 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -68,7 +68,8 @@ export const wafRulesRoutes = {
           listNetworkListService: WafRulesService.listNetworkListService,
           listCountriesService: listCountriesService,
           listWafRulesDomainsService: WafRulesService.listWafRulesDomainsService,
-          createWafRulesAllowedTuningService: WafRulesService.createWafRulesAllowedTuningService
+          createWafRulesAllowedTuningService: WafRulesService.createWafRulesAllowedTuningService,
+          listWafRulesTuningAttacksService: WafRulesService.listWafRulesTuningAttacksService
         }
       },
       meta: {
diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
index b75e61d24..62d382d16 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
@@ -14,7 +14,8 @@ export const createWafRulesAllowedTuningService = async ({ payload, wafId }) =>
 
 const adapt = (payload) => {
   return {
-    allowed_rules: payload.allowedRules,
+	  rule_id: payload.ruleId,
+    match_zones: payload.matchZone,
     reason: payload.reason
   }
 }
diff --git a/src/services/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index c9640ed97..b4c04f5ce 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -12,6 +12,7 @@ import { listWafRulesTuningService } from './list-waf-rules-tuning-service'
 import { listNetworkListService } from './list-network-list-service'
 import { listWafRulesDomainsService } from './list-waf-rules-domain-service'
 import { createWafRulesAllowedTuningService } from './create-waf-rules-allowed-tuning-service'
+import { listWafRulesTuningAttacksService } from './list-waf-rules-tuning-attacks-service'
 export {
   listWafRulesService,
   deleteWafRulesService,
@@ -26,5 +27,6 @@ export {
   listWafRulesTuningService,
   listNetworkListService,
   listWafRulesDomainsService,
-  createWafRulesAllowedTuningService
+  createWafRulesAllowedTuningService,
+  listWafRulesTuningAttacksService
 }
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
new file mode 100644
index 000000000..5d4cba17c
--- /dev/null
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
@@ -0,0 +1,50 @@
+import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
+import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
+
+export const listWafRulesTuningAttacksService = async ({ wafId, tuningId, query }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeWafRulesBaseUrl()}/${wafId}/waf_events/${tuningId}${query}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = (httpResponse) => {
+  /**
+   * Necessary until the API gets the common pattern
+   * of returning the array of data inside results property
+   * like other andpoints.
+   */
+
+  // eslint-disable-next-line no-console
+  const isArray = Array.isArray(httpResponse.body.results)
+
+  const parsedWafRulesTuning = isArray
+    ? httpResponse.body.results.map((event, index) => {
+        const values = {
+          hitCount: event.hit_count,
+          topIps: event.top_10_ips.map(ip => ip.ip),
+          id: index,
+          ruleId: event.rule_id,
+          ipCount: event.ip_count,
+          matchZone: event.match_zone,
+          pathCount: event.path_count,
+          topCountries: event.top_10_countries.map(country => country.country),
+          matchesOn: event.matches_on,
+          countryCount: event.country_count,
+          topPaths: event.top_10_paths.map(path => path.path),
+          matchValue: event.match_value
+        }
+
+        return values
+      })
+    : []
+
+  return {
+    body: parsedWafRulesTuning,
+    statusCode: httpResponse.statusCode
+  }
+}
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
index a2cd29728..78016b90f 100644
--- a/src/services/waf-rules-services/list-waf-rules-tuning-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
@@ -26,14 +26,14 @@ const adapt = (httpResponse) => {
     ? httpResponse.body.results.map((event, index) => {
         const values = {
           hitCount: event.hit_count,
-          topIps: event.top_10_ips,
+          topIps: event.top_10_ips[1],
           id: index,
           ruleId: event.rule_id,
           ruleIdDescription: `${event.rule_id} - ${event.rule_description}`,
           ipCount: event.ip_count,
           matchZone: event.match_zone,
           pathCount: event.path_count,
-          topCountries: event.top_10_countries,
+          topCountries: event.top_10_countries[1],
           matchesOn: event.matches_on,
           ruleDescription: event.rule_description,
           countryCount: event.country_count
diff --git a/src/templates/list-table-block/no-header.vue b/src/templates/list-table-block/no-header.vue
index 791215a64..0b02c31fb 100644
--- a/src/templates/list-table-block/no-header.vue
+++ b/src/templates/list-table-block/no-header.vue
@@ -12,11 +12,11 @@
         :paginator="showPagination"
         :rowsPerPageOptions="[10, 20, 50, 100]"
         :rows="MINIMUN_OF_ITEMS_PER_PAGE"
+        @row-click="editItemSelected"
         :globalFilterFields="filterBy"
         :loading="isLoading"
-        v-model:selection="selectedProduct"
+        v-model:selection="selectedItems"
         @rowReorder="onRowReorder"
-        @row-click="editItemSelected"
         :pt="pt"
       >
         <template #header>
@@ -46,6 +46,7 @@
           headerStyle="width: 3rem"
         />
         <Column
+          v-if="showselectionMode"
           selectionMode="multiple"
           headerStyle="width: 3rem"
         ></Column>
@@ -237,6 +238,14 @@
     hasListService: {
       type: Boolean,
       default: false
+    },
+    showselectionMode: {
+      type: Boolean,
+      default: false
+    },
+    cleanSelectData: {
+      type: Boolean,
+      default: false
     }
   })
 
@@ -249,7 +258,7 @@
   const informationForDeletion = ref({})
   const selectedItemData = ref(null)
   const selectedColumns = ref([])
-  const selectedProduct = ref()
+  const selectedItems = ref()
 
   onMounted(() => {
     loadData({ page: 1 })
@@ -379,8 +388,10 @@
     emit('on-load-data', hasData)
   })
 
-  watch(selectedProduct, (selectedData) => {
-    // eslint-disable-next-line no-console
+
+  // to make a filter
+
+  watch(selectedItems, (selectedData) => {
     emit('on-select-data', selectedData)
   })
 
@@ -388,4 +399,13 @@
     () => props.dataFilted,
     (newValue) => (data.value = newValue)
   )
+
+  watch(
+    () => props.cleanSelectData,
+    (value) => {
+      if (value) {
+        selectedItems.value = []
+      }
+    }
+  )
 </script>
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js
index 7e126569c..55d5daab9 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-tuning-service.test.js
@@ -5,14 +5,15 @@ import { describe, expect, it, vi } from 'vitest'
 
 const fixtures = {
   wafRulesMock: {
-    allowedRules: [
+    reason: 'Allowed Rules created to allow the attack',
+    matchZone: [
       {
-        match_on: '',
-        match_zones: '',
-        rule_id: ''
+        zone: 'conditional_query_string',
+        zone_input: 'arg',
+        matches_on: 'value'
       }
     ],
-    reason: ''
+    ruleId: '1000'
   }
 }
 
@@ -37,7 +38,8 @@ describe('WafRulesServices', () => {
       url: 'v4/edge/waf/10/allowed_rules',
       method: 'POST',
       body: {
-        allowed_rules: fixtures.wafRulesMock.allowedRules,
+        rule_id: fixtures.wafRulesMock.ruleId,
+        match_zones: fixtures.wafRulesMock.matchZone,
         reason: fixtures.wafRulesMock.reason
       }
     })
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-tuning-attack-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-tuning-attack-service.test.js
new file mode 100644
index 000000000..460e0d12d
--- /dev/null
+++ b/src/tests/services/waf-rules-services/list-waf-rules-tuning-attack-service.test.js
@@ -0,0 +1,77 @@
+import { AxiosHttpClientAdapter } from '@/services/axios/AxiosHttpClientAdapter'
+import { listWafRulesTuningAttacksService } from '@/services/waf-rules-services'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const fixtures = {
+  wafRulesMock: {
+    hit_count: 10,
+    top_10_ips: [{ ip: '120.103.10' }],
+    rule_id: 1000,
+    ip_count: 8,
+    match_zone: 'value',
+    path_count: 10,
+    top_10_countries: [{ country: 'Brazil' }],
+    matches_on: 'query_string',
+    country_count: 10,
+    match_value: 'value',
+    top_10_paths: [{ path: '/get' }]
+  }
+}
+
+const makeSut = () => {
+  const sut = listWafRulesTuningAttacksService
+
+  return {
+    sut
+  }
+}
+
+describe('WafRulesService', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+  it('should call api with correct params', async () => {
+    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.wafRulesMock] }
+    })
+    const { sut } = makeSut()
+    await sut({ wafId: 4044, query: '?hour_range=48&domains_ids=1705587704', tuningId: 100 })
+
+    expect(requestSpy).toHaveBeenCalledWith({
+      url: 'v3/waf/4044/waf_events/100?hour_range=48&domains_ids=1705587704',
+      method: 'GET'
+    })
+  })
+
+  it('should parsed correctly the returned waf rules tuning', async () => {
+    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: [fixtures.wafRulesMock] }
+    })
+    const { sut } = makeSut()
+
+    const result = await sut({ wafId: 4044, query: '?hour_range=48&domains_ids=1705587704', tuningId: 100 })
+
+    expect(result).toEqual([
+      {
+        hitCount: fixtures.wafRulesMock.hit_count,
+        topIps: ['120.103.10'],
+        id: 0,
+        ruleId: fixtures.wafRulesMock.rule_id,
+        ipCount: fixtures.wafRulesMock.ip_count,
+        matchZone: fixtures.wafRulesMock.match_zone,
+        pathCount: fixtures.wafRulesMock.path_count,
+        topCountries: ['Brazil'],
+        matchesOn: fixtures.wafRulesMock.matches_on,
+        ruleDescription: fixtures.wafRulesMock.rule_description,
+        countryCount: fixtures.wafRulesMock.country_count,
+        topPaths: ['/get'],
+        matchValue: fixtures.wafRulesMock.match_value
+      }
+    ])
+  })
+})
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
index 7429df0e5..f6202c544 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
@@ -5,12 +5,12 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const fixtures = {
   wafRulesMock: {
     hit_count: 10,
-    top_10_ips: [],
+    top_10_ips: ['', '100.100.10'],
     rule_id: 1000,
     ip_count: 8,
     match_zone: 'value',
     path_count: 10,
-    top_10_countries: [],
+    top_10_countries: ['', 'Brazil'],
     matches_on: 'query_string',
     rule_description: 'Possible SQL Injection attack: SQL keywords found in Query String',
     country_count: 10
@@ -58,14 +58,14 @@ describe('WafRulesService', () => {
     expect(result).toEqual([
       {
         hitCount: fixtures.wafRulesMock.hit_count,
-        topIps: fixtures.wafRulesMock.top_10_ips,
+        topIps: '100.100.10',
         id: 0,
         ruleId: fixtures.wafRulesMock.rule_id,
         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,
+        topCountries: 'Brazil',
         matchesOn: fixtures.wafRulesMock.matches_on,
         ruleDescription: fixtures.wafRulesMock.rule_description,
         countryCount: fixtures.wafRulesMock.country_count
diff --git a/src/views/WafRules/Dialog/index.vue b/src/views/WafRules/Dialog/index.vue
index 473d74272..51169ea4f 100644
--- a/src/views/WafRules/Dialog/index.vue
+++ b/src/views/WafRules/Dialog/index.vue
@@ -13,17 +13,24 @@
     visible: {
       type: Boolean,
       default: false
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
     }
   })
 
   const showDialog = ref(false)
+  const loading = ref(false)
 
   const closeDialog = () => {
     emit('closeDialog')
   }
 
   const handleAllowRule = () => {
+    if (!reason.value) return
     emit('reason', reason.value)
+    loading.value = true
   }
 
   watch(
@@ -32,6 +39,16 @@
       showDialog.value = value
     }
   )
+  
+  watch(
+    () => props.isLoading,
+    (value) => {
+      if (value === false) {
+        reason.value = ''
+      }
+      loading.value = value
+    }
+  )
 </script>
 
 <template>
@@ -42,7 +59,7 @@
       modal
       :closable="false"
       :pt="{
-        root: { class: 'p-0 w-[676px]' },
+        root: { class: 'p-0 w-[37.5rem]' },
         header: { class: 'flex p-5 items-center self-stretch border-b border-solid' },
         content: { class: 'p-0 h-full' },
         footer: {
@@ -64,6 +81,7 @@
           the box below:
         </div>
         <TextArea
+          required
           v-model="reason"
           type="text"
           rows="5"
@@ -80,6 +98,7 @@
         <PrimeButton
           severity="secondary"
           label="Allow Rules"
+          :loading="loading"
           @click="handleAllowRule"
         />
       </template>
diff --git a/src/views/WafRules/Drawer/index.vue b/src/views/WafRules/Drawer/index.vue
new file mode 100644
index 000000000..5b52f0f6a
--- /dev/null
+++ b/src/views/WafRules/Drawer/index.vue
@@ -0,0 +1,275 @@
+<script setup>
+  import { computed, onBeforeMount, ref } from 'vue'
+  import { useToast } from 'primevue/usetoast'
+  import RadioButton from 'primevue/radiobutton'
+  import ActionBarBlock from '@/templates/action-bar-block'
+  import Divider from 'primevue/divider'
+  import GoBack from '@/templates/action-bar-block/go-back'
+  import Sidebar from 'primevue/sidebar'
+  import Skeleton from 'primevue/skeleton'
+
+
+  defineOptions({
+    name: 'more-details'
+  })
+
+  const emit = defineEmits(['update:visible', 'attack-on'])
+  const toast = useToast()
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    listService: {
+      type: Function,
+      required: true
+    },
+    domains: {
+      type: String,
+      default: '',
+      required: true
+    },
+    time: {
+      type: String,
+      default: '',
+      required: true
+    },
+    tuningObject: {
+      type: Object,
+      default: () => {},
+      required: true
+    }
+  })
+
+  const loading = ref(false)
+  const showGoBack = ref(false)
+  const possibleAttacks = ref([])
+  const selectedAttack = ref(null)
+
+
+  const showToast = (severity, summary) => {
+    toast.add({
+      closable: true,
+      severity: severity,
+      summary: summary
+    })
+  }
+
+  const visibleDrawer = computed({
+    get: () => props.visible,
+    set: (value) => {
+      emit('update:visible', value)
+    }
+  })
+
+  const loadInitialData = async () => {
+    try {
+      loading.value = true
+      const response = await props.listService()
+      possibleAttacks.value = response
+    } catch (error) {
+      showToast('error', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const toggleDrawerVisibility = (isVisible) => {
+    visibleDrawer.value = isVisible
+  }
+
+  const closeDrawer = () => {
+    toggleDrawerVisibility(false)
+  }
+
+  const handleGoBack = () => {
+    showGoBack.value = false
+    toggleDrawerVisibility(false)
+  }
+
+  const checkActiveBorder = (attack) => {
+    if (!selectedAttack.value) return false
+    return selectedAttack.value.id === attack.id
+  }
+  const createAllowed = () => {
+    emit('attack-on', selectedAttack.value)
+  }
+
+  onBeforeMount(async () => {
+    await loadInitialData()
+  })
+</script>
+
+<template>
+  <Sidebar
+    v-model:visible="visibleDrawer"
+    :update:visible="toggleDrawerVisibility"
+    position="right"
+    :pt="{
+      root: { class: 'max-w-4xl w-full p-0' },
+      header: { class: 'flex justify-between text-xl font-medium px-8' },
+      closeButton: { class: 'border surface-border' },
+      content: { class: '[&::-webkit-scrollbar]:hidden p-0 flex flex-col justify-between' }
+    }"
+  >
+    <template #header>
+      <h2>More Details</h2>
+    </template>
+    <div class="flex flex-col p-8 gap-8">
+      <div
+        class="flex max-w-screen-2xl mx-auto gap-8 w-full surface-section rounded-md border surface-border px-8 py-8 flex-wrap min-w-[2rem]"
+      >
+        <div class="flex-col justify-center items-start gap-3 flex">
+          <div class="text-color text-xl font-medium">
+            {{ tuningObject.ruleIdDescription }}
+          </div>
+          <div class="justify-start items-center gap-1 inline-flex">
+            <i class="pi pi-calendar"></i> {{ time }}
+          </div>
+        </div>
+        <Divider></Divider>
+        <div class="flex w-full gap-8">
+          <div class="w-1/2 flex justify-between">
+            <div class="flex flex-col text-color">
+              <span>Domain</span>
+              <span>Path</span>
+              <span>IP Address</span>
+            </div>
+            <div class="flex flex-col text-color-secondary">
+              <span>{{ props.domains }}</span>
+              <span></span>
+              <span></span>
+            </div>
+          </div>
+          <div class="w-1/2 flex justify-between">
+            <div class="flex flex-col text-color">
+              <span>Network List</span>
+              <span>Country</span>
+            </div>
+            <div class="flex flex-col text-color-secondary">
+              <span></span>
+              <span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex max-w-screen-2xl mx-auto gap-8 w-full surface-section rounded-md border surface-border px-8 py-8 flex-wrap min-w-[2rem]"
+      >
+        <div class="flex-col gap-8 flex w-full">
+          <div class="gap-2 flex flex-col">
+            <div class="text-color text-xl font-medium">Possible Attacks List</div>
+            <div class="text-color-secondary items-center gap-1 inline-flex">
+              Select specific fields to allow rules
+            </div>
+          </div>
+          <div class="flex flex-col gap-2 w-full">
+            <span class="text-color">Fields List</span>
+            <Skeleton
+              v-if="loading"
+              width="100%"
+              height="10rem"
+            ></Skeleton>
+            <div
+              class="flex w-full surface-section rounded-md border surface-border p-4 flex-wrap"
+              v-for="(attack, index) in possibleAttacks"
+              :key="index"
+              :class="{ 'border-orange-500': checkActiveBorder(attack) }"
+            >
+              <div class="flex w-full gap-2 items-start">
+                <RadioButton
+                  inputId="value"
+                  name="attack"
+                  :value="attack"
+                  v-model="selectedAttack"
+                />
+                <div class="flex-col gap-1 w-full">
+                  <div
+                    class="text-color font-medium"
+                    for="value"
+                  >
+                    {{ attack.matchValue }}
+                  </div>
+                  <div class="text-color-secondary font-normal mb-3">description</div>
+                  <div class="flex flex-col gap-3">
+                    <div class="flex w-full gap-8">
+                      <div class="w-1/2 flex justify-between">
+                        <div class="flex flex-col text-color">
+                          <span>Top 10 IPs Address</span>
+                        </div>
+                        <div class="flex flex-col text-color-secondary">
+                          <span
+                            v-for="(ip, index) in attack.topIps"
+                            :key="index"
+                            >{{ ip }}</span
+                          >
+                        </div>
+                      </div>
+                      <div class="w-1/2 flex justify-between">
+                        <div class="flex flex-col text-color">
+                          <span>Top 10 Countries</span>
+                        </div>
+                        <div class="flex flex-col text-color-secondary">
+                          <span
+                            v-for="(country, index) in attack.topCountries"
+                            :key="index"
+                            >{{ country }}</span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div class="flex w-full gap-8">
+                      <div class="w-1/2 flex justify-between">
+                        <div class="flex flex-col text-color">
+                          <span>Top 10 Paths</span>
+                        </div>
+                        <div class="flex flex-col text-color-secondary">
+                          <span
+                            v-for="(path, index) in attack.topPaths"
+                            :key="index"
+                            >{{ path }}</span
+                          >
+                        </div>
+                      </div>
+                      <div class="w-1/2 flex justify-between">
+                        <div class="flex flex-col text-color">
+                          <span>Hits</span>
+                          <span>IPs</span>
+                          <span>Countries</span>
+                        </div>
+                        <div class="flex flex-col text-color-secondary">
+                          <span>{{ attack.hitCount }}</span>
+                          <span>{{ attack.ipCount }}</span>
+                          <span>{{ attack.countryCount }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div></div>
+    <div class="sticky bottom-0">
+      <GoBack
+        :goBack="handleGoBack"
+        v-if="showGoBack"
+        :inDrawer="true"
+      />
+      <ActionBarBlock
+        v-else
+        @onCancel="closeDrawer"
+        @onSubmit="createAllowed"
+        :inDrawer="true"
+        primaryActionLabel="Allow Rules"
+        :submitDisabled="!selectedAttack"
+      />
+    </div>
+  </Sidebar>
+</template>
+<!--         :submitDisabled="disable"
+ -->
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index c9e8c995e..4149778d0 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -27,6 +27,9 @@
     :hasListService="true"
     :dataFilted="dataFiltedComputed"
     @on-select-data="selectedItems"
+    :cleanSelectData="cleanSelectData"
+    :showselectionMode="true"
+    :editInDrawer="openMoreDetails"
     emptyListMessage="No Waf Rules Tuning found."
   >
     <template #addButton> </template>
@@ -58,10 +61,22 @@
     primaryActionLabel="Allow Rules"
   />
 
+  <MoreDetailsDrawer
+    v-if="showDetailsOfAttack"
+    v-model:visible="showDetailsOfAttack"
+    :listService="handleListWafRulesTuningAttacksService"
+    :tuningObject="tuningSelected"
+    :domains="domainNames"
+    :time="timeName"
+    @attack-on="createAllowedByAttack"
+  >
+  </MoreDetailsDrawer>
+
   <DialogAllowRule
     v-model:visible="showDialogAllowRule"
+    :isLoading="isLoadingAllowed"
     @closeDialog="closeDialog"
-    @reason="handleAllowRules"
+    @reason="handleSubmitAllowRules"
   >
   </DialogAllowRule>
 </template>
@@ -70,6 +85,7 @@
   import EmptyResultsBlock from '@/templates/empty-results-block'
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
   import DialogAllowRule from './Dialog'
+  import MoreDetailsDrawer from './Drawer'
 
   import ListTableNoHeaderBlock from '@templates/list-table-block/no-header'
   import PrimeButton from 'primevue/button'
@@ -81,14 +97,62 @@
   import { useRoute } from 'vue-router'
   import { useToast } from 'primevue/usetoast'
 
+  const props = defineProps({
+    listWafRulesTuningService: {
+      type: Function,
+      required: true
+    },
+    documentationServiceTuning: {
+      required: true,
+      type: Function
+    },
+    listCountriesService: {
+      required: true,
+      type: Function
+    },
+    listNetworkListService: {
+      required: true,
+      type: Function
+    },
+    listWafRulesDomainsService: {
+      required: true,
+      type: Function
+    },
+    showActionBar: {
+      type: Boolean,
+      required: true
+    },
+    createWafRulesAllowedTuningService: {
+      type: Function,
+      required: true
+    },
+    listWafRulesTuningAttacksService: {
+      type: Function,
+      required: true
+    }
+  })
+
   const route = useRoute()
+  const toast = useToast()
   const selectedDomain = ref([])
   const dataFilted = ref([])
   const selectedEvents = ref([])
+  const isLoadingAllowed = ref(null)
   const showDialogAllowRule = ref(false)
+  const cleanSelectData = ref(false)
+  const showDetailsOfAttack = ref(false)
+  const wafRuleId = ref(route.params.id)
+  const countriesOptions = ref({ options: [], done: true })
+  const netWorkListOptions = ref({ options: [], done: true })
+  const domainsOptions = ref({ options: [], done: true })
+  const tuningSelected = ref(null)
+  const domainNames = ref('')
+  const allowedByAttacks = ref([])
 
   const dataFiltedComputed = computed(() => dataFilted.value)
+  const timeName = computed(() => timeOptions.value.find((item) => item.value === time.value).name)
   const time = ref('1')
+
   const timeOptions = ref([
     {
       name: 'Last 1 hour',
@@ -120,49 +184,6 @@
     }
   ])
 
-  const props = defineProps({
-    listWafRulesTuningService: {
-      type: Function,
-      required: true
-    },
-    documentationServiceTuning: {
-      required: true,
-      type: Function
-    },
-    listCountriesService: {
-      required: true,
-      type: Function
-    },
-    listNetworkListService: {
-      required: true,
-      type: Function
-    },
-    listWafRulesDomainsService: {
-      required: true,
-      type: Function
-    },
-    showActionBar: {
-      type: Boolean,
-      required: true
-    },
-    createWafRulesAllowedTuningService: {
-      type: Function,
-      required: true
-    }
-  })
-
-  const toast = useToast()
-
-  const showToast = (summary, severity) => {
-    return toast.add({
-      severity,
-      summary,
-      closable: true
-    })
-  }
-
-  const wafRuleId = ref(route.params.id)
-
   const wafRulesAllowedColumns = ref([
     {
       field: 'ruleIdDescription',
@@ -194,6 +215,21 @@
     }
   ])
 
+  const showToast = (summary, severity) => {
+    return toast.add({
+      severity,
+      summary,
+      closable: true
+    })
+  }
+
+  const getDomainNames = () => {
+    domainNames.value = domainsOptions.value.options
+      .filter((domain) => selectedDomain.value.includes(domain.id))
+      .map((domain) => domain.name)
+      .join(',')
+  }
+
   const selectedItems = (events) => {
     selectedEvents.value = events
   }
@@ -203,32 +239,72 @@
   }
 
   const closeDialog = () => {
+    isLoadingAllowed.value = null
     showDialogAllowRule.value = false
+    selectedEvents.value = []
+    allowedByAttacks.value = []
+  }
+  const openMoreDetails = (tuning) => {
+    getDomainNames()
+    tuningSelected.value = tuning
+    showDetailsOfAttack.value = true
   }
 
-  const handleAllowRules = async (reason) => {
-    const allowedRules = []
-    for (const allowed of selectedEvents.value) {
-      allowedRules.push({
-        match_zone: allowed.matchZone,
-        matches_on: allowed.matchesOn,
-        rule_id: allowed.ruleId
-      })
+  const handleSubmitAllowRules = async (reason) => {
+    const requestsAllowedRules = []
+    let events = []
+    if (allowedByAttacks.value.length) {
+      events = [...allowedByAttacks.value]
+    } else if (selectedEvents.value.length) {
+      events = [...selectedEvents.value]
     }
 
-    const payload = {
-      reason,
-      allowedRules
+    for (const event of events) {
+      const matchZones = {
+        zone: event.matchZone,
+        matches_on: event.matchesOn
+      }
+      if (event.matchValue) {
+        matchZones.zone_input = event.matchValue
+        matchZones.zone = `conditional_${matchZones.zone}`
+      }
+
+      const payload = {
+        ruleId: event.ruleId,
+        matchZone: [matchZones],
+        reason
+      }
+
+      requestsAllowedRules.push(
+        props.createWafRulesAllowedTuningService({
+          payload,
+          wafId: wafRuleId.value
+        })
+      )
     }
 
     try {
-      await props.createWafRulesAllowedTuningService({ payload, wafId: wafRuleId.value })
+      const [ response, ] = await Promise.allSettled(requestsAllowedRules)
+      showToast(response, 'success')
+      filterTuning()
+      closeDialog()
+      selectedEvents.value = []
+      allowedByAttacks.value = []
+      cleanSelectData.value = true
     } catch (error) {
       showToast(error, 'error')
+    } finally {
+      isLoadingAllowed.value = false
     }
   }
 
+  const createAllowedByAttack = (value) => {
+    openDialog()
+    allowedByAttacks.value = [value]
+  }
+
   const filterTuning = async () => {
+    //check if the domain is selected
     if (!selectedDomain.value.length) return
     const query = `?hour_range=${time.value}&domains_ids=${encodeURIComponent(
       selectedDomain.value
@@ -237,9 +313,18 @@
     dataFilted.value = response
   }
 
-  const countriesOptions = ref({ options: [], done: true })
-  const netWorkListOptions = ref({ options: [], done: true })
-  const domainsOptions = ref({ options: [], done: true })
+  const handleListWafRulesTuningAttacksService = async () => {
+    const domainsId = encodeURIComponent(selectedDomain.value)
+    const matchesOn = `matches_on=${tuningSelected.value.matchesOn}`
+    const matchesZone = `match_zone=${tuningSelected.value.matchZone}`
+    const query = `?hour_range=${time.value}&domains_ids=${domainsId}&${matchesOn}&${matchesZone}`
+
+    return await props.listWafRulesTuningAttacksService({
+      wafId: wafRuleId.value,
+      tuningId: tuningSelected.value.ruleId,
+      query
+    })
+  }
 
   const setCountriesOptions = async () => {
     countriesOptions.value.done = false
diff --git a/src/views/WafRules/TabsView.vue b/src/views/WafRules/TabsView.vue
index f3ee293c0..76f12d158 100644
--- a/src/views/WafRules/TabsView.vue
+++ b/src/views/WafRules/TabsView.vue
@@ -85,6 +85,7 @@
             :listWafRulesDomainsService="props.wafTuning.listWafRulesDomainsService"
             :showActionBar="activeTab === mapTabs.tuning"
             :createWafRulesAllowedTuningService="props.wafTuning.createWafRulesAllowedTuningService"
+            :listWafRulesTuningAttacksService="props.wafTuning.listWafRulesTuningAttacksService"
           />
         </TabPanel>
         <TabPanel header="Allowed Rules">

From bb4540bd3d553887ecc8bba962e02ade815325f1 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 23 Jan 2024 13:29:06 -0300
Subject: [PATCH 06/26] feat: husky format

---
 .../create-waf-rules-allowed-tuning-service.js              | 2 +-
 .../list-waf-rules-tuning-attacks-service.js                | 6 +++---
 src/templates/list-table-block/no-header.vue                | 1 -
 .../list-waf-rules-tuning-attack-service.test.js            | 6 +++++-
 src/views/WafRules/Dialog/index.vue                         | 2 +-
 src/views/WafRules/Drawer/index.vue                         | 2 --
 src/views/WafRules/ListWafRulesTuning.vue                   | 2 +-
 7 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
index 62d382d16..045856054 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-tuning-service.js
@@ -14,7 +14,7 @@ export const createWafRulesAllowedTuningService = async ({ payload, wafId }) =>
 
 const adapt = (payload) => {
   return {
-	  rule_id: payload.ruleId,
+    rule_id: payload.ruleId,
     match_zones: payload.matchZone,
     reason: payload.reason
   }
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
index 5d4cba17c..da1792991 100644
--- a/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
@@ -26,16 +26,16 @@ const adapt = (httpResponse) => {
     ? httpResponse.body.results.map((event, index) => {
         const values = {
           hitCount: event.hit_count,
-          topIps: event.top_10_ips.map(ip => ip.ip),
+          topIps: event.top_10_ips.map((ip) => ip.ip),
           id: index,
           ruleId: event.rule_id,
           ipCount: event.ip_count,
           matchZone: event.match_zone,
           pathCount: event.path_count,
-          topCountries: event.top_10_countries.map(country => country.country),
+          topCountries: event.top_10_countries.map((country) => country.country),
           matchesOn: event.matches_on,
           countryCount: event.country_count,
-          topPaths: event.top_10_paths.map(path => path.path),
+          topPaths: event.top_10_paths.map((path) => path.path),
           matchValue: event.match_value
         }
 
diff --git a/src/templates/list-table-block/no-header.vue b/src/templates/list-table-block/no-header.vue
index 0b02c31fb..6f417657f 100644
--- a/src/templates/list-table-block/no-header.vue
+++ b/src/templates/list-table-block/no-header.vue
@@ -388,7 +388,6 @@
     emit('on-load-data', hasData)
   })
 
-
   // to make a filter
 
   watch(selectedItems, (selectedData) => {
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-tuning-attack-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-tuning-attack-service.test.js
index 460e0d12d..bcdf6a4f1 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-tuning-attack-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-tuning-attack-service.test.js
@@ -54,7 +54,11 @@ describe('WafRulesService', () => {
     })
     const { sut } = makeSut()
 
-    const result = await sut({ wafId: 4044, query: '?hour_range=48&domains_ids=1705587704', tuningId: 100 })
+    const result = await sut({
+      wafId: 4044,
+      query: '?hour_range=48&domains_ids=1705587704',
+      tuningId: 100
+    })
 
     expect(result).toEqual([
       {
diff --git a/src/views/WafRules/Dialog/index.vue b/src/views/WafRules/Dialog/index.vue
index 51169ea4f..5cf3c4a75 100644
--- a/src/views/WafRules/Dialog/index.vue
+++ b/src/views/WafRules/Dialog/index.vue
@@ -39,7 +39,7 @@
       showDialog.value = value
     }
   )
-  
+
   watch(
     () => props.isLoading,
     (value) => {
diff --git a/src/views/WafRules/Drawer/index.vue b/src/views/WafRules/Drawer/index.vue
index 5b52f0f6a..484414393 100644
--- a/src/views/WafRules/Drawer/index.vue
+++ b/src/views/WafRules/Drawer/index.vue
@@ -8,7 +8,6 @@
   import Sidebar from 'primevue/sidebar'
   import Skeleton from 'primevue/skeleton'
 
-
   defineOptions({
     name: 'more-details'
   })
@@ -46,7 +45,6 @@
   const possibleAttacks = ref([])
   const selectedAttack = ref(null)
 
-
   const showToast = (severity, summary) => {
     toast.add({
       closable: true,
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index 4149778d0..eaf15c9be 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -284,7 +284,7 @@
     }
 
     try {
-      const [ response, ] = await Promise.allSettled(requestsAllowedRules)
+      const [response] = await Promise.allSettled(requestsAllowedRules)
       showToast(response, 'success')
       filterTuning()
       closeDialog()

From 60757bb9e005f87cf51202e126257d6dcc4a90e8 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Tue, 23 Jan 2024 18:12:50 -0300
Subject: [PATCH 07/26] feat: add checkbox in attack events

---
 src/router/routes/waf-rules-routes/index.js   |   3 +-
 src/services/waf-rules-services/index.js      |   4 +-
 .../list-waf-rules-allowed-service.js         |   7 +-
 .../list-waf-rules-tuning-attacks-service.js  |   3 +-
 .../list-waf-rules-tuning-service.js          |   9 +-
 .../waf-rules-services/ruleIdOptions.js       | 225 ++++++++++++++++++
 .../list-waf-rules-tuning-service.test.js     |   7 +-
 src/views/WafRules/Drawer/index.vue           |  19 +-
 .../WafRules/FormFields/FormFieldsAllowed.vue |  27 ++-
 src/views/WafRules/ListWafRulesAllowed.vue    |  12 +-
 src/views/WafRules/ListWafRulesTuning.vue     |  11 +-
 src/views/WafRules/TabsView.vue               |   2 +
 12 files changed, 292 insertions(+), 37 deletions(-)
 create mode 100644 src/services/waf-rules-services/ruleIdOptions.js

diff --git a/src/router/routes/waf-rules-routes/index.js b/src/router/routes/waf-rules-routes/index.js
index 835432884..78cbe5a09 100644
--- a/src/router/routes/waf-rules-routes/index.js
+++ b/src/router/routes/waf-rules-routes/index.js
@@ -56,7 +56,8 @@ export const wafRulesRoutes = {
           loadWafRulesAllowedService: WafRulesService.loadWafRulesAllowedService,
           editWafRulesAllowedService: WafRulesService.editWafRulesAllowedService,
           documentationServiceAllowed: Helpers.documentationCatalog.wafAllowed,
-          listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService
+          listWafRulesAllowedService: WafRulesService.listWafRulesAllowedService,
+          optionsRuleIds: WafRulesService.optionsRuleIds
         },
         wafServices: {
           editWafRulesService: WafRulesService.editWafRulesService,
diff --git a/src/services/waf-rules-services/index.js b/src/services/waf-rules-services/index.js
index b4c04f5ce..652452a5e 100644
--- a/src/services/waf-rules-services/index.js
+++ b/src/services/waf-rules-services/index.js
@@ -13,6 +13,7 @@ import { listNetworkListService } from './list-network-list-service'
 import { listWafRulesDomainsService } from './list-waf-rules-domain-service'
 import { createWafRulesAllowedTuningService } from './create-waf-rules-allowed-tuning-service'
 import { listWafRulesTuningAttacksService } from './list-waf-rules-tuning-attacks-service'
+import { optionsRuleIds } from './ruleIdOptions'
 export {
   listWafRulesService,
   deleteWafRulesService,
@@ -28,5 +29,6 @@ export {
   listNetworkListService,
   listWafRulesDomainsService,
   createWafRulesAllowedTuningService,
-  listWafRulesTuningAttacksService
+  listWafRulesTuningAttacksService,
+  optionsRuleIds
 }
diff --git a/src/services/waf-rules-services/list-waf-rules-allowed-service.js b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
index 7e4b475d2..55682f142 100644
--- a/src/services/waf-rules-services/list-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
@@ -1,6 +1,6 @@
 import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
 import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
-
+import { optionsRuleIds } from './ruleIdOptions'
 export const listWafRulesAllowedService = async ({ wafId }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
     url: `${makeWafRulesAllowedBaseUrl()}/${wafId}/allowed_rules?page=1&page_size=100`,
@@ -71,10 +71,13 @@ const adapt = (httpResponse) => {
    * like other andpoints.
    */
 
+  
   const isArray = Array.isArray(httpResponse.body.results)
 
   const parsedWafRulesAllowed = isArray
     ? httpResponse.body.results.map((waf) => {
+
+      const ruleId = optionsRuleIds.find(rule => rule.value === waf.rule_id).text
         const parsedAllowed = {
           id: waf.id,
           lastEditor: waf.last_editor,
@@ -84,7 +87,7 @@ const adapt = (httpResponse) => {
           matchZones: parseMatchZone(waf.match_zones),
           path: waf.path,
           reason: waf.reason,
-          ruleId: waf.rule_id === 0 ? '0 - All Rules' : waf.rule_id,
+          ruleId,
           status: parseStatusData(waf.status),
           useRegex: waf.use_regex
         }
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
index da1792991..d87b9fcca 100644
--- a/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
@@ -39,10 +39,11 @@ const adapt = (httpResponse) => {
           matchValue: event.match_value
         }
 
+
         return values
       })
     : []
-
+    
   return {
     body: parsedWafRulesTuning,
     statusCode: httpResponse.statusCode
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
index 78016b90f..49775d92b 100644
--- a/src/services/waf-rules-services/list-waf-rules-tuning-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-service.js
@@ -23,17 +23,16 @@ const adapt = (httpResponse) => {
   const isArray = Array.isArray(httpResponse.body.results)
 
   const parsedWafRulesTuning = isArray
-    ? httpResponse.body.results.map((event, index) => {
+    ? httpResponse.body.results.map((event) => {
         const values = {
           hitCount: event.hit_count,
-          topIps: event.top_10_ips[1],
-          id: index,
-          ruleId: event.rule_id,
+          topIps: event.top_10_ips[0][1],
+          id: event.rule_id,
           ruleIdDescription: `${event.rule_id} - ${event.rule_description}`,
           ipCount: event.ip_count,
           matchZone: event.match_zone,
           pathCount: event.path_count,
-          topCountries: event.top_10_countries[1],
+          topCountries: event.top_10_countries[0][1],
           matchesOn: event.matches_on,
           ruleDescription: event.rule_description,
           countryCount: event.country_count
diff --git a/src/services/waf-rules-services/ruleIdOptions.js b/src/services/waf-rules-services/ruleIdOptions.js
new file mode 100644
index 000000000..87c43d395
--- /dev/null
+++ b/src/services/waf-rules-services/ruleIdOptions.js
@@ -0,0 +1,225 @@
+/* eslint-disable no-useless-escape */
+
+export const optionsRuleIds = [
+  { value: 0, text: '0 - All Rules' },
+  { value: 1, text: '1 - Validation of protocol compliance: weird request, unable to parse' },
+  { value: 2, text: '2 - Request too big, stored on disk and not parsed' },
+  { value: 10, text: '10 - Validation of protocol compliance: invalid HEX encoding (null bytes)' },
+  {
+    value: 11,
+    text: '11 - Validation of protocol compliance: missing or unknown Content-Type header in a POST (this rule applies only to Request Body match zone)'
+  },
+  { value: 12, text: '12 - Validation of protocol compliance: invalid formatted URL' },
+  { value: 13, text: '13 - Validation of protocol compliance: invalid POST format' },
+  { value: 14, text: '14 - Validation of protocol compliance: invalid POST boundary' },
+  { value: 15, text: '15 - Validation of protocol compliance: invalid JSON' },
+  { value: 16, text: '16 - Validation of protocol compliance: POST with no body' },
+  { value: 17, text: '17 - Possible SQL Injection attack: validation with libinjection_sql' },
+  { value: 18, text: '18 - Possible XSS attack: validation with libinjection_xss' },
+  {
+    value: 1000,
+    text: '1000 - Possible SQL Injection attack: SQL keywords found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1001,
+    text: '1001 - Possible SQL Injection or XSS attack: double quote (") found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1002,
+    text: '1002 - Possible SQL Injection attack: possible hex encoding (0x) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1003,
+    text: '1003 - Possible SQL Injection attack: MySQL comment (/*) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1004,
+    text: '1004 - Possible SQL Injection attack: MySQL comment (*/) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1005,
+    text: '1005 - Possible SQL Injection attack: MySQL keyword (|) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1006,
+    text: '1006 - Possible SQL Injection attack: MySQL keyword (&amp;&amp;) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1007,
+    text: '1007 - Possible SQL Injection attack: MySQL comment (--) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1008,
+    text: '1008 - Possible SQL Injection or XSS attack: semicolon (;) found in Body, Path or Query String'
+  },
+  {
+    value: 1009,
+    text: '1009 - Possible SQL Injection attack: equal sign (=) found in Body or Query String'
+  },
+  {
+    value: 1010,
+    text: '1010 - Possible SQL Injection or XSS attack: open parenthesis [(] found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1011,
+    text: '1011 - Possible SQL Injection or XSS attack: close parenthesis [)] found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1013,
+    text: "1013 - Possible SQL Injection or XSS attack: apostrophe (') found in Body, Path, Query String or Cookies"
+  },
+  {
+    value: 1015,
+    text: '1015 - Possible SQL Injection attack: comma (,) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1016,
+    text: '1016 - Possible SQL Injection attack: MySQL comment (#) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1017,
+    text: '1017 - Possible SQL Injection attack: double at sign (@@) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1100,
+    text: '1100 - Possible RFI attack: scheme "http://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1101,
+    text: '1101 - Possible RFI attack: scheme "https://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1102,
+    text: '1102 - Possible RFI attack: scheme "ftp://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1103,
+    text: '1103 - Possible RFI attack: scheme "php://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1104,
+    text: '1104 - Possible RFI attack: scheme "sftp://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1105,
+    text: '1105 - Possible RFI attack: scheme "zlib://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1106,
+    text: '1106 - Possible RFI attack: scheme "data://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1107,
+    text: '1107 - Possible RFI attack: scheme "glob://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1108,
+    text: '1108 - Possible RFI attack: scheme "phar://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1109,
+    text: '1109 - Possible RFI attack: scheme "file://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1110,
+    text: '1110 - Possible RFI attack: scheme "gopher://" found in Body, Query String or Cookies'
+  },
+  {
+    value: 1198,
+    text: '1198 - Possible RCE attack: validation with log4j (Log4Shell) in HEADERS_VAR'
+  },
+  {
+    value: 1199,
+    text: '1199 - Possible RCE attack: validation with log4j (Log4Shell) in Body, Path, Query String, Headers or Cookies'
+  },
+  {
+    value: 1200,
+    text: '1200 - Possible Directory Traversal attack: double dot (..) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1202,
+    text: '1202 - Possible Directory Traversal attack: obvious probe (/etc/passwd) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1203,
+    text: `1203 - Possible Directory Traversal attack: obvious windows path (c:\\) found in Body, Path, Query String or Cookies`
+  },
+  {
+    value: 1204,
+    text: '1204 - Possible Directory Traversal attack: obvious probe (cmd.exe) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1205,
+    text: `1205 - Possible Directory Traversal attack: backslash (\) found in Body, Path, Query String or Cookies`
+  },
+  {
+    value: 1206,
+    text: '1206 - Possible Directory Traversal attack: slash (/) found in Body, Query String or Cookies'
+  },
+  {
+    value: 1207,
+    text: '1207 - Possible Directory Traversal attack: obvious path probe (/..;/) found in Body, Query String or Cookies'
+  },
+  {
+    value: 1208,
+    text: '1208 - Possible Directory Traversal attack: obvious path probe (/.;/) found in Body, Query String or Cookies'
+  },
+  {
+    value: 1209,
+    text: '1209 - Possible Directory Traversal attack: obvious path probe (/.%2e/) found in Body, Query String or Cookies'
+  },
+  {
+    value: 1210,
+    text: '1210 - Possible Directory Traversal attack: obvious path probe (/%2e./) found in Body, Query String or Cookies'
+  },
+  {
+    value: 1302,
+    text: '1302 - Possible XSS attack: html open tag (&lt;) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1303,
+    text: '1303 - Possible XSS attack: html close tag (&gt;) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1310,
+    text: '1310 - Possible XSS attack: open square bracket ([) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1311,
+    text: '1311 - Possible XSS attack: close square bracket (]) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1312,
+    text: '1312 - Possible XSS attack: tilde character (~) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1314,
+    text: '1314 - Possible XSS attack: back quote ( `) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1315,
+    text: '1315 - Possible XSS attack: double encoding (%[2|3]) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1400,
+    text: '1400 - Possible trick to evade protection: UTF7/8 encoding (&amp;#) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1401,
+    text: '1401 - Possible trick to evade protection: MS encoding (%U) found in Body, Path, Query String or Cookies'
+  },
+  {
+    value: 1402,
+    text: '1402 - Possible trick to evade protection: encoded chars (%20-%3F) found in Body, Query String or Cookies'
+  },
+  {
+    value: 1500,
+    text: '1500 - Possible File Upload attempt: asp/php (.ph, .asp or .ht) found in filename in a multipart POST containing a file'
+  },
+  {
+    value: 2001,
+    text: '2001 - Possible CVE-2022-22965 attack: Tomcat Pipeline Convalue: 0 ,text tampering'
+  }
+]
+
+/* eslint-enable no-useless-escape */
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
index f6202c544..5bffdcbee 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-tuning-service.test.js
@@ -5,12 +5,12 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const fixtures = {
   wafRulesMock: {
     hit_count: 10,
-    top_10_ips: ['', '100.100.10'],
+    top_10_ips: [['', '100.100.10']],
     rule_id: 1000,
     ip_count: 8,
     match_zone: 'value',
     path_count: 10,
-    top_10_countries: ['', 'Brazil'],
+    top_10_countries: [['', 'Brazil']],
     matches_on: 'query_string',
     rule_description: 'Possible SQL Injection attack: SQL keywords found in Query String',
     country_count: 10
@@ -59,8 +59,7 @@ describe('WafRulesService', () => {
       {
         hitCount: fixtures.wafRulesMock.hit_count,
         topIps: '100.100.10',
-        id: 0,
-        ruleId: fixtures.wafRulesMock.rule_id,
+        id: fixtures.wafRulesMock.rule_id,
         ruleIdDescription: `${fixtures.wafRulesMock.rule_id} - ${fixtures.wafRulesMock.rule_description}`,
         ipCount: fixtures.wafRulesMock.ip_count,
         matchZone: fixtures.wafRulesMock.match_zone,
diff --git a/src/views/WafRules/Drawer/index.vue b/src/views/WafRules/Drawer/index.vue
index 484414393..884abd7a1 100644
--- a/src/views/WafRules/Drawer/index.vue
+++ b/src/views/WafRules/Drawer/index.vue
@@ -1,7 +1,7 @@
 <script setup>
   import { computed, onBeforeMount, ref } from 'vue'
   import { useToast } from 'primevue/usetoast'
-  import RadioButton from 'primevue/radiobutton'
+  import CheckboxPrime from 'primevue/checkbox'
   import ActionBarBlock from '@/templates/action-bar-block'
   import Divider from 'primevue/divider'
   import GoBack from '@/templates/action-bar-block/go-back'
@@ -43,7 +43,7 @@
   const loading = ref(false)
   const showGoBack = ref(false)
   const possibleAttacks = ref([])
-  const selectedAttack = ref(null)
+  const selectedAttack = ref([])
 
   const showToast = (severity, summary) => {
     toast.add({
@@ -87,7 +87,7 @@
 
   const checkActiveBorder = (attack) => {
     if (!selectedAttack.value) return false
-    return selectedAttack.value.id === attack.id
+    return selectedAttack.value.find((item) => item.id === attack.id)
   }
   const createAllowed = () => {
     emit('attack-on', selectedAttack.value)
@@ -175,11 +175,10 @@
               :class="{ 'border-orange-500': checkActiveBorder(attack) }"
             >
               <div class="flex w-full gap-2 items-start">
-                <RadioButton
-                  inputId="value"
-                  name="attack"
-                  :value="attack"
+                <CheckboxPrime
                   v-model="selectedAttack"
+                  name="attack.ruleID"
+                  :value="attack"
                 />
                 <div class="flex-col gap-1 w-full">
                   <div
@@ -188,7 +187,7 @@
                   >
                     {{ attack.matchValue }}
                   </div>
-                  <div class="text-color-secondary font-normal mb-3">description</div>
+                  <div class="text-color-secondary font-normal mb-3">Field Description</div>
                   <div class="flex flex-col gap-3">
                     <div class="flex w-full gap-8">
                       <div class="w-1/2 flex justify-between">
@@ -264,10 +263,8 @@
         @onSubmit="createAllowed"
         :inDrawer="true"
         primaryActionLabel="Allow Rules"
-        :submitDisabled="!selectedAttack"
+        :submitDisabled="!selectedAttack.length"
       />
     </div>
   </Sidebar>
 </template>
-<!--         :submitDisabled="disable"
- -->
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index fc8dd4fe5..94efdd9bb 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { ref } from 'vue'
+  import { ref, watch } from 'vue'
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
   import InputSwitch from 'primevue/inputswitch'
   import Dropdown from 'primevue/dropdown'
@@ -13,6 +13,17 @@
   import { useField } from 'vee-validate'
   defineOptions({ name: 'form-fields-waf-rules-allowed' })
 
+  const props = defineProps({
+    optionsRuleIds: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    disabledRuleId: {
+      type: Boolean,
+      default: false
+    }
+  })
   const { value: matchZones } = useField('matchZones')
   const { value: path } = useField('path')
   const { value: reason } = useField('reason')
@@ -32,7 +43,9 @@
     { name: 'Request Header', value: 'request_header' }
   ])
 
-  const ruleIdOption = ref([{ name: '0 - All Rules', value: 0 }])
+  const ruleIdOption = ref([])
+
+  ruleIdOption.value = props.optionsRuleIds
 
   const addMatchZones = () => {
     const newArray = matchZones.value
@@ -67,6 +80,10 @@
   const deleteMatchZone = (index) => {
     matchZones.value.splice(index, 1)
   }
+
+  watch(props.getRuleIdOptions, (value) => {
+    ruleIdOption.value = value
+  })
 </script>
 
 <template>
@@ -86,15 +103,15 @@
           id="ruleid"
           v-model="ruleId"
           :options="ruleIdOption"
-          optionLabel="name"
+          optionLabel="text"
           optionValue="value"
           class="w-full"
-          :disabled="true"
+          :disabled="props.disabledRuleId"
         />
       </div>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
         <FieldText
-          label="Reason *"
+          label="Description *"
           name="reason"
           :value="reason"
           description="Set a suggestive description for this rule."
diff --git a/src/views/WafRules/ListWafRulesAllowed.vue b/src/views/WafRules/ListWafRulesAllowed.vue
index 9eaeb1878..42b19e700 100644
--- a/src/views/WafRules/ListWafRulesAllowed.vue
+++ b/src/views/WafRules/ListWafRulesAllowed.vue
@@ -56,7 +56,7 @@
     title="Create New"
   >
     <template #formFields>
-      <FormFieldsAllowed></FormFieldsAllowed>
+      <FormFieldsAllowed :optionsRuleIds="props.optionsRuleIds"></FormFieldsAllowed>
     </template>
   </CreateDrawerBlock>
 
@@ -71,7 +71,10 @@
     title="Edit Waf Rules Allowed"
   >
     <template #formFields>
-      <FormFieldsAllowed />
+      <FormFieldsAllowed
+        :disabledRuleId="true"
+        :optionsRuleIds="props.optionsRuleIds"
+      />
     </template>
   </EditDrawerBlock>
 </template>
@@ -119,6 +122,11 @@
     documentationServiceAllowed: {
       required: true,
       type: Function
+    },
+    optionsRuleIds: {
+      required: true,
+      type: Array,
+      default: () => []
     }
   })
 
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index eaf15c9be..444fa83c7 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -270,7 +270,7 @@
       }
 
       const payload = {
-        ruleId: event.ruleId,
+        ruleId: event.id,
         matchZone: [matchZones],
         reason
       }
@@ -284,13 +284,14 @@
     }
 
     try {
-      const [response] = await Promise.allSettled(requestsAllowedRules)
-      showToast(response, 'success')
+      const [{ value }] = await Promise.allSettled(requestsAllowedRules)
+      showToast(value, 'success')
       filterTuning()
       closeDialog()
       selectedEvents.value = []
       allowedByAttacks.value = []
       cleanSelectData.value = true
+      showDetailsOfAttack.value = false
     } catch (error) {
       showToast(error, 'error')
     } finally {
@@ -300,7 +301,7 @@
 
   const createAllowedByAttack = (value) => {
     openDialog()
-    allowedByAttacks.value = [value]
+    allowedByAttacks.value = value
   }
 
   const filterTuning = async () => {
@@ -321,7 +322,7 @@
 
     return await props.listWafRulesTuningAttacksService({
       wafId: wafRuleId.value,
-      tuningId: tuningSelected.value.ruleId,
+      tuningId: tuningSelected.value.id,
       query
     })
   }
diff --git a/src/views/WafRules/TabsView.vue b/src/views/WafRules/TabsView.vue
index 76f12d158..d7cba85d7 100644
--- a/src/views/WafRules/TabsView.vue
+++ b/src/views/WafRules/TabsView.vue
@@ -90,12 +90,14 @@
         </TabPanel>
         <TabPanel header="Allowed Rules">
           <ListWafRulesAllowed
+            v-if="activeTab === mapTabs.allowed"
             :listWafRulesAllowedService="props.wafRulesAllowed.listWafRulesAllowedService"
             :deleteWafRulesAllowedService="props.wafRulesAllowed.deleteWafRulesAllowedService"
             :createWafRulesAllowedService="props.wafRulesAllowed.createWafRulesAllowedService"
             :loadWafRulesAllowedService="props.wafRulesAllowed.loadWafRulesAllowedService"
             :editWafRulesAllowedService="props.wafRulesAllowed.editWafRulesAllowedService"
             :documentationServiceAllowed="props.wafRulesAllowed.documentationServiceAllowed"
+            :optionsRuleIds="props.wafRulesAllowed.optionsRuleIds"
           />
         </TabPanel>
       </TabView>

From d4fc045636cc62ee36ea0f5c7bf60a7adab1704b Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 24 Jan 2024 09:35:25 -0300
Subject: [PATCH 08/26] feat: fix layout after DS review

---
 .../list-waf-rules-allowed-service.js         |  4 +-
 .../list-waf-rules-tuning-attacks-service.js  |  3 +-
 src/views/WafRules/CreateView.vue             |  1 +
 src/views/WafRules/Drawer/index.vue           | 83 ++++++++++---------
 .../WafRules/FormFields/FormFieldsAllowed.vue |  1 +
 src/views/WafRules/ListWafRulesTuning.vue     |  1 -
 6 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/src/services/waf-rules-services/list-waf-rules-allowed-service.js b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
index 55682f142..565c4e481 100644
--- a/src/services/waf-rules-services/list-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
@@ -71,13 +71,11 @@ const adapt = (httpResponse) => {
    * like other andpoints.
    */
 
-  
   const isArray = Array.isArray(httpResponse.body.results)
 
   const parsedWafRulesAllowed = isArray
     ? httpResponse.body.results.map((waf) => {
-
-      const ruleId = optionsRuleIds.find(rule => rule.value === waf.rule_id).text
+        const ruleId = optionsRuleIds.find((rule) => rule.value === waf.rule_id).text
         const parsedAllowed = {
           id: waf.id,
           lastEditor: waf.last_editor,
diff --git a/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js b/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
index d87b9fcca..da1792991 100644
--- a/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-tuning-attacks-service.js
@@ -39,11 +39,10 @@ const adapt = (httpResponse) => {
           matchValue: event.match_value
         }
 
-
         return values
       })
     : []
-    
+
   return {
     body: parsedWafRulesTuning,
     statusCode: httpResponse.statusCode
diff --git a/src/views/WafRules/CreateView.vue b/src/views/WafRules/CreateView.vue
index 163222e11..9711a5422 100644
--- a/src/views/WafRules/CreateView.vue
+++ b/src/views/WafRules/CreateView.vue
@@ -61,6 +61,7 @@
   })
 
   const initialValues = {
+    name: '',
     crossSiteScriptingSensitivity: 'medium',
     directoryTraversalSensitivity: 'medium',
     evadingTricksSensitivity: 'medium',
diff --git a/src/views/WafRules/Drawer/index.vue b/src/views/WafRules/Drawer/index.vue
index 884abd7a1..072496da2 100644
--- a/src/views/WafRules/Drawer/index.vue
+++ b/src/views/WafRules/Drawer/index.vue
@@ -127,26 +127,35 @@
         </div>
         <Divider></Divider>
         <div class="flex w-full gap-8">
-          <div class="w-1/2 flex justify-between">
-            <div class="flex flex-col text-color">
-              <span>Domain</span>
-              <span>Path</span>
-              <span>IP Address</span>
+          <div class="w-1/2 flex flex-col gap-3">
+            <div class="flex justify-between w-full">
+              <span class="w-1/2 text-color">Domain</span>
+              <div class="flex flex-col w-1/2">
+                <span
+                  class="w-full text-color-secondary"
+                  v-for="(domain, index) in props.domains"
+                  :key="index"
+                  >{{ domain }}
+                </span>
+              </div>
+            </div>
+            <div class="flex justify-between w-full">
+              <span class="w-1/2 text-color">Path</span>
+              <span class="w-1/2 text-color-secondary"></span>
             </div>
-            <div class="flex flex-col text-color-secondary">
-              <span>{{ props.domains }}</span>
-              <span></span>
-              <span></span>
+            <div class="flex justify-between w-full">
+              <span class="w-1/2 text-color">IP Address</span>
+              <span class="w-1/2 text-color-secondary"></span>
             </div>
           </div>
-          <div class="w-1/2 flex justify-between">
-            <div class="flex flex-col text-color">
-              <span>Network List</span>
-              <span>Country</span>
+          <div class="w-1/2 flex flex-col gap-3">
+            <div class="flex justify-between w-full">
+              <span class="w-1/2 text-color">Network List</span>
+              <span class="w-1/2 text-color-secondary"></span>
             </div>
-            <div class="flex flex-col text-color-secondary">
-              <span></span>
-              <span></span>
+            <div class="flex justify-between w-full">
+              <span class="w-1/2 text-color">Country</span>
+              <span class="w-1/2 text-color-secondary"></span>
             </div>
           </div>
         </div>
@@ -188,13 +197,13 @@
                     {{ attack.matchValue }}
                   </div>
                   <div class="text-color-secondary font-normal mb-3">Field Description</div>
-                  <div class="flex flex-col gap-3">
-                    <div class="flex w-full gap-8">
-                      <div class="w-1/2 flex justify-between">
-                        <div class="flex flex-col text-color">
+                  <div class="flex gap-8">
+                    <div class="flex w-1/2 flex-col gap-3">
+                      <div class="w-full flex justify-between">
+                        <div class="w-1/2 flex flex-col text-color">
                           <span>Top 10 IPs Address</span>
                         </div>
-                        <div class="flex flex-col text-color-secondary">
+                        <div class="flex w-1/2 flex-col text-color-secondary">
                           <span
                             v-for="(ip, index) in attack.topIps"
                             :key="index"
@@ -202,39 +211,39 @@
                           >
                         </div>
                       </div>
-                      <div class="w-1/2 flex justify-between">
-                        <div class="flex flex-col text-color">
-                          <span>Top 10 Countries</span>
+                      <div class="flex justify-between">
+                        <div class="flex flex-col text-color w-1/2 ">
+                          <span>Top 10 Paths</span>
                         </div>
-                        <div class="flex flex-col text-color-secondary">
+                        <div class="flex w-1/2 flex-col text-color-secondary">
                           <span
-                            v-for="(country, index) in attack.topCountries"
+                            v-for="(path, index) in attack.topPaths"
                             :key="index"
-                            >{{ country }}</span
+                            >{{ path }}</span
                           >
                         </div>
                       </div>
                     </div>
-                    <div class="flex w-full gap-8">
-                      <div class="w-1/2 flex justify-between">
-                        <div class="flex flex-col text-color">
-                          <span>Top 10 Paths</span>
+                    <div class="flex w-1/2 flex-col gap-3">
+                      <div class="w-full flex justify-between">
+                        <div class="flex w-1/2 flex-col text-color">
+                          <span>Top 10 Countries</span>
                         </div>
-                        <div class="flex flex-col text-color-secondary">
+                        <div class="flex w-1/2 flex-col text-color-secondary">
                           <span
-                            v-for="(path, index) in attack.topPaths"
+                            v-for="(country, index) in attack.topCountries"
                             :key="index"
-                            >{{ path }}</span
+                            >{{ country }}</span
                           >
                         </div>
                       </div>
-                      <div class="w-1/2 flex justify-between">
-                        <div class="flex flex-col text-color">
+                      <div class="w-full flex justify-between">
+                        <div class="flex w-1/2 gap-3 flex-col text-color">
                           <span>Hits</span>
                           <span>IPs</span>
                           <span>Countries</span>
                         </div>
-                        <div class="flex flex-col text-color-secondary">
+                        <div class="flex w-1/2 gap-3 flex-col text-color-secondary">
                           <span>{{ attack.hitCount }}</span>
                           <span>{{ attack.ipCount }}</span>
                           <span>{{ attack.countryCount }}</span>
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index 94efdd9bb..c2a7c80f4 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -107,6 +107,7 @@
           optionValue="value"
           class="w-full"
           :disabled="props.disabledRuleId"
+          :pt="{ panel: { class: '!w-[300px]' } }"
         />
       </div>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index 444fa83c7..592078f9b 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -227,7 +227,6 @@
     domainNames.value = domainsOptions.value.options
       .filter((domain) => selectedDomain.value.includes(domain.id))
       .map((domain) => domain.name)
-      .join(',')
   }
 
   const selectedItems = (events) => {

From 160ec7145dfe7795eee4c2700de1bc46497f0b03 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 24 Jan 2024 11:49:37 -0300
Subject: [PATCH 09/26] feat: fix layout after review from Carol

---
 src/helpers/azion-documentation-catalog.js    |  2 +-
 .../create-waf-rules-allowed-service.js       |  5 ++++-
 .../edit-waf-rules-allowed-service.js         |  2 +-
 .../create-waf-rules-allowed-service.test.js  |  4 +++-
 .../edit-waf-rules-allowed-service.test.js    |  4 ++--
 src/views/WafRules/Drawer/index.vue           |  5 +++--
 .../WafRules/FormFields/FormFieldsAllowed.vue |  1 +
 src/views/WafRules/ListWafRulesAllowed.vue    |  8 +++++++-
 src/views/WafRules/ListWafRulesTuning.vue     |  8 +++++++-
 src/views/WafRules/TabsView.vue               | 19 ++++++++++++++++++-
 10 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/helpers/azion-documentation-catalog.js b/src/helpers/azion-documentation-catalog.js
index 0c3474fcc..0ff38a403 100644
--- a/src/helpers/azion-documentation-catalog.js
+++ b/src/helpers/azion-documentation-catalog.js
@@ -27,7 +27,7 @@ export const documentationCatalog = {
   records: () => openSearchResult('records'),
   waf: () => openSearchResult('waf'),
   wafAllowed: () => openSearchResult('Allowed Rules'),
-  wafTuning: () => openSearchResult('Tuning')
+  wafTuning: () => openSearchResult('Tune')
 }
 
 export const documentationGuideProducts = {
diff --git a/src/services/waf-rules-services/create-waf-rules-allowed-service.js b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
index c57ec4791..2972981f5 100644
--- a/src/services/waf-rules-services/create-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/create-waf-rules-allowed-service.js
@@ -39,7 +39,10 @@ const adapt = (payload) => {
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
     case 202:
-      return 'Your waf rule allowed has been created'
+      return {
+        feedback: 'Your waf rule allowed has been created'
+      }
+
     case 400:
       const apiError = extractApiError(httpResponse)
       throw new Error(apiError).message
diff --git a/src/services/waf-rules-services/edit-waf-rules-allowed-service.js b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
index f4416a3a0..faf472213 100644
--- a/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/edit-waf-rules-allowed-service.js
@@ -38,7 +38,7 @@ const adapt = (payload) => {
  */
 const parseHttpResponse = (httpResponse) => {
   switch (httpResponse.statusCode) {
-    case 200:
+    case 202:
       return 'Your waf rule allowed has been updated'
     case 400:
       const apiError = extractApiError(httpResponse)
diff --git a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
index b9a025f60..732e05a10 100644
--- a/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/create-waf-rules-allowed-service.test.js
@@ -57,7 +57,9 @@ describe('WafRulesServices', () => {
 
     const data = await sut({ payload: fixtures.wafRulesMock, id: 10 })
 
-    expect(data).toStrictEqual('Your waf rule allowed has been created')
+    expect(data).toStrictEqual({
+      feedback: 'Your waf rule allowed has been created'
+    })
   })
 
   it('Should return an API error for an 400 response status', async () => {
diff --git a/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
index 2db03d424..4753a8eb3 100644
--- a/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/edit-waf-rules-allowed-service.test.js
@@ -25,7 +25,7 @@ const makeSut = () => {
 describe('WafRulesServices', () => {
   it('should call API with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 200,
+      statusCode: 202,
       body: fixtures.wafRulesMock
     })
     const { sut } = makeSut()
@@ -47,7 +47,7 @@ describe('WafRulesServices', () => {
 
   it('should return a feedback message on successfully updated', async () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 200,
+      statusCode: 202,
       body: fixtures.wafRulesMock
     })
     const { sut } = makeSut()
diff --git a/src/views/WafRules/Drawer/index.vue b/src/views/WafRules/Drawer/index.vue
index 072496da2..d339c1a48 100644
--- a/src/views/WafRules/Drawer/index.vue
+++ b/src/views/WafRules/Drawer/index.vue
@@ -107,7 +107,7 @@
       root: { class: 'max-w-4xl w-full p-0' },
       header: { class: 'flex justify-between text-xl font-medium px-8' },
       closeButton: { class: 'border surface-border' },
-      content: { class: '[&::-webkit-scrollbar]:hidden p-0 flex flex-col justify-between' }
+      content: { class: '[&::-webkit-scrollbar]:hidden p-0 flex flex-col justify-between overfol' }
     }"
   >
     <template #header>
@@ -176,6 +176,7 @@
               v-if="loading"
               width="100%"
               height="10rem"
+              class="z-0"
             ></Skeleton>
             <div
               class="flex w-full surface-section rounded-md border surface-border p-4 flex-wrap"
@@ -212,7 +213,7 @@
                         </div>
                       </div>
                       <div class="flex justify-between">
-                        <div class="flex flex-col text-color w-1/2 ">
+                        <div class="flex flex-col text-color w-1/2">
                           <span>Top 10 Paths</span>
                         </div>
                         <div class="flex w-1/2 flex-col text-color-secondary">
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index c2a7c80f4..3fda23826 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -275,6 +275,7 @@
         icon="pi pi-plus"
         label="New Match Zone"
         class="sm:w-1/3"
+        outlined
         @click="addMatchZones"
       />
     </template>
diff --git a/src/views/WafRules/ListWafRulesAllowed.vue b/src/views/WafRules/ListWafRulesAllowed.vue
index 42b19e700..87e014e74 100644
--- a/src/views/WafRules/ListWafRulesAllowed.vue
+++ b/src/views/WafRules/ListWafRulesAllowed.vue
@@ -32,6 +32,7 @@
       <PrimeButton
         severity="secondary"
         label="Create from Tuning"
+        @click="goToWafRulesTuning"
       >
       </PrimeButton>
       <PrimeButton
@@ -98,6 +99,8 @@
   const showCreateWafRulesAllowedDrawer = ref(false)
   const listAllowedRef = ref('')
 
+  const emit = defineEmits(['update:visible', 'attack-on'])
+
   const props = defineProps({
     listWafRulesAllowedService: {
       type: Function,
@@ -144,7 +147,7 @@
     path: '',
     reason: '',
     ruleId: 0,
-    status: false,
+    status: true,
     useRegex: false
   }
 
@@ -198,6 +201,9 @@
     hasContentToList.value = event
   }
 
+  const goToWafRulesTuning = () => {
+    emit('handle-go-to-tuning', { index: 1 })
+  }
   const handleListWafRulesAllowedService = async () => {
     return await props.listWafRulesAllowedService({ wafId: wafRuleId.value })
   }
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index 592078f9b..cbb50b50f 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -47,6 +47,7 @@
         severity="secondary"
         icon="pi pi-plus"
         label="Domain"
+        @click="goToDomain"
       />
     </template>
     <template #illustration>
@@ -94,7 +95,7 @@
   import MultiSelect from 'primevue/multiselect'
 
   import { ref, onMounted, computed } from 'vue'
-  import { useRoute } from 'vue-router'
+  import { useRoute, useRouter } from 'vue-router'
   import { useToast } from 'primevue/usetoast'
 
   const props = defineProps({
@@ -133,6 +134,7 @@
   })
 
   const route = useRoute()
+  const router = useRouter()
   const toast = useToast()
   const selectedDomain = ref([])
   const dataFilted = ref([])
@@ -248,6 +250,10 @@
     tuningSelected.value = tuning
     showDetailsOfAttack.value = true
   }
+  
+  const goToDomain = () => {
+    router.push({ name: 'list-domains' })
+  }
 
   const handleSubmitAllowRules = async (reason) => {
     const requestsAllowedRules = []
diff --git a/src/views/WafRules/TabsView.vue b/src/views/WafRules/TabsView.vue
index d7cba85d7..073170985 100644
--- a/src/views/WafRules/TabsView.vue
+++ b/src/views/WafRules/TabsView.vue
@@ -6,6 +6,7 @@
   import ListWafRulesTuning from '@/views/WafRules/ListWafRulesTuning.vue'
   import TabPanel from 'primevue/tabpanel'
   import TabView from 'primevue/tabview'
+  import { useToast } from 'primevue/usetoast'
 
   import { ref } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
@@ -25,10 +26,24 @@
   }
 
   const route = useRoute()
+  const toast = useToast()
   const router = useRouter()
   const activeTab = ref(0)
   const wafRuleId = ref(route.params.id)
+  const wafName = ref('')
 
+  const getWafDat = async () => {
+    try {
+      const response = await props.wafServices.loadWafRulesService({ id: wafRuleId.value })
+      wafName.value = response.name
+    } catch (error) {
+      toast.add({
+        closable: true,
+        severity: 'error',
+        summary: error
+      })
+    }
+  }
   const getTabFromValue = (selectedTabIndex) => {
     const tabNames = Object.keys(mapTabs)
     const selectedTab = tabNames.find((tabName) => mapTabs[tabName] === selectedTabIndex)
@@ -49,6 +64,7 @@
   }
 
   const renderTabCurrentRouter = async () => {
+    getWafDat()
     const { tab } = route.params
     const defaultTabIndex = 0
     const activeTabIndexByRoute = mapTabs[tab] || defaultTabIndex
@@ -61,7 +77,7 @@
 <template>
   <ContentBlock>
     <template #heading>
-      <PageHeadingBlock pageTitle="Edit WAF Rules" />
+      <PageHeadingBlock :pageTitle="wafName" />
     </template>
     <template #content>
       <TabView
@@ -98,6 +114,7 @@
             :editWafRulesAllowedService="props.wafRulesAllowed.editWafRulesAllowedService"
             :documentationServiceAllowed="props.wafRulesAllowed.documentationServiceAllowed"
             :optionsRuleIds="props.wafRulesAllowed.optionsRuleIds"
+            @handle-go-to-tuning="changeRouteByClickingOnTab"
           />
         </TabPanel>
       </TabView>

From fa152f8f59b461242cdaa0773f3e3d8ba94bf3b8 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 24 Jan 2024 11:53:24 -0300
Subject: [PATCH 10/26] feat: husky format

---
 .../list-edge-functions-service.js                            | 2 +-
 .../list-edge-functions-service.js                            | 2 +-
 .../list-edge-functions-service.test.js                       | 4 ++--
 .../list-functions-service.test.js                            | 4 ++--
 src/views/EdgeApplicationsFunctions/Drawer/index.vue          | 4 +++-
 .../FormFields/FormFieldsEdgeApplicationsRulesEngine.vue      | 2 +-
 src/views/EdgeFirewallFunctions/Drawer/index.vue              | 4 +++-
 .../FormFields/FormFieldsEdgeApplicationsFunctions.vue        | 2 +-
 src/views/WafRules/ListWafRulesTuning.vue                     | 2 +-
 9 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/services/edge-application-functions-services/list-edge-functions-service.js b/src/services/edge-application-functions-services/list-edge-functions-service.js
index 352a14a73..ae03a0cf3 100644
--- a/src/services/edge-application-functions-services/list-edge-functions-service.js
+++ b/src/services/edge-application-functions-services/list-edge-functions-service.js
@@ -23,7 +23,7 @@ const adapt = (httpResponse) => {
       value: edgeFunction.id,
       label: edgeFunction.name,
       args: edgeFunction.code,
-      initiatorType: edgeFunction.initiator_type,
+      initiatorType: edgeFunction.initiator_type
     }
   })
 
diff --git a/src/services/edge-firewall-functions-services/list-edge-functions-service.js b/src/services/edge-firewall-functions-services/list-edge-functions-service.js
index 352a14a73..ae03a0cf3 100644
--- a/src/services/edge-firewall-functions-services/list-edge-functions-service.js
+++ b/src/services/edge-firewall-functions-services/list-edge-functions-service.js
@@ -23,7 +23,7 @@ const adapt = (httpResponse) => {
       value: edgeFunction.id,
       label: edgeFunction.name,
       args: edgeFunction.code,
-      initiatorType: edgeFunction.initiator_type,
+      initiatorType: edgeFunction.initiator_type
     }
   })
 
diff --git a/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js b/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js
index ed046196d..c64546f29 100644
--- a/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js
+++ b/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js
@@ -62,13 +62,13 @@ describe('EdgeFirewallFunctionsServices', () => {
         label: 'function instance name',
         value: fixtures.functionsInstance.id,
         args: fixtures.functionsInstance.args,
-        initiatorType: fixtures.functionsInstance.initiator_type,
+        initiatorType: fixtures.functionsInstance.initiator_type
       },
       {
         label: 'function instance version',
         value: fixtures.functionInstanceWithVersion.id,
         args: fixtures.functionInstanceWithVersion.args,
-        initiatorType: fixtures.functionInstanceWithVersion.initiator_type,
+        initiatorType: fixtures.functionInstanceWithVersion.initiator_type
       }
     ])
   })
diff --git a/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
index 8566b3bcd..55f296de7 100644
--- a/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
+++ b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
@@ -62,13 +62,13 @@ describe('EdgeFirewallFunctionsServices', () => {
         label: 'function instance name',
         value: fixtures.functionsInstance.id,
         args: fixtures.functionsInstance.args,
-        initiatorType: fixtures.functionsInstance.initiator_type,
+        initiatorType: fixtures.functionsInstance.initiator_type
       },
       {
         label: 'function instance version',
         value: fixtures.functionInstanceWithVersion.id,
         args: fixtures.functionInstanceWithVersion.args,
-        initiatorType: fixtures.functionInstanceWithVersion.initiator_type,
+        initiatorType: fixtures.functionInstanceWithVersion.initiator_type
       }
     ])
   })
diff --git a/src/views/EdgeApplicationsFunctions/Drawer/index.vue b/src/views/EdgeApplicationsFunctions/Drawer/index.vue
index 40b0ab451..6f48197bf 100644
--- a/src/views/EdgeApplicationsFunctions/Drawer/index.vue
+++ b/src/views/EdgeApplicationsFunctions/Drawer/index.vue
@@ -73,7 +73,9 @@
   const loadEditFunctionDrawer = refDebounced(showEditFunctionDrawer, debouncedDrawerAnimate)
   const selectedFunctionToEdit = ref('')
   const edgeFunctionsList = ref([])
-  const filteredEdgeFunctions = computed(() => edgeFunctionsList.value.filter((element) => element.initiatorType === 'edge_application'))
+  const filteredEdgeFunctions = computed(() =>
+    edgeFunctionsList.value.filter((element) => element.initiatorType === 'edge_application')
+  )
 
   const initialValues = ref({
     id: props.edgeApplicationId,
diff --git a/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue b/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
index 76ff05442..bbf3c9c38 100644
--- a/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
+++ b/src/views/EdgeApplicationsRulesEngine/FormFields/FormFieldsEdgeApplicationsRulesEngine.vue
@@ -35,7 +35,7 @@
       required: true
     },
     initialPhase: {
-      type: String,
+      type: String
     },
     selectedRulesEngineToEdit: {
       type: Object,
diff --git a/src/views/EdgeFirewallFunctions/Drawer/index.vue b/src/views/EdgeFirewallFunctions/Drawer/index.vue
index 90025fe76..04d6ee5fe 100644
--- a/src/views/EdgeFirewallFunctions/Drawer/index.vue
+++ b/src/views/EdgeFirewallFunctions/Drawer/index.vue
@@ -73,7 +73,9 @@
   const loadEditFunctionDrawer = refDebounced(showEditFunctionDrawer, debouncedDrawerAnimate)
   const selectedFunctionToEdit = ref('')
   const edgeFunctionsList = ref([])
-  const filteredEdgeFunctions = computed(() => edgeFunctionsList.value.filter((element) => element.initiatorType === 'edge_firewall'))
+  const filteredEdgeFunctions = computed(() =>
+    edgeFunctionsList.value.filter((element) => element.initiatorType === 'edge_firewall')
+  )
 
   const initialValues = ref({
     id: props.edgeFirewallID,
diff --git a/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue b/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
index 537dcb9f0..c9ab3d684 100644
--- a/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
+++ b/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
@@ -14,7 +14,7 @@
   })
 
   const store = useAccountStore()
-  
+
   const changeArgs = (target) => {
     props.edgeFunctionsList.forEach((element) => {
       if (element.value === target.value) {
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index cbb50b50f..77e602535 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -250,7 +250,7 @@
     tuningSelected.value = tuning
     showDetailsOfAttack.value = true
   }
-  
+
   const goToDomain = () => {
     router.push({ name: 'list-domains' })
   }

From bf6b6884f2f8de43493ca31afbe02bdc8194778a Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 24 Jan 2024 14:13:00 -0300
Subject: [PATCH 11/26] feat: rename label from status to active

---
 src/views/WafRules/FormFields/FormFieldsAllowed.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index 3fda23826..e2da6a8f3 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -318,7 +318,7 @@
         <label
           for="status"
           class="text-base"
-          >Status</label
+          >Active</label
         >
       </div>
     </template>

From a1360fe453ff027001a0e7744ab0992072832747 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 24 Jan 2024 14:56:23 -0300
Subject: [PATCH 12/26] feat: add page_size=200

---
 .../list-waf-rules-allowed-service.js                 |  2 +-
 .../waf-rules-services/list-waf-rules-service.js      |  2 +-
 src/templates/list-table-block/no-header.vue          |  2 +-
 .../list-waf-rules-allowed-service.test.js            |  2 +-
 .../waf-rules-services/list-waf-rules-service.test.js |  2 +-
 src/views/WafRules/FormFields/FormFieldsAllowed.vue   |  2 +-
 src/views/WafRules/ListWafRulesTuning.vue             | 11 ++++++++---
 7 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/services/waf-rules-services/list-waf-rules-allowed-service.js b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
index 565c4e481..3715a27b4 100644
--- a/src/services/waf-rules-services/list-waf-rules-allowed-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-allowed-service.js
@@ -3,7 +3,7 @@ import { makeWafRulesAllowedBaseUrl } from './make-waf-rules-allowed-base-url'
 import { optionsRuleIds } from './ruleIdOptions'
 export const listWafRulesAllowedService = async ({ wafId }) => {
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeWafRulesAllowedBaseUrl()}/${wafId}/allowed_rules?page=1&page_size=100`,
+    url: `${makeWafRulesAllowedBaseUrl()}/${wafId}/allowed_rules?page=1&page_size=200`,
     method: 'GET'
   })
 
diff --git a/src/services/waf-rules-services/list-waf-rules-service.js b/src/services/waf-rules-services/list-waf-rules-service.js
index 25206afdb..f2bd55916 100644
--- a/src/services/waf-rules-services/list-waf-rules-service.js
+++ b/src/services/waf-rules-services/list-waf-rules-service.js
@@ -3,7 +3,7 @@ import { makeWafRulesBaseUrl } from './make-waf-rules-base-url'
 
 export const listWafRulesService = async () => {
   let httpResponse = await AxiosHttpClientAdapter.request({
-    url: `${makeWafRulesBaseUrl()}/?page=1&page_size=100`,
+    url: `${makeWafRulesBaseUrl()}/?page=1&page_size=200`,
     method: 'GET'
   })
 
diff --git a/src/templates/list-table-block/no-header.vue b/src/templates/list-table-block/no-header.vue
index 6dc1b044d..e5277edcf 100644
--- a/src/templates/list-table-block/no-header.vue
+++ b/src/templates/list-table-block/no-header.vue
@@ -183,7 +183,7 @@
 
   defineOptions({ name: 'list-table-block' })
 
-  const emit = defineEmits(['on-load-data', 'authorize'])
+  const emit = defineEmits(['on-load-data', 'authorize', 'on-select-data'])
   const props = defineProps({
     columns: {
       type: Array,
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-allowed-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-allowed-service.test.js
index 8d4cf5e55..022c91767 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-allowed-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-allowed-service.test.js
@@ -54,7 +54,7 @@ describe('WafRulesServices', () => {
     await sut({ wafId: 4040 })
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: 'v4/edge/waf/4040/allowed_rules?page=1&page_size=100',
+      url: 'v4/edge/waf/4040/allowed_rules?page=1&page_size=200',
       method: 'GET'
     })
   })
diff --git a/src/tests/services/waf-rules-services/list-waf-rules-service.test.js b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
index 872a7e376..b89940f01 100644
--- a/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
+++ b/src/tests/services/waf-rules-services/list-waf-rules-service.test.js
@@ -78,7 +78,7 @@ describe('WafRulesServices', () => {
     await sut()
 
     expect(requestSpy).toHaveBeenCalledWith({
-      url: 'v3/waf/?page=1&page_size=100',
+      url: 'v3/waf/?page=1&page_size=200',
       method: 'GET'
     })
   })
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index e2da6a8f3..18d64e06d 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -107,7 +107,7 @@
           optionValue="value"
           class="w-full"
           :disabled="props.disabledRuleId"
-          :pt="{ panel: { class: '!w-[300px]' } }"
+          :pt="{ panel: { class: 'sm:!w-[500px]'  }, item: { class: 'whitespace-pre-line my-5 sm:my-3' } }"
         />
       </div>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index 77e602535..83bec62f1 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -57,7 +57,7 @@
   <ActionBarTemplate
     v-if="showActionBar"
     @onSubmit="openDialog"
-    @onCancel="closeDialog"
+    @onCancel="cancelAllowed"
     :submitDisabled="!selectedEvents.length"
     primaryActionLabel="Allow Rules"
   />
@@ -141,7 +141,7 @@
   const selectedEvents = ref([])
   const isLoadingAllowed = ref(null)
   const showDialogAllowRule = ref(false)
-  const cleanSelectData = ref(false)
+  const cleanSelectData = ref(null)
   const showDetailsOfAttack = ref(false)
   const wafRuleId = ref(route.params.id)
   const countriesOptions = ref({ options: [], done: true })
@@ -233,16 +233,21 @@
 
   const selectedItems = (events) => {
     selectedEvents.value = events
+    cleanSelectData.value = null
   }
 
   const openDialog = () => {
     showDialogAllowRule.value = true
   }
 
+  const cancelAllowed = () => {
+    cleanSelectData.value = true
+    selectedEvents.value = []
+  }
+
   const closeDialog = () => {
     isLoadingAllowed.value = null
     showDialogAllowRule.value = false
-    selectedEvents.value = []
     allowedByAttacks.value = []
   }
   const openMoreDetails = (tuning) => {

From b86e1b23df1a7407e2dd7b27a40d3b36004f66c0 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 24 Jan 2024 14:57:42 -0300
Subject: [PATCH 13/26] feat: husky format

---
 src/views/WafRules/FormFields/FormFieldsAllowed.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index 18d64e06d..281c275b8 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -107,7 +107,10 @@
           optionValue="value"
           class="w-full"
           :disabled="props.disabledRuleId"
-          :pt="{ panel: { class: 'sm:!w-[500px]'  }, item: { class: 'whitespace-pre-line my-5 sm:my-3' } }"
+          :pt="{
+            panel: { class: 'sm:!w-[500px]' },
+            item: { class: 'whitespace-pre-line my-5 sm:my-3' }
+          }"
         />
       </div>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">

From 390c57286f75d14c423a8bad6d816cd2626cd215 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Wed, 24 Jan 2024 15:29:19 -0300
Subject: [PATCH 14/26] feat: husky format

---
 .../list-edge-functions-service.js                           | 2 +-
 .../list-edge-functions-service.js                           | 2 +-
 src/templates/list-table-block/index.vue                     | 5 +++--
 .../list-edge-functions-service.test.js                      | 4 ++--
 .../list-functions-service.test.js                           | 4 ++--
 src/views/CliCallback/FailView.vue                           | 3 ++-
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/services/edge-application-functions-services/list-edge-functions-service.js b/src/services/edge-application-functions-services/list-edge-functions-service.js
index 7c1d49246..eda360e89 100644
--- a/src/services/edge-application-functions-services/list-edge-functions-service.js
+++ b/src/services/edge-application-functions-services/list-edge-functions-service.js
@@ -23,7 +23,7 @@ const adapt = (httpResponse) => {
       value: edgeFunction.id,
       label: edgeFunction.name,
       args: edgeFunction.json_args,
-      initiatorType: edgeFunction.initiator_type,
+      initiatorType: edgeFunction.initiator_type
     }
   })
 
diff --git a/src/services/edge-firewall-functions-services/list-edge-functions-service.js b/src/services/edge-firewall-functions-services/list-edge-functions-service.js
index 7c1d49246..eda360e89 100644
--- a/src/services/edge-firewall-functions-services/list-edge-functions-service.js
+++ b/src/services/edge-firewall-functions-services/list-edge-functions-service.js
@@ -23,7 +23,7 @@ const adapt = (httpResponse) => {
       value: edgeFunction.id,
       label: edgeFunction.name,
       args: edgeFunction.json_args,
-      initiatorType: edgeFunction.initiator_type,
+      initiatorType: edgeFunction.initiator_type
     }
   })
 
diff --git a/src/templates/list-table-block/index.vue b/src/templates/list-table-block/index.vue
index fd1d16ad5..05887d1fd 100644
--- a/src/templates/list-table-block/index.vue
+++ b/src/templates/list-table-block/index.vue
@@ -75,9 +75,10 @@
               v-tooltip.top="{ value: 'Hidden Columns', showDelay: 200 }"
             >
             </PrimeButton>
-            <OverlayPanel ref="columnSelectorPanel"
+            <OverlayPanel
+              ref="columnSelectorPanel"
               :pt="{
-                content: {class: 'p-0'}
+                content: { class: 'p-0' }
               }"
             >
               <Listbox
diff --git a/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js b/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js
index 410dc13ca..857928ac4 100644
--- a/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js
+++ b/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js
@@ -62,13 +62,13 @@ describe('EdgeFirewallFunctionsServices', () => {
         label: 'function instance name',
         value: fixtures.functionsInstance.id,
         args: fixtures.functionsInstance.json_args,
-        initiatorType: fixtures.functionsInstance.initiator_type,
+        initiatorType: fixtures.functionsInstance.initiator_type
       },
       {
         label: 'function instance version',
         value: fixtures.functionInstanceWithVersion.id,
         args: fixtures.functionInstanceWithVersion.json_args,
-        initiatorType: fixtures.functionInstanceWithVersion.initiator_type,
+        initiatorType: fixtures.functionInstanceWithVersion.initiator_type
       }
     ])
   })
diff --git a/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
index 9991bc33e..c05456b21 100644
--- a/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
+++ b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
@@ -62,13 +62,13 @@ describe('EdgeFirewallFunctionsServices', () => {
         label: 'function instance name',
         value: fixtures.functionsInstance.id,
         args: fixtures.functionsInstance.json_args,
-        initiatorType: fixtures.functionsInstance.initiator_type,
+        initiatorType: fixtures.functionsInstance.initiator_type
       },
       {
         label: 'function instance version',
         value: fixtures.functionInstanceWithVersion.id,
         args: fixtures.functionInstanceWithVersion.json_args,
-        initiatorType: fixtures.functionInstanceWithVersion.initiator_type,
+        initiatorType: fixtures.functionInstanceWithVersion.initiator_type
       }
     ])
   })
diff --git a/src/views/CliCallback/FailView.vue b/src/views/CliCallback/FailView.vue
index cd2883dcf..f27a560d0 100644
--- a/src/views/CliCallback/FailView.vue
+++ b/src/views/CliCallback/FailView.vue
@@ -16,7 +16,8 @@
     </p>
 
     <p class="mx-8 text-lg text-color-secondary">
-      For assistance, you can refer to the documentation, contact Azion Support, or check the Azion Community.
+      For assistance, you can refer to the documentation, contact Azion Support, or check the Azion
+      Community.
     </p>
   </div>
 </template>

From ad23d18f17dfc2e30e4298d90e27715561039062 Mon Sep 17 00:00:00 2001
From: Eduardo de Cesaro <cesaroeduardo@icloud.com>
Date: Wed, 24 Jan 2024 16:37:45 -0300
Subject: [PATCH 15/26] fix: ajuste de padding no light

---
 .../themes/azion-light/extended-components/_selectbutton.scss  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/assets/themes/scss/themes/azion-light/extended-components/_selectbutton.scss b/src/assets/themes/scss/themes/azion-light/extended-components/_selectbutton.scss
index 11689874e..117484761 100644
--- a/src/assets/themes/scss/themes/azion-light/extended-components/_selectbutton.scss
+++ b/src/assets/themes/scss/themes/azion-light/extended-components/_selectbutton.scss
@@ -1,7 +1,7 @@
 // Custom SelectButton
 .p-selectbutton {
   background: var(--surface-300) !important;
-  padding-inline: 0.75rem !important;
+  padding: 0.3rem;
   border-radius: $borderRadius !important;
 
   .p-button {
@@ -19,7 +19,6 @@
     }
 
     &.p-highlight {
-      padding-inline: 0.75rem !important;
       background: var(--surface-0) !important;
       border-color: none !important;
       font-weight: 600 !important;

From b722000c8941dc80fbda9bffd3a881435794b47d Mon Sep 17 00:00:00 2001
From: aloisio-m-bastian <107002324+aloisio-m-bastian@users.noreply.github.com>
Date: Wed, 24 Jan 2024 17:46:25 -0300
Subject: [PATCH 16/26] [NO-ISSUE] fix: stringfy the arguments json (#616)

* fix: stringfy the arguments json

* fix: update tests
---
 .../list-edge-functions-service.js                        | 4 ++--
 .../list-edge-functions-service.js                        | 4 ++--
 src/templates/list-table-block/index.vue                  | 5 +++--
 .../list-edge-functions-service.test.js                   | 8 ++++----
 .../list-functions-service.test.js                        | 8 ++++----
 src/views/CliCallback/FailView.vue                        | 3 ++-
 .../FormFields/FormFieldsEdgeApplicationsFunctions.vue    | 2 +-
 7 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/services/edge-application-functions-services/list-edge-functions-service.js b/src/services/edge-application-functions-services/list-edge-functions-service.js
index 7c1d49246..6286e208e 100644
--- a/src/services/edge-application-functions-services/list-edge-functions-service.js
+++ b/src/services/edge-application-functions-services/list-edge-functions-service.js
@@ -22,8 +22,8 @@ const adapt = (httpResponse) => {
     return {
       value: edgeFunction.id,
       label: edgeFunction.name,
-      args: edgeFunction.json_args,
-      initiatorType: edgeFunction.initiator_type,
+      args: JSON.stringify(edgeFunction.json_args),
+      initiatorType: edgeFunction.initiator_type
     }
   })
 
diff --git a/src/services/edge-firewall-functions-services/list-edge-functions-service.js b/src/services/edge-firewall-functions-services/list-edge-functions-service.js
index 7c1d49246..6286e208e 100644
--- a/src/services/edge-firewall-functions-services/list-edge-functions-service.js
+++ b/src/services/edge-firewall-functions-services/list-edge-functions-service.js
@@ -22,8 +22,8 @@ const adapt = (httpResponse) => {
     return {
       value: edgeFunction.id,
       label: edgeFunction.name,
-      args: edgeFunction.json_args,
-      initiatorType: edgeFunction.initiator_type,
+      args: JSON.stringify(edgeFunction.json_args),
+      initiatorType: edgeFunction.initiator_type
     }
   })
 
diff --git a/src/templates/list-table-block/index.vue b/src/templates/list-table-block/index.vue
index fd1d16ad5..05887d1fd 100644
--- a/src/templates/list-table-block/index.vue
+++ b/src/templates/list-table-block/index.vue
@@ -75,9 +75,10 @@
               v-tooltip.top="{ value: 'Hidden Columns', showDelay: 200 }"
             >
             </PrimeButton>
-            <OverlayPanel ref="columnSelectorPanel"
+            <OverlayPanel
+              ref="columnSelectorPanel"
               :pt="{
-                content: {class: 'p-0'}
+                content: { class: 'p-0' }
               }"
             >
               <Listbox
diff --git a/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js b/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js
index 410dc13ca..bafd5d180 100644
--- a/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js
+++ b/src/tests/services/edge-application-functions-services/list-edge-functions-service.test.js
@@ -61,14 +61,14 @@ describe('EdgeFirewallFunctionsServices', () => {
       {
         label: 'function instance name',
         value: fixtures.functionsInstance.id,
-        args: fixtures.functionsInstance.json_args,
-        initiatorType: fixtures.functionsInstance.initiator_type,
+        args: '{}',
+        initiatorType: fixtures.functionsInstance.initiator_type
       },
       {
         label: 'function instance version',
         value: fixtures.functionInstanceWithVersion.id,
-        args: fixtures.functionInstanceWithVersion.json_args,
-        initiatorType: fixtures.functionInstanceWithVersion.initiator_type,
+        args: '{}',
+        initiatorType: fixtures.functionInstanceWithVersion.initiator_type
       }
     ])
   })
diff --git a/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
index 9991bc33e..109c66fac 100644
--- a/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
+++ b/src/tests/services/edge-firewall-functions-services/list-functions-service.test.js
@@ -61,14 +61,14 @@ describe('EdgeFirewallFunctionsServices', () => {
       {
         label: 'function instance name',
         value: fixtures.functionsInstance.id,
-        args: fixtures.functionsInstance.json_args,
-        initiatorType: fixtures.functionsInstance.initiator_type,
+        args: '{}',
+        initiatorType: fixtures.functionsInstance.initiator_type
       },
       {
         label: 'function instance version',
         value: fixtures.functionInstanceWithVersion.id,
-        args: fixtures.functionInstanceWithVersion.json_args,
-        initiatorType: fixtures.functionInstanceWithVersion.initiator_type,
+        args: '{}',
+        initiatorType: fixtures.functionInstanceWithVersion.initiator_type
       }
     ])
   })
diff --git a/src/views/CliCallback/FailView.vue b/src/views/CliCallback/FailView.vue
index cd2883dcf..f27a560d0 100644
--- a/src/views/CliCallback/FailView.vue
+++ b/src/views/CliCallback/FailView.vue
@@ -16,7 +16,8 @@
     </p>
 
     <p class="mx-8 text-lg text-color-secondary">
-      For assistance, you can refer to the documentation, contact Azion Support, or check the Azion Community.
+      For assistance, you can refer to the documentation, contact Azion Support, or check the Azion
+      Community.
     </p>
   </div>
 </template>
diff --git a/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue b/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
index 537dcb9f0..c9ab3d684 100644
--- a/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
+++ b/src/views/EdgeFirewallFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
@@ -14,7 +14,7 @@
   })
 
   const store = useAccountStore()
-  
+
   const changeArgs = (target) => {
     props.edgeFunctionsList.forEach((element) => {
       if (element.value === target.value) {

From ee29de8b8be5dd966d72bfc8be612f29ab1241df Mon Sep 17 00:00:00 2001
From: "Cicero, Feijo" <cicero.feijo@gmail.com>
Date: Wed, 24 Jan 2024 18:05:59 -0300
Subject: [PATCH 17/26] chore: indent function args on monaco

---
 .../list-edge-functions-service.js                              | 2 +-
 .../list-edge-functions-service.js                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/services/edge-application-functions-services/list-edge-functions-service.js b/src/services/edge-application-functions-services/list-edge-functions-service.js
index 6286e208e..4f7e051b1 100644
--- a/src/services/edge-application-functions-services/list-edge-functions-service.js
+++ b/src/services/edge-application-functions-services/list-edge-functions-service.js
@@ -22,7 +22,7 @@ const adapt = (httpResponse) => {
     return {
       value: edgeFunction.id,
       label: edgeFunction.name,
-      args: JSON.stringify(edgeFunction.json_args),
+      args: JSON.stringify(edgeFunction.json_args, null, '\t'),
       initiatorType: edgeFunction.initiator_type
     }
   })
diff --git a/src/services/edge-firewall-functions-services/list-edge-functions-service.js b/src/services/edge-firewall-functions-services/list-edge-functions-service.js
index 6286e208e..4f7e051b1 100644
--- a/src/services/edge-firewall-functions-services/list-edge-functions-service.js
+++ b/src/services/edge-firewall-functions-services/list-edge-functions-service.js
@@ -22,7 +22,7 @@ const adapt = (httpResponse) => {
     return {
       value: edgeFunction.id,
       label: edgeFunction.name,
-      args: JSON.stringify(edgeFunction.json_args),
+      args: JSON.stringify(edgeFunction.json_args, null, '\t'),
       initiatorType: edgeFunction.initiator_type
     }
   })

From 110ba1d4ec5cfec24a79e2bb430cdd75c1dfb382 Mon Sep 17 00:00:00 2001
From: "bruna.andrade" <bruna.andrade@azion.com>
Date: Wed, 24 Jan 2024 18:51:38 -0300
Subject: [PATCH 18/26] feat: add edge function descriptions

---
 .../FormFieldsEdgeApplicationsFunctions.vue           | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue b/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
index 15678f64f..4830cb751 100644
--- a/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
+++ b/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
@@ -30,7 +30,6 @@
       formatOnPaste: true
     }
   })
-
   const { value: name } = useField('name')
   const { value: edgeFunctionID } = useField('edgeFunctionID')
   const { value: args } = useField('args')
@@ -44,7 +43,7 @@
   <FormHorizontal
     :isDrawer="true"
     title="General"
-    description="Instantiate an edge function within your edge application."
+    description="Instantiate a serverless function created with Edge Functions within the edge application. Use Rules Engine to activate the function."
   >
     <template #inputs>
       <div class="flex flex-col sm:max-w-lg w-full gap-2">
@@ -52,6 +51,7 @@
           label="Name *"
           name="name"
           v-model="name"
+          description="Give a unique and descriptive name to identify the function instance."
         />
       </div>
     </template>
@@ -59,8 +59,8 @@
 
   <FormHorizontal
     :isDrawer="true"
-    title="Function Instanced"
-    description="Description. Informar que para criar novas functions para serem instanciadas, o usuário precisa ir em Edge Functions."
+    title="Edge Function"
+    description="Select the edge function and pass the required arguments. The function can't be modified at this stage."
   >
     <template #inputs>
       <div class="flex w-80 flex-col gap-2 sm:max-w-lg max-sm:w-full">
@@ -94,6 +94,9 @@
           :options="editorOptions"
           class="min-h-[200px] overflow-clip surface-border border rounded-md"
         />
+        <small class="text-color-secondary text-sm">
+          Customize the arguments in JSON format. Once set, they can be called in code using <code>event.args("arg_name")</code>.
+        </small>
       </div>
     </template>
   </FormHorizontal>

From 23ec4ea330d060f71588cae71dea78671a33f118 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 25 Jan 2024 09:37:30 -0300
Subject: [PATCH 19/26] feat: fix layout

---
 src/views/WafRules/Dialog/index.vue           |  2 +-
 src/views/WafRules/Drawer/index.vue           | 20 +++++++-------
 .../WafRules/FormFields/FormFieldsAllowed.vue | 27 ++++++++++---------
 src/views/WafRules/ListWafRulesTuning.vue     |  2 +-
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/views/WafRules/Dialog/index.vue b/src/views/WafRules/Dialog/index.vue
index 5cf3c4a75..9323ae531 100644
--- a/src/views/WafRules/Dialog/index.vue
+++ b/src/views/WafRules/Dialog/index.vue
@@ -76,7 +76,7 @@
         <div class="text-secondary-color text-sm mb-5">
           For each URI, this action will create a separate rule for each possible attack.
         </div>
-        <div class="text-color font-semibold text-sm">
+        <div class="text-color font-semibold text-sm mb-2">
           To confirm, enter the reason for allowing these rules or provide additional information in
           the box below:
         </div>
diff --git a/src/views/WafRules/Drawer/index.vue b/src/views/WafRules/Drawer/index.vue
index d339c1a48..b09be5da0 100644
--- a/src/views/WafRules/Drawer/index.vue
+++ b/src/views/WafRules/Drawer/index.vue
@@ -115,45 +115,45 @@
     </template>
     <div class="flex flex-col p-8 gap-8">
       <div
-        class="flex max-w-screen-2xl mx-auto gap-8 w-full surface-section rounded-md border surface-border px-8 py-8 flex-wrap min-w-[2rem]"
+        class="flex max-w-screen-2xl mx-auto gap-4 w-full surface-section rounded-md border surface-border px-8 py-8 flex-wrap min-w-[2rem]"
       >
         <div class="flex-col justify-center items-start gap-3 flex">
           <div class="text-color text-xl font-medium">
             {{ tuningObject.ruleIdDescription }}
           </div>
-          <div class="justify-start items-center gap-1 inline-flex">
+          <div class="justify-start items-center gap-1 inline-flex text-color-secondary">
             <i class="pi pi-calendar"></i> {{ time }}
           </div>
         </div>
         <Divider></Divider>
         <div class="flex w-full gap-8">
           <div class="w-1/2 flex flex-col gap-3">
-            <div class="flex justify-between w-full">
+            <div class="flex justify-between w-full gap-3">
               <span class="w-1/2 text-color">Domain</span>
               <div class="flex flex-col w-1/2">
                 <span
-                  class="w-full text-color-secondary"
+                  class="w-full text-color-secondary whitespace-pre-line"
                   v-for="(domain, index) in props.domains"
                   :key="index"
                   >{{ domain }}
                 </span>
               </div>
             </div>
-            <div class="flex justify-between w-full">
+            <div class="flex justify-between w-full gap-3 ">
               <span class="w-1/2 text-color">Path</span>
-              <span class="w-1/2 text-color-secondary"></span>
+              <span class="h-auto w-1/2 text-color-secondary"></span>
             </div>
-            <div class="flex justify-between w-full">
+            <div class="flex justify-between w-full gap-3">
               <span class="w-1/2 text-color">IP Address</span>
               <span class="w-1/2 text-color-secondary"></span>
             </div>
           </div>
           <div class="w-1/2 flex flex-col gap-3">
-            <div class="flex justify-between w-full">
+            <div class="flex justify-between w-full gap-3">
               <span class="w-1/2 text-color">Network List</span>
               <span class="w-1/2 text-color-secondary"></span>
             </div>
-            <div class="flex justify-between w-full">
+            <div class="flex justify-between w-full gap-3">
               <span class="w-1/2 text-color">Country</span>
               <span class="w-1/2 text-color-secondary"></span>
             </div>
@@ -184,7 +184,7 @@
               :key="index"
               :class="{ 'border-orange-500': checkActiveBorder(attack) }"
             >
-              <div class="flex w-full gap-2 items-start">
+              <div class="flex w-full gap-3 items-start">
                 <CheckboxPrime
                   v-model="selectedAttack"
                   name="attack.ruleID"
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index 281c275b8..ed6ff6b82 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -96,7 +96,7 @@
       <div class="flex flex-col w-full sm:max-w-xs gap-2">
         <label
           for="ruleid"
-          class="text-color text-base font-medium"
+          class="text-color text-sm font-medium"
           >Rule ID *</label
         >
         <Dropdown
@@ -165,6 +165,7 @@
               severity="secondary"
               icon="pi pi-trash"
               aria-label="Trash"
+              v-tooltip.bottom="{ value: 'Delete', showDelay: 200 }"
               @click="deleteMatchZone(index)"
             />
           </div>
@@ -172,7 +173,7 @@
           <div class="flex flex-col w-full sm:max-w-xs gap-2">
             <label
               for="ruleid"
-              class="text-color text-base font-medium"
+              class="text-color text-sm font-medium"
               >Match Zones *</label
             >
             <Dropdown
@@ -189,7 +190,7 @@
             v-if="showConditionalInputs(matchZones[index].zone)"
           >
             <div class="flex flex-col sm:max-w-lg w-full gap-2">
-              <label class="text-color text-base font-medium">Field </label>
+              <label class="text-color text-sm font-medium">Field </label>
               <InputText
                 v-model="matchZones[index].zone_input"
                 type="text"
@@ -200,7 +201,7 @@
             class="flex flex-col gap-2"
             v-if="showMatchOnInputs(matchZones[index].zone)"
           >
-            <label class="text-color text-base font-medium">Matches On *</label>
+            <label class="text-color text-sm font-medium">Matches On *</label>
             <div class="flex flex-col gap-3">
               <Card
                 :pt="{
@@ -273,14 +274,16 @@
       </div>
 
       <Divider type="solid"></Divider>
-      <PrimeButton
-        severity="secondary"
-        icon="pi pi-plus"
-        label="New Match Zone"
-        class="sm:w-1/3"
-        outlined
-        @click="addMatchZones"
-      />
+      <div>
+        <PrimeButton
+          severity="secondary"
+          icon="pi pi-plus"
+          label="New Match Zone"
+          class="sm:w-auto"
+          outlined
+          @click="addMatchZones"
+        />
+      </div>
     </template>
   </FormHorizontal>
   <FormHorizontal
diff --git a/src/views/WafRules/ListWafRulesTuning.vue b/src/views/WafRules/ListWafRulesTuning.vue
index 83bec62f1..0e535d2d6 100644
--- a/src/views/WafRules/ListWafRulesTuning.vue
+++ b/src/views/WafRules/ListWafRulesTuning.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-6 mt-4">
+  <div class="flex gap-6 mt-4 flex-col sm:flex-row">
     <Dropdown
       optionValue="value"
       optionLabel="name"

From fb5e7eceeb4a471b7ddd54a7baf1600319da4a3f Mon Sep 17 00:00:00 2001
From: Bru Andrade <119969414+bru-andrade@users.noreply.github.com>
Date: Thu, 25 Jan 2024 09:52:15 -0300
Subject: [PATCH 20/26] Apply suggestions from code review

---
 .../FormFields/FormFieldsEdgeApplicationsFunctions.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue b/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
index 4830cb751..b4748cea2 100644
--- a/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
+++ b/src/views/EdgeApplicationsFunctions/FormFields/FormFieldsEdgeApplicationsFunctions.vue
@@ -60,7 +60,7 @@
   <FormHorizontal
     :isDrawer="true"
     title="Edge Function"
-    description="Select the edge function and pass the required arguments. The function can't be modified at this stage."
+    description="Select an existing edge function and customize the arguments. You can only instantiate edge functions previously created in the Edge Functions module."
   >
     <template #inputs>
       <div class="flex w-80 flex-col gap-2 sm:max-w-lg max-sm:w-full">

From a6ef2b2d8fff5b388483125d5435e14cefff62d4 Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Thu, 25 Jan 2024 10:30:48 -0300
Subject: [PATCH 21/26] [ENG-28461] feat: add name edge application to list
 domains (#619)

* [ENG-28461] feat: add name edge application to list domains

* [ENG-28461] fix: adjust test unit
---
 .../domains-services/list-domains-service.js  | 25 ++++++++++++++++---
 .../list-domains-service.test.js              | 24 ++++++++++++++----
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/services/domains-services/list-domains-service.js b/src/services/domains-services/list-domains-service.js
index 6cb639272..79567c099 100644
--- a/src/services/domains-services/list-domains-service.js
+++ b/src/services/domains-services/list-domains-service.js
@@ -1,5 +1,7 @@
 import { AxiosHttpClientAdapter, parseHttpResponse } from '../axios/AxiosHttpClientAdapter'
 import { makeDomainsBaseUrl } from './make-domains-base-url'
+import { listEdgeApplicationsService } from '@/services/edge-application-services/list-edge-applications-service'
+
 export const listDomainsService = async ({
   orderBy = 'name',
   sort = 'asc',
@@ -12,12 +14,14 @@ export const listDomainsService = async ({
     method: 'GET'
   })
 
-  httpResponse = adapt(httpResponse)
+  httpResponse = await adapt(httpResponse)
 
   return parseHttpResponse(httpResponse)
 }
 
-const adapt = (httpResponse) => {
+const adapt = async (httpResponse) => {
+  const edgeApplications = await listEdgeApplications()
+
   const parsedDomains = httpResponse.body.results?.map((domain) => {
     const cnames = domain.cnames.map((cname) => cname)?.join(',')
     return {
@@ -37,7 +41,7 @@ const adapt = (httpResponse) => {
       },
       cnames: cnames,
       edgeFirewallId: domain.edge_firewall_id,
-      edgeApplicationName: domain.name,
+      edgeApplicationName: getEdgeApplication(edgeApplications, domain.edge_application_id),
       digitalCertificateId: domain.digital_certificate_id
     }
   })
@@ -57,3 +61,18 @@ const makeSearchParams = ({ orderBy, sort, page, pageSize }) => {
 
   return searchParams
 }
+
+const listEdgeApplications = async () => {
+  const edgeApplications = await listEdgeApplicationsService({})
+
+  return edgeApplications.map((edgeApp) => ({ name: edgeApp.name, id: edgeApp.id }))
+}
+
+const getEdgeApplication = (edgeApplications, edge_application_id) => {
+  const edgeApplication = edgeApplications.filter((edgeapp) => edgeapp.id === edge_application_id)
+
+  if (edgeApplication.length > 0) {
+    return edgeApplication[0].name
+  }
+  return ''
+}
diff --git a/src/tests/services/domains-services/list-domains-service.test.js b/src/tests/services/domains-services/list-domains-service.test.js
index 013a6789f..43d17e4ba 100644
--- a/src/tests/services/domains-services/list-domains-service.test.js
+++ b/src/tests/services/domains-services/list-domains-service.test.js
@@ -9,7 +9,8 @@ const fixtures = {
     domain_name: 'domain A',
     cnames: ['CName 1', 'CName 2'],
     is_active: true,
-    digital_certificate_id: '862026'
+    digital_certificate_id: '862026',
+    edge_application_id: 'ea1234'
   },
   disabledDomainMock: {
     id: '4132123',
@@ -17,8 +18,13 @@ const fixtures = {
     domain_name: 'domain B',
     cnames: ['CName 3', 'CName 4'],
     is_active: false,
-    digital_certificate_id: '69870'
-  }
+    digital_certificate_id: '69870',
+    edge_application_id: 'ea5678'
+  },
+  edgeApplicationsMock: [
+    { id: 'ea1234', name: 'Edge App X', last_modified: new Date() },
+    { id: 'ea5678', name: 'Edge App Y', last_modified: new Date() }
+  ]
 }
 
 const makeSut = () => {
@@ -34,7 +40,11 @@ describe('DomainsServices', () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: { results: [] }
+    }).mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixtures.edgeApplicationsMock }
     })
+
     const { sut } = makeSut()
     const version = 'v3'
     await sut({})
@@ -49,7 +59,11 @@ describe('DomainsServices', () => {
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
       body: { results: [fixtures.domainMock, fixtures.disabledDomainMock] }
+    }).mockResolvedValueOnce({
+      statusCode: 200,
+      body: { results: fixtures.edgeApplicationsMock }
     })
+
     const { sut } = makeSut()
 
     const result = await sut({})
@@ -66,7 +80,7 @@ describe('DomainsServices', () => {
           content: 'Active',
           severity: 'success'
         },
-        edgeApplicationName: fixtures.domainMock.name,
+        edgeApplicationName: fixtures.edgeApplicationsMock[0].name,
         digitalCertificateId: fixtures.domainMock.digital_certificate_id
       },
       {
@@ -80,7 +94,7 @@ describe('DomainsServices', () => {
           content: 'Inactive',
           severity: 'danger'
         },
-        edgeApplicationName: fixtures.disabledDomainMock.name,
+        edgeApplicationName: fixtures.edgeApplicationsMock[1].name,
         digitalCertificateId: fixtures.disabledDomainMock.digital_certificate_id
       }
     ])

From 6cc308006d9715b6c8422cb71f73aa2f493d6c3d Mon Sep 17 00:00:00 2001
From: lucasmendes21 <lucas.mendes@azion.com>
Date: Thu, 25 Jan 2024 15:08:07 -0300
Subject: [PATCH 22/26] [ENG-28462] fix: add filter in column status two list
 domains

---
 src/services/domains-services/list-domains-service.js         | 1 +
 .../services/domains-services/list-domains-service.test.js    | 4 ++++
 src/views/Domains/ListView.vue                                | 1 +
 3 files changed, 6 insertions(+)

diff --git a/src/services/domains-services/list-domains-service.js b/src/services/domains-services/list-domains-service.js
index 79567c099..e9c0d29c4 100644
--- a/src/services/domains-services/list-domains-service.js
+++ b/src/services/domains-services/list-domains-service.js
@@ -36,6 +36,7 @@ const adapt = async (httpResponse) => {
             content: 'Inactive',
             severity: 'danger'
           },
+        activeSort: domain.is_active,
       domainName: {
         content: domain.domain_name
       },
diff --git a/src/tests/services/domains-services/list-domains-service.test.js b/src/tests/services/domains-services/list-domains-service.test.js
index 43d17e4ba..af7e25628 100644
--- a/src/tests/services/domains-services/list-domains-service.test.js
+++ b/src/tests/services/domains-services/list-domains-service.test.js
@@ -9,6 +9,7 @@ const fixtures = {
     domain_name: 'domain A',
     cnames: ['CName 1', 'CName 2'],
     is_active: true,
+    activeSort: true,
     digital_certificate_id: '862026',
     edge_application_id: 'ea1234'
   },
@@ -18,6 +19,7 @@ const fixtures = {
     domain_name: 'domain B',
     cnames: ['CName 3', 'CName 4'],
     is_active: false,
+    activeSort: false,
     digital_certificate_id: '69870',
     edge_application_id: 'ea5678'
   },
@@ -80,6 +82,7 @@ describe('DomainsServices', () => {
           content: 'Active',
           severity: 'success'
         },
+        activeSort: true,
         edgeApplicationName: fixtures.edgeApplicationsMock[0].name,
         digitalCertificateId: fixtures.domainMock.digital_certificate_id
       },
@@ -94,6 +97,7 @@ describe('DomainsServices', () => {
           content: 'Inactive',
           severity: 'danger'
         },
+        activeSort: false,
         edgeApplicationName: fixtures.edgeApplicationsMock[1].name,
         digitalCertificateId: fixtures.disabledDomainMock.digital_certificate_id
       }
diff --git a/src/views/Domains/ListView.vue b/src/views/Domains/ListView.vue
index e1204d79b..aaabe7c9a 100644
--- a/src/views/Domains/ListView.vue
+++ b/src/views/Domains/ListView.vue
@@ -92,6 +92,7 @@
       },
       {
         field: 'active',
+        sortField: 'activeSort',
         header: 'Status',
         type: 'component',
         component: (columnData) =>

From 7fefe24be25c0b739114413424d0cb714ac359ed Mon Sep 17 00:00:00 2001
From: lucasmendes21 <lucas.mendes@azion.com>
Date: Thu, 25 Jan 2024 15:46:16 -0300
Subject: [PATCH 23/26] [ENG-28496] fix: status field was always enabled even
 when it was disabled at creation

---
 src/services/credential-services/create-credential-service.js  | 2 +-
 .../credentials-services/create-credential-service.test.js     | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/services/credential-services/create-credential-service.js b/src/services/credential-services/create-credential-service.js
index e3323e298..1d3b15fff 100644
--- a/src/services/credential-services/create-credential-service.js
+++ b/src/services/credential-services/create-credential-service.js
@@ -69,6 +69,6 @@ const adapt = (payload) => {
   return {
     name: payload.name,
     description: payload.description,
-    status: true
+    status: payload.status
   }
 }
diff --git a/src/tests/services/credentials-services/create-credential-service.test.js b/src/tests/services/credentials-services/create-credential-service.test.js
index 0ea52dcd5..74233930b 100644
--- a/src/tests/services/credentials-services/create-credential-service.test.js
+++ b/src/tests/services/credentials-services/create-credential-service.test.js
@@ -7,7 +7,8 @@ const fixtures = {
   basic: {
     name: 'Cred A',
     description: 'Some description',
-    token: 'test-token'
+    token: 'test-token',
+    status: true
   }
 }
 

From db56957ea1202fb0aa6ad8f5007ef45148e4c4b9 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 25 Jan 2024 15:46:21 -0300
Subject: [PATCH 24/26] feat: add selectionMode multiple

---
 src/templates/list-table-block/no-header.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/templates/list-table-block/no-header.vue b/src/templates/list-table-block/no-header.vue
index e5277edcf..6ae474fcc 100644
--- a/src/templates/list-table-block/no-header.vue
+++ b/src/templates/list-table-block/no-header.vue
@@ -7,6 +7,7 @@
         scrollable
         removableSort
         :value="data"
+        selectionMode="multiple"
         dataKey="id"
         v-model:filters="filters"
         :paginator="showPagination"

From 9ee74d276d8ee6a264e6427cf61f181509411899 Mon Sep 17 00:00:00 2001
From: "Cicero, Feijo" <cicero.feijo@gmail.com>
Date: Thu, 25 Jan 2024 15:46:43 -0300
Subject: [PATCH 25/26] chore: update package version for deploy

---
 package.json                                  |  2 +-
 .../domains-services/list-domains-service.js  |  2 +-
 .../list-domains-service.test.js              | 33 +++++++++++--------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 671064e31..7865e15a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "azion-platform-kit",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "private": true,
   "type": "module",
   "repository": {
diff --git a/src/services/domains-services/list-domains-service.js b/src/services/domains-services/list-domains-service.js
index e9c0d29c4..0bb4576ae 100644
--- a/src/services/domains-services/list-domains-service.js
+++ b/src/services/domains-services/list-domains-service.js
@@ -36,7 +36,7 @@ const adapt = async (httpResponse) => {
             content: 'Inactive',
             severity: 'danger'
           },
-        activeSort: domain.is_active,
+      activeSort: domain.is_active,
       domainName: {
         content: domain.domain_name
       },
diff --git a/src/tests/services/domains-services/list-domains-service.test.js b/src/tests/services/domains-services/list-domains-service.test.js
index af7e25628..a4adf4e7c 100644
--- a/src/tests/services/domains-services/list-domains-service.test.js
+++ b/src/tests/services/domains-services/list-domains-service.test.js
@@ -39,13 +39,16 @@ const makeSut = () => {
 
 describe('DomainsServices', () => {
   it('should call api with correct params', async () => {
-    const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 200,
-      body: { results: [] }
-    }).mockResolvedValueOnce({
-      statusCode: 200,
-      body: { results: fixtures.edgeApplicationsMock }
-    })
+    const requestSpy = vi
+      .spyOn(AxiosHttpClientAdapter, 'request')
+      .mockResolvedValueOnce({
+        statusCode: 200,
+        body: { results: [] }
+      })
+      .mockResolvedValueOnce({
+        statusCode: 200,
+        body: { results: fixtures.edgeApplicationsMock }
+      })
 
     const { sut } = makeSut()
     const version = 'v3'
@@ -58,13 +61,15 @@ describe('DomainsServices', () => {
   })
 
   it('should parsed correctly all returned domains', async () => {
-    vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
-      statusCode: 200,
-      body: { results: [fixtures.domainMock, fixtures.disabledDomainMock] }
-    }).mockResolvedValueOnce({
-      statusCode: 200,
-      body: { results: fixtures.edgeApplicationsMock }
-    })
+    vi.spyOn(AxiosHttpClientAdapter, 'request')
+      .mockResolvedValueOnce({
+        statusCode: 200,
+        body: { results: [fixtures.domainMock, fixtures.disabledDomainMock] }
+      })
+      .mockResolvedValueOnce({
+        statusCode: 200,
+        body: { results: fixtures.edgeApplicationsMock }
+      })
 
     const { sut } = makeSut()
 

From 941911cbd594fe8f50ac4d7ee13d77103ee92ea1 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Thu, 25 Jan 2024 16:00:01 -0300
Subject: [PATCH 26/26] feat: fix warning code

---
 src/views/WafRules/Drawer/index.vue                 |  2 +-
 src/views/WafRules/FormFields/FormFieldsAllowed.vue | 10 ++--------
 src/views/WafRules/ListView.vue                     |  2 +-
 src/views/WafRules/ListWafRulesAllowed.vue          |  2 +-
 4 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/views/WafRules/Drawer/index.vue b/src/views/WafRules/Drawer/index.vue
index b09be5da0..3c7157a3b 100644
--- a/src/views/WafRules/Drawer/index.vue
+++ b/src/views/WafRules/Drawer/index.vue
@@ -139,7 +139,7 @@
                 </span>
               </div>
             </div>
-            <div class="flex justify-between w-full gap-3 ">
+            <div class="flex justify-between w-full gap-3">
               <span class="w-1/2 text-color">Path</span>
               <span class="h-auto w-1/2 text-color-secondary"></span>
             </div>
diff --git a/src/views/WafRules/FormFields/FormFieldsAllowed.vue b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
index ed6ff6b82..51bad208f 100644
--- a/src/views/WafRules/FormFields/FormFieldsAllowed.vue
+++ b/src/views/WafRules/FormFields/FormFieldsAllowed.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { ref, watch } from 'vue'
+  import { ref } from 'vue'
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
   import InputSwitch from 'primevue/inputswitch'
   import Dropdown from 'primevue/dropdown'
@@ -43,9 +43,7 @@
     { name: 'Request Header', value: 'request_header' }
   ])
 
-  const ruleIdOption = ref([])
-
-  ruleIdOption.value = props.optionsRuleIds
+  const ruleIdOption = ref(props.optionsRuleIds)
 
   const addMatchZones = () => {
     const newArray = matchZones.value
@@ -80,10 +78,6 @@
   const deleteMatchZone = (index) => {
     matchZones.value.splice(index, 1)
   }
-
-  watch(props.getRuleIdOptions, (value) => {
-    ruleIdOption.value = value
-  })
 </script>
 
 <template>
diff --git a/src/views/WafRules/ListView.vue b/src/views/WafRules/ListView.vue
index 321aa99e2..b20c5df04 100644
--- a/src/views/WafRules/ListView.vue
+++ b/src/views/WafRules/ListView.vue
@@ -19,7 +19,7 @@
         v-else
         title="No waf rules added"
         description="Create your first waf rules."
-        createButtonLabel="WAF Rule"
+        createButtonLabel="WAF Rules"
         createPagePath="waf/create"
         :documentationService="props.documentationService"
       >
diff --git a/src/views/WafRules/ListWafRulesAllowed.vue b/src/views/WafRules/ListWafRulesAllowed.vue
index 87e014e74..e21e55fdd 100644
--- a/src/views/WafRules/ListWafRulesAllowed.vue
+++ b/src/views/WafRules/ListWafRulesAllowed.vue
@@ -99,7 +99,7 @@
   const showCreateWafRulesAllowedDrawer = ref(false)
   const listAllowedRef = ref('')
 
-  const emit = defineEmits(['update:visible', 'attack-on'])
+  const emit = defineEmits(['update:visible', 'attack-on', 'handle-go-to-tuning'])
 
   const props = defineProps({
     listWafRulesAllowedService: {