feat: Backend dashboard integration - API analytics + Journey Insights#15
Open
TalmizAhmed wants to merge 29 commits into
Open
feat: Backend dashboard integration - API analytics + Journey Insights#15TalmizAhmed wants to merge 29 commits into
TalmizAhmed wants to merge 29 commits into
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
Commits |
Summary of ChangesHello @TalmizAhmed, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a new backend dashboard designed to enhance observability and debugging capabilities. It provides two primary functionalities: API Analytics for monitoring API performance and health, and Journey Search for tracing specific user journeys through logs. The dashboard leverages a new API client for backend communication and utilizes custom web components for a consistent and interactive user experience. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new backend dashboard with two main features: Journey Search and API Analytics. It adds the necessary HTML, CSS, and JavaScript for the dashboard, along with several new UI web components. The changes also include a new API client module for communicating with the backend.
My review focuses on security, correctness, and maintainability. I've identified a critical security vulnerability with a hardcoded API key, as well as another high-severity issue with storing the key in localStorage. I also found a bug in one of the new web components and opportunities to improve code quality by reducing duplication and avoiding potentially unsafe practices like using innerHTML.
|
Contributor
|
The URL is completely broken. Do I need anything to test it ? |
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add inclusiveDayCount to date-utils.js and use it in app.js and api-analytics-tab.js - Expand BACKEND_DEFAULTS with placeholder/maxLimit/hint per tab - Update syncFormForTab to apply dynamic placeholder, max attr, and hint text - Fix #backend-limit input to be dynamic (remove hardcoded max/placeholder) - Add id="backend-limit-hint" span for per-tab dynamic hint updates - Fix setLoading(false) in journey-tab.js to clear status message - Update escapeHtml in api-analytics-tab.js to use createElement approach - Fix #journey-id-input:focus border color to blue (#2563eb) for consistency Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add null guard in updateHeader/updateTitle/updateView so attributeChangedCallback is safe when fired before connectedCallback (before render() runs) - Remove redundant title-text assignment at end of ui-list render() since updateHeader() in connectedCallback already handles it - Call getDayDifference() once in renderMetrics to avoid double evaluation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add braces around all single-line if/else bodies across api-analytics-tab.js, app.js, backend-api.js, journey-tab.js, utils/date-utils.js, and the three UI web components. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Switch from localhost:8002 to the Ethos stage deployment URL. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
# Conflicts: # app.js
…ort arrows - Expandable detail row per route shows backend_errors as colored badges sorted by count - Filter row below column headers: text search for route, min-threshold inputs for all numeric columns - Filters update the body only (no focus loss while typing) - Sort arrows indicate active column and direction - Responsive breakpoint updated for new 7-column layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Expand button: red circle badge (+/−) replaces invisible gray ▶ arrow - Fix expand toggle logic (classList.toggle truthiness was inverted) - Filter row: white bg with blue top accent border to separate from header - Add funnel SVG icon in filter row leftmost cell - Shorten placeholder text to fit narrow columns (min, min %, min ms) - Hide browser number spinners on filter inputs - Filter inputs: subtle background, cleaner focus ring Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… in-flight queries Root cause: renderFromURLParams() re-mounted renderApiDashboardTab() on every handleParamUpdate() call (tab clicks, URL changes, domain updates), which created a fresh state (analytics: null), orphaned the pending fetch, and immediately showed the placeholder while the network request was still in flight. Fix: - app.js: persist apiTabContainer/journeyTabContainer so the module is mounted once; subsequent renderFromURLParams calls just move the same container back into urlResults via replaceChildren, preserving all state and in-flight requests - api-analytics-tab.js: add queryId guard so aborted/stale promise callbacks cannot affect the loading state of a newer query (belt-and-suspenders) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- index.html: remove tab button, journey-id-input group, Search Logs button - app.js: remove renderJourneyTab/searchLogs imports, journey from BACKEND_TABS and BACKEND_DEFAULTS, journeyTabApi/Container state, journey branch in renderFromURLParams, syncFormForTab journey refs, Search Logs click handler Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… layout
Normalise both error formats: plain number and { count, description } object.
Switch expanded error detail from flex badges to a compact table:
- Error Code | Count | Description (column only shown when descriptions exist)
- Rows sorted by count descending
- Both formats can coexist in the same error map
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…es and status column - Restructure tab into Client Side API + Server Side API panels - Client Side API: placeholder with shared/unique column breakdown and pointer to Error Analysis tab (integration coming) - Server Side API: renamed columns (API Route→Endpoint, Failed→Failures) - Add Performance badge column (High/Medium/Low based on failure_rate + avg_time_ms) - Add Status column showing top backend error code inline - Move Max Time into expand row alongside full backend errors table - Add performance_level filter (All/High/Medium/Low select) - Remove max_time_ms filter (column no longer in main table) - Update subtitle to reflect end-to-end client+server scope - Update metric card labels (Total Calls, Failures, Endpoints) - Responsive breakpoint: hide columns 5+ on mobile via nth-child(n+5) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces the placeholder in the Client Side API panel with a real table sourced from RUM missingresource events. Data is processed directly from rawData bundles and displayed sorted by page-view frequency, matching the Error Analysis → Missing Resources style. - Columns: #, Resource URL, Type, Status, Page Views, % of Views, Performance - Resource type badges (image/javascript/css/json/others) - Filter bar: URL text search, type select, performance level select - Sort on all columns (click header) - Performance levels use same High/Medium/Low thresholds (40%/10% of max weight) - Both panels now always visible; Server Side shows "Click Run Query" placeholder until queried (removes the full-page placeholder) - app.js passes currentData to setClientData() after mounting API tab Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…lter UI
Client Side API table redesign:
- Pagination: 25 rows/page default, selector (10/25/50/100), first/prev/next/last
nav buttons with SVG icons, "Page X of Y" + "A–B of N" counters
- Status code filter: dropdown dynamically populated from data, sorted by
frequency so the most common codes appear first
- Performance legend: inline bar below toolbar showing exact thresholds
(High ≥40% of peak views, Medium ≥10%, Low <10%) with live counts
- Toolbar redesign:
· Search: full-width input with magnifier icon, focus ring
· Type filter: pill buttons (All / Image / JS / CSS / JSON / Other) with
per-type counts, colored active states per type
· Status + Performance: labeled select dropdowns in bordered wrapper
· Clear filters: red accent button visible only when filters are active
· Result count: right-aligned "N of M resources"
- Sort headers: SVG dual-chevron icons (blue = active direction, gray = inactive)
- Partial re-render: filter/sort/page changes update only the client panel,
server section is left untouched (no focus loss on typing)
- setClientData collects unique status codes sorted by global frequency
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…cation Adds a third panel to the API Analytics tab showing loadresource timing data from RUM bundles. Each resource shows Median/p75/p95/Mean/Observations with time values color-coded (green fast <250ms, amber moderate, red slow ≥1s) and a High/Medium/Low performance badge based on mean load time. Includes search, type pills, performance filter, sortable columns, pagination, and partial re-render (updateLoadSection) so Client Side API and Server Side API panels are not disturbed on interaction. Also fixes setClientData null-data path to reset loadResources alongside clientResources. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Three fixes: 1. Override #url-results .loading-container styles so #api-loading renders as a slim inline banner (blue-tinted strip) instead of a large white card that visually clashes with the panel layout below it. 2. Change "RUM data not loaded" hint to a neutral loading message since the data is simply still in-flight, not permanently missing. 3. Push fresh RUM data to the API tab's client panels from within loadData() itself so panels populate immediately when data arrives, regardless of whether the tab was active before the load completed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Two defensive fixes for the null-state panels: 1. In the startup catch block, set currentData = currentData || [] so that if loadData() throws (network error, timeout, etc.) the API tab panels show "no data found" instead of staying permanently in the null/loading state while currentData remains undefined. 2. In renderFromURLParams, when the API tab mounts and currentData is not yet available (race condition where tab switch beats the async data load), kick off a loadData() call and push the result to setClientData once it resolves. Previously this path silently left both panels in null state. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ntData Production RUM bundles can have numeric or object values for e.source even when the field is truthy. Calling e.source.toLowerCase() on a non-string throws a TypeError which, because handleParamUpdate does not await renderFromURLParams, silently becomes an unhandled promise rejection and leaves both Client Side API and Resource Load Times panels permanently in null state. Fixes: - Introduce srcStr() helper that coerces e.source to string before calling toLowerCase(), applied to both missingresource and loadresource filter chains. - Wrap the entire setClientData processing body in try/catch so any future JS error falls back to showing the empty-data state rather than leaving panels stuck in the null/loading state with no user-visible indication of what went wrong. Error is logged to console for debugging. - Also apply String() coercion to statusCode.trim() check to be consistent. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ners Each of the three panels now shows its own inline spinner. The Server Side API panel shows a spinner immediately when Run Query is pressed (no flicker on client/load panels). Removed the separate #api-loading banner that was appearing as a 4th element above the panels. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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
3 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.
URL for testing:
https://backend-dsb--forms-dashboard--adobe-rnd.aem.page/
Preview URLs
Before (baseline): https://dev--forms-dashboard--adobe-rnd.aem.live/index.html
After (this branch): https://backend-dsb--forms-dashboard--adobe-rnd.aem.live/index.html