fix(admin-ui): Use typescript generated client on MAU, Reports and Heath pages #2506
Conversation
syntrydy
added
comp-admin-ui
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughReplaces legacy JS MAU and Health UI with new TypeScript implementations: adds typed pages, components, hooks, types, utils, constants, and translations; removes old JS components; updates route wiring and exposes a theme consumer hook. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MauPage
participant DateRangeSelector
participant useMauStats
participant GetStatAPI as GetStat API
participant Augment as Data Augmentation
participant Charts
User->>MauPage: open page
MauPage->>DateRangeSelector: render defaults
User->>DateRangeSelector: select dates / apply
DateRangeSelector->>MauPage: onApply(dateRange)
MauPage->>useMauStats: request stats(dateRange)
useMauStats->>GetStatAPI: call GetStat (token, params)
GetStatAPI-->>useMauStats: return raw stats
useMauStats->>Augment: transform & augment data
Augment-->>useMauStats: MauStatEntry[]
useMauStats-->>MauPage: data, summary
MauPage->>Charts: render summary & charts
Charts-->>User: display MAU dashboard
sequenceDiagram
participant User
participant HealthPage
participant useHealthStatus
participant GetServiceStatusAPI as GetServiceStatus API
participant Normalizer as STATUS_MAP
participant UI
User->>HealthPage: open page
HealthPage->>useHealthStatus: init (auth token)
useHealthStatus->>GetServiceStatusAPI: fetch statuses
GetServiceStatusAPI-->>useHealthStatus: raw service data
useHealthStatus->>Normalizer: normalize statuses
Normalizer-->>useHealthStatus: ServiceHealth[]
useHealthStatus-->>HealthPage: services, healthyCount, totalCount
HealthPage->>UI: render HealthStatusBadge, ServiceStatusCard[]
UI-->>User: display Health dashboard
User->>HealthPage: click refresh
HealthPage->>useHealthStatus: refetch()
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (4)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 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: 20
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (32)
admin-ui/app/locales/en/translation.json(4 hunks)admin-ui/app/locales/es/translation.json(4 hunks)admin-ui/app/locales/fr/translation.json(4 hunks)admin-ui/app/locales/pt/translation.json(4 hunks)admin-ui/plugins/admin/components/Health/HealthPage.js(0 hunks)admin-ui/plugins/admin/components/Health/HealthPage.tsx(1 hunks)admin-ui/plugins/admin/components/Health/components/HealthStatusBadge.tsx(1 hunks)admin-ui/plugins/admin/components/Health/components/ServiceStatusCard.tsx(1 hunks)admin-ui/plugins/admin/components/Health/constants.ts(1 hunks)admin-ui/plugins/admin/components/Health/hooks/index.ts(1 hunks)admin-ui/plugins/admin/components/Health/hooks/useHealthStatus.ts(1 hunks)admin-ui/plugins/admin/components/Health/types/HealthTypes.ts(1 hunks)admin-ui/plugins/admin/components/Health/types/index.ts(1 hunks)admin-ui/plugins/admin/components/MAU/MauGraph.js(0 hunks)admin-ui/plugins/admin/components/MAU/MauPage.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/DateRangeSelector.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/MauSummaryCards.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/MauTrendChart.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/TokenDistributionChart.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/TokenTrendChart.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/index.ts(1 hunks)admin-ui/plugins/admin/components/MAU/constants.ts(1 hunks)admin-ui/plugins/admin/components/MAU/hooks/index.ts(1 hunks)admin-ui/plugins/admin/components/MAU/hooks/useMauStats.ts(1 hunks)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts(1 hunks)admin-ui/plugins/admin/components/MAU/types/index.ts(1 hunks)admin-ui/plugins/admin/components/MAU/utils/dataAugmentation.ts(1 hunks)admin-ui/plugins/admin/components/MAU/utils/formatters.ts(1 hunks)admin-ui/plugins/admin/components/MAU/utils/index.ts(1 hunks)admin-ui/plugins/admin/components/Reports/ReportPage.tsx(1 hunks)admin-ui/plugins/admin/components/Reports/SimpleBarChart.js(0 hunks)admin-ui/plugins/admin/plugin-metadata.ts(2 hunks)
💤 Files with no reviewable changes (3)
- admin-ui/plugins/admin/components/Health/HealthPage.js
- admin-ui/plugins/admin/components/MAU/MauGraph.js
- admin-ui/plugins/admin/components/Reports/SimpleBarChart.js
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-05T18:24:41.681Z
Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2498
File: admin-ui/plugins/saml/components/SamlConfigurationForm.tsx:30-30
Timestamp: 2025-12-05T18:24:41.681Z
Learning: In the GluuFederation/flex admin-ui codebase, `SetTitle` (imported from 'Utils/SetTitle') is a custom React hook that should be called at the component's top level, not inside `useEffect` or other hooks, because it internally manages side effects for setting page titles.
Applied to files:
admin-ui/plugins/admin/components/Health/HealthPage.tsx
🧬 Code graph analysis (14)
admin-ui/plugins/admin/components/MAU/components/MauSummaryCards.tsx (7)
admin-ui/plugins/schema/components/types/AttributeListPage.types.ts (1)
ThemeState(29-31)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
MauSummary(30-37)admin-ui/plugins/admin/components/MAU/types/index.ts (1)
MauSummary(5-5)admin-ui/app/components/Card/Card.tsx (1)
Card(27-27)admin-ui/plugins/admin/components/MAU/utils/formatters.ts (2)
formatNumber(12-20)formatPercentChange(29-32)admin-ui/plugins/admin/components/MAU/constants.ts (1)
getChartColors(45-47)admin-ui/plugins/admin/redux/features/mappingSlice.js (1)
index(47-47)
admin-ui/plugins/admin/components/Health/components/ServiceStatusCard.tsx (2)
admin-ui/plugins/admin/components/Health/types/HealthTypes.ts (1)
ServiceStatusCardProps(14-19)admin-ui/plugins/admin/components/Health/types/index.ts (1)
ServiceStatusCardProps(6-6)
admin-ui/plugins/admin/components/Health/hooks/useHealthStatus.ts (2)
admin-ui/plugins/admin/components/Health/types/HealthTypes.ts (3)
ServiceStatusValue(5-5)ServiceHealth(7-12)ServiceStatusResponse(25-27)admin-ui/plugins/admin/components/Health/constants.ts (3)
STATUS_MAP(15-26)DEFAULT_STATUS(28-28)HEALTH_CACHE_CONFIG(3-6)
admin-ui/plugins/admin/components/MAU/MauPage.tsx (4)
admin-ui/plugins/admin/components/MAU/constants.ts (1)
DEFAULT_DATE_RANGE_MONTHS(8-8)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
MauDateRange(25-28)admin-ui/plugins/admin/components/MAU/types/index.ts (1)
MauDateRange(4-4)admin-ui/plugins/admin/components/MAU/hooks/useMauStats.ts (1)
useMauStats(84-120)
admin-ui/plugins/admin/components/Health/HealthPage.tsx (3)
admin-ui/plugins/schema/components/types/AttributeListPage.types.ts (1)
ThemeState(29-31)admin-ui/plugins/admin/components/Health/hooks/useHealthStatus.ts (1)
useHealthStatus(70-100)admin-ui/app/components/Card/Card.tsx (1)
Card(27-27)
admin-ui/plugins/admin/components/Health/types/HealthTypes.ts (1)
admin-ui/plugins/admin/components/Health/types/index.ts (5)
ServiceStatusValue(4-4)ServiceHealth(5-5)ServiceStatusCardProps(6-6)HealthStatusBadgeProps(7-7)ServiceStatusResponse(8-8)
admin-ui/plugins/admin/components/MAU/utils/formatters.ts (2)
admin-ui/plugins/admin/components/MAU/utils/index.ts (4)
formatMonth(10-10)formatNumber(11-11)calculatePercentChange(12-12)formatPercentChange(13-13)admin-ui/plugins/admin/components/MAU/constants.ts (1)
MONTH_NAMES(49-62)
admin-ui/plugins/admin/components/MAU/components/TokenTrendChart.tsx (4)
admin-ui/plugins/schema/components/types/AttributeListPage.types.ts (1)
ThemeState(29-31)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
MauChartProps(57-59)admin-ui/plugins/admin/components/MAU/constants.ts (1)
getChartColors(45-47)admin-ui/plugins/admin/components/MAU/utils/index.ts (2)
formatMonth(10-10)formatNumber(11-11)
admin-ui/plugins/admin/components/MAU/hooks/useMauStats.ts (4)
admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (4)
MauStatEntry(3-9)RawStatEntry(11-23)MauSummary(30-37)MauDateRange(25-28)admin-ui/plugins/admin/components/MAU/utils/dataAugmentation.ts (2)
transformRawStatEntry(21-31)augmentMauData(43-64)admin-ui/plugins/admin/components/MAU/utils/formatters.ts (1)
calculatePercentChange(22-27)admin-ui/plugins/admin/components/MAU/constants.ts (1)
MAU_CACHE_CONFIG(3-6)
admin-ui/plugins/admin/components/MAU/components/MauTrendChart.tsx (4)
admin-ui/plugins/schema/components/types/AttributeListPage.types.ts (1)
ThemeState(29-31)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
MauChartProps(57-59)admin-ui/plugins/admin/components/MAU/constants.ts (1)
getChartColors(45-47)admin-ui/plugins/admin/components/MAU/utils/formatters.ts (2)
formatMonth(3-10)formatNumber(12-20)
admin-ui/plugins/admin/components/Health/components/HealthStatusBadge.tsx (4)
admin-ui/plugins/admin/components/Health/types/HealthTypes.ts (1)
HealthStatusBadgeProps(21-23)admin-ui/plugins/admin/components/Health/types/index.ts (1)
HealthStatusBadgeProps(7-7)admin-ui/plugins/admin/components/Audit/AuditListPage.js (1)
badgeColor(54-54)admin-ui/plugins/admin/components/Health/constants.ts (3)
STATUS_BADGE_COLOR(37-42)STATUS_LABEL_KEYS(30-35)STATUS_COLORS(8-13)
admin-ui/plugins/admin/components/MAU/components/DateRangeSelector.tsx (3)
admin-ui/plugins/schema/components/types/AttributeListPage.types.ts (1)
ThemeState(29-31)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
DateRangeSelectorProps(61-70)admin-ui/plugins/admin/components/MAU/constants.ts (1)
DATE_PRESETS(10-14)
admin-ui/plugins/admin/components/Health/constants.ts (2)
admin-ui/plugins/admin/components/Health/types/HealthTypes.ts (1)
ServiceStatusValue(5-5)admin-ui/plugins/admin/components/Health/types/index.ts (1)
ServiceStatusValue(4-4)
admin-ui/plugins/admin/components/MAU/constants.ts (2)
admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
DateRangePreset(46-49)admin-ui/plugins/admin/components/MAU/types/index.ts (1)
DateRangePreset(7-7)
🔇 Additional comments (27)
admin-ui/plugins/admin/components/Reports/ReportPage.tsx (1)
3-5: Empty component implementation.The component returns an empty
<div>with no content or functionality. This appears to be a placeholder.Is this intentional, or is there missing implementation for the Reports page?
admin-ui/plugins/admin/components/MAU/hooks/index.ts (1)
1-1: LGTM!Clean barrel export pattern for MAU hooks.
admin-ui/plugins/admin/components/Health/hooks/index.ts (1)
1-1: LGTM!Clean barrel export pattern for Health hooks.
admin-ui/plugins/admin/components/Health/types/index.ts (1)
1-9: LGTM!Proper barrel export consolidating Health-related types for easier consumption.
admin-ui/plugins/admin/components/Health/components/ServiceStatusCard.tsx (1)
34-48: LGTM!The component structure and JSX rendering are clean and well-organized. The use of conditional styling for errors and the integration with HealthStatusBadge work correctly.
admin-ui/plugins/admin/plugin-metadata.ts (2)
5-5: LGTM!Correct import update from
MauGraphtoMauPagealigning with the PR's objective to use TypeScript-generated client types.
143-143: LGTM!Route component correctly updated to use
MauPageinstead of the oldMauGraphcomponent.admin-ui/plugins/admin/components/MAU/components/TokenDistributionChart.tsx (2)
23-39: LGTM!Good use of
useMemofor bothchartColorsanddatato optimize rendering performance. The data structure correctly maps summary values to chart-ready format with proper dependencies.
43-75: LGTM!Clean conditional rendering with proper empty state handling. The chart configuration is well-structured with appropriate responsive behavior, tooltips, and legends.
admin-ui/plugins/admin/components/Health/components/HealthStatusBadge.tsx (1)
7-11: LGTM!Clean implementation using well-defined constants for colors and labels. The component correctly leverages translations and type-safe props.
admin-ui/app/locales/en/translation.json (1)
64-65: MAU/Health i18n keys align with new UI usageThe added
actions.refresh, MAUfields.*totals/presets, health/MAUmessages.*, andtitles.*entries are consistent with the new MAU charts and Health page components and use correct interpolation placeholders. No issues from a UI/i18n perspective.Also applies to: 362-369, 868-882, 1027-1030
admin-ui/app/locales/pt/translation.json (1)
171-173: Portuguese MAU/Health translations mirror EN keys and usageThe new
actions.refresh, MAUfields.*totals/presets, health/MAUmessages.*, andtitles.*entries correctly mirror the English keys and maintain required interpolation placeholders, so they should integrate cleanly with the new MAU and Health UIs.Also applies to: 495-502, 800-814, 939-943
admin-ui/plugins/admin/components/Health/hooks/useHealthStatus.ts (1)
70-100: useHealthStatus hook wiring and transformation are appropriateThe hook correctly gates the query on
authToken, applies cache settings fromHEALTH_CACHE_CONFIG, shapes the rawJsonNodeviaselect: transformServiceStatus, and memoizescomputeOverallStatus(services). The returned surface (services, aggregated status/counts, loading/error flags,refetch) is well‑structured for the Health page.admin-ui/plugins/admin/components/MAU/components/index.ts (1)
1-5: MAU components barrel export is clean and conventionalThe index file neatly re‑exports the MAU components as named exports, which simplifies imports for callers without adding runtime complexity.
admin-ui/plugins/admin/components/MAU/components/MauSummaryCards.tsx (1)
47-93: LGTM!The
MauSummaryCardscomponent is well-structured with proper use ofuseMemofor chart colors, responsive grid layout, and clean separation between the card configuration and rendering logic.admin-ui/plugins/admin/components/MAU/MauPage.tsx (3)
78-80: Verifyrefetchis stable or add it to dependency array consideration.The
handleApplycallback depends onrefetchfrom the query result. Ifrefetchreference changes between renders, it could cause unnecessary re-renders of components receivinghandleApply. This is typically fine with React Query's stable references, but worth noting.
84-142: LGTM!The page structure is well-organized with proper permission gating via
GluuViewWrapper, appropriate loading states, and clean conditional rendering for error/empty/data states. The responsive layout for charts is correctly implemented.
24-24:SetTitleshould be called within auseEffecthook.Calling
SetTitledirectly in the component body executes it on every render, which is a side effect. Move it to auseEffectto follow React best practices for side effects.+ React.useEffect(() => { + SetTitle(t('titles.mau_dashboard')) + }, [t]) - SetTitle(t('titles.mau_dashboard'))⛔ Skipped due to learnings
Learnt from: faisalsiddique4400 Repo: GluuFederation/flex PR: 2498 File: admin-ui/plugins/saml/components/SamlConfigurationForm.tsx:30-30 Timestamp: 2025-12-05T18:24:41.681Z Learning: In the GluuFederation/flex admin-ui codebase, `SetTitle` (imported from 'Utils/SetTitle') is a custom React hook that should be called at the component's top level, not inside `useEffect` or other hooks, because it internally manages side effects for setting page titles.admin-ui/plugins/admin/components/MAU/hooks/useMauStats.ts (3)
100-110: LGTM!The query configuration properly gates fetching with
isEnabled, applies appropriate caching settings, and theselectfunction correctly transforms and augments the API response. The closure overdateRangeis safe since the query re-executes when params change.
14-23: LGTM!The
transformApiResponsefunction defensively handles undefined/non-array data and properly converts the genericJsonNodetype to the specificRawStatEntrytype using the established transformation utility.
84-120: LGTM!The
useMauStatshook provides a clean API with proper auth gating, configurable enablement, and extends the base query result with processed data and computed summary. The memoization of summary computation is appropriate.admin-ui/plugins/admin/components/MAU/utils/index.ts (1)
1-14: LGTM!Clean barrel file that properly consolidates utility exports from internal modules, providing a clean public API surface for MAU utilities.
admin-ui/plugins/admin/components/MAU/types/index.ts (1)
1-11: LGTM!Proper use of
export typesyntax for type-only re-exports, providing a clean public API for MAU type definitions.admin-ui/plugins/admin/components/MAU/utils/formatters.ts (1)
12-32: Number and percent formatters look appropriate for dashboard use
formatNumber,calculatePercentChange, andformatPercentChangebehave as expected for MAU/token metrics (K/M abbreviations, division‑by‑zero guard, and signed percentage output). No issues from a correctness or UX standpoint.admin-ui/app/locales/es/translation.json (1)
64-65: New MAU and health/status Spanish translations align with code expectationsThe added keys for MAU metrics (
fields.total_mau,fields.total_tokens,fields.cc_tokens,fields.authz_code_tokens, date presets) and health/status (messages.service_status_*,messages.status_*, MAU loading/empty states, dashboard titles) match the identifiers used in the new constants and components. Placeholder usage (e.g.,{{healthyCount}},{{totalCount}}) looks correct, and there are no obvious structural issues in these sections.Also applies to: 362-369, 867-881, 1020-1023
admin-ui/app/locales/fr/translation.json (1)
174-176: French MAU and health/status translations are consistent with new feature surfaceThe newly added French strings for refresh, MAU totals/date presets, health status descriptions, status labels, MAU loading/empty messages, and the MAU/health dashboard titles all use keys that match the TS constants (
fields.date_preset_*,messages.status_*, etc.). Interpolation variables and JSON structure look correct, so these should plug into the new UI without i18n issues.Also applies to: 483-490, 805-819, 946-950
admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
3-70: MAU type definitions are cohesive and align with utilities/componentsThe MAU interfaces cleanly model the data you transform and display (
MauStatEntryvsRawStatEntry), the summary metrics, token distribution entries, and the date‑range selector props. Month encoding as a numericYYYYMMaligns with the augmentation/formatter helpers, and the preset/date range types line up withDATE_PRESETSand the selector callbacks. No changes needed here.
admin-ui/plugins/admin/components/Health/components/HealthStatusBadge.tsx
Show resolved
Hide resolved
admin-ui/plugins/admin/components/Health/components/ServiceStatusCard.tsx
Outdated
Show resolved
Hide resolved
admin-ui/plugins/admin/components/Health/components/ServiceStatusCard.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (6)
admin-ui/plugins/admin/components/Health/components/HealthStatusBadge.tsx (1)
7-12: LGTM! Previous feedback addressed.The inline style object has been properly extracted as a top-level constant
DOT_STYLE, which avoids recreation on every render.admin-ui/plugins/admin/components/MAU/components/MauSummaryCards.tsx (2)
20-43: LGTM! Previous feedback addressed.The zero-change logic has been properly fixed. Lines 23-24 now correctly distinguish positive (
change > 0) from negative (change < 0) from neutral (change === 0), and line 26 usesfa-minusfor the neutral case, displaying gray color.
63-72: LGTM! Previous feedback addressed.The token sub-category cards (
cc_tokensandauthz_code_tokens) no longer include thechangeproperty, preventing the display of misleading aggregate change values for individual token types.admin-ui/plugins/admin/components/MAU/hooks/useMauStats.ts (1)
48-57: LGTM! Previous feedback addressed.The single-entry edge case is now properly handled. When
data.length === 1, the function returns the totals withmauChange: 0andtokenChange: 0, avoiding the misleading percentage calculation that would occur with an empty first half.admin-ui/plugins/admin/components/MAU/MauPage.tsx (1)
109-114: LGTM! Previous feedback addressed.The error message now correctly uses
'messages.error_loading_data', which is appropriate for a data-fetching failure rather than a save operation.admin-ui/plugins/admin/components/Health/hooks/useHealthStatus.ts (1)
39-75: LGTM! Previous feedback addressed.The
computeOverallStatusfunction now correctly handles all status combinations:
- Returns
'unknown'when services array is empty (lines 44-50)- Correctly identifies
'unknown'as the overall status when no services are down/degraded but some are unknown (lines 64-65)- Properly distinguishes fully healthy (
healthyCount === services.length) from mixed statesThis fixes the previous issue where all-unknown services would incorrectly report as
'up'.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (22)
admin-ui/app/context/theme/themeContext.tsx(2 hunks)admin-ui/app/locales/en/translation.json(4 hunks)admin-ui/app/locales/es/translation.json(4 hunks)admin-ui/app/locales/fr/translation.json(4 hunks)admin-ui/app/locales/pt/translation.json(4 hunks)admin-ui/plugins/admin/components/Health/HealthPage.tsx(1 hunks)admin-ui/plugins/admin/components/Health/components/HealthStatusBadge.tsx(1 hunks)admin-ui/plugins/admin/components/Health/components/ServiceStatusCard.tsx(1 hunks)admin-ui/plugins/admin/components/Health/constants.ts(1 hunks)admin-ui/plugins/admin/components/Health/hooks/useHealthStatus.ts(1 hunks)admin-ui/plugins/admin/components/Health/utils/formatters.ts(1 hunks)admin-ui/plugins/admin/components/Health/utils/index.ts(1 hunks)admin-ui/plugins/admin/components/MAU/MauPage.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/DateRangeSelector.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/MauSummaryCards.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/MauTrendChart.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/TokenDistributionChart.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/components/TokenTrendChart.tsx(1 hunks)admin-ui/plugins/admin/components/MAU/constants.ts(1 hunks)admin-ui/plugins/admin/components/MAU/hooks/useMauStats.ts(1 hunks)admin-ui/plugins/admin/components/MAU/utils/dataAugmentation.ts(1 hunks)admin-ui/plugins/admin/components/MAU/utils/formatters.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-11-10T14:18:58.310Z
Learnt from: kdhttps
Repo: GluuFederation/flex PR: 2378
File: admin-ui/plugins/admin/components/Cedarling/CedarlingConfigPage.tsx:107-109
Timestamp: 2025-11-10T14:18:58.310Z
Learning: In the Cedarling configuration page (admin-ui/plugins/admin/components/Cedarling/CedarlingConfigPage.tsx), console.error calls should be kept in catch blocks when there are multiple operations in the try block, as they help print the whole error object with details for debugging unexpected errors.
Applied to files:
admin-ui/plugins/admin/components/MAU/MauPage.tsx
📚 Learning: 2025-12-05T18:24:41.681Z
Learnt from: faisalsiddique4400
Repo: GluuFederation/flex PR: 2498
File: admin-ui/plugins/saml/components/SamlConfigurationForm.tsx:30-30
Timestamp: 2025-12-05T18:24:41.681Z
Learning: In the GluuFederation/flex admin-ui codebase, `SetTitle` (imported from 'Utils/SetTitle') is a custom React hook that should be called at the component's top level, not inside `useEffect` or other hooks, because it internally manages side effects for setting page titles.
Applied to files:
admin-ui/plugins/admin/components/Health/HealthPage.tsx
🧬 Code graph analysis (11)
admin-ui/plugins/admin/components/MAU/components/TokenDistributionChart.tsx (4)
admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
MauSummary(30-37)admin-ui/app/context/theme/themeContext.tsx (1)
useTheme(44-50)admin-ui/plugins/admin/components/MAU/constants.ts (1)
getChartColors(45-46)admin-ui/plugins/admin/components/MAU/utils/formatters.ts (1)
formatNumber(15-23)
admin-ui/plugins/admin/components/MAU/components/DateRangeSelector.tsx (6)
admin-ui/plugins/admin/components/MAU/types/index.ts (1)
DateRangeSelectorProps(10-10)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
DateRangeSelectorProps(61-70)admin-ui/app/context/theme/themeContext.tsx (1)
useTheme(44-50)admin-ui/plugins/admin/components/MAU/constants.ts (1)
DATE_PRESETS(10-14)admin-ui/plugins/admin/components/Audit/AuditListPage.js (2)
startDate(59-59)endDate(60-60)admin-ui/plugins/auth-server/components/Clients/ClientBasicPanel.js (1)
isLoading(56-56)
admin-ui/plugins/admin/components/MAU/utils/formatters.ts (2)
admin-ui/plugins/admin/components/MAU/utils/index.ts (4)
formatMonth(10-10)formatNumber(11-11)calculatePercentChange(12-12)formatPercentChange(13-13)admin-ui/plugins/admin/components/MAU/constants.ts (1)
MONTH_NAMES(48-61)
admin-ui/plugins/admin/components/MAU/MauPage.tsx (4)
admin-ui/plugins/admin/components/MAU/constants.ts (1)
DEFAULT_DATE_RANGE_MONTHS(8-8)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
MauDateRange(25-28)admin-ui/plugins/admin/components/MAU/hooks/useMauStats.ts (1)
useMauStats(95-131)admin-ui/app/components/Card/Card.tsx (1)
Card(27-27)
admin-ui/plugins/admin/components/Health/components/HealthStatusBadge.tsx (2)
admin-ui/plugins/admin/components/Health/types/HealthTypes.ts (1)
HealthStatusBadgeProps(21-23)admin-ui/plugins/admin/components/Health/constants.ts (3)
STATUS_BADGE_COLOR(37-42)STATUS_LABEL_KEYS(30-35)STATUS_COLORS(8-13)
admin-ui/plugins/admin/components/MAU/constants.ts (2)
admin-ui/plugins/admin/components/MAU/types/index.ts (1)
DateRangePreset(7-7)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
DateRangePreset(46-49)
admin-ui/plugins/admin/components/Health/HealthPage.tsx (2)
admin-ui/app/context/theme/themeContext.tsx (1)
useTheme(44-50)admin-ui/plugins/admin/components/Health/hooks/useHealthStatus.ts (1)
useHealthStatus(77-107)
admin-ui/plugins/admin/components/Health/constants.ts (2)
admin-ui/plugins/admin/components/Health/types/index.ts (1)
ServiceStatusValue(4-4)admin-ui/plugins/admin/components/Health/types/HealthTypes.ts (1)
ServiceStatusValue(5-5)
admin-ui/plugins/admin/components/MAU/utils/dataAugmentation.ts (2)
admin-ui/plugins/admin/components/MAU/types/index.ts (2)
RawStatEntry(3-3)MauStatEntry(2-2)admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (2)
RawStatEntry(11-23)MauStatEntry(3-9)
admin-ui/plugins/admin/components/Health/components/ServiceStatusCard.tsx (2)
admin-ui/plugins/admin/components/Health/types/HealthTypes.ts (2)
ServiceHealth(7-12)ServiceStatusCardProps(14-19)admin-ui/plugins/admin/components/Health/utils/formatters.ts (1)
formatServiceName(1-6)
admin-ui/plugins/admin/components/MAU/components/MauTrendChart.tsx (3)
admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
MauChartProps(57-59)admin-ui/app/context/theme/themeContext.tsx (1)
useTheme(44-50)admin-ui/plugins/admin/components/MAU/utils/formatters.ts (2)
formatMonth(3-13)formatNumber(15-23)
🔇 Additional comments (19)
admin-ui/app/context/theme/themeContext.tsx (1)
44-50:useThemehook cleanly encapsulates ThemeContext accessWrapping
useContext(ThemeContext)with a typed hook and an explicit provider check is a good improvement and removes the need for unsafe casts in consumers.admin-ui/app/locales/pt/translation.json (1)
171-172: PT translations correctly mirror new MAU and Health keysThe added Portuguese strings for refresh, MAU/token metrics, service health messages, and MAU-related titles are consistent with the English keys and keep placeholder syntax intact.
Also applies to: 495-502, 800-815, 940-944
admin-ui/plugins/admin/components/MAU/constants.ts (1)
3-61: MAU cache, presets, and theming constants are coherent and type-safeCache timings, date presets, theme color mapping,
getChartColorsfallback, andMONTH_NAMESall align with the MAU types and formatter usage; this centralization should make the MAU charts easier to maintain.admin-ui/plugins/admin/components/Health/utils/index.ts (1)
1-1: Re-export offormatServiceNameis appropriateBarrel-exporting the formatter keeps the Health utils API tidy and consistent with other modules.
admin-ui/plugins/admin/components/MAU/components/TokenDistributionChart.tsx (1)
14-69: TokenDistributionChart logic and theming integration look solidThe chart correctly derives its segments from
MauSummary, uses the theme-awaregetChartColors(state.theme), falls back to a translated “no data” state whentotalTokensis zero, and wires labels to the new i18n keys (fields.cc_tokens,fields.authz_code_tokens,titles.token_distribution,messages.no_mau_data) as expected.admin-ui/plugins/admin/components/MAU/components/MauTrendChart.tsx (1)
18-53: MauTrendChart data shaping and themed rendering are correctThe component cleanly augments input data with
monthLabel, formats values withformatNumber, uses the translated labels (titles.mau_trend,fields.monthly_active_users), and pulls colors fromgetChartColors(state.theme)via the newuseThemehook; overall the implementation looks correct and maintainable.admin-ui/app/locales/en/translation.json (1)
64-65: MAU and Health i18n keys look consistent with new UI usage; verify cross-locale coverageThe added MAU/Health keys (actions.refresh, fields.date_preset_*, token counters, messages for service status/MAU loading, and new titles) align with the new MAU and Health components and appear well named and phrased.
To ensure all locales stay in sync, verify that the following keys exist in each translation file (en, es, fr, pt):
- Fields: cc_tokens, authz_code_tokens, date_preset_3m, date_preset_6m, date_preset_1y, date_preset_custom, total_mau, total_tokens
- Messages: service_status_up, service_status_down, service_status_degraded, service_status_unknown, services_healthy_count, error_fetching_health_status, no_services_found, status_online, status_offline, status_degraded, status_unknown, no_mau_data, error_loading_data, mau_loading, vs_previous_period
- Titles: mau_dashboard, mau_trend, token_distribution, token_trends
- Actions: refresh
admin-ui/plugins/admin/components/Health/components/HealthStatusBadge.tsx (1)
19-76: LGTM!The component correctly uses the
useTheme()hook and properly transforms data for the stacked area chart. The translation keys and color mappings are consistent with the MAU constants.admin-ui/plugins/admin/components/MAU/components/DateRangeSelector.tsx (1)
12-79: LGTM!The date range selector is well-implemented with proper theme integration, preset handling, and loading state management. The Material-UI DatePicker components are correctly configured with the Dayjs adapter.
admin-ui/plugins/admin/components/Health/HealthPage.tsx (1)
12-85: LGTM!The HealthPage component is well-structured:
- SetTitle is correctly called at the top level
- Theme integration via
useTheme()andgetThemeColoris proper- The
useHealthStatushook provides clean data access with loading/error states- Refresh functionality with loading indicator is correctly implemented
- Conditional rendering for loading, error, and empty states is appropriate
admin-ui/plugins/admin/components/MAU/hooks/useMauStats.ts (1)
95-131: LGTM!The hook is well-structured:
- Properly gates the query with auth token and date range validation
- Applies appropriate cache configuration
- Uses a select transformer to shape the data
- Computes the summary via useMemo for efficiency
- Returns a clean API with all necessary loading/error states
admin-ui/plugins/admin/components/MAU/MauPage.tsx (1)
22-143: LGTM!The MauPage component is well-implemented:
- SetTitle is correctly called at the top level
- Cedarling permission checks are properly integrated
- Date range state management with presets is well-structured
- Event handlers use
useCallbackfor optimization- Conditional rendering for loading, error, and empty states is appropriate
- Component composition with MAU charts and summaries is clean
admin-ui/plugins/admin/components/Health/hooks/useHealthStatus.ts (1)
77-107: LGTM!The hook is well-structured:
- Properly gates the query with auth token validation
- Applies appropriate cache configuration via
HEALTH_CACHE_CONFIG- Uses a select transformer to normalize and sort service data
- Computes overall metrics via
useMemofor efficiency- Returns a comprehensive API with all necessary query states and actions
admin-ui/plugins/admin/components/Health/components/ServiceStatusCard.tsx (1)
1-47: ServiceStatusCard helper + component look correct and aligned with health types/constants
getStatusMessagecleanly covers all status cases with i18n keys and falls back toservice.error; the component usesformatServiceName,HealthStatusBadge, andthemeColors.backgroundas expected, with safe conditional styling on errors. No issues spotted.admin-ui/plugins/admin/components/MAU/utils/formatters.ts (1)
1-35: MAU formatting helpers are robust and side‑effect free
formatMonthnow correctly validates the MM portion and falls back to the original string on invalid months;formatNumber,calculatePercentChange, andformatPercentChangebehave consistently and are suitable for MAU displays. No changes requested.admin-ui/app/locales/es/translation.json (1)
64-66: Spanish MAU/health translation keys are consistent with usageNew
actions.refresh, MAU field labels, health/MAUmessages.*(includingservices_healthy_countwith correct{{healthyCount}}/{{totalCount}}placeholders), and MAU-relatedtitlesalign with the component and constant keys added elsewhere. No structural or placeholder issues found.Also applies to: 362-369, 867-882, 1021-1024
admin-ui/plugins/admin/components/Health/constants.ts (1)
1-42: Health status configuration and mappings are type‑safe and coherentCache timings are reasonable,
STATUS_MAPcorrectly usessatisfies Record<string, ServiceStatusValue>for type safety, and colors/label keys/badge colors cover allServiceStatusValuevariants consistently. Looks good.admin-ui/plugins/admin/components/MAU/utils/dataAugmentation.ts (1)
1-65: MAU data augmentation correctly bounds data to the selected month range
generateMonthRange,transformRawStatEntry, andcreateEmptyStatEntryare straightforward;augmentMauDatanow filters to the requested[startDate, endDate]month set and fills missing months with empty entries while preserving existing data within range. Input arrays are not mutated. No changes requested.admin-ui/app/locales/fr/translation.json (1)
174-175: French MAU/health translations align with the new UI and constantsAdded
actions.refresh, MAU metric/date-preset field labels, health/MAUmessages.*(including status andservices_healthy_countplaceholders), and MAU dashboardtitlesall match the keys used by Health/MAU components andSTATUS_LABEL_KEYS. No structural issues identified.Also applies to: 483-490, 805-820, 947-951
duttarnab
left a comment
duttarnab
left a comment
There was a problem hiding this comment.
- MAU page data does not matches with the dashboard
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
admin-ui/plugins/admin/components/MAU/utils/dataAugmentation.ts (1)
43-65: LGTM! Data augmentation correctly filters and fills gaps.The function properly handles both empty and populated data cases. Notably, line 56 filters the input data to only include months within the requested range (
monthSet.has(entry.month)), which addresses the concern raised in the previous review about bounding the series to the selected date range. The logic correctly fills gaps with empty entries and returns a sorted, continuous monthly series.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
admin-ui/plugins/admin/components/MAU/types/MauTypes.ts(1 hunks)admin-ui/plugins/admin/components/MAU/utils/dataAugmentation.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
admin-ui/plugins/admin/components/MAU/utils/dataAugmentation.ts (1)
admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (2)
RawStatEntry(11-23)MauStatEntry(3-9)
admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
admin-ui/plugins/admin/components/MAU/types/index.ts (9)
MauStatEntry(2-2)RawStatEntry(3-3)MauDateRange(4-4)MauSummary(5-5)MauSummaryCardProps(6-6)DateRangePreset(7-7)TokenDistributionData(8-8)MauChartProps(9-9)DateRangeSelectorProps(10-10)
🔇 Additional comments (4)
admin-ui/plugins/admin/components/MAU/types/MauTypes.ts (1)
1-70: LGTM! Well-structured TypeScript type definitions.The MAU type definitions are comprehensive and well-organized. The interfaces properly distinguish between API response shapes (RawStatEntry with optional fields) and internal data models (MauStatEntry with required fields), use Dayjs consistently for date handling, and provide appropriate prop types for UI components. The type design supports type safety throughout the MAU feature implementation.
admin-ui/plugins/admin/components/MAU/utils/dataAugmentation.ts (3)
4-6: LGTM! Clean date formatting utility.The function correctly formats Dayjs dates to YYYYMM string format for API compatibility.
8-19: LGTM! Correct month range generation.The function properly generates an inclusive array of month numbers in YYYYMM format. The use of
startOf('month')ensures consistent month boundaries, and the loop condition correctly includes both start and end months.
33-41: LGTM! Clean empty entry factory.The function correctly creates zero-filled MAU stat entries for gap filling.
Resolved conflicts in fr and pt translation files by keeping both service/MAU translations from HEAD and audit translations from main.
syntrydy
force-pushed
the
admin-ui-2503
branch
from
884cf64 to
deea088
Compare
|
4 participants
#2503
Closes #2503
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.