From 4db58c57c58eeadf56843876ef9a40ac7889e5e8 Mon Sep 17 00:00:00 2001
From: robsongajunior <robson.ga.junior@gmail.com>
Date: Wed, 25 Sep 2024 12:05:26 -0300
Subject: [PATCH 01/11] fix: link variable name

---
 src/services/compare-with-azion/get-test.js   |  16 +-
 src/views/CompareWithAzion/CompareView.vue    | 224 ++++++++++--------
 .../CompareWithAzion/blocks/data-block.vue    |  44 ++++
 .../CompareWithAzion/blocks/grade-block.vue   |   2 +-
 .../CompareWithAzion/blocks/retry-message.vue | 103 ++++++++
 .../CompareWithAzion/utils/convert-ms-sec.js  |   2 +-
 .../utils/result-data-parse.js                | 114 +--------
 7 files changed, 278 insertions(+), 227 deletions(-)
 create mode 100644 src/views/CompareWithAzion/blocks/data-block.vue
 create mode 100644 src/views/CompareWithAzion/blocks/retry-message.vue

diff --git a/src/services/compare-with-azion/get-test.js b/src/services/compare-with-azion/get-test.js
index de901f4a0..037178377 100644
--- a/src/services/compare-with-azion/get-test.js
+++ b/src/services/compare-with-azion/get-test.js
@@ -2,14 +2,7 @@ import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import makeCompareWithAzionApi from '../axios/makeCompareWithAzionApi'
 import { makeWebpagetestBaseUrl } from './make-base-url'
 
