[UXE-6134] feat: add Requests by Status and Upstream

src/modules/real-time-metrics/constants/help-center-urls.js

@@ -42,7 +42,8 @@ const HELP_CENTER_URLS = {
       httpStatusCodes2xx: '/real-time-metrics/edge-applications/status-codes/http-status-codes-2xx',
       httpStatusCodes3xx: '/real-time-metrics/edge-applications/status-codes/http-status-codes-3xx',
       httpStatusCodes4xx: '/real-time-metrics/edge-applications/status-codes/http-status-codes-4xx',
-      httpStatusCodes5xx: '/real-time-metrics/edge-applications/status-codes/http-status-codes-5xx'
+      httpStatusCodes5xx: '/real-time-metrics/edge-applications/status-codes/http-status-codes-5xx',
+      statusUpstream: '/real-time-metrics/edge-applications/status-codes/status-upstream'
     }
   },
   edgeFunctions: {

src/modules/real-time-metrics/constants/reports-texts.js

@@ -98,6 +98,9 @@ const REPORTS_TEXTS = {
       httpStatusCodes5xx: {
         description:
           'Indicates the server failed to deliver an apparently valid request. Displays Requests Status Code 500, Requests Status Code 502, Requests Status Code 503, and Requests Status Code 5xx.'
+      },
+      statusUpstream: {
+        description: 'Top 10 Status and Upstream Status that had the most requests.'
       }
     },
     waf: {

src/modules/real-time-metrics/constants/reports.js

@@ -568,6 +568,33 @@ const REPORTS = [
     dashboardId: '357548642810200653',
     helpCenterPath: HELP_CENTER_URLS.edgeApplications.statusCodes.httpStatusCodes5xx
   },
+  {
+    id: '357825388709151322',
+    chartOwner: 'azion',
+    label: 'Requests by Status and Upstream Status ',
+    description: REPORTS_TEXTS.edgeApplications.statusCodes.statusUpstream.description,
+    aggregationType: 'sum',
+    columns: 6,
+    type: 'list',
+    xAxis: 'cat',
+    isTopX: false,
+    rotated: false,
+    dataset: 'httpMetrics',
+    dataUnit: 'count',
+    limit: 10,
+    fields: ['status', 'upstreamStatus'],
+    groupBy: ['status', 'upstreamStatus'],
+    aggregations: [
+      {
+        aggregation: 'sum',
+        variable: 'requests'
+      }
+    ],
+    orderDirection: 'DESC',
+    variationType: 'inverse',
+    dashboardId: '357548642810200653',
+    helpCenterPath: HELP_CENTER_URLS.edgeApplications.requests.averageRequestTime
+  },
   /**
    * BUILD
    * Edge Applications - Bandwidth Saving

src/modules/real-time-metrics/reports/convert-beholder-to-chart.js

@@ -2,7 +2,6 @@
 
 import { CHART_RULES } from '@modules/real-time-metrics/constants'
 import { formatDataUnit } from '../chart/format-graph'
-import countries from '../helpers/countries-code.json'
 
 import {
   formatYAxisLabels,
@@ -466,37 +465,31 @@ const formatBigNumbers = ({ report, data }) => {
  * @param {Array} data - The data to be formatted.
  */
 const formatListChart = ({ report, data }) => {
-  const dataset = Object.keys(data)
-  const fieldsRequest = Object.keys(data[dataset][0])
-  const fieldNames = report.fields
-  const fieldCountryName = report.groupBy[0]
-
-  const dataValue = data[dataset].map((obj) => {
-    const extractedObj = {}
-    fieldNames.forEach((key) => {
-      extractedObj[key] = formatYAxisLabels(obj[key], report)
-      extractedObj[fieldCountryName] = {
-        code: countries[obj[fieldCountryName]] || '-',
-        country: obj[fieldCountryName]
-      }
-    })
+  const datasetKey = report.dataset
+  const dataset = data[datasetKey] || []
 
-    return { ...obj, ...extractedObj }
-  })
+  if (!dataset.length) return { data: [], columns: [] }
+
+  const { fields, aggregations } = report
+  const aggregationKey = aggregations[0]?.aggregation
 
-  const header = fieldsRequest.map((field) => camelToTitle(field))
+  if (!aggregationKey) return { data: [], columns: [] }
 
-  const columns = fieldsRequest.map((field, index) => ({
-    field: field,
-    header: header[index]
+  // Formata os valores da agregação para exibição
+  const formattedData = dataset.map((item) => ({
+    ...item,
+    [aggregationKey]: formatDataUnit(item[aggregationKey], report)?.value
   }))
 
-  return [
-    {
-      data: dataValue,
-      columns
-    }
-  ]
+  fields.push(aggregationKey)
+
+  // Define as colunas com os nomes corretos
+  const columns = fields.map((field) => ({
+    field,
+    header: field === aggregationKey ? 'Total' : camelToTitle(field)
+  }))
+
+  return [{ data: formattedData, columns }]
 }
 
 const formatMapChartData = ({ report, data }) => {

src/templates/graphs-card-block/components/chart/list-chart.vue

@@ -1,58 +1,23 @@
 <script setup>
-  import ListTableBlock from '@templates/list-table-block/index'
-  import { columnBuilder } from '@/templates/list-table-block/columns/column-builder'
-  import { onMounted, ref } from 'vue'
-
-  const columns = ref([
-    {
-      field: 'geolocCountryName',
-      header: 'Country',
-      type: 'component',
-      filterPath: 'geolocCountryName.geolocCountryName',
-      component: (columnData) => {
-        return columnBuilder({
-          data: columnData,
-          columnAppearance: 'country-flag-column'
-        })
-      }
-    }
-  ])
+  import ListTableBlock from '@templates/list-table-block/graphic.vue'
+  import { computed } from 'vue'
   const props = defineProps({
     resultChart: Array
   })
 
-  const handlesDynimacColumns = () => {
-    const indexToRemove = props.resultChart[0].columns.findIndex((item) =>
-      item.field.includes('Country')
-    )
-    const field = props.resultChart[0].columns[indexToRemove].field
-
-    if (indexToRemove !== -1) {
-      columns.value[0].field = field
-      columns.value[0].filterPath = `${field}.${field}`
-      columns.value.unshift(...props.resultChart[0].columns.filter((item) => item.field !== field))
-    } else {
-      columns.value.shift()
-      columns.value.push(...props.resultChart[0].columns)
-    }
-  }
-
-  const loadResultChartDataWithPromisse = () => {
-    return new Promise((resolve) => {
-      resolve(props.resultChart[0].data)
-    })
-  }
-
-  onMounted(() => {
-    handlesDynimacColumns()
-  })
+  const HEIGHT_ROW = '375px'
+  const chartData = computed(() => props.resultChart[0].data)
+  const columns = computed(() => props.resultChart[0].columns)
 </script>
 
 <template>
-  <div class="w-full h-full overflow-scroll overscroll-contain">
+  <div class="w-full h-full">
     <ListTableBlock
-      :listService="loadResultChartDataWithPromisse"
+      :scrollHeight="HEIGHT_ROW"
+      :data="chartData"
       :columns="columns"
+      smallRow
+      hiddenHeader
     />
   </div>
 </template>

src/templates/list-table-block/graphic.vue

@@ -0,0 +1,133 @@
+<template>
+  <div
+    class="max-w-full"
+    :class="{ 'mt-4': isTabs }"
+    data-testid="data-table-container"
+  >
+    <DataTable
+      ref="dataTableRef"
+      class="overflow-clip rounded-md"
+      :pt="pt"
+      scrollable
+      :scrollHeight="scrollHeight"
+      :value="data"
+      dataKey="id"
+      :rowHover="!disabledList"
+      :paginator="false"
+      :rows="10"
+      data-testid="data-table"
+    >
+      <Column
+        :sortable="!col.disableSort"
+        v-for="col of selectedColumns"
+        :key="col.field"
+        :field="col.field"
+        :header="col.header"
+        :sortField="col?.sortField"
+        :class="computedClass"
+        :style="sizeColumn"
+        data-testid="data-table-column"
+      >
+        <template #body="{ data: rowData }">
+          <template v-if="isNotComponent(col.type)">
+            <div
+              v-html="rowData[col.field]"
+              :data-testid="`list-table-block__column__${col.field}__row`"
+            />
+          </template>
+          <template v-else>
+            <component
+              :is="col.component(extractFieldValue(rowData, col.field))"
+              :data-testid="`list-table-block__column__${col.field}__row`"
+            />
+          </template>
+        </template>
+      </Column>
+      <template #empty>
+        <slot
+          name="noRecordsFound"
+          data-testid="data-table-empty-content"
+        >
+          <div class="my-4 flex flex-col gap-3 justify-center items-start">
+            <p
+              class="text-md font-normal text-secondary"
+              data-testid="list-table-block__empty-message__text"
+            >
+              {{ emptyListMessage }}
+            </p>
+          </div>
+        </slot>
+      </template>
+    </DataTable>
+  </div>
+</template>
+
+<script setup>
+  import Column from 'primevue/column'
+  import DataTable from 'primevue/datatable'
+  import { ref, onMounted, computed } from 'vue'
+  defineOptions({ name: 'list-table-block-graphic' })
+
+  const props = defineProps({
+    disabledList: {
+      type: Boolean
+    },
+    hiddenHeader: {
+      type: Boolean
+    },
+    columns: {
+      type: Array,
+      default: () => [{ field: 'name', header: 'Name' }]
+    },
+    lazyLoad: {
+      type: Boolean
+    },
+    scrollHeight: {
+      type: String,
+      default: () => ''
+    },
+    emptyListMessage: {
+      type: String,
+      default: () => 'No registers found.'
+    },
+    isTabs: {
+      type: Boolean,
+      default: false
+    },
+    pt: {
+      type: Object,
+      default: () => ({})
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    smallRow: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const dataTableRef = ref(null)
+  const selectedColumns = ref([])
+
+  const extractFieldValue = (rowData, field) => {
+    return rowData[field]
+  }
+  const isNotComponent = (type) => type !== 'component'
+
+  const computedClass = computed(() => ({
+    'hover:cursor-pointer': !props.disabledList,
+    'px-[0.875rem] py-[0.395rem]': props.smallRow
+  }))
+
+  const sizeColumn = computed(() => {
+    const amountColumn = props.columns.length
+    const columnSize = 100 / amountColumn
+    return `width: ${columnSize}%`
+  })
+
+  onMounted(() => {
+    selectedColumns.value = props.columns
+  })
+</script>

src/templates/list-table-block/index.vue

@@ -11,6 +11,7 @@
       :pt="props.pt"
       @rowReorder="onRowReorder"
       scrollable
+      :scrollHeight="props.scrollHeight"
       removableSort
       :value="data"
       dataKey="id"
@@ -354,6 +355,10 @@
       required: true,
       type: Function
     },
+    scrollHeight: {
+      type: String,
+      default: () => ''
+    },
     enableEditClick: {
       type: Boolean,
       default: true

src/tests/modules/real-time-metrics/constants/reports.test.js

@@ -565,6 +565,33 @@ describe('RealTimeMetricsModule', () => {
           type: 'line',
           xAxis: 'ts'
         },
+        {
+          aggregationType: 'sum',
+          aggregations: [
+            {
+              aggregation: 'sum',
+              variable: 'requests'
+            }
+          ],
+          chartOwner: 'azion',
+          columns: 6,
+          dashboardId: '357548642810200653',
+          dataUnit: 'count',
+          dataset: 'httpMetrics',
+          description: 'Top 10 Status and Upstream Status that had the most requests.',
+          fields: ['status', 'upstreamStatus'],
+          groupBy: ['status', 'upstreamStatus'],
+          helpCenterPath: '/real-time-metrics/edge-applications/requests/average-request-time',
+          id: '357825388709151322',
+          isTopX: false,
+          label: 'Requests by Status and Upstream Status ',
+          limit: 10,
+          orderDirection: 'DESC',
+          rotated: false,
+          type: 'list',
+          variationType: 'inverse',
+          xAxis: 'cat'
+        },
         {
           aggregationType: 'sum',
           chartOwner: 'azion',