HDDS-15985. Add new Overview page for Ozone Manager by spacemonkd · Pull Request #10900 · apache/ozone

spacemonkd · 2026-07-29T18:01:32Z

What changes were proposed in this pull request?

HDDS-15985. Add new Overview page for Ozone Manager

Please describe your PR in detail:
This PR adds the new React based Overview page for Ozone Manager

What is the link to the Apache JIRA

https://issues.apache.org/jira/browse/HDDS-15985

How was this patch tested?

Patch was tested manually via mocked DB.

Screen.Recording.2026-07-29.at.23.20.12.mov

Output of "Copy Arguments" button at the end:

<configuration>
  <property>
    <name>-Dorg.apache.ratis.thirdparty.io.netty.allocator.useCacheForAllThreads</name>
    <value>false</value>
  </property>
  <property>
    <name>-XX:+PrintGCDetails</name>
    <value>Enabled</value>
  </property>
</configuration>

spacemonkd · 2026-07-30T03:45:28Z

@chihsuan would you like to take a look as well?

chihsuan · 2026-07-30T10:28:05Z

@chihsuan would you like to take a look as well?

Thanks for the ping! Sure, I'll take a look. 🙂

chihsuan

Nice work overall, @spacemonkd! The page structure is clean, and the mock setup makes local development easy.

I tested it with both the mock and a real OM and found a few issues. Please see the inline comments.

I also wanted to share a few broader suggestions. None of these need to be addressed in this PR: 🙂

Unit tests: I understand that the current diff is already quite large 😅. the pure parsers in overview.ts should be easy to cover.
JMX as a UI contract: The UI currently depends directly on JMX bean shapes, which can change silently when the Java implementation evolves. It might be worth considering documenting or validating the bean shapes consumed by the UI. Longer term, a dedicated REST endpoint could provide a more stable contract.
Data fetching: It would be useful to decide early whether the new UIs should adopt a server-state library such as TanStack Query. I left an inline comment with more context.
Storybook: As the shared component library grows, what do you think about setting up Storybook? I think this could help develop, review, and document shared components in isolation.

Happy to help with any of these follow-ups.

chihsuan · 2026-08-01T01:42:24Z

+
+export interface OzoneManagerInfoBean {
+  RpcPort: string;
+  RatisRoles: string;


I tried to run this against a real OM, and found the Overview page renders blank. It seems that RatisRoles in the JMX bean is an array of tuples, not a string:

ozone/hadoop-ozone/ozone-manager/src/main/java/org/apache/hadoop/ozone/om/OMMXBean.java

Line 32 in ebe71f6

List<List<String>> getRatisRoles();

I would change RatisRoles: string to string[][] and update the mock.

chihsuan · 2026-08-01T01:43:23Z

+ * `{ HostName: h1 | Node-Id: om1 | Ratis-Port : 9872 | Role: FOLLOWER } {...}`.
+ */
+export function parseRatisRoles(raw: string, currentNodeId?: string): RatisRole[] {
+  const groups = raw?.match(/\{[^}]*\}/g) ?? [];


Same issue as above: with a real OM, raw.match(...) throws TypeError: raw.match is not a function. Could we parse the tuple array here?

chihsuan · 2026-08-01T01:44:53Z

      },
+      // JMX endpoint — proxied to the json-server mock in dev (see mock/server.cjs).
+      '/jmx': {
+        target: 'http://localhost:9878',


I hit a port conflict here when trying to run this against a real OM. 9878 is also the S3 Gateway port in the Compose cluster, and pointing at a real OM requires editing this file.

Would it make sense to support an env override? e.g. target: process.env.OM_JMX_TARGET ?? 'http://localhost:9878'?

chihsuan · 2026-08-01T01:49:53Z

+  }
+  const size = Number(match[1]);
+  const unit = (match[2] ?? 'B').toUpperCase();
+  const megabytes = unit === 'G' ? size * 1024 : unit === 'K' ? Math.round(size / 1024) : size;


I noticed that the JVM interprets an -Xmx value without a suffix as bytes, but the B case currently labels the raw value as MB. For example, -Xmx2511000000 would be displayed as 2,511,000,000 MB.

I think we should divide byte values by 1024x1024 before displaying them as MB and could probably consider using a switch/case for better readability

function formatHeap(xmx: string | undefined): string { if (!xmx) { return 'Not set'; } const match = xmx.slice(4).match(/^(\d+)\s*([kKmMgG])?/); if (!match) { return xmx.slice(4); } const size = Number(match[1]); const unit = (match[2] ?? 'B').toUpperCase(); let megabytes: number; switch (unit) { case 'G': megabytes = size * 1024; break; case 'M': megabytes = size; break; case 'K': megabytes = size / 1024; break; default: megabytes = size / (1024 * 1024); break; } return `${Math.round(megabytes).toLocaleString('en-US')} MB`; }

chihsuan · 2026-08-01T01:55:15Z