-export const getTestById = async (id, clientId = undefined) => {
-  if (!id) {
-    return {
-      status: 400,
-      error: `Invalid testId param.`
-    }
-  }
-
+export const getTestById = async (id, clientId) => {
   let url = `${makeWebpagetestBaseUrl()}/db/test?id=${id}`
 
   if (clientId) {
@@ -28,13 +21,6 @@ export const getTestById = async (id, clientId = undefined) => {
 }
 
 export const getAllTestsByClientId = async (clientId) => {
-  if (!clientId) {
-    return {
-      status: 400,
-      error: `Invalid clientId param.`
-    }
-  }
-
   let httpResponse = await AxiosHttpClientAdapter.request(
     {
       url: `${makeWebpagetestBaseUrl()}/db/all-clientid-tests?clientId=${clientId}`,
diff --git a/src/views/CompareWithAzion/CompareView.vue b/src/views/CompareWithAzion/CompareView.vue
index c07fdafe3..e8d6871fc 100644
--- a/src/views/CompareWithAzion/CompareView.vue
+++ b/src/views/CompareWithAzion/CompareView.vue
@@ -1,81 +1,60 @@
 <template>
   <div class="px-4">
-    <ContentBlock data-testid="view-azion-compare">
+    <ContentBlock data-testid="view-compare-with-azion-test">
       <template #heading>
-        <PageHeadingBlock
-          pageTitle=""
-          data-testid="view-azion-compare-heading"
-        />
+        <PageHeadingBlock data-testid="view-compare-with-azion-test-heading" />
       </template>
 
       <template #content>
-        <Message
-          v-if="generalError"
-          severity="error"
-          :closable="false"
-        >
-          {{ generalError }}
-        </Message>
-
         <div
-          v-if="!generalError"
-          class="grid md:grid-cols-2 gap-10"
+          class="w-fit"
+          v-if="hasGeneralErrorMessage()"
         >
+          <RetryMessage
+            :timer="45"
+            :data="generalError"
+            @onRetry="() => {
+              resetGeneralErrorMessage()
+              init()
+            }"
+          />
+        </div>
+        <div v-else class="grid md:grid-cols-2 gap-10">
           <div>
-            <Message
-              v-if="errorData"
-              severity="error"
-              :closable="false"
-            >
-              {{ errorData }}
-            </Message>
-
-            <div v-if="!errorData">
-              <h2 class="text-3xl">Current Performance</h2>
-
-              <div class="mt-12">
-                <h3 class="text-xl mb-8">General</h3>
-                <ResumeBlock :data="resumeData" />
-              </div>
-
-              <div class="mt-12">
-                <h3 class="text-xl mb-8">Page Performance</h3>
-                <GradeBlock :items="gradeData" />
-              </div>
-
-              <div class="mt-12">
-                <h3 class="text-xl mb-8">Security</h3>
-                <SecurityBlock :securityHeaders="secureData" />
-              </div>
+            <div v-if="errorData">
+              <Message
+                severity="error"
+                :closable="false"
+              >
+                {{ errorData }}
+              </Message>
+            </div>
+            <div v-else>
+              <DataBlock
+                title="Current Performance"
+                :resumeData="resumeData"
+                :gradeData="gradeData"
+                :secureData="secureData"
+              />
             </div>
           </div>
 
           <div>
-            <Message
-              v-if="errorDataWithAzion"
-              severity="error"
-              :closable="false"
-            >
-              {{ errorDataWithAzion }}
-            </Message>
-
-            <div v-if="!errorDataWithAzion">
-              <h2 class="text-3xl">Performance <span style="color: #f3652b">with Azion</span></h2>
-
-              <div class="mt-12">
-                <h3 class="text-xl mb-8">General</h3>
-                <ResumeBlock :data="resumeDataWithAzion" />
-              </div>
-
-              <div class="mt-12">
-                <h3 class="text-xl mb-8">Page Performance</h3>
-                <GradeBlock :items="gradeDataWithAzion" />
-              </div>
-
-              <div class="mt-12">
-                <h3 class="text-xl mb-8">Security</h3>
-                <SecurityBlock :securityHeaders="secureDataWithAzion" />
-              </div>
+            <div v-if="errorDataWithAzion">
+              <Message
+                severity="error"
+                :closable="false"
+              >
+                {{ errorDataWithAzion }}
+              </Message>
+            </div>
+            <div v-else>
+              <DataBlock
+                title="Performance <span style='color: #f3652b'>with Azion</span>"
+                :resumeData="resumeDataWithAzion"
+                :gradeData="gradeDataWithAzion"
+                :secureData="secureDataWithAzion"
+              />
             </div>
           </div>
         </div>
@@ -87,25 +66,18 @@
 </template>
 
 <script setup>
-  import { onBeforeMount, ref } from 'vue'
+  import { onMounted, onBeforeMount, ref } from 'vue'
   import Message from 'primevue/message'
-
   import PageHeadingBlock from '@/templates/page-heading-block'
   import ContentBlock from '@/templates/content-block'
-
-  import GradeBlock from './blocks/grade-block.vue'
-  import SecurityBlock from './blocks/security-block.vue'
+  import RetryMessage from './blocks/retry-message.vue'
+  import DataBlock from './blocks/data-block.vue'
   import JourneyBlock from './blocks/journey-block.vue'
-  import ResumeBlock from './blocks/resume-block.vue'
-
   import { extract } from './utils/result-extract'
   import { convertMsToSeconds } from './utils/convert-ms-sec'
   import { formatBytesToKB } from './utils/format-bytes-to-kb'
   import { resultparse } from './utils/result-data-parse'
-
   import { useAccountStore } from '@/stores/account'
-  const accountStore = useAccountStore()
-  const { client_id } = accountStore.account
 
   const props = defineProps({
     testConsolidationService: {
@@ -130,7 +102,9 @@
     }
   })
 
-  const generalError = ref('')
+  const accountStore = useAccountStore()
+  const { client_id } = accountStore.account
+  const generalError = ref({})
   const errorData = ref('')
   const resumeData = ref({})
   const gradeData = ref([])
@@ -143,80 +117,100 @@
   const getResultFromWebpagetest = async (id) => await props.getResultFromWebpagetest(id)
   const getQueryString = (name) => new URLSearchParams(window.location.search).get(name)
 
-  const parseGradeData = (obj) => {
+  const parseGradeData = (metrics) => {
     return [
       {
         label: 'Time to First Byte',
         measure: 's',
-        value: convertMsToSeconds(obj.ttfb)
+        value: convertMsToSeconds(metrics.ttfb)
       },
       {
         label: 'Start Render',
         measure: 's',
-        value: convertMsToSeconds(obj.render)
+        value: convertMsToSeconds(metrics.render)
       },
       {
         label: 'First Contentful Pain',
         measure: 's',
-        value: convertMsToSeconds(obj.chromeUserTiming.firstContentfulPaint)
+        value: convertMsToSeconds(metrics.chromeUserTiming.firstContentfulPaint)
       },
       {
         label: 'Speed Index',
         measure: 's',
-        value: convertMsToSeconds(obj.speedIndex)
+        value: convertMsToSeconds(metrics.speedIndex)
       },
       {
         label: 'Largest Contentful Pain',
         measure: 's',
-        value: convertMsToSeconds(obj.chromeUserTiming.largestContentfulPaint)
+        value: convertMsToSeconds(metrics.chromeUserTiming.largestContentfulPaint)
       },
       {
         label: 'Cumulative Layout Shift',
         measure: 's',
-        value: convertMsToSeconds(obj.chromeUserTiming.cumulativeLayoutShift)
+        value: convertMsToSeconds(metrics.chromeUserTiming.cumulativeLayoutShift)
       },
       {
         label: 'Total Block Time',
         measure: 's',
-        value: convertMsToSeconds(obj.totalBlockingTime)
+        value: convertMsToSeconds(metrics.totalBlockingTime)
       },
       {
         label: 'Page Weight',
         measure: 'KB',
-        value: formatBytesToKB(obj.bytesIn)
+        value: formatBytesToKB(metrics.bytesIn)
       }
     ]
   }
 
-  const parseSecureData = (data) => {
+  const parseSecureData = (testResult) => {
     return {
-      protocol: data.requests[0].securityDetails.protocol,
-      tls_verion: data.requests[0].securityDetails.tls_version,
-      list: data.securityHeaders.securityHeadersList || [],
-      grade: data.securityHeaders.securityHeadersGrade || '',
-      score: data.securityHeaders.securityHeadersScore || ''
+      protocol: testResult.requests[0].securityDetails.protocol,
+      tls_verion: testResult.requests[0].securityDetails.tls_version,
+      list: testResult.securityHeaders.securityHeadersList || [],
+      grade: testResult.securityHeaders.securityHeadersGrade || '',
+      score: testResult.securityHeaders.securityHeadersScore || ''
     }
   }
 
-  onBeforeMount(async () => {
-    const testId = getQueryString('id')
+  const resetGeneralErrorMessage = () => {
+    return generalError.value = {}
+  }
 
-    await props.testConsolidationService({
-      testId: testId,
-      clientId: client_id
-    })
+  const setGeneralErrorMessage = (message, retry) => {
+    return generalError.value = {
+      message: message,
+      retry: retry
+    }
+  }
 
-    const testById = await props.getTestById(testId, client_id)
+  const hasGeneralErrorMessage = () => {
+    return Object.keys(generalError.value).length
+  } 
 
+  const setTestErrorMessage = (message) => {
+    return errorData.value = message
+  }
+
+  const setTestWithAzionErrorMessage = (message) => {
+    return errorDataWithAzion.value = message
+  }
+
+  const init = async () => {
+    const testId = getQueryString('id')
+    const testById = await props.getTestById(testId, client_id)
+    
     if (!testById.body.length) {
-      generalError.value = 'Unavailable comparative tests.'
+      setGeneralErrorMessage(
+        'Unavailable comparative tests. 1. Propagating data; 2. Invalid id;',
+        true
+      )
       return
     }
 
     getResultFromWebpagetest(testById.body[0].id)
       .then((result) => {
         if (result.body.statusCode !== 200) {
-          errorData.value = `Test ${result.body.data.id} is ${result.body.statusText}`
+          setTestErrorMessage(`Test ${result.body.data.id} is ${result.body.statusText}`)
           return
         }
 
@@ -226,13 +220,13 @@
         secureData.value = parseSecureData(medianFirstView)
       })
       .catch(() => {
-        errorData.value = 'Not possible to load the Origin test.'
+        setTestErrorMessage('Not possible to load the Origin test.')
       })
 
     getResultFromWebpagetest(testById.body[0].id_azion)
       .then((resutWithAzion) => {
         if (resutWithAzion.body.statusCode !== 200) {
-          errorDataWithAzion.value = `Test ${resutWithAzion.body.data.id} is ${resutWithAzion.body.statusText}`
+          setTestWithAzionErrorMessage(`Test ${resutWithAzion.body.data.id} is ${resutWithAzion.body.statusText}`)
           return
         }
 
@@ -242,7 +236,31 @@
         secureDataWithAzion.value = parseSecureData(medianRepeatedViewWithAzion)
       })
       .catch(() => {
-        errorDataWithAzion.value = 'Not possible to load the test with Azion.'
+        setTestWithAzionErrorMessage('Not possible to load the test with Azion.')
       })
+  }
+
+  onMounted(() => {
+    if (!client_id) {
+      setGeneralErrorMessage(
+        'The logged-in account does not have a valid client ID.',
+        false
+      )
+      return
+    }
+  })
+
+  onBeforeMount(async () => {
+    if (!client_id) {
+      return
+    }
+
+    const testId = getQueryString('id')
+    await props.testConsolidationService({
+      testId: testId,
+      clientId: client_id
+    })
+
+    init()
   })
 </script>
diff --git a/src/views/CompareWithAzion/blocks/data-block.vue b/src/views/CompareWithAzion/blocks/data-block.vue
new file mode 100644
index 000000000..a73d12916
--- /dev/null
+++ b/src/views/CompareWithAzion/blocks/data-block.vue
@@ -0,0 +1,44 @@
+<template>
+  <h2 class="text-3xl" v-html="props.title" />
+
+  <div class="mt-12">
+    <h3 class="text-xl mb-8">General</h3>
+    <ResumeBlock :data="resumeData" />
+  </div>
+
+  <div class="mt-12">
+    <h3 class="text-xl mb-8">Page Performance</h3>
+    <GradeBlock :items="gradeData" />
+  </div>
+
+  <div class="mt-12">
+    <h3 class="text-xl mb-8">Security</h3>
+    <SecurityBlock :securityHeaders="secureData" />
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import ResumeBlock from './resume-block.vue'
+  import GradeBlock from './grade-block.vue'
+  import SecurityBlock from './security-block.vue'
+
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true
+    },
+    resumeData: ref({
+      type: Object,
+      required: true
+    }),
+    gradeData: ref({
+      type: Array,
+      required: true
+    }),
+    secureData: ref({
+      type: Object,
+      required: true
+    }),
+  })
+</script>
\ No newline at end of file
diff --git a/src/views/CompareWithAzion/blocks/grade-block.vue b/src/views/CompareWithAzion/blocks/grade-block.vue
index c66761cf5..be0b1832c 100644
--- a/src/views/CompareWithAzion/blocks/grade-block.vue
+++ b/src/views/CompareWithAzion/blocks/grade-block.vue
@@ -14,7 +14,7 @@
       <li
         v-for="item in props.items"
         :key="item.label"
-        class="p-4 surface-border border p-0 m-0"
+        class="p-4 surface-border border m-0"
       >
         <p>
           <small class="font-semibold">{{ item.label }}</small>
diff --git a/src/views/CompareWithAzion/blocks/retry-message.vue b/src/views/CompareWithAzion/blocks/retry-message.vue
new file mode 100644
index 000000000..0965acf2c
--- /dev/null
+++ b/src/views/CompareWithAzion/blocks/retry-message.vue
@@ -0,0 +1,103 @@
+<template>
+  <Message
+    :severity="props.severity"
+    :closable="false"
+  >
+    <div class="flex gap-2 items-center">
+      {{ props.data.message }}
+
+      <div
+        v-if="props.data.retry"
+        class="flex items-center"
+      >
+        (&nbsp;&nbsp;
+        <strong
+          v-if="props.data.retry && counter"
+          class="flex items-center"
+        >
+          {{ counter }} seconds
+        </strong>
+        <span v-else class="ml-2">
+          <i class="pi pi-spin pi-spinner"></i>
+        </span>
+  
+        <Button
+          link
+          :label="retryButton.label"
+          :disabled="retryButton.disabled"
+          @click="timerZero"
+        />
+        )
+      </div>
+    </div>
+  </Message> 
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import Message from 'primevue/message'
+  import Button from 'primevue/button'
+
+  let interval;
+  const emit = defineEmits(['onRetry'])
+  const props = defineProps({
+    data: ref({
+      type: Object,
+      required: true
+    }),
+    timer: {
+      type: Number,
+      required: false,
+      default: 30
+    },
+    severity: {
+      type: String,
+      required: false,
+      default: "error"
+    }
+  })
+  const counter = ref(props.timer)
+  const retryButton = ref({
+    disabled: false,
+    label: 'retry'
+  })
+
+  const timerZero = () => {
+    emit('onRetry')
+
+    setCounter(0)
+    clearInterval(interval)
+    setRetryButton(true, 'retrying')
+  }
+
+  const setRetryButton = (status, label) => {
+    return retryButton.value = {
+      disabled: status,
+      label: label
+    }
+  }
+
+  const setCounter = (number) => {
+    return counter.value = number
+  }
+
+  const startCounter = () => {
+    interval = setInterval(() => {
+      const decreasedCounter = (counter.value - 1)
+      setCounter(decreasedCounter)
+
+      if(!decreasedCounter) {
+        timerZero()
+      }
+    }, 1000)
+  }
+
+  onMounted(() => {
+    if(!props.data.retry) {
+      return
+    }
+
+    setCounter(props.timer)
+    startCounter()
+  })
+</script>
\ No newline at end of file
diff --git a/src/views/CompareWithAzion/utils/convert-ms-sec.js b/src/views/CompareWithAzion/utils/convert-ms-sec.js
index 961d4aa37..8ee149966 100644
--- a/src/views/CompareWithAzion/utils/convert-ms-sec.js
+++ b/src/views/CompareWithAzion/utils/convert-ms-sec.js
@@ -1,4 +1,4 @@
 export function convertMsToSeconds(ms) {
-  let seconds = (ms / 1000).toFixed(3)
+  const seconds = (ms / 1000).toFixed(3)
   return seconds.startsWith('0') ? seconds.slice(1) : seconds
 }
diff --git a/src/views/CompareWithAzion/utils/result-data-parse.js b/src/views/CompareWithAzion/utils/result-data-parse.js
index b9c3a6eb6..06d0092c7 100644
--- a/src/views/CompareWithAzion/utils/result-data-parse.js
+++ b/src/views/CompareWithAzion/utils/result-data-parse.js
@@ -25,125 +25,25 @@ export const resultparse = {
     return test.data.median.firstView.base_page_cdn || ''
   },
 
-  url: (test) => {
-    const requests = test.data.median.firstView.requests || []
-    let url = 'unknown url'
-
-    if (!requests.length) return
-
-    for (let index = 0; index < requests.length; index++) {
-      let request = requests[index]
-
-      if (request.contentType !== 'text/html') {
-        continue
-      }
-
-      url = request.documentURL
-      break
-    }
-
-    return url
-  },
-
-  bytesRequestType: (test) => {
-    let data = {
-      'html/requests': 0,
-      'html/bytes': 0,
-      'html/uncompressed': 0,
-
-      'css/requests': 0,
-      'css/bytes': 0,
-      'css/uncompressed': 0,
-
-      'javascript/requests': 0,
-      'javascript/bytes': 0,
-      'javascript/uncompressed': 0,
-
-      'image/requests': 0,
-      'image/bytes': 0,
-      'image/uncompressed': 0,
-
-      'video/requests': 0,
-      'video/bytes': 0,
-      'video/uncompressed': 0,
-
-      'font/requests': 0,
-      'font/bytes': 0,
-      'font/uncompressed': 0,
-
-      'json/requests': 0,
-      'json/bytes': 0,
-      'json/uncompressed': 0,
-
-      'others/requests': 0,
-      'others/bytes': 0,
-      'others/uncompressed': 0
-    }
-
-    const requests = test.data.median.firstView.requests || []
-    requests.forEach((request) => {
-      let type, mimetype
-
-      if (!request.contentType) return
-
-      type =
-        Array.isArray(request.contentType) && !request.contentType.length
-          ? 'other'
-          : request.contentType
-
-      if (!type.length) return
-
-      if (/(html)/i.test(type)) {
-        mimetype = 'html'
-      } else if (/(css)/i.test(type)) {
-        mimetype = 'css'
-      } else if (/(javascript)/i.test(type)) {
-        mimetype = 'javascript'
-      } else if (/(image)/i.test(type)) {
-        mimetype = 'image'
-      } else if (/(video)/i.test(type)) {
-        mimetype = 'video'
-      } else if (/(font)/i.test(type)) {
-        mimetype = 'font'
-      } else if (/(json)/i.test(type)) {
-        mimetype = 'json'
-      } else {
-        mimetype = 'others'
-      }
-
-      data[`${mimetype}/requests`] += 1
-      data[`${mimetype}/bytes`] += request.objectSize || 0
-      data[`${mimetype}/uncompressed`] = request.objectSizeUncompressed || 0
-    })
-
-    return data
-  },
-
   possibleSave: (test) => {
-    let possible = test.data.median.firstView.image_savings || 0
-    let total = test.data.median.firstView.image_total || 0
+    const possible = test.data.median.firstView.image_savings || 0
+    const total = test.data.median.firstView.image_total || 0
 
     return `${formatBytes(possible)} of ${formatBytes(total)}`
   },
 
   percentilImageSave: (test) => {
-    let possible = test.data.median.firstView.image_savings || 0
-    let total = test.data.median.firstView.image_total || 0
+    const possible = test.data.median.firstView.image_savings || 0
+    const total = test.data.median.firstView.image_total || 0
 
     return Number(((100 * possible) / total).toFixed(2))
   },
 
-  cart: (test) => {
-    let hasCart = test.data.median.firstView.detected['Ecommerce'] || undefined
-    return hasCart ? true : false
-  },
-
   grade: (test) => {
-    let grade = {}
-    let secHeaders = test.data.median.firstView.securityHeaders
+    const grade = {}
+    const secHeaders = test.data.median.firstView.securityHeaders
 
-    grade.security =
-      secHeaders && secHeaders.securityHeadersGrade ? secHeaders.securityHeadersGrade : ''
+    grade.security = secHeaders && secHeaders.securityHeadersGrade ? secHeaders.securityHeadersGrade : ''
     grade.ttfb = `${test.data.median.firstView.TTFB}ms`
     grade['score_keep-alive'] = gradeTranslate(test.data.median.firstView['score_keep-alive'])
     grade.score_gzip = gradeTranslate(test.data.median.firstView.score_gzip)

From 042597e8d5f0d894cbbb0555a6261c13d9516fb2 Mon Sep 17 00:00:00 2001
From: robsongajunior <robson.ga.junior@gmail.com>
Date: Wed, 25 Sep 2024 16:08:58 -0300
Subject: [PATCH 02/11] feat: retry button and counter feature and improve
 messages

---
 .../get-test-from-webpagetest.js              |   7 -
 src/views/CompareWithAzion/CompareView.vue    | 180 +++++++++++-------
 .../CompareWithAzion/blocks/data-block.vue    |   9 +-
 .../CompareWithAzion/blocks/retry-message.vue |  29 +--
 .../utils/result-data-parse.js                |   3 +-
 5 files changed, 140 insertions(+), 88 deletions(-)

diff --git a/src/services/compare-with-azion/get-test-from-webpagetest.js b/src/services/compare-with-azion/get-test-from-webpagetest.js
index 5c08119d6..481c582da 100644
--- a/src/services/compare-with-azion/get-test-from-webpagetest.js
+++ b/src/services/compare-with-azion/get-test-from-webpagetest.js
@@ -3,13 +3,6 @@ import makeWebpagetestApi from '../axios/makeWebpagetestApi'
 // import { makeWebpagetestBaseUrlExternal } from './make-base-webpagetest-url'
 
 export const getResultFromWebpagetest = async (id) => {
-  if (!id) {
-    return {
-      status: 400,
-      error: `Invalid ID param.`
-    }
-  }
-
   let httpResponse = await AxiosHttpClientAdapter.request(
     {
       url: `/jsonResult.php?test=${id}`,
diff --git a/src/views/CompareWithAzion/CompareView.vue b/src/views/CompareWithAzion/CompareView.vue
index e8d6871fc..a87d496c3 100644
--- a/src/views/CompareWithAzion/CompareView.vue
+++ b/src/views/CompareWithAzion/CompareView.vue
@@ -2,32 +2,48 @@
   <div class="px-4">
     <ContentBlock data-testid="view-compare-with-azion-test">
       <template #heading>
-        <PageHeadingBlock data-testid="view-compare-with-azion-test-heading" />
+        <PageHeadingBlock
+          pageTitle=""
+          data-testid="view-compare-with-azion-test-heading"
+        />
       </template>
 
       <template #content>
         <div
           class="w-fit"
-          v-if="hasGeneralErrorMessage()"
+          v-if="hasGeneralMessage()"
         >
           <RetryMessage
-            :timer="45"
+            :timer="60"
             :data="generalError"
-            @onRetry="() => {
-              resetGeneralErrorMessage()
-              init()
-            }"
+            @onRetry="
+              () => {
+                resetGeneralMessage()
+                init()
+              }
+            "
           />
         </div>
-        <div v-else class="grid md:grid-cols-2 gap-10">
+        <div
+          v-else
+          class="grid md:grid-cols-2 gap-10"
+        >
           <div>
-            <div v-if="errorData">
-              <Message
-                severity="error"
-                :closable="false"
-              >
-                {{ errorData }}
-              </Message>
+            <div
+              v-if="hasTestMessage()"
+              class="w-fit"
+            >
+              <RetryMessage
+                :timer="30"
+                :data="errorData"
+                @onRetry="
+                  async () => {
+                    resetTestMessage()
+                    const testById = await getTestById()
+                    loadTest(testById.body[0].id)
+                  }
+                "
+              />
             </div>
             <div v-else>
               <DataBlock
@@ -40,13 +56,21 @@
           </div>
 
           <div>
-            <div v-if="errorDataWithAzion">
-              <Message
-                severity="error"
-                :closable="false"
-              >
-                {{ errorDataWithAzion }}
-              </Message>
+            <div
+              v-if="hasTestWithAzionMessage()"
+              class="w-fit"
+            >
+              <RetryMessage
+                :timer="30"
+                :data="errorDataWithAzion"
+                @onRetry="
+                  async () => {
+                    resetTestWithAzionMessage()
+                    const testById = await getTestById()
+                    loadTestWithAzion(testById.body[0].id_azion)
+                  }
+                "
+              />
             </div>
             <div v-else>
               <DataBlock
@@ -67,7 +91,6 @@
 
 <script setup>
   import { onMounted, onBeforeMount, ref } from 'vue'
-  import Message from 'primevue/message'
   import PageHeadingBlock from '@/templates/page-heading-block'
   import ContentBlock from '@/templates/content-block'
   import RetryMessage from './blocks/retry-message.vue'
@@ -105,11 +128,11 @@
   const accountStore = useAccountStore()
   const { client_id } = accountStore.account
   const generalError = ref({})
-  const errorData = ref('')
+  const errorData = ref({})
   const resumeData = ref({})
   const gradeData = ref([])
   const secureData = ref({})
-  const errorDataWithAzion = ref('')
+  const errorDataWithAzion = ref({})
   const resumeDataWithAzion = ref({})
   const gradeDataWithAzion = ref([])
   const secureDataWithAzion = ref({})
@@ -172,45 +195,41 @@
     }
   }
 
-  const resetGeneralErrorMessage = () => {
-    return generalError.value = {}
-  }
-
-  const setGeneralErrorMessage = (message, retry) => {
-    return generalError.value = {
-      message: message,
-      retry: retry
-    }
+  const hasGeneralMessage = () => Object.keys(generalError.value).length
+  const resetGeneralMessage = () => (generalError.value = {})
+  const setGeneralMessage = (general) => {
+    return (generalError.value = {
+      message: general.message,
+      retry: general.retry,
+      severity: general.severity
+    })
   }
 
-  const hasGeneralErrorMessage = () => {
-    return Object.keys(generalError.value).length
-  } 
-
-  const setTestErrorMessage = (message) => {
-    return errorData.value = message
+  const hasTestMessage = () => Object.keys(errorData.value).length
+  const resetTestMessage = () => (errorData.value = {})
+  const setTestMessage = (test) => {
+    return (errorData.value = {
+      message: test.message,
+      retry: test.retry,
+      severity: test.severity
+    })
   }
 
-  const setTestWithAzionErrorMessage = (message) => {
-    return errorDataWithAzion.value = message
+  const hasTestWithAzionMessage = () => Object.keys(errorDataWithAzion.value).length
+  const resetTestWithAzionMessage = () => (errorDataWithAzion.value = {})
+  const setTestWithAzionMessage = (message) => {
+    return (errorDataWithAzion.value = message)
   }
 
-  const init = async () => {
-    const testId = getQueryString('id')
-    const testById = await props.getTestById(testId, client_id)
-    
-    if (!testById.body.length) {
-      setGeneralErrorMessage(
-        'Unavailable comparative tests. 1. Propagating data; 2. Invalid id;',
-        true
-      )
-      return
-    }
-
-    getResultFromWebpagetest(testById.body[0].id)
+  const loadTest = async (id) => {
+    return getResultFromWebpagetest(id)
       .then((result) => {
         if (result.body.statusCode !== 200) {
-          setTestErrorMessage(`Test ${result.body.data.id} is ${result.body.statusText}`)
+          setTestMessage({
+            message: `Test ${result.body.data.id} is ${result.body.statusText}`,
+            severity: 'warn',
+            retry: true
+          })
           return
         }
 
@@ -220,13 +239,23 @@
         secureData.value = parseSecureData(medianFirstView)
       })
       .catch(() => {
-        setTestErrorMessage('Not possible to load the Origin test.')
+        setTestMessage({
+          message: 'Not possible to load the Origin test.',
+          severity: 'error',
+          retry: false
+        })
       })
+  }
 
-    getResultFromWebpagetest(testById.body[0].id_azion)
+  const loadTestWithAzion = async (id) => {
+    return getResultFromWebpagetest(id)
       .then((resutWithAzion) => {
         if (resutWithAzion.body.statusCode !== 200) {
-          setTestWithAzionErrorMessage(`Test ${resutWithAzion.body.data.id} is ${resutWithAzion.body.statusText}`)
+          setTestWithAzionMessage({
+            message: `Test ${resutWithAzion.body.data.id} is ${resutWithAzion.body.statusText}`,
+            severity: 'info',
+            retry: true
+          })
           return
         }
 
@@ -236,16 +265,39 @@
         secureDataWithAzion.value = parseSecureData(medianRepeatedViewWithAzion)
       })
       .catch(() => {
-        setTestWithAzionErrorMessage('Not possible to load the test with Azion.')
+        setTestWithAzionMessage({
+          message: 'Not possible to load the test with Azion.',
+          severity: 'error',
+          retry: false
+        })
+      })
+  }
+
+  const getTestById = async () => await props.getTestById(getQueryString('id'), client_id)
+
+  const init = async () => {
+    const testById = await getTestById()
+
+    if (!testById.body.length) {
+      setGeneralMessage({
+        message: 'Propagating comparative consolidation...',
+        retry: true,
+        severity: 'info'
       })
+      return
+    }
+
+    loadTest(testById.body[0].id)
+    loadTestWithAzion(testById.body[0].id_azion)
   }
 
   onMounted(() => {
     if (!client_id) {
-      setGeneralErrorMessage(
-        'The logged-in account does not have a valid client ID.',
-        false
-      )
+      setGeneralMessage({
+        message: 'The logged-in account does not have a valid client ID.',
+        severity: 'error',
+        retry: false
+      })
       return
     }
   })
diff --git a/src/views/CompareWithAzion/blocks/data-block.vue b/src/views/CompareWithAzion/blocks/data-block.vue
index a73d12916..939d81eda 100644
--- a/src/views/CompareWithAzion/blocks/data-block.vue
+++ b/src/views/CompareWithAzion/blocks/data-block.vue
@@ -1,5 +1,8 @@
 <template>
-  <h2 class="text-3xl" v-html="props.title" />
+  <h2
+    class="text-3xl"
+    v-html="props.title"
+  />
 
   <div class="mt-12">
     <h3 class="text-xl mb-8">General</h3>
@@ -39,6 +42,6 @@
     secureData: ref({
       type: Object,
       required: true
-    }),
+    })
   })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/CompareWithAzion/blocks/retry-message.vue b/src/views/CompareWithAzion/blocks/retry-message.vue
index 0965acf2c..cc91a1bcf 100644
--- a/src/views/CompareWithAzion/blocks/retry-message.vue
+++ b/src/views/CompareWithAzion/blocks/retry-message.vue
@@ -1,6 +1,6 @@
 <template>
   <Message
-    :severity="props.severity"
+    :severity="props.data.severity"
     :closable="false"
   >
     <div class="flex gap-2 items-center">
@@ -17,10 +17,13 @@
         >
           {{ counter }} seconds
         </strong>
-        <span v-else class="ml-2">
+        <span
+          v-else
+          class="ml-2"
+        >
           <i class="pi pi-spin pi-spinner"></i>
         </span>
-  
+
         <Button
           link
           :label="retryButton.label"
@@ -30,7 +33,7 @@
         )
       </div>
     </div>
-  </Message> 
+  </Message>
 </template>
 
 <script setup>
@@ -38,7 +41,7 @@
   import Message from 'primevue/message'
   import Button from 'primevue/button'
 
-  let interval;
+  let interval
   const emit = defineEmits(['onRetry'])
   const props = defineProps({
     data: ref({
@@ -53,7 +56,7 @@
     severity: {
       type: String,
       required: false,
-      default: "error"
+      default: 'error'
     }
   })
   const counter = ref(props.timer)
@@ -71,33 +74,33 @@
   }
 
   const setRetryButton = (status, label) => {
-    return retryButton.value = {
+    return (retryButton.value = {
       disabled: status,
       label: label
-    }
+    })
   }
 
   const setCounter = (number) => {
-    return counter.value = number
+    return (counter.value = number)
   }
 
   const startCounter = () => {
     interval = setInterval(() => {
-      const decreasedCounter = (counter.value - 1)
+      const decreasedCounter = counter.value - 1
       setCounter(decreasedCounter)
 
-      if(!decreasedCounter) {
+      if (!decreasedCounter) {
         timerZero()
       }
     }, 1000)
   }
 
   onMounted(() => {
-    if(!props.data.retry) {
+    if (!props.data.retry) {
       return
     }
 
     setCounter(props.timer)
     startCounter()
   })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/CompareWithAzion/utils/result-data-parse.js b/src/views/CompareWithAzion/utils/result-data-parse.js
index 06d0092c7..62836e2f7 100644
--- a/src/views/CompareWithAzion/utils/result-data-parse.js
+++ b/src/views/CompareWithAzion/utils/result-data-parse.js
@@ -43,7 +43,8 @@ export const resultparse = {
     const grade = {}
     const secHeaders = test.data.median.firstView.securityHeaders
 
-    grade.security = secHeaders && secHeaders.securityHeadersGrade ? secHeaders.securityHeadersGrade : ''
+    grade.security =
+      secHeaders && secHeaders.securityHeadersGrade ? secHeaders.securityHeadersGrade : ''
     grade.ttfb = `${test.data.median.firstView.TTFB}ms`
     grade['score_keep-alive'] = gradeTranslate(test.data.median.firstView['score_keep-alive'])
     grade.score_gzip = gradeTranslate(test.data.median.firstView.score_gzip)

From 69100888781d8872ecd862d6a75667aadc9b95ca Mon Sep 17 00:00:00 2001
From: robsongajunior <robson.ga.junior@gmail.com>
Date: Wed, 25 Sep 2024 16:50:36 -0300
Subject: [PATCH 03/11] fix: property warn access during render

---
 src/views/CompareWithAzion/blocks/security-block.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/CompareWithAzion/blocks/security-block.vue b/src/views/CompareWithAzion/blocks/security-block.vue
index 1bda3fd2d..379809376 100644
--- a/src/views/CompareWithAzion/blocks/security-block.vue
+++ b/src/views/CompareWithAzion/blocks/security-block.vue
@@ -30,7 +30,7 @@
       </li>
 
       <li
-        v-if="tls_version"
+        v-if="props.securityHeaders.tls_version"
         class="px-4 py-2 flex items-center"
       >
         {{ props.securityHeaders.tls_version }}

From 49c38070093b0b2edf6131a11821c329a1d8fa77 Mon Sep 17 00:00:00 2001
From: robsongajunior <robson.ga.junior@gmail.com>
Date: Thu, 26 Sep 2024 11:26:23 -0300
Subject: [PATCH 04/11] fix: refactor

---
 .../get-test-from-webpagetest.js              |  2 +-
 src/views/CompareWithAzion/CompareView.vue    | 37 +++++++++----------
 .../CompareWithAzion/blocks/retry-message.vue |  3 +-
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/services/compare-with-azion/get-test-from-webpagetest.js b/src/services/compare-with-azion/get-test-from-webpagetest.js
index 481c582da..417433736 100644
--- a/src/services/compare-with-azion/get-test-from-webpagetest.js
+++ b/src/services/compare-with-azion/get-test-from-webpagetest.js
@@ -1,6 +1,6 @@
 import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import makeWebpagetestApi from '../axios/makeWebpagetestApi'
-// import { makeWebpagetestBaseUrlExternal } from './make-base-webpagetest-url'
+
 
 export const getResultFromWebpagetest = async (id) => {
   let httpResponse = await AxiosHttpClientAdapter.request(
diff --git a/src/views/CompareWithAzion/CompareView.vue b/src/views/CompareWithAzion/CompareView.vue
index a87d496c3..dfb3e392e 100644
--- a/src/views/CompareWithAzion/CompareView.vue
+++ b/src/views/CompareWithAzion/CompareView.vue
@@ -16,12 +16,7 @@
           <RetryMessage
             :timer="60"
             :data="generalError"
-            @onRetry="
-              () => {
-                resetGeneralMessage()
-                init()
-              }
-            "
+            @onRetry="retryGeneralMessage()"
           />
         </div>
         <div
@@ -36,13 +31,7 @@
               <RetryMessage
                 :timer="30"
                 :data="errorData"
-                @onRetry="
-                  async () => {
-                    resetTestMessage()
-                    const testById = await getTestById()
-                    loadTest(testById.body[0].id)
-                  }
-                "
+                @onRetry="retryTestMessage()"
               />
             </div>
             <div v-else>
@@ -63,13 +52,7 @@
               <RetryMessage
                 :timer="30"
                 :data="errorDataWithAzion"
-                @onRetry="
-                  async () => {
-                    resetTestWithAzionMessage()
-                    const testById = await getTestById()
-                    loadTestWithAzion(testById.body[0].id_azion)
-                  }
-                "
+                @onRetry="retryTestWithAzionMessage()"
               />
             </div>
             <div v-else>
@@ -204,6 +187,10 @@
       severity: general.severity
     })
   }
+  const retryGeneralMessage = () => {
+    resetGeneralMessage()
+    init()
+  }
 
   const hasTestMessage = () => Object.keys(errorData.value).length
   const resetTestMessage = () => (errorData.value = {})
@@ -214,12 +201,22 @@
       severity: test.severity
     })
   }
+  const retryTestMessage = async () => {
+    resetTestMessage()
+    const testById = await getTestById()
+    loadTest(testById.body[0].id)
+  }
 
   const hasTestWithAzionMessage = () => Object.keys(errorDataWithAzion.value).length
   const resetTestWithAzionMessage = () => (errorDataWithAzion.value = {})
   const setTestWithAzionMessage = (message) => {
     return (errorDataWithAzion.value = message)
   }
+  const retryTestWithAzionMessage = async () => {
+    resetTestWithAzionMessage()
+    const testById = await getTestById()
+    loadTestWithAzion(testById.body[0].id_azion)
+  }
 
   const loadTest = async (id) => {
     return getResultFromWebpagetest(id)
diff --git a/src/views/CompareWithAzion/blocks/retry-message.vue b/src/views/CompareWithAzion/blocks/retry-message.vue
index cc91a1bcf..64ff25d96 100644
--- a/src/views/CompareWithAzion/blocks/retry-message.vue
+++ b/src/views/CompareWithAzion/blocks/retry-message.vue
@@ -42,6 +42,7 @@
   import Button from 'primevue/button'
 
   let interval
+  const RECONSULTATION_TIME_MS = 1000
   const emit = defineEmits(['onRetry'])
   const props = defineProps({
     data: ref({
@@ -50,12 +51,10 @@
     }),
     timer: {
       type: Number,
-      required: false,
       default: 30
     },
     severity: {
       type: String,
-      required: false,
       default: 'error'
     }
   })

From d3eb5671928f16c51a87b713d02429b374c23ead Mon Sep 17 00:00:00 2001
From: robsongajunior <robson.ga.junior@gmail.com>
Date: Thu, 26 Sep 2024 11:38:46 -0300
Subject: [PATCH 05/11] fix: refactor

---
 .../get-test-from-webpagetest.js                 |  1 -
 src/views/CompareWithAzion/CompareView.vue       |  4 +---
 .../CompareWithAzion/blocks/retry-message.vue    | 16 ++++++----------
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/services/compare-with-azion/get-test-from-webpagetest.js b/src/services/compare-with-azion/get-test-from-webpagetest.js
index 417433736..79b139cd8 100644
--- a/src/services/compare-with-azion/get-test-from-webpagetest.js
+++ b/src/services/compare-with-azion/get-test-from-webpagetest.js
@@ -1,7 +1,6 @@
 import { AxiosHttpClientAdapter } from '../axios/AxiosHttpClientAdapter'
 import makeWebpagetestApi from '../axios/makeWebpagetestApi'
 
-
 export const getResultFromWebpagetest = async (id) => {
   let httpResponse = await AxiosHttpClientAdapter.request(
     {
diff --git a/src/views/CompareWithAzion/CompareView.vue b/src/views/CompareWithAzion/CompareView.vue
index dfb3e392e..9c134aff8 100644
--- a/src/views/CompareWithAzion/CompareView.vue
+++ b/src/views/CompareWithAzion/CompareView.vue
@@ -300,9 +300,7 @@
   })
 
   onBeforeMount(async () => {
-    if (!client_id) {
-      return
-    }
+    if (!client_id) return
 
     const testId = getQueryString('id')
     await props.testConsolidationService({
diff --git a/src/views/CompareWithAzion/blocks/retry-message.vue b/src/views/CompareWithAzion/blocks/retry-message.vue
index 64ff25d96..70473bd6e 100644
--- a/src/views/CompareWithAzion/blocks/retry-message.vue
+++ b/src/views/CompareWithAzion/blocks/retry-message.vue
@@ -7,12 +7,12 @@
       {{ props.data.message }}
 
       <div
-        v-if="props.data.retry"
+        v-if="props.data?.retry"
         class="flex items-center"
       >
         (&nbsp;&nbsp;
         <strong
-          v-if="props.data.retry && counter"
+          v-if="props.data?.retry && counter"
           class="flex items-center"
         >
           {{ counter }} seconds
@@ -41,7 +41,6 @@
   import Message from 'primevue/message'
   import Button from 'primevue/button'
 
-  let interval
   const RECONSULTATION_TIME_MS = 1000
   const emit = defineEmits(['onRetry'])
   const props = defineProps({
@@ -83,21 +82,18 @@
     return (counter.value = number)
   }
 
+  let interval
   const startCounter = () => {
     interval = setInterval(() => {
       const decreasedCounter = counter.value - 1
       setCounter(decreasedCounter)
 
-      if (!decreasedCounter) {
-        timerZero()
-      }
-    }, 1000)
+      if (!decreasedCounter) timerZero()
+    }, RECONSULTATION_TIME_MS)
   }
 
   onMounted(() => {
-    if (!props.data.retry) {
-      return
-    }
+    if (!props.data.retry) return
 
     setCounter(props.timer)
     startCounter()

From d7b5851e9a50ab251b7f57828312818586c199a5 Mon Sep 17 00:00:00 2001
From: robsongajunior <robson.ga.junior@gmail.com>
Date: Thu, 26 Sep 2024 12:14:20 -0300
Subject: [PATCH 06/11] fix: refactor computed method

---
 src/views/CompareWithAzion/CompareView.vue    | 23 +++++++++++--------
 .../CompareWithAzion/blocks/retry-message.vue | 18 +++++++--------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/views/CompareWithAzion/CompareView.vue b/src/views/CompareWithAzion/CompareView.vue
index 9c134aff8..73d314049 100644
--- a/src/views/CompareWithAzion/CompareView.vue
+++ b/src/views/CompareWithAzion/CompareView.vue
@@ -11,12 +11,12 @@
       <template #content>
         <div
           class="w-fit"
-          v-if="hasGeneralMessage()"
+          v-if="hasGeneralMessage"
         >
           <RetryMessage
             :timer="60"
             :data="generalError"
-            @onRetry="retryGeneralMessage()"
+            @onRetry="retryGeneralMessage"
           />
         </div>
         <div
@@ -25,13 +25,13 @@
         >
           <div>
             <div
-              v-if="hasTestMessage()"
+              v-if="hasTestMessage"
               class="w-fit"
             >
               <RetryMessage
                 :timer="30"
                 :data="errorData"
-                @onRetry="retryTestMessage()"
+                @onRetry="retryTestMessage"
               />
             </div>
             <div v-else>
@@ -46,13 +46,13 @@
 
           <div>
             <div
-              v-if="hasTestWithAzionMessage()"
+              v-if="hasTestWithAzionMessage"
               class="w-fit"
             >
               <RetryMessage
                 :timer="30"
                 :data="errorDataWithAzion"
-                @onRetry="retryTestWithAzionMessage()"
+                @onRetry="retryTestWithAzionMessage"
               />
             </div>
             <div v-else>
@@ -73,7 +73,7 @@
 </template>
 
 <script setup>
-  import { onMounted, onBeforeMount, ref } from 'vue'
+  import { computed, onMounted, onBeforeMount, ref } from 'vue'
   import PageHeadingBlock from '@/templates/page-heading-block'
   import ContentBlock from '@/templates/content-block'
   import RetryMessage from './blocks/retry-message.vue'
@@ -178,7 +178,10 @@
     }
   }
 
-  const hasGeneralMessage = () => Object.keys(generalError.value).length
+  const hasGeneralMessage = computed(() => {
+    return Object.keys(generalError.value).length
+  })
+
   const resetGeneralMessage = () => (generalError.value = {})
   const setGeneralMessage = (general) => {
     return (generalError.value = {
@@ -192,7 +195,7 @@
     init()
   }
 
-  const hasTestMessage = () => Object.keys(errorData.value).length
+  const hasTestMessage = computed(() => Object.keys(errorData.value).length)
   const resetTestMessage = () => (errorData.value = {})
   const setTestMessage = (test) => {
     return (errorData.value = {
@@ -207,7 +210,7 @@
     loadTest(testById.body[0].id)
   }
 
-  const hasTestWithAzionMessage = () => Object.keys(errorDataWithAzion.value).length
+  const hasTestWithAzionMessage = computed(() => Object.keys(errorDataWithAzion.value).length)
   const resetTestWithAzionMessage = () => (errorDataWithAzion.value = {})
   const setTestWithAzionMessage = (message) => {
     return (errorDataWithAzion.value = message)
diff --git a/src/views/CompareWithAzion/blocks/retry-message.vue b/src/views/CompareWithAzion/blocks/retry-message.vue
index 70473bd6e..d11f79034 100644
--- a/src/views/CompareWithAzion/blocks/retry-message.vue
+++ b/src/views/CompareWithAzion/blocks/retry-message.vue
@@ -37,11 +37,10 @@
 </template>
 
 <script setup>
-  import { ref, onMounted } from 'vue'
+  import {  onMounted, ref } from 'vue'
   import Message from 'primevue/message'
   import Button from 'primevue/button'
-
-  const RECONSULTATION_TIME_MS = 1000
+  
   const emit = defineEmits(['onRetry'])
   const props = defineProps({
     data: ref({
@@ -57,25 +56,24 @@
       default: 'error'
     }
   })
+  
   const counter = ref(props.timer)
   const retryButton = ref({
     disabled: false,
     label: 'retry'
   })
+  const RECONSULTATION_TIME_MS = 1000
 
   const timerZero = () => {
     emit('onRetry')
 
     setCounter(0)
     clearInterval(interval)
-    setRetryButton(true, 'retrying')
-  }
 
-  const setRetryButton = (status, label) => {
-    return (retryButton.value = {
-      disabled: status,
-      label: label
-    })
+    retryButton.value = {
+      disabled: true,
+      label: 'retrying'
+    }
   }
 
   const setCounter = (number) => {

From 1766e150e473fa740365f111420a238aacc6212e Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Thu, 26 Sep 2024 14:01:57 -0300
Subject: [PATCH 07/11] [UXE-5064] feat: implements events in real time metrics
 (#1758)

* feat: implements events in real time metrics

* feat: create file to add event real time metrics
---
 .../constants/help-center-urls.js             |  8 ++--
 .../analytics/AnalyticsTrackerAdapter.js      | 13 +++++-
 .../trackers/RealTimeMetricsTracker.js        | 30 ++++++++++++++
 src/plugins/analytics/trackers/index.js       |  3 +-
 .../components/more-options-menu.vue          | 29 ++++++++++++-
 src/templates/graphs-card-block/index.vue     |  5 +++
 .../constants/reports.test.js                 |  3 +-
 .../RealTimeMetrics/RealTimeMetricsView.vue   | 21 +++++++++-
 .../blocks/content-filter-block.vue           | 19 ++++++++-
 .../blocks/dashboard-panel-block.vue          |  1 +
 .../blocks/interval-filter-block.vue          | 41 ++++++++++++++++++-
 11 files changed, 162 insertions(+), 11 deletions(-)
 create mode 100644 src/plugins/analytics/trackers/RealTimeMetricsTracker.js

diff --git a/src/modules/real-time-metrics/constants/help-center-urls.js b/src/modules/real-time-metrics/constants/help-center-urls.js
index 1f39c65a9..bea582d8c 100644
--- a/src/modules/real-time-metrics/constants/help-center-urls.js
+++ b/src/modules/real-time-metrics/constants/help-center-urls.js
@@ -86,11 +86,13 @@ const HELP_CENTER_URLS = {
       botTraffic: '/real-time-metrics/bot-manager-advanced/overview/bot-traffic',
       topBotAction: '/real-time-metrics/bot-manager-advanced/overview/top-bot-action',
       botCaptchaLine: '/real-time-metrics/bot-manager-advanced/overview/bot-captcha-line-graph',
-      topBotCaptchaPie: '/real-time-metrics/bot-manager-advanced/overview/top-bot-captcha-pie-graph',
-      topBotClassification: '/real-time-metrics/bot-manager-advanced/overview/top-bot-classifications',
+      topBotCaptchaPie:
+        '/real-time-metrics/bot-manager-advanced/overview/top-bot-captcha-pie-graph',
+      topBotClassification:
+        '/real-time-metrics/bot-manager-advanced/overview/top-bot-classifications',
       botActivityMap: '/real-time-metrics/bot-manager-advanced/overview/bot-activity-map'
     }
-  },
+  }
 }
 
 export default HELP_CENTER_URLS
diff --git a/src/plugins/analytics/AnalyticsTrackerAdapter.js b/src/plugins/analytics/AnalyticsTrackerAdapter.js
index 68587e4c5..4200d0e05 100644
--- a/src/plugins/analytics/AnalyticsTrackerAdapter.js
+++ b/src/plugins/analytics/AnalyticsTrackerAdapter.js
@@ -3,7 +3,8 @@ import {
   SignInTracker,
   CreateTracker,
   ProductTracker,
-  WafRulesTracker
+  WafRulesTracker,
+  RealTimeMetricsTracker
 } from './trackers'
 
 /**
@@ -35,6 +36,8 @@ export class AnalyticsTrackerAdapter {
   #productTracker = null
   /** @type {WafTracker} */
   #wafRulesTracker = null
+  /** @type {RealTimeMetricsTracker} */
+  #realTimeMetricsTracker = null
 
   /**
    * Creates an instance of AnalyticsTrackerAdapter.
@@ -49,6 +52,7 @@ export class AnalyticsTrackerAdapter {
     this.#createTracker = new CreateTracker(this)
     this.#productTracker = new ProductTracker(this)
     this.#wafRulesTracker = new WafRulesTracker(this)
+    this.#realTimeMetricsTracker = new RealTimeMetricsTracker(this)
   }
 
   /**
@@ -135,4 +139,11 @@ export class AnalyticsTrackerAdapter {
   get wafRules() {
     return this.#wafRulesTracker
   }
+
+  /**
+   * @return {RealTimeMetricsTracker}
+   */
+  get realTimeMetrics() {
+    return this.#realTimeMetricsTracker
+  }
 }
diff --git a/src/plugins/analytics/trackers/RealTimeMetricsTracker.js b/src/plugins/analytics/trackers/RealTimeMetricsTracker.js
new file mode 100644
index 000000000..b21dd8413
--- /dev/null
+++ b/src/plugins/analytics/trackers/RealTimeMetricsTracker.js
@@ -0,0 +1,30 @@
+export class RealTimeMetricsTracker {
+  /**
+   * Interface for TrackerAdapter.
+   * @typedef {Object} trackerAdapter
+   * @property {function({eventName: string, props: Object}): void} addEvent - Method to add an event.
+   */
+  #trackerAdapter
+
+  /**
+   * @param {trackerAdapter} trackerAdapter
+   */
+  constructor(adapter) {
+    this.#trackerAdapter = adapter
+  }
+
+  /**
+ * @param {Object} payload
+ * @param {AzionProductsNames} payload.productName
+ * @returns {AnalyticsTrackerAdapter}
+ */
+  clickedToRealTimeMetrics({ eventName, payload }) {
+    this.#trackerAdapter.addEvent({
+      eventName,
+      props: {
+        ...payload
+      }
+    })
+    return this.#trackerAdapter
+  }
+}
diff --git a/src/plugins/analytics/trackers/index.js b/src/plugins/analytics/trackers/index.js
index 326a99c82..629dda453 100644
--- a/src/plugins/analytics/trackers/index.js
+++ b/src/plugins/analytics/trackers/index.js
@@ -3,5 +3,6 @@ import { SignInTracker } from './SignInTracker'
 import { CreateTracker } from './CreateTracker'
 import { ProductTracker } from './ProductTracker'
 import { WafRulesTracker } from './WafRulesTracker'
+import { RealTimeMetricsTracker } from './RealTimeMetricsTracker'
 
-export { SignUpTracker, SignInTracker, CreateTracker, ProductTracker, WafRulesTracker }
+export { SignUpTracker, SignInTracker, CreateTracker, ProductTracker, WafRulesTracker, RealTimeMetricsTracker }
diff --git a/src/templates/graphs-card-block/components/more-options-menu.vue b/src/templates/graphs-card-block/components/more-options-menu.vue
index 13ed18ca6..e54f826d4 100644
--- a/src/templates/graphs-card-block/components/more-options-menu.vue
+++ b/src/templates/graphs-card-block/components/more-options-menu.vue
@@ -24,13 +24,17 @@
   import { useHelpCenterStore } from '@/stores/help-center'
   import PrimeButton from 'primevue/button'
   import PrimeMenu from 'primevue/menu'
-  import { computed, ref, toRef } from 'vue'
+  import { computed, ref, toRef, inject } from 'vue'
+
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
 
   const helpCenterStore = useHelpCenterStore()
 
   const props = defineProps({
     report: { type: Object, required: true },
-    clipboardWrite: { type: Function, required: true }
+    clipboardWrite: { type: Function, required: true },
+    groupData: { type: Object, required: true }
   })
 
   const reportData = toRef(props, 'report')
@@ -79,10 +83,12 @@
   }
 
   const openHelpCenter = async () => {
+    clickedToRealTimeMetrics('helpCenter')
     await helpCenterStore.setArticleContent({ url: reportData.value.helpCenterPath })
   }
 
   const exportCSV = () => {
+    clickedToRealTimeMetrics('exportCsv')
     const csvFormattedSheet = generateCSV()
     if (!csvFormattedSheet) return false
 
@@ -120,6 +126,7 @@
   }
 
   const copyQuery = async () => {
+    clickedToRealTimeMetrics('copyQuery')
     const { query, variables } = reportData.value.reportQuery
     const clipboardQuery = formatGQL(query, variables)
     await props.clipboardWrite(clipboardQuery)
@@ -154,10 +161,28 @@
   }
 
   const toggleMeanLine = () => {
+    clickedToRealTimeMetrics('showMeanLine')
     reportData.value.showMeanLine = !reportData.value.showMeanLine
   }
 
   const toggleMeanLinePerSeries = () => {
+    clickedToRealTimeMetrics('showMeanLinePerSeries')
     reportData.value.showMeanLinePerSeries = !reportData.value.showMeanLinePerSeries
   }
+
+  const clickedToRealTimeMetrics = (option) => {
+    const eventName = 'Clicked on More Options on Real-Time Metrics'
+    const payload = {
+      section: props.groupData.current.value,
+      page: props.groupData.currentPage.label,
+      chart: props.report.label,
+      option
+    }
+    tracker.realTimeMetrics
+      .clickedToRealTimeMetrics({
+        eventName,
+        payload
+      })
+      .track()
+  }
 </script>
diff --git a/src/templates/graphs-card-block/index.vue b/src/templates/graphs-card-block/index.vue
index cf990c5f1..84d2d683f 100644
--- a/src/templates/graphs-card-block/index.vue
+++ b/src/templates/graphs-card-block/index.vue
@@ -13,6 +13,7 @@
       <MoreOptionsMenu
         :report="report"
         :clipboardWrite="clipboardWrite"
+        :groupData="groupData"
       />
     </header>
     <div class="flex h-full flex-col gap-6 flex-auto">
@@ -67,6 +68,10 @@
     report: {
       type: Object,
       required: true
+    },
+    groupData: {
+      type: Object,
+      required: true
     }
   })
 
diff --git a/src/tests/modules/real-time-metrics/constants/reports.test.js b/src/tests/modules/real-time-metrics/constants/reports.test.js
index a876f3328..ee0b5c103 100644
--- a/src/tests/modules/real-time-metrics/constants/reports.test.js
+++ b/src/tests/modules/real-time-metrics/constants/reports.test.js
@@ -1045,7 +1045,8 @@ describe('RealTimeMetricsModule', () => {
           orderDirection: 'DESC',
           dashboardId: '371360344901061482',
           variationType: 'regular',
-          helpCenterPath: '/real-time-metrics/bot-manager-advanced/overview/top-bot-captcha-pie-graph'
+          helpCenterPath:
+            '/real-time-metrics/bot-manager-advanced/overview/top-bot-captcha-pie-graph'
         },
         {
           id: '424388331488145485',
diff --git a/src/views/RealTimeMetrics/RealTimeMetricsView.vue b/src/views/RealTimeMetrics/RealTimeMetricsView.vue
index 1e1f3088f..35e96a92b 100644
--- a/src/views/RealTimeMetrics/RealTimeMetricsView.vue
+++ b/src/views/RealTimeMetrics/RealTimeMetricsView.vue
@@ -27,6 +27,7 @@
           :filterData="filterData"
           :userUTC="userUTC"
           @applyTSRange="load"
+          :groupData="groupData"
         />
         <ContentFilterBlock
           :key="filterData.current?.id"
@@ -59,13 +60,16 @@
   import RealTimeMetricsModule from '@/modules/real-time-metrics'
   import ContentBlock from '@/templates/content-block'
   import PageHeadingBlock from '@/templates/page-heading-block'
-  import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+  import { computed, onMounted, onUnmounted, ref, watch, inject } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
   import ContentFilterBlock from './blocks/content-filter-block.vue'
   import DashboardPanelBlock from './blocks/dashboard-panel-block.vue'
   import IntervalFilterBlock from './blocks/interval-filter-block.vue'
   import TabsPageBlock from './blocks/tabs-page-block'
 
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   defineProps({
     playgroundOpener: {
       type: Function,
@@ -173,12 +177,27 @@
     })
   }
 
+  const clickedToRealTimeMetrics = ({ eventName, payload }) => {
+    tracker.realTimeMetrics
+      .clickedToRealTimeMetrics({
+        eventName,
+        payload
+      })
+      .track()
+  }
+
   const currentInfo = computed(() => {
     if (!groupData.value) return
     return getCurrentInfo({ group: groupData.value })
   })
 
   watch(currentInfo, () => {
+    const eventName = 'Clicked to View Real-Time Metrics'
+    const payload = {
+      section: currentInfo.value.Group,
+      page: currentInfo.value.Page
+    }
+    clickedToRealTimeMetrics({ eventName, payload })
     setTimeout(() => {
       updateRouter()
     }, 100)
diff --git a/src/views/RealTimeMetrics/blocks/content-filter-block.vue b/src/views/RealTimeMetrics/blocks/content-filter-block.vue
index 8e822b7ae..a3cddcbc2 100644
--- a/src/views/RealTimeMetrics/blocks/content-filter-block.vue
+++ b/src/views/RealTimeMetrics/blocks/content-filter-block.vue
@@ -1,7 +1,7 @@
 <script setup>
   import PrimeButton from 'primevue/button'
   import advancedFilter from '@/templates/advanced-filter'
-  import { computed, ref, watch } from 'vue'
+  import { computed, ref, watch, inject } from 'vue'
   import { MAP_SERVICE_OPERATION } from '@modules/real-time-metrics/constants'
   import { GetRelevantField } from '@/modules/real-time-metrics/filters'
 
@@ -16,6 +16,9 @@
   const { setTimeRange, filterDatasetUpdate, createAndFilter, loadCurrentReports, resetFilters } =
     props.moduleActions
 
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   const emit = defineEmits(['clearHash'])
   const props = defineProps({
     playgroundOpener: {
@@ -155,7 +158,21 @@
     })
   }
 
+  const clickedAppliedFilterOnRealTimeMetrics = () => {
+    const payload = {
+      section: props.groupData.current.value,
+      page: props.groupData.currentPage.label
+    }
+    tracker.realTimeMetrics
+      .clickedToRealTimeMetrics({
+        eventName: 'Applied Filter on Real-Time Metrics',
+        payload
+      })
+      .track()
+  }
+
   const applyFilter = async (filter) => {
+    clickedAppliedFilterOnRealTimeMetrics()
     resetFilters()
 
     filter?.forEach((item) => {
diff --git a/src/views/RealTimeMetrics/blocks/dashboard-panel-block.vue b/src/views/RealTimeMetrics/blocks/dashboard-panel-block.vue
index 466a7f871..8f36df03d 100644
--- a/src/views/RealTimeMetrics/blocks/dashboard-panel-block.vue
+++ b/src/views/RealTimeMetrics/blocks/dashboard-panel-block.vue
@@ -116,6 +116,7 @@
       >
         <GraphsCardBlock
           :report="report"
+          :groupData="groupData"
           :clipboardWrite="clipboardWrite"
         />
       </template>
diff --git a/src/views/RealTimeMetrics/blocks/interval-filter-block.vue b/src/views/RealTimeMetrics/blocks/interval-filter-block.vue
index be23d322a..70f65882e 100644
--- a/src/views/RealTimeMetrics/blocks/interval-filter-block.vue
+++ b/src/views/RealTimeMetrics/blocks/interval-filter-block.vue
@@ -2,7 +2,7 @@
   import { TIME_INTERVALS } from '@modules/real-time-metrics/constants'
   import Calendar from 'primevue/calendar'
   import Dropdown from 'primevue/dropdown'
-  import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+  import { computed, onMounted, onUnmounted, ref, watch, inject } from 'vue'
 
   const props = defineProps({
     moduleActions: {
@@ -20,9 +20,16 @@
     userUTC: {
       type: String,
       required: true
+    },
+    groupData: {
+      type: Object,
+      required: true
     }
   })
 
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
+
   const { setTimeRange } = props.moduleActions
 
   const { currentFilters, getIsLoadingFilters } = props.moduleGetters
@@ -63,6 +70,36 @@
     return hasError.value ? 'p-invalid' : ''
   })
 
+  const clickedOnTimeRangerRealTimeMetrics = () => {
+    const payload = {
+      product: 'Real-Time Metrics',
+      section: props.groupData.current.value,
+      page: props.groupData.currentPage.label,
+      option: interval.value.code === 'custom' ? 'none' : interval.value.name
+    }
+    tracker.realTimeMetrics
+      .clickedToRealTimeMetrics({
+        eventName: 'Clicked on Time Range',
+        payload
+      })
+      .track()
+  }
+
+  const clickedOnDatePickerRealTimeMetrics = () => {
+    const payload = {
+      product: 'Real-Time Metrics',
+      section: props.groupData.current.value,
+      page: props.groupData.currentPage.label,
+      option: interval.value.code === 'custom' ? 'none' : interval.value.name
+    }
+    tracker.realTimeMetrics
+      .clickedToRealTimeMetrics({
+        eventName: 'Clicked on Date Picker',
+        payload
+      })
+      .track()
+  }
+
   const updateCurrentTime = () => {
     const max = new Date().removeSelectedAmountOfHours(0)
     maxDate.value = max.toUTC(props.userUTC)
@@ -145,6 +182,7 @@
   }
 
   const showCalendar = () => {
+    clickedOnDatePickerRealTimeMetrics()
     isVisibleCalendar.value = false
   }
 
@@ -178,6 +216,7 @@
         :options="intervalOptions"
         optionLabel="name"
         @change="dropdownChange"
+        @click="clickedOnTimeRangerRealTimeMetrics()"
         :loading="disabledFilter"
         :disabled="disabledFilter"
         data-testid="real-time-metrics__interval-filter-block__dropdown"

From 5a70fdbec29dca870a654c2f020c1e37a5764b3c Mon Sep 17 00:00:00 2001
From: Lucas Mendes <92529166+lucasmendes21@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:54:11 -0300
Subject: [PATCH 08/11] chore: upgrade project version from 1.22.3 to 1.22.4
 (#1761)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6affa2eb4..0857657a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "azion-console-kit",
-  "version": "1.22.3",
+  "version": "1.22.4",
   "private": false,
   "type": "module",
   "repository": {

From a2fb6fbf2dff42451382062a3c36283933eab07d Mon Sep 17 00:00:00 2001
From: William <william.tome@azion.com>
Date: Fri, 27 Sep 2024 08:56:03 -0300
Subject: [PATCH 09/11] [UXE-5100] feat: add breakdown dashboard in bot manager
 advanced page (#1749)

* fix: adjust lower limit in map chart legend

* refactor: adjust variationType for botCaptcha chart

* feat: add breakdown dashboard to botmanager page

* feat: add new reports to botmanager breakdown

* refactor: adjust data unit of impacted urls

* refactor: remove duplicated fields in query

* test: update tests after inclusion of new charts

* refactor: update report xAxis

* fix: adjust tooltip and label for large names

* test: update tests after inclusion of new charts

* test: add dummy text to new reports and update tests

* refactor: rename bot captcha series

* refactor: add description and help center links to new charts

* refactor: add filter validations for botmanager

* feat: add botcategoryin filter and tests

* fix: remove datasets object from gql

* test: resolve tests after adding botcategoryin filter

* test: resolve tests after removing filters from botcaptcha reports

* feat: add no data state and label for empty chart

* refactor: adjust lagend and map colors

* fix: adjust dashboard trigger on null

* fix: adjust legend label

* refactor: update metrics filter queries
---
 src/assets/c3.scss                            |   1 +
 src/helpers/real-time-filters-rules.js        |   7 +-
 .../chart/format-c3-graph-props.js            |   4 +-
 .../real-time-metrics/constants/dashboards.js |   6 +
 .../constants/help-center-urls.js             |   7 +-
 .../constants/reports-texts.js                |  14 +-
 .../real-time-metrics/constants/reports.js    | 149 ++++++++++++++----
 .../constants/services-operator-in.js         |   6 +-
 src/modules/real-time-metrics/index.js        |   8 +-
 .../reports/convert-beholder-to-chart.js      |  22 ++-
 .../reports/convert-report-meta-to-gql.js     |   3 +-
 .../real-time-metrics-services/index.js       |   4 +-
 .../search-bot-category-service.js            |   8 +
 .../component/fields/multiselect-filter.vue   |   6 +-
 .../advanced-filter/component/index.js        |   3 +-
 .../components/map/constants/color-scheme.js  | 120 ++++++++------
 .../map/map-chart-blocks/map-legend-block.vue |  39 +++--
 .../map-chart-blocks/map-tooltip-block.vue    |   2 +-
 .../components/map/map-chart.vue              |  21 +--
 .../components/map/utils/features-handler.js  |  24 +--
 src/templates/graphs-card-block/index.vue     |  29 ++--
 .../helpers/realt-time-filter-rules.test.js   |  14 +-
 .../constants/dashboards.test.js              |   6 +
 .../map-services-operator-in.test.js          |   3 +-
 .../constants/reports.test.js                 | 104 +++++++++++-
 .../reports/fixtures/gql-fixtures.js          | 132 +++++++++++++++-
 .../search-bot-category-service.test.js       |  35 ++++
 .../blocks/dashboard-panel-block.vue          |   1 +
 tailwind.config.js                            |  12 +-
 29 files changed, 614 insertions(+), 176 deletions(-)
 create mode 100644 src/services/real-time-metrics-services/search-bot-category-service.js
 create mode 100644 src/tests/services/real-time-metrics-services/search-bot-category-service.test.js

diff --git a/src/assets/c3.scss b/src/assets/c3.scss
index aa5718624..a866ff7d2 100644
--- a/src/assets/c3.scss
+++ b/src/assets/c3.scss
@@ -191,6 +191,7 @@ C3 dependency omits its styling for some reason. Thus it was needed to add this
   border: 1px solid var(--surface-border);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   width: max-content;
+  max-width: 500px;
 }
 
 .c3-tooltip {
diff --git a/src/helpers/real-time-filters-rules.js b/src/helpers/real-time-filters-rules.js
index 4769f659d..3835d4129 100644
--- a/src/helpers/real-time-filters-rules.js
+++ b/src/helpers/real-time-filters-rules.js
@@ -10,8 +10,8 @@ const FILTER_BLACK_LIST = [
   'naxsiAttackFamilyIlike'
 ]
 
-const SUPPORTED_FILTER_TYPE = ['String', 'Int', 'Float', 'IntRange', 'FloatRange']
-const FIELDS_LIKE = ['configurationIdIn', 'zoneIdIn', 'edgeFunctionIdIn']
+const SUPPORTED_FILTER_TYPE = ['String', 'Int', 'Float', 'IntRange', 'FloatRange', 'GenericScalar']
+const FIELDS_LIKE = ['configurationIdIn', 'zoneIdIn', 'edgeFunctionIdIn', 'botCategoryIn']
 
 const ALIAS_MAPPING = {
   configurationId: 'domain'
@@ -52,7 +52,8 @@ const MOST_RELEVANT_FIELDS = {
 const FILTER_LIKE_TYPE = {
   configurationIdIn: 'ArrayObject',
   zoneIdIn: 'ArrayObject',
-  edgeFunctionIdIn: 'ArrayObject'
+  edgeFunctionIdIn: 'ArrayObject',
+  botCategoryIn: 'ArrayObject'
 }
 
 const FILTER_LIKE_ALIAS = {
diff --git a/src/modules/real-time-metrics/chart/format-c3-graph-props.js b/src/modules/real-time-metrics/chart/format-c3-graph-props.js
index 4c8e5a024..a3d787a8f 100644
--- a/src/modules/real-time-metrics/chart/format-c3-graph-props.js
+++ b/src/modules/real-time-metrics/chart/format-c3-graph-props.js
@@ -108,7 +108,9 @@ export function formatC3XAxis(chartData, resultChart) {
     xAxis.min = CHART_RULES.RESET_COUNT
     xAxis.tick = {
       ...xAxis.tick,
-      width: CHART_RULES.LABEL.rotatedWidth
+      width: CHART_RULES.LABEL.rotatedWidth,
+      multiline: true,
+      multilineMax: 2
     }
   }
 
diff --git a/src/modules/real-time-metrics/constants/dashboards.js b/src/modules/real-time-metrics/constants/dashboards.js
index b950572c9..5a8c636b0 100644
--- a/src/modules/real-time-metrics/constants/dashboards.js
+++ b/src/modules/real-time-metrics/constants/dashboards.js
@@ -139,6 +139,12 @@ const PAGES_DASHBOARDS = {
           label: 'Overview',
           path: 'overview',
           dataset: 'botManagerMetrics'
+        },
+        {
+          id: '659868342290523846',
+          label: 'Breakdown',
+          path: 'breakdown',
+          dataset: 'securityMetrics'
         }
       ]
     }
diff --git a/src/modules/real-time-metrics/constants/help-center-urls.js b/src/modules/real-time-metrics/constants/help-center-urls.js
index bea582d8c..54bbf3243 100644
--- a/src/modules/real-time-metrics/constants/help-center-urls.js
+++ b/src/modules/real-time-metrics/constants/help-center-urls.js
@@ -78,7 +78,7 @@ const HELP_CENTER_URLS = {
     }
   },
   botManager: {
-    botManagerSummary: {
+    botManagerOverview: {
       badBotHits: '/real-time-metrics/bot-manager-advanced/overview/bad-bot-hits',
       goodBotHits: '/real-time-metrics/bot-manager-advanced/overview/good-bot-hits',
       botHits: '/real-time-metrics/bot-manager-advanced/overview/bot-hits',
@@ -91,6 +91,11 @@ const HELP_CENTER_URLS = {
       topBotClassification:
         '/real-time-metrics/bot-manager-advanced/overview/top-bot-classifications',
       botActivityMap: '/real-time-metrics/bot-manager-advanced/overview/bot-activity-map'
+    },
+    botManagerBreakdown: {
+      impactedUrls: '/real-time-metrics/bot-manager-advanced/breakdown/impacted-urls',
+      topIps: '/real-time-metrics/bot-manager-advanced/breakdown/top-ips',
+      topImpactedUrls: '/real-time-metrics/bot-manager-advanced/breakdown/top-impacted-urls'
     }
   }
 }
diff --git a/src/modules/real-time-metrics/constants/reports-texts.js b/src/modules/real-time-metrics/constants/reports-texts.js
index deebd1cbc..5aecd86dd 100644
--- a/src/modules/real-time-metrics/constants/reports-texts.js
+++ b/src/modules/real-time-metrics/constants/reports-texts.js
@@ -175,7 +175,7 @@ const REPORTS_TEXTS = {
     }
   },
   botManager: {
-    botManagerSummary: {
+    botManagerOverview: {
       badBotHits: {
         description: 'Number of requests identified as bad bots.'
       },
@@ -206,6 +206,18 @@ const REPORTS_TEXTS = {
       botActivityMap: {
         description: 'Sum of requests identified as bots, presented by the country of origin.'
       }
+    },
+    botManagerBreakdown: {
+      impactedUrls: {
+        description: 'Sum of the detected bot actions, broken down by the affected URLs.'
+      },
+      topIps: {
+        description:
+          'Sum of the detected bot actions, broken down by the highest-ranking IP addresses.'
+      },
+      topImpactedUrls: {
+        description: 'Sum of the detected bot actions, broken down by the most affected URLs.'
+      }
     }
   }
 }
diff --git a/src/modules/real-time-metrics/constants/reports.js b/src/modules/real-time-metrics/constants/reports.js
index 57b3167c6..d58f70c9a 100644
--- a/src/modules/real-time-metrics/constants/reports.js
+++ b/src/modules/real-time-metrics/constants/reports.js
@@ -832,13 +832,13 @@ const REPORTS = [
   },
   /**
    * SECURE
-   * Bot Manager - Bot Manager Summary
+   * Bot Manager - Bot Manager Overview
    */
   {
     id: '892249168369791027',
     chartOwner: 'azion',
     label: 'Bad Bot Hits',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.badBotHits.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.badBotHits.description,
     aggregationType: 'sum',
     columns: 3,
     type: 'big-numbers',
@@ -862,13 +862,13 @@ const REPORTS = [
     orderDirection: 'DESC',
     dashboardId: '371360344901061482',
     variationType: 'inverse',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.badBotHits
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.badBotHits
   },
   {
     id: '934654293238823255',
     chartOwner: 'azion',
     label: 'Good Bot Hits',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.goodBotHits.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.goodBotHits.description,
     aggregationType: 'sum',
     columns: 3,
     type: 'big-numbers',
@@ -892,13 +892,13 @@ const REPORTS = [
     orderDirection: 'DESC',
     dashboardId: '371360344901061482',
     variationType: 'neutral',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.goodBotHits
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.goodBotHits
   },
   {
     id: '259047966206560862',
     chartOwner: 'azion',
     label: 'Bot Hits',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.botHits.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.botHits.description,
     aggregationType: 'sum',
     columns: 3,
     type: 'big-numbers',
@@ -922,13 +922,13 @@ const REPORTS = [
     orderDirection: 'DESC',
     dashboardId: '371360344901061482',
     variationType: 'inverse',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.botHits
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.botHits
   },
   {
     id: '541669034905662013',
     chartOwner: 'azion',
     label: 'Transactions',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.transactions.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.transactions.description,
     aggregationType: 'sum',
     columns: 3,
     type: 'big-numbers',
@@ -949,13 +949,13 @@ const REPORTS = [
     orderDirection: 'DESC',
     dashboardId: '371360344901061482',
     variationType: 'neutral',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.transactions
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.transactions
   },
   {
     id: '329891149133127508',
     chartOwner: 'azion',
     label: 'Bot Traffic',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.botTraffic.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.botTraffic.description,
     aggregationType: 'sum',
     columns: 6,
     type: 'line',
@@ -975,13 +975,13 @@ const REPORTS = [
     orderDirection: 'ASC',
     dashboardId: '371360344901061482',
     variationType: 'regular',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.botTraffic
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.botTraffic
   },
   {
     id: '577704475532819772',
     chartOwner: 'azion',
     label: 'Top Bot Action',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.botAction.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.botAction.description,
     aggregationType: 'sum',
     columns: 6,
     type: 'pie',
@@ -1007,13 +1007,13 @@ const REPORTS = [
     orderDirection: 'DESC',
     dashboardId: '371360344901061482',
     variationType: 'regular',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.topBotAction
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.topBotAction
   },
   {
     id: '071851224118431167',
     chartOwner: 'azion',
     label: 'Bot CAPTCHA',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.botCaptcha.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.botCaptcha.description,
     aggregationType: 'sum',
     columns: 6,
     type: 'line',
@@ -1028,21 +1028,19 @@ const REPORTS = [
         variable: 'requests'
       }
     ],
-    filters: {
-      actionEq: 'redirect'
-    },
+    filters: {},
     limit: 5000,
     groupBy: ['challengeSolved'],
     orderDirection: 'ASC',
     dashboardId: '371360344901061482',
-    variationType: 'regular',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.botCaptchaLine
+    variationType: 'inverse',
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.botCaptchaLine
   },
   {
     id: '455330743572401794',
     chartOwner: 'azion',
     label: 'Top Bot CAPTCHA',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.botCaptcha.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.botCaptcha.description,
     aggregationType: 'sum',
     columns: 6,
     type: 'pie',
@@ -1057,22 +1055,20 @@ const REPORTS = [
         variable: 'requests'
       }
     ],
-    filters: {
-      actionEq: 'redirect'
-    },
+    filters: {},
     limit: 2,
     groupBy: ['challengeSolved'],
     fields: ['challengeSolved'],
     orderDirection: 'DESC',
     dashboardId: '371360344901061482',
     variationType: 'regular',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.topBotCaptchaPie
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.topBotCaptchaPie
   },
   {
     id: '424388331488145485',
     chartOwner: 'azion',
     label: 'Top Bot Classifications',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.botClassification.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.botClassification.description,
     aggregationType: 'sum',
     columns: 6,
     type: 'ordered-bar',
@@ -1098,13 +1094,13 @@ const REPORTS = [
     orderDirection: 'DESC',
     dashboardId: '371360344901061482',
     variationType: 'regular',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.topBotClassification
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.topBotClassification
   },
   {
     id: '190246009413028885',
     chartOwner: 'azion',
     label: 'Bot Activity Map',
-    description: REPORTS_TEXTS.botManager.botManagerSummary.botActivityMap.description,
+    description: REPORTS_TEXTS.botManager.botManagerOverview.botActivityMap.description,
     aggregationType: 'sum',
     columns: 6,
     type: 'map',
@@ -1128,7 +1124,104 @@ const REPORTS = [
     orderDirection: 'ASC',
     dashboardId: '371360344901061482',
     variationType: 'regular',
-    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerSummary.botActivityMap
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerOverview.botActivityMap
+  },
+  /**
+   * SECURE
+   * Bot Manager - Bot Manager Breakdown
+   */
+  {
+    id: '847143804009563421',
+    chartOwner: 'azion',
+    label: 'Impacted URLs',
+    description: REPORTS_TEXTS.botManager.botManagerBreakdown.impactedUrls.description,
+    aggregationType: 'sum',
+    columns: 3,
+    type: 'big-numbers',
+    xAxis: 'ts',
+    isTopX: false,
+    rotated: false,
+    dataset: 'securityMetrics',
+    dataUnit: 'count',
+    limit: 10000,
+    aggregations: [
+      {
+        aggregation: 'sum',
+        variable: 'value'
+      }
+    ],
+    filters: {
+      metricEq: 'uniq_request_url',
+      datasetEq: 'bot_manager'
+    },
+    groupBy: [],
+    fields: [],
+    orderDirection: 'DESC',
+    dashboardId: '659868342290523846',
+    variationType: 'inverse',
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerBreakdown.impactedUrls
+  },
+  {
+    id: '978435123222265554',
+    chartOwner: 'azion',
+    label: 'Top IPs',
+    description: REPORTS_TEXTS.botManager.botManagerBreakdown.topIps.description,
+    aggregationType: 'sum',
+    columns: 6,
+    type: 'ordered-bar',
+    xAxis: 'cat',
+    isTopX: true,
+    rotated: true,
+    dataUnit: 'count',
+    dataset: 'securityMetrics',
+    aggregations: [
+      {
+        aggregation: 'sum',
+        variable: 'value'
+      }
+    ],
+    filters: {
+      datasetEq: 'bot_manager',
+      metricEq: 'top_remote_addr'
+    },
+    limit: 10,
+    groupBy: ['dimension1'],
+    fields: ['dimension1'],
+    orderDirection: 'DESC',
+    dashboardId: '659868342290523846',
+    variationType: 'regular',
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerBreakdown.topIps
+  },
+  {
+    id: '1030427483148242',
+    chartOwner: 'azion',
+    label: 'Top Impacted URLs',
+    description: REPORTS_TEXTS.botManager.botManagerBreakdown.topImpactedUrls.description,
+    aggregationType: 'sum',
+    columns: 6,
+    type: 'ordered-bar',
+    xAxis: 'cat',
+    isTopX: true,
+    rotated: true,
+    dataUnit: 'count',
+    dataset: 'securityMetrics',
+    aggregations: [
+      {
+        aggregation: 'sum',
+        variable: 'value'
+      }
+    ],
+    filters: {
+      datasetEq: 'bot_manager',
+      metricEq: 'top_request_url'
+    },
+    limit: 10,
+    groupBy: ['dimension1'],
+    fields: ['dimension1'],
+    orderDirection: 'DESC',
+    dashboardId: '659868342290523846',
+    variationType: 'regular',
+    helpCenterPath: HELP_CENTER_URLS.botManager.botManagerBreakdown.topImpactedUrls
   },
   /**
    * OBSERVE
diff --git a/src/modules/real-time-metrics/constants/services-operator-in.js b/src/modules/real-time-metrics/constants/services-operator-in.js
index a2ba4b254..53276b153 100644
--- a/src/modules/real-time-metrics/constants/services-operator-in.js
+++ b/src/modules/real-time-metrics/constants/services-operator-in.js
@@ -1,13 +1,15 @@
 import {
   searchEdgeFunctionsService,
   searchDomainsService,
-  searchEdgeDnsService
+  searchEdgeDnsService,
+  searchBotCategoryService
 } from '@/services/real-time-metrics-services'
 
 const MAP_SERVICE_OPERATION = {
   configurationIdIn: searchDomainsService,
   zoneIdIn: searchEdgeDnsService,
-  edgeFunctionIdIn: searchEdgeFunctionsService
+  edgeFunctionIdIn: searchEdgeFunctionsService,
+  botCategoryIn: searchBotCategoryService
 }
 
 export default MAP_SERVICE_OPERATION
diff --git a/src/modules/real-time-metrics/index.js b/src/modules/real-time-metrics/index.js
index f8cef5392..bd01da13c 100644
--- a/src/modules/real-time-metrics/index.js
+++ b/src/modules/real-time-metrics/index.js
@@ -301,10 +301,16 @@ const setCurrentReportValue = (reportInfo) => {
 
   if (reportIdx < 0) return
 
+  if (Array.isArray(reportInfo.resultQuery[0]) && !reportInfo.resultQuery[0][1]) {
+    reportInfo.resultQuery = []
+  }
+
   reports.current[reportIdx] = {
     ...reports.current[reportIdx],
-    ...reportInfo
+    ...reportInfo,
+    done: true
   }
+
   notify(reportObservers, reports)
 }
 
diff --git a/src/modules/real-time-metrics/reports/convert-beholder-to-chart.js b/src/modules/real-time-metrics/reports/convert-beholder-to-chart.js
index c80448fb0..3e272235f 100644
--- a/src/modules/real-time-metrics/reports/convert-beholder-to-chart.js
+++ b/src/modules/real-time-metrics/reports/convert-beholder-to-chart.js
@@ -330,6 +330,18 @@ const formatTsChartData = ({
   })
 
   const seriesArray = fillSeriesWithZeroes(series, countValues)
+
+  if (report.id === '071851224118431167') {
+    seriesArray.forEach((serie) => {
+      // linter complains about ternary
+      if (serie[0] === 'false') {
+        serie[0] = 'Not Solved'
+      }
+      if (serie[0] === 'true') {
+        serie[0] = 'Solved'
+      }
+    })
+  }
   // ensures that the X-axis is the first set of data.
   return [xAxisData, ...seriesArray]
 }
@@ -429,7 +441,11 @@ const formatBigNumbers = ({ report, data }) => {
   const aggregation = report.aggregationType
 
   const total = data[dataset].reduce((acc, current) => acc + current[aggregation || fieldName], 0)
-  const { unit, value } = formatDataUnit(total, report)
+  let { unit, value } = formatDataUnit(total, report)
+
+  if (report.id === '847143804009563421') {
+    unit = 'URLs'
+  }
 
   return [
     {
@@ -504,6 +520,10 @@ const formatMapChartData = ({ report, data }) => {
     return result
   })
 
+  if (!heatmap.length) {
+    return []
+  }
+
   return [
     {
       bubbles: [],
diff --git a/src/modules/real-time-metrics/reports/convert-report-meta-to-gql.js b/src/modules/real-time-metrics/reports/convert-report-meta-to-gql.js
index ae9f0499a..33bb89be3 100644
--- a/src/modules/real-time-metrics/reports/convert-report-meta-to-gql.js
+++ b/src/modules/real-time-metrics/reports/convert-report-meta-to-gql.js
@@ -123,6 +123,7 @@ export default class GqlRules {
 
     if (Object.keys(this.filters).length) {
       Object.keys(this.queryFilters).forEach((key) => {
+        if (key === 'datasets') return // used internally by the advanced filter
         filtersStr += FiltersToGraphQLString(key, this.queryFilters[key])
       })
     }
@@ -150,7 +151,7 @@ export default class GqlRules {
           ${filtersStr}
         }
         ) {
-          ${fields.join('\n')}
+          ${[...new Set(fields)].join('\n')}
         }
       }`
 
diff --git a/src/services/real-time-metrics-services/index.js b/src/services/real-time-metrics-services/index.js
index 48fa6ea05..43de7374a 100644
--- a/src/services/real-time-metrics-services/index.js
+++ b/src/services/real-time-metrics-services/index.js
@@ -2,10 +2,12 @@ import { searchDomainsService } from './search-domains-service'
 import { searchEdgeDnsService } from './search-edge-dns-service'
 import { searchEdgeFunctionsService } from './search-edge-functions'
 import { loadRealTimeMetricsData } from './load-real-time-metrics-data'
+import { searchBotCategoryService } from './search-bot-category-service'
 
 export {
   searchDomainsService,
   searchEdgeDnsService,
   searchEdgeFunctionsService,
-  loadRealTimeMetricsData
+  loadRealTimeMetricsData,
+	searchBotCategoryService
 }
diff --git a/src/services/real-time-metrics-services/search-bot-category-service.js b/src/services/real-time-metrics-services/search-bot-category-service.js
new file mode 100644
index 000000000..2b33c5aad
--- /dev/null
+++ b/src/services/real-time-metrics-services/search-bot-category-service.js
@@ -0,0 +1,8 @@
+export const searchBotCategoryService = () => {
+  return [
+    { label: 'Legitimate', value: 'legitimate' },
+    { label: 'Good Bot', value: 'good bot' },
+    { label: 'Bad Bot', value: 'bad bot' },
+    { label: 'Under Evaluation', value: 'under evaluation' }
+  ]
+}
diff --git a/src/templates/advanced-filter/component/fields/multiselect-filter.vue b/src/templates/advanced-filter/component/fields/multiselect-filter.vue
index 3d12cc00b..4282b5ba9 100644
--- a/src/templates/advanced-filter/component/fields/multiselect-filter.vue
+++ b/src/templates/advanced-filter/component/fields/multiselect-filter.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { computed, ref } from 'vue'
+  import { computed, ref, onMounted } from 'vue'
   import MultiSelect from 'primevue/multiselect'
   import * as yup from 'yup'
   import { useField } from 'vee-validate'
@@ -79,7 +79,9 @@
     }
   }
 
-  serviceIn()
+  onMounted(() => {
+    serviceIn()
+  })
 </script>
 <template>
   <div class="flex flex-col w-full sm:w-full gap-2">
diff --git a/src/templates/advanced-filter/component/index.js b/src/templates/advanced-filter/component/index.js
index ed62eccda..b575ee29e 100644
--- a/src/templates/advanced-filter/component/index.js
+++ b/src/templates/advanced-filter/component/index.js
@@ -14,7 +14,8 @@ export const FIELDS_MAPPING = {
   IntRange: h(numberRangeFilter),
   FloatRange: h(floatRangeFilter),
   ArrayObject: h(multiselectFilter),
-  ArrayString: h(chipsFilter)
+  ArrayString: h(chipsFilter),
+  GenericScalar: h(textFilter)
 }
 
 export const OPERATOR_MAPPING = {
diff --git a/src/templates/graphs-card-block/components/map/constants/color-scheme.js b/src/templates/graphs-card-block/components/map/constants/color-scheme.js
index cd913c13e..abf4113c5 100644
--- a/src/templates/graphs-card-block/components/map/constants/color-scheme.js
+++ b/src/templates/graphs-card-block/components/map/constants/color-scheme.js
@@ -1,75 +1,91 @@
 const COLORS = {
   light: {
-    green: {
-      fillColor: '#6bd69080',
-      strokeColor: '#6bd690'
+    limit1: {
+      fillColor: '#f1e8ca',
+      strokeColor: '#f6de95'
     },
-    yellow: {
-      fillColor: '#f0ca5b80',
-      strokeColor: '#f0ca5b'
+    limit2: {
+      fillColor: '#f3d2bb',
+      strokeColor: '#fba86f'
     },
-    orange: {
-      fillColor: '#fa9e6480',
-      strokeColor: '#fa9e64'
+    limit3: {
+      fillColor: '#f3c8a9',
+      strokeColor: '#fa8e42'
     },
-    red: {
-      fillColor: '#f05a5a80',
-      strokeColor: '#f05a5a'
+    limit4: {
+      fillColor: '#f5c5c2',
+      strokeColor: '#ff8780'
+    },
+    limit5: {
+      fillColor: '#f5b6b2',
+      strokeColor: '#ff6259'
     }
   },
 
   dark: {
-    green: {
-      fillColor: '#6bd69080',
-      strokeColor: '#6bd690'
+    limit1: {
+      fillColor: '#776d50',
+      strokeColor: '#f6de95'
+    },
+    limit2: {
+      fillColor: '#795841',
+      strokeColor: '#fba86f'
     },
-    yellow: {
-      fillColor: '#f0ca5b80',
-      strokeColor: '#f0ca5b'
+    limit3: {
+      fillColor: '#784d2f',
+      strokeColor: '#fa8e42'
     },
-    orange: {
-      fillColor: '#fa9e6480',
-      strokeColor: '#fa9e64'
+    limit4: {
+      fillColor: '#7a4a48',
+      strokeColor: '#ff8780'
     },
-    red: {
-      fillColor: '#f05a5a80',
-      strokeColor: '#f05a5a'
+    limit5: {
+      fillColor: '#7a3c38',
+      strokeColor: '#ff6259'
     }
   }
 }
 
 export const VARIATIONS = {
-  'regular-high': {
-    light: COLORS.light.red,
-    dark: COLORS.dark.red
+  'regular-limit5': {
+    light: COLORS.light.limit5,
+    dark: COLORS.dark.limit5
+  },
+  'regular-limit4': {
+    light: COLORS.light.limit4,
+    dark: COLORS.dark.limit4
+  },
+  'regular-limit3': {
+    light: COLORS.light.limit3,
+    dark: COLORS.dark.limit3
   },
-  'regular-medium-high': {
-    light: COLORS.light.orange,
-    dark: COLORS.dark.orange
+  'regular-limit2': {
+    light: COLORS.light.limit2,
+    dark: COLORS.dark.limit2
   },
-  'regular-medium-low': {
-    light: COLORS.light.yellow,
-    dark: COLORS.dark.yellow
+  'regular-limit1': {
+    light: COLORS.light.limit1,
+    dark: COLORS.dark.limit1
   },
-  'regular-low': {
-    light: COLORS.light.green,
-    dark: COLORS.dark.green
+  'inverse-limit1': {
+    light: COLORS.light.limit1,
+    dark: COLORS.dark.limit1
   },
-  'inverse-high': {
-    light: COLORS.light.green,
-    dark: COLORS.dark.green
+  'inverse-limit2': {
+    light: COLORS.light.limit2,
+    dark: COLORS.dark.limit2
   },
-  'inverse-medium-high': {
-    light: COLORS.light.yellow,
-    dark: COLORS.dark.yellow
+  'inverse-limit3': {
+    light: COLORS.light.limit3,
+    dark: COLORS.dark.limit3
   },
-  'inverse-medium-low': {
-    light: COLORS.light.orange,
-    dark: COLORS.dark.orange
+  'inverse-limit4': {
+    light: COLORS.light.limit4,
+    dark: COLORS.dark.limit4
   },
-  'inverse-low': {
-    light: COLORS.light.red,
-    dark: COLORS.dark.red
+  'inverse-limit5': {
+    light: COLORS.light.limit5,
+    dark: COLORS.dark.limit5
   }
 }
 
@@ -80,14 +96,14 @@ const COMMON_LAYERS_COLOR_LAKES = {
         color: '#3e3e3e',
         width: 1
       },
-      fill: { color: '#171717' }
+      fill: { color: '#222222' }
     },
     light: {
       stroke: {
         color: '#b5b5b5',
         width: 1
       },
-      fill: { color: '#ffffff' }
+      fill: { color: '#eeeeee' }
     }
   }
 }
@@ -99,14 +115,14 @@ const COMMON_LAYERS_COLOR_OCEANS = {
         color: 'transparent',
         width: 0
       },
-      fill: { color: '#171717' }
+      fill: { color: '#222222' }
     },
     light: {
       stroke: {
         color: 'transparent',
         width: 0
       },
-      fill: { color: '#ffffff' }
+      fill: { color: '#eeeeee' }
     }
   }
 }
diff --git a/src/templates/graphs-card-block/components/map/map-chart-blocks/map-legend-block.vue b/src/templates/graphs-card-block/components/map/map-chart-blocks/map-legend-block.vue
index 13ab8e7f2..a9c03494f 100644
--- a/src/templates/graphs-card-block/components/map/map-chart-blocks/map-legend-block.vue
+++ b/src/templates/graphs-card-block/components/map/map-chart-blocks/map-legend-block.vue
@@ -1,19 +1,16 @@
 <template>
   <div
     id="map-legend-block"
-    class="z-50 w-44 h-32 absolute bottom-3 right-3 surface-card rounded border surface-border px-4 py-3 flex flex-col gap-2 text-color"
+    class="absolute bottom-3 right-3 rounded border px-4 py-3 flex flex-col gap-2 text-color"
   >
     <p class="text-sm font-medium">{{ title }}</p>
     <ul class="flex flex-col gap-1">
       <li
-        v-for="caption in captions"
+        v-for="caption in CAPTIONS"
         :key="caption.label"
         class="text-xs flex items-center gap-1"
       >
-        <span
-          class="w-2 h-2 border"
-          :class="caption.bullet"
-        />
+        <span :class="['w-2 h-2 border', caption.bullet]" />
         {{ caption.label }}
       </li>
     </ul>
@@ -25,11 +22,31 @@
     title: {
       type: String,
       required: true
-    },
-    captions: {
-      type: Array
     }
   })
+
+  const CAPTIONS = [
+    {
+      label: `+1,000,000`,
+      bullet: 'border-[#ff6259] bg-[#ff6259]'
+    },
+    {
+      label: `100,000 - 1,000,000`,
+      bullet: 'border-[#ff8780] bg-[#ff8780]'
+    },
+    {
+      label: `10,000 - 99,999`,
+      bullet: 'border-[#fa8e42] bg-[#fa8e42]'
+    },
+    {
+      label: `1,000 - 9,999`,
+      bullet: 'border-[#fba86f] bg-[#fba86f]'
+    },
+    {
+      label: `1 - 999`,
+      bullet: 'border-[#f6de95] bg-[#f6de95]'
+    }
+  ]
 </script>
 
 <style lang="scss">
@@ -38,10 +55,12 @@
   TODO: remove this styling once the tokens are added to new theme package
   */
   .azion-dark #map-legend-block {
-    background-color: rgba(#171717, 0.85);
+    background-color: rgba(#111111, 0.85);
+    border-color: #282828;
   }
 
   #map-legend-block {
     background-color: rgba(#ffffff, 0.85);
+    border-color: #e8e8e8;
   }
 </style>
diff --git a/src/templates/graphs-card-block/components/map/map-chart-blocks/map-tooltip-block.vue b/src/templates/graphs-card-block/components/map/map-chart-blocks/map-tooltip-block.vue
index 57e025c42..1058f1c80 100644
--- a/src/templates/graphs-card-block/components/map/map-chart-blocks/map-tooltip-block.vue
+++ b/src/templates/graphs-card-block/components/map/map-chart-blocks/map-tooltip-block.vue
@@ -2,7 +2,7 @@
   <div
     v-if="data?.kind"
     ref="mapTooltipRef"
-    class="absolute surface-card rounded border surface-border px-4 py-3 pointer-events-none"
+    class="absolute surface-card rounded border surface-border px-4 py-3 pointer-events-none z-10"
     :style="tooltipStyle"
   >
     <component
diff --git a/src/templates/graphs-card-block/components/map/map-chart.vue b/src/templates/graphs-card-block/components/map/map-chart.vue
index b7ea540ca..0d2c38e36 100644
--- a/src/templates/graphs-card-block/components/map/map-chart.vue
+++ b/src/templates/graphs-card-block/components/map/map-chart.vue
@@ -8,7 +8,6 @@
   <MapLegendBlock
     v-if="legendProps.show"
     :title="legendProps.title"
-    :captions="legendProps.caption"
   />
 </template>
 
@@ -160,25 +159,7 @@
 
     return {
       show: getFeaturesKinds.length === 1,
-      title: `Total ${dataUnit}:`,
-      caption: [
-        {
-          label: `100,000 ${dataUnit}`,
-          bullet: 'bg-scale-red border-scale-red'
-        },
-        {
-          label: `10,000 ${dataUnit}`,
-          bullet: 'bg-scale-orange border-scale-orange'
-        },
-        {
-          label: `1,000 ${dataUnit}`,
-          bullet: 'bg-scale-yellow border-scale-yellow'
-        },
-        {
-          label: `< 100 ${dataUnit}`,
-          bullet: 'bg-scale-green border-scale-green'
-        }
-      ]
+      title: `Total ${dataUnit}:`
     }
   })
 
diff --git a/src/templates/graphs-card-block/components/map/utils/features-handler.js b/src/templates/graphs-card-block/components/map/utils/features-handler.js
index 03661e664..c97b1357a 100644
--- a/src/templates/graphs-card-block/components/map/utils/features-handler.js
+++ b/src/templates/graphs-card-block/components/map/utils/features-handler.js
@@ -1,22 +1,24 @@
 const LIMITS = {
-  high: 100_000,
-  mediumHigh: 10_000,
-  mediumLow: 1_000,
-  low: 100
+  limit5: 1_000_000,
+  limit4: 100_000,
+  limit3: 10_000,
+  limit2: 1000
 }
 
 const BUBBLE_SIZE = 15
 
 const rangeVariations = (value, rangeVariation) => {
   switch (true) {
-    case value >= LIMITS.high:
-      return `${rangeVariation}-high`
-    case value >= LIMITS.mediumHigh:
-      return `${rangeVariation}-medium-high`
-    case value >= LIMITS.low:
-      return `${rangeVariation}-medium-low`
+    case value > LIMITS.limit5:
+      return `${rangeVariation}-limit5`
+    case value >= LIMITS.limit4:
+      return `${rangeVariation}-limit4`
+    case value >= LIMITS.limit3:
+      return `${rangeVariation}-limit3`
+    case value >= LIMITS.limit2:
+      return `${rangeVariation}-limit2`
     default:
-      return `${rangeVariation}-low`
+      return `${rangeVariation}-limit1`
   }
 }
 
diff --git a/src/templates/graphs-card-block/index.vue b/src/templates/graphs-card-block/index.vue
index 84d2d683f..94bf3d5bb 100644
--- a/src/templates/graphs-card-block/index.vue
+++ b/src/templates/graphs-card-block/index.vue
@@ -23,7 +23,7 @@
         </span>
         <AggregationInfo
           :report="report"
-          v-if="showAggregation"
+          v-if="chartStatus.showAggregation"
         />
         <InlineMessage
           v-else
@@ -34,7 +34,7 @@
       </div>
       <section class="flex-auto relative">
         <component
-          v-if="showChart"
+          v-if="chartStatus.showChart"
           :is="chartType[report.type]"
           :chartData="report"
           :variationValue="report.variationValue"
@@ -43,9 +43,15 @@
           :hasMeanLineSeries="report.showMeanLinePerSeries"
         />
         <Skeleton
-          v-if="showSkeleton"
+          v-else-if="chartStatus.showSkeleton"
           class="w-full h-full"
         />
+        <p
+          v-else-if="chartStatus.showNoData"
+          class="text-color-secondary text-md h-full flex items-center justify-center"
+        >
+          No data available
+        </p>
       </section>
     </div>
   </div>
@@ -105,16 +111,15 @@
 
   const shouldRenderChart = ref(true)
 
-  const showChart = computed(() => {
-    return props.report.resultQuery?.length && shouldRenderChart.value
-  })
+  const chartStatus = computed(() => {
+    const { resultQuery, done, error } = props.report
 
-  const showAggregation = computed(() => {
-    return !props.report.error
-  })
-
-  const showSkeleton = computed(() => {
-    return !showChart.value && showAggregation.value
+    return {
+      showChart: resultQuery?.length && done && shouldRenderChart.value,
+      showSkeleton: !shouldRenderChart.value || (!error && !done),
+      showAggregation: !error,
+      showNoData: !resultQuery?.length && done
+    }
   })
 
   const reRenderChart = () => {
diff --git a/src/tests/helpers/realt-time-filter-rules.test.js b/src/tests/helpers/realt-time-filter-rules.test.js
index 659a0ed61..c15da30b4 100644
--- a/src/tests/helpers/realt-time-filter-rules.test.js
+++ b/src/tests/helpers/realt-time-filter-rules.test.js
@@ -21,8 +21,15 @@ describe('RealTimeMetricsModule', () => {
           'naxsiAttackFamilyIlike'
         ],
         FILTER_WHITELIST: {
-          SUPPORTED_FILTER_TYPE: ['String', 'Int', 'Float', 'IntRange', 'FloatRange'],
-          FIELDS_LIKE: ['configurationIdIn', 'zoneIdIn', 'edgeFunctionIdIn']
+          SUPPORTED_FILTER_TYPE: [
+            'String',
+            'Int',
+            'Float',
+            'IntRange',
+            'FloatRange',
+            'GenericScalar'
+          ],
+          FIELDS_LIKE: ['configurationIdIn', 'zoneIdIn', 'edgeFunctionIdIn', 'botCategoryIn']
         },
         MOST_RELEVANT_FIELDS: {
           httpMetrics: [
@@ -59,7 +66,8 @@ describe('RealTimeMetricsModule', () => {
         FILTER_LIKE_TYPE: {
           configurationIdIn: 'ArrayObject',
           zoneIdIn: 'ArrayObject',
-          edgeFunctionIdIn: 'ArrayObject'
+          edgeFunctionIdIn: 'ArrayObject',
+          botCategoryIn: 'ArrayObject'
         },
         FILTER_LIKE_ALIAS: {
           configurationIdIn: 'Domain'
diff --git a/src/tests/modules/real-time-metrics/constants/dashboards.test.js b/src/tests/modules/real-time-metrics/constants/dashboards.test.js
index 3c4035b3e..cf9846b43 100644
--- a/src/tests/modules/real-time-metrics/constants/dashboards.test.js
+++ b/src/tests/modules/real-time-metrics/constants/dashboards.test.js
@@ -134,6 +134,12 @@ describe('RealTimeMetricsModule', () => {
                   label: 'Overview',
                   path: 'overview',
                   dataset: 'botManagerMetrics'
+                },
+                {
+                  id: '659868342290523846',
+                  label: 'Breakdown',
+                  path: 'breakdown',
+                  dataset: 'securityMetrics'
                 }
               ]
             }
diff --git a/src/tests/modules/real-time-metrics/constants/map-services-operator-in.test.js b/src/tests/modules/real-time-metrics/constants/map-services-operator-in.test.js
index 6e6b209ce..e1c76e18e 100644
--- a/src/tests/modules/real-time-metrics/constants/map-services-operator-in.test.js
+++ b/src/tests/modules/real-time-metrics/constants/map-services-operator-in.test.js
@@ -12,7 +12,8 @@ describe('RealTimeMetricsModule', () => {
       const mapServiceOperation = {
         configurationIdIn: services.searchDomainsService,
         zoneIdIn: services.searchEdgeDnsService,
-        edgeFunctionIdIn: services.searchEdgeFunctionsService
+        edgeFunctionIdIn: services.searchEdgeFunctionsService,
+        botCategoryIn: services.searchBotCategoryService
       }
 
       expect(MAP_SERVICE_OPERATION).toEqual(mapServiceOperation)
diff --git a/src/tests/modules/real-time-metrics/constants/reports.test.js b/src/tests/modules/real-time-metrics/constants/reports.test.js
index ee0b5c103..8f17d297a 100644
--- a/src/tests/modules/real-time-metrics/constants/reports.test.js
+++ b/src/tests/modules/real-time-metrics/constants/reports.test.js
@@ -1007,14 +1007,12 @@ describe('RealTimeMetricsModule', () => {
               variable: 'requests'
             }
           ],
-          filters: {
-            actionEq: 'redirect'
-          },
+          filters: {},
           limit: 5000,
           groupBy: ['challengeSolved'],
           orderDirection: 'ASC',
           dashboardId: '371360344901061482',
-          variationType: 'regular',
+          variationType: 'inverse',
           helpCenterPath: '/real-time-metrics/bot-manager-advanced/overview/bot-captcha-line-graph'
         },
         {
@@ -1036,9 +1034,7 @@ describe('RealTimeMetricsModule', () => {
               variable: 'requests'
             }
           ],
-          filters: {
-            actionEq: 'redirect'
-          },
+          filters: {},
           limit: 2,
           groupBy: ['challengeSolved'],
           fields: ['challengeSolved'],
@@ -1111,6 +1107,100 @@ describe('RealTimeMetricsModule', () => {
           variationType: 'regular',
           helpCenterPath: '/real-time-metrics/bot-manager-advanced/overview/bot-activity-map'
         },
+        {
+          id: '847143804009563421',
+          chartOwner: 'azion',
+          label: 'Impacted URLs',
+          description: 'Sum of the detected bot actions, broken down by the affected URLs.',
+          aggregationType: 'sum',
+          columns: 3,
+          type: 'big-numbers',
+          xAxis: 'ts',
+          isTopX: false,
+          rotated: false,
+          dataset: 'securityMetrics',
+          dataUnit: 'count',
+          limit: 10000,
+          aggregations: [
+            {
+              aggregation: 'sum',
+              variable: 'value'
+            }
+          ],
+          filters: {
+            metricEq: 'uniq_request_url',
+            datasetEq: 'bot_manager'
+          },
+          groupBy: [],
+          fields: [],
+          orderDirection: 'DESC',
+          dashboardId: '659868342290523846',
+          variationType: 'inverse',
+          helpCenterPath: '/real-time-metrics/bot-manager-advanced/breakdown/impacted-urls'
+        },
+        {
+          id: '978435123222265554',
+          chartOwner: 'azion',
+          label: 'Top IPs',
+          description:
+            'Sum of the detected bot actions, broken down by the highest-ranking IP addresses.',
+          aggregationType: 'sum',
+          columns: 6,
+          type: 'ordered-bar',
+          xAxis: 'cat',
+          isTopX: true,
+          rotated: true,
+          dataUnit: 'count',
+          dataset: 'securityMetrics',
+          aggregations: [
+            {
+              aggregation: 'sum',
+              variable: 'value'
+            }
+          ],
+          filters: {
+            datasetEq: 'bot_manager',
+            metricEq: 'top_remote_addr'
+          },
+          limit: 10,
+          groupBy: ['dimension1'],
+          fields: ['dimension1'],
+          orderDirection: 'DESC',
+          dashboardId: '659868342290523846',
+          variationType: 'regular',
+          helpCenterPath: '/real-time-metrics/bot-manager-advanced/breakdown/top-ips'
+        },
+        {
+          id: '1030427483148242',
+          chartOwner: 'azion',
+          label: 'Top Impacted URLs',
+          description: 'Sum of the detected bot actions, broken down by the most affected URLs.',
+          aggregationType: 'sum',
+          columns: 6,
+          type: 'ordered-bar',
+          xAxis: 'cat',
+          isTopX: true,
+          rotated: true,
+          dataUnit: 'count',
+          dataset: 'securityMetrics',
+          aggregations: [
+            {
+              aggregation: 'sum',
+              variable: 'value'
+            }
+          ],
+          filters: {
+            datasetEq: 'bot_manager',
+            metricEq: 'top_request_url'
+          },
+          limit: 10,
+          groupBy: ['dimension1'],
+          fields: ['dimension1'],
+          orderDirection: 'DESC',
+          dashboardId: '659868342290523846',
+          variationType: 'regular',
+          helpCenterPath: '/real-time-metrics/bot-manager-advanced/breakdown/top-impacted-urls'
+        },
         {
           aggregationType: 'sum',
           aggregations: [
diff --git a/src/tests/modules/real-time-metrics/reports/fixtures/gql-fixtures.js b/src/tests/modules/real-time-metrics/reports/fixtures/gql-fixtures.js
index 52a97c726..7bec29334 100644
--- a/src/tests/modules/real-time-metrics/reports/fixtures/gql-fixtures.js
+++ b/src/tests/modules/real-time-metrics/reports/fixtures/gql-fixtures.js
@@ -1209,7 +1209,6 @@ botCategoryIn: ["","Non-Bot Like"]
         ) {
           action
 sum
-action
         }
       }`,
       variables: {
@@ -1235,7 +1234,6 @@ begin: $tsRange_begin
 end: $tsRange_end
 
 }
-actionEq: "redirect"
 
         }
         ) {
@@ -1267,13 +1265,11 @@ begin: $tsRange_begin
 end: $tsRange_end
 
 }
-actionEq: "redirect"
 
         }
         ) {
           challengeSolved
 sum
-challengeSolved
         }
       }`,
       variables: {
@@ -1308,7 +1304,6 @@ botCategoryIn: ["","Non-Bot Like"]
         ) {
           botCategory
 sum
-botCategory
         }
       }`,
       variables: {
@@ -1340,7 +1335,6 @@ classifiedIn: ["bad bot","good bot"]
         ) {
           geolocCountryName
 sum
-geolocCountryName
         }
       }`,
       variables: {
@@ -1395,6 +1389,132 @@ ts
 begin: $tsRange_begin
 end: $tsRange_end
 
+}
+
+        }
+        ) {
+          sum
+ts
+        }
+      }`,
+      variables: {
+        tsRange_begin: '2024-01-01T12:00:00',
+        tsRange_end: '2024-12-01T12:00:00'
+      }
+    }
+  },
+  {
+    id: '847143804009563421',
+    label: 'Impacted URLs',
+    gqlQuery: {
+      query: `query ($tsRange_begin:DateTime!, $tsRange_end:DateTime!) {
+      securityMetrics (
+        limit: 10000
+        aggregate: {sum: value 
+}
+        groupBy: [ts]
+        orderBy: [ts_DESC]
+        filter: {
+          tsRange: {
+begin: $tsRange_begin
+end: $tsRange_end
+
+}
+metricEq: "uniq_request_url"
+datasetEq: "bot_manager"
+
+        }
+        ) {
+          sum
+ts
+        }
+      }`,
+      variables: {
+        tsRange_begin: '2024-01-01T12:00:00',
+        tsRange_end: '2024-12-01T12:00:00'
+      }
+    }
+  },
+  {
+    id: '978435123222265554',
+    label: 'Top IPs',
+    gqlQuery: {
+      query: `query ($tsRange_begin:DateTime!, $tsRange_end:DateTime!) {
+      securityMetrics (
+        limit: 10
+        aggregate: {sum: value 
+}
+        groupBy: [dimension1]
+        orderBy: [sum_DESC]
+        filter: {
+          tsRange: {
+begin: $tsRange_begin
+end: $tsRange_end
+
+}
+datasetEq: "bot_manager"
+metricEq: "top_remote_addr"
+
+        }
+        ) {
+          dimension1
+sum
+        }
+      }`,
+      variables: {
+        tsRange_begin: '2024-01-01T12:00:00',
+        tsRange_end: '2024-12-01T12:00:00'
+      }
+    }
+  },
+  {
+    id: '1030427483148242',
+    label: 'Top Impacted URLs',
+    gqlQuery: {
+      query: `query ($tsRange_begin:DateTime!, $tsRange_end:DateTime!) {
+      securityMetrics (
+        limit: 10
+        aggregate: {sum: value 
+}
+        groupBy: [dimension1]
+        orderBy: [sum_DESC]
+        filter: {
+          tsRange: {
+begin: $tsRange_begin
+end: $tsRange_end
+
+}
+datasetEq: "bot_manager"
+metricEq: "top_request_url"
+
+        }
+        ) {
+          dimension1
+sum
+        }
+      }`,
+      variables: {
+        tsRange_begin: '2024-01-01T12:00:00',
+        tsRange_end: '2024-12-01T12:00:00'
+      }
+    }
+  },
+  {
+    id: '352234687543902797',
+    label: 'Total Requests',
+    gqlQuery: {
+      query: `query ($tsRange_begin:DateTime!, $tsRange_end:DateTime!) {
+      dataStreamedMetrics (
+        limit: 5000
+        aggregate: {sum: streamedLines 
+}
+        groupBy: [ts]
+        orderBy: [ts_ASC]
+        filter: {
+          tsRange: {
+begin: $tsRange_begin
+end: $tsRange_end
+
 }
 
         }
diff --git a/src/tests/services/real-time-metrics-services/search-bot-category-service.test.js b/src/tests/services/real-time-metrics-services/search-bot-category-service.test.js
new file mode 100644
index 000000000..1d3688f8f
--- /dev/null
+++ b/src/tests/services/real-time-metrics-services/search-bot-category-service.test.js
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { searchBotCategoryService } from '@/services/real-time-metrics-services/search-bot-category-service'
+
+const makeSut = () => {
+  const sut = searchBotCategoryService
+
+  return {
+    sut
+  }
+}
+
+describe('RealTimeMetricsServices', () => {
+  it('should return a list of bot categories', () => {
+    const { sut } = makeSut()
+
+    expect(sut()).toEqual([
+      {
+        label: 'Legitimate',
+        value: 'legitimate'
+      },
+      {
+        label: 'Good Bot',
+        value: 'good bot'
+      },
+      {
+        label: 'Bad Bot',
+        value: 'bad bot'
+      },
+      {
+        label: 'Under Evaluation',
+        value: 'under evaluation'
+      }
+    ])
+  })
+})
diff --git a/src/views/RealTimeMetrics/blocks/dashboard-panel-block.vue b/src/views/RealTimeMetrics/blocks/dashboard-panel-block.vue
index 8f36df03d..155f97bc0 100644
--- a/src/views/RealTimeMetrics/blocks/dashboard-panel-block.vue
+++ b/src/views/RealTimeMetrics/blocks/dashboard-panel-block.vue
@@ -68,6 +68,7 @@
   )
 
   const changeDashboard = async (evt) => {
+    if (!evt.value) return
     setCurrentDashboard(evt.value)
     await setDatasetAvailableFilters()
     await loadCurrentReports(props.userUTC)
diff --git a/tailwind.config.js b/tailwind.config.js
index e54c90782..5e688430f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,20 +22,12 @@ export default {
         'orange-base': '#F3652B'
       },
       backgroundColor: {
-        'orange-bullet': '#F3652B',
-        'scale-red': '#ff7c75',
-        'scale-orange': '#fa9e64',
-        'scale-yellow': '#f0ca5b',
-        'scale-green': '#6bd690'
+        'orange-bullet': '#F3652B'
       },
       borderColor: {
         header: '#3e3e3e',
         'header-hover': '#F3652B',
-        'radio-card-active': '#F3652B',
-        'scale-red': '#ff7c75',
-        'scale-orange': '#fa9e64',
-        'scale-yellow': '#f0ca5b',
-        'scale-green': '#6bd690'
+        'radio-card-active': '#F3652B'
       },
       textColor: {
         header: '#b5b5b5',

From f77399ecbd348a063a1d7f2a2c29637d0a81b65c Mon Sep 17 00:00:00 2001
From: Peterson Paulo <109550332+peterpaulo-azion@users.noreply.github.com>
Date: Fri, 27 Sep 2024 13:34:01 -0300
Subject: [PATCH 10/11] feat: added clicked to create and edit track events in
 functions instances (#1759)

---
 .../EdgeApplicationsFunctions/ListView.vue    | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/views/EdgeApplicationsFunctions/ListView.vue b/src/views/EdgeApplicationsFunctions/ListView.vue
index 7ae03ac09..a30b6c0ba 100644
--- a/src/views/EdgeApplicationsFunctions/ListView.vue
+++ b/src/views/EdgeApplicationsFunctions/ListView.vue
@@ -15,6 +15,7 @@
       :columns="getColumns"
       :editInDrawer="openEditFunctionDrawer"
       @on-load-data="handleLoadData"
+      @on-before-go-to-edit="handleTrackClickToEdit"
       :actions="actions"
       isTabs
     >
@@ -58,8 +59,10 @@
   import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
   import ListTableBlock from '@/templates/list-table-block'
   import PrimeButton from 'primevue/button'
-  import { computed, ref } from 'vue'
+  import { computed, ref, inject } from 'vue'
   import DrawerFunction from './Drawer'
+  /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
+  const tracker = inject('tracker')
 
   defineOptions({ name: 'list-edge-applications-functions-tab' })
 
@@ -150,6 +153,7 @@
   }
 
   const openCreateFunctionDrawer = () => {
+    handleTrackClickToCreate()
     drawerFunctionRef.value.openDrawerCreate()
   }
 
@@ -173,4 +177,19 @@
       service: deleteFunctionsWithDecorator
     }
   ]
+
+  const handleTrackClickToCreate = () => {
+    tracker.product
+      .clickToCreate({
+        productName: 'Functions Instances'
+      })
+      .track()
+  }
+  const handleTrackClickToEdit = () => {
+    tracker.product
+      .clickToEdit({
+        productName: 'Functions Instances'
+      })
+      .track()
+  }
 </script>

From e27f840fd4a14870e03619598a05eb6c22e9e1fb Mon Sep 17 00:00:00 2001
From: Herbert Vicente Cotta Julio <hvcotta@gmail.com>
Date: Fri, 27 Sep 2024 14:31:19 -0300
Subject: [PATCH 11/11] [NO-ISSUE] fix: improvement parse contract for service
 billing (#1766)

---
 src/services/billing-services/list-payment-history-service.js | 2 +-
 .../billing-services/list-payment-history-service.test.js     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/services/billing-services/list-payment-history-service.js b/src/services/billing-services/list-payment-history-service.js
index a8fb3bea3..f8a4a7381 100644
--- a/src/services/billing-services/list-payment-history-service.js
+++ b/src/services/billing-services/list-payment-history-service.js
@@ -33,7 +33,7 @@ const STATUS_AS_TAG = {
 const adapt = (httpResponse) => {
   const managerUrl = getStaticUrlsByEnvironment('manager')
 
-  const parseBilling = httpResponse.body.data?.map((card) => {
+  const parseBilling = httpResponse.body.results?.map((card) => {
     const typeCard = card.card_brand?.toLowerCase()
     const statusTag = STATUS_AS_TAG[card.status] || STATUS_AS_TAG.NotCharged
     const invoiceUrl = card.invoice_url ? `${managerUrl}${card.invoice_url}` : null
diff --git a/src/tests/services/billing-services/list-payment-history-service.test.js b/src/tests/services/billing-services/list-payment-history-service.test.js
index 7bb459713..f844bfaca 100644
--- a/src/tests/services/billing-services/list-payment-history-service.test.js
+++ b/src/tests/services/billing-services/list-payment-history-service.test.js
@@ -35,7 +35,7 @@ describe('BillingServices', () => {
   it('should call api with correct params', async () => {
     const requestSpy = vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
-      body: { data: [] }
+      body: { results: [] }
     })
 
     const { sut } = makeSut()
@@ -52,7 +52,7 @@ describe('BillingServices', () => {
     localeMock()
     vi.spyOn(AxiosHttpClientAdapter, 'request').mockResolvedValueOnce({
       statusCode: 200,
-      body: { data: [fixtures.paymentMockIsDefault] }
+      body: { results: [fixtures.paymentMockIsDefault] }
     })
     const { sut } = makeSut()