feat: real time events improvements#3530
Open
gdsantana wants to merge 34 commits into
Open
Conversation
…IDs, and refactor UI - Fix chart histogram: replace truncated groupBy:[ts] with bucketed GraphQL alias queries - Fix chart rendering: increase container height, optimize bar width ratio - Fix skeleton loading state overlapping with empty state - Fix duplicate row IDs: generateCurrentTimestamp() now uses monotonic counter - Add new RTE components: detail-sidebar, event-chart, field-selector, field-sidebar - Add bucketed aggregation service and GQL aggregation helper
… aesthetics - Fix filter bar font rendering uppercase (replace Tailwind font-mono with explicit monospace font-family) - Fix AQL suggestion list font-mono uppercase issue - Fix click-to-filter from badge: add missing field label property - Add toast warning when filter field not found - Improve TabView (Table/JSON) tab styling and spacing - Fix detail sidebar to stretch with screen height (align-self: stretch) - Pagination support with offset in convert-gql and list-http-request
…document loading - Replace bucketed aliased sub-queries with single groupBy:[ts] aggregation query - Add FillResultQuery-equivalent resampling for Events (minute/hour/day intervals) - Decouple chart aggregation from document list (independent failure handling) - Implement hybrid pagination: offset for short ranges, temporal for long ranges - Add page size selector (50/100/1000/2000) with localStorage persistence - Update load more button with document count and Portuguese labels - Fix event-chart.vue re-init when isLoading transitions to false
… dataset in filter bar - Chart histogram now uses Metrics API (v4/metrics/graphql) for accurate aggregation - Removed getTotalRecords call — total comes from Metrics API via chart emit - Layout restructured: sidebar + chart + toolbar + table in single splitter - Dataset selector moved from sidebar to filter bar with full description - Client-side bucketing with Kibana-style auto interval (30 bars target) - Timezone: uses accountStore.accountData.timezone with hour12:false (24h format) - Colors: Azion brand orange #F3652B from azion-theme - Removed duplicate dataset selector from FieldSidebar
…anels and composables - Replace monolithic Drawer components with composable-based architecture - Add session management (useSessionManager, session-browser, session-creator, session-tab-header) - Add panels service with CRUD and localStorage persistence - Add filter-loaders module with introspection-based dynamic field loading - Add dataset-fields shared layer and aggregation operators - Refactor event-chart with useChartBuilder, useChartBucketing and useChartConfig - Add useEventsData, useDetailView, useDocumentSearch, useFieldStats, useFilterActions - Add useMetricsChart and useMetricsDashboardResolver for metrics integration - Add useExportData, usePageSize, useSeverityClassifier composables - Add events-summary-bar, dashboard-panel components - Replace static query-fields constants with dynamic field loading via introspection - Add predefined-panels constants for investigation workflows - Refactor TabsView and tab-panel-block to use new composables - Remove legacy Drawer components and FormFieldsCreateEdgeApplications - Update tests to reflect new buildSummary priority-based field ordering - Add .kilo to .gitignore
- Update event services to handle data aggregation properly - Fix histogram bucketing and field statistics - Improve advanced filter system components - Update and fix tests for event services - Clean up spec files
- Ensure all chart scaling and document loading fixes are in place - Validate filter data before loading events - Apply filters on tab reactivation with proper async handling - Update page size options and add OR operator support - All implementation-related code corrections applied
- Add 30-minute threshold for Events vs Metrics API routing (centralized in chart-api-router.js) - Implement Metrics API fallback for WAF charts on ranges > 30 minutes - Truncate long series names in chart legend (24 chars max) with full names in tooltip - Fix chart tooltip z-index to render above other elements - Change chart wrapper overflow from hidden to visible for tooltip visibility
- Add compact timestamp formatter for RealTimeEvents: 'Apr 22, 2026 at 18:47:53.832' - Create service wrapper to apply compact format to all list services - Add 'documents found' badge in table toolbar showing total document count - Timestamp now includes milliseconds for better precision - Format is localized to user's timezone
- Remove milliseconds from timestamp format (server returns only second precision) - Adjust badge styling: smaller font (0.8125rem), subtle border and background - Add 'documents found' badge in table toolbar with proper spacing and contrast - Badge uses semi-transparent background for discretion
- Add support for direct-field queries in metrics API fallback to handle multiple independent GraphQL aliases per field, improving data fetching for services with column-level restrictions - Implement new performance metrics charts (cache hit/miss, hit rate, request time, bandwidth) with custom colors and configurations - Fix imageProcessor dataset name from 'imageProcessedEvents' to 'imagesProcessedEvents' for correct API alignment - Enhance chart builder with better data merging logic for per-field alias responses, consolidating rows by timestamp - Improve advanced filter system with better content-editable handling and AQL filter support - Update dataset fields configuration across all real-time event services (activity-history, data-stream, edge-dns, edge-functions, image-processor, tiered-cache) for consistency - Add new chart types and series ordering for cache performance visualization with semantic color coding (green for HIT, red for MISS, etc.) - Refactor event chart and summary bar components for better metrics display - Update corresponding unit tests to reflect new data structures and behaviors - Fix linting issues: rename single-letter variables to descriptive names (k->kilobyte, i->sizeIndex, a/b->rowA/rowB) for better code readability This improves the overall user experience when visualizing real-time events and metrics, especially for services with complex data access patterns.
- Fix Bot Traffic and Bot CAPTCHA charts: use metricsApiSeries with per-category filtered queries (classifiedEq, challengeSolved groupByPivot) to eliminate senoidal artifact from groupBy + pivot approach - Fix tooltip positioning: remove position:fixed CSS override on c3-tooltip-container that caused tooltip to render outside chart area - Convert all metrics charts to spline timeseries: WAF (XSS, RFI, SQL, Other, Threats by Host), Bot (Traffic, CAPTCHA), Performance (Cache Hit/Miss, Tiered Cache, Requests Saved/Missed) - Fix Y-axis scale for small values (Avg charts): formatCompact now preserves decimal places for values < 10 - Respect maxYAxis from chart config (Cache Hit Rate capped at 100%) - Fix buildMultiSeries bucketing: use detectNativeInterval to prevent empty slots between real data points; average collapsed slots instead of summing to avoid inflated percentages - Add distinct cache status colors: HIT(green), MISS(red), STALE(yellow), BYPASS(orange), EXPIRED(purple), REVALIDATED(cyan), UPDATING(slate) - Add Bot CAPTCHA label mapping: challengeSolved 0/1/true/false mapped to Resolved/Unresolved via labelMap in groupByPivot config - Convert stacked histograms (Events stack-by) to spline timeseries
- Cap detectNativeInterval to max 2x autoBucket to prevent sparse API data from inflating the bucket interval and truncating the chart range - Use Math.ceil for alignedEnd to ensure the last bucket covers the full rangeEnd instead of truncating before it
- Align Fields sidebar header with chart header (same height/padding) - Fix sidebar detail panel layout: scoped to discover-layout, full height - Fix chevron toggle: closes sidebar when row already active - Remove orange border on selected row - Freeze Time column and chevron column in data table - Optimize chart resize: use c3.resize() instead of full rebuild (50ms debounce) - Standardize all filterbar element heights to 2rem - Fix LoadMoreFooter border color to use surface-border token - Remove duplicate border in EventsSummaryBar - Add spacing between tab bar and filter bar - Improve detail sidebar aesthetics: compact header, two-layer card content - Fix DataTimeRange QuickSelect icon height (2.125rem -> 2rem) - Standardize discover toolbar search input and button heights - Add margin to field sidebar search input
…ar polish - Fix status/proxyStatus showing '-' for falsy values (0) in buildSummary - Fix chunk merge fallback by position when requestId is null - Fix MULTI_SERIES_TIMESERIES bypassing bucketing (plot Metrics API data directly) - Change spline charts to area-spline with monotone interpolation for richer visuals - Add area fill opacity (15%) and thicker line stroke (2px) - Improve bar chart ratio (0.7) for better spacing - Add row dividers in data table (subtle 50% opacity border) - Fix Time column width to 185px to prevent truncation - Rename 'Log Explorer' to 'Events' in session browser - Delete obsolete files: field-selector.vue, discover-data-table.css, REFACTORING_PLAN.md - Field sidebar: pixel-perfect alignment, responsive from mobile to 4K - Fix isValidValue helper to correctly handle 0 and empty strings in document view
…datasets - Fix edgeFunctionsMetrics using wrong aggregate field (sum: requests → count: rows) - Add METRICS_AGGREGATE_MAP for correct aggregate per Metrics dataset - Add loadCacheStatusChartFromMetricsApi for upstreamCacheStatus groupBy - Route upstreamCacheStatus to Metrics API (full 24h range, no bucketing) - Fix chunk merge fallback by position when requestId is null - Use area-spline with 5% opacity fill for multi-series charts - Use monotone interpolation to smooth jagged lines - Line stroke 1.5px, Y-axis padding top 24px for breathing room
- Refatoração do sistema de filtros AQL com melhor estrutura - Otimização da agregação de dados em tempo real - Melhorias na composição de gráficos e configurações - Ajustes nas ações de filtro para melhor performance - Atualização do painel de abas com novos componentes - Correção de erros de linting (identificadores curtos e variáveis não utilizadas)
…llback and fix filter state - useEventsData: add loadTotalCount that queries the API for an exact count when filters are active; falls back to 24h chunked requests (newest→oldest) when the full-range query hits the system limit - useEventsData: replace currentOffset with currentWindowOffset to track pagination state per time window correctly - useEventsData: initialise recordsFound as '—' instead of 0 so the UI shows a dash before the first load completes - useFilterActions: fix defaultFilter to build timestamps at call-time and remove the isLoading guard that was blocking filter re-applies - useViewSync: skip the initial watcher trigger on mount to avoid a duplicate load alongside the onMounted call - useFieldStats: switch watcher source to data.value.length to avoid re-running stats on unrelated reactive updates - load-events-aggregation: make orderBy optional in the GraphQL query string to avoid sending an empty orderBy clause - convert-gql-aggregation: build orderBy string conditionally
…refresh on view change
- metrics-chart-service: add avg aggregation support to loadMetricsFallback
via new aggregation + aggregationType fields in metricsApiFallback config;
also add aggregationType support to loadMetricsAggregation so both paths
can produce avg instead of only sum
- useMetricsChart: add metricsApiFallback to avgRequestTime and
avgUpstreamResponseTime using aggregate: { avg: field } against httpMetrics,
matching how Real-Time Metrics loads these charts — enables 7-day range
instead of being capped at 30 min; avgConnectTime has no fallback because
upstreamConnectTime does not exist in httpMetrics aggregated fields
- useEventsData: remove redundant isLoading guard at the start of load() so
view changes always trigger a fresh load and count reset; loadCallId already
cancels in-flight requests making the guard unnecessary
- event-chart: add collapsed prop and toggle-collapse emit; chevron toggle sits at the left of the header (same pattern as EventsSummaryBar); when collapsed shows CHART label instead of the count to identify what is hidden; chart body uses v-show to preserve the c3 instance across collapse/expand - event-chart: add expandAndResize helper that sets visibility:hidden during the c3 resize() call and clears it on the next animation frame, eliminating the flick/flash when expanding - tab-panel-block: wire collapsed state with localStorage persistence (rte:chart-collapsed); auto-collapse on fullscreen entry; pass collapsed prop and toggle-collapse handler to EventChart
…istService - useEventsData: import useGraphQLStore and pass an onQuery callback to every listService call; the callback saves the last executed query+variables into the store so eventsPlaygroundOpener can read them — fixes the playground opening with query=undefined&variables=undefined for workloadEvents - Other datasets (edgeFunctions, tieredCache, etc.) already call graphqlStore.setQuery() directly inside their service functions, so they were already working; only listHttpRequest used the onQuery callback pattern
…I fix, tooltip, document details - Multiple Events tabs: open/close/rename via session drawer, persist/restore on reload, share-link includes tab label and dataset (useEventsTabs, useTabLimit composables) - Click-to-filter: single-click adds filter, Alt+click excludes, text-selection preserved (useClickToFilter composable wired into log-field-badges and event-document-view) - Summary KPIs independent of Chart_View: loadSummaryKpis fallback service, useEventsData loadChart fallback path, tab-panel-block drops !isMetricsView guard - Chart tooltip edge-flip: custom position callback in buildC3Config, diagonal offset from cursor (32px H / 28px V) so tooltip never covers bars or lines - Document details: sticky header, single scroll container, JSON pre grows to fit, long-value wrapping, reset-scroll on tab switch - Document column: 2-line badge grid with +N more indicator, proportional spacing, DS token-compliant row separation (stripedRows + surface-border) - Remove New Events tab toolbar button — new tabs opened from session drawer - Remove rounded prop from all PrimeButtons in RTE module (DS compliance) - Detail sidebar: compact Kibana-style key/value grid, action buttons on hover, responsive width breakpoints
- filter-bar: fix AQL input taking full width by setting flex-wrap: nowrap and flex: 1 1 0% on query section; DateRange stays inline at all sizes - date-range: compact display format 'May 10 @ 04:43' to save horizontal space - detail-sidebar-panel: responsive width using 30vw with min/max bounds - discover-toolbar: rewrite with scoped CSS, clamp() for proportional sizing, hide secondary buttons at <=1100px, hide search at <=900px - event-chart: smaller legend tile size to reduce overflow - event-document-view: fixed-height rows (1.625rem), actions visible on hover without layout shift, value truncates correctly with ellipsis - events-summary-bar: always expanded by default; add percentage in collapsed inline view (e.g. '4xx 309M (0.61%)'); add formatPctShort helper - log-field-badges: reduce maxFields default from 10 to 5 so '+N more' badge appears consistently; style more badge with dashed border - tab-panel-block: wrap ResizableSplitter in discover-layout__main flex container so detail sidebar pushes table instead of overlapping it - useChartBucketing: tighter niceYMax steps (1, 1.5, 2, 3, 5, 7) for better bar scale proportions - useChartBuilder: remove Y-axis top padding so bars use full vertical space - useEventsData: trigger KPI fallback when chart returns incomplete KPIs (supportsStatusBreakdown: false); merge fallback over chart KPIs - load-events-aggregation: add loadSummaryKpisFromMetrics for large time ranges (>30min) that exceed Events API 2h window; routes loadSummaryKpis through Metrics API (Beholder) for status breakdown on any range
…ed history Bug fixes - Bug 1: `like`/`ilike` wildcards now honor user-placed `%` byte-for-byte in `convert-gql.js` (no double-wrap). `host like app%` → starts-with. - Bug 3: extract `formatPillDateCompact` helper; date pills now preserve seconds (`MMM d @ HH:mm:ss`). - Bug 4: discover-toolbar search no longer dominates the row — replaced rigid `clamp(8rem, 14vw, 14rem)` with shrinkable `flex: 0 1 14rem` and `flex-shrink: 1` on the right cluster. - Bug 5: 45 previously-failing RTE Vitest suites green — per-suite `globalThis.localStorage` edits, complete mock-event factories in `useClickToFilter`, tightened `useEventsData` properties (P3 `min:1`, P6 relaxed bound), `fc.date` invalid-date filter, extra `nextTick` in `useViewSync`. UX polish (date-range picker) - Fluid responsive popover width: `width: min(25rem, 95vw); min-width: 23rem` (368-400px range) — no arbitrary breakpoints. - Calendar cells overridden via PT inline style to win over Azion theme's `width: 32px !important` — now 28×28 with 12px font, consistent typography with time slots. - Quick tab vertical spacing compacted (`mt-4` → `mt-3`, `pt-4` → `pt-3`, section labels `text-sm` → `text-xs`, grid buttons `!py-1 text-xs`). Tenant-scoped filter history - `useQueryHistory` and `useSavedSearches` now persist under `rte-query-history:<client_id>:<user_id>` and `rte-saved-searches:<client_id>:<user_id>` (read from `accountStore.account`). Watch reactive over the scoped key so account switches rehydrate naturally. - Legacy unscoped keys removed on first load (contents were cross-tenant contaminated). - Composables become no-op without account context (no leakage on pre-auth / logout windows). Layout-only fixes - Document detail's `.doc-search__field` capped at 20rem (was full-width). - `LogFieldBadges` renders all fields and uses `ResizeObserver` to compute an accurate `+N more` count, replacing the arbitrary `maxFields: 5` cap and flex-grow hack. Tests added - `convert-gql-like-wildcard.prop.test.js` — PBT 1.A/1.B/1.C covering wildcard pass-through + chip-builder contract. - `aql-like-wildcard.prop.test.js` — parser preserves `%` byte-for-byte. - `aql-preservation.prop.test.js` + `aql-unsupported-operator.prop.test.js`. - `useEventsData-buildApiFilters.prop.test.js` + `useEventsData-buildApiFilters.likeWildcard.prop.test.js`. - `discover-toolbar.layout.test.js` — toolbar CSS + emit contract. - `DiscoverToolbar.stories.js` — 5 viewports (`Mobile_360` … `WideDesktop_1920`). Preservation - `azion-query-language.js` parser, `queryValidator`, unresolved-operator early-return, and `useEventsData.buildApiFilters` operator-string guard unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Completes commit 095f028 (test/story scaffolding) with the corresponding source-file edits. Same scope; split happened only because `git stash pop` unstaged the modified files between staging and commit. - `convert-gql.js`: `wrapLikeValue` honors user-placed `%` (Bug 1). - `format-timestamp.js`: new `formatPillDateCompact` helper (Bug 3). - `inputDateRange/index.vue`: delegate compact formatter via alias; responsive Calendar PT (28×28 cells, text-xs); items-stretch row. - `dataTimeRange/index.vue`: popover `min(25rem, 95vw); min-width: 23rem`. - `quickSelect/index.vue`: vertical spacing compacted (`mt-3`/`pt-3`). - `discover-toolbar.vue`: shrinkable right cluster, search not dominating. - `event-document-view.vue`: doc-search field capped at 20rem. - `log-field-badges.vue`: render all fields + ResizeObserver-driven `+N more` count. - `useQueryHistory.js`, `useSavedSearches.js`: persist under `<key>:<client_id>:<user_id>` so filter history is tenant-isolated. - `regression.test.js`: account-store mock exposes `client_id`/`user_id` so scoped composables work in tests. - Bug 5 test edits across 8 RTE suites (globalThis.localStorage, mock-event hardening, property tightening, nextTick flush). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…oggle (#3523) * feat: introduce v1/v2 coexistence with user-controlled view toggle - Allow users to switch between the classic Real-Time Events (v1, current production) and the redesigned Discover-style view (v2) via a button in the page header. Preference is persisted per browser, so clients can opt in to v2 at their own pace without disrupting existing workflows * feat: update components for v2 compatibility and enhance filter functionality
gdsantana
requested review from
isaquebock,
pauloSF0 and
rafaelgarbinatto
as code owners
|
I have read the CLA Document and I hereby sign the CLA 1 out of 2 committers have signed the CLA. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| if (value === null || value === undefined) return 'null' | ||
| if (typeof value === 'boolean') return value ? 'true' : 'false' | ||
| if (typeof value === 'number' && !Number.isNaN(value)) return String(value) | ||
| const str = String(value).replace(/"/g, '\\"') |
gdsantana
changed the title
- Allow users to switch between the classic Real-Time Events (v1, current production) and the redesigned Discover-style view (v2) via a button in the page header. Preference is persisted per browser, so clients can opt in to v2 at their own pace without disrupting existing workflows
- Added eslint-disable comments for id-length rule in various test files to enhance clarity. - Updated variable names in several functions for better understanding (e.g., changed loop variables from single letters to descriptive names). - Removed unnecessary parameters and comments to streamline code. - Ensured consistent formatting and structure across test files for improved readability.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Feature
Description
Reformulação ampla da experiência Real-Time Events, introduzindo uma nova versão (v2) com layout estilo Kibana Discover sem quebrar o fluxo atual. A v1 e a v2 coexistem na mesma rota e o usuário escolhe qual visualizar através de uma preferência persistente (
real-time-events-preference), protegida por um route guard (realTimeEventsVersionGuard).Principais mudanças:
v1/v2 coexistence + toggle controlado pelo usuário
src/stores/real-time-events-preference.js).src/router/hooks/guards/realTimeEventsVersionGuard.js) decide qual versão renderizar.Novo serviço
real-time-events-service-v2http-request,edge-functions,edge-dns,data-stream,activity-history,tiered-cache,image-processor,edge-functions-console)._sharedpara operadores de agregação, dataset fields e merge de chunks.metrics-chart-serviceintegrado com a Metrics API para histogramas (substitui sub-queries GraphQL aliased, eliminando truncamento em ranges longos).chart-api-routerpara rotear o gráfico entre Metrics API e GraphQL conforme o dataset.get-total-recordscom fallback paginado e contagem precisa.Filter System v2 (
advanced-filter-system-v2)dataTimeRange-v2com Quick/Absolute/Relative e navegação por range.filter-loaders(dataset fields, introspection, parsers) carregados sob demanda.Layout Discover-style
useQueryHistory).Correções pontuais
generate-timestamp).Documentação:
docs/real-time-events-improvement-plan.mdconsolida auditoria, gap analysis vs. Kibana Discover e mapeamento de componentes reutilizáveis.How to test
dataTimeRange-v2.yarn test:unit:headless— novos testes emreal-time-events-service-v2/__tests__e nos filtros AQL devem passar.UI Changes (if applicable)