observability: new page based on dataplane observability API by nicolaferraro · Pull Request #2205 · redpanda-data/console

nicolaferraro · 2026-02-03T14:47:58Z

When the feature flag is toggled, console starts showing this and cloud-ui stops showing the old one (different ff for Serverless and Serverful).

This is a first iteration, it allows to select the time range (but only from now back to 6 hours). I need to publish the max lookback time in the API to have a better control bar.

malinskibeniamin · 2026-02-03T15:03:38Z

frontend/package.json

    "react-markdown": "^10.1.0",
    "react-simple-code-editor": "^0.14.1",
    "react-syntax-highlighter": "^15.6.6",
+    "recharts": "2.15.4",


Let's use recharts v3 shadcn-ui/ui#7669 which will require components to be upgraded.

We can do that in a followup PR

malinskibeniamin · 2026-02-03T15:07:25Z

frontend/src/routes/observability/index.tsx

+
+import ObservabilityPage from '../../components/pages/observability/observability-page';
+
+export const Route = createFileRoute('/observability/')({


will this be required for standalone mode

sago2k8 · 2026-02-03T15:15:33Z

@claude could you review, focus on simplicity and ensure it follows some well known frontend best practices

malinskibeniamin · 2026-02-03T15:17:02Z

frontend/src/components/redpanda-ui/components/chart.tsx

this component will require updating to support shadcn chart + recharts v3 major release.

malinskibeniamin · 2026-02-03T15:17:32Z

frontend/src/components/pages/observability/observability-toolbar.tsx

+export type TimeRange = '5m' | '15m' | '30m' | '1h' | '3h' | '6h';
+
+const TIME_RANGE_MS: Record<TimeRange, number> = {
+  '5m': 5 * 60 * 1000,
+  '15m': 15 * 60 * 1000,
+  '30m': 30 * 60 * 1000,
+  '1h': 60 * 60 * 1000,
+  '3h': 3 * 60 * 60 * 1000,
+  '6h': 6 * 60 * 60 * 1000,
+};


@weeco implemented this for transcripts/traces UI, can you please adapt a similar approach to follow the same practices?

https://github.com/redpanda-data/console/pull/2202/changes#diff-3d39ec19551b863b267e002b020aa0c055b390f7f706b8c24147427b3c111222R83-R92

We can move some things to the utils directories.

malinskibeniamin · 2026-02-03T15:17:58Z

frontend/src/components/pages/observability/observability-toolbar.tsx

+  // biome-ignore lint/correctness/useExhaustiveDependencies: refreshKey triggers recalculation on refresh
+  const timeRange = useMemo(() => {
+    const now = new Date();
+    const startTime = new Date(now.getTime() - TIME_RANGE_MS[selectedTimeRange]);
+
+    return {
+      start: startTime,
+      end: now,
+    };
+  }, [selectedTimeRange, refreshKey]);


do we still need useExhaustiveDependencies?

weeco · 2026-02-03T15:18:20Z

frontend/src/routes/observability/index.tsx

+    icon: ActivityIcon,
+  },
+  beforeLoad: () => {
+    const isObservabilityEnabled = isServerless()


In addition to this we also need to make sure that this is actually configured in the backend I'd say - specifically thinking of self-hosted community users and customers here. Not sure if we want to disable/hide the sidebar or show a setup / onboarding page in this case.

malinskibeniamin · 2026-02-03T15:19:15Z

frontend/src/components/pages/observability/observability-toolbar.tsx

+ * by the Apache License, Version 2.0
+ */
+
+import { Box, Flex, Text } from '@redpanda-data/ui';


Please use Redpanda UI registry instead of @redpanda-data/ui for this new observability page.

malinskibeniamin · 2026-02-03T15:20:36Z

frontend/src/components/pages/observability/metric-chart.tsx

+            tickFormatter={(value) => {
+              // Format large numbers with K, M, B suffixes
+              if (value >= 1_000_000_000) {
+                return `${(value / 1_000_000_000).toFixed(1)}B`;
+              }
+              if (value >= 1_000_000) {
+                return `${(value / 1_000_000).toFixed(1)}M`;
+              }
+              if (value >= 1000) {
+                return `${(value / 1000).toFixed(1)}K`;
+              }
+              // Show decimals for small values
+              if (value < 10) {
+                return value.toFixed(2);
+              }
+              if (value < 100) {
+                return value.toFixed(1);
+              }
+              return value.toFixed(0);
+            }}
+            tickLine={false}


I think we should filter using storage utils

malinskibeniamin · 2026-02-03T15:20:57Z

frontend/src/components/pages/observability/metric-chart.tsx

+ */
+
+import { timestampFromMs } from '@bufbuild/protobuf/wkt';
+import { Alert, AlertIcon, Box, Heading, Skeleton, Text } from '@redpanda-data/ui';


blocker: use redpanda UI registry

malinskibeniamin · 2026-02-03T17:49:22Z

@claude could you review, focus on simplicity and ensure it follows some well known frontend best practices

@sago2k8 it's not enabled yet AFAIK

nicolaferraro · 2026-02-03T18:13:51Z

I did a first pass to remove the old components and fixing stuff. About the self-hosted mode, currently the sidebar is only shown for embedded mode only. Don't know if there's a clean way to make this work for self-hosted as well

malinskibeniamin · 2026-02-04T09:00:35Z

@claude review

claude · 2026-02-04T09:00:51Z

Claude finished @malinskibeniamin's task in 2m 36s —— View job

Code Review

I've reviewed the observability page implementation focusing on simplicity and frontend best practices. Here's my comprehensive feedback:

Summary

Overall, the implementation is well-structured with good test coverage and proper TypeScript typing. However, there are several important issues to address, particularly regarding code consistency with existing patterns and some potential bugs.

Critical Issues (Must Fix)

1. Biome Linting Violations

The github-actions bot has flagged multiple formatting issues that should be addressed. These are primarily spacing/formatting issues in:

metric-chart.tsx: Lines 18, 20, 130, 138, 149, 153, 163
observability-page.tsx: Lines 19, 22, 83

Fix linting issues →

2. Inconsistent Import Paths

metric-chart.tsx:20 - The import statement doesn't follow the pattern used elsewhere:

import { prettyNumber } from 'utils/utils';

Should be relative like other imports in the file:

import { prettyNumber } from '../../../utils/utils';

This is inconsistent with the other imports in the same file which use relative paths like ../../redpanda-ui/components/.

3. `useExhaustiveDependencies` Pattern

Both observability-page.tsx:52 and observability-toolbar.tsx:44 use biome-ignore comments for useExhaustiveDependencies. According to the existing review comment from @malinskibeniamin, this pattern should be reconsidered. The refreshKey dependency pattern is valid, but the implementation could be cleaner:

Current approach (observability-page.tsx:42-53):

const refreshData = useCallback(() => {
  setRefreshKey((prev) => prev + 1);
  refetch();
}, [refetch]);

// biome-ignore lint/correctness/useExhaustiveDependencies: refreshKey triggers recalculation on refresh
const timeRange = useMemo(() => calculateTimeRange(selectedTimeRange), [selectedTimeRange, refreshKey]);

Suggested approach: Consider using a timestamp or Date object instead of an incrementing key for better clarity:

const [lastRefreshTime, setLastRefreshTime] = useState(Date.now());

const refreshData = useCallback(() => {
  setLastRefreshTime(Date.now());
  refetch();
}, [refetch]);

const timeRange = useMemo(
  () => calculateTimeRange(selectedTimeRange), 
  [selectedTimeRange, lastRefreshTime]
);

This makes the intent clearer and avoids the biome-ignore.

High Priority Issues

4. Code Duplication in Time Range Calculation

The time range calculation logic is duplicated between observability-page.tsx and observability-toolbar.tsx:

observability-page.tsx:53 uses calculateTimeRange(selectedTimeRange)
observability-toolbar.tsx:45-53 reimplements the same logic inline

The calculateTimeRange function exists and is exported (observability-toolbar.tsx:111-119), but the toolbar component doesn't use it. This is unnecessary duplication and a maintenance risk.

Fix: Remove the inline calculation in ObservabilityToolbar and use the exported function:

// Current (lines 45-53):
const timeRange = useMemo(() => {
  const now = new Date();
  const startTime = new Date(now.getTime() - TIME_RANGE_MS[selectedTimeRange]);
  return { start: startTime, end: now };
}, [selectedTimeRange, refreshKey]);

// Should be:
const timeRange = useMemo(
  () => calculateTimeRange(selectedTimeRange), 
  [selectedTimeRange, refreshKey]
);

5. Grid Layout Classes

observability-page.tsx:83 - The grid classes appear correct but differ from the Biome suggestion. Current:

<div className="grid gap-6 grid-cols-1 lg:grid-cols-2">

Biome suggests:

<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">

The suggested order follows Tailwind's recommended class ordering (layout → spacing → responsive).

6. Error Handling Could Be More Specific

metric-chart.tsx:135-142 - The error state treats all errors the same way. Consider differentiating between:

Network errors (suggest retry)
404 (metric not found)
Permission errors
Timeout errors

This would provide better UX and debugging information.

Medium Priority Issues

7. Magic Numbers in Color Array

metric-chart.tsx:109-115 - The chart colors are hardcoded. Consider:

// Current:
const colors = [
  'var(--color-chart-1)',
  'var(--color-chart-2)',
  // ...
];

// Better: Define as constant outside component
const CHART_COLORS = [
  'var(--color-chart-1)',
  'var(--color-chart-2)',
  'var(--color-chart-3)',
  'var(--color-chart-4)',
  'var(--color-chart-5)',
] as const;

This prevents recreation on every render and makes the colors reusable.

8. Potential NaN Timestamp

metric-chart.tsx:237-244 - Multiple checks for NaN timestamp, but the flow could be simplified:

const timestamp = payload?.[0]?.payload?.timestamp;
if (!timestamp || typeof timestamp !== 'number') return '';
const date = new Date(timestamp);
if (!date.getTime()) return ''; // getTime() returns 0 for invalid dates

9. Timezone Hardcoded to UTC

observability-toolbar.tsx:104 and metric-chart.tsx:179, 250 - UTC is hardcoded. Consider:

Making timezone configurable via user preferences
Or at minimum, document why UTC is required (e.g., backend always returns UTC)

10. Type Safety Could Be Improved

metric-chart.tsx:40-60 - The addDataPoint function accepts point with optional properties but doesn't validate the structure deeply. Consider using a more specific type or adding runtime validation.

Low Priority / Nice to Have

11. Chart Height Hardcoded

metric-chart.tsx:168 - Height is hardcoded to 250px. Consider making this configurable via props if different charts need different heights in the future.

12. Loading State Could Show Skeleton Count

observability-page.tsx:55-62 - Shows 3 skeleton cards regardless of how many charts will actually load. Consider showing the correct number if queries is available from cache.

13. Test Coverage Gaps

observability-page.test.tsx - Tests are good but missing:

Test for the refresh functionality (appGlobal.onRefresh)
Test for time range changes
Test for toolbar interactions

14. Accessibility Improvements

observability-toolbar.tsx:73-108 - The toolbar could benefit from ARIA labels
metric-chart.tsx - Consider adding aria-label to charts for screen readers
The refresh button uses global state but should ideally have keyboard support

Performance Observations

✅ Good:

Proper use of useMemo to prevent unnecessary recalculations
useCallback for event handlers
Chart data transformation is memoized

⚠️ Could be improved:

observability-page.tsx:84-86 - The .map() creates new <MetricChart> components on every render. Consider adding React.memo() to MetricChart if queries list is large.

Code Style & Consistency

✅ Good:

Consistent TypeScript typing throughout
Good separation of concerns (separate files for chart, toolbar, page)
Proper copyright headers
Clean component structure

⚠️ Inconsistencies:

Import path styles (relative vs absolute) - see issue Add prometheus metrics #2
Some components use functional declarations while others might benefit from consistency

Security

✅ No security issues identified. The code:

Uses proper protobuf message creation
Doesn't execute arbitrary code
Doesn't expose sensitive data
Uses proper XSS protection (React's built-in escaping)

Testing

✅ Good test coverage with proper mocking and protobuf usage. Tests cover:

Empty state
Loading state
Error state
Success with data

Addressing Existing Review Comments

From previous reviewers:

@malinskibeniamin: "use redpanda UI registry" ✅ - All components correctly use ../../redpanda-ui/components/ imports. No @redpanda-data/ui imports found.
@malinskibeniamin: "filter using storage utils" ⚠️ - I couldn't find storage utils in the codebase. If this refers to persisting filter state, that's not currently implemented.
@malinskibeniamin: "useExhaustiveDependencies" - Addressed in issue Create helm chart #3 above.
@weeco: "similar approach to transcripts/traces UI" - The current implementation does follow a similar pattern with toolbar + data grid layout.
@weeco: "self-hosted mode" - The route guard (routes/observability/index.tsx:23-33) only checks feature flags. No backend configuration check is present. This could lead to showing an empty page if the backend doesn't support the API.

Recommendations Priority

Must fix before merge:

Fix all Biome linting issues (automated suggestions available)
Fix inconsistent import path (issue Add prometheus metrics #2)
Remove duplicated time range calculation (issue Add dark theme #4)

Should fix before merge:
4. Consider alternative to useExhaustiveDependencies pattern (issue #3)
5. Add backend configuration check for self-hosted mode (issue from @weeco)
6. Fix grid class ordering (issue #5)

Can be addressed in follow-up:
7. Improve error handling specificity
8. Extract color constants
9. Make timezone configurable
10. Add missing test coverage
11. Performance optimization with React.memo()

Conclusion

This is a solid first iteration of the observability page. The core functionality is well-implemented with good separation of concerns and test coverage. The main areas for improvement are:

Code consistency - Import paths and React patterns should be uniform
Simplification - Remove code duplication in time range calculations
Robustness - Add backend configuration checks for self-hosted scenarios
Polish - Address linting issues and class ordering

The implementation follows good React practices overall and the component architecture is clean. Once the critical issues are addressed, this will be ready to merge.

malinskibeniamin · 2026-02-05T14:44:36Z

frontend/src/components/pages/observability/metric-chart.tsx

+            tickFormatter={(value) => {
+              // Use prettyNumber for large values (handles K, M, B formatting)
+              if (value >= 1000) {
+                return prettyNumber(value).toUpperCase();
+              }
+              // Show decimals for small values
+              if (value < 10) {
+                return value.toFixed(2);
+              }
+              if (value < 100) {
+                return value.toFixed(1);
+              }
+              return value.toFixed(0);
+            }}


let's use storage utils to get proper formatting for these units

malinskibeniamin · 2026-02-05T14:45:36Z

frontend/src/utils/route-utils.tsx

+    icon: ActivityIcon,
+    visibilityCheck: routeVisibility(
+      () =>
+        isEmbedded() &&


This should be gated by isAdpEnabled() too, right? Or will we have observability in self-hosted too 1 day, somehow?

Technically it's possible to provide it in self-hosted, by configuring a local prom server. There's an internal discussion about it. For the moment, I think this condition only enables it in embedded mode with a specific feature flag.

malinskibeniamin · 2026-02-05T14:46:13Z

frontend/src/react-query/api/observability.ts

+  return useQuery(listQueries, listQueriesRequest, {
+    ...opts,
+    retry: fastFailRetry,
+  });


Do we want to poll this?

I did not wire auto-polling since the page where charts are used has an auto-refresh button, that also moves the clock forward.

Polling without applying a time shift does nothing (the API uses an absolute time range).

malinskibeniamin · 2026-02-05T14:46:51Z

frontend/src/components/pages/observability/utils/time-range.ts

can we rely on work from @weeco for transcripts? and use the same approach for the time ranges

nicolaferraro · 2026-02-05T17:48:00Z

Done another pass, I hope I got what you meant :)

weeco requested a review from malinskibeniamin February 3, 2026 14:56

malinskibeniamin reviewed Feb 3, 2026

View reviewed changes

sago2k8 requested review from eblairmckee and sago2k8 February 3, 2026 15:14

malinskibeniamin reviewed Feb 3, 2026

View reviewed changes

weeco reviewed Feb 3, 2026

View reviewed changes

malinskibeniamin reviewed Feb 3, 2026

View reviewed changes

nicolaferraro force-pushed the nf/observability-api branch from fdd8c39 to ca4d5a3 Compare February 4, 2026 08:54

nicolaferraro force-pushed the nf/observability-api branch 2 times, most recently from a89aa76 to c826332 Compare February 5, 2026 14:15

nicolaferraro added 10 commits February 5, 2026 15:40

observability: add charts lib

f1abc1d

observability: pass feature flags from embedding app

17f679c

observability: import chart from ui lib

144a773

observability: add hooks for API call

f8d5d10

observability: add new observability page

e440fae

observability: add route conditional to feature flag

fe48999

observability: fix route-showing logic

66dc700

observability: switch to using the new UI registry

78e8eb1

observability: use conversion utils

8e07663

observability: regen routeTree

d713e21

nicolaferraro added 2 commits February 5, 2026 15:40

observability: first pass on comments

1c675d4

observability: move some code to utils

67a1902

nicolaferraro force-pushed the nf/observability-api branch from c826332 to 67a1902 Compare February 5, 2026 14:40

malinskibeniamin reviewed Feb 5, 2026

View reviewed changes

nicolaferraro added 2 commits February 5, 2026 18:24

observability: apply unit conversion to Y axis

bbc0d52

observability: use a common time-range approach with transcripts

3d3f765

nicolaferraro force-pushed the nf/observability-api branch from a1ae30a to 3d3f765 Compare February 5, 2026 17:44


		import ObservabilityPage from '../../components/pages/observability/observability-page';

		export const Route = createFileRoute('/observability/')({

Conversation

nicolaferraro commented Feb 3, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

malinskibeniamin Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sago2k8 commented Feb 3, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

malinskibeniamin Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

malinskibeniamin commented Feb 3, 2026

Uh oh!

nicolaferraro commented Feb 3, 2026

Uh oh!

malinskibeniamin commented Feb 4, 2026

Uh oh!

claude bot commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review

Summary

Critical Issues (Must Fix)

1. Biome Linting Violations

2. Inconsistent Import Paths

3. useExhaustiveDependencies Pattern

High Priority Issues

4. Code Duplication in Time Range Calculation

5. Grid Layout Classes

6. Error Handling Could Be More Specific

Medium Priority Issues

7. Magic Numbers in Color Array

8. Potential NaN Timestamp

9. Timezone Hardcoded to UTC

10. Type Safety Could Be Improved

Low Priority / Nice to Have

11. Chart Height Hardcoded

12. Loading State Could Show Skeleton Count

13. Test Coverage Gaps

14. Accessibility Improvements

Performance Observations

Code Style & Consistency

Security

Testing

Addressing Existing Review Comments

Recommendations Priority

Conclusion

Uh oh!

Choose a reason for hiding this comment

Uh oh!

malinskibeniamin Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

malinskibeniamin Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

malinskibeniamin Feb 3, 2026 •

edited

Loading

malinskibeniamin Feb 3, 2026 •

edited

Loading

claude bot commented Feb 4, 2026 •

edited

Loading

3. `useExhaustiveDependencies` Pattern

malinskibeniamin Feb 5, 2026 •

edited

Loading

malinskibeniamin Feb 5, 2026 •

edited

Loading