+    loading,
+    error,
+  } = useJmxBean<OzoneManagerInfoBean>(JMX_QUERY.omInfo, refreshToken);
+  const { data: ratis } = useJmxBean<RatisServerBean>(JMX_QUERY.ratisServer, refreshToken);


These hooks only consume data, so failures in the Ratis or leader-election queries appear as — or missing fields. Could we handle these query errors, at least by showing a partial-data warning? Or do we plan to do this in a follow-up?

chihsuan · 2026-08-01T01:58:32Z

+/** Fetch a single MBean for a query (the first bean), or `undefined`. */
+export async function fetchJmxBean<T>(qry: string): Promise<T | undefined> {
+  const beans = await fetchJmxBeans<T>(qry);
+  return beans[0];


When no MBean matches a query, the JMX servlet can return 200 OK with {"beans":[]}.

I think this might happen when an MBean isn't yet registered, during service reinitialization, or when the UI and OM expose different MBean versions. Would it be worth representing “no matching bean” as an explicit empty state and showing a message such as No JMX data available?

chihsuan · 2026-08-01T02:02:31Z

+    dataIndex: 'hostName',
+    key: 'hostName',
+    render: (hostName: string, row) => (
+      <TextLink href="#" style={{ fontWeight: row.isCurrent ? 600 : undefined }}>


Is href="#" intentional here, or a placeholder for now?

If the real link is planned for a follow-up, would plain text work better for now so it doesn't read as clickable?

chihsuan · 2026-08-01T02:18:51Z

+ * Fetch MBeans for a query, sharing a single request across all callers that ask
+ * for the same query. Failed requests are evicted so they can be retried.
+ */
+export function fetchJmxBeans<T>(qry: string): Promise<T[]> {


Since this is the first data-fetching page in the new UI, though, do we want to consider a library like TanStack Query for this layer?

As more OM and SCM pages add API queries, this may become difficult to maintain and introduce edge cases such as the refresh/cache race.

Other ASF React UIs already use this approach, including the Apache Airflow UI and Apache APISIX Dashboard. Since this introduces a dependency, it could also be tracked as a follow-up if it is outside this PR’s scope.

chihsuan · 2026-08-01T02:24:35Z

+ * Renders a section's async state: a skeleton while loading, an error alert on
+ * failure, or the resolved content.
+ */
+export const SectionBody: React.FC<SectionBodyProps> = ({


SectionBody handles loading and errors, but not the empty state here. I think we can consider centralizing it so that state management is all in this component.

For example, adding an isEmpty prop rendering a small "No data" placeholder would make
this visible with a minimal diff.

Longer term, if we adopt TanStack Query (see the other comment), its Suspense mode
would restructure this nicely, like below:

<ErrorBoundary fallback={<Alert ... />}> <Suspense fallback={<Skeleton rows={2} />}> <InstanceDetailsContent /> {/* useSuspenseQuery inside, data typed non-null */} </Suspense> </ErrorBoundary>

Not asking for that in this PR, just sharing some thoughts. 🙂

…on bug

HDDS-15985. Add new Overview page for Ozone Manager

c2054c1

spacemonkd requested review from ArafatKhan2198, dombizita, errose28 and ivandika3 July 29, 2026 18:01

spacemonkd self-assigned this Jul 29, 2026

spacemonkd added om UI labels Jul 29, 2026

spacemonkd marked this pull request as ready for review July 29, 2026 18:02

Fix lint issues

ebe71f6

chihsuan reviewed Aug 1, 2026

View reviewed changes

spacemonkd added 2 commits August 3, 2026 14:22

Migrate to TanStack Query, fix RatisRoles type, address size conversi…

f9aa3a9

…on bug

Switch the layout for OM

734c39d

spacemonkd force-pushed the HDDS-15985 branch from 8e94d6d to 734c39d Compare August 4, 2026 06:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

HDDS-15985. Add new Overview page for Ozone Manager - #10900

HDDS-15985. Add new Overview page for Ozone Manager#10900
spacemonkd wants to merge 4 commits into
apache:HDDS-11541from
spacemonkd:HDDS-15985

spacemonkd commented Jul 29, 2026

Uh oh!

spacemonkd commented Jul 30, 2026

Uh oh!

chihsuan commented Jul 30, 2026

Uh oh!

chihsuan left a comment

Uh oh!

chihsuan Aug 1, 2026

Uh oh!

chihsuan Aug 1, 2026

Uh oh!

chihsuan Aug 1, 2026

Uh oh!

chihsuan Aug 1, 2026

Uh oh!

chihsuan Aug 1, 2026

Uh oh!

chihsuan Aug 1, 2026

Uh oh!

chihsuan Aug 1, 2026

Uh oh!

chihsuan Aug 1, 2026

Uh oh!

chihsuan Aug 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

spacemonkd commented Jul 29, 2026

What changes were proposed in this pull request?

What is the link to the Apache JIRA

How was this patch tested?

Uh oh!

spacemonkd commented Jul 30, 2026

Uh oh!

chihsuan commented Jul 30, 2026

Uh oh!

chihsuan left a comment

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants