Add event viewer and filters #309
Conversation
# Conflicts: # services/Api.ts # services/hub_adapter_swagger.json
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughAdds a new event viewing feature: UI components for date and tag filtering, an events page, API helper for fetching events, auth hooks that POST sign-in/sign-out events, new event tag types, and a package dependency addition. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant DateFilterGraph as Date Filter
participant EventViewer as Event Viewer
participant API as /events API
participant TagPanel as Tag Side Panel
participant DataTable as Events Table
User->>DateFilterGraph: Select date range & click Apply
DateFilterGraph->>API: GET /events?start_date=...&end_date=...
API-->>DateFilterGraph: EventLogResponse
DateFilterGraph->>EventViewer: emit showRequestedEvents(data)
EventViewer->>EventViewer: parse events, update counts, update log-level meters
EventViewer->>DataTable: populate/display events
User->>TagPanel: Select tags
TagPanel->>EventViewer: emit selected tags
EventViewer->>DataTable: apply tagsContainsAny filter
DataTable-->>User: display filtered events
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
composables/useAPIFetch.ts (1)
103-109: Change the request body type fromListRoutestoBodyKongProjectCreateKongProjectPost.
ListRoutesis a response type with pagination fields (data?: DetailedRoute[] | nullandoffset?: string | null), but the request body for creating a project should beBodyKongProjectCreateKongProjectPost, which containsdata_store_id: stringandproject_id: string. Using the wrong type will cause type errors when this function is called with the actual request payload.
🤖 Fix all issues with AI agents
In `@components/events/DateFilterGraph.vue`:
- Around line 21-27: In formatDate, remove the redundant .toLocaleString() call
on the string returned by date.toISOString() — change the return to use
date.toISOString().slice(0, 16) (or otherwise call .toLocaleString() directly on
the Date object if localized output is desired) so the code in function
formatDate returns the intended substring without calling .toLocaleString() on a
string.
- Around line 29-49: The requestEvents function currently shows a toast on API
failure but continues and emits possibly undefined eventResp; wrap the API call
in a try/catch or check eventResp before emitting — e.g., in requestEvents,
await useNuxtApp().$hubApi(...) inside a try block (or capture the error in
.catch) and on error set loading.value = false and return early (or provide a
safe default EventLogResponse) so that emit("showRequestedEvents", eventResp) is
only called when eventResp is defined; also include the caught error in the
toast message for better diagnostics.
In `@components/events/EventViewer.vue`:
- Around line 73-83: The style object in formatTag is inconsistent: change the
third branch's property from backgroundColor to background so all branches
return the same CSS property; update the return in the else branch inside
function formatTag (which uses EventServiceTag, EventLogLevelTag, and
getLogLevelColor) to use background: "#8b5cf6" with color: "#ffffff".
In `@components/events/TagFilterSidePanel.vue`:
- Around line 71-81: The label's for attribute is a static string ("item.label")
and should be bound to the checkbox's inputId so the label targets the Checkbox;
update the <label> for attribute to use a dynamic binding (:for) with the same
template used for the Checkbox inputId (`loglevel-${item.label}`) so the label
correctly associates with the Checkbox (component name: Checkbox, props:
v-model="modelValue", :inputId="`loglevel-${item.label}`").
In `@server/routes/flame/api/auth/`[...].ts:
- Around line 140-159: The signIn and signOut event handlers call the hub
adapter via fetch without validation or error handling and contain a wrong
comment and unsafe non-null assertions; update the signIn and signOut functions
to first guard that process.env.NUXT_PUBLIC_HUB_ADAPTER_URL is defined (use a
local const and skip if missing), correct the signOut comment, safely access
account?.access_token and token?.access_token (bail out if no token), and wrap
the fetch in a try/catch so failures are logged (e.g., processLogger.warn/error)
but do not throw—treat the hub call as fire-and-forget and return normally on
errors.
🧹 Nitpick comments (3)
pages/events.vue (1)
1-9: Consider addinglang="ts"for consistency.Other Vue components in this PR use
<script setup lang="ts">. For consistency across the codebase, consider adding the TypeScript annotation here as well, even though this file currently has no TypeScript-specific code.♻️ Suggested change
-<script setup> +<script setup lang="ts"> import EventViewer from "~/components/events/EventViewer.vue"; </script>components/events/EventViewer.vue (2)
139-149: Consider adding explicit type annotation forclearedFilters.The empty object
clearedFilterslacks type information, which may cause TypeScript errors when indexing. Consider typing it to matchdefaultFilters.Proposed fix
function clearAllFilters() { - const clearedFilters = {}; + const clearedFilters: typeof defaultFilters = { ...defaultFilters }; for (const filterKey in defaultFilters) { - clearedFilters[filterKey] = { - ...defaultFilters[filterKey] - }; - clearedFilters[filterKey].value = null; + clearedFilters[filterKey as keyof typeof defaultFilters].value = null; } filters.value = clearedFilters; appliedFilters.value = []; }
90-96: Locale-dependent string splitting may break in some locales.The
.split(", ")assumes the formatted date-time uses ", " as a separator, which varies by locale. Consider usingformatToParts()or separate formatters for date and time to avoid this fragility.Alternative approach using separate formatters
+const dateFormat = new Intl.DateTimeFormat(undefined, { dateStyle: "short" }); +const timeFormat = new Intl.DateTimeFormat(undefined, { timeStyle: "long" }); function formatTimestamp(timestamp: string): string { const date = new Date(timestamp + "Z"); // Python does not return timestamp with standard "Z" - const formattedDateTime = dateTimeFormat.format(date); - const [dateString, timeString] = formattedDateTime.split(", "); - - return `${dateString}<br><b>${timeString}</b>`; + return `${dateFormat.format(date)}<br><b>${timeFormat.format(date)}</b>`; }
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.