From e5dd4271336fc07db3c31316eab07867cd5abf27 Mon Sep 17 00:00:00 2001 From: paulosf0 Date: Fri, 28 Feb 2025 17:22:25 -0300 Subject: [PATCH] feat: migrate all drawer for new layout on event page --- .../activity-history/list-activity-history.js | 1 + .../activity-history/load-activity-history.js | 8 +- .../data-stream/list-data-stream.js | 1 + .../data-stream/load-data-stream.js | 10 +- .../edge-dns/list-edge-dns.js | 4 +- .../edge-dns/load-edge-dns.js | 59 +---- .../list-edge-functions-console.js | 5 +- .../load-edge-functions-console.js | 8 +- .../edge-functions/list-edge-functions.js | 3 +- .../edge-functions/load-edge-functions.js | 13 +- .../image-processor/list-image-processor.js | 14 +- .../image-processor/load-image-processor.js | 25 +- .../tiered-cache/list-tiered-cache.js | 4 + .../tiered-cache/load-tiered-cache.js | 33 +-- src/templates/info-drawer-block/index.vue | 17 +- .../info-drawer-block/info-section/index.vue | 16 +- .../list-activity-history.test.js | 1 + .../load-activity-history.test.js | 16 +- .../data-stream/list-data-stream.test.js | 1 + .../data-stream/load-data-stream.test.js | 21 +- .../edge-dns/list-edge-dns.test.js | 2 + .../edge-dns/load-edge-dns.test.js | 22 +- .../list-edge-functions-console.test.js | 4 + .../load-edge-functions-console.test.js | 22 +- .../list-edge-functions.test.js | 1 + .../load-edge-functions.test.js | 25 +- .../list-image-processor.test.js | 4 + .../load-image-processor.test.js | 46 ++-- .../tiered-cache/list-tiered-cache.test.js | 4 + .../tiered-cache/load-tiered-cache.test.js | 61 ++--- .../RealTimeEvents/Drawer/activityHistory.vue | 44 ++-- .../RealTimeEvents/Drawer/dataStream.vue | 69 +++-- src/views/RealTimeEvents/Drawer/edgeDNS.vue | 43 ++-- .../RealTimeEvents/Drawer/edgeFunctions.vue | 109 +++----- .../Drawer/edgeFunctionsConsole.vue | 41 +-- .../RealTimeEvents/Drawer/httpRequests.vue | 52 +--- .../RealTimeEvents/Drawer/imageProcessor.vue | 135 ++-------- .../RealTimeEvents/Drawer/tieredCache.vue | 235 ++---------------- 38 files changed, 413 insertions(+), 766 deletions(-) diff --git a/src/services/real-time-events-service/activity-history/list-activity-history.js b/src/services/real-time-events-service/activity-history/list-activity-history.js index 13c1e085d..ab52b34d5 100644 --- a/src/services/real-time-events-service/activity-history/list-activity-history.js +++ b/src/services/real-time-events-service/activity-history/list-activity-history.js @@ -41,6 +41,7 @@ const adaptResponse = (response) => { const data = body.data.activityHistoryEvents?.map((activityHistoryEvents) => ({ id: generateCurrentTimestamp(), summary: buildSummary(activityHistoryEvents), + userId: activityHistoryEvents.userId, ts: activityHistoryEvents.ts, tsFormat: convertValueToDate(activityHistoryEvents.ts) })) diff --git a/src/services/real-time-events-service/activity-history/load-activity-history.js b/src/services/real-time-events-service/activity-history/load-activity-history.js index 03a612f33..fe493d55c 100644 --- a/src/services/real-time-events-service/activity-history/load-activity-history.js +++ b/src/services/real-time-events-service/activity-history/load-activity-history.js @@ -1,7 +1,7 @@ import convertGQL from '@/helpers/convert-gql' import { AxiosHttpClientSignalDecorator } from '../../axios/AxiosHttpClientSignalDecorator' import { convertValueToDate } from '@/helpers/convert-date' -import { capitalizeFirstLetter } from '@/helpers' +import { buildSummary, capitalizeFirstLetter } from '@/helpers' import { makeRealTimeEventsBaseUrl } from '../make-real-time-events-service' export const loadActivityHistory = async (filter) => { @@ -44,10 +44,6 @@ const adaptResponse = (response) => { title: activityHistoryEvents.title, type: capitalizeFirstLetter(activityHistoryEvents.type), ts: convertValueToDate(activityHistoryEvents.ts), - authorName: activityHistoryEvents.authorName, - accountId: activityHistoryEvents.accountId, - userId: activityHistoryEvents.userId, - authorEmail: activityHistoryEvents.authorEmail, - comment: activityHistoryEvents.comment + data: buildSummary(activityHistoryEvents) } } diff --git a/src/services/real-time-events-service/data-stream/list-data-stream.js b/src/services/real-time-events-service/data-stream/list-data-stream.js index 3bcd5ff0a..dc37c04a7 100644 --- a/src/services/real-time-events-service/data-stream/list-data-stream.js +++ b/src/services/real-time-events-service/data-stream/list-data-stream.js @@ -49,6 +49,7 @@ const adaptResponse = (response) => { const totalRecords = body.data.dataStreamedEvents?.length const data = body.data.dataStreamedEvents?.map((dataStreamedEvents) => ({ + configurationId: dataStreamedEvents.configurationId, id: generateCurrentTimestamp(), summary: buildSummary(dataStreamedEvents), ts: dataStreamedEvents.ts, diff --git a/src/services/real-time-events-service/data-stream/load-data-stream.js b/src/services/real-time-events-service/data-stream/load-data-stream.js index e2b5c9159..887b0cee0 100644 --- a/src/services/real-time-events-service/data-stream/load-data-stream.js +++ b/src/services/real-time-events-service/data-stream/load-data-stream.js @@ -2,6 +2,7 @@ import convertGQL from '@/helpers/convert-gql' import { AxiosHttpClientSignalDecorator } from '../../axios/AxiosHttpClientSignalDecorator' import { convertValueToDate } from '@/helpers/convert-date' import { makeRealTimeEventsBaseUrl } from '../make-real-time-events-service' +import { buildSummary } from '@/helpers' export const loadDataStream = async (filter) => { const payload = adapt(filter) @@ -52,15 +53,10 @@ const adaptResponse = (response) => { return { url: dataStreamedEvents.url, ts: convertValueToDate(dataStreamedEvents.ts), - streamedLines: dataStreamedEvents.streamedLines, - dataStreamed: dataStreamedEvents.dataStreamed, - configurationId: dataStreamedEvents.configurationId, - source: dataStreamedEvents.source, - statusCode: dataStreamedEvents.statusCode, - endpointType: dataStreamedEvents.endpointType, jobName: { content: dataStreamedEvents.jobName, severity: 'info' - } + }, + data: buildSummary(dataStreamedEvents) } } diff --git a/src/services/real-time-events-service/edge-dns/list-edge-dns.js b/src/services/real-time-events-service/edge-dns/list-edge-dns.js index a4328a4d8..5bd154750 100644 --- a/src/services/real-time-events-service/edge-dns/list-edge-dns.js +++ b/src/services/real-time-events-service/edge-dns/list-edge-dns.js @@ -42,7 +42,9 @@ const adaptResponse = (response) => { id: generateCurrentTimestamp(), summary: buildSummary(edgeDnsQueriesEvents), ts: edgeDnsQueriesEvents.ts, - tsFormat: convertValueToDate(edgeDnsQueriesEvents.ts) + tsFormat: convertValueToDate(edgeDnsQueriesEvents.ts), + uuid: edgeDnsQueriesEvents.uuid, + source: edgeDnsQueriesEvents.source })) return { diff --git a/src/services/real-time-events-service/edge-dns/load-edge-dns.js b/src/services/real-time-events-service/edge-dns/load-edge-dns.js index 9764ffb36..70f6e395e 100644 --- a/src/services/real-time-events-service/edge-dns/load-edge-dns.js +++ b/src/services/real-time-events-service/edge-dns/load-edge-dns.js @@ -1,6 +1,7 @@ import convertGQL from '@/helpers/convert-gql' import { AxiosHttpClientSignalDecorator } from '../../axios/AxiosHttpClientSignalDecorator' import { makeRealTimeEventsBaseUrl } from '../make-real-time-events-service' +import { buildSummary } from '@/helpers' export const loadEdgeDNS = async (filter) => { const payload = adapt(filter) @@ -45,69 +46,13 @@ const adapt = (filter) => { return convertGQL(formatFilter, table) } -const levelMap = { - ERROR: { - content: 'Error', - severity: 'danger', - icon: 'pi pi-times-circle' - }, - WARN: { - content: 'Warning', - severity: 'warning', - icon: 'pi pi-exclamation-triangle' - }, - INFO: { - content: 'Info', - severity: 'info', - icon: 'pi pi-info-circle' - }, - DEBUG: { - content: 'Debug', - severity: 'success', - icon: 'pi pi-check-circle' - }, - TRACE: { - content: 'Trace', - severity: 'info', - icon: 'pi pi-code' - } -} - -const qtypeMap = (value) => { - const defaultText = value - ? 'Address Mapping record (A Record), also known as a DNS host record, stores a hostname and its corresponding IPv4 address.' - : '-' - - const mapType = { - AAAA: 'IP Version 6 Address record (AAAA Record) stores a hostname and its corresponding IPv6 address.', - ANAME: - 'ALIAS record is a virtual record type created to provide CNAME, like behavior on apex domains.', - CAA: 'A CAA record allows a DNS domain name holder to specify one or more Certification Authorities (CAs) authorized to issue certificates for that domain or subdomain.', - CNAME: - 'Canonical Name record (CNAME Record) can be used to alias a hostname to another hostname. When a DNS client requests a record that contains a CNAME, which points to another hostname, the DNS resolution process is repeated with the new hostname.', - MX: 'Mail exchanger record (MX Record) specifies an SMTP email server for the domain, used to route outgoing emails to an email server.', - NS: 'NS-records identify the DNS servers responsible (authoritative) for a zone. A zone should contain one NS-record for each of its own DNS servers (primary and secondaries).', - PTR: 'PTR records are used for the Reverse DNS (Domain Name System) lookup. Using the IP address, you can get the associated domain/hostname. An A record should exist for every PTR record. The usage of a reverse DNS setup for a mail server is a good solution.', - SRV: 'A Service record (SRV record) is a specification of data in the Domain Name System defining the location. For example: the hostname and port number, of servers for specified services. It’s defined in RFC 2782, and its type code is 33.', - TXT: 'A TXT record (short for text record) is a type of resource record in the Domain Name System (DNS) used to provide the ability to associate arbitrary text with a host or other name, such as human readable information about a server, network, data center, or other accounting information.' - } - - return mapType[value] || defaultText -} - const adaptResponse = (response) => { const { body } = response const [edgeDnsQueriesEvents = {}] = body.data.idnsQueriesEvents return { - level: levelMap[edgeDnsQueriesEvents.level], ts: edgeDnsQueriesEvents.ts, qtype: edgeDnsQueriesEvents.qtype, - qTypeDescription: qtypeMap(edgeDnsQueriesEvents.qtype), - uuid: edgeDnsQueriesEvents.uuid, - zoneId: edgeDnsQueriesEvents.zoneId, - statusCode: edgeDnsQueriesEvents.statusCode, - resolutionType: edgeDnsQueriesEvents.resolutionType, - solutionId: edgeDnsQueriesEvents.solutionId + data: buildSummary(edgeDnsQueriesEvents) } } diff --git a/src/services/real-time-events-service/edge-functions-console/list-edge-functions-console.js b/src/services/real-time-events-service/edge-functions-console/list-edge-functions-console.js index 79c2c1d91..ddede64de 100644 --- a/src/services/real-time-events-service/edge-functions-console/list-edge-functions-console.js +++ b/src/services/real-time-events-service/edge-functions-console/list-edge-functions-console.js @@ -29,7 +29,7 @@ const adapt = (filter) => { const table = { dataset: 'cellsConsoleEvents', limit: 10000, - fields: ['configurationId', 'functionId', 'id', 'level', 'lineSource', 'source', 'ts'], + fields: ['configurationId', 'functionId', 'id', 'level', 'lineSource', 'source', 'ts', 'line'], orderBy: 'ts_ASC' } return convertGQL(filter, table) @@ -41,6 +41,9 @@ const adaptResponse = (body) => { const parser = cellsConsoleEventsList?.length ? cellsConsoleEventsList.map((cellsConsoleEvents) => ({ summary: buildSummary(cellsConsoleEvents), + configurationId: cellsConsoleEvents.configurationId, + source: cellsConsoleEvents.source, + line: cellsConsoleEvents.line, id: generateCurrentTimestamp(), tsFormat: convertValueToDate(cellsConsoleEvents.ts), ts: cellsConsoleEvents.ts diff --git a/src/services/real-time-events-service/edge-functions-console/load-edge-functions-console.js b/src/services/real-time-events-service/edge-functions-console/load-edge-functions-console.js index f4a9088c9..362b8b605 100644 --- a/src/services/real-time-events-service/edge-functions-console/load-edge-functions-console.js +++ b/src/services/real-time-events-service/edge-functions-console/load-edge-functions-console.js @@ -2,6 +2,7 @@ import convertGQL from '@/helpers/convert-gql' import { AxiosHttpClientSignalDecorator } from '../../axios/AxiosHttpClientSignalDecorator' import { convertValueToDate } from '@/helpers/convert-date' import { makeRealTimeEventsBaseUrl } from '../make-real-time-events-service' +import { buildSummary } from '@/helpers' export const loadEdgeFunctionsConsole = async (filter) => { const payload = adapt(filter) @@ -87,11 +88,6 @@ const adaptResponse = (response) => { lineSource: cellsConsoleEvents.lineSource, level: levelMap[cellsConsoleEvents.level], ts: convertValueToDate(cellsConsoleEvents.ts), - line: cellsConsoleEvents.line, - id: cellsConsoleEvents.id, - solutionId: cellsConsoleEvents.solutionId, - functionId: cellsConsoleEvents.functionId, - configurationId: cellsConsoleEvents.configurationId, - source: cellsConsoleEvents.source + data: buildSummary(cellsConsoleEvents) } } diff --git a/src/services/real-time-events-service/edge-functions/list-edge-functions.js b/src/services/real-time-events-service/edge-functions/list-edge-functions.js index d2447e1b8..66cef531b 100644 --- a/src/services/real-time-events-service/edge-functions/list-edge-functions.js +++ b/src/services/real-time-events-service/edge-functions/list-edge-functions.js @@ -49,7 +49,8 @@ const adaptResponse = (response) => { id: generateCurrentTimestamp(), summary: buildSummary(edgeFunctionsEvents), ts: edgeFunctionsEvents.ts, - tsFormat: convertValueToDate(edgeFunctionsEvents.ts) + tsFormat: convertValueToDate(edgeFunctionsEvents.ts), + configurationId: edgeFunctionsEvents.configurationId })) return { diff --git a/src/services/real-time-events-service/edge-functions/load-edge-functions.js b/src/services/real-time-events-service/edge-functions/load-edge-functions.js index 56d904bf5..64a4d6ae3 100644 --- a/src/services/real-time-events-service/edge-functions/load-edge-functions.js +++ b/src/services/real-time-events-service/edge-functions/load-edge-functions.js @@ -1,8 +1,8 @@ import convertGQL from '@/helpers/convert-gql' import { convertValueToDate } from '@/helpers/convert-date' - import { AxiosHttpClientSignalDecorator } from '../../axios/AxiosHttpClientSignalDecorator' import { makeRealTimeEventsBaseUrl } from '../make-real-time-events-service' +import { buildSummary } from '@/helpers' export const loadEdgeFunctions = async (filter) => { const payload = adapt(filter) @@ -53,15 +53,8 @@ const adaptResponse = (response) => { return { id: edgeFunctionsEvents.ts + edgeFunctionsEvents.configurationId, + data: buildSummary(edgeFunctionsEvents), functionLanguage: edgeFunctionsEvents.functionLanguage, - ts: convertValueToDate(edgeFunctionsEvents.ts), - edgeFunctionsList: edgeFunctionsEvents.edgeFunctionsList?.split(';'), - edgeFunctionsTime: edgeFunctionsEvents.edgeFunctionsTime, - edgeFunctionsInitiatorTypeList: edgeFunctionsEvents.edgeFunctionsInitiatorTypeList, - edgeFunctionsInstanceIdList: edgeFunctionsEvents.edgeFunctionsInstanceIdList, - edgeFunctionsSolutionId: edgeFunctionsEvents.edgeFunctionsSolutionId, - source: edgeFunctionsEvents.source, - virtualHostId: edgeFunctionsEvents.virtualhostid, - configurationId: edgeFunctionsEvents.configurationId + ts: convertValueToDate(edgeFunctionsEvents.ts) } } diff --git a/src/services/real-time-events-service/image-processor/list-image-processor.js b/src/services/real-time-events-service/image-processor/list-image-processor.js index ae3802e05..90288d7b3 100644 --- a/src/services/real-time-events-service/image-processor/list-image-processor.js +++ b/src/services/real-time-events-service/image-processor/list-image-processor.js @@ -28,7 +28,16 @@ const adapt = (filter) => { const table = { dataset: 'imagesProcessedEvents', limit: 10000, - fields: ['configurationId', 'host', 'requestUri', 'status', 'bytesSent', 'httpReferer', 'ts'], + fields: [ + 'configurationId', + 'host', + 'requestUri', + 'status', + 'bytesSent', + 'httpReferer', + 'ts', + 'httpUserAgent' + ], orderBy: 'ts_ASC' } return convertGQL(filter, table) @@ -40,6 +49,9 @@ const adaptResponse = (response) => { const data = body.data.imagesProcessedEvents?.map((imagesProcessedEvents) => ({ id: generateCurrentTimestamp(), + configurationId: imagesProcessedEvents.configurationId, + httpUserAgent: imagesProcessedEvents.httpUserAgent, + httpReferer: imagesProcessedEvents.httpReferer, summary: buildSummary(imagesProcessedEvents), ts: imagesProcessedEvents.ts, tsFormat: convertValueToDate(imagesProcessedEvents.ts) diff --git a/src/services/real-time-events-service/image-processor/load-image-processor.js b/src/services/real-time-events-service/image-processor/load-image-processor.js index 3611f2ffe..fcdbaac33 100644 --- a/src/services/real-time-events-service/image-processor/load-image-processor.js +++ b/src/services/real-time-events-service/image-processor/load-image-processor.js @@ -2,6 +2,7 @@ import convertGQL from '@/helpers/convert-gql' import { AxiosHttpClientSignalDecorator } from '../../axios/AxiosHttpClientSignalDecorator' import { convertValueToDate } from '@/helpers/convert-date' import { makeRealTimeEventsBaseUrl } from '../make-real-time-events-service' +import { buildSummary } from '@/helpers' export const loadImageProcessor = async (filter) => { const payload = adapt(filter) @@ -66,29 +67,9 @@ const adaptResponse = (response) => { const { body } = response const [imagesProcessedEvents = {}] = body.data.imagesProcessedEvents return { - bytesSent: imagesProcessedEvents.bytesSent, - configurationId: imagesProcessedEvents.configurationId, - host: imagesProcessedEvents.host, - httpReferer: imagesProcessedEvents.httpReferer, - httpUserAgent: imagesProcessedEvents.httpUserAgent, - referenceError: imagesProcessedEvents.referenceError, - remoteAddr: imagesProcessedEvents.remoteAddr, - remotePort: imagesProcessedEvents.remotePort, - requestMethod: imagesProcessedEvents.requestMethod, - requestTime: imagesProcessedEvents.requestTime, - requestUri: imagesProcessedEvents.requestUri, scheme: imagesProcessedEvents.scheme?.toUpperCase(), - solution: imagesProcessedEvents.solution, - sslCipher: imagesProcessedEvents.sslCipher, - sslProtocol: imagesProcessedEvents.sslProtocol, - sslSessionReused: imagesProcessedEvents.sslSessionReused, - status: imagesProcessedEvents.status, - tcpinfoRtt: imagesProcessedEvents.tcpinfoRtt, + host: imagesProcessedEvents.host, ts: convertValueToDate(imagesProcessedEvents.ts), - upstreamCacheStatus: imagesProcessedEvents.upstreamCacheStatus, - upstreamResponseTime: imagesProcessedEvents.upstreamResponseTime, - upstreamResponseTimeStr: imagesProcessedEvents.upstreamResponseTimeStr, - upstreamStatus: imagesProcessedEvents.upstreamStatus, - upstreamStatusStr: imagesProcessedEvents.upstreamStatusStr + data: buildSummary(imagesProcessedEvents) } } diff --git a/src/services/real-time-events-service/tiered-cache/list-tiered-cache.js b/src/services/real-time-events-service/tiered-cache/list-tiered-cache.js index 1e85d8f16..7d3050793 100644 --- a/src/services/real-time-events-service/tiered-cache/list-tiered-cache.js +++ b/src/services/real-time-events-service/tiered-cache/list-tiered-cache.js @@ -47,6 +47,10 @@ const adaptResponse = (response) => { const totalRecords = body.data.l2CacheEvents?.length const data = body.data.l2CacheEvents?.map((tieredCacheEvents) => ({ + configurationId: tieredCacheEvents.configurationId, + source: tieredCacheEvents.source, + host: tieredCacheEvents.host, + proxyHost: tieredCacheEvents.proxyHost, id: generateCurrentTimestamp(), summary: buildSummary(tieredCacheEvents), ts: tieredCacheEvents.ts, diff --git a/src/services/real-time-events-service/tiered-cache/load-tiered-cache.js b/src/services/real-time-events-service/tiered-cache/load-tiered-cache.js index 80bc45789..1212d93b8 100644 --- a/src/services/real-time-events-service/tiered-cache/load-tiered-cache.js +++ b/src/services/real-time-events-service/tiered-cache/load-tiered-cache.js @@ -2,6 +2,7 @@ import convertGQL from '@/helpers/convert-gql' import { AxiosHttpClientSignalDecorator } from '../../axios/AxiosHttpClientSignalDecorator' import { convertValueToDate } from '@/helpers/convert-date' import { makeRealTimeEventsBaseUrl } from '../make-real-time-events-service' +import { buildSummary } from '@/helpers' export const loadTieredCache = async (filter) => { const payload = adapt(filter) @@ -75,36 +76,10 @@ const adaptResponse = (response) => { const [l2CacheEvents = {}] = body.data.l2CacheEvents return { - bytesSent: l2CacheEvents.bytesSent, - cacheKey: l2CacheEvents.cacheKey, - cacheTtl: l2CacheEvents.cacheTtl, - configurationId: l2CacheEvents.configurationId, - host: l2CacheEvents.host, - clientId: l2CacheEvents.clientId, - proxyHost: l2CacheEvents.proxyHost, - proxyStatus: l2CacheEvents.proxyStatus, - proxyUpstream: l2CacheEvents.proxyUpstream, - referenceError: l2CacheEvents.referenceError, - remoteAddr: l2CacheEvents.remoteAddr, - remotePort: l2CacheEvents.remotePort, - requestLength: l2CacheEvents.requestLength, - requestMethod: l2CacheEvents.requestMethod, - requestTime: l2CacheEvents.requestTime, - requestUri: l2CacheEvents.requestUri, scheme: l2CacheEvents.scheme?.toUpperCase(), - sentHttpContentType: l2CacheEvents.sentHttpContentType, - serverProtocol: l2CacheEvents.serverProtocol?.toUpperCase(), - solution: l2CacheEvents.solution, - status: l2CacheEvents.status, - tcpinfoRtt: l2CacheEvents.tcpinfoRtt, + proxyHost: l2CacheEvents.proxyHost, ts: convertValueToDate(l2CacheEvents.ts), - upstreamBytesReceived: l2CacheEvents.upstreamBytesReceived, - upstreamBytesReceivedStr: l2CacheEvents.upstreamBytesReceivedStr, - upstreamCacheStatus: l2CacheEvents.upstreamCacheStatus, - upstreamConnectTime: l2CacheEvents.upstreamConnectTime, - upstreamHeaderTime: l2CacheEvents.upstreamHeaderTime, - upstreamResponseTime: l2CacheEvents.upstreamResponseTime, - upstreamStatus: l2CacheEvents.upstreamStatus, - source: l2CacheEvents.source + serverProtocol: l2CacheEvents.serverProtocol?.toUpperCase(), + data: buildSummary(l2CacheEvents) } } diff --git a/src/templates/info-drawer-block/index.vue b/src/templates/info-drawer-block/index.vue index 6f43c7812..2afc1a995 100644 --- a/src/templates/info-drawer-block/index.vue +++ b/src/templates/info-drawer-block/index.vue @@ -27,28 +27,27 @@ const handle = ref('right') const handlePosition = () => { - if(handle.value === 'right') { + if (handle.value === 'right') { handle.value = 'full' } else { handle.value = 'right' } - } - + } const sizeSidebar = () => { - if(handle.value === 'right') { + if (handle.value === 'right') { return 'max-w-4xl w-full p-0' } return 'w-full p-0' } const iconExpand = computed(() => { - if(handle.value === 'right') { + if (handle.value === 'right') { return 'pi pi-window-maximize' } return 'pi pi-window-minimize' }) - + defineExpose({}) @@ -71,7 +70,11 @@

{{ props.title }}

- +
diff --git a/src/templates/info-drawer-block/info-section/index.vue b/src/templates/info-drawer-block/info-section/index.vue index 27926c27a..eb0f2b1e2 100644 --- a/src/templates/info-drawer-block/info-section/index.vue +++ b/src/templates/info-drawer-block/info-section/index.vue @@ -1,6 +1,7 @@ diff --git a/src/views/RealTimeEvents/Drawer/edgeFunctionsConsole.vue b/src/views/RealTimeEvents/Drawer/edgeFunctionsConsole.vue index 7f99adbfe..0e2cadbf9 100644 --- a/src/views/RealTimeEvents/Drawer/edgeFunctionsConsole.vue +++ b/src/views/RealTimeEvents/Drawer/edgeFunctionsConsole.vue @@ -2,8 +2,9 @@ import { ref, watch, computed } from 'vue' import InfoSection from '@/templates/info-drawer-block/info-section' - import TextInfo from '@/templates/info-drawer-block/info-labels/text-info.vue' import InfoDrawerBlock from '@/templates/info-drawer-block' + import TableEvents from './tableEvents.vue' + import Skeleton from 'primevue/skeleton' defineOptions({ name: 'drawer-events-functions-console' }) @@ -15,10 +16,17 @@ }) const details = ref({}) const showDrawer = ref(false) + const loading = ref(false) const openDetailDrawer = async (item) => { showDrawer.value = true - details.value = await props.loadService(item) + loading.value = true + + try { + details.value = await props.loadService(item) + } finally { + loading.value = false + } } watch( @@ -59,21 +67,22 @@ :title="`Line Source - ${details.lineSource ?? ''}`" :date="details.ts" :tags="tags" + :loading="loading" + /> + +
- - + +
diff --git a/src/views/RealTimeEvents/Drawer/httpRequests.vue b/src/views/RealTimeEvents/Drawer/httpRequests.vue index e44ea6f25..26f79873f 100644 --- a/src/views/RealTimeEvents/Drawer/httpRequests.vue +++ b/src/views/RealTimeEvents/Drawer/httpRequests.vue @@ -1,7 +1,6 @@